/* ATTIC BREEZE - HOMEOWNER CALCULATOR AS A DIALOG (round 6) * /homeowners/ventilation-calculator/ (page 8863) 2026-08-26 * * The dialog, its backdrop and header, and the full-screen phone treatment. * The calculator INSIDE it is styled by abv-app.css, abv-ui.css and the four * page-scoped rounds before this one - all of which keep applying, because * abv-hcx-modal.js appends the dialog INSIDE `.elementor-9063` and the shell * stays a descendant of it. Nothing in here restyles the calculator itself. * * SCOPE. Every selector names `body.ab-hcx`. PALETTE: Attic Navy #051124, * Breeze Home Green #5C9D5E, White, Sky #3993D5. No orange, no grey. * ========================================================================== * * PAGE: /homeowners/ventilation-calculator/ (WordPress page 8863) * NEEDS: loaded by novamira-sandbox/ab-hoc-modal.php (priority 103); styles .abhm only * FLAG: update_option('abv_hcxmodal_enabled','0') switches this layer off. * DOCS: wp-content/plugins/attic-breeze-ventilation/docs/homeowner-calculator-page.md */ body.ab-hcx { --abhm-navy: #051124; --abhm-green: #5C9D5E; --abhm-sky: #3993D5; --abhm-ease: cubic-bezier(.2, .7, .3, 1); } /* ========================================================================== 1. THE BAND THE CALCULATOR CAME OUT OF ========================================================================== The shell is moved into the dialog at boot, leaving the band as an empty wrapper with only its old intro heading in it. It leaves the flow. GATED ON `html.abhm-js`, which ab-hoc-modal.php stamps in . If the script never runs, the band is NOT hidden and the page keeps the calculator it always had, reachable through the CTA's real `?start=1` href. A hidden band plus no dialog would be a page with no calculator at all. ========================================================================== */ html.abhm-js body.ab-hcx .elementor-9063 .abhx-calc.abhm-emptied { display: none; } /* ========================================================================== 2. LOCK ========================================================================== `overflow: hidden` on the root, never `position: fixed` on - a fixed body becomes the containing block for every fixed descendant, which would drag this dialog and the floating CTA out of position by the scroll offset. `overscroll-behavior` stops a flick at the end of the dialog's scroller from chaining to the page behind it. ========================================================================== */ html.abhm-lock, html.abhm-lock body { overflow: hidden; overscroll-behavior: none; } /* The floating CTA has nothing to offer while the thing it opens is open. */ body.ab-hcx.abhm-open .abhu-fab { display: none; } /* ========================================================================== 3. THE DIALOG ========================================================================== */ body.ab-hcx .elementor-9063 .abhm { position: fixed; inset: 0; z-index: 10000; /* over the page, under HubSpot's 9999+... */ display: none; } body.ab-hcx .elementor-9063 .abhm.is-open { display: block; } body.ab-hcx .elementor-9063 .abhm[hidden] { display: none; } body.ab-hcx .elementor-9063 .abhm__backdrop { position: absolute; inset: 0; /* Attic Navy, not black and not grey: the page behind stays recognisable and the tint belongs to the palette. */ background: rgba(5, 17, 36, .74); opacity: 0; transition: opacity .3s var(--abhm-ease); } body.ab-hcx .elementor-9063 .abhm.is-in .abhm__backdrop { opacity: 1; } body.ab-hcx .elementor-9063 .abhm__dialog { position: absolute; inset: 0; margin: auto; box-sizing: border-box; width: 90%; max-width: 1160px; height: 90%; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; /* the header and scroller share one radius */ border-radius: 22px; background: #FFFFFF; box-shadow: 0 40px 90px rgba(5, 17, 36, .46); opacity: 0; transform: translateY(12px) scale(.985); transition: opacity .3s var(--abhm-ease), transform .3s var(--abhm-ease); } body.ab-hcx .elementor-9063 .abhm.is-in .abhm__dialog { opacity: 1; transform: none; } body.ab-hcx .elementor-9063 .abhm__dialog:focus-visible { outline: 3px solid var(--abhm-sky); outline-offset: -3px; } /* ---- header -------------------------------------------------------------- Navy, so the white calculator below it reads as the working surface. It does not scroll: it holds the only two ways out. */ body.ab-hcx .elementor-9063 .abhm__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px 16px 26px; background: var(--abhm-navy); } body.ab-hcx .elementor-9063 .abhm__brand { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--abhm-green); } body.ab-hcx .elementor-9063 .abhm__title { margin: 2px 0 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #FFFFFF; } body.ab-hcx .elementor-9063 .abhm__acts { display: flex; align-items: center; gap: 10px; } /* Start over: a text button on navy. Quiet, because it destroys work. */ body.ab-hcx .elementor-9063 .abhm__over { box-sizing: border-box; min-height: 44px; min-width: 0; margin: 0; padding: 11px 16px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; background: none; color: #FFFFFF; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: border-color .2s var(--abhm-ease), background-color .2s var(--abhm-ease); } @media (hover: hover) and (pointer: fine) { body.ab-hcx .elementor-9063 .abhm__over:hover { border-color: var(--abhm-green); background: rgba(92, 157, 94, .16); color: #FFFFFF; } } /* The X: a real 48px target, and the one control that must never be missed. */ body.ab-hcx .elementor-9063 .abhm__x { box-sizing: border-box; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-height: 48px; min-width: 48px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; background: none; color: #FFFFFF; font: inherit; letter-spacing: normal; text-transform: none; cursor: pointer; transition: background-color .2s var(--abhm-ease), border-color .2s var(--abhm-ease); } body.ab-hcx .elementor-9063 .abhm__x svg { width: 20px; height: 20px; display: block; } @media (hover: hover) and (pointer: fine) { body.ab-hcx .elementor-9063 .abhm__x:hover { border-color: var(--abhm-green); background: var(--abhm-green); color: #FFFFFF; } } body.ab-hcx .elementor-9063 .abhm__over:focus-visible, body.ab-hcx .elementor-9063 .abhm__x:focus-visible { outline: 3px solid var(--abhm-sky); outline-offset: 2px; } /* ---- the scroller -------------------------------------------------------- ONE scroll area inside the dialog, and the header sits outside it, so there is never a nested scroller to get lost in. The calculator's own nav row scrolls with the question it belongs to - it is the answer to that question, not page furniture. */ body.ab-hcx .elementor-9063 .abhm__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #FFFFFF; } /* The shell inside the dialog. Round 4 zeroed its inline padding at <=767 because the BAND supplied the 20px gutter; there is no band here, so the shell carries the gutter itself. */ body.ab-hcx .elementor-9063 .abhm__body .abv-shell { box-sizing: border-box; max-width: 860px; margin-inline: auto; padding: 26px 30px 34px; } /* ---- the app's own stage bar becomes the dialog's progress line ---------- `.abv-steps` is hidden by abv-hcalc.css only in TOOL mode, and the page now never enters it - so the bar the app has always rendered is visible again, which is exactly the progress indicator this dialog needs. Its chevron goes: round 4's labelled Previous in the nav row is the back control, and two of them is one too many. */ body.ab-hcx .elementor-9063 .abhm__body .abv-steps { display: flex; align-items: center; margin-block-end: 14px; } body.ab-hcx .elementor-9063 .abhm__body .abv-steps .abv-back { display: none; } /* ========================================================================== 4. PHONES AND SMALL TABLETS: A FULL-SCREEN TOOL ========================================================================== THE BREAKPOINT IS 900px, chosen rather than inherited. At 1024 the centred dialog has ~920px of width and reads as a tool over a website. At 820 (an iPad in portrait) 90% of the width is 738px inside a 92vh box, and the chrome around it costs more than it earns. Below 900 the dialog gives up its margins, its radius and its shadow and becomes the screen. ========================================================================== */ @media (max-width: 900px) { body.ab-hcx .elementor-9063 .abhm__dialog { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; box-shadow: none; transform: translateY(14px); /* no scale on a full-bleed sheet */ } body.ab-hcx .elementor-9063 .abhm.is-in .abhm__dialog { transform: none; } body.ab-hcx .elementor-9063 .abhm__backdrop { opacity: 1; } /* Compact, sticky, and cheap in vertical space - it costs 60px of a 844px phone rather than 88px. */ body.ab-hcx .elementor-9063 .abhm__head { padding: 10px 12px 10px 20px; padding-top: max(10px, env(safe-area-inset-top, 0px)); } body.ab-hcx .elementor-9063 .abhm__brand { display: none; } body.ab-hcx .elementor-9063 .abhm__title { margin: 0; font-size: 17px; } body.ab-hcx .elementor-9063 .abhm__over { min-height: 44px; padding: 10px 12px; font-size: 11px; letter-spacing: .6px; } body.ab-hcx .elementor-9063 .abhm__body { padding-bottom: env(safe-area-inset-bottom, 0px); } body.ab-hcx .elementor-9063 .abhm__body .abv-shell { padding: 18px 20px 28px; /* the 20px gutter the band used to give */ } } /* The narrowest phones: "Start over" gives up its words before the X gives up any of its target. */ @media (max-width: 400px) { body.ab-hcx .elementor-9063 .abhm__over { padding: 10px 10px; font-size: 10.5px; } } /* ========================================================================== 5. REDUCED MOTION ========================================================================== No movement and no scale - the dialog is simply there. Not "no animation": the opacity change still tells the eye something arrived. ========================================================================== */ @media (prefers-reduced-motion: reduce) { body.ab-hcx .elementor-9063 .abhm__dialog { transform: none; transition: opacity .14s linear; } body.ab-hcx .elementor-9063 .abhm.is-in .abhm__dialog { transform: none; } body.ab-hcx .elementor-9063 .abhm__backdrop { transition: opacity .14s linear; } body.ab-hcx .elementor-9063 .abhm__over, body.ab-hcx .elementor-9063 .abhm__x { transition: none; } } /* ========================================================================== 6. NO HORIZONTAL OVERFLOW ========================================================================== The dialog is a fixed box the width of the viewport at most, and its scroller clips its own x axis, so the rails inside it cannot reach the document. Belt: the shell cannot exceed its scroller. ========================================================================== */ /* NOT `.abv-shell` here. A blanket `max-width: 100%` on it is later in this file than the 860px measure above and silently won: measured at 1920 the shell filled the whole 1143px dialog, undoing four rounds of alignment work that assume an 860px column. The scroller already clips its own x axis, so the shell needs no belt of its own. */ body.ab-hcx .elementor-9063 .abhm__body .abv-root { max-width: 100%; }