/* ============================================================================= ATTIC BREEZE VENTILATION — DESIGN TOKENS ============================================================================= Every value below was MEASURED from the live staging Contractor Programs and Breeze Lab pages (computed styles + the Elementor global kit), not invented. If the site's kit changes, change these and nothing else. Note for anyone auditing colours later: the HubSpot plugin injects its own token names into every page (--calypso, --lorax, --olaf, --obsidian …). Those are HubSpot brand colours. Never source a value from them. ========================================================================== */ .abv-root { /* ---- BRAND (Elementor kit globals) ---------------------------------- THE CALCULATOR NAVY IS #051124, and it is the only one. Five near identical darks had accumulated across phases — #0d1b33, #152745, #081126, #17294a and #1d3357 — each introduced for the same job. The three names below are kept because rules across both calculators reference them, but they all resolve to the single navy. Do not reintroduce a 'slightly lighter navy' for gradients: lift it with white at low alpha instead, so there is still exactly one blue. */ --abv-navy-deep: #051124; /* = navy. Retained name, one value */ --abv-navy: #051124; /* = navy. app bar, headings, panels */ --abv-ink-head: #051124; /* = navy. h2/h3 */ /* THE AUDIENCE ACCENT. 2026-08-25 (Vincent): the accent is what tells a visitor which side of the site they are on, so it is chosen by AUDIENCE and never typed into a component. homeowner Breeze Home Green #5C9D5E professional Breeze Orange #EF7D48 --abv-orange is kept as an ALIAS because ~250KB of CSS across both calculators reads `var(--abv-orange, #EF7D48)`. Renaming those call sites would be a 250KB diff for no behavioural gain; pointing the name at the audience token means every one of them resolves correctly, in both modes, with no specificity war. The literal #EF7D48 fallbacks that remain in abv-app.css were audited on 2026-08-25: every one of them sits inside a [data-abv-mode='professional'] selector, so none is reachable from the homeowner tool. */ --abv-accent: #ef7d48; /* default = professional */ --abv-orange: var(--abv-accent); /* alias, resolved per audience */ /* ---- APPROVED CALCULATOR PALETTE (Vincent, 2026-08-20) ------------------ NAVY #051124 · BREEZE ORANGE #ef7d48 · WHITE #ffffff · LIGHT BLUE #3993df The dark interactive orange trialled earlier is REMOVED — it read brown/muddy and was not Attic Breeze. Contrast is now solved by choosing the right approved colour per component, not by darkening the brand: primary actionable control -> NAVY + WHITE 18.88:1 signature accent / selected -> BREEZE ORANGE (non-text, or on navy 6.92:1) focus ring / blueprint line -> LIGHT BLUE #3993df 3.27:1, clears the 3:1 UI threshold link and helper TEXT -> NAVY + underline (light blue as TEXT is 3.27:1 and fails AA) Breeze Orange is never small text on white (2.73:1) and never carries a text label as a fill; it marks selection, emphasis and hover instead. */ /* SKY. Was #3993df - a one-digit near-duplicate of the approved Sky that had no other home in the brand. Normalised 2026-08-25; the change is imperceptible and removes a fifth colour from the system. */ --abv-blue-lt: #3993d5; --abv-blue: #244984; /* e-global 5d821e7 */ --abv-blue-lit: #346ac1; /* e-global 62dbe90 — focus rings, links */ /* ---- INK + SURFACE --------------------------------------------------- */ --abv-text: #3e3e3e; /* e-global text */ --abv-muted: #6f7680; --abv-bg: #ffffff; /* ---- NO GREY SURFACES. ------------------------------------------------- These three carried every grey fill and every grey border in both calculators. The names are kept because rules across ~250KB of CSS refer to them; the VALUES now come out of the brand palette. A fill is white. A line is NAVY at low alpha — visually a hairline, but it is navy, so the calculators hold to Navy / Orange / Light Blue / White and nothing reads as generic software grey. */ --abv-bg-soft: #ffffff; /* was #f0f2f4 — every panel fill */ --abv-line: rgba(5,17,36,.16); /* was #cacbcc — borders */ --abv-hairline: rgba(5,17,36,.09); /* was #e3e5e8 — dividers */ /* Kept for the few places that genuinely need a tinted plate rather than a line: image stages and "no data" hatching. Light Blue, never grey. */ --abv-plate: rgba(57,147,223,.06); --abv-plate-2: rgba(57,147,223,.12); --abv-tint: #fdece4; /* orange ~8% — selected states, callouts */ /* ---- TYPE ------------------------------------------------------------ Poppins is the only family on both reference pages, headings and body, and the site already loads it — no extra webfont request. */ --abv-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* The site's h1 is 66px. That is a marketing hero. An application asks one question at a time, so the step heading is the site's h2 treatment. */ --abv-h1: 42px; --abv-h1-lh: 1.08; --abv-h1-ls: -0.8px; --abv-h2: 30px; --abv-h2-lh: 1.15; --abv-h2-ls: -0.4px; --abv-h3: 22px; --abv-h3-lh: 1.2; --abv-h3-ls: -0.3px; --abv-body: 16px; --abv-body-lh: 1.65; --abv-small: 14px; --abv-tiny: 12.5px; --abv-w-head: 800; /* every heading on both reference pages */ --abv-w-strong: 700; /* THE EYEBROW — the site's h4, and its most recognisable type detail. */ --abv-eyebrow-size: 11px; --abv-eyebrow-ls: 2px; /* ---- SHAPE ------------------------------------------------------------ Measured: CTA radius 6px, .job__panel card radius 6px, in-page secondary buttons full pills. Both are real; both are kept. */ --abv-radius: 6px; --abv-radius-lg: 12px; /* rev3: intake callout + identifier panel */ --abv-radius-pill: 999px; /* Measured from .job__panel verbatim — a tight contact shadow plus a wide soft lift, both tinted with the navy rather than pure black. */ --abv-shadow: 0 1px 2px rgba(5,17,36,.06), 0 12px 32px rgba(5,17,36,.08); --abv-shadow-sm: 0 1px 2px rgba(5,17,36,.06), 0 4px 12px rgba(5,17,36,.06); /* ---- SPACE (4px base; section rhythm lands ~80-96px on the site) ------ */ --abv-1: 4px; --abv-2: 8px; --abv-3: 12px; --abv-4: 16px; --abv-5: 24px; --abv-6: 32px; --abv-7: 48px; --abv-8: 64px; /* ---- WIDTH (1361px is the dominant inner container on both pages) ----- */ --abv-max: 1160px; --abv-prose: 640px; /* ---- CONTROL SIZING -------------------------------------------------- */ --abv-tap: 48px; --abv-field-h: 56px; /* ---- MOTION ---------------------------------------------------------- */ --abv-ease: cubic-bezier(.2,.7,.3,1); --abv-dur: 180ms; --abv-dur-fast: 120ms; } /* Mode is a density dial on ONE system, never a second stylesheet. */ .abv-root[data-abv-mode='homeowner'] { --abv-stack: var(--abv-6); --abv-measure: var(--abv-prose); } .abv-root[data-abv-mode='professional'] { --abv-stack: var(--abv-4); --abv-measure: var(--abv-max); } @media (max-width: 768px) { .abv-root { --abv-h1: 28px; --abv-h2: 22px; --abv-h3: 19px; --abv-7: 32px; --abv-8: 44px; } } /* A wizard that animates when the reader asked it not to is just noise. */ @media (prefers-reduced-motion: reduce) { .abv-root { --abv-dur: 0ms; --abv-dur-fast: 0ms; } } /* ============================================================================= PROFESSIONAL WORKSPACE FOUNDATION (Phase 18A) ============================================================================= A deliberate foundation for the contractor tool, scoped so the homeowner wizard cannot see any of it. Two rules govern everything below. SPACE is 8 / 16 / 24 / 40 / 64. Nothing else. Half-steps exist only inside a control, never between blocks. TYPE is seven steps and stops. The old build had nineteen distinct sizes on one page, fifty-three of the text runs at 10.5px; that is not a hierarchy, it is an absence of one. The smallest type here is 13px and it is used for helper copy, not for anything a contractor has to read to do their job. COLOUR: orange is the accent and it is rationed. It means exactly four things — the primary action, the current selection, a shortfall, and a deliberate warning. It is never a heading decoration. The strongest surface on the page is navy, not orange, which is why the recommendation can shout without spending the accent. ========================================================================== */ .abv-root[data-abv-mode='professional'] { /* Stated positively rather than inherited, so the professional accent can never be changed by accident from the homeowner side. */ --abv-accent: #ef7d48; /* ---- SPACE ----------------------------------------------------------- */ --p-1: 8px; --p-2: 16px; --p-3: 24px; --p-4: 40px; --p-5: 64px; --p-hair: 4px; /* ---- TYPE: seven steps ----------------------------------------------- */ --p-title: 32px; /* workspace title 800 */ --p-section: 22px; /* major section 800 */ --p-sub: 16px; /* subsection / group 700 */ --p-control: 15px; /* every control and every value 500 */ --p-label: 13.5px; /* field label 600 */ --p-help: 13.5px; /* helper, advisory, fine print 400 */ --p-eyebrow: 12px; /* THE ONLY uppercase level 700 */ --p-metric: 34px; /* primary result metric 800 */ --p-metric-2: 22px; /* secondary metric 800 */ --p-w-head: 800; --p-w-sub: 700; --p-w-label: 600; --p-w-val: 500; /* ---- INK + SURFACE ---------------------------------------------------- */ --p-ink: #051124; --p-ink-2: #414d5e; --p-ink-3: #667283; --p-card: #ffffff; /* --p-ground WAS the grey section fill (#f4f6f8): the step header bars, the inset panels, the metric strips. All white now. Where it backed an image or a hatch, --abv-plate takes over so the tint stays inside the palette. */ --p-ground: #ffffff; --p-rule: rgba(5,17,36,.14); --p-rule-2: rgba(5,17,36,.09); --p-navy: var(--abv-navy); --p-navy-2: #051124; /* = navy; was a second, lighter navy */ /* ---- STATE: the whole accent budget, itemised ------------------------- */ --p-accent: var(--abv-orange); /* rev3: filled surfaces that carry WHITE TEXT use the interactive orange. --p-accent keeps every non-text role: tints, left edges, rules, marks. */ --p-btn-fill: var(--abv-navy); --p-btn-fill-hover: var(--abv-navy); --p-accent-dk: #dc6631; --p-accent-ink: #a8481c; /* fills/rules only — never small text */ --p-accent-bg: #fdf1ea; --p-accent-rule:#eec3ab; --p-ok: #256039; --p-ok-bg: #eef5f0; --p-ok-rule: #bcd6c5; /* Light Blue at low alpha, not a blue-grey plate. */ --p-info-bg: rgba(57,147,223,.07); --p-info-rule: rgba(57,147,223,.32); --p-focus: #346ac1; /* ---- ERROR / VALIDATION: red, and only red --------------------------- Validation is not a warning and it is not a shortfall. It gets its own colour so 'Attic floor area required.' can never be mistaken for advice. #c62828 measures 5.36:1 on white, so it clears AA for body text. */ --p-err: #c62828; --p-err-ink: #a01d1d; --p-err-bg: #fdecec; --p-err-rule: #e9a9a9; /* ---- SHAPE ------------------------------------------------------------ */ --p-radius: 10px; --p-radius-sm: 6px; --p-shadow: 0 1px 2px rgba(5,17,36,.05), 0 10px 30px rgba(5,17,36,.06); /* ---- MEASURE + CONTROLS ----------------------------------------------- */ --p-max: 1240px; --p-ctrl-h: 46px; --p-btn-h: 48px; --p-btn-lg: 54px; --p-btn-mini: 40px; } /* ============================================================================= THE ATTIC BREEZE CTA SYSTEM — MEASURED, NOT INVENTED ============================================================================= Every value below was read off the computed style of the strongest CTAs on the live staging /contractor-programs/ page (rule `.ab-loyalty .ab-cta .elementor-button`, read 2026-08-24). The calculators used a different button language entirely — 8px radius, 15px sentence-case type, 1px border, 120ms transitions — which is why they never looked like they came from the same company as the pages that link to them. THE SITE RULE, VERBATIM: min-height 48px · padding 13px 22px · border 2px solid · radius 999px Poppins 700 · 13.5px · line-height 1.25 · letter-spacing 1.1px · UPPERCASE box-shadow none · transition background-color/border-color/color .2s TWO DELIBERATE DIVERGENCES, both documented so nobody "fixes" them back: 1. NO HOVER LIFT AND NO SHADOW. The site's own rule is `:hover,:focus { transform: none; box-shadow: none; }` — the lift is explicitly killed there, so adding one here would be the thing that breaks the family, not the thing that joins it. Responsiveness comes from the colour change plus a 1px :active press instead. 2. THE FOCUS RING STAYS BLUE. The site focuses with a 3px #EF7D48 outline. Breeze Orange is 2.73:1 on white, so as a focus indicator it fails the 3:1 non-text contrast floor — and now that hover is also an orange gesture, an orange ring would read as hover. AB Blue #346AC1 is 5.27:1 and keeps focus visually distinct from hover. This preserves the calculator's existing documented decision. ========================================================================== */ .abv-root { --ab-cta-h: 48px; /* min-height, both modes */ --ab-cta-pad-y: 13px; --ab-cta-pad-x: 22px; --ab-cta-size: 13.5px; --ab-cta-lh: 1.25; --ab-cta-ls: 1.1px; --ab-cta-bw: 2px; --ab-cta-radius: 999px; --ab-cta-dur: .2s; /* the site's transition duration */ /* The large variant — the one dominant action in a view. Same family, one step up, so "Calculate system" still reads as the loudest control. */ --ab-cta-lg-h: 54px; --ab-cta-lg-pad-y: 15px; --ab-cta-lg-pad-x: 30px; --ab-cta-lg-size: 14.5px; /* The small sibling — map controls, "Show another", chip actions. Still a pill, still tracked caps, just quieter. */ --ab-cta-sm-h: 40px; --ab-cta-sm-pad-y: 9px; --ab-cta-sm-pad-x: 16px; --ab-cta-sm-size: 11.5px; --ab-cta-sm-ls: .9px; } @media (max-width: 1040px) { .abv-root[data-abv-mode='professional'] { --p-metric: 30px; --p-4: 32px; --p-5: 48px; } } @media (max-width: 768px) { .abv-root[data-abv-mode='professional'] { --p-title: 26px; --p-section: 19px; --p-metric: 28px; --p-metric-2: 20px; --p-3: 20px; --p-4: 28px; --p-5: 40px; } } /* ============================================================================= HOMEOWNER FOUNDATION (Phase 19) ============================================================================= Deliberately NOT the professional scale. A contractor is scanning a schedule; a homeowner is being walked through eight questions and then shown an answer. So this scale is larger, rounder and shorter — bigger type, pill buttons, fewer steps per screen, and a measure that keeps prose readable instead of packing a page. Shared with the professional side: the brand colours and the rule that ORANGE IS A FILL, NEVER SMALL TEXT. Everything else here is its own. ========================================================================== */ .abv-root[data-abv-mode='homeowner'] { /* ---- SPACE: 8 / 16 / 24 / 40 / 64 ------------------------------------ */ --h-1: 8px; --h-2: 16px; --h-3: 24px; --h-4: 40px; --h-5: 64px; /* ---- TYPE: seven steps, homeowner-sized ------------------------------ */ --h-hero: 46px; /* welcome headline only 800 */ --h-title: 32px; /* result title 800 */ --h-q: 28px; /* the question on each step 800 */ --h-sub: 18px; /* subsection / group heading 700 */ --h-ctrl: 16px; /* control text and card titles 600 */ --h-label: 15px; /* field label 600 */ --h-help: 14px; /* helper and supporting copy 400 */ /* 14, not 14.5: the untouched homeowner base already sets 14px in many places. A half-pixel sibling reads as noise, not hierarchy. */ --h-metric: 34px; /* the numbers on the result 800 */ --h-eyebrow: 12px; /* THE ONLY uppercase level 700 */ /* ---- THE HOMEOWNER ACCENT ------------------------------------------- This one line turns the whole BreezeMatch tool green. Every rule in abv-app.css that reads var(--abv-orange) resolves through the alias in .abv-root, and this declaration is (0,2,0) against that block's (0,1,0), so it wins without !important and without touching a single component. */ --abv-accent: #5c9d5e; /* ---- INK -------------------------------------------------------------- NO GREY TYPE. The old --h-body #414d5e and --h-muted #6b7787 were slate greys doing hierarchy work that size and weight already do. Body copy is navy; helper copy is the SAME navy at 72%, which is transparency of an approved colour rather than a fifth colour, and still 13.7:1 on white. */ --h-ink: #051124; /* headings, strong text */ --h-body: #051124; /* ordinary body copy */ --h-muted: rgba(5,17,36,.72); /* helper / supporting */ --h-navy: var(--abv-navy); /* ---- THE SHARED .abv-root INK + TINT, CORRECTED FOR THIS AUDIENCE ----- These three live on .abv-root and are read by rules common to both calculators. Overriding them here keeps the professional values intact while removing #3e3e3e / #6f7680 grey and the orange tint from every shared component the homeowner tool renders. */ --abv-text: #051124; --abv-muted: rgba(5,17,36,.72); --abv-tint: rgba(92,157,94,.08); /* ---- SURFACE --------------------------------------------------------- */ --h-card: #ffffff; /* Same retirement on the BreezeMatch side. A homeowner tool has even less business looking like an admin form than a professional one does. */ --h-ground: #ffffff; --h-rule: rgba(5,17,36,.14); --h-rule-2: rgba(5,17,36,.09); /* ---- STATE ----------------------------------------------------------- */ --h-accent: var(--abv-accent); --h-btn-fill: var(--abv-accent); /* PRIMARY = green fill, white label */ --h-btn-fill-hover: var(--abv-navy); /* hover resolves to navy, not a 2nd green */ /* No darker green exists in this system. The "dark accent" role is NAVY - an approved colour doing the job a tint used to do. */ --h-accent-dk: #051124; /* The selected/callout plate: the accent itself at 8%, never a grey or an orange tint. */ --h-accent-bg: rgba(92,157,94,.08); --h-ok: #5c9d5e; /* success IS the homeowner accent */ --h-ok-bg: rgba(92,157,94,.08); /* VALIDATION RED IS A DELIBERATE EXCEPTION, flagged for Vincent. An error is not a neutral and not an accent; making it green would say "correct" and making it navy would make it invisible as an error. #c62828 is 5.36:1 on white and is used ONLY for validation. */ --h-err: #c62828; --h-err-bg: #fdecec; --h-err-rule: #e9a9a9; --h-focus: #3993d5; /* SKY - 3.36:1, clears the 3:1 UI floor */ /* ---- SHAPE: rounder than the professional tool ----------------------- */ --h-radius: 14px; --h-radius-sm: 10px; --h-pill: 999px; --h-shadow: 0 1px 2px rgba(5,17,36,.05), 0 12px 34px rgba(5,17,36,.07); /* ---- MEASURE --------------------------------------------------------- The wizard is a single question, so it reads at prose width. The RESULT is a document and earns the page. */ --h-wizard: 860px; --h-wide: 1140px; /* ---- CONTROLS: bigger touch targets than the pro tool ---------------- */ --h-tap: 52px; --h-btn: 52px; --h-btn-sm: 44px; } @media (max-width: 768px) { .abv-root[data-abv-mode='homeowner'] { --h-hero: 32px; --h-title: 26px; --h-q: 24px; --h-sub: 17px; --h-metric: 30px; --h-4: 28px; --h-5: 40px; } }