/* ATTIC BREEZE - HOMEOWNER VENTILATION CALCULATOR, CONVERSION-FIRST LANDING * /homeowners/ventilation-calculator/ (page 8863) 2026-08-28 * ========================================================================== * This sheet owns LAYOUT, GENERATED UI, STATES and MOTION for the rebuilt * landing page. It deliberately owns almost no colour and almost no * typography: those live in the Elementor data so the controls in the editor * still work months from now. * * THE SPLIT, restated because it is easy to break: * ELEMENTOR band background, boxed width, band padding, every heading and * paragraph colour/size/weight, every button's fill, border, * radius, padding and label, every image. * THIS SHEET grids and asymmetry, the connector rail, the plan panel bleed, * the airflow gauges, ruled rows, icon geometry, hover/focus, * the sticky CTA, and every responsive reflow. * * Anything here that DOES paint a colour is either a pseudo-element (Elementor * has no control for it) or an interaction state. Both are flagged inline. * No !important for colour anywhere in this file. * * PAGE: /homeowners/ventilation-calculator/ (WordPress page 8863) * NEEDS: novamira-sandbox/ab-hoc-lp2.php (priority 105) and the ab-hcx body * class from ab-hocalc-hybrid.php * FLAG: update_option('abv_hlp2_enabled','0') switches this layer off. * DOCS: wp-content/plugins/attic-breeze-ventilation/docs/homeowner-calculator-page.md */ /* ========================================================================== 1. TOKENS Homeowner palette only: Attic Navy, Breeze Home Green, white, Sky. No grey anywhere - every separator is an approved colour at low alpha. ========================================================================== */ body.ab-hcx .elementor-9063 { --abn-navy: #051124; --abn-green: #5C9D5E; --abn-green-txt: #3A6440; /* the same green, dark enough to carry small text on light (6.83:1) */ --abn-green-dk: #487A49; /* hover fill */ --abn-white: #FFFFFF; --abn-sky: #3993D5; --abn-tint: #EDF4EE; /* white tinted with Breeze Home Green - the light band ground */ --abn-rule: rgba(5, 17, 36, .14); --abn-rule-soft: rgba(5, 17, 36, .08); --abn-on-navy: rgba(255, 255, 255, .86); --abn-rule-navy: rgba(255, 255, 255, .16); --abn-green-15: rgba(92, 157, 94, .15); --abn-green-30: rgba(92, 157, 94, .30); --abn-blue: #346AC1; --abn-blue-14: rgba(52, 106, 193, .14); --abn-blue-30: rgba(52, 106, 193, .30); --abn-offwhite: #F0F2F4; --abn-measure: 1240px; --abn-gap: clamp(20px, 2.6vw, 40px); --abn-ease: cubic-bezier(.22, .61, .36, 1); } /* ========================================================================== 2. SHARED BAND MECHANICS Band padding and background are Elementor's. What is here is the things Elementor has no control for: the eyebrow's leading rule and a line measure. ========================================================================== */ body.ab-hcx .elementor-9063 .abn-band.e-con-full, body.ab-hcx .elementor-9063 .abn-band > .e-con-inner { width: 100%; } /* NO DECORATIVE RULE BEFORE THE EYEBROW (Vincent, 2026-08-28). This block used to draw a 26x2px green dash before every `.abn-eyebrow` heading, with `display:inline-flex` + `gap:12px` on the heading purely to seat it. Both the pseudo-element AND the flex/gap are DELETED rather than switched off, so nothing is left emitting an empty box or an unexplained 38px indent - and the eyebrows now start on the same left edge as the headline beneath them, which is the point. The four `.abhx-eyebrow` headings on the restored bands never had a rule, so all eleven eyebrows on the page are now one treatment. The words stay; their colour, size, tracking and margins remain Elementor settings on each heading widget. */ /* LINE MEASURE IS NOT SET HERE. It is an Elementor width control on each widget (Advanced > Width > Custom), so the editor keeps a handle on it. A CSS cap in ch or em would also have been wrong: both units resolve against the WIDGET WRAPPER'S 16px font, not the 52px headline inside it - measured, 48ch capped nothing and 14em capped a headline to 224px. .abn-measure / .abn-measure--tight remain in the markup as labels only. */ /* ========================================================================== 3. CALLS TO ACTION Fill, border, radius, padding, label and typography are all set per button in Elementor. This block adds only what the editor cannot: the hover lift and a focus ring that keeps the pill's ends round. NO ARROW AND NO UNDERLINE, on Vincent's instruction (2026-08-28). Both were deleted rather than switched off behind a flag or overridden to `none`, so there is nothing to fight if either is ever wanted back - and nothing left emitting a pseudo-element into a button that no longer expects one. ========================================================================== */ body.ab-hcx .elementor-9063 .abn-cta .elementor-button { display: inline-flex; align-items: center; justify-content: center; white-space: normal; overflow-wrap: break-word; transition: transform .2s var(--abn-ease), box-shadow .2s var(--abn-ease), background-color .2s var(--abn-ease), color .2s var(--abn-ease); } /* Interaction state - deliberately owned here, per the standing rule that Novamira owns states and Elementor owns the resting appearance. */ body.ab-hcx .elementor-9063 .abn-cta--primary .elementor-button:hover, body.ab-hcx .elementor-9063 .abn-cta--primary .elementor-button:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(5, 17, 36, .16), 0 0 14px var(--abn-green-30); } body.ab-hcx .elementor-9063 .abn-cta--primary .elementor-button:active { transform: translateY(0); } /* The text-forward CTA. Same destination, quieter voice, used in the bands where a third full pill would read as pressure rather than an offer. Its transparent fill, its absent border and its padding are Elementor settings on the widget, not rules here - so the editor's own controls still reach them. With the underline removed, the only things marking it as an action are its weight, its uppercase tracking and this hover fade. */ body.ab-hcx .elementor-9063 .abn-cta--text .elementor-button-text { transition: opacity .2s var(--abn-ease); } body.ab-hcx .elementor-9063 .abn-cta--text .elementor-button:hover .elementor-button-text { opacity: .78; } /* Focus must restate the radius or the page-wide focus rule squares the ends. */ body.ab-hcx .elementor-9063 .abn-cta .elementor-button:focus-visible { outline: 3px solid var(--abn-sky); outline-offset: 3px; border-radius: 999px; } /* Reassurance chips - the line under the hero CTA. Layout only; the words and their colour are one editable text widget. THE WIDGET WAS REMOVED FROM THE HERO ON 2026-08-29 (Vincent), along with the "See how it works" link. These rules are kept deliberately: they are inert with no `.abn-sure` in the tree, and they are what makes putting the chips back a one-widget job rather than a rebuild. */ body.ab-hcx .elementor-9063 .abn-sure p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0; } body.ab-hcx .elementor-9063 .abn-sure__i { display: inline-flex; align-items: center; gap: 9px; } body.ab-hcx .elementor-9063 .abn-sure__i::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--abn-green); flex: 0 0 6px; } /* ========================================================================== 4. BAND 2 - THE PAYOFF ("See what your home needs") An asymmetric two-column band: copy left, an example plan panel right that BLEEDS off the right edge of the measure on wide screens. That bleed is the whole reason this band does not read like another centred section. ========================================================================== */ body.ab-hcx .elementor-9063 .abn-see.e-con-full, body.ab-hcx .elementor-9063 .abn-see > .e-con-inner { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 4.5vw, 76px); row-gap: 40px; } /* The bleed. calc(50% - 50vw) is negative on any viewport wider than the measure and zero below it, so one declaration covers both cases without a media query fighting Elementor's own padding. 100vw includes the scrollbar, hence the guard on overflow-x further down. */ /* THE MATH, because it is easy to get wrong and the failure is silent (the panel simply gets clipped). The band is boxed to 1240 with 32px of inline padding, so its content edge sits 588px out from the centre line (1240 / 2 - 32). The distance from there to the viewport edge is therefore 50vw - 588, and pulling the panel out by that much lands it flush; the extra 16px is a deliberate inset so it never touches a phone-sized bezel or a scrollbar. min(0px, ...) makes the rule a no-op the moment the viewport is narrower than the measure, instead of pushing the panel inward. IF THE BAND'S CONTENT WIDTH IS EVER CHANGED IN ELEMENTOR, change 604 with it: it is (new width / 2) - 32 + 16. */ /* THE MATH, and the trap. A NEGATIVE END MARGIN DOES NOT WORK HERE: the panel is a grid item in a minmax(0,1fr) track, so the track sizing simply absorbs the margin and the panel comes out exactly as wide as before. Measured: margin-inline-end resolved to -116px and the width did not move by a pixel. Widening the item is what actually overflows the track. The band is boxed to 1240, so its inner edge sits 620px out from the centre line and the distance from there to the viewport edge is 50vw - 620. The extra 16 is a deliberate inset so the panel never runs into a scrollbar. max(0px, ...) makes it a no-op the moment the viewport is narrower than the measure. Verified flush-with-an-inset at 1280 / 1440 / 1920. REWRITTEN 2026-08-28, when every band moved onto the site's 1600 / 32 container. The old form `max(0px, calc(50vw - 636px))` hard-coded half of the 1240 measure and therefore went to ZERO on any viewport narrower than the measure - which, on a 1600 grid, is every screen below 1664px. The form below is written from the gutter instead of from the measure, so it is correct at both ends: 32px band gutter - 16px deliberate inset = 16px, always + half of whatever the container is NOT using = max(0, 50vw - 832px) 832 = 1600 / 2 + 32. Verified flush-with-a-16px-inset at 1280 / 1440 / 1920. If the band's content width is changed in Elementor again, change 832 with it: it is (new width / 2) + the gutter. */ @media (min-width: 1201px) { body.ab-hcx .elementor-9063 .abn-see { --abn-bleed: calc(16px + max(0px, calc(50vw - 832px))); } body.ab-hcx .elementor-9063 .abn-plan { inline-size: calc(100% + var(--abn-bleed, 0px)); max-inline-size: none; } } body.ab-hcx .elementor-9063 .abn-plan { position: relative; overflow: hidden; } /* A single hairline of Sky along the top edge of the plan panel: the one place Sky appears on the page, marking "this is data, not a promise". */ body.ab-hcx .elementor-9063 .abn-plan::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: linear-gradient(90deg, var(--abn-green) 0%, var(--abn-sky) 100%); } /* EXAMPLE tag row */ body.ab-hcx .elementor-9063 .abn-plan__tagrow.e-con-full, body.ab-hcx .elementor-9063 .abn-plan__tagrow > .e-con-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; } /* The metric grid. Two big figures on top, two plain rows beneath. 2026-08-29: THE VERTICAL HAIRLINE IS GONE. It ran between "Recommended setup" and "Target airflow" and, at 1px on navy with `gap: 0` either side of it, read as a rendering artifact rather than a divider. Separation is now REAL SPACE - a 34px column gap and a 26px row gap - which is what the panel wanted in the first place. One horizontal rule is kept, above "Installation style", because that IS a change of kind: two headline figures above, two supporting rows below. The second wide row does not get one; a rule between two rows of the same kind is noise. */ body.ab-hcx .elementor-9063 .abn-plan__grid.e-con-full, body.ab-hcx .elementor-9063 .abn-plan__grid > .e-con-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; row-gap: 26px; } body.ab-hcx .elementor-9063 .abn-metric { position: relative; min-width: 0; } body.ab-hcx .elementor-9063 .abn-metric--wide { grid-column: 1 / -1; } /* Drawn as a pseudo-element so no Elementor border control is overridden. Pulled up half the row gap so it sits between the rows, not on top of the label it precedes. */ body.ab-hcx .elementor-9063 .abn-metric--wide::before { content: ""; position: absolute; inset-block-start: -13px; inset-inline: 0; block-size: 1px; background: var(--abn-rule-navy); } body.ab-hcx .elementor-9063 .abn-metric--wide + .abn-metric--wide::before { content: none; } /* The figure and its unit sit on one baseline. Both are separate heading widgets so each keeps its own Elementor typography controls. */ body.ab-hcx .elementor-9063 .abn-metric__fig.e-con-full, body.ab-hcx .elementor-9063 .abn-metric__fig > .e-con-inner { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } body.ab-hcx .elementor-9063 .abn-fignum .elementor-heading-title { font-variant-numeric: tabular-nums; line-height: .92; display: block; } /* ========================================================================== 5. BAND 3 - EASE ("You don't need to know anything about attic ventilation") The four-step progression with a connecting rail, then the navy reassurance bar. This is the band the brief singled out; it is built to the reference rather than reinterpreted. ========================================================================== */ body.ab-hcx .elementor-9063 .abn-steps.e-con-full, body.ab-hcx .elementor-9063 .abn-steps > .e-con-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 34px); row-gap: 34px; } body.ab-hcx .elementor-9063 .abn-step { position: relative; min-width: 0; padding-block-start: 0; } /* The icon disc. Geometry only - the icon itself, its size and its colour are an Elementor Icon widget. */ body.ab-hcx .elementor-9063 .abn-step__ic .elementor-icon { inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--abn-rule); background: var(--abn-white); position: relative; z-index: 2; } /* Step four is the payoff - a filled disc, so the eye lands on "We do the rest". A state, not a resting default, hence it lives here. */ body.ab-hcx .elementor-9063 .abn-step--done .abn-step__ic .elementor-icon { border-color: var(--abn-green); background: var(--abn-green); } /* The rail. One hairline per step, drawn from the disc's centre to the next column, so it survives any number of steps and any wrap. */ body.ab-hcx .elementor-9063 .abn-step:not(:last-child) .abn-step__ic::after { content: ""; position: absolute; inset-block-start: 22px; inset-inline-start: 44px; inline-size: calc(100% + clamp(18px, 2.4vw, 34px) - 44px); block-size: 1.5px; background: var(--abn-rule); transform: scaleX(var(--abn-rail, 1)); transform-origin: left center; z-index: 1; } body.ab-hcx .elementor-9063 .abn-step__ic { position: relative; } /* The navy reassurance bar. One Elementor icon-list widget; this grids it. */ body.ab-hcx .elementor-9063 .abn-nope .elementor-icon-list-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(16px, 2.2vw, 34px); } body.ab-hcx .elementor-9063 .abn-nope .elementor-icon-list-item { align-items: flex-start; min-width: 0; } body.ab-hcx .elementor-9063 .abn-nope .elementor-icon-list-icon { padding-block-start: 2px; } body.ab-hcx .elementor-9063 .abn-nope .elementor-icon-list-text { overflow-wrap: break-word; } /* ========================================================================== 6. BAND 4 - RIGHT-SIZED ("It needs the right airflow") Three states of the same meter. The meter is generated by abv-hlp2.js because there is no Elementor control that could draw it; the three headings and the three lines of copy beside it are ordinary widgets. ========================================================================== */ body.ab-hcx .elementor-9063 .abn-states.e-con-full, body.ab-hcx .elementor-9063 .abn-states > .e-con-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); align-items: start; } body.ab-hcx .elementor-9063 .abn-state { min-width: 0; } body.ab-hcx .elementor-9063 .abn-gauge { position: relative; block-size: 190px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--abn-rule-navy); overflow: hidden; } body.ab-hcx .elementor-9063 .abn-gauge__fill { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 0; background: linear-gradient(180deg, var(--abn-green) 0%, rgba(92, 157, 94, .55) 100%); transition: block-size .9s var(--abn-ease); } /* The part of the airflow the intake vents cannot actually feed: present, but hatched, because it is capacity the attic never gets to use. */ body.ab-hcx .elementor-9063 .abn-gauge__over { position: absolute; inset-inline: 0; block-size: 0; background: repeating-linear-gradient(135deg, var(--abn-green-30) 0 6px, transparent 6px 12px); border-block-start: 1px solid var(--abn-green-30); transition: block-size .9s var(--abn-ease) .15s; } /* The target line: "what this attic actually needs". */ body.ab-hcx .elementor-9063 .abn-gauge__mark { position: absolute; inset-inline: 0; block-size: 0; border-block-start: 2px dashed var(--abn-on-navy); } body.ab-hcx .elementor-9063 .abn-state--right .abn-gauge { border-color: var(--abn-green); box-shadow: 0 0 0 1px var(--abn-green-30); } /* ========================================================================== 7. BAND 5 - WHAT YOU WALK AWAY WITH The quietest band on the page on purpose: rules and numerals, no cards, no imagery. It is the rest between two visual bands. ========================================================================== */ body.ab-hcx .elementor-9063 .abn-know.e-con-full, body.ab-hcx .elementor-9063 .abn-know > .e-con-inner { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); column-gap: clamp(36px, 5vw, 92px); row-gap: 40px; align-items: start; } @media (min-width: 1025px) { body.ab-hcx .elementor-9063 .abn-know__aside { position: sticky; inset-block-start: 116px; } } body.ab-hcx .elementor-9063 .abn-rows.e-con-full, body.ab-hcx .elementor-9063 .abn-rows > .e-con-inner { display: block; } body.ab-hcx .elementor-9063 .abn-row.e-con-full, body.ab-hcx .elementor-9063 .abn-row > .e-con-inner { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: clamp(14px, 1.6vw, 26px); align-items: baseline; } body.ab-hcx .elementor-9063 .abn-row { border-block-start: 1px solid var(--abn-rule); } body.ab-hcx .elementor-9063 .abn-row:last-child { border-block-end: 1px solid var(--abn-rule); } body.ab-hcx .elementor-9063 .abn-row__n .elementor-heading-title { font-variant-numeric: tabular-nums; line-height: 1; } /* ========================================================================== 8. BAND 6 - THE THREE FAMILIES Image-forward columns with no card chrome: photograph, name, one line, one text link. The point of the band is curiosity, not comparison. ========================================================================== */ body.ab-hcx .elementor-9063 .abn-fam.e-con-full, body.ab-hcx .elementor-9063 .abn-fam > .e-con-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.8vw, 44px); align-items: start; } body.ab-hcx .elementor-9063 .abn-famcol { min-width: 0; } body.ab-hcx .elementor-9063 .abn-famcol .abn-famimg img { aspect-ratio: 4 / 3; object-fit: cover; inline-size: 100%; block-size: auto; border-radius: 14px; display: block; transition: transform .45s var(--abn-ease); } body.ab-hcx .elementor-9063 .abn-famimg { overflow: hidden; border-radius: 14px; } body.ab-hcx .elementor-9063 .abn-famcol:hover .abn-famimg img { transform: scale(1.03); } /* Title reserve. "AeroBreeze" fits one line where a longer name wraps; without a reserve the rule under column one sits a line higher than its neighbours. Two lines of its own line-height, so it survives every type size. */ body.ab-hcx .elementor-9063 .abn-famname .elementor-heading-title { min-height: 1.3em; } /* ========================================================================== 9. BAND 7 - TRUST (compact) Deliberately short: a confidence beat near the end, not a feature section. ========================================================================== */ body.ab-hcx .elementor-9063 .abn-trust.e-con-full, body.ab-hcx .elementor-9063 .abn-trust > .e-con-inner { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); column-gap: clamp(36px, 5vw, 90px); row-gap: 34px; align-items: center; } body.ab-hcx .elementor-9063 .abn-proof .elementor-icon-list-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(20px, 2.6vw, 40px); } body.ab-hcx .elementor-9063 .abn-proof .elementor-icon-list-item { align-items: flex-start; min-width: 0; } body.ab-hcx .elementor-9063 .abn-proof .elementor-icon-list-icon { padding-block-start: 1px; } body.ab-hcx .elementor-9063 .abn-proof .elementor-icon-list-text { overflow-wrap: break-word; } /* ========================================================================== 10. BAND 8 - CLOSING ========================================================================== */ /* REBUILT 2026-08-28. The photograph was a container background under a wash that ran the full width of the band - opaque navy to 42%, still 30% navy at the right edge - so the only thing that survived was a dim slice of the technician. It is now a REAL ELEMENTOR IMAGE WIDGET (`lplastimg`, class `abn-last__img`, inside container `lplastart` / `abn-last__art`). WHY A WIDGET AND NOT A BACKGROUND. A container background can only be placed with one `background-position` per breakpoint, cannot leave the flow, and cannot be given its own height - which is why the old rule had to DELETE the picture below 768px rather than lay it out. As an it carries srcset, takes a per-breakpoint `object-position`, and can stand on its own block under the copy when the split stops working. The editor also still owns the choice of photograph, which a CSS background never let it. Attachment 8974 is 2400x1350. Nothing about the file changed. */ body.ab-hcx .elementor-9063 .abn-last { position: relative; overflow: hidden; } /* The inner must NOT be the stacking context. The art layer has to be able to sit UNDERNEATH the feather, and a z-index here would trap it above. The copy raises itself instead - one element, one job. */ body.ab-hcx .elementor-9063 .abn-last.e-con-full, body.ab-hcx .elementor-9063 .abn-last > .e-con-inner { position: static; z-index: auto; } body.ab-hcx .elementor-9063 .abn-last > .e-con-inner > .abn-rev { position: relative; z-index: 3; } body.ab-hcx .elementor-9063 .abn-last__img img { display: block; inline-size: 100%; object-fit: cover; } @media (min-width: 1025px) { body.ab-hcx .elementor-9063 .abn-last__art { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 58%; z-index: 1; } body.ab-hcx .elementor-9063 .abn-last__art > .abn-last__img, body.ab-hcx .elementor-9063 .abn-last__img .elementor-widget-container { flex: 1 1 auto; block-size: 100%; min-block-size: 0; } /* Only about 11% of this file's width is cropped at this size and NONE of its height, so the horizontal value is a nudge toward the technician rather than a real decision - the whole scene is in frame. */ body.ab-hcx .elementor-9063 .abn-last__img img { block-size: 100%; object-position: 60% 50%; } /* THE FEATHER, and the only thing painted over the photograph. It is opaque ONLY where the copy actually is: measured at 1440 the copy column ends at 40% of the band, so navy holds solid to 42%, is half gone by 56% and is completely gone by 68% - the right third of the picture carries no wash at all. No hard seam, and nothing darkened that did not need to be. */ body.ab-hcx .elementor-9063 .abn-last::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--abn-navy) 0%, var(--abn-navy) 42%, rgba(5, 17, 36, .88) 49%, rgba(5, 17, 36, .38) 56%, rgba(5, 17, 36, .10) 62%, rgba(5, 17, 36, 0) 68%); } } /* STACKED, AT 1024 AND BELOW. Not the desktop crop squeezed narrow: below 1025 the split stops working (the copy column and the picture would each get about 340px), so the photograph leaves the corner and becomes its own block under the CTAs, full-bleed to both screen edges. The negative inline margin cancels the band's own gutter EXACTLY - 24px at tablet, 20px at phone, both read off the Elementor padding on `lplast`, not guessed - so the picture reaches the edge without a pixel of overflow. The feather is switched off here: with nothing overlapping, a gradient over the photograph would only darken it. The band's navy is its own background colour in Elementor, so the copy is on solid navy either way. */ @media (max-width: 1024px) { body.ab-hcx .elementor-9063 .abn-last::before { display: none; } body.ab-hcx .elementor-9063 .abn-last__art { position: static; inline-size: auto; margin-inline: -24px; margin-block-start: 40px; /* ...and the picture IS the bottom edge of the band. Left in flow it sat on a 75px shelf of navy, which reads as a gap rather than a margin. The value cancels the band's own bottom padding exactly - read off `padding_tablet` on `lplast` in Elementor, so if that changes this must change with it. */ margin-block-end: -75px; } /* RATIO ONLY, NO `max-block-size`. Measured at 430: an aspect-ratio with a height cap made the widget box and the disagree by 7px (the widget sized from the ratio, the image from the cap), and only `.abn-last`'s overflow was hiding it. A ratio on its own keeps every box the same height at every width. */ body.ab-hcx .elementor-9063 .abn-last__img img { aspect-ratio: 5 / 2; block-size: auto; object-position: 62% 42%; } } @media (max-width: 767px) { body.ab-hcx .elementor-9063 .abn-last__art { margin-inline: -20px; margin-block-start: 32px; margin-block-end: -58px; /* `padding_mobile` on lplast */ } /* Taller frame and a tighter horizontal position on a phone: at 16/9 across 390px the technician is 60px tall and the scene reads as wallpaper. 4/3 with the crop biased right keeps him, the ladder and the open hatch, and drops the empty hallway on the left. */ body.ab-hcx .elementor-9063 .abn-last__img img { aspect-ratio: 4 / 3; object-position: 66% 42%; } } body.ab-hcx .elementor-9063 .abn-lastrow.e-con-full, body.ab-hcx .elementor-9063 .abn-lastrow > .e-con-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; } /* The completed-state ribbon: hidden until the calculator has produced a recommendation in this page view. */ body.ab-hcx .elementor-9063 .abn-done { display: none; } body.ab-hcx.abn-has-plan .elementor-9063 .abn-done { display: block; } /* ========================================================================== 11. MOTION Restrained and directional: content settles UP into place, once, and only the elements that carry meaning. Nothing flies in from the sides and nothing delays reading - the reveal starts as the element enters, and anything that has not been observed yet is fully visible by default so a scripting failure can never leave the page blank. ========================================================================== */ /* THE `html.abn-js` GATE IS LOAD-BEARING. abv-hlp2.js adds that class as its very first statement, in the head, before first paint. So JavaScript off, a 404 on the script, or a syntax error upstream all end the same way: none of these rules apply and every word on the page is visible. An animation is never allowed to be the reason content is missing. */ html.abn-js body.ab-hcx .elementor-9063 .abn-rev { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .55s var(--abn-ease), transform .55s var(--abn-ease); } html.abn-js body.ab-hcx .elementor-9063 .abn-rev.is-in { opacity: 1; transform: none; } /* Staggered children inside one revealed group. */ body.ab-hcx .elementor-9063 .abn-rev--d1 { transition-delay: .07s; } body.ab-hcx .elementor-9063 .abn-rev--d2 { transition-delay: .14s; } body.ab-hcx .elementor-9063 .abn-rev--d3 { transition-delay: .21s; } /* The connector rail draws itself once, left to right, as the steps arrive. */ html.abn-js body.ab-hcx .elementor-9063 .abn-steps .abn-step__ic::after { --abn-rail: 0; transition: transform .5s var(--abn-ease); } html.abn-js body.ab-hcx .elementor-9063 .abn-steps.is-in .abn-step__ic::after { --abn-rail: 1; } html.abn-js body.ab-hcx .elementor-9063 .abn-steps.is-in .abn-step:nth-child(2) .abn-step__ic::after { transition-delay: .12s; } html.abn-js body.ab-hcx .elementor-9063 .abn-steps.is-in .abn-step__ic::after { transition-delay: 0s; } html.abn-js body.ab-hcx .elementor-9063 .abn-steps.is-in .abn-step:nth-child(2) .abn-step__ic::after { transition-delay: .12s; } html.abn-js body.ab-hcx .elementor-9063 .abn-steps.is-in .abn-step:nth-child(3) .abn-step__ic::after { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { /* Both selectors carry html.abn-js so they out-specify the hiding rule - without it the reduced-motion path would hide the page permanently. */ html.abn-js body.ab-hcx .elementor-9063 .abn-rev, html.abn-js body.ab-hcx .elementor-9063 .abn-rev.is-in { opacity: 1; transform: none; transition: none; } html.abn-js body.ab-hcx .elementor-9063 .abn-steps .abn-step__ic::after { --abn-rail: 1; transition: none; } body.ab-hcx .elementor-9063 .abn-gauge__fill, body.ab-hcx .elementor-9063 .abn-gauge__over { transition: none; } body.ab-hcx .elementor-9063 .abn-cta .elementor-button, body.ab-hcx .elementor-9063 .abn-famcol .abn-famimg img { transition: none; } body.ab-hcx .elementor-9063 .abn-cta--primary .elementor-button:hover { transform: none; } body.ab-hcx .elementor-9063 .abn-famcol:hover .abn-famimg img { transform: none; } } /* ========================================================================== 12. THE PERSISTENT CALL TO ACTION The floating pill is built by abv-hux.js and already hides itself whenever a real Find My Fan Size button is on screen. This block gives it the two treatments the brief asked for: a quiet desktop pill with a lead-in, and a full-width bar on a phone. It is appended to , NOT into the page wrapper, so these selectors start at body.ab-hcx and not .elementor-9063. ========================================================================== */ body.ab-hcx .abhu-fab { border-radius: 999px; transition: opacity .28s var(--abn-ease, ease), transform .28s var(--abn-ease, ease); } /* THE TWO ENDS OF THE PAGE (see abv-hlp2.js section 5). Over the hero the pill would be a second ask stacked on the first; over the footer it looks stranded, because there is no CTA down there for Fab.evaluate() to see. Both are the same resting treatment the pill already uses, so it leaves and returns the way it always has - it does not snap. */ body.ab-hcx.abn-fab-off .abhu-fab, body.ab-hcx.abn-fab-hero .abhu-fab { opacity: 0; pointer-events: none; transform: translateY(10px); } /* LEFT, NOT RIGHT (Vincent, 2026-08-29). abv-hux.css anchors the pill to the right; this moves it without editing that file, which is shared with the flip cards and the rails. `right: auto` is not optional - leaving both insets set on a fixed element stretches it across the viewport. Physical properties on purpose, because that is the form abv-hux.css uses and mixing logical with physical across two sheets makes the winner depend on declaration order rather than specificity. Below 768px the pill is a full-width bar already (rule further down), so this starts at 768. */ @media (min-width: 768px) { body.ab-hcx .abhu-fab { left: max(24px, env(safe-area-inset-left, 0px)); right: auto; } /* LOGGED-IN VIEWS ONLY. Xpro Theme Builder puts its editor toggle (`button.xpro-main-toggle`, from xpro-theme-builder/admin/assets/) in the bottom-left corner - measured at 15,744 136x74 in an 855px viewport - and the pill's new home lands on top of it. It is NOT in the anonymous page: a server-side fetch of this URL returns zero occurrences of it, and a logged-out render shows nothing over the pill but a transparent, pointer-events:none toast wrapper. So this does not move the button for visitors; it steps it past the toggle for whoever is reviewing the page while signed in, which is the only time the two ever meet. `body.admin-bar` is WordPress's own marker for that state. */ body.ab-hcx.admin-bar .abhu-fab { left: 172px; } } @media (min-width: 1200px) { /* The lead-in is decoration: the link's accessible name stays "Find My Fan Size", which is what a screen reader should announce. */ body.ab-hcx .abhu-fab::before { content: "Ready to see what your home needs?"; font-weight: 500; text-transform: none; letter-spacing: 0; /* WHITE, not 82% white (Vincent, 2026-08-29). At 13.5px on the green fill the old .82 was the only thing on the pill that read as grey. The rule between the two halves keeps them distinguishable, so the opacity was doing no work the divider was not already doing. */ color: #FFFFFF; opacity: 1; margin-inline-end: 14px; padding-inline-end: 14px; border-inline-end: 1px solid rgba(255, 255, 255, .55); } body.ab-hcx .abhu-fab { display: inline-flex; align-items: center; } } /* PHONE: the pill becomes a full-width bar. Physical properties on purpose - abv-hux.css declares `right` and `bottom`, and mixing logical and physical forms of the same property across two sheets makes which one wins depend on declaration order rather than on specificity. Measured before this note: the bar sat 2px BELOW the viewport bottom. The bar is NOT compensated for with body padding. It stands down whenever a real Find My Fan Size button is on screen (abv-hux.js) and over the footer (abv-hlp2.js), so a permanent 70px gutter under every page would be paid for a bar that is absent for most of the scroll. */ @media (max-width: 767px) { body.ab-hcx .abhu-fab { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: auto; margin: 0; justify-content: center; border-radius: 999px; min-height: 52px; padding: 15px 22px; font-size: 13px; white-space: normal; box-shadow: 0 10px 30px rgba(5, 17, 36, .34); } } /* ========================================================================== 13. RESPONSIVE Tested at 375 / 390 / 430 / 768 / 820 / 1024 / 1280 / 1440 / 1920. ========================================================================== */ @media (max-width: 1024px) { body.ab-hcx .elementor-9063 .abn-see.e-con-full, body.ab-hcx .elementor-9063 .abn-see > .e-con-inner, body.ab-hcx .elementor-9063 .abn-know.e-con-full, body.ab-hcx .elementor-9063 .abn-know > .e-con-inner, body.ab-hcx .elementor-9063 .abn-trust.e-con-full, body.ab-hcx .elementor-9063 .abn-trust > .e-con-inner { grid-template-columns: minmax(0, 1fr); } body.ab-hcx .elementor-9063 .abn-steps.e-con-full, body.ab-hcx .elementor-9063 .abn-steps > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* In two columns the rail after an even step would run into the gutter. */ body.ab-hcx .elementor-9063 .abn-step:nth-child(even) .abn-step__ic::after { display: none; } body.ab-hcx .elementor-9063 .abn-nope .elementor-icon-list-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { body.ab-hcx .elementor-9063 .abn-steps.e-con-full, body.ab-hcx .elementor-9063 .abn-steps > .e-con-inner { grid-template-columns: minmax(0, 1fr); row-gap: 26px; } /* One column: the rail turns vertical and runs disc to disc. */ body.ab-hcx .elementor-9063 .abn-step:nth-child(even) .abn-step__ic::after { display: block; } body.ab-hcx .elementor-9063 .abn-step:not(:last-child) .abn-step__ic::after { inset-block-start: 44px; inset-inline-start: 21px; inline-size: 1.5px; block-size: calc(100% - 44px + 26px); transform: scaleY(var(--abn-rail, 1)); transform-origin: center top; } body.ab-hcx .elementor-9063 .abn-step.e-con-full, body.ab-hcx .elementor-9063 .abn-step > .e-con-inner { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; } body.ab-hcx .elementor-9063 .abn-step__ic { grid-row: 1 / span 3; } body.ab-hcx .elementor-9063 .abn-nope .elementor-icon-list-items { grid-template-columns: minmax(0, 1fr); gap: 14px; } body.ab-hcx .elementor-9063 .abn-states.e-con-full, body.ab-hcx .elementor-9063 .abn-states > .e-con-inner { grid-template-columns: minmax(0, 1fr); } body.ab-hcx .elementor-9063 .abn-gauge { block-size: 130px; } body.ab-hcx .elementor-9063 .abn-row.e-con-full, body.ab-hcx .elementor-9063 .abn-row > .e-con-inner { grid-template-columns: 44px minmax(0, 1fr); } /* Product families become a swipe rail rather than three stacked blocks - three full-width photographs in a row is a lot of scrolling for a band whose job is curiosity. The negative inline margin lets it bleed to the band gutter; overscroll-behavior stops it dragging the page sideways. */ body.ab-hcx .elementor-9063 .abn-fam.e-con-full, body.ab-hcx .elementor-9063 .abn-fam > .e-con-inner { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; gap: 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline-start: 20px; padding-inline: 20px; margin-inline: -20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.ab-hcx .elementor-9063 .abn-fam.e-con-full::-webkit-scrollbar, body.ab-hcx .elementor-9063 .abn-fam > .e-con-inner::-webkit-scrollbar { display: none; } body.ab-hcx .elementor-9063 .abn-famcol { scroll-snap-align: start; } body.ab-hcx .elementor-9063 .abn-proof .elementor-icon-list-items { grid-template-columns: minmax(0, 1fr); gap: 16px; } /* The closing band's photograph USED TO BE DELETED HERE. It was a container background, and a background cannot be laid out, so `background-image: none` was the only honest option on a phone. It is now a real image widget with its own stacked block - see section 10. */ /* THE HERO'S TWO CTAs STACK. abv-hcx-m.css section 4 forces this row side-by-side under 600px, which was right when both were pills. With one pill and one text link it gave a four-line, 86px-wide FIND MY FAN SIZE - measured at 390. Beaten on specificity (6 classes to 4), not with !important, and scoped to the hero so the pre-footer's own stacking rule is untouched. */ body.ab-hcx .elementor-9063 .ab-hc-hero .abhx-ctarow.abhc-ctarow { flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 16px; } body.ab-hcx .elementor-9063 .ab-hc-hero .abhx-ctarow.abhc-ctarow > .elementor-widget { flex: 0 0 auto; width: 100%; } body.ab-hcx .elementor-9063 .ab-hc-hero .abhx-ctarow.abhc-ctarow .abn-cta--primary .elementor-button { width: 100%; height: auto; padding: 15px 24px; } body.ab-hcx .elementor-9063 .ab-hc-hero .abhx-ctarow.abhc-ctarow .abn-cta--text .elementor-button { width: auto; height: auto; padding: 4px 0; } body.ab-hcx .elementor-9063 .abn-lastrow.e-con-full, body.ab-hcx .elementor-9063 .abn-lastrow > .e-con-inner { flex-direction: column; align-items: stretch; } /* BOTH pills take the full width now. This used to read "only the PRIMARY", because Find an Installer was a bare text link and stretching it would have made it read as a second button. As of 2026-08-29 it IS a second button - an outline pill - so a stacked pair of equal-width pills is the correct phone layout and a half-width outline pill under a full-width filled one would look like a mistake. Any text CTA left in this row keeps the old behaviour. */ body.ab-hcx .elementor-9063 .abn-lastrow .elementor-widget-button { width: 100%; } body.ab-hcx .elementor-9063 .abn-lastrow .abn-cta--primary .elementor-button, body.ab-hcx .elementor-9063 .abn-lastrow .abn-cta--ghost .elementor-button { width: 100%; } body.ab-hcx .elementor-9063 .abn-lastrow .abn-cta--text .elementor-button { width: auto; } } @media (max-width: 479px) { /* One column: the row gap already separates every metric, so the single remaining rule would only repeat it. (The old rule that turned the vertical hairline horizontal here went with the hairline itself.) */ body.ab-hcx .elementor-9063 .abn-plan__grid.e-con-full, body.ab-hcx .elementor-9063 .abn-plan__grid > .e-con-inner { grid-template-columns: minmax(0, 1fr); } body.ab-hcx .elementor-9063 .abn-metric--wide::before { content: none; } } /* A sitewide mobile rule caps every .elementor-button at 320px and insets it by 7.5px. On a stacked pair inside a 20px-gutter band that reads as a misalignment, so it is restated here for this page's stacked CTAs only. */ @media (max-width: 767px) { body.ab-hcx .elementor-9063 .abn-lastrow .elementor-button, body.ab-hcx .elementor-9063 .abn-ctarow .elementor-button { max-width: none; margin-inline: 0; } } /* Nothing on this page may scroll sideways. The plan panel's bleed uses vw, which includes the scrollbar, so the page wrapper clips the overshoot. */ body.ab-hcx .elementor-9063 { overflow-x: clip; } /* ========================================================================== 14. THE RESTORED BANDS - symptoms, airflow, appearance ========================================================================== These three bands predate the 2026-08-28 rebuild and were brought back on 2026-08-28 at Vincent's request. They keep their original `abhx-*` / `abhc-*` classes, so abv-hlook.css, abv-hux.css and abv-hcx-m.css style them exactly as they always did - the flip cards, the swipe rails and the card typography are all still those files' work and none of it was touched. WHAT IS HERE IS THE HANDFUL OF RULES THAT LIVED ONLY IN abv-hlp.css, the superseded 2026-08-27 layer, which is switched off. Porting four rules is a far smaller change than re-enabling a 36 KB stylesheet whose hero, band seam and floating-pill rules would then have to be re-tested against every one of the new bands. Everything below is copied with its reasoning intact; it is not new design work. ========================================================================== */ /* --- the airflow band is a grid from 1025px, not a column. Stacked it measured 1,318px tall against a 837px next-tallest, so it read as its own chapter rather than a section. The words and the picture belong beside each other and the three numbered steps run full width underneath, keeping the rail abv-hux.js draws across them. `display:grid` on the boxed inner overrides Elementor's flex column, so its gap variables stop applying and the gaps are restated here. */ @media (min-width: 1025px) { body.ab-hcx .elementor-9063 .abhx-air > .e-con-inner { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-areas: "head stage" "cards cards"; align-items: center; column-gap: 56px; row-gap: 58px; } body.ab-hcx .elementor-9063 .abhx-air > .e-con-inner > .abhc-air__head { grid-area: head; } body.ab-hcx .elementor-9063 .abhx-air > .e-con-inner > .abhc-air__stage { grid-area: stage; } body.ab-hcx .elementor-9063 .abhx-air > .e-con-inner > .abhc-steps { grid-area: cards; } /* In two columns the lede has half the width, so its own measure is no longer the constraint - let it fill the column. */ body.ab-hcx .elementor-9063 .abhx-air .abhc-air__head > .elementor-widget-text-editor { width: 100%; } } body.ab-hcx .elementor-9063 .abhc-air__stage { align-items: center; gap: 0; } body.ab-hcx .elementor-9063 .abhc-air__img { width: 100%; text-align: center; } /* `width`, not `max-width`: something upstream sets max-width:100% on images with more weight than a page-level rule, and a max-width belt there silently beats any measure set above it. */ body.ab-hcx .elementor-9063 .abhc-air__img img { display: block; width: min(100%, 980px); height: auto; margin-inline: auto; } @media (max-width: 1024px) { /* Stacked at 1024 the illustration went 961x625 and the band 1,395px tall - the same "own chapter" problem the desktop grid solved. */ body.ab-hcx .elementor-9063 .abhc-air__img img { width: min(100%, 720px); } } @media (max-width: 767px) { /* Full width of the measure and no forced height, so the fan at the ridge and the eaves both stay in frame. Cropping it to fit a box loses the whole point of the picture. */ body.ab-hcx .elementor-9063 .abhc-air__img img { width: 100%; } } /* --- the symptom grid runs four-up wide, two-up on a tablet. 2026-08-29: gaps opened from 22/24 to 34/30. The band moved onto the 1600 grid, so four cards had ~120px more width to share and a 22px gutter read as four things stuck together rather than four things in a row. At 1440 this is 4 x 314px on a 34px rhythm; the cards keep equal 1fr tracks, so the row stays perfectly even. */ @media (min-width: 1280px) { body.ab-hcx .elementor-9063 .abhx-sym__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; } } @media (min-width: 1025px) and (max-width: 1279px) { body.ab-hcx .elementor-9063 .abhx-sym__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } } /* ========================================================================== 15. CTA FOCUS RING 2026-09-02 ========================================================================== WHAT USED TO BE HERE. A sky-blue arc (@property + conic-gradient on ::before) travelling around every .abn-cta--primary pill every 4.8s, gated by html.abn-ring / .is-live / body.abn-cta-quiet. Removed at Vincent's request 2026-09-02: the resting CTA carries no blue aura, and the treatment is not used anywhere else on the site. IT WAS NEVER THE FOCUS INDICATOR - the arc explicitly faded to opacity 0 on :focus-visible, so it was decoration only. Keyboard focus came from the theme reset (2px black outline + 4px white halo) and still does. What follows REPLACES that generic ring on these three pills with the page's own sage focus treatment - the same 3px/3px pattern abv-hlook.css already uses on .abhx-cta - so removing the arc cannot cost any focus visibility. Hover, active and the Elementor fill are untouched. ========================================================================== */ body.ab-hcx .elementor-9063 .abn-cta .elementor-button:focus-visible { outline: 3px solid var(--abhx-sage-lt, #A0C6A2); outline-offset: 3px; } /* --- THE SYMPTOMS INTRO NOW LIVES IN THE PAYOFF BAND (2026-08-29). Vincent asked for "What's happening up there? / Your attic affects more than the attic" to sit directly under the FIND MY FAN SIZE area instead of opening its own band, so the container was MOVED IN ELEMENTOR - it is the last child of `lpseecopy` now, not a copy. Its widgets keep their original `abhx-eyebrow` / `abhx-h2` classes so abv-hlook and abv-hux still style them exactly as they did in the old band. The one rule that did NOT follow is abv-hux.css section 1's `.abhx-symband > .e-con-inner > .e-con:first-child .abhx-h2 { margin-block- start: 0 }` - the head is no longer inside `.abhx-symband`. Restated here so the H2 does not pick the theme's default top margin back up. */ body.ab-hcx .elementor-9063 .abn-symhead .abhx-h2 .elementor-heading-title { margin-block-start: 0; } body.ab-hcx .elementor-9063 .abn-symhead.e-con-full, body.ab-hcx .elementor-9063 .abn-symhead > .e-con-inner { gap: 10px; } /* IT IS A THIRD CHILD OF THE BAND, NOT A CHILD OF THE COPY COLUMN, and the difference only shows up on a tablet. Nested inside the copy it landed between the CTA and the example plan once the band collapsed to one column - measured at 1024 - which put "What's happening up there?" in front of the card it is not introducing. As a sibling it is placed EXPLICITLY on the grid on desktop (row 2 of the copy column, with the plan panel spanning both rows), and on one column it simply falls last, immediately before the symptom cards it belongs to. Same desktop picture, correct stacking order, no `order` or `display: contents` tricks. */ @media (min-width: 1025px) { body.ab-hcx .elementor-9063 .abn-see > .e-con-inner > .abn-rev:first-child { grid-column: 1; grid-row: 1; } body.ab-hcx .elementor-9063 .abn-see > .e-con-inner > .abn-plan { grid-column: 2; grid-row: 1 / span 2; } body.ab-hcx .elementor-9063 .abn-see > .e-con-inner > .abn-symhead { grid-column: 1; grid-row: 2; } /* The rows are sized by the copy and the intro; the panel spans them, so centring each item in its own row would float the intro away from the CTA above it. Start-align the left column and let the panel do the stretching. */ body.ab-hcx .elementor-9063 .abn-see > .e-con-inner { align-items: stretch; row-gap: 0; } body.ab-hcx .elementor-9063 .abn-see > .e-con-inner > .abn-rev:first-child { align-self: end; } body.ab-hcx .elementor-9063 .abn-see > .e-con-inner > .abn-symhead { align-self: start; } } /* --- THE TITLE RESERVES TWO LINES, AND THAT IS WHAT ALIGNS THE PHOTOGRAPHS. Measured: "Upstairs stays hot" fits one line where its three neighbours wrap, so its title band was 96px against their 104 - and because the card has a decided height and the photograph takes the remainder, the green rule under card one sat 8px lower than the other three. Reserving the second line fixes the cause; `em` keeps it right at every breakpoint where abv-hux.css changes the card type size. 2.52em = two lines of its own 1.26 line-height. The appearance cards had the same eight pixels wrong. */ body.ab-hcx .elementor-9063 .abhx-sym .abhx-card__title .elementor-heading-title, body.ab-hcx .elementor-9063 .abhx-look .abhx-card__title .elementor-heading-title { min-height: 2.52em; } /* --- NO HOVER UNDERLINE ON THE APPEARANCE-CARD LINKS EITHER. abv-hux.css underlines `.abhc-look__link` on hover and focus (its section for the restored appearance cards). Vincent's "remove all underline and arrows on the CTA" covers those three links too. Overridden HERE rather than edited in abv-hux.css: that file is shared with the flip cards, the rails and the floating pill, and it is one of the 21 files whose hashes are checked to prove the calculator layers were not touched. The hover still changes colour, so the state is not silent. `text-underline-offset` is left alone - it does nothing without a line. */ body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link .elementor-button:hover, body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link .elementor-button:focus, body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link .elementor-button:focus-visible { text-decoration: none; } /* --- THE FLIP CARDS HAD NO VISIBLE FOCUS. The ring must be INSET: the button is position:absolute;inset:0 inside a card with overflow:hidden, so an outline drawn outside the box is clipped and the fix looks unapplied. */ body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__btn:focus-visible { outline: 3px solid var(--abhl-sky, #3993D5); outline-offset: -3px; border-radius: var(--abhl-radius, 14px); } /* ========================================================================== SECTION 20 - THE 2026-08-31 REVISION AB-REV-20260831 ========================================================================== Four jobs, all of them layout and none of them copy: 20.1 the flip-card backs, now four components instead of one paragraph 20.2 THERE'S A BETTER WAY - numbered three-part progression in a panel 20.3 HOW ATTIC BREEZE HELPS - light band, three panels, separators 20.4 MADE FOR YOUR HOME - the combined conversion section Appended to abv-hlp2.css deliberately. That sheet already enqueues LAST on this page (ab-hoc-lp2.php, priority 105) and already owns the .abn-* bands, so these rules win on source order and need no !important and no new file, module or dependency. Everything here is scoped to `body.ab-hcx .elementor-9063`, the same scope the rest of the file uses, so nothing can reach another page. TO REVERT: delete from the AB-REV-20260831 banner to end of file. The page returns to its 2026-08-29 appearance with all of its content intact. ========================================================================== */ /* ------------------------------------------------------------------------ 20.1 THE FLIP-CARD BACKS ------------------------------------------------------------------------ The back used to be one paragraph that ran three ideas together. It is now four components and they have to READ as four: headline, why, how Attic Breeze helps, takeaway. `justify-content` moves from center to flex-start. Centring was right for two short blocks; with four it pushes the top block off the top edge of a tall card on a narrow column. Nothing is clipped either way - both faces share ONE grid cell, so the row is as tall as the TALLER face and a longer back simply makes the card taller. That is the existing mechanism; this only stops the content floating inside it. ------------------------------------------------------------------------ */ body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b { justify-content: flex-start; gap: 0; overflow-wrap: break-word; } body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__copy, body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__copy p { font-size: 15px; line-height: 1.6; color: #4A515C; } body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__copy { margin-block-start: 10px; } /* HOW ATTIC BREEZE HELPS. The one component that names the product, so it is the one the fan mark identifies. A tinted plate rather than another paragraph: the reader should be able to find this block on all four cards without reading a word. */ body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__help { margin-block-start: 16px; } body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__help > .elementor-widget-container { position: relative; padding: 13px 15px 13px 46px; background: var(--abn-tint, #EDF4EE); border-radius: 10px; border-inline-start: 3px solid var(--abn-green, #5C9D5E); } /* THE ATTIC BREEZE FAN MARK, as a mask rather than an : it inherits `background` from this rule, so it is one green here and would follow the token anywhere else this block is reused. One rule, one copy of the path, no extra request. */ body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__help > .elementor-widget-container::before { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 15px; width: 20px; height: 20px; background: var(--abn-green, #5C9D5E); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cg transform='scale(0.09949475) translate(0.000000,5146.000000) scale(0.100000,-0.100000)' fill='%23000' fill-rule='evenodd'%3E %3Cpath d='M23510 49550 c-1041 -37 -1867 -158 -2516 -369 -913 -297 -1829 -973 -2590 -1912 -759 -936 -1376 -2128 -1729 -3339 -208 -714 -287 -1234 -302 -2000 -24 -1248 212 -2774 652 -4215 172 -561 381 -1121 589 -1575 322 -701 791 -1343 1496 -2051 416 -417 835 -784 1415 -1240 376 -295 1498 -1122 1673 -1232 267 -169 588 -305 897 -381 208 -51 333 -71 731 -116 147 -17 311 -39 363 -49 232 -45 358 -114 505 -272 210 -227 231 -523 70 -1019 l-25 -75 -149 -115 c-123 -94 -161 -118 -212 -133 -631 -183 -1323 -60 -2338 418 -481 226 -1432 708 -1980 1003 -1813 975 -3147 1877 -3715 2511 -208 232 -344 436 -500 746 -194 384 -299 694 -500 1475 -217 843 -337 1168 -551 1491 -88 132 -170 227 -353 409 -944 940 -2354 1569 -3741 1670 -187 14 -674 14 -860 0 -907 -67 -1724 -303 -2410 -695 -492 -281 -851 -524 -1185 -801 -166 -137 -539 -510 -679 -679 -378 -455 -704 -970 -1021 -1610 -145 -295 -375 -783 -590 -1255 -1507 -3310 -2181 -5703 -2029 -7200 142 -1393 927 -2892 2189 -4179 787 -802 1677 -1449 2500 -1817 1007 -449 2334 -758 3755 -873 472 -39 650 -45 1205 -45 628 0 958 17 1435 75 1302 157 2650 795 4455 2108 382 277 1111 823 1212 907 126 104 297 275 398 397 225 273 372 528 594 1030 129 290 165 362 240 474 100 150 238 256 409 316 75 26 102 31 192 31 133 1 216 -19 352 -87 l103 -52 47 -90 c45 -86 121 -299 168 -468 20 -74 21 -87 11 -216 -14 -177 -35 -297 -77 -444 -111 -387 -343 -789 -735 -1272 -445 -550 -1959 -2090 -2849 -2900 -988 -900 -1811 -1521 -2410 -1821 -430 -215 -845 -315 -1426 -345 -238 -12 -488 -6 -954 22 -422 26 -971 36 -1150 20 -349 -31 -574 -93 -875 -241 -830 -408 -1645 -1148 -2236 -2030 -385 -576 -678 -1240 -853 -1937 -126 -502 -184 -936 -193 -1439 -8 -481 16 -757 107 -1206 210 -1035 483 -1733 952 -2438 289 -433 610 -813 1108 -1310 1285 -1285 2691 -2527 3785 -3345 1168 -873 2131 -1415 2957 -1665 647 -195 1463 -236 2282 -114 1512 225 3141 996 4426 2093 1005 858 1956 2338 2675 4161 461 1168 758 2309 816 3134 15 222 7 849 -15 1086 -79 849 -261 1726 -583 2805 -115 388 -449 1433 -540 1690 -188 536 -473 948 -974 1409 -244 224 -414 397 -472 477 -99 140 -157 315 -157 479 0 203 88 387 267 562 90 88 282 240 364 289 95 57 226 110 286 116 47 5 59 2 139 -41 369 -197 703 -533 1049 -1056 232 -350 527 -897 1043 -1930 1074 -2149 1693 -3761 1849 -4815 25 -171 25 -676 0 -855 -61 -434 -171 -819 -412 -1450 -290 -757 -369 -996 -429 -1300 -52 -260 -60 -509 -26 -774 169 -1315 928 -2728 1963 -3653 916 -817 2050 -1354 3147 -1488 1131 -138 1928 -76 2825 220 619 203 1038 404 2195 1053 2945 1650 4889 3104 5823 4354 617 827 975 1944 1048 3268 15 268 6 882 -16 1145 -80 963 -275 1851 -596 2711 -206 554 -417 962 -770 1489 -713 1066 -1812 2194 -3039 3122 -616 466 -1278 883 -1733 1094 -822 381 -1843 606 -3147 693 -524 36 -751 41 -1740 40 -1019 -2 -1091 -4 -1340 -45 -421 -70 -763 -207 -1288 -516 -250 -147 -420 -235 -525 -270 -75 -25 -96 -27 -232 -28 -130 0 -160 3 -225 23 -144 45 -260 128 -355 254 -62 82 -145 251 -145 294 0 137 327 748 504 941 159 175 552 389 986 538 286 98 591 171 1115 270 1290 243 2554 426 3585 520 623 56 1030 77 1540 77 980 0 1464 -90 2030 -378 363 -184 653 -391 1270 -904 567 -472 805 -645 1080 -785 159 -81 280 -127 429 -166 468 -121 1137 -153 1741 -84 760 88 1558 334 2192 676 1052 567 1975 1484 2496 2479 141 269 368 810 482 1151 317 944 390 1829 244 2989 -77 617 -389 2250 -625 3275 -619 2685 -1337 4503 -2159 5471 -127 149 -386 405 -550 544 -706 596 -1589 1049 -2625 1345 -923 264 -1966 393 -2886 357 -460 -19 -721 -47 -1082 -118 -1536 -302 -3493 -1287 -5091 -2564 -758 -605 -1181 -1050 -1601 -1685 -555 -840 -1023 -1887 -1498 -3355 -117 -363 -394 -1246 -423 -1351 -91 -329 -130 -724 -105 -1059 16 -210 41 -375 106 -695 113 -559 118 -666 38 -905 -40 -121 -112 -278 -149 -327 -30 -39 -209 -133 -345 -181 -227 -80 -402 -59 -525 64 -90 90 -262 396 -329 584 -152 428 -193 1013 -120 1735 31 300 129 1029 216 1595 327 2134 727 3810 1141 4785 208 489 418 805 763 1151 284 284 483 436 1195 909 672 447 850 581 1066 808 176 184 272 322 409 592 313 615 514 1343 592 2150 22 229 25 897 5 1110 -62 659 -200 1228 -444 1835 -244 606 -560 1141 -952 1615 -250 302 -771 784 -1171 1085 -654 491 -1304 795 -2170 1015 -377 96 -691 153 -1285 234 -1527 209 -2684 319 -3875 371 -321 14 -1203 20 -1485 10z'/%3E %3C/g%3E %3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cg transform='scale(0.09949475) translate(0.000000,5146.000000) scale(0.100000,-0.100000)' fill='%23000' fill-rule='evenodd'%3E %3Cpath d='M23510 49550 c-1041 -37 -1867 -158 -2516 -369 -913 -297 -1829 -973 -2590 -1912 -759 -936 -1376 -2128 -1729 -3339 -208 -714 -287 -1234 -302 -2000 -24 -1248 212 -2774 652 -4215 172 -561 381 -1121 589 -1575 322 -701 791 -1343 1496 -2051 416 -417 835 -784 1415 -1240 376 -295 1498 -1122 1673 -1232 267 -169 588 -305 897 -381 208 -51 333 -71 731 -116 147 -17 311 -39 363 -49 232 -45 358 -114 505 -272 210 -227 231 -523 70 -1019 l-25 -75 -149 -115 c-123 -94 -161 -118 -212 -133 -631 -183 -1323 -60 -2338 418 -481 226 -1432 708 -1980 1003 -1813 975 -3147 1877 -3715 2511 -208 232 -344 436 -500 746 -194 384 -299 694 -500 1475 -217 843 -337 1168 -551 1491 -88 132 -170 227 -353 409 -944 940 -2354 1569 -3741 1670 -187 14 -674 14 -860 0 -907 -67 -1724 -303 -2410 -695 -492 -281 -851 -524 -1185 -801 -166 -137 -539 -510 -679 -679 -378 -455 -704 -970 -1021 -1610 -145 -295 -375 -783 -590 -1255 -1507 -3310 -2181 -5703 -2029 -7200 142 -1393 927 -2892 2189 -4179 787 -802 1677 -1449 2500 -1817 1007 -449 2334 -758 3755 -873 472 -39 650 -45 1205 -45 628 0 958 17 1435 75 1302 157 2650 795 4455 2108 382 277 1111 823 1212 907 126 104 297 275 398 397 225 273 372 528 594 1030 129 290 165 362 240 474 100 150 238 256 409 316 75 26 102 31 192 31 133 1 216 -19 352 -87 l103 -52 47 -90 c45 -86 121 -299 168 -468 20 -74 21 -87 11 -216 -14 -177 -35 -297 -77 -444 -111 -387 -343 -789 -735 -1272 -445 -550 -1959 -2090 -2849 -2900 -988 -900 -1811 -1521 -2410 -1821 -430 -215 -845 -315 -1426 -345 -238 -12 -488 -6 -954 22 -422 26 -971 36 -1150 20 -349 -31 -574 -93 -875 -241 -830 -408 -1645 -1148 -2236 -2030 -385 -576 -678 -1240 -853 -1937 -126 -502 -184 -936 -193 -1439 -8 -481 16 -757 107 -1206 210 -1035 483 -1733 952 -2438 289 -433 610 -813 1108 -1310 1285 -1285 2691 -2527 3785 -3345 1168 -873 2131 -1415 2957 -1665 647 -195 1463 -236 2282 -114 1512 225 3141 996 4426 2093 1005 858 1956 2338 2675 4161 461 1168 758 2309 816 3134 15 222 7 849 -15 1086 -79 849 -261 1726 -583 2805 -115 388 -449 1433 -540 1690 -188 536 -473 948 -974 1409 -244 224 -414 397 -472 477 -99 140 -157 315 -157 479 0 203 88 387 267 562 90 88 282 240 364 289 95 57 226 110 286 116 47 5 59 2 139 -41 369 -197 703 -533 1049 -1056 232 -350 527 -897 1043 -1930 1074 -2149 1693 -3761 1849 -4815 25 -171 25 -676 0 -855 -61 -434 -171 -819 -412 -1450 -290 -757 -369 -996 -429 -1300 -52 -260 -60 -509 -26 -774 169 -1315 928 -2728 1963 -3653 916 -817 2050 -1354 3147 -1488 1131 -138 1928 -76 2825 220 619 203 1038 404 2195 1053 2945 1650 4889 3104 5823 4354 617 827 975 1944 1048 3268 15 268 6 882 -16 1145 -80 963 -275 1851 -596 2711 -206 554 -417 962 -770 1489 -713 1066 -1812 2194 -3039 3122 -616 466 -1278 883 -1733 1094 -822 381 -1843 606 -3147 693 -524 36 -751 41 -1740 40 -1019 -2 -1091 -4 -1340 -45 -421 -70 -763 -207 -1288 -516 -250 -147 -420 -235 -525 -270 -75 -25 -96 -27 -232 -28 -130 0 -160 3 -225 23 -144 45 -260 128 -355 254 -62 82 -145 251 -145 294 0 137 327 748 504 941 159 175 552 389 986 538 286 98 591 171 1115 270 1290 243 2554 426 3585 520 623 56 1030 77 1540 77 980 0 1464 -90 2030 -378 363 -184 653 -391 1270 -904 567 -472 805 -645 1080 -785 159 -81 280 -127 429 -166 468 -121 1137 -153 1741 -84 760 88 1558 334 2192 676 1052 567 1975 1484 2496 2479 141 269 368 810 482 1151 317 944 390 1829 244 2989 -77 617 -389 2250 -625 3275 -619 2685 -1337 4503 -2159 5471 -127 149 -386 405 -550 544 -706 596 -1589 1049 -2625 1345 -923 264 -1966 393 -2886 357 -460 -19 -721 -47 -1082 -118 -1536 -302 -3493 -1287 -5091 -2564 -758 -605 -1181 -1050 -1601 -1685 -555 -840 -1023 -1887 -1498 -3355 -117 -363 -394 -1246 -423 -1351 -91 -329 -130 -724 -105 -1059 16 -210 41 -375 106 -695 113 -559 118 -666 38 -905 -40 -121 -112 -278 -149 -327 -30 -39 -209 -133 -345 -181 -227 -80 -402 -59 -525 64 -90 90 -262 396 -329 584 -152 428 -193 1013 -120 1735 31 300 129 1029 216 1595 327 2134 727 3810 1141 4785 208 489 418 805 763 1151 284 284 483 436 1195 909 672 447 850 581 1066 808 176 184 272 322 409 592 313 615 514 1343 592 2150 22 229 25 897 5 1110 -62 659 -200 1228 -444 1835 -244 606 -560 1141 -952 1615 -250 302 -771 784 -1171 1085 -654 491 -1304 795 -2170 1015 -377 96 -691 153 -1285 234 -1527 209 -2684 319 -3875 371 -321 14 -1203 20 -1485 10z'/%3E %3C/g%3E %3C/svg%3E") center / contain no-repeat; } body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__help p { margin: 0; font-size: 14.5px; line-height: 1.55; font-weight: 600; color: var(--abn-green-txt, #3A6440); } /* THE TAKEAWAY. Hairline above it, navy, and the last thing on the card. */ body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__take { margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); } body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__take p { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 700; color: var(--abn-navy, #051124); } /* Four blocks need more room than two. The card grows; nothing is cut off. */ body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b { padding: 26px 24px 30px; } @media (max-width: 767px) { body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b { padding: 22px 18px 24px; } body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__copy, body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__copy p { font-size: 14.5px; } body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__help > .elementor-widget-container { padding: 12px 13px 12px 42px; } body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__help p { font-size: 14px; } body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__take p { font-size: 14.5px; } } .elementor-button:focus, body.ab-hcx .elementor-9063 .abhc-flip .abhc-look__link .elementor-button:focus-visible { text-decoration: none; } /* ------------------------------------------------------------------------ 20.2 THERE'S A BETTER WAY ------------------------------------------------------------------------ Built to the reference: an oversized navy headline over white, the Attic Breeze statement on its own line in AB Blue, then ONE light panel carrying THREE benefits under numbered markers that sit on a hairline rail, a divider, and a centred CTA. Colour, size and weight are Elementor's on every widget in this band. What lives here is the panel chrome, the rail (a pseudo-element), and the two grids - the things Elementor has no control for. `--abn-pad-x` / `--abn-pad-t` are shared by the panel padding and the rail, so the line and the padding can never drift apart. `--abn-mark` is shared by the marker and the rail's vertical position for the same reason. ------------------------------------------------------------------------ */ body.ab-hcx .elementor-9063 .abn-ease__say p { margin: 0; } body.ab-hcx .elementor-9063 .abn-ease__say { margin-block-start: 18px; } body.ab-hcx .elementor-9063 .abn-ease .abn-steps { --abn-pad-x: clamp(26px, 2.6vw, 40px); --abn-pad-t: clamp(30px, 3vw, 42px); --abn-mark: 46px; --abn-ic: clamp(74px, 6vw, 92px); } body.ab-hcx .elementor-9063 .abn-ease .abn-steps.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-steps > .e-con-inner { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--abn-offwhite, #F0F2F4); border: 1px solid var(--abn-blue-14, rgba(52, 106, 193, .14)); border-radius: 20px; padding: var(--abn-pad-t) var(--abn-pad-x) calc(var(--abn-pad-t) + 8px); box-sizing: border-box; margin-block-start: 52px; column-gap: clamp(26px, 3vw, 52px); row-gap: 38px; } /* THE RAIL. One line across the panel, not a chain between icon discs. */ body.ab-hcx .elementor-9063 .abn-ease .abn-steps.e-con-full::before, body.ab-hcx .elementor-9063 .abn-ease .abn-steps > .e-con-inner::before { content: ""; position: absolute; inset-inline: var(--abn-pad-x); inset-block-start: calc(var(--abn-pad-t) + (var(--abn-mark) / 2)); height: 1px; background: var(--abn-blue-30, rgba(52, 106, 193, .30)); pointer-events: none; } body.ab-hcx .elementor-9063 .abn-ease .abn-step .abn-step__ic::after { display: none; } /* THE BENEFIT, as a two-column grid: the marker centred on its own row across the top, then the icon disc beside the title with the copy under it. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner { display: grid; grid-template-columns: var(--abn-ic, 92px) minmax(0, 1fr); grid-template-rows: var(--abn-mark, 46px) auto auto; column-gap: clamp(16px, 1.5vw, 22px); row-gap: 0; align-content: start; } body.ab-hcx .elementor-9063 .abn-ease .abn-step > .abn-step__n, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .abn-step__n { grid-area: 1 / 1 / 2 / 3; justify-self: center; margin-block-end: 0; } body.ab-hcx .elementor-9063 .abn-ease .abn-step > .abn-step__ic, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .abn-step__ic { grid-area: 2 / 1 / 4 / 2; align-self: start; margin-block-start: 30px; } body.ab-hcx .elementor-9063 .abn-ease .abn-step > .elementor-widget-heading:not(.abn-step__n), body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .elementor-widget-heading:not(.abn-step__n) { grid-area: 2 / 2 / 3 / 3; align-self: start; margin-block-start: 30px; margin-block-end: 0; } body.ab-hcx .elementor-9063 .abn-ease .abn-step > .elementor-widget-text-editor, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .elementor-widget-text-editor { grid-area: 3 / 2 / 4 / 3; margin-block-start: 12px; } /* THE ICON DISC. Its fill and radius are Elementor's on the icon container and the glyph's colour and size are Elementor's on the icon widget; the square footprint is the only part Elementor cannot express here. The base 44px bordered circle from section 5 is unwound. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step__ic { inline-size: var(--abn-ic, 92px); block-size: var(--abn-ic, 92px); flex: 0 0 auto; } body.ab-hcx .elementor-9063 .abn-ease .abn-step__ic .elementor-icon { inline-size: auto; block-size: auto; border: 0; background: none; border-radius: 0; } /* THE MARKER. Solid white fill is what punches the rail out behind it; the border takes the heading's own Elementor colour so one control moves both. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step__n .elementor-heading-title { display: grid; place-items: center; width: var(--abn-mark, 46px); height: var(--abn-mark, 46px); box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; background: var(--abn-white, #FFFFFF); /* 2026-09-01 (section 26): size, weight, line-height and tracking DELETED. They belonged to the 46px circled marker this rule used to draw. 23.3 unwound the circle but restated its own font size, and when THAT was handed back to Elementor these four came out of hiding and won on specificity - the number rendered 17px with no tracking against the 15px / 1.7px set on the widget. Measured at 1025-1905 before and after. */ } /* THE DIVIDER BEFORE THE CTA, and a centred CTA stack under it. */ body.ab-hcx .elementor-9063 .abn-ease .abn-ctarow.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-ctarow > .e-con-inner { margin-block-start: 56px; padding-block-start: 44px; border-block-start: 1px solid var(--abn-rule, rgba(5, 17, 36, .14)); text-align: center; } /* The button's second line. Elementor has one text field, so the qualifier rides in it as a and is set here. */ body.ab-hcx .elementor-9063 .abn-ease .abn-ctarow .elementor-button-text small { display: block; font-size: .66em; font-weight: 700; letter-spacing: 1.4px; opacity: .84; margin-block-start: 4px; } body.ab-hcx .elementor-9063 .abn-ease .abn-ctarow .elementor-button-icon svg, body.ab-hcx .elementor-9063 .abn-ease .abn-ctarow .elementor-button-icon i { font-size: 1.35em; } @media (max-width: 1024px) { /* A horizontal rail across a stacked list would connect nothing. */ body.ab-hcx .elementor-9063 .abn-ease .abn-steps.e-con-full::before, body.ab-hcx .elementor-9063 .abn-ease .abn-steps > .e-con-inner::before { display: none; } body.ab-hcx .elementor-9063 .abn-ease .abn-steps.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-steps > .e-con-inner { grid-template-columns: minmax(0, 1fr); row-gap: 30px; } body.ab-hcx .elementor-9063 .abn-ease .abn-step > .abn-step__n, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .abn-step__n { justify-self: start; } body.ab-hcx .elementor-9063 .abn-ease .abn-step > .abn-step__ic, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .abn-step__ic, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .elementor-widget-heading:not(.abn-step__n), body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .elementor-widget-heading:not(.abn-step__n) { margin-block-start: 18px; } } @media (max-width: 767px) { body.ab-hcx .elementor-9063 .abn-ease .abn-steps { --abn-pad-x: 20px; --abn-pad-t: 24px; --abn-mark: 40px; --abn-ic: 64px; } body.ab-hcx .elementor-9063 .abn-ease .abn-steps.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-steps > .e-con-inner { border-radius: 14px; margin-block-start: 34px; row-gap: 26px; } /* the marker's phone font-size was DELETED 2026-09-01 (section 26) with the four desktop declarations above it - the number's size is per-device on the widget now. */ body.ab-hcx .elementor-9063 .abn-ease .abn-ctarow.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-ctarow > .e-con-inner { margin-block-start: 36px; padding-block-start: 32px; } } /* ------------------------------------------------------------------------ 20.3 HOW ATTIC BREEZE HELPS ------------------------------------------------------------------------ Light band, centred head, three panels left to right with a separator between them, a numbered marker on each panel, and the closing line under the sequence. The band colour and every type colour were changed through the Elementor controls that set them, so the editor shows the same thing the page does; this file only does layout and the two marks. ------------------------------------------------------------------------ */ body.ab-hcx .elementor-9063 .abhc-how--light .abhc-air__head.e-con-full, body.ab-hcx .elementor-9063 .abhc-how--light .abhc-air__head > .e-con-inner { text-align: center; align-items: center; max-width: 860px; margin-inline: auto; } body.ab-hcx .elementor-9063 .abhc-how--light .abhc-air__head .elementor-widget-text-editor { max-width: 74ch; margin-inline: auto; } /* The Attic Breeze statement inside the lede - the reference sets it apart from the two sentences above it. */ body.ab-hcx .elementor-9063 .abhc-how--light .abhc-air__head .elementor-widget-text-editor strong { color: var(--abn-green-txt, #3A6440); } body.ab-hcx .elementor-9063 .abhc-how--light .abhx-eyebrow .elementor-heading-title { color: var(--abn-green-txt, #3A6440); } body.ab-hcx .elementor-9063 .abhc-story { --abhc-story-gap: clamp(20px, 2.6vw, 42px); } body.ab-hcx .elementor-9063 .abhc-story.e-con-full, body.ab-hcx .elementor-9063 .abhc-story > .e-con-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--abhc-story-gap); align-items: start; margin-block-start: 52px; } body.ab-hcx .elementor-9063 .abhc-story .abhc-step.e-con-full, body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .e-con-inner { position: relative; display: flex; flex-direction: column; gap: 0; text-align: center; min-width: 0; } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image { position: relative; margin-block-end: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(5, 17, 36, .06), 0 10px 26px rgba(5, 17, 36, .07); } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } /* THE SEPARATOR, anchored to the IMAGE and not to the step. The step is as tall as its longest caption, so a chevron centred on the step would sit at a different height in every column; centred on the picture it lands in the same place in all three. `left:100%` plus half the gap puts it exactly between two panels whatever the gap resolves to. */ body.ab-hcx .elementor-9063 .abhc-story .abhc-step:not(:last-child) > .elementor-widget-image::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 100%; margin-inline-start: calc(var(--abhc-story-gap) / 2); width: 13px; height: 13px; border-block-start: 3px solid rgba(5, 17, 36, .28); border-inline-end: 3px solid rgba(5, 17, 36, .28); transform: translate(-50%, -50%) rotate(45deg); pointer-events: none; } /* THE MARKER, half on the picture and half off it - the reference device. */ body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .abhc-step__n { position: absolute; inset-block-start: -16px; inset-inline-start: 14px; z-index: 2; margin-block-end: 0; width: auto; } body.ab-hcx .elementor-9063 .abhc-story .abhc-step__n .elementor-heading-title { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--abn-navy, #051124); color: var(--abn-white, #FFFFFF); font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .5px; box-shadow: 0 2px 8px rgba(5, 17, 36, .22); } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-heading:not(.abhc-step__n) { margin-block: 22px 0; } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-text-editor { margin-block-start: 10px; } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-text-editor p { margin: 0; line-height: 1.55; max-width: 34ch; margin-inline: auto; } /* The closing statement under the sequence. */ body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child { margin-block-start: 46px; padding-block-start: 34px; border-block-start: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); text-align: center; } body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child strong { color: var(--abn-green-txt, #3A6440); } @media (max-width: 900px) { /* Stacked in order 1, 2, 3 - and the chevron turns to point down the page rather than off the side of a single column. */ body.ab-hcx .elementor-9063 .abhc-story.e-con-full, body.ab-hcx .elementor-9063 .abhc-story > .e-con-inner { grid-template-columns: 1fr; gap: 40px; margin-block-start: 38px; } body.ab-hcx .elementor-9063 .abhc-story .abhc-step:not(:last-child) > .elementor-widget-image::after { inset-block-start: auto; inset-inline-start: 50%; top: 100%; margin-inline-start: 0; margin-block-start: 0; transform: translate(-50%, 8px) rotate(135deg); } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image { overflow: visible; } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image img { border-radius: 14px; } body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child { margin-block-start: 34px; padding-block-start: 26px; } } /* ------------------------------------------------------------------------ 20.4 MADE FOR YOUR HOME - rebuilt to the reference 2026-08-31 ------------------------------------------------------------------------ REPLACES the centred one-column version of this section. Three blocks: 20.4.1 a two-column upper section - copy left, the house right 20.4.2 OUR TOOL HELPS YOU FIND - three items across 20.4.3 the closing callout - copy left, pill right Colour direction: navy for headings and body, Breeze Home Green for every accent - the eyebrow rule, the benefit tiles, the icon discs and both pills. No orange, and no colour introduced that is not already a token in section 1 of this file. WHAT ELEMENTOR STILL OWNS: every type colour, size and weight; the band's white background and its padding; the callout panel's fill, border, radius and padding; each icon's glyph, colour and size; both pills. What is here is the grid, the tiles and discs, the separators and the responsive behaviour - the things the editor has no control for. ------------------------------------------------------------------------ */ /* The band is now a plain vertical stack of three compositions. The centring the one-column version needed is undone here rather than left to fight the new layout - `--align-items` as well as `align-items`, because Elementor drives the container through the custom property. */ body.ab-hcx .elementor-9063 .abn-made.e-con-full, body.ab-hcx .elementor-9063 .abn-made > .e-con-inner { --align-items: stretch; align-items: stretch; text-align: start; } /* ---- 20.4.1 THE TWO-COLUMN UPPER SECTION ---------------------------- */ body.ab-hcx .elementor-9063 .abn-made__top.e-con-full, body.ab-hcx .elementor-9063 .abn-made__top > .e-con-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 68px); align-items: stretch; } /* The copy column is centred against the photograph rather than top-aligned: the reference reads as two things of equal weight side by side, and a column that starts at the top of a 540px picture and ends 90px short of it reads as a caption. */ body.ab-hcx .elementor-9063 .abn-made__col.e-con-full, body.ab-hcx .elementor-9063 .abn-made__col > .e-con-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-width: 0; } /* THE EYEBROW'S ACCENT LINE. A trailing rule, not a leading one: the leading 26x2px rule was deleted site-wide on 2026-08-28 because it indented seven eyebrows off their headline's left edge. A rule that runs to the RIGHT of the label has no such effect, and it is the device the reference uses. It is scoped to this one eyebrow, so the global treatment stays deleted. */ body.ab-hcx .elementor-9063 .abn-made__eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 14px; } body.ab-hcx .elementor-9063 .abn-made__eyebrow .elementor-heading-title::after { content: ""; flex: 0 0 auto; inline-size: clamp(38px, 5vw, 72px); block-size: 2px; background: currentColor; opacity: .5; } /* The headline's 720px cap was removed from the widget, not overridden here - Elementor resolves it through `--width` and a CSS width would lose. */ body.ab-hcx .elementor-9063 .abn-made__head.e-con-full, body.ab-hcx .elementor-9063 .abn-made__head > .e-con-inner { align-items: flex-start; text-align: start; width: 100%; } body.ab-hcx .elementor-9063 .abn-made__copy.e-con-full, body.ab-hcx .elementor-9063 .abn-made__copy > .e-con-inner { margin-block-start: 22px; width: 100%; text-align: start; } body.ab-hcx .elementor-9063 .abn-made__copy p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #3E3E3E; } body.ab-hcx .elementor-9063 .abn-made__say p { font-size: 17.5px; font-weight: 700; line-height: 1.5; color: var(--abn-green-txt, #3A6440); } /* THE THREE BENEFITS. Vertical, each led by a tile - the reference's device, and the reason the list scans as three promises rather than three paragraphs. The old 3px green top rule on each column is gone with the columns; the green has moved into the tiles. */ body.ab-hcx .elementor-9063 .abn-made__pts.e-con-full, body.ab-hcx .elementor-9063 .abn-made__pts > .e-con-inner { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-block-start: 30px; } body.ab-hcx .elementor-9063 .abn-made__pt.e-con-full, body.ab-hcx .elementor-9063 .abn-made__pt > .e-con-inner { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 3px; align-items: start; min-width: 0; border: 0; padding: 0; } body.ab-hcx .elementor-9063 .abn-made__pt > .abn-made__pt-ic, body.ab-hcx .elementor-9063 .abn-made__pt > .e-con-inner > .abn-made__pt-ic { grid-area: 1 / 1 / 3 / 2; align-self: start; margin-block-start: 1px; } body.ab-hcx .elementor-9063 .abn-made__pt > .abn-made__pt-t, body.ab-hcx .elementor-9063 .abn-made__pt > .e-con-inner > .abn-made__pt-t { grid-area: 1 / 2 / 2 / 3; } body.ab-hcx .elementor-9063 .abn-made__pt > .abn-made__pt-c, body.ab-hcx .elementor-9063 .abn-made__pt > .e-con-inner > .abn-made__pt-c { grid-area: 2 / 2 / 3 / 3; } /* THE TILE. Only the square footprint, the radius and the fill are here; the glyph, its colour and its size are all Elementor controls on the icon widget, so the editor can change any of the three. */ body.ab-hcx .elementor-9063 .abn-made__pt-ic .elementor-icon-wrapper { line-height: 0; } body.ab-hcx .elementor-9063 .abn-made__pt-ic .elementor-icon { display: inline-grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 13px; background: var(--abn-green, #5C9D5E); } body.ab-hcx .elementor-9063 .abn-made__pt-ic .elementor-icon svg { display: block; } body.ab-hcx .elementor-9063 .abn-made__pt-t .elementor-heading-title { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--abn-navy, #051124); } body.ab-hcx .elementor-9063 .abn-made__pt-c p { margin: 0; font-size: 15px; line-height: 1.55; color: #5A6270; } body.ab-hcx .elementor-9063 .abn-made__col > .abn-made__btn, body.ab-hcx .elementor-9063 .abn-made__col > .e-con-inner > .abn-made__btn { margin-block-start: 34px; } /* THE HOUSE. The art container is positioned and the image widget is pinned inside it, which is what makes `height:100%` on the resolve: a stretched grid item has a definite height, an absolutely positioned child inherits it, and the picture is then exactly as tall as the copy beside it however long that copy runs. `min-block-size` is the floor, so the photo is still a major element on a short column. The radius and the clip go on `.elementor-widget-container`, not on the widget - the same split section 20.3b needed, and the reason the widget box itself is left open. */ body.ab-hcx .elementor-9063 .abn-made__art.e-con-full, body.ab-hcx .elementor-9063 .abn-made__art > .e-con-inner { position: relative; display: block; min-block-size: clamp(400px, 31vw, 560px); padding: 0; } body.ab-hcx .elementor-9063 .abn-made__img { position: absolute; inset: 0; width: auto; max-width: none; margin: 0; } body.ab-hcx .elementor-9063 .abn-made__img > .elementor-widget-container { block-size: 100%; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 6px rgba(5, 17, 36, .06), 0 18px 44px rgba(5, 17, 36, .10); } body.ab-hcx .elementor-9063 .abn-made__img img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; } /* ---- 20.4.2 OUR TOOL HELPS YOU FIND --------------------------------- */ body.ab-hcx .elementor-9063 .abn-made__find.e-con-full, body.ab-hcx .elementor-9063 .abn-made__find > .e-con-inner { /* 2026-09-01 (AB-NEXT-20260901): TWO DECLARATIONS DELETED here, not overridden further down - padding-block-start: clamp(34px, 3.4vw, 50px); border-block-start: 1px solid var(--abn-rule-soft, rgba(5,17,36,.08)); Both were written when this block sat UNDER the "Made for your home" copy inside a white band and needed a rule to separate the two. That copy no longer exists and the band is green, so the border was drawing a stray light hairline straight across the top of the green section and the padding was 49px of empty green above the heading. Deleting rather than out-specifying hands the top padding back to this container's own Elementor padding control, where it reads 0. */ align-items: center; } body.ab-hcx .elementor-9063 .abn-made__find-t { width: 100%; } body.ab-hcx .elementor-9063 .abn-made__find-t .elementor-heading-title { text-align: center; } /* `gap: 0` with the padding on the items is deliberate. It is what puts the separator exactly on the column boundary with equal air either side; a grid gap plus a border would hug the rule to the item on its right. */ body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full, body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; width: 100%; } body.ab-hcx .elementor-9063 .abn-made__f.e-con-full, body.ab-hcx .elementor-9063 .abn-made__f > .e-con-inner { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 5px; align-items: start; align-content: start; min-width: 0; padding-inline: clamp(16px, 2vw, 34px); } body.ab-hcx .elementor-9063 .abn-made__find-row > .abn-made__f:first-child, body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner > .abn-made__f:first-child { padding-inline-start: 0; } body.ab-hcx .elementor-9063 .abn-made__find-row > .abn-made__f:last-child, body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner > .abn-made__f:last-child { padding-inline-end: 0; } body.ab-hcx .elementor-9063 .abn-made__find-row > .abn-made__f:not(:first-child), body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner > .abn-made__f:not(:first-child) { border-inline-start: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); } body.ab-hcx .elementor-9063 .abn-made__f > .abn-made__f-ic, body.ab-hcx .elementor-9063 .abn-made__f > .e-con-inner > .abn-made__f-ic { grid-area: 1 / 1 / 3 / 2; align-self: start; } body.ab-hcx .elementor-9063 .abn-made__f > .abn-made__f-t, body.ab-hcx .elementor-9063 .abn-made__f > .e-con-inner > .abn-made__f-t { grid-area: 1 / 2 / 2 / 3; } body.ab-hcx .elementor-9063 .abn-made__f > .abn-made__f-c, body.ab-hcx .elementor-9063 .abn-made__f > .e-con-inner > .abn-made__f-c { grid-area: 2 / 2 / 3 / 3; } /* THE DISC. A tint rather than a solid: three more solid green tiles directly under three solid green tiles would read as one long list instead of two sections, and the tint is the same 12% green wash the page already uses. */ body.ab-hcx .elementor-9063 .abn-made__f-ic .elementor-icon-wrapper { line-height: 0; } body.ab-hcx .elementor-9063 .abn-made__f-ic .elementor-icon { display: inline-grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--abn-tint, #EDF4EE); } body.ab-hcx .elementor-9063 .abn-made__f-ic .elementor-icon svg { display: block; } body.ab-hcx .elementor-9063 .abn-made__f-t .elementor-heading-title { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--abn-navy, #051124); } body.ab-hcx .elementor-9063 .abn-made__f-c p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #5A6270; } /* ---- 20.4.3 THE CLOSING CALLOUT ------------------------------------- */ /* The panel's fill, border, radius and padding are Elementor settings on the container. This is the row. */ body.ab-hcx .elementor-9063 .abn-made__call.e-con-full, body.ab-hcx .elementor-9063 .abn-made__call > .e-con-inner { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: clamp(18px, 2vw, 28px); } body.ab-hcx .elementor-9063 .abn-made__call-ic { flex: 0 0 auto; } body.ab-hcx .elementor-9063 .abn-made__call-ic .elementor-icon-wrapper { line-height: 0; } body.ab-hcx .elementor-9063 .abn-made__call-ic .elementor-icon { display: inline-grid; place-items: center; inline-size: 58px; block-size: 58px; border-radius: 50%; background: var(--abn-green, #5C9D5E); } body.ab-hcx .elementor-9063 .abn-made__call-ic .elementor-icon svg { display: block; } body.ab-hcx .elementor-9063 .abn-made__call-copy.e-con-full, body.ab-hcx .elementor-9063 .abn-made__call-copy > .e-con-inner { flex: 1 1 auto; min-width: 0; align-items: flex-start; text-align: start; } body.ab-hcx .elementor-9063 .abn-made__call-c p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #4A515C; } body.ab-hcx .elementor-9063 .abn-made__call-btn { flex: 0 0 auto; align-self: center; } /* Section 3 sets `white-space: normal` on every CTA so a long label can wrap in a narrow band. In a flex row beside a paragraph that turns the pill into a two-line block the moment the copy gets long, so it is restated here - the row stacks below 900px anyway, where wrapping is no longer a risk. */ body.ab-hcx .elementor-9063 .abn-made__call-btn .elementor-button { white-space: nowrap; } /* ---- 20.4.4 RESPONSIVE ---------------------------------------------- */ /* Tablet and below: content first, house directly underneath - the order the brief asks for and the source order the tree is already in, so nothing has to be reordered with `order` or `display: contents`. */ @media (max-width: 1024px) { body.ab-hcx .elementor-9063 .abn-made__top.e-con-full, body.ab-hcx .elementor-9063 .abn-made__top > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; } /* The pinned-art mechanism is a desktop device. Stacked, the picture is an ordinary image in the flow with a ratio of its own. */ body.ab-hcx .elementor-9063 .abn-made__art.e-con-full, body.ab-hcx .elementor-9063 .abn-made__art > .e-con-inner { position: static; min-block-size: 0; } body.ab-hcx .elementor-9063 .abn-made__img { position: static; inset: auto; width: 100%; } body.ab-hcx .elementor-9063 .abn-made__img > .elementor-widget-container { block-size: auto; } body.ab-hcx .elementor-9063 .abn-made__img img { block-size: auto; aspect-ratio: 16 / 10; } } @media (max-width: 900px) { /* Stacked items need a horizontal rule between them, not a vertical one - a border-inline-start in a single column is a line down the left margin. */ body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full, body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner { grid-template-columns: minmax(0, 1fr); } body.ab-hcx .elementor-9063 .abn-made__f.e-con-full, body.ab-hcx .elementor-9063 .abn-made__f > .e-con-inner { padding-inline: 0; padding-block: 20px; } body.ab-hcx .elementor-9063 .abn-made__find-row > .abn-made__f:not(:first-child), body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner > .abn-made__f:not(:first-child) { border-inline-start: 0; border-block-start: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); } body.ab-hcx .elementor-9063 .abn-made__find-row > .abn-made__f:first-child, body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner > .abn-made__f:first-child { padding-block-start: 0; } body.ab-hcx .elementor-9063 .abn-made__find-row > .abn-made__f:last-child, body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner > .abn-made__f:last-child { padding-block-end: 0; } /* The callout stacks with the pill underneath, as asked. */ body.ab-hcx .elementor-9063 .abn-made__call.e-con-full, body.ab-hcx .elementor-9063 .abn-made__call > .e-con-inner { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 18px; } body.ab-hcx .elementor-9063 .abn-made__call-copy.e-con-full, body.ab-hcx .elementor-9063 .abn-made__call-copy > .e-con-inner { flex: 1 1 240px; } body.ab-hcx .elementor-9063 .abn-made__call-btn { flex: 1 0 100%; align-self: stretch; } body.ab-hcx .elementor-9063 .abn-made__call-btn .elementor-button { width: 100%; white-space: normal; } } @media (max-width: 767px) { body.ab-hcx .elementor-9063 .abn-made__top.e-con-full, body.ab-hcx .elementor-9063 .abn-made__top > .e-con-inner { gap: 26px; } body.ab-hcx .elementor-9063 .abn-made__eyebrow .elementor-heading-title::after { inline-size: 34px; } body.ab-hcx .elementor-9063 .abn-made__copy.e-con-full, body.ab-hcx .elementor-9063 .abn-made__copy > .e-con-inner { margin-block-start: 16px; } body.ab-hcx .elementor-9063 .abn-made__copy p { font-size: 15.5px; } body.ab-hcx .elementor-9063 .abn-made__say p { font-size: 16.5px; } body.ab-hcx .elementor-9063 .abn-made__pts.e-con-full, body.ab-hcx .elementor-9063 .abn-made__pts > .e-con-inner { margin-block-start: 24px; gap: 16px; } body.ab-hcx .elementor-9063 .abn-made__pt.e-con-full, body.ab-hcx .elementor-9063 .abn-made__pt > .e-con-inner { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; } body.ab-hcx .elementor-9063 .abn-made__pt-ic .elementor-icon { inline-size: 42px; block-size: 42px; border-radius: 12px; } body.ab-hcx .elementor-9063 .abn-made__pt-t .elementor-heading-title { font-size: 16px; } body.ab-hcx .elementor-9063 .abn-made__pt-c p { font-size: 14.5px; } body.ab-hcx .elementor-9063 .abn-made__col > .abn-made__btn, body.ab-hcx .elementor-9063 .abn-made__col > .e-con-inner > .abn-made__btn { margin-block-start: 26px; width: 100%; } body.ab-hcx .elementor-9063 .abn-made__img img { aspect-ratio: 4 / 3; } body.ab-hcx .elementor-9063 .abn-made__f.e-con-full, body.ab-hcx .elementor-9063 .abn-made__f > .e-con-inner { grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; padding-block: 18px; } body.ab-hcx .elementor-9063 .abn-made__f-ic .elementor-icon { inline-size: 46px; block-size: 46px; } body.ab-hcx .elementor-9063 .abn-made__call-ic .elementor-icon { inline-size: 50px; block-size: 50px; } } /* Both pills stretch on a phone so neither is a small target beside a full-width block of copy. */ @media (max-width: 600px) { body.ab-hcx .elementor-9063 .abn-made__btn .elementor-button { width: 100%; } } /* ------------------------------------------------------------------------ 20.5 THE FLOATING PILL ------------------------------------------------------------------------ It says "See What My Attic Needs" now - eight characters longer than "Find My Fan Size". The pill was sized for the shorter string, so it is allowed to grow and told never to wrap into two lines or run past the viewport. ------------------------------------------------------------------------ */ body.ab-hcx .abhu-fab { white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; } @media (max-width: 420px) { body.ab-hcx .abhu-fab { font-size: 13px; letter-spacing: .6px; } } /* ------------------------------------------------------------------------ 20.3b HOW ATTIC BREEZE HELPS - undoing the navy-band assumptions ------------------------------------------------------------------------ Measured after the band went light, not guessed. abv-hcalc.css section for this band was written when it was navy and it hard-codes three things at (0,4,1), which beats the (0,3,1) rule Elementor generates from the widget colour controls - so the step titles stayed white on a white band even though the Elementor setting said navy: .abhc-step__t .elementor-heading-title color: #FFFFFF .abhc-step border-top: 2px solid white/16 .abhc-step__n .elementor-heading-title color: var(--abhc-accent) Overridden here rather than edited there, because that file still styles this band correctly on any page where it IS navy. Scoped with .abhc-how--light, which is exactly and only the band that changed. ------------------------------------------------------------------------ */ body.ab-hcx .elementor-9063 .abhc-how--light .abhc-step__t .elementor-heading-title, body.ab-hcx .elementor-9063 .abhc-how--light .abhc-step > .elementor-widget-heading:not(.abhc-step__n) .elementor-heading-title { color: var(--abn-navy, #051124); font-size: 21px; line-height: 1.3; font-weight: 700; } body.ab-hcx .elementor-9063 .abhc-how--light .abhc-step, body.ab-hcx .elementor-9063 .abhc-how--light .abhc-step.e-con-full { border-block-start: 0; padding-block-start: 0; } body.ab-hcx .elementor-9063 .abhc-how--light .abhc-step:hover { border-block-start-color: transparent; } /* THE SEPARATOR WAS BEING CLIPPED. The chevron is a ::after on the image widget and sits OUTSIDE it, in the grid gap - and the widget had overflow:hidden so the rounded corners would clip the photograph. Both are needed, so the clipping moves inward: the radius and the overflow go on the container that actually holds the image, and the widget box itself stays open for the chevron to hang out of. */ body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image { overflow: visible; border-radius: 0; box-shadow: none; } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image > .elementor-widget-container { border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(5, 17, 36, .06), 0 10px 26px rgba(5, 17, 36, .07); } /* The closing statement is centred on the band, so it needs the band's width. Elementor had it at fit-content with align-self:center, which centred the BOX and left the rule above it as a short stub under the first column. */ body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child { width: 100%; max-width: none; align-self: stretch; } body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child p { max-width: 62ch; margin-inline: auto; } /* The head block: centre the TEXT as well as the box. */ body.ab-hcx .elementor-9063 .abhc-how--light .abhc-air__head .elementor-heading-title, body.ab-hcx .elementor-9063 .abhc-how--light .abhc-air__head p { text-align: center; } body.ab-hcx .elementor-9063 .abhc-how--light .abhc-air__head > .elementor-widget { width: 100%; } /* ------------------------------------------------------------------------ 20.3c HOW ATTIC BREEZE HELPS - the two Elementor width controls ------------------------------------------------------------------------ Measured, not assumed. Two widgets in this band carry an Elementor WIDTH setting from when the band was navy and left-aligned: .abhc-air__head width 710 of a 1600 band the closing statement width 710, class elementor-widget__width-initial Elementor drives both through a `--width` custom property, so a plain `width: 100%` here loses to `width: var(--width)` no matter how specific it is - the declaration wins and then resolves to 710px anyway. The variable is what has to change. `margin-inline: auto` then does the centring, which works on a flex child where `text-align` alone would not have moved the box. ------------------------------------------------------------------------ */ body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner { --align-items: center; align-items: center; } body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .abhc-air__head { --width: 100%; max-width: 880px; margin-inline: auto; } body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child { --width: 100%; } /* The lede's Attic Breeze statement is a , not a - Elementor's editor emits either depending on how the text was bolded, so both. */ body.ab-hcx .elementor-9063 .abhc-how--light .abhc-air__head .elementor-widget-text-editor strong, body.ab-hcx .elementor-9063 .abhc-how--light .abhc-air__head .elementor-widget-text-editor b, body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child strong, body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child b { color: var(--abn-green-txt, #3A6440); } /* The empty stage container is a leftover from the navy band's animation; it measures zero but still takes a flex row and its gap. */ body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .abhc-air__stage:empty { display: none; } /* ------------------------------------------------------------------------ 20.3d HOW ATTIC BREEZE HELPS - THE BAND'S INNER IS A GRID, NOT A COLUMN ------------------------------------------------------------------------ This is what 20.3b and 20.3c were both actually fighting, and it only showed up on measurement: abv-hlp.css and abv-hlp2.css both give `.abhx-air > .e-con-inner` a `grid-template-areas` layout - head / stage / cards - built for the navy version, where the head sat in a narrow left column beside a stage. So: - the head measured 710 of a 1600 band and could not be centred, because it was in a COLUMN of the grid, not a block in a flow; - the closing statement had no named area at all, so it was auto-placed into the leftover right-hand cell: 834px wide, starting at x 919, with its divider reading as a stub under nothing. `margin-inline: auto`, `align-self` and `--width` were all irrelevant while that was true. The band is a simple vertical sequence now, so the grid is replaced by a column and the three children lay out in source order. ------------------------------------------------------------------------ */ body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner { display: flex; flex-direction: column; align-items: stretch; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; } body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .abhc-air__head { grid-area: auto; width: auto; max-width: 880px; margin-inline: auto; } body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .abhc-steps { grid-area: auto; width: auto; } body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child { grid-area: auto; width: auto; } /* ------------------------------------------------------------------------ 20.4b BOTH CONVERSION PILLS ARE THE SAME PILL AS EVERY OTHER ONE ------------------------------------------------------------------------ Measured side by side, and the reason this block exists: the CTA in THERE'S A BETTER WAY renders at 999px / 15px 30px / 13.5px, and a button in this section came out at 6px / 32px 48px / 17.6px. The pill treatment those buttons get is bound to a button sitting as a DIRECT child of a band, and BOTH buttons here are a level deeper - one inside the copy column, one inside the callout panel. Rather than flatten the section to satisfy a selector, the same values are stated for the class both buttons carry. ------------------------------------------------------------------------ */ body.ab-hcx .elementor-9063 .abn-made__btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 15px 30px; border-radius: 999px; font-size: 13.5px; } /* ========================================================================== SECTION 21 - THE 2026-08-31 TARGETED PASS AB-REV-20260831B ========================================================================== Three fixes, nothing else. Appended so it prints last and wins on source order rather than on specificity. Revert = delete from the banner above to the end of the file; the pre-change copy is novamira-sandbox/backups/rev20260831b/abv-hlp2.css.pre. ========================================================================== */ /* -------------------------------------------------------------------------- 21.1 THE THREE-STEP SEQUENCE SHOWS THE WHOLE PICTURE -------------------------------------------------------------------------- Section 20.3 framed the three illustrations at `aspect-ratio: 3/2` with `object-fit: cover`. All three sources are SQUARE (800x800), so a third of every one of them - the ridge at the top and the room below at the bottom - was being cut off. The frame becomes the square the pictures actually are and the fit becomes `contain`, so nothing is cropped and nothing is stretched. The ratio lives on the WIDGET CONTAINER, not on the : the container is what carries the radius, the clip and the shadow (20.3b), so it is the box that has to hold the frame's shape. Every card therefore reserves exactly the same width and the same height whatever its source turns out to be, the badge and the caption below it stay on one line across the row, and a future picture that is NOT square is letterboxed and centred inside the same frame instead of being cropped to fit it. -------------------------------------------------------------------------- */ body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image > .elementor-widget-container { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--abn-white, #FFFFFF); } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: 50% 50%; } /* Stacked, one column, the card is as wide as the band - and a square frame at 720px on a tablet is a wall, not an illustration. Capped and centred, so the three still measure the same and the caption stays near the picture. Under the cap (any phone) nothing changes: the frame is the card. */ @media (max-width: 900px) { body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image { inline-size: 100%; max-inline-size: 480px; margin-inline: auto; } } /* -------------------------------------------------------------------------- 21.2 NO QUESTION ECHO ON THE BACK OF A SYMPTOM CARD -------------------------------------------------------------------------- abv-hux.js builds a `.abhc-fx__echo` span at the top of every flipped card repeating the question from the front in small grey caps. On the four symptom cards it is a line the reader has just read and just acted on, so it is hidden - `display: none`, which takes it out of the flex flow entirely, so the bold headline moves to the top padding on its own and all four backs start on the same line. The front keeps its question. The echo is already `aria-hidden`, and the flip button's accessible name comes from the real

on the front (`aria-labelledby`), so nothing is lost to assistive technology. Scoped to `.abhx-sym` rather than to `.abhc-flip`, which is the shared class. -------------------------------------------------------------------------- */ body.ab-hcx .elementor-9063 .abhx-sym.abhc-flip .abhc-fx__echo { display: none; } /* -------------------------------------------------------------------------- 21.3 THE FLOATING PILL IS THE LEAD-IN, AND ONLY THE LEAD-IN -------------------------------------------------------------------------- It read "Ready to see what your home needs? | SEE WHAT MY ATTIC NEEDS". The second half and the rule between them are gone; what is left is the question, centred. The label is a bare TEXT NODE inside the - abv-hux.js writes it there - so there is no element to hide and no wrapper to delete. `font-size: 0` on the anchor collapses it to nothing while leaving it in the accessibility tree, and `gap: 0` closes the flex gap that would otherwise still be reserved between the lead-in and that now-empty anonymous item. The ::before states its own size back. The lead-in was inside `@media (min-width: 1200px)` because it was extra text beside a label. It is now the whole pill, so it applies at every width; the divider's margin, padding and border are cleared here rather than edited there, so section 12 still reads as what it was. Untouched: the green, the border, the radius, the shadow, the hover and active states, the focus ring, the fixed position, the phone bar, the stand-down classes, and the href. -------------------------------------------------------------------------- */ body.ab-hcx .abhu-fab { gap: 0; font-size: 0; letter-spacing: 0; } body.ab-hcx .abhu-fab::before { content: "Ready to see what your home needs?"; display: block; font-size: 13.5px; font-weight: 500; line-height: 1.25; text-transform: none; letter-spacing: 0; color: #FFFFFF; opacity: 1; margin-inline-end: 0; padding-inline-end: 0; border-inline-end: 0; } @media (max-width: 767px) { body.ab-hcx .abhu-fab::before { font-size: 13px; } } /* ========================================================================== SECTION 22 - THE THREE PHONE SWIPE RAILS AB-REV-20260901-SWIPE ========================================================================== Three repeating groups on this page each stacked into one tall column on a phone. Measured at 390px BEFORE this section, with the whole document at 8746px: .abn-made__pts 217px the three "takes about 2 minutes" benefits .abn-made__find-row 358px the three "our tool helps you find" items .abhc-story 1472px the 01 / 02 / 03 sequence <- four screens Each becomes a horizontal scroll-snap rail with pagination dots. NOTHING ELSE CHANGES: same icons, same headings, same copy, same photographs, same Poppins, same green, same pills, same order. This is a layout and interaction change and nothing else. 767, NOT 1024 - and that is a difference from the three rails this page already has (section 8.5 of abv-hux.css). Those run to 1024 because their grids stepped 3 -> 2 columns and ORPHANED a third card at 768. These three do not: they are already single-column stacks from 900px down, which is the right answer on a tablet. The brief was phone only, so 768-1024 is left exactly as it was, and so is every width above it. WHY THE MECHANISM IS LIFTED FROM abv-hux.css 8.5 AND abv-hcx-m.css 5 rather than written again: those two blocks already paid for the two corrections this pattern needs, and both are load-bearing here. 1. `overscroll-behavior-x: contain`, or a swipe that runs off the end of the rail is handed to the browser as a history Back gesture. 2. START alignment plus a TRAILING SPACER, never `scroll-snap-align: center`. On a `mandatory` scroller with no side padding a centred first card wants a NEGATIVE scrollLeft and a centred last card wants one past maxScroll, so both spring away from the finger and only the middle card can be settled on. That is the exact defect abv-hcx-m.css section 5 was written to fix on the two rails that shipped with it. THE SPACER IS `100% - card` AND THAT IS EXACT, not a safety margin. For N cards of width c and gap g, with the last card's trailing margin zeroed: last card's snap position = (N-1)(c+g) maxScroll = Nc + (N-1)g + s - 100% set equal -> s = 100% - c independent of BOTH N and g. So a fourth step dropped into the sequence in Elementor stays reachable with no CSS change - which matters, because the brief asked for "01 -> 02 -> 03 -> 04" and the section currently holds three. THE PEEK IS 9%. Card 88% + 3% gap puts the next card's leading edge at 91% of the rail, so 9% of it shows - about 30px at 390px. That is inside the 8-12% asked for, and the cards are wider than the page's existing 82% rails because these slides carry running text rather than a photograph. NO `touch-action` IS SET, deliberately. The default lets the browser decide from the gesture's direction, which is what keeps a vertical drag starting on a rail scrolling the PAGE and leaves pinch-zoom alone. Pinning it to `pan-x pan-y` would buy nothing and cost zoom. REVERT: delete from the banner above to the end of the file. Pre-change copy at novamira-sandbox/backups/swipe-20260901/abv-hlp2.css.pre, md5 in option `ab_backup_pre_swipe_20260901`. ========================================================================== */ /* ---- 22.0 THE DOTS DO NOT EXIST ABOVE 767 ---------------------------- FIRST, and outside the query, because the override below it is the same (0,4,1) and source order decides: base hidden, then shown on a phone. Put the other way round this rule wins everywhere and there are no dots at all. It is needed because abv-hux.css shows every `.abhc-dots` from 1024 down - correct for the rails that really do run to 1024, wrong for these three, which become stacks again at 768. Without it a tablet gets carousel chrome under a vertical list. (0,4,1) beats that sheet's (0,3,1) and this file prints after it, so it wins in both directions. */ body.ab-hcx .elementor-9063 .abhc-dots--phone { display: none; } @media (max-width: 767px) { /* ---- 22.1 THE SCROLLER, one declaration for all three ---------------- */ body.ab-hcx .elementor-9063 .abn-made__pts.e-con-full, body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full, body.ab-hcx .elementor-9063 .abhc-story.e-con-full { --abs-card: min(88%, 480px); --abs-gap: 3%; display: flex; --flex-direction: row; /* Elementor drives direction via the var */ flex-direction: row; --flex-wrap: nowrap; flex-wrap: nowrap; --gap: 0px; /* the gap is a card margin - see 22.2 */ gap: 0; grid-template-columns: none; /* find-row and story are grids above 767 */ align-items: stretch; /* equal-height slides, so dots never jump */ width: 100%; max-width: 100%; overflow-x: auto; /* `hidden`, not `visible`: with one axis scrollable the other cannot stay visible - the spec computes it to `auto` - and `auto` would give the rail its own vertical scrollbar. Anything that overhangs a slide is cleared with padding instead (22.4, 22.5). */ overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } body.ab-hcx .elementor-9063 .abn-made__pts.e-con-full::-webkit-scrollbar, body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full::-webkit-scrollbar, body.ab-hcx .elementor-9063 .abhc-story.e-con-full::-webkit-scrollbar { display: none; } /* ---- 22.2 THE SLIDES ------------------------------------------------- */ body.ab-hcx .elementor-9063 .abn-made__pts.e-con-full > .abn-made__pt, body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f, body.ab-hcx .elementor-9063 .abhc-story.e-con-full > .abhc-step { flex: 0 0 var(--abs-card); width: var(--abs-card); /* voids Elementor's own --width */ max-width: none; min-width: 0; margin-inline-end: var(--abs-gap); scroll-snap-align: start; /* One slide per swipe. This is the "read -> swipe -> swipe" cadence the brief asked for; without it a flick can skip 02 entirely. */ scroll-snap-stop: always; } body.ab-hcx .elementor-9063 .abn-made__pts.e-con-full > .abn-made__pt:last-child, body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f:last-child, body.ab-hcx .elementor-9063 .abhc-story.e-con-full > .abhc-step:last-child { margin-inline-end: 0; /* the spacer's arithmetic depends on this */ } /* THE TRAILING SPACER. None of these three containers has a pseudo-element of its own (checked across all 12 sheets), so ::after is free here. */ body.ab-hcx .elementor-9063 .abn-made__pts.e-con-full::after, body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full::after, body.ab-hcx .elementor-9063 .abhc-story.e-con-full::after { content: ""; flex: 0 0 calc(100% - var(--abs-card)); min-width: 0; align-self: stretch; } /* ---- 22.3 THE DOTS -------------------------------------------------- */ /* Injected by abv-hux.js through the same Rail.attach the original rails use, so they are the same 8px dot, the same 22px green pill for the current slide and the same 44px tap target - all of that already lives in abv-hux.css. The only thing needed here is the breakpoint: the shared `.abhc-dots` shows from 1024 down, and these three rails do not exist until 767, so `--phone` carries its own visibility. Stated at (0,4,1) in the sheet that prints LAST, so it wins in both directions. */ /* `align-self: stretch` IS THE FIX FOR A MEASURED DEFECT, not a tidy-up. The dots row is a flex ITEM of whatever container holds the rail, and the three containers do not agree on `align-items`: .abhc-how--light > .e-con-inner stretch -> centred .abn-made__find center -> centred .abn-made__col flex-start -> 97px LEFT of centre Measured at 390px: the benefits' dots sat at x20 with a 140px content width while the rail's centre was x188. `justify-content: center` cannot help there - it centres within the row's own shrunk box. Stretching the item to the rail's width makes the centring parent-independent, so a future rail dropped into any container is centred without a fourth case. */ body.ab-hcx .elementor-9063 .abhc-dots--phone { display: flex; align-self: stretch; width: 100%; padding-block: 2px 6px; } /* ---- 22.4 RAIL 1 - "So, what does your attic actually need?" ------ */ /* The three benefits. The band is white, so the slide needs a boundary to read as a card: white fill, the page's own 1px rule colour, the page's own soft card shadow (both already used by the sequence photographs) and the 18px radius this band already uses on the house photograph. No new colour, no new radius, no new shadow. White rather than the callout's #F0F2F4 because the icon tile and the find-row's pale green disc were both designed against white and lose their contrast on a grey card. */ body.ab-hcx .elementor-9063 .abn-made__pts.e-con-full { padding-block: 6px 18px; /* room for the card shadow */ margin-block-start: 22px; } body.ab-hcx .elementor-9063 .abn-made__pts.e-con-full > .abn-made__pt { padding: 18px 18px 20px; border-radius: 18px; background: var(--abn-white, #FFFFFF); border: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); box-shadow: 0 1px 2px rgba(5, 17, 36, .06), 0 10px 26px rgba(5, 17, 36, .07); align-content: start; } /* ---- 22.5 RAIL 2 - "Our tool helps you find:" -------------------- */ /* Same card, and the horizontal rules between the stacked items have to go with the stack: a border-block-start on a slide draws a line across the top of every card. Both `:not(:first-child)` border rules and the first/last padding exceptions from the <=900 and <=767 blocks are restated here at a higher specificity rather than left to source order, because they are the rules most likely to be edited later. */ body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full { padding-block: 6px 18px; margin-block-start: 4px; } body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f { padding: 18px 18px 20px; border-radius: 18px; background: var(--abn-white, #FFFFFF); border: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); box-shadow: 0 1px 2px rgba(5, 17, 36, .06), 0 10px 26px rgba(5, 17, 36, .07); align-content: start; } body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f:not(:first-child) { border-block-start: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); border-inline-start: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); } body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f:first-child, body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f:last-child { padding-block: 18px 20px; } /* ---- 22.6 RAIL 3 - the 01 / 02 / 03 sequence --------------------- */ /* NO card surface added here, on purpose. Each step's photograph is already a white 14px panel with a shadow (section 21.1) and the numbered marker already sits half on it and half off it, so the step reads as a card before anything is done to it. Adding a second frame around it would be a redesign, which this is not. THE PADDING-BLOCK-START IS LOAD-BEARING, not breathing room. The marker is `inset-block-start: -16px` on a 36px disc, so it hangs 16px above the step's own box - and 22.1 has to clip overflow-y. 24px of rail padding puts the whole marker inside the padding box, where it is painted. The section's margin comes down from 38px to 14px so the gap under the heading is the 38px it has always been. */ body.ab-hcx .elementor-9063 .abhc-story.e-con-full { padding-block: 24px 16px; margin-block-start: 14px; } /* The chevron between panels pointed DOWN the page for the stack (<=900). On a rail it would point out of the side of the scroller into the gap between two slides, so it stands down; 01 / 02 / 03, the peekand the dots all already say "in this order, and there is more". */ body.ab-hcx .elementor-9063 .abhc-story.e-con-full > .abhc-step:not(:last-child) > .elementor-widget-image::after { display: none; } /* THE CLOSING LINE KEEPS ITS CLEARANCE FROM THE STICKY PILL. The pill is a fixed 52px bar sitting 12px off the bottom, so 64px of the viewport is spoken for whenever it is up. This rail's dots are the only ones on the page with no "See What My Attic Needs" button beside them - and that button is what makes the pill stand down (abv-hux.js Fab) - so they are the one dots row that can meet it. 78px of clear space below them (16px rail padding + 6px dot padding + the 56px restated here) guarantees a resting scroll position with the whole row in the clear. */ body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child { margin-block-start: 56px; } } /* ========================================================================== SECTION 23 - THE 2026-09-01b REVISION AB-REV-20260901B ========================================================================== The brief, five items: 1. the hero zoomed OUT - most of the photograph, not a tight crop, and especially on a phone 2. less white space between sections 3. cleaner, consistent alignment down the page 4. "Your home doesn't stop at the ceiling" - the WHOLE picture in each card, and the white board behind it gone 5. "What if your home didn't have to fight all that heat?" rebuilt to the reference: 3 columns on desktop, a swipe carousel on a phone MOST OF 1, 2 AND 3 ARE NOT IN THIS FILE. Band padding, band gaps, min heights, background position/size per device, type size, weight and colour all have Elementor controls, so they were set on the elements themselves (novamira-sandbox/ab-rev0901b.php.disabled). What is here is the geometry and the chrome the editor has no control for. SPECIFICITY: every override below reuses the EXACT selector text of the rule it replaces, so the two are equal and source order decides - and this file prints last of the ten on this page. Nothing here uses !important. REVERT: delete from the banner above to the end of the file. Pre-change copy at novamira-sandbox/backups/rev20260901b/abv-hlp2.css.pre, md5 in option ab_backup_hashes_pre_rev20260901b. ========================================================================== */ /* -------------------------------------------------------------------------- 23.1 THE HERO'S PHONE CLEARANCE -------------------------------------------------------------------------- On a phone the hero background is now media 9013, a 700x1100 portrait crop that is solid #051124 down to y500 and dissolves into the aerial house over the next 130px, sized `100% auto` / `bottom center`. The picture therefore occupies the bottom 600/1100 of a file whose height is 157% of the viewport WIDTH - a fixed fraction of the viewport at every handset size. Only a vw stop tracks that; a px value drifts. Same reasoning ab-fi-heromob.php records for 4887. 84vw, AND IT IS MEASURED AGAINST OPACITY, NOT THE END OF THE DISSOLVE - a dissolve reads long before it finishes. Derivation: file aspect 1100/700 = 1.5714 -> band = 157.1vw photo top canvas y 500 -> 71.4vw above the bottom 3% opacity point 500 + 0.105 x 130 = 514 -> 83.7vw above the bottom so at 84vw the photograph behind the last line of copy is 3% opaque, which on #051124 cannot be seen behind white type. Change the artwork or its dissolve and this number is recomputed, not nudged. Elementor holds 328px on the element (84vw at 390) so the editor preview is honest; the vw value here is what ships. Elementor emits --padding-bottom at (0,3,0) on the element's own class, so this is written one class deeper rather than with !important - and it is gated on overview mode, because in tool mode abv-hcalc.css collapses this hero to a compact header and a 328px floor would hold it open. -------------------------------------------------------------------------- */ /* THE CLEARANCE IS SET ONCE, THROUGH THE CUSTOM PROPERTY ONLY. `hohero` is a BOXED container, so Elementor puts its padding on the INNER box - `.elementor-element-hohero > .e-con-inner { padding-block-end: var(--padding-bottom) }` - and reads the value out of that variable. Custom properties inherit, so declaring `--padding-bottom` on the outer element is enough to reach it. Declaring the LONGHAND here as well was measured adding the clearance TWICE - 327.6px on the outer and another 327.6px on the inner, a 1017px hero at 390 instead of 690 - because the two boxes are different boxes. Only the variable. */ @media (max-width: 767px) { body.ab-hcx:not(.abv-hc-tool) .elementor-9063 .ab-hero-photo.ab-hero-photo { --padding-bottom: 84vw; } } /* -------------------------------------------------------------------------- 23.2 THE THREE STORY CARDS SHOW THE WHOLE PICTURE, ON NO BOARD -------------------------------------------------------------------------- THE WHITE BOX WAS A LETTERBOX, and that is the whole diagnosis. Section 21.1 framed these three at `aspect-ratio: 1/1` with `object-fit: contain` and a WHITE fill behind, because at the time all three sources were square 800x800 files. They are not any more: media 9008 / 9009 / 9010 are now 1536x1024, i.e. 3:2. A 3:2 picture told to `contain` inside a 1:1 white box is painted 1536x1024 in a 1024-tall frame, and the leftover 256px above and below IS the white board. Nothing was ever drawn there - it was the frame showing through. So the frame becomes the shape the pictures actually are. At exactly 3:2 `cover` and `contain` paint the same thing - the whole illustration, no crop and no bar in either axis - and `cover` is the one that keeps a future non-3:2 file filling the frame instead of re-introducing a bar. The white fill goes with it, and so does the card shadow: with the board gone the picture IS the card, and a drop shadow around a photograph that already has its own dark roofline just reads as a second border. The ratio stays on `.elementor-widget-container` because that is what carries the radius and the clip (20.3b); the widget box stays open so the chevron between panels can hang out of it. `display: block` undoes 21.1's flex centring, which existed only to centre a letterboxed image. -------------------------------------------------------------------------- */ body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image > .elementor-widget-container { aspect-ratio: 3 / 2; display: block; background: none; box-shadow: none; border-radius: 16px; } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; } /* The sequence's lead-in is the band's Elementor row gap now (44px), not a margin declared here - one number, in the editor, for every band. */ body.ab-hcx .elementor-9063 .abhc-story.e-con-full, body.ab-hcx .elementor-9063 .abhc-story > .e-con-inner { margin-block-start: 0; } /* Stacked, a 3:2 frame is no longer the wall a square one was at a tablet's 720px, so the cap can be generous. */ @media (max-width: 900px) { body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image { max-inline-size: 560px; } body.ab-hcx .elementor-9063 .abhc-story .abhc-step > .elementor-widget-image img { border-radius: 16px; } } /* The closing statement under the sequence: 46 + 34 above it was the loosest joint left in the band. 32 + 26 still reads as a rule. */ body.ab-hcx .elementor-9063 .abhc-how--light > .e-con-inner > .elementor-widget-text-editor:last-child { margin-block-start: 32px; padding-block-start: 26px; } /* -------------------------------------------------------------------------- 23.3 "THERE'S A BETTER WAY" - REBUILT TO THE REFERENCE -------------------------------------------------------------------------- REPLACES section 20.2. That version put the three benefits inside one off-white panel with a hairline rail across the top, a circled number punched through the rail, and the icon disc BESIDE the title. The reference is the opposite of all four: open on the band's own white, no panel, the number as plain type above the artwork, the artwork on a soft organic tint, and a short accent rule between the title and its sentence. WHAT ELEMENTOR STILL OWNS: the eyebrow, headline, statement, every number, every title and every sentence - colour, size and weight; each icon's glyph, colour and size; the band's white background, padding and row gap. What is here is the three-column grid, the column dividers, the blob and the accent rule - plus the unwinding of 20.2's panel chrome. THE DIVIDERS ARE PADDING ON THE ITEMS, NOT A GRID GAP PLUS A BORDER. A gap plus a border hugs the rule to the item on its right; padding puts it on the column boundary with equal air either side. Same device as 20.4's find row. -------------------------------------------------------------------------- */ /* ---- the panel, the rail and the 52px lead-in are all gone ------------- */ body.ab-hcx .elementor-9063 .abn-ease .abn-steps.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-steps > .e-con-inner { background: none; border: 0; border-radius: 0; padding: 0; margin-block-start: 0; /* the band's Elementor row gap owns this */ grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; /* the boundary belongs to the divider */ row-gap: 0; } body.ab-hcx .elementor-9063 .abn-ease .abn-steps.e-con-full::before, body.ab-hcx .elementor-9063 .abn-ease .abn-steps > .e-con-inner::before { content: none; } /* ---- the benefit: one left-aligned column ----------------------------- */ body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: start; padding-inline: clamp(24px, 2.8vw, 46px); min-width: 0; } body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:first-child, body.ab-hcx .elementor-9063 .abn-ease .abn-step:first-child > .e-con-inner { padding-inline-start: 0; } body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:last-child, body.ab-hcx .elementor-9063 .abn-ease .abn-step:last-child > .e-con-inner { padding-inline-end: 0; } body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:not(:first-child) { border-inline-start: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); } /* ---- the number: plain type, not a disc on a rail --------------------- */ /* 20.2 made this a 46px bordered circle with a white fill so it could punch a hole in the rail. There is no rail, so it is type again. The colour is the heading's own Elementor setting. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step__n .elementor-heading-title { display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; /* 2026-09-01 (section 26): size, weight, line-height and tracking DELETED, not overridden - they blocked the number heading's own Elementor typography. */ } body.ab-hcx .elementor-9063 .abn-ease .abn-step > .abn-step__n, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .abn-step__n { /* margin DELETED 2026-09-01 (section 26): the gap under the number is the widget's own Elementor margin now. */ width: auto; } /* ---- the artwork on a soft organic tint ------------------------------- */ /* The blob is `.abn-step__ic::after`, which 20.2 set to `display:none` when it killed the rail connector - a free element with a documented history rather than a new one. ::before is deliberately left alone: that is where Elementor paints a container background overlay. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step > .abn-step__ic, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .abn-step__ic { margin-block-start: 24px; align-self: start; } body.ab-hcx .elementor-9063 .abn-ease .abn-step__ic { position: relative; /* Scaled to the reference's proportion: the tint is a SHAPE the artwork sits inside, not a badge behind it. Measured against the screenshot at 1300 - 109x88 read as a chip; 168x136 reads as the reference. */ inline-size: clamp(140px, 11.6vw, 184px); block-size: clamp(112px, 9.3vw, 148px); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } body.ab-hcx .elementor-9063 .abn-ease .abn-step .abn-step__ic::after { content: ""; display: block; position: absolute; inset: 0; z-index: 0; background: var(--abn-tint, #EDF4EE); /* Asymmetric on both axes so it reads as a drawn shape and not a squashed circle, and a different shape per step - three identical blobs in a row become a pattern. */ border-radius: 58% 42% 47% 53% / 55% 46% 54% 45%; } body.ab-hcx .elementor-9063 .abn-ease .abn-step:nth-child(2) .abn-step__ic::after { border-radius: 44% 56% 52% 48% / 48% 55% 45% 52%; } body.ab-hcx .elementor-9063 .abn-ease .abn-step:nth-child(3) .abn-step__ic::after { border-radius: 52% 48% 41% 59% / 58% 42% 58% 42%; } body.ab-hcx .elementor-9063 .abn-ease .abn-step__ic .elementor-icon { position: relative; z-index: 1; inline-size: auto; block-size: auto; border: 0; background: none; border-radius: 0; } /* ---- the title, and the short accent rule under it -------------------- */ body.ab-hcx .elementor-9063 .abn-ease .abn-step > .elementor-widget-heading:not(.abn-step__n), body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .elementor-widget-heading:not(.abn-step__n) { /* margins and line-height DELETED 2026-09-01 (section 26): all three were out-specifying the title widget's own Elementor controls. */ width: 100%; } /* A PSEUDO-ELEMENT, so the standing rule holds: this file colours nothing Elementor can colour, and a rule the editor has no control for is exactly what belongs here. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step > .elementor-widget-heading:not(.abn-step__n) .elementor-heading-title::after { content: ""; display: block; inline-size: 38px; block-size: 3px; border-radius: 2px; margin-block-start: 20px; background: var(--abn-green, #5C9D5E); } /* ---- the sentence ---------------------------------------------------- */ body.ab-hcx .elementor-9063 .abn-ease .abn-step > .elementor-widget-text-editor, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .elementor-widget-text-editor { /* margin DELETED 2026-09-01 (section 26): Elementor's margin owns it. */ width: 100%; } body.ab-hcx .elementor-9063 .abn-ease .abn-step > .elementor-widget-text-editor p { margin: 0; line-height: 1.6; } /* ---- 768-900: one column, and the divider turns with it -------------- */ /* Three 23px/800 titles in 240px columns at 768 is not a three-column layout, it is three narrow gutters, so the band stacks and the vertical divider becomes a horizontal one. THE BREAKPOINT IS 900, NOT 1024, TO MATCH THE SEQUENCE BAND ABOVE IT. `.abhc-story` has stacked at <=900 since 20.3. Written at 1024 first, and measured: between 901 and 1024 the sequence was three columns while this band was still one, so two sibling bands disagreed about the layout for a 123px range - exactly the kind of inconsistency the brief asked to clean up. At 901 the columns are 284px wide (236px of content), which is the same measure the sequence's own three columns hold there. */ @media (max-width: 900px) { body.ab-hcx .elementor-9063 .abn-ease .abn-steps.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-steps > .e-con-inner { grid-template-columns: minmax(0, 1fr); row-gap: 0; } body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner { padding-inline: 0; padding-block: 32px 0; } body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:not(:first-child) { border-inline-start: 0; border-block-start: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); } body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:first-child { padding-block-start: 0; } } /* -------------------------------------------------------------------------- 23.4 ...AND ON A PHONE IT IS A SWIPE CAROUSEL -------------------------------------------------------------------------- A fourth rail on the pattern section 22 established, so every load-bearing decision there applies unchanged and is not restated: START alignment plus a trailing `100% - card` spacer rather than `scroll-snap-align: center` (on a mandatory scroller with no side padding a centred first card wants a NEGATIVE scrollLeft and a centred last card one past maxScroll, so both spring away from the finger); `overscroll-behavior-x: contain`, or a swipe off the end is handed to the browser as a history Back; no `touch-action`, so a vertical drag still scrolls the page and pinch zoom still works; and dots built at every width by abv-hux.js and hidden above 767 by 22.0, so a landscape round trip cannot leave a rail without them. THE SPACER IS EXACT AND INDEPENDENT OF BOTH N AND THE GAP - s = 100% - c - so a fourth benefit added in Elementor stays reachable with no CSS change. -------------------------------------------------------------------------- */ @media (max-width: 767px) { body.ab-hcx .elementor-9063 .abn-steps.e-con-full { --abs-card: min(88%, 480px); --abs-gap: 3%; display: flex; --flex-direction: row; /* Elementor drives direction via the var */ flex-direction: row; --flex-wrap: nowrap; flex-wrap: nowrap; --gap: 0px; /* the gap is a card margin, as in 22.2 */ gap: 0; grid-template-columns: none; align-items: stretch; /* equal-height slides, so dots never jump */ width: 100%; max-width: 100%; overflow-x: auto; /* `hidden`, not `visible`: with one axis scrollable the spec computes the other to `auto`, and `auto` would give the rail its own vertical scrollbar. Overhang is cleared with padding instead. */ overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-block: 4px 16px; /* room for the card shadow */ margin-block-start: 0; } body.ab-hcx .elementor-9063 .abn-steps.e-con-full::-webkit-scrollbar { display: none; } body.ab-hcx .elementor-9063 .abn-steps.e-con-full > .abn-step { flex: 0 0 var(--abs-card); width: var(--abs-card); /* voids Elementor's own --width */ max-width: none; min-width: 0; margin-inline-end: var(--abs-gap); scroll-snap-align: start; scroll-snap-stop: always; /* one slide per swipe - no skipping 02 */ } body.ab-hcx .elementor-9063 .abn-steps.e-con-full > .abn-step:last-child { margin-inline-end: 0; /* the spacer's arithmetic depends on this */ } body.ab-hcx .elementor-9063 .abn-steps.e-con-full::after { content: ""; flex: 0 0 calc(100% - var(--abs-card)); min-width: 0; align-self: stretch; } /* THE SLIDE IS A CARD. On a rail each benefit is alone on screen, so it needs an edge to read as one of several - the same white fill, 1px rule, soft shadow and 18px radius section 22.4 gives the other rails, so the four carousels on this page are one object. The stacked layout's top padding and horizontal divider have to go with the stack: a border-block-start on a slide draws a line across the top of every card. Restated at the same specificity as the <=1024 rules, later in the file. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner { padding: 22px 20px 26px; border-radius: 18px; background: var(--abn-white, #FFFFFF); border: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); box-shadow: 0 1px 2px rgba(5, 17, 36, .06), 0 10px 26px rgba(5, 17, 36, .07); } body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:not(:first-child) { border-inline-start: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); border-block-start: 1px solid var(--abn-rule-soft, rgba(5, 17, 36, .08)); } body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:first-child { padding-block-start: 22px; } /* The blob and the rhythm come down with the card. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step__ic { inline-size: 124px; block-size: 102px; } body.ab-hcx .elementor-9063 .abn-ease .abn-step > .abn-step__ic, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner > .abn-step__ic { margin-block-start: 18px; } /* The phone rail's own margin overrides for the title, its accent rule and the sentence were DELETED 2026-09-01 (section 26): each widget now carries a per-device Elementor margin, and the accent rule moved to the number. */ } /* ========================================================================== 24. THE "ATTIC BREEZE HELPS" PLATES SIT ON ONE LINE 2026-09-01 ========================================================================== The four symptom cards carry a green plate near the bottom of the back face. The plates started at four different heights, because the two blocks above them - the bold headline and the paragraph - wrap to different line counts on every card and at every width. Four plates that should read as one row of green read as a stagger instead. THIS IS A ROW PROBLEM, AND ROW PROBLEMS HAVE NO PURE-CSS ANSWER HERE. The height each card has to make up is the difference between ITS stack and the TALLEST stack in the row - a value no single card can see. `flex: 1` on the paragraph would push every plate to the BOTTOM of its card, which lines the plates up by their bottom edge and leaves the tops as ragged as before; a hard `min-height` on the paragraph is a number that is wrong at the next breakpoint and the first time marketing edits a sentence. Subgrid could express it, but only by turning both faces of a flip card into grid tracks, which is a rebuild of the flip, not an alignment fix. So the measurement is JavaScript (abv-hlp2.js, section 8) and the DESIGN IS STILL HERE: the script only publishes `--abhc-symshim` on each card, and this rule decides what that means. `calc(16px + ...)` rather than a replacement value: 16px is section 20.1's spacing and stays the single source of the plate's own rhythm. TO REVERT: delete this section. `--abhc-symshim` becomes an unused custom property, section 20.1's `margin-block-start: 16px` takes over again, and the JavaScript becomes inert - it writes a property nothing reads. ========================================================================== */ body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__help { margin-block-start: calc(16px + var(--abhc-symshim, 0px)); } /* NOT ON THE PHONE RAIL. Below 768 the four cards are a horizontal scroll-snap rail showing ONE card at a time, so there is no row to line up and the shim would be nothing but dead space above the plate on three of the four cards. The script still measures and still publishes the property; this is the rule that decides it does not count here. */ @media (max-width: 767px) { body.ab-hcx .elementor-9063 .abhc-flip .abhc-fx__b .abhc-sym__help { margin-block-start: 16px; } } /* ========================================================================== 25. THE CLOSE ROW IS THE CARD'S FOOTER 2026-09-01 ========================================================================== Section 24 put the four green plates on one line. The plates themselves still hold three, four or five lines of copy, so the CLOSE control under them ended up at four different heights - the same stagger one component further down. NO SECOND MEASUREMENT, AND NO PER-CARD NUMBER. `.abhc-fx__b` is already a full-height flex column - it is a grid item at `1 / 1` inside `.abhc-fx`, so it stretches to the row height whatever its content is - and CLOSE is already its last child. `margin-block-start: auto` therefore hands every pixel of leftover height to the gap ABOVE the control and pins the control itself to the bottom padding. All four then share one bottom offset by construction: the back's own `padding-block-end`, which is one number in section 20.1 rather than four numbers anywhere. Nothing above CLOSE moves. `auto` only distributes space that was already empty, so the headline, the paragraph and the plate stay exactly where section 24 put them. `padding-block-start` is the FLOOR, not the gap. On the one card whose content defines the row height there is no leftover space for `auto` to distribute, and without a floor its plate and its CLOSE would touch. SYMPTOM CARDS ONLY. `.abhc-fx__close` is shared with the appearance cards in the roof-colour band, which have a link rather than a plate under the copy and are not part of this row. `.abhx-sym` is the same scoping section 21.2 uses for the question echo. TO REVERT: delete this section. The control returns to the 6px after the plate that abv-hux.css section 9.3 gives it. ========================================================================== */ body.ab-hcx .elementor-9063 .abhx-sym.abhc-flip .abhc-fx__b .abhc-fx__close { margin-block-start: auto; padding-block-start: 12px; } /* NOT ON THE PHONE RAIL, for the same reason section 24 sits it out: below 768 the row is a scroll-snap rail showing ONE card at a time, so there is no baseline to share and the leftover height would read as a hole between the plate and the control rather than as alignment. */ @media (max-width: 767px) { body.ab-hcx .elementor-9063 .abhx-sym.abhc-flip .abhc-fx__b .abhc-fx__close { margin-block-start: 6px; padding-block-start: 0; } } /* ========================================================================== 26. "THERE'S A BETTER WAY" - TIGHTENED TO THE REFERENCE AB-EASE-20260901 ========================================================================== Sections 20.2 and 23.3 built this band twice already. This section does not rebuild it a third time. It adds the three things the reference composition has and the band did not - a TINTED TWO-COLUMN TOP with the house photograph running off the frame edge, a NORMALISED ARTWORK FRAME with the icon badge overlapping its bottom-left corner, and a CLOSING LINE carrying the CTA - it makes the three cards the same width so their headlines share a line, and it hands a set of spacings back to Elementor that 20.2 and 23.3 had taken. WHAT ELEMENTOR OWNS AFTER THIS SECTION, and that is deliberately most of it: every string, every colour, every type size and weight, the tint on the top panel, the copy column's width, the two columns and their stacking device, the badge disc (an icon widget in `stacked` view, so its fill, glyph, size and padding are all controls) and its overlap (Elementor's own absolute position offsets), the CTA row's direction / justify / align / gap, and the per-device margin on every number, title and sentence in the three cards. Nine declarations that were blocking those controls were DELETED from 20.2, 23.3 and 23.4 rather than out-specified; each deletion is commented in place. WHAT IS HERE IS WHAT ELEMENTOR CANNOT EXPRESS: the frame-edge bleed, the photograph's cover crop and its feathered edge, the fixed artwork ratio, the equal-column device, the accent rule under the number, and the responsive undo of all of it. NOW INERT, LEFT IN PLACE ON PURPOSE: every `.abn-step__ic` rule in sections 20.2, 23.3 and 23.4 - the 92px disc, the organic blob, the rail connector and their reveal transitions. The badge is a NEW class (`.abn-step__badge`), so none of that history has to be unwound declaration by declaration; it simply has no element to match. That is also why it is safe: nothing in this section is fighting a rule above it. TO REVERT THIS SECTION: delete from the AB-EASE-20260901 banner to EOF. The nine deletions in 20.2 / 23.3 / 23.4 are then still gone - which only means those spacings and type sizes stay Elementor's, i.e. the band keeps working. To go all the way back, restore novamira-sandbox/backups/ease-20260901/abv-hlp2.css.pre. ========================================================================== */ /* -------------------------------------------------------------------------- 26.1 THE TINTED TWO-COLUMN TOP, BLEEDING TO BOTH FRAME EDGES -------------------------------------------------------------------------- In the reference the pale panel starts at the left edge of the frame and the photograph runs off the right one. The band is boxed to 1600 with a 32px gutter, so a child cannot reach the frame on its own. THE PATTERN, and it is one number so it cannot drift: inline-size: 100% + 2*bleed reach both frame edges margin-start: -bleed and start at the left one padding-inline: +bleed put the CONTENT back exactly on the 32px measure line every other band on this page aligns to and then the art column alone escapes that padding again with a negative end margin. Because the padding is inside the border box, the photograph reaches the panel's own right edge and still overflows nothing. A NEGATIVE END MARGIN CANNOT DO THIS ON ITS OWN, and that is not a guess: section 4 records the same trap for `.abn-plan`, and it was measured again here. With Elementor's own `width: var(--width)` = 100% in force, negative margins on both sides only SHIFTED the panel - at 1440 its left edge landed on 0 correctly while its right edge stayed 64px short of the frame, and at 1905 it hung 39.5px off the left. Widening the box is what actually reaches. THE ARITHMETIC, MEASURED RATHER THAN ASSUMED. On this band Elementor puts the 32px gutter on the OUTER `.e-con` and makes `.e-con-inner` `min(outerContent, 1600px)` with no padding of its own, so the measure sits 32px + max(0, halfFrame - 32 - 800) = max(32px, halfFrame - 800) in from the frame, where 800 is half the 1600 content width. Below a 1664px frame that collapses to exactly the 32px gutter, which is the `max()` floor; above it the vw term takes over. Verified against the measured measure at 1025 / 1280 / 1440 / 1905. 50vw counts the scrollbar, so on a wide screen this overshoots by half a scrollbar - about 7px, off-frame, invisible, and clipped by the `overflow-x: clip` section 13 already puts on `.elementor-9063`. Erring OUTWARD is the right way round: erring inward would show a white gap. IF THE BAND'S CONTENT WIDTH IS EVER CHANGED IN ELEMENTOR, change 800 with it: it is the new width / 2. -------------------------------------------------------------------------- */ body.ab-hcx .elementor-9063 .abn-ease .abn-ease__top { --abn-ease-bleed: max(32px, calc(50vw - 800px)); inline-size: calc(100% + (2 * var(--abn-ease-bleed))); max-inline-size: none; margin-inline-start: calc(-1 * var(--abn-ease-bleed)); margin-inline-end: 0; padding-inline: var(--abn-ease-bleed); overflow: visible; } /* THE ART COLUMN, IN ROW MODE ONLY - see 26.5 for why the row stops at 1201. It takes whatever the copy column leaves rather than a second percentage that has to be kept in sync with the first, so the copy column's Elementor width control is the ONE knob for this composition. `flex: 1 1 0%`, AND THE ZERO BASIS IS THE POINT. Elementor gives every container `--width: 100%` whether or not a width is set on it, so with the default `auto` basis the art column's base size was the FULL content box: at 1440 it measured 1361px starting at x631, i.e. 566px of it off the frame, and because the photograph's `cover` crop is computed on the box rather than on the visible part, the frame showed the left 59% of an already-cropped house. Measured `ar` went 2.29 / 2.45 / 2.97 / 3.52 across 1201-1600 - a giveaway that the box, not the layout, was wrong. A zero basis makes the free space the whole of it, so the column is exactly `content - copy + bleed`. `position: relative` plus an absolutely positioned image widget inside it is the PINNED-ART trick section 20.4.1 uses on the MADE FOR YOUR HOME band: a stretched flex item has a definite height, an absolutely positioned child inherits it, and only then does `height: 100%` on the resolve. The min-block-size is the floor for the case where the copy is edited short. THE PHOTOGRAPH: `cover` with the crop pulled slightly DOWN the frame. The source (media 8955, 1400x934) carries sky above the ridge and driveway below the door, and 55% keeps the whole facade - roof, both gable vents, entry and garage - inside the frame at every ratio this column takes. Rendered at five ratios and looked at, not reasoned about. THE FEATHER is the reference's device for joining photograph to panel: it dissolves the left edge instead of cutting it with a line. A mask, not a gradient overlay, so whatever colour the panel is set to in Elementor is what shows through. */ body.ab-hcx .elementor-9063 .abn-ease .abn-ease__art { min-inline-size: 0; } @media (min-width: 1201px) { body.ab-hcx .elementor-9063 .abn-ease .abn-ease__art { position: relative; flex: 1 1 0%; min-block-size: clamp(330px, 27vw, 470px); margin-inline-end: calc(-1 * var(--abn-ease-bleed)); align-self: stretch; } body.ab-hcx .elementor-9063 .abn-ease .abn-ease__art > .elementor-widget-image { position: absolute; inset: 0; margin: 0; width: auto; max-width: none; } body.ab-hcx .elementor-9063 .abn-ease .abn-ease__art > .elementor-widget-image > .elementor-widget-container { block-size: 100%; } body.ab-hcx .elementor-9063 .abn-ease .abn-ease__art .elementor-widget-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 55%; border-radius: 0; -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .38) 10%, #000 27%); mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .38) 10%, #000 27%); } } /* The green statement is the last line of the copy column, so it must not also carry section 20.2's standalone 18px lead-in on top of an Elementor margin. */ body.ab-hcx .elementor-9063 .abn-ease .abn-ease__copy .abn-ease__say { margin-block-start: 0; } /* -------------------------------------------------------------------------- 26.2 THREE COLUMNS OF EQUAL WIDTH, SO THE THREE HEADLINES SHARE A LINE -------------------------------------------------------------------------- 23.3 put the column dividers on the items as padding and zeroed that padding on the FIRST and LAST item, so the outer content boxes were a padding wider than the middle one. Measured at 1440: three artwork frames 413 / 372 / 412 wide, therefore 233 / 209 / 232 tall, therefore three headlines starting at y 2682 / 2659 / 2681. That is the "misaligned card elements / uneven card image dimensions / uneven headline positioning" in one cause. THE FIX KEEPS THE DIVIDER IDIOM AND ADDS NOTHING TO THE MARKUP. Every item gets the padding, including the outer edges, and the ROW is widened by that padding in both directions: row: inline-size 100% + 2*pad, margin-inline -pad items: three exact 1fr tracks, padding-inline: pad on all three so all three content boxes are identical, the first card's content edge still lands on the band's measure line and so does the last card's, and each divider still sits on a column boundary with equal air either side. THE PADDING IS CAPPED AT THE 32px GUTTER for exactly one reason: the row is pulled out by it, so a pad wider than the gutter would push the row past the frame. clamp(24, 2.8vw, 32) is 23.3's own ramp with that ceiling. ONLY ABOVE 900. At 900 and below the cards stack (23.3) or become a swipe rail (23.4), and there is no row to equalise - the negative margin would just be a horizontal overhang. -------------------------------------------------------------------------- */ @media (min-width: 901px) { body.ab-hcx .elementor-9063 .abn-ease .abn-steps.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-steps > .e-con-inner { --abn-step-pad: clamp(24px, 2.8vw, 32px); inline-size: calc(100% + (2 * var(--abn-step-pad))); max-inline-size: none; margin-inline: calc(-1 * var(--abn-step-pad)); grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; } body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-step > .e-con-inner, body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:first-child, body.ab-hcx .elementor-9063 .abn-ease .abn-step:first-child > .e-con-inner, body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:last-child, body.ab-hcx .elementor-9063 .abn-ease .abn-step:last-child > .e-con-inner { padding-inline: var(--abn-step-pad, 32px); } } /* The ceiling tracks the band's TABLET gutter in the 901-1024 range, where the band's inline padding is 24 and not 32. Measured without it: 2.8vw at 901 is 25.2, so the row hung 1.2px off each edge of the frame - clipped, invisible, and still wrong. */ @media (min-width: 901px) and (max-width: 1024px) { body.ab-hcx .elementor-9063 .abn-ease .abn-steps.e-con-full, body.ab-hcx .elementor-9063 .abn-ease .abn-steps > .e-con-inner { --abn-step-pad: 24px; } } /* Stacked at 768-900 the cards are one per row, and a 705px-wide 16/9 artwork on a tablet is a photograph the size of the whole viewport. The cap is 23.2's own number for the story sequence, so the two stacked bands agree. */ @media (max-width: 900px) { body.ab-hcx .elementor-9063 .abn-ease .abn-step__fig { max-inline-size: 560px; } } /* -------------------------------------------------------------------------- 26.3 THE CARD: number, framed artwork, overlapping badge, headline, copy -------------------------------------------------------------------------- THE ARTWORK FRAME IS ONE FIXED RATIO FOR ALL THREE, which is the other half of the ragged-row fix: the three source files do not agree either (1448x1086, 1448x1086 and 1536x1024, i.e. 4:3, 4:3 and 3:2). 16/9 is the reference's proportion; every crop was rendered at 16/9, 5/3 and 3/2 and looked at before choosing, and no subject loses a head at 16/9. THE RATIO GOES ON THE WIDGET, NOT ON `.elementor-widget-container`, and this is the one decision in this section that was arrived at by debugging rather than by design. Elementor 4.2.3's frontend.min.css carries .e-con > .elementor-widget > .elementor-widget-container { height: 100% } so putting the ratio on the container makes the chain fig-height <- widget-height <- container-height <- ratio-and-a-percentage and the percentage has no definite basis to resolve against. Measured, in two stages: with the ratio on the container the container itself came out 0x0 and all three card images were INVISIBLE below 768; adding `height: auto` gave the container its 273x182 back but left the WIDGET 0px tall, so the fig was 0px tall, so the badge - absolutely positioned against the fig - sat 161px ABOVE the picture instead of straddling its bottom edge. It only looked right above 768 because there the loaded supplied an intrinsic height and the ratio was never the height source at all. With the ratio on the WIDGET the chain runs the other way: the widget's height is definite from its own width, the fig inherits a real height, and Elementor's `height: 100%` on the container finally has something to resolve against - so nothing here depends on whether the photograph has downloaded. That also fixes the layout shift a lazy-loaded card image would otherwise cause on a phone. AND THE RATIO NEEDS A *SPECIFIED* WIDTH TO RESOLVE AGAINST, which is what `inline-size: 100%` on the widget is for. Without it the widget's width comes from being stretched as a flex item of the figure, and a stretch-derived cross size is not a definite specified size the ratio can use: the widget measured 273x0 at 390 while measuring 411x231 correctly at 1440, because above 768 it happens to get a width of its own from Elementor and below 768 section 23.4's `width: var(--abs-card)` on the card voids it. Isolated by testing seven variants of this one rule at 390 and 1440 together - six of them fixed one width and broke the other. The radius and the clip stay on `.elementor-widget-container` - same split section 20.3b needed - because the widget box has to stay open for the badge to hang out of it. -------------------------------------------------------------------------- */ body.ab-hcx .elementor-9063 .abn-ease .abn-step__fig { position: relative; inline-size: 100%; align-self: stretch; overflow: visible; } body.ab-hcx .elementor-9063 .abn-ease .abn-step__fig > .elementor-widget-image { display: block; inline-size: 100%; aspect-ratio: 16 / 9; } body.ab-hcx .elementor-9063 .abn-ease .abn-step__fig > .elementor-widget-image > .elementor-widget-container { display: block; block-size: 100%; border-radius: 12px; overflow: hidden; } body.ab-hcx .elementor-9063 .abn-ease .abn-step__fig > .elementor-widget-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; } /* THE BADGE hangs off the artwork's bottom-left corner. Its size, its disc, its glyph and its offsets are ALL Elementor controls (icon widget, `stacked` view, circle shape, plus the Advanced tab's absolute position and offsets). The only thing needed here is a paint order that does not depend on which widget Elementor happens to emit first. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step__badge { z-index: 2; } /* A TWO-LINE FLOOR UNDER THE HEADLINE, so the three sentences under it start on one line. Equal columns (26.2) and one artwork ratio (above) align the top of every headline, but the headlines themselves wrap to different line counts because they are different lengths - measured across 901-1905, the pattern is 2/2/2 from 1033 to 1241, 2/1/2 from 1242, and 1/1/2 from 1600. The floor is what puts the copy on a shared line in all of those. `lh` UNITS, so the floor tracks the Elementor line-height control instead of freezing a number this file guessed; the `em` value in front is the same arithmetic for engines without `lh`. Only above 900: below that the cards are stacked or a one-at-a-time swipe rail, and a floor there is dead space. HONEST RESIDUAL: two slivers, 901-959 and 1025-1032, where card 3's headline needs THREE lines and the other two need two, so the copy is still one line apart across 67px of the width space. A three-line floor there would be a pixel range fitted to today's copy - it would go wrong the moment a headline is edited - and would put 28px of empty space in the three cards everywhere else. If it ever matters, the general answer already exists on this page: section 24's `SymRow` measures a real shared row in JavaScript. */ @media (min-width: 901px) { body.ab-hcx .elementor-9063 .abn-ease .abn-step > .elementor-widget-heading:not(.abn-step__n) .elementor-heading-title { min-block-size: 2.44em; min-block-size: 2lh; } } /* THE ACCENT RULE MOVED FROM UNDER THE HEADLINE TO UNDER THE NUMBER, which is where the reference puts it. It is a pseudo-element either way, so the standing rule holds: a mark the editor has no control for is exactly what belongs in this file. `content: none` rather than deleting 23.3's rule: that rule also carries the size, the radius and the colour, so restoring the old position is a one-line change here rather than a re-typed block. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step > .elementor-widget-heading:not(.abn-step__n) .elementor-heading-title::after { content: none; } body.ab-hcx .elementor-9063 .abn-ease .abn-step .abn-step__n .elementor-heading-title::after { content: ""; display: block; inline-size: 26px; block-size: 3px; border-radius: 2px; margin-block-start: 11px; background: var(--abn-green, #5C9D5E); } /* -------------------------------------------------------------------------- 26.4 THE CLOSING LINE AND ITS CTA -------------------------------------------------------------------------- Two sentences and a pill on one centred line. The row itself - direction, wrap, justify, align and gap - is set on the container in Elementor, and each of the three widgets is set to `auto` width there, so this is only the two things those controls cannot reach: the paragraph's own default margin, and a little extra air before the pill so it does not read as a fourth word. -------------------------------------------------------------------------- */ body.ab-hcx .elementor-9063 .abn-ease .abn-ease__cta .elementor-widget-text-editor p { margin: 0; } body.ab-hcx .elementor-9063 .abn-ease .abn-ease__cta > .elementor-widget-button { margin-inline-start: 12px; } /* -------------------------------------------------------------------------- 26.5 BELOW 1201: the panel stacks and the photograph is shown WHOLE -------------------------------------------------------------------------- THE THRESHOLD IS 1201, WHICH IS THIS PAGE'S OWN, and it was measured before it was chosen. Elementor's tablet breakpoint is 1024, and between 1025 and 1200 a 44% copy column makes the headline wrap to three or four lines, which makes the panel 596px tall, which makes the art column 494x596 - PORTRAIT. `cover` then shows only the middle 55% of a 3:2 photograph and the garage falls out of the frame. Section 4 already draws its own bleed line at `min-width: 1201px` for the same kind of reason, so this band uses the same number rather than inventing a second one. Elementor's per-device direction control still declares the intent (`column` at tablet); this only extends it up to 1200. THE PHOTOGRAPH STOPS BEING CROPPED AT ALL. Stacked, the art column is no longer as tall as a column of copy - it is as tall as it wants to be - so the pinning comes off and the image gets its own 3/2 frame, which IS the source's own ratio (1400x934 = 1.4989). At exactly 3:2 `cover` paints the whole photograph: no crop in either axis, no letterbox in either axis. That is the fullest practical version of it, and it is arithmetic rather than a judgement call. The feather comes off with it: stacked, the tint is above the photo and the photo is the bottom edge of the panel, so there is nothing to dissolve into sideways. THE BLEED SHRINKS TO THE BAND'S OWN GUTTER at each tier - 24px at tablet, 20 on a phone - because the gutter is what the bleed has to cancel for the copy to land on the same measure line as every other band. A hard 32 here would inset this band's copy 12px further than the page's phone measure. -------------------------------------------------------------------------- */ @media (max-width: 1200px) { body.ab-hcx .elementor-9063 .abn-ease .abn-ease__top { --flex-direction: column; flex-direction: column; } body.ab-hcx .elementor-9063 .abn-ease .abn-ease__copy, body.ab-hcx .elementor-9063 .abn-ease .abn-ease__art { inline-size: 100%; max-inline-size: none; } /* THE COPY KEEPS A MEASURE WHEN THE COLUMN LOSES ONE. Stacked, the copy column is the full band, and at 1200 that put a single 19px line of body copy across 1073px - roughly 150 characters, about twice a readable line. The cap is on the widgets rather than the column so the tint panel still bleeds the full width behind them. */ body.ab-hcx .elementor-9063 .abn-ease .abn-ease__copy > .elementor-widget { max-inline-size: 720px; } body.ab-hcx .elementor-9063 .abn-ease .abn-ease__art { /* both edges now, not just the trailing one: stacked, the photograph is a full-bleed band rather than the right-hand half of one */ margin-inline: calc(-1 * var(--abn-ease-bleed)); inline-size: calc(100% + (2 * var(--abn-ease-bleed))); } /* Self-contained rather than an undo of the row rules: those live inside `min-width: 1201px` and are simply not in play here, so nothing has to be un-declared and nothing depends on source order. The ratio is on the WIDGET for the reason section 26.3 spells out - here it also means the tint panel reserves the photograph's exact height before the file has downloaded. */ body.ab-hcx .elementor-9063 .abn-ease .abn-ease__art > .elementor-widget-image { display: block; inline-size: 100%; /* specified, not stretched - see 26.3 */ aspect-ratio: 3 / 2; } body.ab-hcx .elementor-9063 .abn-ease .abn-ease__art > .elementor-widget-image > .elementor-widget-container { block-size: 100%; } body.ab-hcx .elementor-9063 .abn-ease .abn-ease__art .elementor-widget-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; border-radius: 0; } } @media (max-width: 1024px) { body.ab-hcx .elementor-9063 .abn-ease .abn-ease__top { --abn-ease-bleed: 24px; } } @media (max-width: 767px) { body.ab-hcx .elementor-9063 .abn-ease .abn-ease__top { --abn-ease-bleed: 20px; } /* A 16/9 strip is thin once a card is only 88% of a phone. 3/2 gives the picture back its presence on the one card the reader is looking at, and it is the same ratio the story sequence uses on a phone (section 23.2). On the WIDGET, for the reason 26.3 spells out. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step__fig > .elementor-widget-image { aspect-ratio: 3 / 2; } /* THE SAME RAGGED-ROW CAUSE, ONE BREAKPOINT DOWN. 23.3's `:first-child { padding-inline-start: 0 }` and its `:last-child` twin are DESKTOP rules, but a pseudo-class counts as a class, so at seven they out-specify 23.4's six-class `padding: 22px 20px 26px` shorthand on the rail - the outer two slides kept a zero edge and came out 20px wider than the middle one. Measured at 390: artwork 273 / 253 / 273, which put the three card titles on three different lines (spread 13.3px) on a carousel where the reader compares them one swipe apart. Restated at the same specificity, later in the file, so source order decides. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:first-child, body.ab-hcx .elementor-9063 .abn-ease .abn-step:first-child > .e-con-inner, body.ab-hcx .elementor-9063 .abn-ease .abn-step.e-con-full:last-child, body.ab-hcx .elementor-9063 .abn-ease .abn-step:last-child > .e-con-inner { padding-inline: 20px; } /* Stacked, the pill is a block decision rather than an inline one. */ body.ab-hcx .elementor-9063 .abn-ease .abn-ease__cta > .elementor-widget-button { margin-inline-start: 0; inline-size: 100%; } body.ab-hcx .elementor-9063 .abn-ease .abn-ease__cta > .elementor-widget-button .elementor-button { inline-size: 100%; justify-content: center; } } /* ========================================================================== 27. 2026-09-01 THE SPACING PASS + "YOUR NEXT BEST STEP" AB-NEXT-20260901 Revert = delete from the banner above to the end of this file, and restore the two deleted declarations in 20.4.2 from novamira-sandbox/backups/next-20260901/abv-hlp2.css.pre. Everything here is layout, a pseudo-element or a state. Every colour, size, weight, radius, shadow and padding a reader can see on the new band is an Elementor control on `honext` and its children, so it is still editable in the editor months from now. ========================================================================== */ /* ---- 27.1 THE GREEN BAND, tightened ---------------------------------- */ /* THE TRAILING PARAGRAPH MARGIN. Measured at 1440: each copy widget was 67.2px tall for 52.8px of text - the theme's 0.9em `p` margin-bottom, sitting at the BOTTOM of the item, which is what made the description look as if it had floated away from the title. 20.4.2's `.abn-made__f-c p { margin: 0 }` never reached it, because the widgets in this tree carry NO `abn-made__f-t` / `abn-made__f-c` class at all - every rule in 20.4.2 keyed to those two classes is dead, which is also why the item titles render at the kit's 28px h3 rather than 20.4.2's 16.5px. Left that way on purpose: this is a spacing pass, not a retype. */ body.ab-hcx .elementor-9063 .abn-made__f > .elementor-widget-text-editor p:last-child { margin-block-end: 0; } /* Title -> description. The brief asked for 6-10px; 20.4.2 sets 5. */ body.ab-hcx .elementor-9063 .abn-made__f.e-con-full, body.ab-hcx .elementor-9063 .abn-made__f > .e-con-inner { row-gap: 8px; } /* THE COLUMN SEPARATORS, corrected for the ground they are actually on. 20.4.2 draws them as a `border-inline-start` in NAVY at 8% - written when this row sat on a white band - and a border necessarily runs the item's full height. Both are fixed here: white at 22% (the same idea the other way up, exactly as abv-hux.css 8.11 already does for the dots on navy), and an absolutely positioned pseudo-element inset 6px top and bottom so the rule stops short of the row instead of ruling it edge to edge. Elementor sets `position: relative` on every `.elementor-element`, so the item is already the containing block, and an absolutely positioned ::before is out of grid flow - it cannot become a fourth grid item. */ @media (min-width: 901px) { body.ab-hcx .elementor-9063 .abn-made__find-row > .abn-made__f:not(:first-child), body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner > .abn-made__f:not(:first-child) { border-inline-start: 0; } body.ab-hcx .elementor-9063 .abn-made__find-row > .abn-made__f:not(:first-child)::before, body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner > .abn-made__f:not(:first-child)::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; inline-size: 1px; background: rgba(255, 255, 255, .22); pointer-events: none; } } /* Stacked between 768 and 900 the rule is horizontal - and it is on green there too, so it takes the same correction. */ @media (min-width: 768px) and (max-width: 900px) { body.ab-hcx .elementor-9063 .abn-made__find-row > .abn-made__f:not(:first-child), body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner > .abn-made__f:not(:first-child) { border-block-start-color: rgba(255, 255, 255, .22); } } /* ---- 27.2 "YOUR NEXT BEST STEP" - the row ---------------------------- */ /* Three equal columns that stretch to one height, so the three cards are the same size whatever the copy does. `minmax(0, 1fr)` plus `min-width: 0` on the item, or a long word in one card widens that column and the row stops being equal. */ body.ab-hcx .elementor-9063 .abhc-next__cards.e-con-full, body.ab-hcx .elementor-9063 .abhc-next__cards > .e-con-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; width: 100%; } body.ab-hcx .elementor-9063 .abhc-next__card.e-con-full, body.ab-hcx .elementor-9063 .abhc-next__card > .e-con-inner { min-width: 0; block-size: 100%; } /* THE ONLY REASON THIS FILE TOUCHES THE CARD AT ALL: the button has to be the last thing in the box whatever the description does above it, or two cards with one-line copy put their pills 22px higher than the third. An `auto` start margin does that with no height anywhere. */ body.ab-hcx .elementor-9063 .abhc-next__card > .abhc-next__btn, body.ab-hcx .elementor-9063 .abhc-next__card > .e-con-inner > .abhc-next__btn { margin-block-start: auto; } /* The same theme paragraph margin as 27.1, in the two text editors on this band. In the card it is 14px of white between the description and the button; in the intro it is 14px before the cards. */ body.ab-hcx .elementor-9063 .abhc-next__cc p:last-child, body.ab-hcx .elementor-9063 .abhc-next__led p:last-child { margin-block-end: 0; } /* Elementor's icon box is `line-height: 1` on a 34px glyph, which reserves a descender's worth of space the 14px margin then sits on top of. Zeroing the wrapper's line-height makes the declared margin the measured one. The glyph itself stays inline so the widget's own centre alignment still applies. */ body.ab-hcx .elementor-9063 .abhc-next__ic .elementor-icon-wrapper { line-height: 0; } /* ---- 27.3 THE BAND'S TABLET AND PHONE BEHAVIOUR ---------------------- */ /* THREE COLUMNS ALL THE WAY DOWN TO 768, which was NOT the first answer. The arithmetic said a 768px tablet could not hold three - a 223px column, a 191px content box, and a widest label ("Find an Installer" at 12.5px/700 /1px tracking) that wants 138px plus the pill's 52px of padding. Stacking it made the closing band 977px tall on a tablet, which is the opposite of what this pass is for. MEASURED instead of reasoned: with the card's inline padding at 16 and the pill's `text_padding_tablet` at 14/18 (an Elementor control on each button, not an override here), the widest of the three buttons measures 174px inside a 191px box at 768 - one line, 48px tall, 17px of slack - at 768, 800, 860, 900 and 1024 alike, with zero overflow. The band is 516px on a tablet instead of 977. Below 768 the rail in 27.3 sets `display: flex` and takes over. */ @media (min-width: 768px) and (max-width: 1024px) { body.ab-hcx .elementor-9063 .abhc-next__card.e-con-full, body.ab-hcx .elementor-9063 .abhc-next__card > .e-con-inner { padding-inline: 16px; } } @media (max-width: 767px) { /* THE FIFTH PHONE RAIL. Same scroll-snap rail as section 22, same exact spacer arithmetic (`s = 100% - card`, independent of both the card count and the gap), so a fourth card added in Elementor stays reachable with no CSS change. The dots come from the one `Rail.attach` in abv-hux.js via a single new row in its PHONE_RAILS table. */ body.ab-hcx .elementor-9063 .abhc-next__cards.e-con-full { --abs-card: min(88%, 480px); --abs-gap: 3%; display: flex; --flex-direction: row; flex-direction: row; --flex-wrap: nowrap; flex-wrap: nowrap; --gap: 0px; gap: 0; grid-template-columns: none; align-items: stretch; width: 100%; max-width: 100%; overflow-x: auto; /* `hidden`, not `visible`: with one axis scrollable the other computes to `auto`, and `auto` would give the rail its own vertical scrollbar. The card shadow is cleared with padding instead. */ overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-block: 4px 16px; /* room for the card's own shadow */ } body.ab-hcx .elementor-9063 .abhc-next__cards.e-con-full::-webkit-scrollbar { display: none; } body.ab-hcx .elementor-9063 .abhc-next__cards.e-con-full > .abhc-next__card { flex: 0 0 var(--abs-card); width: var(--abs-card); /* voids Elementor's own --width */ max-width: none; min-width: 0; margin-inline-end: var(--abs-gap); scroll-snap-align: start; scroll-snap-stop: always; /* one card per flick, never a skip */ } body.ab-hcx .elementor-9063 .abhc-next__cards.e-con-full > .abhc-next__card:last-child { margin-inline-end: 0; /* the spacer's arithmetic depends on this */ } body.ab-hcx .elementor-9063 .abhc-next__cards.e-con-full::after { content: ""; flex: 0 0 calc(100% - var(--abs-card)); min-width: 0; align-self: stretch; } /* THE DOTS ON NAVY. abv-hux.css 8.11 already solves this for `.abhx-navy`, but that class carries a background treatment this band sets in Elementor instead, so the two rules are restated here rather than the class being borrowed for its side effect. Inactive white at 32%, active stays Breeze Home Green - identical to every other rail on the site. */ body.ab-hcx .elementor-9063 .abhc-next .abhc-dot::before { background: rgba(255, 255, 255, .32); } body.ab-hcx .elementor-9063 .abhc-next .abhc-dot[aria-current="true"]::before { background: var(--abhu-green); } /* Stacked on a phone the pill is a block decision, not an inline one - the same treatment `.abn-ease__cta` already gets at this width. */ body.ab-hcx .elementor-9063 .abhc-next__card .elementor-button { inline-size: 100%; justify-content: center; } } /* ---- 27.4 A PRE-EXISTING PHONE DEFECT IN THE GREEN BAND -------------- */ /* WHITE TYPE ON A WHITE CARD. Found while checking this pass on a phone, and it is NOT caused by it - both halves are older. Section 22.5 turns each "our tool helps you find" item into a solid white card at <=767 so the rail slides read as cards, and the three titles and three descriptions are set to #FFFFFF in Elementor because the band they sit on is Breeze Home Green. On a phone that put white text on a white fill: at 390 the card rendered as an icon and two invisible lines. Fixed on the CSS side rather than by recolouring the type, because the colour is an Elementor control on each widget and has to stay the live one - overriding it here is exactly the buried-override this page's standing rule exists to prevent. A translucent white panel over the green keeps the card affordance the rail needs, keeps the pale-green icon disc readable, and leaves every colour the editor owns doing its job. Contrast measured on the composited panel (10% white over #5C9D5E = #6BA66D): white type 3.6:1 at 19-20px bold, which is AA for large text and is what the desktop band already ships. */ @media (max-width: 767px) { /* The heading stays on the phone. Its widget box was shrink-to-fit and the band centres its children, so the Elementor `align: start` control could not move it; stretching the box is what makes that control live again. */ body.ab-hcx .elementor-9063 .abn-made__find > .elementor-element-abmadefindt { align-self: stretch; inline-size: 100%; max-inline-size: 100%; } body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .28); box-shadow: none; } body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f:not(:first-child) { border-block-start-color: rgba(255, 255, 255, .28); border-inline-start-color: rgba(255, 255, 255, .28); } } /* ========================================================================== 28. 2026-09-01d TWO IMAGE FOCAL POINTS + THE GREEN BAND ON A PHONE AB-IMGMOB-20260901 Two unrelated jobs in one banner because they shipped together: 28.1 the "second floor" photograph's focal point, so the woman's head stops being cut off by the top of the 16/9 slot 28.2 "Our tool helps you find:" made compact on a PHONE ONLY - the same swipe rail, smaller The AC card's focal point is the third change in the same round, and it is NOT here: it is a one-line edit to abv-hux.css section 8.2, in place, next to the five other per-card focal points, so that registry stays the single source of truth for the symptom row. REVERT: delete from the banner above to the end of this file. Pre-change copies at novamira-sandbox/backups/imgmob-20260901/*.pre, md5s in option `ab_backup_imgmob_20260901`. ========================================================================== */ /* ---- 28.1 "A SECOND FLOOR THAT'S EASIER TO COOL" --------------------- */ /* Media 9029 is 1536x1024 (3:2) and section 26.3 frames the three step figures at 16/9, so cover discards 15.6% of the HEIGHT - 7.8% off the top at the centred default. The top of her hair sits at 4.9% of the source, so the centred crop took the top of her head off. Rendered against the real 411x231 slot at y = 50 / 25 / 18 / 12%: 18% is the first value that clears the hair with visible headroom (2.8% cut, about 2% of the frame above her) while the bottom still holds both feet on the treads and a whole stair below them, so nothing about the staircase reads as clipped. ONE CARD ONLY. Section 26.3's rule is on `.abn-step__fig` and drives all three figures; this is keyed to the first step's own Elementor element class so the dominoes photograph and the sunset photograph keep the centred crop they were framed for. NOT SCOPED TO A BREAKPOINT, and it does not need to be: at <=767 section 26 switches the same widget to `aspect-ratio: 3/2`, which is the source's own ratio, so nothing is cropped there and `object-position` has nothing to do. Verified as a no-op at 390 rather than assumed. */ body.ab-hcx .elementor-9063 .abn-ease .abn-step__fig.elementor-element-lpefig1 > .elementor-widget-image img { object-position: 50% 18%; } /* ---- 28.2 THE GREEN BAND, COMPACT ON A PHONE ------------------------- */ /* Everything below is inside `max-width: 767px`. Desktop and tablet are untouched, and so is the interaction: this is the SAME scroll-snap rail section 22.5 built, with the same start alignment, the same `s = 100% - card` trailing spacer, the same `scroll-snap-stop: always` and the same dots. Only its proportions change. MEASURED AT 375 (a 390px phone less its scrollbar) BEFORE this section: the green band 448px one slide 239px (295 wide) the slide's title 112px - FOUR lines at the kit's 28px h3 the slide's description 79px - three lines at 16px/26.4 The title is the whole story. The widgets in this tree carry no `abn-made__f-t` class, so every type rule in section 20.4.2 keyed to it is dead and the titles fall back to the kit's DESKTOP h3 - 28px on a 197px column, which is what four lines and a 239px card are made of. Section 27.1 recorded that and deliberately left it alone; this is the pass that fixes it, on a phone only. WHY 20px AND WHY BOLD, both of which are contrast decisions and not taste. The type is #FFFFFF (an Elementor control - see the standing split rule) over section 27.4's translucent white panel on Breeze Home Green, which composites to about 3.3:1. That is AA for LARGE text and fails it for body text, so the title has to stay large text after being shrunk: at least 24px at any weight, or at least 18.66px bold. 20px/700 is the smallest value that still qualifies. The description is NOT made smaller for the same reason - 16px white on this green is already below AA, which is a pre-existing site-wide condition and gets flagged rather than deepened, so only its leading is tightened. FONT SIZE AND WEIGHT ARE IN CSS HERE, WHICH IS AN EXCEPTION. Type belongs to Elementor on this page, but Elementor's font-weight control is not responsive - only size and line-height are - and setting 700 in the editor would change the desktop band too. Size and weight have to move together for the contrast argument above to hold, so both are here, in one place, inside one media query. The COLOURS stay Elementor's. */ @media (max-width: 767px) { /* 28.2.1 THE BAND. 28px of block padding inside the boxed container is a desktop rhythm on a phone. No `min-height` and no fixed height exists anywhere in this band - checked, not assumed - so the content is already what sets the height; this just stops overpaying at both ends. */ body.ab-hcx .elementor-9063 .abn-made > .e-con-inner { padding-block: 16px; } /* 28.2.2 HEADING -> RAIL -> DOTS. One 20px column gap did all three gaps; 12px keeps the heading attached to the thing it introduces. */ body.ab-hcx .elementor-9063 .abn-made__find.e-con-full, body.ab-hcx .elementor-9063 .abn-made__find > .e-con-inner { gap: 12px; } /* 28.2.3 THE RAIL. 22.5's `padding-block: 6px 18px` was written to clear the slide's drop shadow - and 27.4 then removed that shadow on this rail, so 18px of it has been empty green ever since. `--abs-card` 88% -> 86%: the narrower slide the brief asked for, and it costs nothing in height (measured - the title and the description both still break to three lines at 86%). The peek goes 9% -> 11%, still inside the 8-12% the rails on this page are built to. The 480px cap comes down with it so a 767px phone does not get a 625px slide. The trailing spacer needs no change: `s = 100% - card` reads the variable. */ body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full { --abs-card: min(86%, 420px); padding-block: 4px 6px; margin-block-start: 0; } /* 28.2.4 THE SLIDE. 22.5's `18px 18px 20px` (and its first/last-child restatement, matched here so both are beaten) down to `14px 15px 16px`, the icon column 46 -> 38 with a 12px gutter, and the row gap 8 -> 6 so the description sits directly under the title instead of a line below it. `align-content: start` is already section 20.4.2's, so the text block has never floated in the middle of the card and does not start now. */ body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f, body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f:first-child, body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f:last-child { padding: 14px 15px 16px; border-radius: 14px; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; } /* The disc, to match the column. The GLYPH is left alone - its 22px is an Elementor control on the icon widget, and a 22px mark in a 38px disc is close to the proportion the 46px disc carried. */ body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f .abn-made__f-ic .elementor-icon { inline-size: 38px; block-size: 38px; } /* 28.2.5 THE TYPE. See the section note for why 20px/700 and why the description keeps its size. */ body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f > .elementor-widget-heading .elementor-heading-title { font-size: 20px; line-height: 1.25; font-weight: 700; } body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f > .elementor-widget-text-editor, body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f > .elementor-widget-text-editor p { line-height: 1.45; } /* 28.2.6 THE DOTS stay exactly as they are - same 8px dot, same green pill, same 44px tap target, which is a floor and is not negotiable. Only the padding and the leading margin around the row come off. */ body.ab-hcx .elementor-9063 .abn-made__find .abhc-dots--phone { padding-block: 0; margin-block-start: 0; } } /* ========================================================================== 29. 2026-09-01e THE SYMPTOM ROW'S MEDIA AREA IS DECOUPLED FROM ITS TEXT AB-SYMMEDIA-20260901 THE DEFECT, measured before the change: width card 1 card 2 card 3 card 4 image widget widths 1280 381 407 381 407 273 273 273 543 1440 361 361 335 361 313 313 313 481 1600 316 316 290 316 353 353 353 421 1920 316 343 316 316 373 373 373 421 TWO SEPARATE CAUSES, both structural. 1. THE PHOTOGRAPH WAS THE SLACK ABSORBER. `.abhx-card` is a grid item in a `align-items: stretch` row, so all four cards take the row's height - and that height is set by the FLIP CARD'S BACK FACE, which is a sibling grid item at `1 / 1` and is the taller of the two. On the front face (a column flex) the title band is `flex: 0 0 auto` with a 96px floor and the image widget is `flex: 1 1 auto`, so the image got `cardHeight - titleBand` - i.e. THE AMOUNT OF TEXT UNDER A PICTURE DECIDED HOW TALL THE PICTURE WAS. "Are some rooms comfortable while others never cool down?" needs a 157px band against the others' 130px, and those 27px came straight off its photograph. 2. CARD 4's WIDGET WAS WIDER THAN ITS CARD. `hosymimgbills` carries `--align-self: flex-start` as an Elementor control (visible in the page's inline CSS, not in any sheet). In a column flex that is the CROSS axis, so the widget stopped stretching, its width became indefinite, and `aspect-ratio: 4/3` then derived width FROM height: 361 x 4/3 = 481px inside a 315px card. The card clipped the extra 166px, which is why that photograph read as far more zoomed than its three neighbours. THE FIX. The image widget becomes a real media area: `flex: 0 0 auto` so it is never asked to absorb anything, an explicit `inline-size: 100%` so its width comes from the card and never from the ratio, and an explicit `block-size` in the four-up range. `overflow: hidden` (abv-hux.css 8.1) and the img's `object-fit: cover` are already there, and EVERY per-card `object-position` is untouched - the thermostat's `20% 50%` and the upstairs card's `50% 40%` + `scale(1.15)` all still apply, they just apply inside a box that is now the same in all four cards. THE TEXT TAKES THE SLACK, WHICH IS WHY THE TITLE BAND KEEPS `flex: 0 0 auto` AND IS NOT TOUCHED. With the media fixed, the band's top edge is at the same Y in all four cards by construction, the band's own height stays natural, and its 26px top padding puts the first line of every title on one line. Any leftover height now lands BELOW the band, inside the card's own white fill, where it cannot be seen. Making the band `flex: 1 1 auto` instead was tried on paper and rejected: it is `align-items: center`, so a grown band would re-centre its title and move the text off the shared line. WHY 361px AND NOT A RATIO. There is no aspect-ratio that reproduces what shipped, because the old heights were never ratio-driven - they ran the wrong way, DECREASING as the viewport widened (407 at 1280 down to 316 at 1920) while the cards got wider, since a wider back face needs fewer lines. A flat height is the only value that is uniform across the whole four-up range, and 361px is the height three of the four cards already have at 1440. 1440 361 -> unchanged on all four; card 3 gains back its 26px 1600 316 -> 361 1920 316/343 -> 361 (both grow, nothing is cropped tighter than it already was) 1280 381/407 -> 361 THE ONE PLACE IMAGES GET SHORTER. That row was already ragged there by 26px, so there was no correct height to preserve; the band also comes down 566 -> 544. If the taller frame is wanted at 1280, change this one declaration to 407px inside a `(min-width:1280px) and (max-width:1439px)` query - nothing else depends on the number. 1025-1279 IS ALREADY CORRECT AND STAYS EXACTLY AS IT IS. In the two-up grid the front face is the taller item, so nothing was ever stretching the media and `aspect-ratio: 4/3` really governed - measured 456x342, 494x370, 583x437, all exactly 4/3 and all four identical. `flex: 0 0 auto` there is a no-op today and makes it immune to the same defect the first time somebody edits a headline. NO `block-size` is set in that range, so the 4/3 ratio keeps driving it. <=1024 IS NOT TOUCHED AT ALL. The row is a scroll-snap rail there (abv-hux.css 8.5) with one card on screen, the card height is content-driven, and all four media boxes already measure 558x419 - exactly 4/3. REVERT: delete from the banner above to the end of this file. Pre-change copy at novamira-sandbox/backups/symmedia-20260901/abv-hlp2.css.pre, md5 in option `ab_backup_symmedia_20260901`. Section 28 above it is not modified. ========================================================================== */ /* ---- 29.1 THE MEDIA AREA NEVER FLEXES, AND NEVER SIZES ITSELF -------- */ /* Scoped to `.abhx-sym` rather than to `.abhc-flip`, so this is the symptom row and nothing else that may become a flip card later. (0,6,1) against abv-hux.css 8.1's (0,5,1), and this sheet prints last, so it wins on both counts rather than relying on either one. */ @media (min-width: 1025px) { body.ab-hcx .elementor-9063 .abhx-sym.abhc-flip .abhc-fx__f > .elementor-widget-image { /* the whole fix, in one declaration: stop absorbing the row's slack */ flex: 0 0 auto; /* WIDTH FROM THE CARD, NEVER FROM THE RATIO. This is what corrects card 4: with a definite inline size, `aspect-ratio` can no longer resolve width from height, so the widget cannot exceed the card whatever `--align-self` says. */ inline-size: 100%; max-inline-size: 100%; /* Belt and braces on the same point - it neutralises the Elementor `--align-self: flex-start` on `hosymimgbills` at source. The stray control is still in the editor and can be cleared there; nothing here depends on whether it is. */ align-self: stretch; } } /* ---- 29.2 ONE MEDIA HEIGHT ACROSS THE FOUR-UP ROW ------------------- */ /* 1280 is the four-up breakpoint (section 14 of this file), so this query and that grid switch together and there is no width where one is in force without the other. `aspect-ratio: auto` because a ratio and an explicit height on the same box is a contradiction waiting to be misread - the height is the source of truth here and the ratio has nothing left to do. */ @media (min-width: 1280px) { body.ab-hcx .elementor-9063 .abhx-sym.abhc-flip .abhc-fx__f > .elementor-widget-image { block-size: 361px; aspect-ratio: auto; } } /* ========================================================================== 30. 2026-09-01h THE BEAT THE HEAT PROOF STRIP, CLONED AB-BTHCLONE-20260901 REPLACES the previous sections 30 and 31, both of which were re-drawn from measurements rather than taken from the component. Those are deleted, not overridden: this file now ends here. WHAT WAS COPIED, AND FROM WHERE. Every declaration below was read out of the live Beat the Heat page's CSSOM (page 8914, the rules whose selectors contain `bth-proof`), not off a screenshot and not re-derived. The source block is BTH's own `@media (min-width:1001px)` restore in `novamira-sandbox/ab-bth-proof.php`, plus the `::before` divider from `bth-ux-css-r3.inc` and the `border-top` from `bth-ux-css.inc`. THE ELEMENTOR TREE WAS CLONED TOO, so these rules land on the same shapes they were written for. Page 8863's band now reads: holooks = BTH `bthproof` section, boxed 1600, bg green abmadefind (wrapper - hidden heading, no gap, no padding) abmadefindr = BTH `bth-proof__grid` + class bth-proof__grid abmadef1..3 = BTH `bth-proof__item` + class bth-proof__item abmadefNi = BTH `bth-proof__icon` html widget, inline SVG abmadefNb = BTH `bth-proof__body` NEW container abmadefNt = BTH `bth-proof__title` abmadefNc = BTH `bth-proof__text` The item containers were given BTH's own container settings verbatim (content_width full, flex row, gap 15, padding 20/20/18/20, mobile 20/18/17/18, nowrap, align flex-start), and the three icon widgets were converted from Elementor Icon widgets to HTML widgets holding a 24x24 line SVG - `fill:none; stroke:currentColor; stroke-width:1.4; round caps` - which is exactly how BTH draws its four. THE FIVE DIFFERENCES, AND THERE ARE ONLY FIVE 1. three columns, not four `repeat(3,1fr)` 2. the ground is green, not navy (Elementor, on `holooks`) 3. accent is Attic Navy, not green `--pf-accent` / `--pf-accent-lt` 4. `max-width` on the item is dropped (BTH caps at 270px inside a 307px column; three items capped that tight in a 425px column would strand 155px per column and bunch the row left, so each item fills its column and item 3 ends on the same right inset item 1 starts from) 5. no tooltip. BTH's `bth-proof__tip` / `bth-proof__more` are a disclosure feature, not part of the visual row, and were not brought over. Nothing here references them. COLOUR IS STILL ELEMENTOR'S, per the standing split rule, with ONE documented exception. The heading and the copy carry their colour from Elementor globals on the widgets (Dark Blue #051124 / Light Text #FFFFFF) and no rule below declares `color` on them. The SVG icons cannot: BTH paints them from `--pf-accent` and the widgets are raw HTML with no colour control, so the icon colour lives in ONE custom property on the band, named the same as BTH's. To recolour the icons, change `--pf-accent` in 30.2. THE HEADING IS HIDDEN AT >=768 (30.1), not deleted. The brief is explicit that a centred heading over the row is the main reason the band did not read as this component, and BTH has no heading. It is kept in the tree and shown on the phone, where the rail is a different presentation and the label still earns its place. OPACITY .92 ON THE SUPPORTING LINE IS BTH's and is reproduced. FLAGGED: white on Breeze Home Green is 3.32:1 before the fade and 3.15:1 after - AA for large text only. On BTH the same line sits on navy at 18:1. This is a consequence of the colour swap the brief asks for, not of the layout, and the only fixes are a darker ground or navy supporting copy. BREAKPOINTS >= 901 the strip: three columns, dividers between 1|2 and 2|3 768-900 section 27.1's single-column stack, same item and same type, no dividers (a vertical rule beside a stacked item is a stray mark). BTH does the same thing at its own 2-column tablet step. <= 767 the approved swipe rail is untouched - same `--abs-card`, same scroll-snap, same dots, same card fill - and only the inside of the slide is re-laid out to the new icon/body structure at the phone sizes section 28.2.5 settled on. REVERT: delete from the banner above to the end of this file AND restore `_elementor_data` from option `ab_backup_8863_pre_bthclone_20260901` - the tree change and these rules go together. Files: novamira-sandbox/backups/bthclone-20260901/. Sections 20, 22, 27, 28 and 29 are not modified. ========================================================================== */ /* ---- 30.1 THE TWO WIDGETS THAT ARE NOT PART OF THE COMPONENT --------- */ /* The stray hero deck, at every width. (0,7,1) because abv-hcalc.css shows `ab-hc-ovonly` at (0,6,1) in overview mode and a weaker rule loses silently. */ body.ab-hcx .elementor-9063 .abn-made .abn-made__find > .elementor-widget.ab-hc-ovonly.elementor-element-5a9cece { display: none; } /* 2026-09-02: THE HEADING IS PERMANENT AT EVERY WIDTH (Vincent). It used to be hidden here from 768px up, which left the band with no title on desktop and a hidden duplicate in the DOM. The rule is gone rather than overridden, so there is nothing left to out-specify. THE BOX HAS TO BE STRETCHED, at every width now rather than only on the phone. `.abn-made__find` is a column flex with `align-items: center`, so a heading widget left at its shrink-to-fit width is CENTRED over the middle grid column and reads as that column's label. Stretching it to the full width is what lets the widget's own Elementor `align` control decide where the text sits - which is `start`, as the editor set it. */ body.ab-hcx .elementor-9063 .abn-made__find > .elementor-element-abmadefindt { align-self: stretch; inline-size: 100%; max-inline-size: 100%; } /* ---- 30.2 THE STRIP ---------------------------------------------------- */ /* BTH: `--pf-accent:#5C9D5E; --pf-accent-lt:#A0C6A2`. Swapped, and nothing else in this section carries a colour. */ body.ab-hcx .elementor-9063 .bth-proof { --pf-accent: #051124; --pf-accent-lt: #051124; overflow: visible; } /* BTH's hairline above the strip, in the accent at 16%. */ body.ab-hcx .elementor-9063 .abn-made.elementor-element-holooks { border-top: 1px solid rgba(5, 17, 36, .16); } /* The block padding. BTH zeroes it on the section and puts `clamp(34px,4vw,48px)` on the inner, inside a 1600 boxed canvas with a 32px page inset - which is what `holooks` already is. */ @media (min-width: 768px) { body.ab-hcx .elementor-9063 .elementor-element-holooks { padding-block: 0; } body.ab-hcx .elementor-9063 .elementor-element-holooks > .e-con-inner { /* 2026-09-02: condensed from clamp(34px,4vw,48px). A compact introduction, not a hero-sized band. */ padding-top: clamp(22px, 2.2vw, 28px); padding-bottom: clamp(22px, 2.2vw, 28px); } /* BTH's section holds the grid directly. Ours has one wrapper in between (it carries the reveal animation and, on the phone, the heading and the dots), so it is made layout-neutral rather than removed. */ body.ab-hcx .elementor-9063 .abn-made__find.e-con-full, body.ab-hcx .elementor-9063 .abn-made__find > .e-con-inner { /* 2026-09-02: was `gap: 0`, correct while the heading was hidden and this wrapper held nothing but the grid. The heading is permanent now, so it needs one gap between itself and the row - and exactly one, because the deck and the phone dots are display:none and contribute no gap. */ gap: 14px; padding: 0; margin: 0; } } /* ---- 30.3 THE GRID ----------------------------------------------------- */ /* BTH verbatim, with `repeat(3,1fr)` for `repeat(4,1fr)`. Scoped to 901 and up, which is where section 27.1 already puts three columns. `grid-template-rows: auto auto auto` PLUS `grid-row: 1 / span 3` ON THE ITEM IS BTH's, AND IT IS THE WHOLE DIFFERENCE IN THE STRIP'S OVERALL HEIGHT. Both come from BTH's `>=1025` block, where the item used to be a subgrid with a third row for the disclosure control. The `>=1001` restore turns the item back into a flex row but never resets either one, so the grid still declares three rows, rows 2 and 3 collapse to zero, and their two 43.2px row gaps - the same `gap` value the columns use - are what make BTH's grid box 86px tall around a 79px item. Without these two declarations this strip measured 176px against BTH's 183px, everything else already identical. Reproduced rather than 'corrected' because the brief is to clone the component, and this is what the component does. */ @media (min-width: 901px) { body.ab-hcx .elementor-9063 .bth-proof .elementor-element.bth-proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; gap: clamp(18px, 3vw, 44px); max-width: none; width: 100%; margin: 0; padding: 0; overflow: visible; align-items: start; transform: none; scroll-snap-type: none; } body.ab-hcx .elementor-9063 .bth-proof__grid > .elementor-element.bth-proof__item { grid-row: 1 / span 3; } } /* ---- 30.4 THE ITEM ----------------------------------------------------- */ /* BTH verbatim except `max-width` - see difference 4 in the note. The hover state is restated in the same rule exactly as BTH does, so a stale interaction class cannot paint a card back in. */ @media (min-width: 768px) { body.ab-hcx .elementor-9063 .bth-proof .bth-proof__grid > .elementor-element.bth-proof__item, body.ab-hcx .elementor-9063 .bth-proof .bth-proof__item:hover, body.ab-hcx .elementor-9063 .bth-proof .bth-proof__item.is-open { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; max-width: none; width: 100%; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; scroll-snap-align: none; position: relative; } /* BTH's own reset of the round-3 hairlines. Section 27.1's separators are switched off by the same declaration. */ body.ab-hcx .elementor-9063 .bth-proof .bth-proof__item::before { content: none; } } /* ---- 30.5 THE DIVIDERS ------------------------------------------------- */ /* `bth-ux-css-r3.inc`, value for value, in Attic Navy instead of Breeze Home Green. One rule, two dividers - the `+ .bth-proof__item` sibling selector is BTH's, and it is why item 1 never gets one. Only where there are three columns to divide. BTH publishes this at >=1025 and its own 2-column tablet step gets a `:nth-child(2n)` variant; the equivalent step here is the 768-900 stack, which gets none. */ @media (min-width: 901px) { body.ab-hcx .elementor-9063 .bth-proof__grid > .bth-proof__item + .bth-proof__item::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 1px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 17, 36, 0) 0%, rgba(5, 17, 36, .34) 16%, rgba(5, 17, 36, .34) 84%, rgba(5, 17, 36, 0) 100%); transition: opacity .24s ease; } } /* ---- 30.6 THE ICON ----------------------------------------------------- */ /* BTH's `>=1001` icon block. 34px slot, 34px art, no disc of any kind, and a 1px optical nudge down so the stroke lines up with the cap height of the label beside it. The widget is an HTML widget on both pages, so the box it sizes is the same box. */ body.ab-hcx .elementor-9063 .bth-proof .bth-proof__item > .bth-proof__icon { flex: 0 0 34px; width: 34px; height: 34px; line-height: 0; margin-top: 1px; display: block; grid-row: auto; } body.ab-hcx .elementor-9063 .bth-proof .bth-proof__icon > .elementor-widget-container { line-height: 0; } body.ab-hcx .elementor-9063 .bth-proof .bth-proof__icon svg { width: 34px; height: 34px; display: block; color: var(--pf-accent); stroke: var(--pf-accent); } /* ---- 30.7 THE BODY ----------------------------------------------------- */ body.ab-hcx .elementor-9063 .bth-proof .bth-proof__item > .bth-proof__body { display: block; min-width: 0; flex: 1 1 auto; grid-template-rows: none; padding: 0; margin: 0; } body.ab-hcx .elementor-9063 .bth-proof .bth-proof__body > .bth-proof__title, body.ab-hcx .elementor-9063 .bth-proof .bth-proof__body > .bth-proof__text { grid-row: auto; display: block; width: 100%; max-width: 100%; margin: 0; } /* ---- 30.8 THE TYPE ----------------------------------------------------- */ /* BTH's label, value for value, MINUS the colour - that is an Elementor control on the widget and stays one. BTH's title is a text-editor and ours is a heading, so the same declarations are addressed to both; nothing else about them differs. */ @media (min-width: 768px) { body.ab-hcx .elementor-9063 .bth-proof .bth-proof__title .elementor-heading-title, body.ab-hcx .elementor-9063 .bth-proof .bth-proof__title p { margin: 0 0 7px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 12.8px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; min-height: 2.5em; text-decoration: none; } body.ab-hcx .elementor-9063 .bth-proof .bth-proof__text p { margin: 0; font-size: 13.9px; line-height: 1.45; min-height: 0; opacity: .92; } } /* ---- 30.9 THE PHONE RAIL ----------------------------------------------- */ /* The interaction, the card, the peek, the snap and the dots are section 28's and are not touched. This only re-lays out the INSIDE of a slide, because the title and the supporting line now sit inside `bth-proof__body` instead of being grid items of the slide. Sizes are the ones section 28.2.5 settled on for contrast, not BTH's - a 12.8px label on this ground fails AA. */ @media (max-width: 767px) { /* The heading stays on the phone. Its widget box was shrink-to-fit and the band centres its children, so the Elementor `align: start` control could not move it; stretching the box is what makes that control live again. */ body.ab-hcx .elementor-9063 .abn-made__find > .elementor-element-abmadefindt { align-self: stretch; inline-size: 100%; max-inline-size: 100%; } body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full > .abn-made__f { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; grid-template-columns: none; } body.ab-hcx .elementor-9063 .bth-proof .bth-proof__item > .bth-proof__icon { flex: 0 0 38px; width: 38px; height: 38px; } body.ab-hcx .elementor-9063 .bth-proof .bth-proof__icon svg { width: 38px; height: 38px; } body.ab-hcx .elementor-9063 .bth-proof .bth-proof__title .elementor-heading-title, body.ab-hcx .elementor-9063 .bth-proof .bth-proof__title p { font-size: 20px; line-height: 1.25; font-weight: 700; min-height: 0; margin: 0 0 6px; text-transform: none; letter-spacing: normal; } body.ab-hcx .elementor-9063 .bth-proof .bth-proof__text p { margin: 0; font-size: 16px; line-height: 1.45; opacity: 1; } } /* ========================================================================== 31. THE 'OUR TOOLS HELP YOU FIND' ROW, STACKED AT TABLET 2026-09-02 ========================================================================== Between 768 and 900 the row collapses to one column (section 20.4.2's max-width:900 rule) and the three items met with NO separation at all - measured 59px tall each, butted at 592/651/710, padding 0, border 0. That is not a regression from making the heading permanent; it is the `bth-proof` component (sections 28-30) having superseded the older `.abn-made__f` padding and hairline rules this width still relied on. Rather than revive those - they are keyed to classes the widgets no longer carry - the row simply gets a gap, which the grid honours directly and which cannot fight anything the component sets on the items themselves. ========================================================================== */ @media (min-width: 768px) and (max-width: 900px) { body.ab-hcx .elementor-9063 .abn-made__find-row.e-con-full, body.ab-hcx .elementor-9063 .abn-made__find-row > .e-con-inner { row-gap: 18px; } }