behind it as a gap under the last block. */ [data-theme='client'] main > article { padding-bottom: 0; } /* ============================================== BANNER / HERO — Figma page node 130:30, artwork 130:7645 Left-aligned copy over a full-bleed mountain illustration. The artwork is a single exported SVG rather than CSS: 479 vector paths carrying the sky gradient, sun and gold horizon exactly as drawn. NOTE ON COLOUR: the illustration's colours are baked into that SVG, so unlike the rest of the theme the sky and sun do NOT follow the CMS brand fields. They were exported matching the configured brand (#005670 primary, #cc8a00 accent); a future brand change needs the asset re-exported from Figma. Everything outside the artwork — headline, copy, both CTAs — is tokenised as usual. ============================================== */ [data-theme='client'] .client-hero { position: relative; isolation: isolate; overflow: hidden; /* Sky's top stop: fills any area above the artwork on tall/wide viewports. */ background-color: hsl(var(--primary)); } [data-theme='client'] .client-hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url('/client-assets/mpl/banner-mountains.svg'); background-repeat: no-repeat; /* Bottom-anchored so the gold horizon stays flush with the section's lower edge, where the next section picks up, whatever the copy does to the height. `cover` (not `100% auto`) so the artwork always fills the box: its sky colour is baked into the SVG, so any uncovered strip would expose the section's --primary fill as a visible seam whenever the two differ. */ background-position: bottom center; background-size: cover; } [data-theme='client'] .client-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 75rem; margin-left: auto; margin-right: auto; padding: 56px 1rem 72px; } [data-theme='client'] .client-hero-content { max-width: 1010px; } [data-theme='client'] .client-hero-title, [data-theme='client'] .client-hero-copy h1 { margin: 0 0 10px; color: hsl(var(--primary-foreground)); font-family: var(--font-heading); font-size: 32px; font-weight: 700; line-height: 1.18; } [data-theme='client'] .client-hero-copy p { margin: 0; color: hsl(var(--primary-foreground)); font-family: var(--font-body); font-size: 18px; font-weight: 700; line-height: 1.4; } /* Below desktop: copy ABOVE the mountains (client review, mobile). `cover` scaled the artwork to the section's height, so on a narrow screen the peaks rose behind the white copy and it was unreadable. Here the artwork keeps its natural 1280:663 ratio across the full width, bottom-anchored, and the inner padding reserves the mountain band so every line of copy and both buttons sit in open sky. Peaks begin ~20% down the artwork, so 80% of its height is reserved. The area above the artwork takes the artwork's own top sky colour (--brand-hero-sky), which is what makes the join invisible. */ @media (max-width: 63.99rem) { [data-theme='client'] .client-hero { background-color: hsl(var(--brand-hero-sky)); } [data-theme='client'] .client-hero-art { background-size: 100% auto; } [data-theme='client'] .client-hero-inner { padding-bottom: calc(100vw * 663 / 1280 * 0.8 + 16px); } } /* White copy on the illustration's sky is legible but soft, and at narrower viewports the headline overlaps the snow. A drop shadow in the banner's own deep teal separates it without reading as an effect. */ [data-theme='client'] .client-hero-title, [data-theme='client'] .client-hero-copy h1, [data-theme='client'] .client-hero-copy p { text-shadow: 0 2px 6px hsl(var(--primary) / 0.75); } [data-theme='client'] .client-hero-actions { display: flex; flex-wrap: wrap; gap: 17px; margin: 24px 0 0; padding: 0; list-style: none; } /* The design's "Schedule Service" / phone pairing, driven by whatever links the CMS holds: first CTA brand, second brand gold. The first button is #6cb4ca (--brand-sky, component 11:6189), as the design and a 2026-10 review asked. The design's white label measures only 2.33:1 on it (client asked for more contrast on 2026-09-17), so the label is --primary instead: 4.99:1, passing AA. On hover the fill turns --secondary, where the label switches back to white (6.33:1; --primary there would be 1.83:1). The gold second button is untouched: it measures 2.82:1 and Julio decided 2026-09-11 to keep the Figma colour there. */ [data-theme='client'] .client-hero-cta { display: inline-flex; align-items: center; justify-content: center; height: 57px; padding: 0 24px !important; border: 0 !important; border-radius: 8px !important; background-color: hsl(var(--brand-sky)) !important; color: hsl(var(--primary)) !important; font-family: var(--font-heading); font-size: 20px; font-weight: 700; text-transform: uppercase; text-decoration: none; } [data-theme='client'] .client-hero-actions li:nth-child(2) .client-hero-cta { background-color: hsl(var(--accent)) !important; color: hsl(var(--primary-foreground)) !important; } /* Both hero buttons share Variant2 (#326295) in the design, same as every gold CTA — so hover is a colour change, not a brightness shift. */ [data-theme='client'] .client-hero-cta:hover, [data-theme='client'] .client-hero-actions li:nth-child(2) .client-hero-cta:hover { background-color: hsl(var(--secondary)) !important; color: hsl(var(--primary-foreground)) !important; } /* The phone glyph ships from core's ButtonIcon at `h-4 w-auto shrink-0 -mx-[3px]` — 16px tall against 30px digits, so it read as half-size, and the negative side margins left only a 3px gap before the "(". Sized in `em`, not the rem Julio verified with: the button is 30px at >=64rem but 20px below it, so a fixed 1.6rem would be correct on desktop and oversized on mobile. 0.85em lands at 25.5px against 30px type — the same place his 1.6rem did — and tracks the button at every breakpoint. Those three utilities are global and core's ButtonIcon is outside the client seam, so this scopes to the hero button rather than touching either. */ [data-theme='client'] .client-hero-cta svg { height: 0.85em; margin-left: -3px; margin-right: 3px; /* Optical centring: the phone-volume glyph carries its sound waves high in the viewBox, so it sits above the digits' midline. Halved by the button's `align-items: center`, which centres the MARGIN box — the icon drops 1.5px, which is the nudge Julio signed off on. */ margin-bottom: -3px; } @media (min-width: 64rem) { /* The header's flow box now ends at the brand bar (104px), so the artwork already meets the bar's bottom edge with no negative pull — the pill is absolutely positioned at y:84 and floats its lower 33px over the hero, matching the design's y:103 banner top. */ /* The artwork is 1280x663 and `cover`-fitted from the bottom, so a fixed height crops the TOP as the viewport widens — at 1724px that was 230px of sun and peaks gone, and it pushed the headline down onto the mountains it was meant to sit above. Height therefore tracks the art's own aspect ratio. Deliberately uncapped: a fixed ceiling reintroduces exactly this crop on wide screens (at 2560 a 920px cap loses 406px). On a real 2560x1440 display this resolves to ~1326px, about 92% of the viewport — a normal full-bleed hero. The 663px floor keeps the design's height at 1280 and below. */ [data-theme='client'] .client-hero { min-height: max(560px, calc(100vw * 663 / 1280)); } [data-theme='client'] .client-hero-inner { /* Headline sits 86px below the artwork's top edge in the design. */ padding: 86px 1rem 96px; } [data-theme='client'] .client-hero-title, [data-theme='client'] .client-hero-copy h1 { font-size: 50px; line-height: 59px; } [data-theme='client'] .client-hero-copy p { font-size: 25px; line-height: 33px; } [data-theme='client'] .client-hero-cta { min-width: 316px; font-size: 25px; } [data-theme='client'] .client-hero-actions li:nth-child(2) .client-hero-cta { font-size: 30px; } } /* ============================================== FEATURED SERVICES — Figma nodes 130:4168 / 7608 / 7620 / 7632 Gold badge shields with an overlapping label bar, sitting on the dark band directly under the hero. All four Figma frames are one component instance differing only in label, so this is a single card rendered per CMS item. Proportions come from the design's 255x219 card: shield 183 wide (71.76%), label bar full-width at y:76 (34.70%) and 63 tall (28.77%). Expressed as percentages against an aspect-ratio box so the badges scale cleanly. Every colour is already a token — the design's #cc8a00 and #326295 are exactly the configured brand accent and secondary. ============================================== */ [data-theme='client'] .client-services { background-color: hsl(var(--primary)); padding: var(--client-section-pad) 0; } [data-theme='client'] .client-services-inner { width: 100%; max-width: 75rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } /* auto-fit so the row reads correctly at any number of badges. The tracks are `1fr` with the design's 255px applied as a max-width on the card itself, NOT as the track's max. A definite max (`minmax(180px, 255px)`) makes the browser count tracks at 255px, and four of those plus the design's gaps need 1191px of a container that caps at 1168 — so the fourth badge wrapped to its own row. Flexible tracks let the four sit together and give back a couple of pixels each instead. */ [data-theme='client'] .client-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); justify-items: center; gap: 40px clamp(16px, 4vw, 57px); margin: 0; padding: 0; list-style: none; } [data-theme='client'] .client-service-card { position: relative; width: 100%; max-width: 255px; aspect-ratio: 255 / 219; } /* CardLinkOverlay renders a stretched anchor, so focus lands on the card. */ [data-theme='client'] .client-service-card:focus-within { outline: 2px solid hsl(var(--primary-foreground)); outline-offset: 4px; } [data-theme='client'] .client-service-shield { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 71.76%; height: 100%; } [data-theme='client'] .client-service-shield-edge { fill: hsl(var(--primary-foreground)); } [data-theme='client'] .client-service-shield-face { fill: hsl(var(--accent)); } /* The trade icon, drawn in the card's own 255x219 space so it lands exactly where the design puts it. Hidden until hover: the design's default variant has no icon at all, and the label only covers it from y=76 down. */ [data-theme='client'] .client-service-icon { position: absolute; inset: 0; width: 100%; height: 100%; fill: hsl(var(--primary-foreground)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } [data-theme='client'] .client-service-card:hover .client-service-icon, [data-theme='client'] .client-service-card:focus-within .client-service-icon { opacity: 1; } [data-theme='client'] .client-service-shield-rule { fill: none; stroke: hsl(var(--primary-foreground)); stroke-width: 5; stroke-miterlimit: 10; } /* Label bar spans the full card width, overlapping the shield. Type is fluid: the design's labels are single words at 28px, but CMS titles run longer ("Indoor Air Quality"), so size and tracking scale down and may wrap to a second line inside the bar. */ [data-theme='client'] .client-service-label { position: absolute; /* Design: bar top y=75.72 of 219 (34.58%), dropping to y=107 (48.86%) on hover — the move is what uncovers the icon above it. */ top: 34.58%; left: 0; right: 0; display: flex; align-items: center; justify-content: center; height: 28.77%; padding: 0 10px; /* 11.37px on the design's 255px-wide bar. */ border-radius: 11px; background-color: hsl(var(--secondary)); transition: top 0.25s ease; color: hsl(var(--primary-foreground)); font-family: var(--font-anton), var(--font-heading); font-size: clamp(13px, 1.35vw, 28px); font-weight: 400; letter-spacing: clamp(1px, 0.22vw, 4.76px); line-height: 1.06; text-align: center; text-transform: uppercase; } [data-theme='client'] .client-service-card:hover .client-service-label, [data-theme='client'] .client-service-card:focus-within .client-service-label { top: 48.86%; } @media (prefers-reduced-motion: reduce) { [data-theme='client'] .client-service-icon, [data-theme='client'] .client-service-label { transition: none; } } /* ============================================== ABOUT — Figma nodes 130:1990 / 1992-1995 / 2046 A raised panel on the same dark band as the featured services: heading column, cyan rule, body copy. Card is 1200x304 with a 39px radius (read off the exported path), 49px gutters, heading 421 against copy 627. --brand-surface / --brand-cyan come from src/client/styles/index.css: the design's teal ramp is wider than the primary/secondary/accent contract, and `ThemeTokens` is a closed type so they cannot live in the theme's token bag. The section carries no top padding — the featured-services block above supplies the gap, and both share the --primary band, so a top value here would split the colour. That gap is now the shared --client-section-pad (72px desktop) rather than the design's 58px between badges and card. ============================================== */ [data-theme='client'] .client-about { background-color: hsl(var(--primary)); padding: 0 0 72px; } [data-theme='client'] .client-about-inner { width: 100%; max-width: 75rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } [data-theme='client'] .client-about-card { border-radius: 39px; background-color: hsl(var(--brand-surface)); padding: 40px 28px; } [data-theme='client'] .client-about-grid { display: grid; gap: 28px; } [data-theme='client'] .client-about-heading { margin: 0; color: hsl(var(--primary-foreground)); font-family: var(--font-heading); font-size: var(--client-h2); font-weight: 700; line-height: 1.18; text-transform: uppercase; } [data-theme='client'] .client-about-copy { color: hsl(var(--primary-foreground)); font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 26px; } [data-theme='client'] .client-about-copy :is(p, li) { color: hsl(var(--primary-foreground)); font-size: var(--client-body); line-height: 1.3; } [data-theme='client'] .client-about-copy p:not(:last-child) { margin-bottom: 1em; } [data-theme='client'] .client-about-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; } /* The button's own hover class repeats its base colour, so hover showed no change. Match every other gold CTA: hover to the design's Variant2 blue. */ [data-theme='client'] .client-about-links a[class*='inline-flex']:hover { background-color: hsl(var(--secondary)) !important; } @media (min-width: 64rem) { [data-theme='client'] .client-about-card { padding: 57px 49px 60px; } /* 421 heading : 683 copy column (25 gap + 2 rule + 29 pad + 627 text) = 1104, the card's inner width at the design's 49px gutters. */ [data-theme='client'] .client-about-grid { grid-template-columns: minmax(0, 421fr) minmax(0, 683fr); align-items: start; gap: 0; } [data-theme='client'] .client-about-copy { margin-left: 25px; border-left: 2px solid hsl(var(--brand-cyan)); padding-left: 29px; } } /* ============================================== SPECIALS — Figma nodes 130:1989 / 130:7647 / 130:4675 Heading, a row of coupon artwork, then a gold CTA, over a faint mountain silhouette band. Coupons are images supplied through the CMS (the Specials collection's `type: 'image'` mode), so nothing here styles their interior — only the frame, radius and grid. Design geometry: coupons 574x303 with a 28px gutter, CTA 240x44 at radius 8, 53px under the heading and 24px above the button. ============================================== */ [data-theme='client'] .client-specials { position: relative; overflow: hidden; background-color: hsl(var(--primary)); padding: 0 0 72px; } /* Decorative silhouette band. Opacity is baked into the SVG (0.25), matching the design. Drop this rule to remove the asset entirely — nothing else depends on it. */ [data-theme='client'] .client-specials-art { position: absolute; right: 0; bottom: 0; left: 0; height: 363px; background-image: url('/client-assets/mpl/specials-mountains.svg'); background-repeat: no-repeat; background-position: left bottom; background-size: auto 100%; pointer-events: none; } [data-theme='client'] .client-specials-inner { position: relative; z-index: 1; width: 100%; max-width: 75rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } [data-theme='client'] .client-specials-heading { margin: 0 0 40px; color: hsl(var(--primary-foreground)); font-family: var(--font-heading); font-size: var(--client-h2); font-weight: 700; line-height: 1.18; text-align: center; text-transform: uppercase; } [data-theme='client'] .client-specials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; } [data-theme='client'] .client-special-link { display: block; border-radius: 12px; } [data-theme='client'] .client-special-link:focus-visible { outline: 2px solid hsl(var(--primary-foreground)); outline-offset: 4px; } /* Natural aspect — coupon artwork must never be cropped or stretched. */ [data-theme='client'] .client-special-img { display: block; width: 100%; height: auto; border-radius: 12px; } /* ---------------------------------------------- BLOG LISTING — "Read More" The archive cards render their control as a

Trane

Air Conditioners

Air Handlers

Ductless

Gas Furnaces

Heat Pumps

Indoor Air Quality

Packaged Systems

Thermostats