[data-theme='client'] { --background: 0 0% 100%; --foreground: 187.09 98.45% 25.29%; --primary: 187.09 98.45% 25.29%; --primary-foreground: 0 0% 100%; --secondary: 172.45 100% 70.39%; --secondary-foreground: 187.09 98.45% 25.29%; --accent: 357.84 76.38% 50.2%; --accent-foreground: 0 0% 100%; --card: 0 0% 100%; --card-foreground: 187.09 98.45% 25.29%; --popover: 0 0% 100%; --popover-foreground: 187.09 98.45% 25.29%; --muted: 184 32% 90%; --muted-foreground: 187 30% 38%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 184 32% 85%; --input: 184 32% 92%; --ring: 187.09 98.45% 25.29%; --font-heading: var(--font-dm-sans), sans-serif; --font-body: var(--font-dm-sans), sans-serif; --font-size-h1-px: 53; --font-size-h2-px: 35; --font-size-h3-px: 25; --font-size-h4-px: 20; --font-size-body-px: 18; --line-height-heading: 1.15; --line-height-body: 1.6; --font-weight-heading: 700; --radius: 0.5rem; --font-weight-body: 400; } /** * Client Theme CSS surface. * * This is the structural stylesheet for the per-client custom theme. It ships * upstream as a MINIMAL, neutral baseline — just enough so the header and footer * render sanely when "Client" is the active theme. Each client repo replaces / * extends these rules with the client's brand. * * All selectors are scoped to `data-*='client'`: * [data-theme='client'] — global (buttons, headings, blocks) * [data-header='client'] — header structure * [data-footer='client'] — footer structure * The palette/typography come from the token bag in ./config.ts (emitted at SSR * as [data-theme='client'] { … }). Add brand-specific structural CSS below. */ /* Headings — default to foreground, overrideable via --heading-color from blockSettings */ [data-theme='client'] :is(h1, h2, h3, h4, h5, h6) { color: var(--heading-color, hsl(var(--foreground))); } /* ============================================== HEADER — Client (neutral baseline) ============================================== */ [data-header='client'] header[data-header-style='light'] { --header-bg: hsl(var(--background)); --header-text: hsl(var(--foreground)); --header-border: hsl(var(--border)); } [data-header='client'] header[data-header-style='dark'] { --header-bg: hsl(var(--foreground)); --header-text: hsl(var(--background)); --header-border: hsl(var(--background) / 0.2); } /* Focus-visible for accessibility */ [data-header='client'] header nav a:focus-visible, [data-header='client'] header nav button:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } /* ============================================== FOOTER — Client (neutral baseline) ============================================== */ [data-footer='client'] footer[data-footer-scheme='dark'] { background-color: hsl(var(--foreground)); color: hsl(var(--background)); } [data-footer='client'] footer[data-footer-scheme='dark'] a { color: hsl(var(--background)); } [data-footer='client'] footer[data-footer-scheme='light'] { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } [data-footer='client'] footer a:focus-visible, [data-footer='client'] footer button:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } /* ============================================== CLIENT BRAND STYLES — add below Buttons, nav, CTA, block-specific overrides, etc. ============================================== */ /* ================================================================== MRA — Phase 4 visual layer Design: Figma `ioqmepsibBZfZPpT1PyJ3n`, page Dev, frame Scroll-A (388:326). Sections are targeted by the `mra-*` hooks that homepageSeed.ts sets via `blockSettings.customClasses`; BlockWrapper renders them onto the section element. Never target by nth-child — the order changes. Non-contract brand values live here (the token bag in config.ts is a CLOSED set and rejects custom keys). ================================================================== */ [data-theme='client'] { --mra-teal: 187.09 98.45% 25.29%; /* #017180 exactly */ --mra-mint: 172.45 100% 70.39%; /* #68FFEC exactly */ --mra-red: 357.84 76.38% 50.2%; /* #E11F26 exactly */ --mra-orange: 33 100% 61%; /* Pale pink hairline on the red button, from Figma set 138:1249. */ --mra-btn-pink: 358.46 100% 84.71%; /* #FFB1B3 exactly */ /* Metallic ribbon stops for the maintenance tiers (Figma 389:1304). Declared as tokens because `check:themes` rejects raw chromatic hex in this stylesheet. */ --mra-gold-1: 45 85% 76%; --mra-gold-2: 42 70% 50%; --mra-gold-3: 43 80% 67%; --mra-silver-1: 0 0% 95%; --mra-silver-2: 0 0% 66%; --mra-silver-3: 0 0% 88%; /* Footer ground. The Figma comp uses #D9D9D9, but teal body copy on it measures 4.05:1 — below AA for the small licence/legal lines. 0 0% 91% is the nearest value to the comp that clears 4.5:1. */ --mra-footer-ground: 0 0% 91%; /* Upper stop of the header's mint band gradient. */ --mra-mint-deep: 172 82% 65%; /* Mid stop of the Reviews band gradient (#158C95, Figma 389:1297). */ --mra-teal-mid: 185 75% 33%; /* Ribbon fold shadow (#8E6047, Figma 388:417 `Rectangle 62`). */ --mra-ribbon-fold: 21 33% 42%; /* Mid stops of the Service Map gradient (#5CEEE0 / #50DED3, Figma 388:540). */ --mra-map-1: 174 81% 65%; --mra-map-2: 175 68% 59%; --mra-surface: 184 32% 90%; /* The halftone dot field used by the hero, specials, maintenance cards and the Trusted Service band. Size/opacity are overridden per section. */ --mra-dot-size: 10px; --mra-dot-color: hsl(var(--mra-teal) / 0.18); } /* ---- Page ground: white → pale teal, matching the Figma background rect ---- */ [data-theme='client'] body, [data-theme='client'] main { background-image: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(var(--mra-surface)) 100%); background-attachment: fixed; } /* ================================================================== SHARED MOTIFS — five treatments that repeat across the page. Defined once; sections opt in. ================================================================== */ /* 1 — Halftone dot field. */ [data-theme='client'] .mra-halftone::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--mra-dot-color) 22%, transparent 23%); background-size: var(--mra-dot-size) var(--mra-dot-size); } /* 2 — Eyebrow above H2 (small, letterspaced, centred). */ [data-theme='client'] .mra-eyebrow { display: block; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; margin-bottom: 0.5rem; } /* 3 — Rounded photo card. */ [data-theme='client'] .mra-photo-card img { border-radius: 18px; object-fit: cover; } /* ================================================================== BUTTONS — the design uses three grounds, so colour is contextual: red on light, mint on teal, teal on pale. Core emits `bg-accent` (red) by default, which is correct for the light sections. ================================================================== */ [data-theme='client'] :is(a, button) .mra-btn, [data-theme='client'] .mra-btn { border-radius: 6px; font-weight: 700; letter-spacing: 0.01em; } /* ================================================================== ICON CARDS — one bespoke block (`mraIconCards`) serving BOTH the service shields (Figma 389:1217 / 388:652) and Core Values (389:1213). It replaced core `featuredItems` for these two sections because that block has no heading, no hover concept, and draws icons from the SITE-WIDE active icon set — so a second icon-led section silently recycled the first one's marks. Icons are now per item and CMS-editable. Markup: li.mra-card > a.mra-card-link > span.mra-card-mark (+ icons) + span.mra-card-label + span.mra-card-desc ================================================================== */ [data-theme='client'] .mra-cards-heading { color: hsl(var(--mra-teal)); font-size: 35px; font-weight: 700; line-height: 46px; text-align: center; text-transform: uppercase; margin-bottom: 2rem; } [data-theme='client'] .mra-cards-grid { display: grid; justify-items: center; align-items: start; list-style: none; margin: 0; padding: 0; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1024px) { [data-theme='client'] .mra-cards-grid[data-count='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; /* Figma: 271px cards on a 301px pitch */ } [data-theme='client'] .mra-cards-grid[data-count='5'] { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Centre a lone trailing card on tablet/mobile (client, 2026-09-21). Below 1024 the grid is always 2 columns, so any ODD number of cards leaves the last one alone on its own row, hugging the left column — Core Values has five, so its 5th badge sat 123px left of centre. `:last-child:nth-child(odd)` IS the orphan condition, and it needs no count hardcoded: in a 2-up grid an odd 1-based position always starts a new row, so a card that is both last and odd is necessarily alone on it. Four cards (Featured Services) end even and are left alone; `data-count` is `rows.length` straight from the CMS, so this keeps working if the editor adds or removes a card. Scoped BELOW 1024 on purpose — at the design width `data-count='5'` gets five columns, where the 5th card is the end of a full row and must not span. */ @media (max-width: 1023px) { [data-theme='client'] .mra-cards-grid > .mra-card:last-child:nth-child(odd) { grid-column: 1 / -1; } } [data-theme='client'] .mra-card { width: 100%; display: flex; justify-content: center; } [data-theme='client'] .mra-card-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; } [data-theme='client'] .mra-card-icon, [data-theme='client'] .mra-card-icon-hover { width: 100%; height: 100%; object-fit: contain; } /* Hover art is a second stacked image, cross-faded — never a `src` swap, which flashes empty the first time the pointer arrives. */ [data-theme='client'] .mra-card-icon-hover { position: absolute; inset: 0; opacity: 0; } /* ------------------------------------------------------------------ SHIELD variant — Featured Services Default: teal shield, mint mark, mint label 700/25. Hover : grey #CBCBCB shield, white inner shield, mark hidden, label teal 700/20 lh26, description teal 400/11 lh14 centred (Figma 327:155). ------------------------------------------------------------------ */ /* One duration + curve for every property in the flip, so nothing arrives early. Client asked for a slower, softer transition (2026-09-21) — it was 160-180ms and two of the five properties did not transition at all. */ [data-theme='client'] .mra-cards[data-variant='shield'] { --mra-flip-dur: 320ms; --mra-flip-ease: cubic-bezier(0.4, 0, 0.2, 1); } [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-link { position: relative; width: 271px; max-width: 100%; aspect-ratio: 271 / 178; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem 3rem; background-color: hsl(var(--mra-teal)); clip-path: polygon( 49.15% 0.02%, 0.72% 11.35%, 6.29% 76.88%, 6.30% 85.97%, 22.08% 87.10%, 48.82% 99.90%, 77.16% 87.14%, 89.95% 87.10%, 90.69% 79.84%, 99.84% 12.69% ); transition: background-color var(--mra-flip-dur) var(--mra-flip-ease); } /* The white inner shield (Figma 258x139 of 271x178) — same silhouette, inset. It is painted at ALL times and cross-faded. It used to be created by `content` inside the :hover rule, so the pseudo-element did not exist until the pointer arrived and there was nothing for the browser to transition FROM: the white shield appeared in one frame while everything around it faded. */ [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-link::before { content: ''; position: absolute; inset: 5px 6px 8px; background-color: #fff; clip-path: polygon( 49.15% 0.02%, 0.72% 11.35%, 6.29% 76.88%, 6.30% 85.97%, 22.08% 87.10%, 48.82% 99.90%, 77.16% 87.14%, 89.95% 87.10%, 90.69% 79.84%, 99.84% 12.69% ); opacity: 0; z-index: 0; transition: opacity var(--mra-flip-dur) var(--mra-flip-ease); } /* The mark COLLAPSES its own height (and eats the flex gap below it with a negative margin) rather than being switched to `position: absolute` on hover. The absolute switch is discrete — it left the flow in a single frame, so the label teleported upward at t=0 while the icon was still fading in place. 52px + the 0.5rem gap is exactly what the absolute version removed, so the resting and fully-hovered layouts are unchanged. */ [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-mark { position: relative; display: block; height: 52px; width: 52px; margin-bottom: 0; overflow: hidden; flex: 0 0 auto; transition: opacity var(--mra-flip-dur) var(--mra-flip-ease), height var(--mra-flip-dur) var(--mra-flip-ease), margin-bottom var(--mra-flip-dur) var(--mra-flip-ease); } [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-label { color: hsl(var(--mra-mint)); font-size: 25px; font-weight: 700; line-height: 1.1; text-transform: uppercase; text-align: center; transition: color var(--mra-flip-dur) var(--mra-flip-ease), font-size var(--mra-flip-dur) var(--mra-flip-ease); } /* Description is present but collapsed until hover. */ [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-desc { color: hsl(var(--mra-teal)); font-size: 11px; font-weight: 400; line-height: 14px; text-align: center; opacity: 0; max-height: 0; overflow: hidden; transition: opacity var(--mra-flip-dur) var(--mra-flip-ease), max-height var(--mra-flip-dur) var(--mra-flip-ease); } /* --- hover / focus-visible flip --- GATED ON `(hover: hover)` — a touch device fires :hover on TAP and then keeps it latched, so on mobile the flip fired on the way to the service page: the icon vanished, the label shrank and the description appeared for the moment before navigation. The card is a real link either way; on touch it simply stays in its default state. Client asked for this explicitly (2026-09-02). */ @media (hover: hover) { /* --- hover / focus-visible flip --- */ [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-link:is(:hover, :focus-visible) { background-color: #cbcbcb; } [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-link:is(:hover, :focus-visible)::before { opacity: 1; } [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-link:is(:hover, :focus-visible) .mra-card-mark { opacity: 0; height: 0; margin-bottom: -0.5rem; pointer-events: none; } [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-link:is(:hover, :focus-visible) .mra-card-label { position: relative; z-index: 1; color: hsl(var(--mra-teal)); font-size: 20px; line-height: 26px; } /* Scrollable so real copy can never break the silhouette: the shield is a fixed 271x178 with a clip-path, so overflow would be clipped away invisibly rather than pushing the box. Capped to the inner shield's usable height. */ [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-link:is(:hover, :focus-visible) .mra-card-desc { position: relative; z-index: 1; opacity: 1; max-height: 72px; overflow-y: auto; overscroll-behavior: contain; padding-inline: 0.25rem; scrollbar-width: thin; scrollbar-color: hsl(var(--mra-teal) / 0.45) transparent; } [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-desc::-webkit-scrollbar { width: 4px; } [data-theme='client'] .mra-cards[data-variant='shield'] .mra-card-desc::-webkit-scrollbar-thumb { background-color: hsl(var(--mra-teal) / 0.45); border-radius: 2px; } } /* ------------------------------------------------------------------ CIRCLE variant — Core Values (Figma 389:1213) 180px teal disc; 139px white inner circle with a 5px mint stroke (139/180 = 77.2%); label BELOW the disc, teal 600/20 lh26. ------------------------------------------------------------------ */ [data-theme='client'] .mra-cards[data-variant='circle'] .mra-card-link { gap: 1rem; max-width: 200px; } [data-theme='client'] .mra-cards[data-variant='circle'] .mra-card-mark { position: relative; display: grid; place-items: center; height: clamp(128px, 12vw, 180px); width: clamp(128px, 12vw, 180px); border-radius: 50%; background-color: hsl(var(--mra-teal)); } [data-theme='client'] .mra-cards[data-variant='circle'] .mra-card-mark::before { content: ''; position: absolute; width: 77.2%; height: 77.2%; border-radius: 50%; background-color: #fff; box-shadow: inset 0 0 0 5px hsl(var(--mra-mint)); } [data-theme='client'] .mra-cards[data-variant='circle'] .mra-card-icon, [data-theme='client'] .mra-cards[data-variant='circle'] .mra-card-icon-hover { position: relative; width: 36%; height: 36%; } [data-theme='client'] .mra-cards[data-variant='circle'] .mra-card-icon-hover { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } [data-theme='client'] .mra-cards[data-variant='circle'] .mra-card-label { color: hsl(var(--mra-teal)); font-size: 20px; font-weight: 600; line-height: 26px; text-transform: uppercase; text-align: center; } /* Core Values has no hover flip in the design; hide any stray description. */ [data-theme='client'] .mra-cards[data-variant='circle'] .mra-card-desc { display: none; } /* Shared: swap to the hover mark when one is supplied. */ [data-theme='client'] .mra-card[data-has-hover='true'] .mra-card-link:is(:hover, :focus-visible) .mra-card-icon { opacity: 0; } [data-theme='client'] .mra-card[data-has-hover='true'] .mra-card-link:is(:hover, :focus-visible) .mra-card-icon-hover { opacity: 1; } /* Spacing comes from `blockSettings` in homepageSeed.ts (BlockWrapper emits it inline, which beats any stylesheet rule): marginTop 50px and paddingBottom 75px, matching the Figma gaps (hero ends 558 → shields 608 → About 861). No z-index games: the shields sit on the page ground, below the hero. */ [data-theme='client'] .mra-featured-services { position: relative; } /* Let `blockSettings` own the vertical rhythm for this section. The block's own container padding was adding ~54px above and ~80px below the shields, which doubled the Figma gaps (measured 104px hero→shield against a designed 50px). */ [data-theme='client'] .mra-featured-services .mra-cards { padding-block: 0; } [data-theme='client'] .mra-featured-services .mra-cards-grid { margin-block: 0; } /* ================================================================== 6 — REVIEWS (Figma 389:1337 section / 389:1297 gradient / 389:1291 panel) Rendered by the bespoke `mraReviews` block, not core `reviewsBlock` — see src/client/blocks/MraReviews/config.ts for why (different card component, and core's ReviewCard hardcodes an em-dash before the reviewer name). Section is a full-bleed 1280x600 band. Vertical padding comes from `blockSettings` in homepageSeed.ts (50 top / 87 bottom), NOT from here — BlockWrapper emits padding as an INLINE style that beats any rule short of !important. ================================================================== */ /* Gradient handles run y=0.72 -> y=1.0, so the top 72% is flat teal and the ramp is squeezed into the bottom 28%. Using `background-image` (not the `background` shorthand) leaves the block's own inline background-color alone. */ [data-theme='client'] .mra-reviews { background-image: linear-gradient( to bottom, hsl(var(--mra-teal)) 0%, hsl(var(--mra-teal)) 72%, hsl(var(--mra-teal-mid)) 78.33%, hsl(var(--mra-mint)) 100% ); margin-block: 0; } /* ---- heading group (Figma 389:1295) ---- */ [data-theme='client'] .mra-reviews-eyebrow { color: #fff; font-size: 17px; font-weight: 400; line-height: 22px; text-align: center; text-transform: uppercase; margin: 0; } [data-theme='client'] .mra-reviews-heading { color: #fff; font-size: 35px; font-weight: 700; line-height: 46px; text-align: center; text-transform: uppercase; margin: 5px 0 0; /* Figma: eyebrow ends y=1780, heading starts y=1785 */ } /* ---- the white panel (Figma 389:1291: 1173x286, r20) ---- */ [data-theme='client'] .mra-reviews-panelwrap { margin-top: 30px; /* heading bottom 1831 -> panel top 1861 */ } [data-theme='client'] .mra-reviews-panel { display: flex; align-items: center; gap: 66px; /* mark ends x=315, cards start x=381 */ background-color: #fff; border-radius: 20px; box-shadow: 0 4px 4px rgb(0 0 0 / 0.25); /* Figma insets: 57 left (110-53), 37 right (1226-1189), 30/31 vertical. */ padding: 30px 37px 31px 57px; } [data-theme='client'] .mra-reviews-mark { flex: 0 0 auto; width: 205px; } [data-theme='client'] .mra-reviews-mark img { display: block; width: 100%; height: auto; object-fit: contain; } [data-theme='client'] .mra-reviews-empty { color: hsl(var(--mra-teal)); font-size: 18px; margin: 0 auto; padding-block: 2rem; text-align: center; } /* ---- the scrolling strip ---- */ [data-theme='client'] .mra-reviews-stripwrap { position: relative; flex: 1 1 auto; min-width: 0; /* never `width: 100%` on a flex track — it overflows the panel */ } [data-theme='client'] .mra-reviews-strip { display: flex; gap: 27px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } [data-theme='client'] .mra-reviews-strip::-webkit-scrollbar { display: none; } /* Three across at the design width, and the same rule degrades to two and then one as the panel narrows — the strip stays scrollable at every size. */ [data-theme='client'] .mra-review-card { flex: 0 0 calc((100% - 54px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; min-height: 225px; box-sizing: border-box; background-color: #fff; border: 3px solid hsl(var(--mra-mint)); border-radius: 5px; /* The stroke is INSIDE in Figma, so the 3px border eats into these insets: content starts 28 from the card's outer edge (409 inside a card at 381), the body text box ends 14 from the right, and the avatar starts 22 down. */ padding: 19px 11px 19px 25px; } [data-theme='client'] .mra-review-head { display: flex; align-items: center; gap: 15px; /* avatar ends x=467, name starts x=482 */ } /* The mark is larger than the disc and clipped by it — Figma masks a 67x67 image inside a 58px circle at offset (-10, +3). */ [data-theme='client'] .mra-review-avatar { position: relative; display: block; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; /* Mint, not teal: Figma's teal Ellipse 4 carries `isMask: true` and clips the mark — the visible disc is the mint Ellipse 8 underneath it. */ background-color: hsl(var(--mra-mint)); overflow: hidden; } [data-theme='client'] .mra-review-avatar img { position: absolute; width: 115.5%; /* 67 / 58 */ height: 115.5%; left: -17.2%; /* -10 / 58 */ top: 5.2%; /* +3 / 58 */ object-fit: contain; } /* Not quite centred on the avatar: Figma runs the name+stars block 1922..1968 against an avatar of 1913..1971, i.e. 3px below true centre. */ [data-theme='client'] .mra-review-meta { position: relative; top: 3px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } [data-theme='client'] .mra-review-name { color: hsl(var(--mra-teal)); font-size: 15px; font-weight: 700; line-height: 20px; /* Figma 388:369/370/377 store lowercase characters but carry textCase: UPPER, so the design renders "CHRISTOPHER B.". ⚠️ `characters` is the STORED string; `style.textCase` is what is drawn. */ text-transform: uppercase; } [data-theme='client'] .mra-review-stars { display: flex; align-items: center; } [data-theme='client'] .mra-review-star { width: 23px; height: 23px; flex: 0 0 auto; } [data-theme='client'] .mra-review-star[data-filled='true'] { fill: hsl(var(--mra-orange)); } /* Empty stars keep the shape but drop back, so a 4-star review still reads as out-of-five. On white this is a shape cue rather than a text contrast one. */ [data-theme='client'] .mra-review-star[data-filled='false'] { fill: hsl(var(--mra-teal) / 0.18); } [data-theme='client'] .mra-review-text { color: hsl(var(--mra-teal)); font-size: 14px; font-weight: 400; line-height: 18px; margin: 16px 0 0; /* avatar bottom y=1971 -> text top y=1987 */ } /* Clamped so every card keeps the designed height; six lines is exactly the 107px text box Figma draws. Editors can turn this off per block. */ [data-theme='client'] .mra-review-text[data-truncate='true'] { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } /* ---- carousel arrows (Figma 388:347 / 388:350) ---- 38px teal discs with a mint chevron, centred exactly on the strip's edges. */ [data-theme='client'] .mra-reviews-arrow { position: absolute; /* Figma centres these at y=1989 on a strip running 1891..2116 — 43.6% down, not 50%. */ top: 43.6%; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border: none; border-radius: 50%; background-color: hsl(var(--mra-teal)); cursor: pointer; transition: background-color 160ms ease; } [data-theme='client'] .mra-reviews-arrow[data-dir='prev'] { left: 0; transform: translate(-50%, -50%); } [data-theme='client'] .mra-reviews-arrow[data-dir='next'] { right: 0; transform: translate(50%, -50%); } [data-theme='client'] .mra-reviews-arrow svg { width: 9px; height: 15px; stroke: hsl(var(--mra-mint)); } [data-theme='client'] .mra-reviews-arrow:is(:hover, :focus-visible) { background-color: hsl(var(--mra-teal-mid)); } /* ---- the two CTAs (Figma 389:1293) ---- BOTH are red in the design. The earlier build had the second one inherit the teal primary, which put a teal button on the teal band — its white text passed contrast while the button itself was invisible. */ [data-theme='client'] .mra-reviews-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; /* buttons end x=649.5, next starts x=669.5 */ margin-top: 30px; /* panel bottom 2147 -> buttons top 2177 */ } [data-theme='client'] .mra-reviews-cta { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding-inline: 21px; border: 2px solid hsl(var(--mra-btn-pink)); border-radius: 5px; background-color: hsl(var(--mra-red)); color: #fff; font-size: 18px; font-weight: 600; line-height: 23px; text-transform: uppercase; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; } /* Style C's documented hover: fill drops out, border holds, text goes red. */ [data-theme='client'] .mra-reviews-cta:is(:hover, :focus-visible) { background-color: #fff; color: hsl(var(--mra-red)); } /* ---- responsive (no mobile design exists; 12-col logic) ---- A card cannot shrink below its min-content width — the avatar plus the longest word of the reviewer name floors it at ~230px. Below the design width the company mark therefore has to move ABOVE the strip rather than sit beside it; leaving it in the row squeezed the strip to 595px and only 2.3 cards fitted where the design shows 3. */ @media (max-width: 1279px) { [data-theme='client'] .mra-reviews-panel { flex-direction: column; align-items: center; gap: 24px; padding: 28px 24px; } [data-theme='client'] .mra-reviews-stripwrap { width: 100%; } } @media (max-width: 1023px) { [data-theme='client'] .mra-review-card { flex-basis: calc((100% - 27px) / 2); } } @media (max-width: 639px) { [data-theme='client'] .mra-reviews-heading { font-size: 28px; line-height: 36px; } [data-theme='client'] .mra-review-card { flex-basis: 100%; } /* Below this width the discs would sit on top of the cards rather than beside them, so the strip is swipe-only. */ [data-theme='client'] .mra-reviews-arrow { display: none; } } /* ================================================================== 11 — JOIN THE TEAM (Figma 389:1312) It is a ROUNDED TEAL CARD inset in the page (1175x384, r=20), not the full-bleed teal band this was. Inside: a 502x274 photo with the mascot disc straddling its RIGHT edge, then a 501-wide copy column with a centred heading and a centred mint button. ================================================================== */ [data-theme='client'] .mra-join-team { position: relative; max-width: 1175px; margin-inline: auto; background-color: hsl(var(--mra-teal)); border-radius: 20px; padding-block: 48px; overflow: hidden; } [data-theme='client'] .mra-join-team :is(h2, h3, p, li) { color: #fff; } /* ================================================================== 14 — AWARDS & RECOGNITIONS (Figma 389:1205) Teal card, mint hairline border, mint heading. ================================================================== */ /* Figma 389:1205 is a 1174x230 frame: teal fill, 3px mint stroke, r=20. Internals measured from the frame's top edge — heading 37..77, logo row 103..182, so 37 top / 26 between / 48 bottom. */ /* --- 14 AWARDS: the panel + the footer-coloured ground it appears to sit on --- The block wrapper is the full-bleed GROUND; the inner `.brand-logos-block` is the panel. Figma has the footer's grey starting at 6091 while the panel spans 5982..6212 — i.e. the grey begins 109px down the panel and the panel's bottom 121px sits on it. ⚠️ This is deliberately an ILLUSION, not a real overlap. Pulling the footer up under the panel would look wrong on internal pages, which have no Awards section — the footer has to stay balanced there. So nothing moves: the ground is simply painted the footer's colour and runs into it seamlessly. */ [data-theme='client'] .mra-awards { position: relative; } [data-theme='client'] .mra-awards::before { content: ''; position: absolute; left: 0; right: 0; /* 107 = exactly the Schedule section's bottom edge (this block is pulled up 107px), so there is no sliver of page ground between the two. A flat fill is right now that the section above ends on this same colour. */ top: 107px; bottom: 0; background-color: hsl(var(--mra-footer-ground)); z-index: 0; } /* Only on pages that HAVE the Awards block — internal pages keep the template's bottom padding so their footer still breathes. ⚠️ This deliberately does NOT say `.mra-awards:last-child`. It used to, and that made the seam depend on nothing ever being appended inside

. Any injected trailing node — a review-overlay tool, a chat widget, a tag manager — breaks `:last-child`, the template's `pb-24` (96px) comes back, and 96px of the page gradient opens up between the Awards ground and the footer as a pale band. Matching on the block's PRESENCE is what we actually mean: the Awards block ends the page wherever it appears. */ [data-theme='client'] main > article:has(> .mra-awards) { padding-bottom: 0; } [data-theme='client'] .mra-awards .brand-logos-block { position: relative; z-index: 1; max-width: 1174px; margin-inline: auto; background-color: hsl(var(--mra-teal)); border: 3px solid hsl(var(--mra-mint)); border-radius: 20px; /* Figma's 37/48 are measured from the frame edge, which INCLUDES the 3px stroke, so the padding is 34/45 on top of the border. */ padding: 34px 0 45px; } /* The gap belongs to the heading's WRAPPER (`container mb-8 md:mb-10` = 40px), not the h2 — setting it on the h2 did nothing. Figma: heading bottom 77 -> logos 103 = 26. */ [data-theme='client'] .mra-awards .brand-logos-block > div:first-child { margin-bottom: 26px; } /* Two accreditation badges at their Figma sizes (BBB 197x79, HomeAdvisor 372x55) on one centred row with a 72px gutter. ⚠️ Do NOT set `display` on `[class*='grid']` here. The block renders TWO layouts — a `lg:hidden` mobile grid and a `hidden lg:flex` desktop row — and forcing display on the first defeats its `lg:hidden`, so BOTH render and every badge appears twice. Touch only the desktop row's gutter. */ [data-theme='client'] .mra-awards [class*='lg:flex'] > div { gap: 72px; } /* ⚠️ SCOPED TO THE DESKTOP ROW. The block also renders an `lg:hidden` mobile grid whose images carry `max-w-[160px]`; an unscoped `max-width: none` here let the 372px HomeAdvisor badge render at full size inside a 390px viewport and pushed 81px of horizontal overflow onto the PAGE. */ [data-theme='client'] .mra-awards [class*='lg:flex'] img { width: auto; max-width: none; object-fit: contain; } [data-theme='client'] .mra-awards [class*='lg:flex'] img[alt*='BBB' i] { height: 79px; } [data-theme='client'] .mra-awards [class*='lg:flex'] img[alt*='HomeAdvisor' i] { height: 55px; } [data-theme='client'] .mra-awards :is(h2, h3) { color: hsl(var(--mra-mint)); text-transform: uppercase; } /* ================================================================== 13 — TRUSTED SERVICE (hybrid CTA) (Figma 389:1325) Pale halftone ground; Awards sits directly beneath it. ================================================================== */ [data-theme='client'] .mra-trusted-cta { position: relative; overflow: hidden; } /* The halftone field moved onto the section's own background so the ::before pseudo is free to be the mint ring. Two background layers: dots over the white -> #DEEDEE gradient (Figma 388:542 + the 388:543 mask group). */ [data-theme='client'] .mra-trusted-cta > * { position: relative; z-index: 1; } /* ================================================================== 10 — BLOGS (Figma 389:1308) — teal-bordered cards, 375x399 on a 23px gap Card anatomy differs from the core archive card in three ways, all handled here: the date moves OUT of the header and onto the READ MORE baseline, the title is 600/20 rather than the theme's h3 scale, and READ MORE is plain red text rather than a button. ================================================================== */ /* The eyebrow ("blogs") sits ABOVE the heading in the design, but the core block renders `introContent` after it. Both are siblings in one container, so flex + order reverses them without touching the block — and the eyebrow stays CMS-editable as the intro's first paragraph. */ [data-theme='client'] .mra-blogs .container:has(> h2) { display: flex; flex-direction: column; } [data-theme='client'] .mra-blogs .container:has(> h2) > h2 { margin-bottom: 0; } [data-theme='client'] .mra-blogs .container:has(> h2) > .payload-richtext { order: -1; margin: 0 auto; max-width: none; text-align: center; } [data-theme='client'] .mra-blogs .container:has(> h2) > .payload-richtext p { color: hsl(var(--mra-teal)); font-size: 17px; font-weight: 400; line-height: 22px; text-transform: uppercase; margin: 0 0 5px; /* eyebrow ends y=3860, heading starts y=3865 */ } [data-theme='client'] .mra-blogs .grid { gap: 23px; /* cards at x=54 / 452 / 850, each 375 wide */ } [data-theme='client'] .mra-blogs article, [data-theme='client'] .mra-blogs [class*='rounded'] > article { border: 4px solid hsl(var(--mra-teal)); border-radius: 20px; overflow: hidden; background-color: #fff; } /* Figma masks the image to 375x221 at the top of the card — 1.697:1, not the core card's 16/9. */ [data-theme='client'] .mra-blogs article [class*='aspect-'] { aspect-ratio: 375 / 221; } /* Content box: 36px side gutters, 19 above the title, 31 below the last row. */ [data-theme='client'] .mra-blogs article > div:last-child { position: relative; padding: 19px 36px 31px; } [data-theme='client'] .mra-blogs article h3 { color: hsl(var(--mra-teal)); font-size: 20px; font-weight: 600; line-height: 26px; /* Card titles are the one heading in the design that is NOT uppercased. */ text-transform: none; margin: 0; } [data-theme='client'] .mra-blogs article h3 a { color: inherit; text-decoration: none; } [data-theme='client'] .mra-blogs article p { color: hsl(var(--mra-teal)); font-size: 12px; font-weight: 400; line-height: 16px; margin: 10px 0 0; display: -webkit-box; -webkit-line-clamp: 3; /* Figma text box is 47px tall = 3 lines at lh16 */ -webkit-box-orient: vertical; overflow: hidden; } /* READ MORE is red TEXT in the design, not a button — strip the core chrome rather than recolouring it, or the padding keeps the old button box. */ [data-theme='client'] .mra-blogs article button { background: none; border: none; padding: 0; height: auto; min-height: 0; color: hsl(var(--mra-red)); font-size: 20px; font-weight: 600; line-height: 26px; text-transform: uppercase; } /* On hover READ MORE takes ONLY an underline — no colour change, no pill. Client asked for this (2026-09-21). Core tags the button `bg-primary`, so the global Style B hover further down (`:is(a, button).bg-primary:hover`, specificity 0-3-1) was repainting it as a MINT pill with teal text: the resting rule above is 0-2-1 and only held until the pointer arrived. This selector is 0-3-2, so it holds the resting paint and adds the rule. Scoped to READ MORE itself, not the whole tile: the card is NOT one wrapper link, it is three separate s (image, title, read-more), so an `article:hover` rule would underline READ MORE while the pointer was over the thumbnail. The first selector matches the that wraps the button — no other link in the card contains one — and the second covers the button being hit directly. HOMEPAGE ONLY by construction — `.mra-blogs` is a `customClasses` value on the homepage block in homepageSeed.ts, so no other page's post list can match. */ [data-theme='client'] .mra-blogs article a:is(:hover, :focus-visible) button, [data-theme='client'] .mra-blogs article button:is(:hover, :focus-visible) { background-color: transparent; border-color: transparent; color: hsl(var(--mra-red)); text-decoration-line: underline; text-underline-offset: 3px; } [data-theme='client'] .mra-blogs article > div:last-child > div:last-child { margin: 19px 0 0; padding: 0; } /* The date shares a bottom edge with READ MORE (both end at card y=147 of the content box) but lives higher up the DOM, so it is lifted out of flow and pinned to that corner. Taking it out of flow is also what pulls the title to the top of the card, as designed. */ [data-theme='client'] .mra-blogs article time { position: absolute; right: 36px; bottom: 31px; margin: 0; color: hsl(var(--mra-teal)); font-size: 12px; font-weight: 400; line-height: 16px; } /* ---- "READ MORE BLOGS" (Figma 388:686: 209x44, teal on mint) ---- */ [data-theme='client'] .mra-blogs .container:not(:has(> h2)):not(:has(article)) { margin-top: 47px; /* cards end y=4357, button starts y=4404 */ } [data-theme='client'] .mra-blogs .container:not(:has(> h2)):not(:has(article)) a { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding-inline: 22px; /* 2px teal, NOT `border: none`. This is Style B (Figma 138:1291 / 138:1296): the Default variant has no stroke but the hover variant carries a 2px #017180 one. This selector is 0-7-3, far above the shared button rule's 0-2-1, so `border: none` silently won in BOTH states and the hover stroke could never appear. Teal-on-teal reads as "no stroke" at rest, which is what Default wants, and the box stays 44px because preflight sets border-box. */ border: 2px solid hsl(var(--mra-teal)); border-radius: 5px; background-color: hsl(var(--mra-teal)); color: hsl(var(--mra-mint)); font-size: 18px; font-weight: 600; line-height: 23px; text-transform: uppercase; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } [data-theme='client'] .mra-blogs .container:not(:has(> h2)):not(:has(article)) a:is(:hover, :focus-visible) { background-color: hsl(var(--mra-mint)); border-color: hsl(var(--mra-teal)); color: hsl(var(--mra-teal)); } /* ================================================================== 4 / 7 — ABOUT and FINANCING sit on the page ground; the token bag already gives them teal headings and teal body copy. Only the photo treatment is bespoke. ================================================================== */ /* Join the Team uses a plain photo at the design's exact 502x274 / r20. About does NOT get rounding — its asset has it baked in plus alpha that must not be clipped. */ [data-theme='client'] .mra-join-team .grid > *:first-child img { width: 502px; max-width: 100%; height: 274px; border-radius: 20px; object-fit: cover; } /* ================================================================== MRA — Phase 4, pass 2 corrections (verified against the running app) ================================================================== */ /* ---- 7 FINANCING (Figma 389:1300) ------------------------------------ The cta block paints an `absolute inset-0` overlay panel; at its default opacity that reads as a washed blue-grey band. The design has no band here at all — mascot left, teal heading and a red button directly on the page ground. Neutralise the overlay rather than recolour it. */ [data-theme='client'] .mra-financing [class*='absolute'][class*='inset-0'] { background-color: transparent !important; background-image: none !important; } [data-theme='client'] .mra-financing > div > div { background-color: transparent !important; } [data-theme='client'] .mra-financing :is(h2, h3) { color: hsl(var(--mra-teal)); } [data-theme='client'] .mra-financing p { color: hsl(var(--mra-teal)); } /* ---- 3 FEATURED SERVICES: clear the overlap --------------------------- The section is pulled up 90px into the hero, so the same amount has to be given back underneath or the pentagons' bottom points collide with the About heading. */ /* ================================================================== BUTTON SYSTEM — from the Figma component sets (138:1182 / 138:1291 / 138:1249), each of which ships a Default and a hover variant. A outline white bg / teal border+text -> teal bg / mint border+text B teal teal bg / mint text -> mint bg / teal border+text C red red bg / #FFB1B3 border/white -> white bg / same border / red Every state pair clears AA (mint-on-teal 4.65, white-on-red 4.75, teal-on-white 5.71). Shared geometry: 44px tall, 5px radius, 2px border, DM Sans 600 @18px. NOTE these are `` elements carrying Tailwind utilities (`bg-accent`, `bg-primary`), not `

Leave a Review