/* ========================================================================== ATTIC BREEZE — HOMEOWNER CALCULATOR: TWO STATES, ONE URL /homeowners/ventilation-calculator/ (page 8863) 2026-08-25 ========================================================================== The page is a homeowner landing page to someone who has just arrived and a tool to someone who has chosen to start. Same URL, same DOM, two states: body.abv-hc-overview the landing experience body.abv-hc-tool the calculator workspace WHY THE MODE IS A BODY CLASS AND NOT A SCROLL POSITION The old page put the calculator at the bottom and the CTA scrolled to it. That makes the tool a destination inside a brochure. Here the CTA changes what the page IS: the marketing bands leave, the hero becomes tool chrome, and the calculator lands directly beneath it with nothing in between. WHAT THIS FILE MAY NOT DO - It may not style the calculator's own interior. Everything inside `.abv-root` belongs to abv-app.css / abv-ui.css. The two exceptions are declared and justified where they appear. - Every rule is scoped to `body.abv-hc-page` AND `.elementor-9063`, so no other page, the shared header or the shared footer can be reached. A body class is an ancestor of the whole document; using one as a scope on its own is what put arrows on the site navigation on 2026-08-24. Loaded after abv-ui.css, which is loaded after abv-app.css. Ordering does the work a specificity war would. ========================================================================== */ /* -------------------------------------------------------------------------- TOKENS — the four approved calculator colours and nothing else. NAVY #051124 · BREEZE ORANGE #EF7D48 · WHITE · LIGHT BLUE #3993DF. (Vincent, 2026-08-20. #C04811 is rejected; never darken Breeze Orange to solve contrast — pick the right colour for the component instead.) -------------------------------------------------------------------------- */ body.abv-hc-page { /* 2026-08-25 (Vincent): this page is HOMEOWNER, so its accent is Breeze Home Green. --abhc-orange keeps its name because rules below read it; the value is the audience accent. Sky normalised from the one-digit near-duplicate #3993DF. */ --abhc-navy: #051124; --abhc-orange: #5C9D5E; /* Breeze Home Green - was #EF7D48 */ --abhc-accent: #5C9D5E; --abhc-white: #FFFFFF; --abhc-focus: #3993D5; /* Sky - was #3993DF */ --abhc-ease: cubic-bezier(.2, .7, .3, 1); --abhc-hairline: rgba(255, 255, 255, .12); } /* THE LAST ORANGE ON THIS PAGE. abv-app.css sets `--abv-accent-text: #a35531` on `:root, .abv-root` and abv-hlook.css's token flip does not cover it, so three small uppercase labels inside the calculator — the roof colour reference note, the roof match eyebrow — still paint rust. Found by walking the computed styles of all 1,067 elements in the page for anything warm; those three and the validation red were the only hits. WHY NOT #5C9D5E, WHICH IS THE PAGE'S GREEN. These labels sit on `--abv-tint`, a pale green over white (~#F2F7F2). Measured: #5C9D5E on that ground is 2.97:1, and they are 11px bold — WCAG AA wants 4.5:1. #3A6440 is 5.98:1. It is a darker shade of Breeze Home Green used ONLY where the brand green cannot carry small text, exactly as the earlier homeowner contrast pass concluded; it is not a fifth colour in the palette and it never appears as a fill. Scoped to this page. */ body.abv-hc-page .abv-root, body.abv-hc-page .abvm { --abv-accent-text: #3A6440; } /* ========================================================================== 1 · WHICH WIDGETS BELONG TO WHICH STATE ========================================================================== Hidden first, then restored for the state that owns them. Elementor containers resolve `display` from `--display`, so restoring a container means saying `flex`, and restoring a widget means saying `block`. */ body.abv-hc-page .elementor-9063 .ab-hc-ovonly, body.abv-hc-page .elementor-9063 .ab-hc-toolonly { display: none; } body.abv-hc-page.abv-hc-overview .elementor-9063 .elementor-widget.ab-hc-ovonly { display: block; } body.abv-hc-page.abv-hc-overview .elementor-9063 .e-con.ab-hc-ovonly { display: flex; } body.abv-hc-page.abv-hc-tool .elementor-9063 .elementor-widget.ab-hc-toolonly { display: block; } body.abv-hc-page.abv-hc-tool .elementor-9063 .e-con.ab-hc-toolonly { display: flex; } /* ========================================================================== 2 · WHICH SECTIONS BELONG TO WHICH STATE ========================================================================== HIDE BY EXCLUSION, NEVER BY A LIST OF SECTION IDS. A hardcoded id list rots the first time somebody adds or reorders a band in Elementor, and its failure mode is a marketing section leaking into the workspace. So: in tool mode every top-level section is hidden EXCEPT the hero, the calculator, and anything deliberately marked `.ab-hc-always`. A section added tomorrow is therefore landing content by default, which is the safe direction to be wrong in. */ /* Overview: the calculator is the only thing that goes away. */ body.abv-hc-page.abv-hc-overview .elementor-9063 > .e-con.ab-hc-tool { display: none; } /* Tool: everything except the hero, the calculator and .ab-hc-always. `:not(.abv-hc-fx-out)` keeps the landing bands in flow for the 260ms they spend animating out — see §5. */ body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 > .e-con:not(.ab-hc-hero):not(.ab-hc-tool):not(.ab-hc-always):not(.abhc-result) { display: none; } /* ...and while they are still receding, the calculator has not arrived yet. */ body.abv-hc-page.abv-hc-tool.abv-hc-fx-out .elementor-9063 > .e-con.ab-hc-tool { display: none; } /* THE ONE BAND THAT BELONGS TO BOTH LISTS. `.abhc-result` (the appearance panel) is landing content on the marketing page AND part of the recommendation in tool mode — abv-hlook.js repaints it from the engine every time the result renders. So it is excluded from the sweep above and hidden by its own rule instead, which stops applying the moment the calculator reaches the result step and the script sets `.abv-hc-done`. Mid-flow it stays away: a panel about fan colours has nothing to say while the homeowner is still on question two. Kept visible through `.abv-hc-fx-out` so it recedes with the other bands rather than vanishing a frame before them. */ body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out):not(.abv-hc-done) .elementor-9063 > .e-con.abhc-result { display: none; } /* PHASE 1 KEEPS THE HERO'S LANDING WIDGETS ON SCREEN. The mode class flips at t=0 so the whole page is already "in tool mode" while the landing recedes. Without this the hero's promise, buttons and reassurance line would be gone on the first frame of a 260ms animation — the CTA the homeowner just pressed disappearing under their finger. They are held in place and faded instead, and the tool chrome fades in only once the hero has finished compacting. */ body.abv-hc-page.abv-hc-tool.abv-hc-fx-out .elementor-9063 .ab-hc-hero .elementor-widget.ab-hc-ovonly { display: block; } body.abv-hc-page.abv-hc-tool.abv-hc-fx-out .elementor-9063 .ab-hc-hero .e-con.ab-hc-ovonly { display: flex; } body.abv-hc-page.abv-hc-tool.abv-hc-fx-out .elementor-9063 .ab-hc-hero .ab-hc-ovonly { animation: abv-hc-dim .24s ease both; pointer-events: none; } body.abv-hc-page.abv-hc-tool.abv-hc-fx-out .elementor-9063 .ab-hc-hero .ab-hc-toolonly { display: none; } body.abv-hc-page.abv-hc-fx-in .elementor-9063 .ab-hc-hero .ab-hc-toolonly { animation: abv-hc-lift .42s var(--abhc-ease) both; animation-delay: .1s; } /* ========================================================================== 3 · THE HERO TRANSFORMS ========================================================================== Landing hero: 800px of photograph with a scrim and a value proposition. Tool hero: a compact navy chrome bar carrying the same H1, one supporting line, the progress rail and the way back. THE PHOTOGRAPH IS DROPPED IN TOOL MODE, NOT CROPPED. At ~240px tall, `background-size:cover` on a 16:9 photo of a house yields an arbitrary horizontal slice of roof — which reads as a rendering fault, not a design. Flat navy plus one hairline reads as tool chrome, which is what it is. (Contractor Programs makes the same call for its closing band under 767px.) Specificity note: Elementor's own background rule for this container is (0,4,0) because of its `:not(.elementor-motion-effects-...)`. The two body classes put these rules at (0,5,0), so no `!important` is needed anywhere in this section. */ body.abv-hc-page .elementor-9063 .elementor-element.elementor-element-hohero { transition: min-height .42s var(--abhc-ease); } body.abv-hc-page .elementor-9063 .elementor-element.elementor-element-hoherocopy { transition: padding-block .42s var(--abhc-ease), width .42s var(--abhc-ease); } body.abv-hc-page .elementor-9063 .ab-hero-photo::before, body.abv-hc-page .elementor-9063 .ab-hero-photo::after { transition: opacity .3s ease; } body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .elementor-element.elementor-element-hohero { min-height: 0; /* The section's own 56px block padding is landing-hero breathing room. In tool mode the copy column carries the whole vertical rhythm, so this becomes 56px of dead navy above a 34px gap. */ padding-block: 0; background-image: none; background-color: var(--abhc-navy); border-bottom: 1px solid var(--abhc-hairline); } body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .ab-hero-photo::before, body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .ab-hero-photo::after { opacity: 0; } body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .elementor-element.elementor-element-hohero > .e-con-inner, body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .elementor-element.elementor-element-hoherorow > .e-con-inner { padding-block: 0; } body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .elementor-element.elementor-element-hoherocopy { width: 100%; padding: 34px 0 30px 0; /* THE ONE NUMBER THIS FILE REFUSES TO GUESS. The calculator lays itself out as a LEFT-ALIGNED column, not a centred one: measured at 1440 its shell runs 74 -> 934 while this hero could run 74 -> 1393. The H1 and the lede carry their own measure, but the toolbar pushes its utility to the right edge, and a Back button floating 450px past the end of the tool it belongs to is simply wrong. So abv-hcalc.js measures `.abv-shell` and publishes the width here. Measuring rather than hardcoding means a change to the calculator's own `--abv-max` is followed automatically, and if the app has not mounted the fallback is `none` — the pre-existing full-width behaviour, never a wrong fixed number. AND THE INLINE PADDING IS ZERO, WHICH IS THE OTHER HALF OF IT. Measured at 1887 before this changed: the calculator's shell ran 132 -> 992 while the H1, the lede, the rail and Back all began at 174 — a 42px indent that made the header look like a caption ABOVE the tool instead of the tool's own chrome. With no inline padding the two share one left edge, and because `align()` adds the live padding to the shell width, the right edges land together as well. It also removes the last thing `padding` was transitioning, which is why the transition above is `padding-block`: a frozen or interrupted transition can no longer leave `align()` reading a horizontal padding that is not on screen. */ max-width: var(--abhc-toolw, none); } /* The tool H1 stays the same words at a smaller size: it is a page title now, not a promise. text-wrap:balance is inherited from .ab-hero-promise. */ body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .elementor-element.elementor-element-hoh1 .elementor-heading-title { font-size: clamp(26px, 2.5vw, 34px); } body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .elementor-element.elementor-element-hoh1 > .elementor-widget-container { margin-bottom: 10px; } @media (max-width: 1024px) { body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .elementor-element.elementor-element-hoherocopy { padding: 28px 0 26px 0; } } @media (max-width: 767px) { body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .elementor-element.elementor-element-hoherocopy { padding: 22px 0 22px 0; } body.abv-hc-page.abv-hc-tool:not(.abv-hc-fx-out) .elementor-9063 .elementor-element.elementor-element-hoh1 .elementor-heading-title { font-size: clamp(22px, 6.4vw, 27px); } } /* ========================================================================== 4 · THE TOOL CHROME — progress rail and the way back ========================================================================== `#abv-hc-toolbar` is a real Elementor container so the team can move it and edit the button label. The rail inside it is rendered by abv-hcalc.js, because it is the one thing on this page that has to know which step the calculator is on. */ body.abv-hc-page .elementor-9063 .ab-hc-toolbar { align-items: center; border-top: 1px solid var(--abhc-hairline); padding-top: 18px; margin-top: 4px; } body.abv-hc-page .elementor-9063 .ab-hc-toolbar > .elementor-element.ab-hc-back { margin-left: auto; } .abv-hcp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; } .abv-hcp__stage, .abv-hcp__count { font-family: 'Poppins', system-ui, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 1.4px; text-transform: uppercase; } .abv-hcp__stage { color: var(--abhc-white); } .abv-hcp__count { color: rgba(255, 255, 255, .64); } .abv-hcp__sep { color: rgba(255, 255, 255, .34); } .abv-hcp__bar { display: block; width: 132px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; } .abv-hcp__bar > i { display: block; height: 100%; border-radius: 999px; background: var(--abhc-orange); transition: width .35s var(--abhc-ease); } @media (max-width: 767px) { .abv-hcp { width: 100%; } .abv-hcp__bar { width: 100%; } body.abv-hc-page .elementor-9063 .ab-hc-toolbar > .elementor-element.ab-hc-back { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .abv-hcp__bar > i { transition: none; } } /* ONE RULE THAT REACHES INSIDE THE CALCULATOR, AND WHY. Every step already prints "Stage 3 of 5" in `.abv-steps`. With the rail in the hero saying the same thing four inches above it, the page states its progress twice — so the plain-text copy stands down in favour of the rail, which also names the stage and draws it. `body.abv-hc-rail` is set by the script only AFTER the rail has actually rendered. If the script fails, the class is absent and the calculator keeps its own label: the information can never go missing, only move. */ body.abv-hc-page.abv-hc-tool.abv-hc-rail .elementor-9063 .abv-root .abv-steps { display: none; } /* ========================================================================== 5 · THE TRANSITION ========================================================================== Two phases, because the landing content has to leave the FLOW before the calculator can unfold into the space it was occupying: phase 1 .abv-hc-fx-out 260ms landing recedes, still in flow phase 2 .abv-hc-fx-in 460ms calculator unfolds into place and in reverse, .abv-hc-fx-close then .abv-hc-fx-back. The classes are transient. Once removed the page is completely static, so nothing re-animates on a later repaint — and a page the SERVER rendered in tool mode (a `?start=1` deep link) animates nothing at all. Animating a first paint is a flash with better manners. The mobile-first animations are a fade and a rise. The shallow fold is an upgrade applied only from 1025px, where there is room for the depth to read and a pointer to have deliberately asked for it. */ /* ---- the vocabulary --------------------------------------------------- Mobile-first: a fade and a short rise, nothing else. The layered depth is an UPGRADE applied from 1025px, where there is room for it to read and a pointer that asked for it deliberately. A 3D rotation on a 390px screen throws the far edge of the panel outside the viewport and clips it, which is the difference between a product transition and a slide deck. */ @keyframes abv-hc-recede { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px); } } @keyframes abv-hc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes abv-hc-close { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } } /* Used by the hero's own widgets, which stay in flow while they go. */ @keyframes abv-hc-dim { from { opacity: 1; } to { opacity: 0; } } @keyframes abv-hc-lift { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---- the desktop vocabulary: one card behind another ------------------ The landing page is the FRONT of the experience. It does not slide off to one side — it settles BACKWARDS, away from the reader, losing focus as it goes. The workspace then comes forward into the space it vacated, hinged at its top edge. Both use the same 1800px perspective and the same origin, which is what makes them read as two faces of one object rather than two unrelated animations. */ @keyframes abv-hc-recede-3d { from { opacity: 1; transform: perspective(1800px) translate3d(0, 0, 0) rotateX(0deg); filter: blur(0); } to { opacity: 0; transform: perspective(1800px) translate3d(0, 26px, -150px) rotateX(3.5deg); filter: blur(3px); } } @keyframes abv-hc-unfold { from { opacity: 0; transform: perspective(1800px) translate3d(0, -14px, -190px) rotateX(-7deg); } 60% { opacity: 1; } to { opacity: 1; transform: perspective(1800px) translate3d(0, 0, 0) rotateX(0deg); } } /* ---- phase 1 · the landing gives way ---------------------------------- */ body.abv-hc-page.abv-hc-fx-out .elementor-9063 > .e-con.ab-hc, body.abv-hc-page.abv-hc-fx-out .elementor-9063 > .e-con.abhc-result { animation: abv-hc-recede .26s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; } /* ---- phase 2 · the workspace arrives ---------------------------------- */ body.abv-hc-page.abv-hc-fx-in .elementor-9063 > .e-con.ab-hc-tool { animation: abv-hc-rise .38s var(--abhc-ease) both; transform-origin: top center; } /* ---- reverse ---------------------------------------------------------- */ body.abv-hc-page.abv-hc-fx-close .elementor-9063 > .e-con.ab-hc-tool { animation: abv-hc-close .2s cubic-bezier(.4, 0, 1, 1) both; transform-origin: top center; pointer-events: none; } body.abv-hc-page.abv-hc-fx-back .elementor-9063 > .e-con.ab-hc, body.abv-hc-page.abv-hc-fx-back .elementor-9063 > .e-con.abhc-result { animation: abv-hc-rise .4s var(--abhc-ease) both; } /* Coming back, the bands arrive in reading order rather than as one slab. Four steps only: past that the last band is still moving when the reader has already stopped looking for movement. */ body.abv-hc-page.abv-hc-fx-back .elementor-9063 > .e-con.ab-hc:nth-of-type(3) { animation-delay: .05s; } body.abv-hc-page.abv-hc-fx-back .elementor-9063 > .e-con.ab-hc:nth-of-type(4) { animation-delay: .1s; } body.abv-hc-page.abv-hc-fx-back .elementor-9063 > .e-con.ab-hc:nth-of-type(n+5) { animation-delay: .14s; } /* THE SEAM. One hairline drawn across the top of the workspace as it seats, then faded out. It is the only ornament in the whole transition, and it exists because a panel that arrives with no edge treatment reads as content that moved rather than as a surface that opened. Sage, 2px, gone in half a second — any longer and it starts to look like a loading bar. */ body.abv-hc-page .elementor-9063 > .e-con.ab-hc-tool { position: relative; } body.abv-hc-page.abv-hc-fx-in .elementor-9063 > .e-con.ab-hc-tool::after { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--abhc-accent), transparent); transform-origin: center; animation: abv-hc-seam .58s var(--abhc-ease) both; pointer-events: none; z-index: 2; } @keyframes abv-hc-seam { from { transform: scaleX(0); opacity: 0; } 35% { opacity: 1; } to { transform: scaleX(1); opacity: 0; } } @media (min-width: 1025px) { body.abv-hc-page.abv-hc-fx-out .elementor-9063 > .e-con.ab-hc, body.abv-hc-page.abv-hc-fx-out .elementor-9063 > .e-con.abhc-result { animation: abv-hc-recede-3d .3s cubic-bezier(.4, 0, 1, 1) both; transform-origin: top center; will-change: transform, opacity, filter; } body.abv-hc-page.abv-hc-fx-in .elementor-9063 > .e-con.ab-hc-tool { animation: abv-hc-unfold .52s var(--abhc-ease) both; transform-origin: top center; will-change: transform, opacity; } } /* prefers-reduced-motion: a CROSSFADE, which is a state change rather than a performance. Not "no animation at all" — an instant swap of two full pages is its own kind of jolt, and the reduced-motion contract is about vestibular motion, not about opacity. So every transform, blur and seam is dropped and the two states cross-fade in place. */ @media (prefers-reduced-motion: reduce) { body.abv-hc-page .elementor-9063 .elementor-element.elementor-element-hohero, body.abv-hc-page .elementor-9063 .elementor-element.elementor-element-hoherocopy, body.abv-hc-page .elementor-9063 .ab-hero-photo::before, body.abv-hc-page .elementor-9063 .ab-hero-photo::after { transition: none; } body.abv-hc-page.abv-hc-fx-out .elementor-9063 > .e-con.ab-hc, body.abv-hc-page.abv-hc-fx-out .elementor-9063 > .e-con.abhc-result, body.abv-hc-page.abv-hc-tool.abv-hc-fx-out .elementor-9063 .ab-hc-hero .ab-hc-ovonly { animation: abv-hc-dim .2s linear both; } body.abv-hc-page.abv-hc-fx-in .elementor-9063 > .e-con.ab-hc-tool, body.abv-hc-page.abv-hc-fx-back .elementor-9063 > .e-con.ab-hc, body.abv-hc-page.abv-hc-fx-back .elementor-9063 > .e-con.abhc-result, body.abv-hc-page.abv-hc-fx-in .elementor-9063 .ab-hc-hero .ab-hc-toolonly { animation: abv-hc-fadein .24s linear both; } body.abv-hc-page.abv-hc-fx-close .elementor-9063 > .e-con.ab-hc-tool { animation: abv-hc-dim .18s linear both; } body.abv-hc-page.abv-hc-fx-in .elementor-9063 > .e-con.ab-hc-tool::after { animation: none; opacity: 0; } body.abv-hc-page.abv-hc-fx-back .elementor-9063 > .e-con.ab-hc { animation-delay: 0s; } } @keyframes abv-hc-fadein { from { opacity: 0; } to { opacity: 1; } } /* ========================================================================== 6 · SMALL THINGS ========================================================================== */ /* The heading the script focuses when the mode changes. A programmatic focus on a tabindex="-1" heading paints the user-agent focus ring, which reads as a rendering fault — suppressed on these two headings ONLY, never globally. (Same trap as page 6986, 2026-08-05, and the plugin's own step headings.) */ body.abv-hc-page .elementor-9063 [data-abv-hc-focus]:focus, body.abv-hc-page .elementor-9063 [data-abv-hc-focus]:focus-visible { outline: none; } /* Focus rings on the two mode controls use Light Blue: 3.27:1 clears the 3:1 threshold WCAG 1.4.11 sets for a non-text UI indicator. */ body.abv-hc-page .elementor-9063 .ab-hc-start .elementor-button:focus-visible, body.abv-hc-page .elementor-9063 .ab-hc-back .elementor-button:focus-visible, body.abv-hc-page .elementor-9063 .ab-hc-how .elementor-button:focus-visible { outline: 3px solid var(--abhc-focus); outline-offset: 3px; } /* The three step cards must reach one baseline whatever the copy does. The band is a flex row, so this is `stretch` on the row, not a height. */ body.abv-hc-page .elementor-9063 .elementor-element-hohowcards { align-items: stretch; } /* ========================================================================== 7 · WHAT DELIBERATELY HAS NO RULE HERE ========================================================================== - The result screen. Completing the calculator stays in tool mode and the result is the last step of the app; the marketing bands are already gone and nothing brings them back. There is no "result mode". - The roof colour controls. The approved homeowner experience is the LIGHT / MEDIUM / DARK band, and the exact-colour disclosure that ships inside abv-roof.js today is not this file's business either to style or to remove. Nothing here touches it. - The calculator's own Start-over control. `[data-abv-startover]` belongs to abv-actions.js and stays exactly where it is: START OVER clears answers, BACK TO OVERVIEW does not, and the two must not be made to look alike. ========================================================================== */ /* ========================================================================== 8 · THE LANDING PAGE ========================================================================== Four bands: how it works, what we'll ask, what you'll get, and the closing CTA. They are Elementor containers with real widgets inside, so the copy stays editable; everything here is layout and surface. PALETTE, AND THE ONE RULE THAT MATTERS MOST ON THIS PAGE. Attic Navy #051124 · Breeze Home Green #5C9D5E · White · Sky #3993D5. No orange, and NO GREY SURFACE ANYWHERE — not a section background, not a card, not a border. Where a boundary is needed it is navy at low alpha on white, or white at low alpha on navy, so it belongs to the two colours already in play instead of introducing a third. Every band alternates white / navy for the same reason: rhythm without a neutral. ========================================================================== */ body.abv-hc-page .elementor-9063 .abhc-how, body.abv-hc-page .elementor-9063 .abhc-askband, body.abv-hc-page .elementor-9063 .abhc-getband, body.abv-hc-page .elementor-9063 .abhc-easy { overflow: hidden; /* nothing here may widen the document */ } /* ---- CTA rows --------------------------------------------------------- The hero copy column is a zero-gap flex COLUMN (Elementor containers default to column, which is the trap that turns a "row" of buttons into a stack). The row direction is set in the Elementor data; this only supplies the wrap behaviour and the mobile full-width treatment. */ body.abv-hc-page .elementor-9063 .abhc-ctarow { flex-wrap: wrap; align-items: center; } body.abv-hc-page .elementor-9063 .abhc-ctarow > .elementor-widget { width: auto; max-width: 100%; } @media (max-width: 600px) { body.abv-hc-page .elementor-9063 .abhc-ctarow { flex-direction: column; align-items: stretch; } body.abv-hc-page .elementor-9063 .abhc-ctarow > .elementor-widget { width: 100%; } body.abv-hc-page .elementor-9063 .abhc-ctarow .elementor-button { width: 100%; justify-content: center; } } /* Minimum 48px tap target on every control this file introduces, at every width — measured from the padding, not assumed from the font size. */ body.abv-hc-page .elementor-9063 .abhc-cta .elementor-button, body.abv-hc-page .elementor-9063 .abhc-cta2 .elementor-button, body.abv-hc-page .elementor-9063 .abhc-back .elementor-button { min-height: 48px; align-items: center; text-decoration: none; } /* ---- the reassurance line -------------------------------------------- Three facts, not a slogan. A sage dot rather than a bullet glyph, because the glyph inherits the paragraph colour and would read as punctuation. */ body.abv-hc-page .elementor-9063 .abhc-proof .elementor-heading-title { display: inline-flex; align-items: center; gap: 9px; } body.abv-hc-page .elementor-9063 .abhc-proof .elementor-heading-title::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--abhc-accent); } /* ========================================================================== 8a · 01 HOW IT WORKS ========================================================================== Three steps, typographic. The band above it is photographic and the band below it is a list, so this one earns its place by being neither. */ body.abv-hc-page .elementor-9063 .abhc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; align-items: stretch; } body.abv-hc-page .elementor-9063 .abhc-step { min-width: 0; padding: 26px 0 0 0; border-top: 2px solid rgba(255, 255, 255, .16); transition: border-color .22s var(--abhc-ease); } /* The rule above each step turns sage on hover. It is the whole hover state: a card that lifts, shadows or tints would make three explanatory paragraphs look clickable, and none of them are. */ body.abv-hc-page .elementor-9063 .abhc-step:hover { border-top-color: var(--abhc-accent); } body.abv-hc-page .elementor-9063 .abhc-step__n .elementor-heading-title { color: var(--abhc-accent); } body.abv-hc-page .elementor-9063 .abhc-step__t .elementor-heading-title { color: #FFFFFF; } @media (max-width: 1024px) { body.abv-hc-page .elementor-9063 .abhc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } } @media (max-width: 767px) { body.abv-hc-page .elementor-9063 .abhc-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; } body.abv-hc-page .elementor-9063 .abhc-step { padding-top: 20px; } } /* ========================================================================== 8b · 02 WHAT WE'LL ASK ========================================================================== Six items, each a heading and one line. No icons: six icons for six abstractions ("stories", "sun exposure") is decoration standing in for information. A sage tick is enough, and it says the right thing — this is the list of what is already handled. */ body.abv-hc-page .elementor-9063 .abhc-asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 34px; align-items: start; } body.abv-hc-page .elementor-9063 .abhc-ask { min-width: 0; padding-left: 34px; position: relative; } body.abv-hc-page .elementor-9063 .abhc-ask::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(92, 157, 94, .12); /* The tick is a background image rather than a glyph so it cannot inherit the heading's font, weight or transform — the same trap that turned card titles into UPPERCASE elsewhere on this page. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C9D5E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px 13px; } body.abv-hc-page .elementor-9063 .abhc-ask__b p { opacity: .78; } @media (max-width: 1024px) { body.abv-hc-page .elementor-9063 .abhc-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } } @media (max-width: 600px) { body.abv-hc-page .elementor-9063 .abhc-asks { grid-template-columns: minmax(0, 1fr); gap: 20px; } } /* ========================================================================== 8c · 03 WHAT YOU'LL GET ========================================================================== Three white cards on navy, each carrying a real Attic Breeze product photo. This is the section that has to be believable, so it shows the actual fan rather than an illustration of one. */ body.abv-hc-page .elementor-9063 .abhc-gets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; } body.abv-hc-page .elementor-9063 .abhc-getcard { min-width: 0; background: #FFFFFF; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(5, 17, 36, .28); } /* The three source images are not one shape: two are square studio shots on white and one is a photograph on a roof. A fixed 4:3 window with `cover` is what makes them a set. */ body.abv-hc-page .elementor-9063 .abhc-getcard__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; background: #FFFFFF; } /* Card three is a photograph of a fan low in the frame under a lot of sky and trees. Centred, a 4:3 crop of it is mostly hillside; 72% brings the fan into the window. Named by its widget id rather than by :last-child so reordering the cards in Elementor cannot silently move the crop to a different photo. */ body.abv-hc-page .elementor-9063 .elementor-element-hogetic img { object-position: center 72%; } body.abv-hc-page .elementor-9063 .abhc-getcard__body { padding: 24px 24px 26px; } body.abv-hc-page .elementor-9063 .abhc-getcard__b p { opacity: .78; } /* The four things that come with it, stated once and small. */ body.abv-hc-page .elementor-9063 .abhc-chips { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 12px; align-items: center; } body.abv-hc-page .elementor-9063 .abhc-chips > .elementor-widget { width: auto; } body.abv-hc-page .elementor-9063 .abhc-chip .elementor-heading-title { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; } body.abv-hc-page .elementor-9063 .abhc-chip .elementor-heading-title::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--abhc-accent); } @media (max-width: 1024px) { body.abv-hc-page .elementor-9063 .abhc-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } } @media (max-width: 767px) { body.abv-hc-page .elementor-9063 .abhc-gets { grid-template-columns: minmax(0, 1fr); gap: 18px; } body.abv-hc-page .elementor-9063 .abhc-getcard__body { padding: 20px 20px 22px; } } /* ========================================================================== 8d · 04 BUILT TO MAKE THIS EASY (and the closing CTA) ========================================================================== */ body.abv-hc-page .elementor-9063 .abhc-easy__in { max-width: 760px; } body.abv-hc-page .elementor-9063 .abhc-easy__led p { margin-bottom: 0; } /* ========================================================================== 9 · CALCULATOR MODE CHROME ========================================================================== What the hero becomes. The H1 and the progress rail already have rules in §3 and §4; these are the two controls the landing page does not have. */ /* The supporting line under the compact H1. */ body.abv-hc-page .elementor-9063 .abhc-toollede p { margin: 0; } /* THE CALCULATOR'S OWN INTRO BLOCK STANDS DOWN IN TOOL MODE. `.abhx-calchead` opens with "YOUR HOME / Let's size your attic / a few simple questions..." — which was written for a page where the tool sat at the bottom of a brochure and had to introduce itself. It now sits four inches under a compact header that says the same thing and a rail that says which stage this is, so it is a second title page between the homeowner and question one. The brief asks for the progress indicator and then "immediately: Stage 1", and this is the block in the way. Nothing is lost: "no measuring", "no roofing know-how" and "about two minutes" are all on the landing page — in the hero's reassurance line and in "What we'll ask", which is what the homeowner just read on their way here. The block is only hidden, never removed, so switching this file off brings it straight back. */ body.abv-hc-page.abv-hc-tool .elementor-9063 .abhx-calchead { display: none; } /* BACK TO OVERVIEW. A quiet outline control, deliberately unlike both the sage CTA (which starts things) and the calculator's own Start over (which destroys answers). No underline and no external-link arrow — it is not leaving the page, it is changing what the page is showing. The chevron points the way back and is drawn, not typed, so it cannot inherit letter-spacing from the uppercase label beside it. */ body.abv-hc-page .elementor-9063 .abhc-back .elementor-button, body.abv-hc-page .elementor-9063 .abhc-back .elementor-button:visited { display: inline-flex; gap: 9px; background-color: transparent; border: 1px solid rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .86); text-decoration: none; transition: background-color .18s var(--abhc-ease), border-color .18s var(--abhc-ease), color .18s var(--abhc-ease); } /* kit-1333 styles `button:hover` navy-on-white at (0,2,1). Every state here restates background, border AND colour together, which is the fourth time this page has had to learn that. */ body.abv-hc-page .elementor-9063 .abhc-back .elementor-button:hover, body.abv-hc-page .elementor-9063 .abhc-back .elementor-button:focus, body.abv-hc-page .elementor-9063 .abhc-back .elementor-button:focus-visible, body.abv-hc-page .elementor-9063 .abhc-back .elementor-button:active { background-color: #FFFFFF; border-color: #FFFFFF; color: var(--abhc-navy); text-decoration: none; } body.abv-hc-page .elementor-9063 .abhc-back .elementor-button-text { display: inline-flex; align-items: center; } body.abv-hc-page .elementor-9063 .abhc-back .elementor-button-text::before { content: ""; width: 14px; height: 14px; margin-right: 9px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 8 12l7 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 8 12l7 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat; } /* On a phone the toolbar stacks: the rail is information and goes first, the control follows it, and neither is allowed to squeeze the other. */ @media (max-width: 600px) { body.abv-hc-page .elementor-9063 .ab-hc-toolbar { flex-direction: column; align-items: stretch; } body.abv-hc-page .elementor-9063 .ab-hc-toolbar > .elementor-element.ab-hc-back { margin-left: 0; } body.abv-hc-page .elementor-9063 .abhc-back .elementor-button { width: 100%; justify-content: center; } } /* ========================================================================== 10 · NOTHING MAY WIDEN THE PAGE ========================================================================== The desktop transition translates bands on the Z axis inside a perspective. A transformed element still contributes its LAYOUT box, so this cannot cause overflow on its own — but `filter: blur()` paints outside that box, and a band that is already flush to the viewport edge will paint into the scrollbar. Clipping the page wrapper for the duration of the transition is cheaper than reasoning about it. */ body.abv-hc-page.abv-hc-fx-out .elementor-9063, body.abv-hc-page.abv-hc-fx-in .elementor-9063, body.abv-hc-page.abv-hc-fx-close .elementor-9063, body.abv-hc-page.abv-hc-fx-back .elementor-9063 { overflow-x: clip; }