[data-theme='client'] { --background: 0 0% 100%; --foreground: 237 50% 23%; --primary: 347 79% 55%; --primary-foreground: 0 0% 100%; --secondary: 237 50% 23%; --secondary-foreground: 0 0% 100%; --accent: 33 99% 66%; --accent-foreground: 237 50% 23%; --card: 0 0% 100%; --card-foreground: 237 50% 23%; --popover: 0 0% 100%; --popover-foreground: 237 50% 23%; --muted: 0 0% 96%; --muted-foreground: 237 12% 42%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 88%; --input: 0 0% 92%; --ring: 347.1 79.1% 54.9%; --sho-pink: 347.1 79.1% 54.9%; --sho-pink-light: 346.8 100% 75.9%; --sho-pink-wash: 345.5 66.9% 51.4%; --sho-pink-deep: 346 65.5% 39.8%; --sho-navy: 236.9 50% 22.7%; --sho-periwinkle: 236.7 62.7% 60%; --sho-gold: 32.8 98.8% 66.3%; --sho-link: 198.9 100% 41%; --sho-ribbon-notch: 14px; --sho-ribbon-stroke: 3px; --font-heading: var(--font-montserrat), sans-serif; --font-body: var(--font-montserrat), sans-serif; --font-size-h1-px: 42; --font-size-h2-px: 40; --font-size-h3-px: 28; --font-size-h4-px: 22; --font-size-body-px: 18; --line-height-heading: 1.2; --line-height-body: 1.7; --font-weight-heading: 700; --radius: 0.375rem; --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)); } /* Baseline link colour for a dark footer. * * ⚠️ `:where()` IS THE POINT. Written flat as * [data-footer='client'] footer[data-footer-scheme='dark'] a * this weighs (0,2,2) — MORE than every brand rule further down the file, which * name a class and so top out at (0,2,1). That is why the SHO footer rendered a * white phone number, white nav links and white legal links even though each of * those rules already asked for `--sho-gold`: the colours were never missing, * they were being outranked by this one declaration. * * Wrapping the descendants in `:where()` drops this to (0,1,0), so it does what a * baseline should — apply when nothing more specific has an opinion, and lose the * moment a brand rule does. Do not unwrap it to "fix" a link colour; set the * colour on the element's own rule instead. * * Harmless if it stops matching at all: `footer[data-footer-scheme='dark']` above * sets the same colour on the container, and Tailwind's preflight gives anchors * `color: inherit`, so an unstyled footer link still comes out white. */ [data-footer='client'] :where(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; } /* ============================================== SHO BRAND STYLES — Shore Guys Heating & Air ============================================== */ /* ---------------------------------------------- RIBBON BUTTONS Every CTA in the SHO design is a "ribbon": a rectangle with an inward chevron notch cut into each end, outlined in a 3px contrasting brand color. Source of truth is the Figma button SVG (component sets 135:810/832/837/ 842/849), whose path is a 253x49 box with a 14px-deep notch at mid-height. WHY clip-path AND NOT the SVG itself: the notch depth is a FIXED 14px in the design, not a proportion. Stretching a 253x49 SVG to a wider button (or a taller one at mobile) would scale the notch and the stroke with it, so the angle would drift button to button. A px-based clip-path polygon keeps the notch identical at every size, which is what the design actually shows — the nav's 41px-tall buttons and the hero's 49px-tall button have the same notch geometry despite different widths. WHY TWO PSEUDO-ELEMENTS: clip-path clips a real CSS border away, so `border` cannot draw the 3px outline. Instead ::before paints the STROKE color at full size and ::after paints the FILL color inset by 3px, both clipped to the same polygon — the 3px of ::before left showing around ::after *is* the outline. The inset reads as ~2.6px along the diagonals (3px x cos 29.7deg) rather than a true 3px perpendicular — visually indistinguishable, and worth it for geometry that holds at any size. WHY `isolation: isolate` IS LOAD-BEARING: both pseudos use negative z-index so the button's label (often a bare text node that cannot be z-indexed) still paints on top. Negative-z children escape to the nearest ancestor stacking context and would paint *behind* this button entirely; `isolation: isolate` makes the button its own stacking context so they stay put — above its own (transparent) background, below its in-flow text. Do not remove it, and do not give .sho-ribbon a background-color: that would cover both pseudos. ---------------------------------------------- */ [data-theme='client'] .sho-ribbon { --sho-ribbon-fill: var(--sho-navy); --sho-ribbon-edge: var(--sho-periwinkle); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; /* Notch depth + breathing room, so label text never crosses the chevron. */ padding: 0 calc(var(--sho-ribbon-notch) + 18px); min-height: 41px; border: 0; border-radius: 0; background-color: transparent; font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; color: hsl(0 0% 100%); transition: transform 150ms ease; } [data-theme='client'] .sho-ribbon::before, [data-theme='client'] .sho-ribbon::after { content: ''; position: absolute; inset: 0; /* The hover swap animates here, on the layers that actually paint the colors — transitioning the custom properties themselves would not work, since unregistered custom properties are not interpolatable. */ transition: background-color 150ms ease; } /* Outline layer — the outer silhouette. Verified against the Figma path: the boundary lands within 0.5px of the SVG at every scanline. */ [data-theme='client'] .sho-ribbon::before { z-index: -2; background-color: hsl(var(--sho-ribbon-edge)); clip-path: polygon( 0 0, 100% 0, calc(100% - var(--sho-ribbon-notch)) 50%, 100% 100%, 0 100%, var(--sho-ribbon-notch) 50% ); } /* Fill layer — a TRUE PARALLEL INSET of the outline, not the same polygon in a smaller box. * * The obvious approach (`inset: 3px` + the identical polygon) is wrong and looks * it. Shrinking the box by 3px while the notch stays a fixed 14px changes the * diagonal's slope, so the inner edge is not parallel to the outer one: the * stroke measured only ~1.3px perpendicular near the corners and swelled to * ~2.6px at the notch tip, against a true 3px along the top and bottom. That * uneven band is what makes the chevron tips look off. * * A parallel offset needs the vertices recomputed. Offsetting the diagonal * inward by `d` and intersecting it with the offset top edge (y = d) gives, for * box height H and notch n, with L = sqrt(H² + 4n²): * * inset-x = d(L + 2n) / H (horizontal inset at the corners) * tip-x = n + dL / H (notch tip, measured from the outer edge) * * L carries a square root, so these cannot be expressed in `calc()` portably — * hence the precomputed constants below. They depend on the element HEIGHT, so * every ribbon size needs its own pair; a ribbon whose label wraps to two lines * would grow past its declared height and drift. The labels are single-line * uppercase with `min-height` set, so that does not arise in practice. * * Values below: d = 3, n = 14, H = 41. L = 49.6488 * inset-x = 3(49.6488 + 28)/41 = 5.682 * tip-x = 14 + 3(49.6488)/41 = 17.633 */ [data-theme='client'] .sho-ribbon { --sho-ribbon-inset-x: 5.682px; --sho-ribbon-tip-x: 17.633px; } /* The mobile/tablet CTA bar used to collapse on scroll (`--collapsed` set max-height to 0 and faded it out, with `inert` applied in ShoHeader.tsx) to reclaim ~105px of sticky header height. REVERSED on client instruction 2026-09-08: the phone number and Request Service now stay put at every scroll position, so the collapse class, its transition and the `inert` toggle are all gone rather than left dormant. Nothing keyed off the class, so removing the markup hook and the rules together avoids leaving a latent `max-height`/`overflow: hidden` clipper on the bar. The hamburger still lives in the logo row BELOW this bar, which is why the collapse target was inverted in the first place — that reasoning is now moot, but keep it in mind before pointing any future collapse at the logo row: doing so leaves a scrolled page with no way to open the nav. */ /* Phone-sized ribbon for the sticky mobile bar (client directive 2026-07-29: "a bit smaller on mobile when stacked"). Scoped to that bar so no other ribbon on the page changes. ⚠️ A NEW HEIGHT REQUIRES ITS OWN CONSTANT PAIR — the fill must be a true parallel offset of the stroke silhouette, and `L` carries a square root so it is not expressible in portable calc(). Shrinking the box while leaving the constants alone is exactly the bug that made the chevron tips look lopsided. d = 3, n = 14, H = 36. L = sqrt(36² + 4·14²) = 45.6070 inset-x = 3(45.6070 + 28)/36 = 6.134 tip-x = 14 + 3(45.6070)/36 = 17.801 (The same formula reproduces the documented 41px and 49px pairs exactly.) */ @media (max-width: 767px) { [data-header='client'] .sho-header-mobilebar .sho-ribbon { --sho-ribbon-inset-x: 6.134px; --sho-ribbon-tip-x: 17.801px; /* `height` as well as `min-height`: the underlying shadcn Button ships `h-10` (40px), which beats a smaller `min-height` and left the ribbon at 40px — i.e. barely smaller than the 41px base. An explicit height is what makes the box genuinely 36px, which is also what the constants above assume. */ min-height: 36px; height: 36px; padding: 0 calc(var(--sho-ribbon-notch) + 14px); font-size: 15px; } } [data-theme='client'] .sho-ribbon::after { z-index: -1; background-color: hsl(var(--sho-ribbon-fill)); clip-path: polygon( var(--sho-ribbon-inset-x) var(--sho-ribbon-stroke), calc(100% - var(--sho-ribbon-inset-x)) var(--sho-ribbon-stroke), calc(100% - var(--sho-ribbon-tip-x)) 50%, calc(100% - var(--sho-ribbon-inset-x)) calc(100% - var(--sho-ribbon-stroke)), var(--sho-ribbon-inset-x) calc(100% - var(--sho-ribbon-stroke)), var(--sho-ribbon-tip-x) 50% ); } /* Variants — fill/stroke pairs taken straight from the Figma components. */ [data-theme='client'] .sho-ribbon--pink { --sho-ribbon-fill: var(--sho-pink); --sho-ribbon-edge: var(--sho-pink-light); } [data-theme='client'] .sho-ribbon--navy { --sho-ribbon-fill: var(--sho-navy); --sho-ribbon-edge: var(--sho-periwinkle); } /* Standalone use of the navy pair inverted. Note this is the same appearance as `--navy`'s hover state, so avoid putting it next to a `--navy` button where the resting style would read as "already hovered". */ [data-theme='client'] .sho-ribbon--invert { --sho-ribbon-fill: var(--sho-periwinkle); --sho-ribbon-edge: var(--sho-navy); } /* ---------------------------------------------- HOVER — Figma component sets 135:832 (pink) and 135:810 (navy), "Property 1=Variant2" in each. The rule in both sets is identical: the fill and the 3px stroke TRADE PLACES. Nothing else changes — the label stays white, the geometry is untouched. Because each variant already expresses itself as a fill/edge token pair, the hover state is literally those two values swapped, which is why this is six declarations rather than a second set of shape rules. ---------------------------------------------- */ [data-theme='client'] .sho-ribbon--pink:hover, [data-theme='client'] .sho-ribbon--pink:focus-visible { --sho-ribbon-fill: var(--sho-pink-light); --sho-ribbon-edge: var(--sho-pink); } [data-theme='client'] .sho-ribbon--navy:hover, [data-theme='client'] .sho-ribbon--navy:focus-visible { --sho-ribbon-fill: var(--sho-periwinkle); --sho-ribbon-edge: var(--sho-navy); } /* Inverted starts where `--navy` hovers to, so it swaps the other way. */ [data-theme='client'] .sho-ribbon--invert:hover, [data-theme='client'] .sho-ribbon--invert:focus-visible { --sho-ribbon-fill: var(--sho-navy); --sho-ribbon-edge: var(--sho-periwinkle); } /* Larger ribbon used in hero / section CTAs (49px tall, 20px label). The parallel-inset constants are height-dependent, so recompute them for H = 49 (d = 3, n = 14): L = sqrt(49² + 4·14²) = 56.4358 inset-x = 3(56.4358 + 28)/49 = 5.169 tip-x = 14 + 3(56.4358)/49 = 17.455 */ [data-theme='client'] .sho-ribbon--lg { min-height: 49px; font-size: 20px; --sho-ribbon-inset-x: 5.169px; --sho-ribbon-tip-x: 17.455px; } [data-theme='client'] .sho-ribbon:active { transform: translateY(1px); } /* The ribbon shape lives on the pseudos, so the element itself is unclipped and takes a normal outline (a rectangle around the ribbon — clearly visible against both the white nav and the dark hero). Kept in ADDITION to the fill/stroke swap above: the swap alone is a color-only cue, which is not a sufficient focus indicator on its own. */ [data-theme='client'] .sho-ribbon:focus-visible { outline: 2px solid hsl(var(--sho-navy)); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { [data-theme='client'] .sho-ribbon, [data-theme='client'] .sho-ribbon::before, [data-theme='client'] .sho-ribbon::after { transition: none; } [data-theme='client'] .sho-ribbon:active { transform: none; } } /* ---------------------------------------------- SECTION CONTAINER Figma lays the content sections out 1174px wide inside a 1280px frame (a 53px gutter each side). The shared Tailwind `container` maxes out at 1200px minus 2rem of padding = 1136px of content, so SHO sections use their own width rule to hit the design exactly. `min()` keeps the 24px gutters below 1222px without a media query. ---------------------------------------------- */ [data-theme='client'] .sho-section { width: min(1174px, 100% - 48px); margin-inline: auto; } /* Every core block's `container` rides that same lane BY DEFAULT. Core wraps block content in Tailwind's `container` (1264px centred, 16px padding each side). SHO's band is 1174 with no padding, so any block without its own rule here landed 45px wide of the lane — which is how Cities Served and Services Offered came to sit left of the rich text on /service-area and /hvac-services. Making the band the default fixes those two and every block used later (Archive, Specials, Loan Calculator, the energy calculator) in one place, instead of one rule per block type as pages get built. ⚠️ THE SPECIFICITY IS LOAD-BEARING. `:where()` keeps the block-type hop at zero, so this weighs (0,2,0) — above bare `.container` (0,1,0) but BELOW every deliberate per-block rule further down this file. That is what lets the gold CTA band stay full-bleed: `[data-block-type='cta'] > div` is (0,2,1) and still wins. Raise this selector's weight and that band shrinks to 1174 — the exact regression the CTA notes below warn about. Add block-specific rules AFTER this one; do not strengthen this one. ⚠️ NO `max-width: none` HERE, also deliberate. `width` is what puts a block on the lane; leaving `max-width` alone means a block carrying its own narrower cap (`max-w-3xl`, `max-w-[890px]`) keeps it and just centres inside the lane. Adding `max-width: none` would inflate every one of those to the full 1174. `formBlock` opts out entirely: core caps it at `lg:max-w-[48rem]` and the forms sit alone on their pages (/contact, /careers, /request-service …), so there is no neighbour to line up with and nothing to gain from touching them. ---------------------------------------------- */ [data-theme='client'] :where([data-block-type]:not([data-block-type='formBlock'])) .container { width: min(1174px, 100% - 48px); margin-inline: auto; padding-inline: 0; } /* ---------------------------------------------- EYEBROW + SECTION HEADINGS Repeated across Featured Services / Reviews / Blogs: a small pink letterspaced uppercase kicker above a 40px navy uppercase H2. ---------------------------------------------- */ [data-theme='client'] .sho-eyebrow { font-family: var(--font-heading); font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--sho-pink)); margin: 0; } [data-theme='client'] .sho-section-heading { display: flex; flex-direction: column; gap: 6px; } [data-theme='client'] .sho-section-heading--center { align-items: center; text-align: center; } /* The section H2. Sized here rather than via --font-size-h2-px because the theme's global h2 (45px) is also used by core blocks on inner pages; the SHO homepage sections are specifically 40px. */ [data-theme='client'] .sho-h2 { font-family: var(--font-heading); font-weight: 700; font-size: 40px; line-height: 1.15; text-transform: uppercase; color: hsl(var(--sho-navy)); margin: 0; } @media (max-width: 767px) { [data-theme='client'] .sho-h2 { font-size: 30px; } } /* ============================================== FEATURED SERVICES (src/client/blocks/ShoFeaturedServices) Figma node 283:3118 — four 265x239 gold cards, 38px apart, each a pink brand icon over a navy uppercase label. ============================================== */ [data-theme='client'] .sho-featured { display: flex; flex-direction: column; gap: 25px; } [data-theme='client'] .sho-featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 38px; list-style: none; margin: 0; padding: 0; } [data-theme='client'] .sho-featured-card { /* `relative` is required by CardLinkOverlay's absolute inset-0 anchor. */ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; /* No flex `gap`: the icon→label spacing lives on .sho-featured-iconwrap's margin-bottom so it can collapse with a transition on hover. Figma's four cards are hand-placed (gaps of 11 / 12 / 11 / 18px, each block up to 7px off centre); 11px is the dominant value and lands every card within ~1-7px. */ gap: 0; min-height: 239px; padding: 24px 20px; border-radius: 20px; background-color: hsl(var(--sho-gold)); } /* No fixed height: each exported SVG carries its Figma intrinsic size (102x101, 101x101, 118x98, 126x106) and the designer balanced them individually — forcing a uniform height grew IAQ 3% and shrank the duct icon 5%. `max-width` only guards narrow viewports. */ [data-theme='client'] .sho-featured-icon { display: block; max-width: 100%; height: auto; } /* Collapsible slot around the icon. `max-height` is animatable where `display` is not, and clipping via the wrapper keeps the SVG at its true size instead of squashing it as the space closes. 112px clears the tallest icon (106px). */ [data-theme='client'] .sho-featured-iconwrap { display: block; overflow: hidden; max-height: 112px; margin-bottom: 11px; opacity: 1; transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1), margin-bottom 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease-out; } [data-theme='client'] .sho-featured-title { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 1.2; text-transform: uppercase; text-align: center; color: hsl(var(--sho-navy)); /* Honour newlines authored in the title textarea (see config.ts) while still wrapping long words normally. */ white-space: pre-line; } /* ---------------------------------------------- Featured Services HOVER (Figma component sets 174:505 / 601 / 651 / 684, "Property 1=Variant2") On hover the card does NOT just recolour — the ICON IS REPLACED by a description and the title moves to the top. Because the card centres its content, hiding the icon and revealing the ~120px description lands the title near the top on its own, matching the design's y=25-38 without per-card offsets. `:focus-within` is included so keyboard users reach the copy — but note it only fires when the card actually has a link (the CardLinkOverlay anchor is the sole focusable child). A link-less card's description stays hover-only, so treat it as supplementary rather than essential copy. The swap is discrete, not animated: the two states have different heights, so crossfading them would shift the layout mid-transition. ---------------------------------------------- */ /* The copy reveal. * * Uses an animated GRID TRACK (0fr → 1fr) rather than max-height. max-height has * to animate toward a fixed cap: pick 160px for 90px of copy and the reveal * visually finishes in the first half of the duration then sits idle, and any * author who writes past the cap gets clipped. A 0fr→1fr track interpolates to * the copy's own height, so it eases correctly at any length and never clips. * * The opacity/transform are DELAYED so the copy arrives after the title has * finished travelling up — that stagger is what the Figma prototype shows, and it * reads as two distinct movements instead of one blur. */ [data-theme='client'] .sho-featured-descwrap { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1), margin-top 300ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme='client'] .sho-featured-desc { /* `min-height: 0` + `overflow: hidden` are required for a grid item to be collapsible below its content height. */ min-height: 0; overflow: hidden; margin: 0; opacity: 0; transform: translateY(6px); font-family: var(--font-body); font-weight: 400; font-size: 12px; /* 120px box over 8 lines in the design. */ line-height: 1.25; text-align: center; color: hsl(var(--sho-navy)); transition: opacity 220ms ease-out 120ms, transform 260ms cubic-bezier(0.4, 0, 0.2, 1) 120ms; } /* The title needs no transform of its own: collapsing the icon slot above it is what carries it upward, on the icon's easing — so the two elements move on separate timings without hard-coding per-card offsets. */ [data-theme='client'] .sho-featured-card--has-desc:hover .sho-featured-iconwrap, [data-theme='client'] .sho-featured-card--has-desc:focus-within .sho-featured-iconwrap { max-height: 0; margin-bottom: 0; opacity: 0; } [data-theme='client'] .sho-featured-card--has-desc:hover .sho-featured-descwrap, [data-theme='client'] .sho-featured-card--has-desc:focus-within .sho-featured-descwrap { grid-template-rows: 1fr; margin-top: 11px; } [data-theme='client'] .sho-featured-card--has-desc:hover .sho-featured-desc, [data-theme='client'] .sho-featured-card--has-desc:focus-within .sho-featured-desc { opacity: 1; transform: translateY(0); } /* A card carrying a description is an affordance — show it. */ [data-theme='client'] .sho-featured-card--has-desc:has(a) { cursor: pointer; } @media (prefers-reduced-motion: reduce) { [data-theme='client'] .sho-featured-iconwrap, [data-theme='client'] .sho-featured-descwrap, [data-theme='client'] .sho-featured-desc { transition: none; } [data-theme='client'] .sho-featured-card--has-desc:hover .sho-featured-desc, [data-theme='client'] .sho-featured-card--has-desc:focus-within .sho-featured-desc { transform: none; } } @media (max-width: 1023px) { [data-theme='client'] .sho-featured-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } /* Collapse the hero→Featured Services gap on tablet/mobile. `blockSettings.marginTop` is written as an INLINE style by BlockWrapper, so `!important` is the only way to reach it — there is no lower-specificity hook. The desktop value (144px = Figma's 64 plus the client's extra 80) exists solely to clear the hero van, which overhangs the hero by 41px on desktop. Below 1024 the van is IN FLOW beneath the copy and ends exactly on the hero's bottom edge — measured 1064/1064 at 390px and 1060/1060 at 820px — so the whole 144px is dead space and reads as a broken section break. */ [data-theme='client'] [data-block-type='shoFeaturedServices'] { margin-top: 48px !important; } } @media (max-width: 539px) { [data-theme='client'] .sho-featured-grid { grid-template-columns: 1fr; } } /* ============================================== ABOUT (src/client/blocks/ShoAbout) Figma node 300:84 — full-bleed shoreline photo, pink→gold wash, 752px copy column, 2x2 trust badges. Full-bleed: the section escapes .sho-section. ============================================== */ [data-theme='client'] .sho-about { position: relative; isolation: isolate; min-height: 511px; display: flex; align-items: center; padding: 64px 58px; overflow: hidden; } /* Figma draws the photo at 1423.1x800.49 offset (-72.27, -274.3) inside the 1280x511 window — a slightly tighter zoom than `cover` (111.18% of container width) anchored low, so the beach and lighthouse fill the frame instead of the sky. Expressed as percentages so it survives a resize: `background-position` percentages align the N% point of the image with the N% point of the box, i.e. offset = (container - image) x pct, which back-solves to 50.5% / 94.8%. Below 1024px the section reflows and taller, so plain `cover` reads better. */ [data-theme='client'] .sho-about-photo { position: absolute; inset: 0; z-index: -2; background-size: 111.18% auto; background-position: 50.5% 94.8%; background-repeat: no-repeat; } @media (max-width: 1023px) { [data-theme='client'] .sho-about-photo { background-size: cover; background-position: center 60%; } } /* The gradient AND the blur Figma applies to the photo behind it. Figma reports `-90deg` (≡ CSS `to left`), so stop 0% is the RIGHT edge: transparent gold on the right, solid pink on the left, behind the copy. */ [data-theme='client'] .sho-about-wash { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient( to left, hsl(var(--sho-gold) / 0) 0%, hsl(var(--sho-gold) / 0.32) 33%, hsl(var(--sho-gold) / 0.8) 66%, hsl(var(--sho-pink)) 99% ); backdrop-filter: blur(4.5px); -webkit-backdrop-filter: blur(4.5px); } [data-theme='client'] .sho-about-inner { width: 100%; max-width: 752px; display: flex; flex-direction: column; gap: 48px; } [data-theme='client'] .sho-about-copy { display: flex; flex-direction: column; gap: 8px; } [data-theme='client'] .sho-about-heading { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 40px; line-height: 1.15; text-transform: uppercase; color: hsl(0 0% 100%); } [data-theme='client'] .sho-about-body { margin: 0; max-width: 679px; font-family: var(--font-body); font-weight: 400; font-size: 23px; line-height: 1.35; color: hsl(0 0% 100%); } /* Figma's badge grid is 739px wide with column 2 starting at x=355 — the two columns are NOT equal, so they're declared explicitly rather than as 1fr 1fr. */ [data-theme='client'] .sho-about-features { display: grid; grid-template-columns: 355px 384px; row-gap: 22px; list-style: none; margin: 0; padding: 0; } [data-theme='client'] .sho-about-feature { display: flex; align-items: center; /* Icon is 58.5px and the label starts at x=85 → 26.5px of space. */ gap: 26.5px; } [data-theme='client'] .sho-about-feature-icon { display: block; flex-shrink: 0; width: 58.5px; height: 58.5px; } [data-theme='client'] .sho-about-feature-label { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.2; text-transform: uppercase; color: hsl(0 0% 100%); white-space: pre-line; } @media (max-width: 1023px) { [data-theme='client'] .sho-about { padding: 48px 24px; } [data-theme='client'] .sho-about-features { grid-template-columns: 1fr; row-gap: 18px; } } @media (max-width: 767px) { [data-theme='client'] .sho-about-heading { font-size: 30px; } [data-theme='client'] .sho-about-body { font-size: 18px; } } /* ============================================== REVIEWS (src/client/blocks/ShoReviews) Figma node 287:3126 — three 369x366 gold quote cards, 33px apart, with the quote glyphs deliberately overhanging the card on opposite corners. ============================================== */ [data-theme='client'] .sho-reviews { display: flex; flex-direction: column; align-items: center; gap: 48px; } [data-theme='client'] .sho-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 33px; width: 100%; list-style: none; margin: 0; /* Room for the glyphs that hang past the top and bottom of each card, so they are not clipped and do not collide with neighbouring sections. */ padding: 17px 0 20px; } [data-theme='client'] .sho-review-card { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 366px; /* 19px above the avatar; 49px below the name (366 - 293 - 24 in the design). */ padding: 19px 19px 49px; border-radius: 20px; background-color: hsl(var(--sho-gold)); } [data-theme='client'] .sho-review-quote { position: absolute; width: 80px; height: 59px; } [data-theme='client'] .sho-review-quote--open { top: -17px; left: 26px; } [data-theme='client'] .sho-review-quote--close { bottom: -20px; right: 32px; } /* Pink disc with the SHO mark clipped by it — the mark is taller than the disc (72x114 inside 81x81 in Figma) and is meant to bleed off the bottom. */ [data-theme='client'] .sho-review-avatar { position: relative; flex-shrink: 0; width: 81px; height: 81px; border-radius: 50%; background-color: hsl(var(--sho-pink)); overflow: hidden; } [data-theme='client'] .sho-review-avatar img { position: absolute; left: 12px; top: 5px; width: 72px; height: 114px; object-fit: cover; } [data-theme='client'] .sho-review-stars { display: block; flex-shrink: 0; margin-top: 12px; width: 198px; height: 40px; } [data-theme='client'] .sho-review-text { margin-top: 4px; /* ⚠️ MUST be max-width, not width. A fixed `width` counts toward a grid item's min-content contribution, so `width: 331px` here made the card's min-content 331 + 38px padding = 369px and the card refused to shrink below that — overflowing the 342px track at 390px viewports by 3px and giving the whole page a horizontal scrollbar. `max-width` resolves to the same 331px wherever there is room, but lets the card shrink when there isn't. */ width: 100%; max-width: 331px; } [data-theme='client'] .sho-review-text p { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.35; text-align: center; color: hsl(var(--sho-navy)); } /* `margin-top: auto` pins the name to the card bottom, which lands it on the design's y=310 for the shorter quotes and keeps all three aligned when the grid stretches cards to a common height. */ [data-theme='client'] .sho-review-name { margin: auto 0 0; padding-top: 12px; font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1.2; text-transform: uppercase; text-align: center; color: hsl(var(--sho-navy)); } [data-theme='client'] .sho-reviews-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px; } @media (max-width: 1023px) { [data-theme='client'] .sho-reviews-grid { grid-template-columns: 1fr; max-width: 420px; gap: 40px; } } /* ============================================== SPECIALS (src/client/blocks/ShoSpecials) Figma node 300:73 — full-bleed beach photo, pink→gold wash, two 365x199 navy coupons in a left-aligned 745px column. ============================================== */ [data-theme='client'] .sho-specials { position: relative; isolation: isolate; min-height: 487px; display: flex; align-items: center; padding: 31px 54px; overflow: hidden; } /* Figma draws the photo 735x490 at (628, 0) inside the 1280x487 window — NOT cover-scaled. Same back-solve as the About photo: size = 735/1280 = 57.42% of the container width, and position % = offset / (container - image), which for x is 628/(1280-735) = 115.2% (over 100% is legal and correct here) and 0% for y. `cover`/`center` put the rollercoaster centre-frame and lost the boat. */ [data-theme='client'] .sho-specials-photo { position: absolute; inset: 0; z-index: -2; background-size: 57.42% auto; background-position: 115.2% 0%; background-repeat: no-repeat; } @media (max-width: 1023px) { [data-theme='client'] .sho-specials-photo { background-size: cover; background-position: 70% center; } } /* Figma `270deg` ≡ CSS `to left`: stop 0% is the RIGHT edge. Transparent gold on the right, solid pink by 49% (so the whole left half is flat pink). */ [data-theme='client'] .sho-specials-wash { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient( to left, hsl(var(--sho-gold) / 0) 10%, hsl(var(--sho-gold) / 0.59) 35%, hsl(var(--sho-pink)) 49% ); } [data-theme='client'] .sho-specials-inner { width: 100%; max-width: 745px; display: flex; flex-direction: column; align-items: center; gap: 22px; } /* The eyebrow/heading pair is white here, not pink-on-navy. */ [data-theme='client'] .sho-specials-heading .sho-eyebrow, [data-theme='client'] .sho-specials-heading .sho-h2 { color: hsl(0 0% 100%); } [data-theme='client'] .sho-specials-heading { gap: 1px; max-width: 435px; } [data-theme='client'] .sho-coupons { display: grid; grid-template-columns: repeat(2, 365px); /* 745 total across two 365px coupons leaves 15px between them. */ gap: 15px; list-style: none; margin: 0; padding: 0; } /* Each coupon is one flattened image exported from Figma at 365x199 (@3x), so there is no card chrome to rebuild here — just size it and keep the aspect. */ [data-theme='client'] .sho-coupon { position: relative; margin: 0; } [data-theme='client'] .sho-coupon-image { display: block; width: 100%; height: auto; border-radius: 20px; } [data-theme='client'] .sho-coupon--link { transition: transform 150ms ease; } [data-theme='client'] .sho-coupon--link:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { [data-theme='client'] .sho-coupon--link, [data-theme='client'] .sho-coupon--link:hover { transition: none; transform: none; } } [data-theme='client'] .sho-specials-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; } @media (max-width: 900px) { [data-theme='client'] .sho-specials { padding: 40px 24px; } [data-theme='client'] .sho-coupons { grid-template-columns: 365px; justify-content: center; gap: 20px; } } @media (max-width: 420px) { /* The coupon is a fixed-aspect image, so let it shrink below 365px rather than overflow the viewport. */ [data-theme='client'] .sho-coupons { grid-template-columns: minmax(0, 365px); } } /* ============================================== HEADER — SHO (see src/client/components/ShoHeader.tsx) ============================================== */ /* Figma drop shadow: 0 4px 4px rgba(0,0,0,0.25). */ [data-header='client'] header { box-shadow: 0 4px 4px 0 hsl(0 0% 0% / 0.25); } /* ⚠️ THE LEADING RIBBON SLIDES UNDER THE LOGO BELOW THE DESIGN WIDTH (client report, 2026-09-08). The top row is right-anchored (`justify-end` + `pr-[53px]`) and every ribbon is `whitespace-nowrap`, so the row's width is fixed and its LEFT edge is `viewport - 1009`. The logo's right edge is a constant x=241. The leftmost ribbon therefore crosses under the logo below a 1250px viewport — 226px under it at 1024, which is what the client saw. Shedding the leftmost ribbon is the whole fix: measured against production's row, the next one (Join the Club) would not collide until 955px, and the header hands over to the mobile bar at 1024, so no second hide can ever be reached. Nothing reflows either — the row is right-anchored, so the remaining ribbons do not move when this one goes (verified: Join the Club stays at x=310 at 1024 before and after). Breakpoint is 1279 rather than the exact 1249 collision edge: it matches the 1280 boundary the rest of this theme uses, keeps the design-width layout byte-identical (4 ribbons, 30px gap), and no common device width sits in the 1250-1279 gap it gives up. `:first-child` is deliberate and NOT positional fragility — the defect is inherently "whichever ribbon is leftmost", so the selector should track position rather than identity. Editors can reorder the CTAs freely. ⚠️ CAPACITY: this row fits 3 CTAs + the phone at 1280. A 4th CTA added in the CMS grows the row ~295px and puts the leftmost one under the logo at the DESIGN width, where no media query saves it. */ @media (max-width: 1279px) { [data-header='client'] .sho-header-ctas > *:first-child { display: none; } } /* Nav strip gradient. Figma has `270deg, navy 0%, pink 64%, pink/0 100%`, which in CSS terms (270deg = "to left") means navy on the RIGHT and a transparent fade on the LEFT — so as `to right` the stops invert. ⚠️ THE ALPHA RAMP IS ANCHORED IN PIXELS, NOT PERCENT (client report, 2026-09-08). It used to be `pink/0 25%` -> `pink 43%`, tuned so that the fade reached saturated pink by ~x=550 at 1280, just left of the first nav item (HVAC sat at x=546 when this was written). Two things it depended on both moved: 1. The nav is RIGHT-anchored at a fixed width, so its left edge is `viewport - 777` — it slides left as the viewport narrows, while a percentage stop slides RIGHT. At 1024 the nav starts at x=247 but the ramp did not begin until 25% = x=256, so the leading items sat on the header's own white with WHITE type: HVAC measured 1.00:1 — invisible, not merely low-contrast. PRODUCTS measured 1.87:1. 2. The internal team edited the nav items, which moved HVAC from x=546 to x=503 at 1280 and pushed it back into the ramp (3.94:1). Tuning stops to one nav's measured width is not a property this theme can keep. Anchoring to the LOGO instead removes both couplings: the logo is `absolute left-[74px]` with a fixed height, so its right edge is x=241 at EVERY viewport (verified 1024 -> 1920). 240 is the largest round anchor that clears the logo and still lands left of the nav's leftmost position, x=247 at the 1024 breakpoint. The 120px fade then falls entirely behind the logo (which spans 74..241), so no hard edge is ever visible. Every nav item now sits on saturated pink or the pink->navy blend: worst item 4.22:1 at 1024/1280, 6.63:1 at 1920. 4.22:1 is the ceiling for white on --sho-pink and matches the ribbons the client accepted as a brand choice. The pink->navy sweep deliberately stays in PERCENT: it spans the full strip and has no fixed landmark to anchor to, so it should keep scaling. */ [data-header='client'] .sho-header-navstrip { background-image: linear-gradient( to right, hsl(var(--sho-pink) / 0) 0px, hsl(var(--sho-pink) / 0) 120px, hsl(var(--sho-pink)) 240px, hsl(var(--sho-pink)) 43%, hsl(var(--sho-navy)) 96%, hsl(var(--sho-navy)) 100% ); } /* Nav links — 17px semibold uppercase white, per Figma. ⚠️ SCOPED TO `ul > li >` DIRECT CHILDREN ON PURPOSE. The submenu panel (`NavigationMenuViewport`) renders INSIDE this same `nav` with `bg-white text-gray-900`, so a bare `nav a` selector also matched every dropdown link and — at (0,3,0) vs Tailwind's (0,1,0) — forced them white on a white panel, i.e. invisible. Restricting to direct children keeps the white on the top-level row only and lets panel links keep their own colour (set explicitly below). */ /* ⚠️ THE `> div >` BRANCH IS NOT REDUNDANT. Flyout nav items (Products) render `` around a `

`, so Radix renders that div INSTEAD of an

— the row is `ul > div > button`, not `ul > li > button`. Matching only `li` left Products on the component defaults (text-sm/font-medium/text-foreground), i.e. 14px navy against 17px white siblings. */ [data-header='client'] .sho-header-navstrip nav ul > li > a, [data-header='client'] .sho-header-navstrip nav ul > li > button.nav-trigger, [data-header='client'] .sho-header-navstrip nav ul > div > button.nav-trigger { font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.2; text-transform: uppercase; color: hsl(0 0% 100%); } /* --- Nav geometry: land the link row exactly on Figma (x=546..1204) --- Three things in the shared HeaderNav markup fight that, and none are reachable from the CMS nav settings: 1. HeaderNav's inner

is `justify-center` and its list wrapper is a content-width flex item, so the row CENTERS in the available space instead of ending at the right inset. 2. NavItem ships `px-4`, padding the CMS `itemPadding` override does not clear — that inflates each label by 32px (HVAC measured 82px vs 51px). 3. `space-x-1` adds a 4px sibling margin ON TOP of the list's `gap`, so the CMS itemSpacing of 20px rendered as 24px. With all three neutralized the row measures 658px wide ending at x=1204, matching the design. */ [data-header='client'] .sho-header-navstrip nav > nav { justify-content: flex-end; } /* Triggers are included DELIBERATELY. This reset used to match `a` only, so the three items with submenus kept NavItem's `px-4` while the three without sat at 0 — the row read as 56/40/20/36/36px of white between labels instead of an even 20px. Padding here is spacing, not hit area: the gap below supplies the separation for every item equally. */ [data-header='client'] .sho-header-navstrip nav ul > li > a, [data-header='client'] .sho-header-navstrip nav ul > li > button.nav-trigger, [data-header='client'] .sho-header-navstrip nav ul > div > button.nav-trigger { padding-left: 0; padding-right: 0; } /* --- Submenu vertical offset --- Both submenu shapes ship a 6px gap below the trigger row: the shared `NavigationMenuViewport` carries `mt-1.5` (mega menus) and `FlyoutNavItem`'s positioned wrapper carries `pt-1.5` (Products). That floated the panels 3px BELOW the header's bottom edge (header bottom 122, panel top 125), reading as a detached card rather than a menu hanging off the bar. Zeroing both lands the panel top at 119 — a 3px overlap onto the strip's bottom edge, so the panel reads as attached to the header. Kept as one rule per shape so the two stay in step; they are separate elements in core. */ [data-header='client'] .sho-header-navstrip nav .mt-1\.5 { margin-top: 0; } [data-header='client'] .sho-header-navstrip nav .pt-1\.5 { padding-top: 0; } /* Submenu panel links. The panel is white, so these are navy rather than the strip's white, and they keep the padding the top-level row strips out — a dropdown needs its hit area. Brand-styled deliberately instead of relying on core's `text-gray-900` fallback. */ [data-header='client'] .sho-header-navstrip nav ul ul a, [data-header='client'] .sho-header-navstrip nav [data-state='open'] ul a { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; color: hsl(var(--sho-navy)); } [data-header='client'] .sho-header-navstrip nav ul ul a:hover, [data-header='client'] .sho-header-navstrip nav [data-state='open'] ul a:hover { color: hsl(var(--sho-pink)); } /* `!important` is required, not lazy: Tailwind's `.space-x-1 > :not([hidden]) ~ :not([hidden])` scores (0,3,0) — each :not([hidden]) contributes an attribute selector — which outranks this rule's (0,2,4). `* + *` rather than `li + li`: the flyout item is a

, so `li + li` matched neither it nor the item after it, leaving Tailwind's 4px on both — Products sat 24px from its neighbours where the others sat 20px. */ [data-header='client'] .sho-header-navstrip nav ul > * + * { margin-left: 0 !important; margin-inline-start: 0 !important; } /* ⚠️ SPACING FLOOR — do not delete. Because the two rules above strip BOTH of the shared markup's spacing mechanisms (NavItem's `px-4` and `space-x-1`), this row's separation comes solely from the list's `gap`, which is driven by the Header global's `menuItemSettings.itemSpacing`. Production sets that to 0, emitting Tailwind's `gap-0`, and the nav rendered as "PRODUCTSSPECIALS" — items touching with zero gap. Only the plain `` items collided; submenu triggers are `

Alex G.