[data-theme='client'] { --background: 48 31% 94%; --foreground: 0 0% 8%; --primary: 0 81% 59%; --primary-foreground: 48 31% 94%; --secondary: 48 31% 94%; --secondary-foreground: 0 0% 8%; --accent: 0 0% 8%; --accent-foreground: 48 31% 94%; --card: 48 31% 94%; --card-foreground: 0 0% 8%; --popover: 0 0% 100%; --popover-foreground: 0 0% 8%; --muted: 48 20% 90%; --muted-foreground: 0 5% 13%; --destructive: 0 81% 59%; --destructive-foreground: 48 31% 94%; --border: 0 0% 82%; --input: 0 0% 88%; --ring: 0 81% 59%; --sep-gold: 39 81% 58%; --sep-link: 196.1 66.2% 44.1%; --sep-charcoal: 0 5% 13%; --sep-card: 48 33% 96%; --font-heading: "garage-gothic", var(--font-oswald), sans-serif; --font-body: var(--font-kumbh-sans), sans-serif; --font-script: "Damion", cursive; --font-size-h1-px: 64; --font-size-h2-px: 44; --font-size-h3-px: 32; --font-size-h4-px: 24; --font-size-body-px: 16; --line-height-heading: 1.05; --line-height-body: 1.5; --font-weight-heading: 700; --radius: 0.1875rem; --font-weight-body: 500; } /** * 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. ============================================== */ /* ---------------------------------------------- SEP HEADER — translucent dark bar (Figma #178:332) 67px bar: rgba(20,20,20,0.58) + blur, off-white 1px bottom border. Left nav | centered reverse logo | right utility (phone + outline CTA). ---------------------------------------------- */ [data-header='client'] header.sep-header { position: sticky; top: 0; z-index: 50; background-color: hsl(var(--foreground) / 0.58); backdrop-filter: blur(5.5px); -webkit-backdrop-filter: blur(5.5px); border-bottom: 1px solid hsl(var(--secondary)); } [data-header='client'] header.sep-header .sep-header-inner { /* minmax(0,1fr) lets the side columns shrink so the logo stays centered and the utility never overflows off-screen when the nav is wide. */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; min-height: 67px; max-width: 1280px; margin-inline: auto; padding-inline: 30px; } /* Left nav */ [data-header='client'] header.sep-header .sep-header-nav { justify-self: start; min-width: 0; } /* Top-level row only (`nav > div > ul`). The submenu panels nest their lists deeper — flexing those would lay the dropdown out as one wide row. */ [data-header='client'] header.sep-header .sep-header-nav nav, [data-header='client'] header.sep-header .sep-header-nav nav > div > ul { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; } /* `:not([class*='submenu-item'])` keeps the reverse/off-white bar treatment off the dropdown links — those sit on the cream panel and stay dark (below). */ [data-header='client'] header.sep-header .sep-header-nav a:not([class*='submenu-item']), [data-header='client'] header.sep-header .sep-header-nav button.nav-trigger { font-family: var(--font-heading); font-weight: 700; /* Sized to keep the nav clear of the centered logo at 1280+. */ font-size: 15px; line-height: 22px; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; /* Strip the shared NavItem's horizontal padding so the row is only as wide as the labels + gap (otherwise it runs under the centered logo). */ padding-inline: 0 !important; height: auto !important; color: hsl(var(--secondary)); background-color: transparent !important; text-decoration: none !important; } [data-header='client'] header.sep-header .sep-header-nav a:not([class*='submenu-item']):hover, [data-header='client'] header.sep-header .sep-header-nav button.nav-trigger:hover, [data-header='client'] header.sep-header .sep-header-nav button.nav-trigger[data-state='open'] { color: hsl(var(--sep-gold)); background-color: transparent !important; } /* Dropdown panel — cream card, SEP-black uppercase links, gold on hover */ [data-header='client'] header.sep-header .sep-header-nav a[class*='submenu-item'] { font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--foreground)); background-color: transparent !important; text-decoration: none !important; } [data-header='client'] header.sep-header .sep-header-nav a[class*='submenu-item']:hover, [data-header='client'] header.sep-header .sep-header-nav a[class*='submenu-item']:focus-visible { color: hsl(var(--primary)); background-color: transparent !important; } /* Centered logo */ [data-header='client'] header.sep-header .sep-header-logo { justify-self: center; display: inline-flex; align-items: center; } /* Cap logo to ~Figma width (279×41) so it doesn't crowd the nav */ [data-header='client'] header.sep-header .sep-header-logo img { height: 42px; width: auto; max-width: 300px; } /* Right utility: phone + CTA */ [data-header='client'] header.sep-header .sep-header-utility { justify-self: end; display: flex; align-items: center; gap: 16px; min-width: 0; } [data-header='client'] header.sep-header .sep-header-phone { display: inline-flex; align-items: center; /* Figma #178:331: 21.91px glyph at x=0, number starts at x=30.98 → ~9px gap. */ gap: 9px; font-family: var(--font-heading); font-weight: 700; font-size: 24px; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--secondary)); white-space: nowrap; } /* Phone glyph sits left of the number, off-white, inheriting the link colour so it picks up the hover state with the text (Figma #178:322, 21.91×21.92). */ [data-header='client'] header.sep-header .sep-header-phone-icon { width: 22px; height: 22px; flex-shrink: 0; } [data-header='client'] header.sep-header .sep-header-phone:hover { color: hsl(var(--sep-gold)); } [data-header='client'] header.sep-header .sep-header-cta, [data-header='client'] header.sep-header .sep-header-cta:hover { font-family: var(--font-heading); font-weight: 700; font-size: 17px; letter-spacing: 0.11em; text-transform: uppercase; border-radius: 3px; padding: 8px 18px; height: auto; white-space: nowrap; } [data-header='client'] header.sep-header .sep-header-cta { color: hsl(var(--secondary)) !important; background-color: transparent !important; border: 1px solid hsl(var(--secondary)) !important; } [data-header='client'] header.sep-header .sep-header-cta:hover { color: hsl(var(--foreground)) !important; background-color: hsl(var(--secondary)) !important; } /* Mobile + tablet (below lg): two stacked rows — phone + Request Service utility row on top, then logo + hamburger (Figma mobile nav #181:499). Display toggled by Tailwind `flex lg:hidden` in the variant. */ [data-header='client'] header.sep-header .sep-header-mobile { flex-direction: column; gap: 12px; padding: 12px 20px; min-height: 0; } /* Top utility row: phone + CTA, centered and easily tappable */ [data-header='client'] header.sep-header .sep-header-mobile-utility { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding-bottom: 12px; border-bottom: 1px solid hsl(var(--secondary) / 0.25); } /* Bottom bar: logo (left) + hamburger (right) */ [data-header='client'] header.sep-header .sep-header-mobile-bar { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* Hamburger toggle. Core ships it as a ghost Button inheriting `text-foreground` (SEP black), which lands on the charcoal header bar at 1.13:1 — effectively invisible. Match the rest of the header chrome: off-white at rest, gold on hover/focus, and drop the ghost `hover:bg-card`. The Lucide icon is `stroke="currentColor"`, so colouring the button carries the strokes. */ [data-header='client'] header.sep-header .sep-header-mobile-bar button { color: hsl(var(--secondary)); background-color: transparent !important; } /* Hover is pointer-only: on touch, `:hover` sticks after a tap and would leave the icon recoloured until the next tap elsewhere. */ @media (hover: hover) { [data-header='client'] header.sep-header .sep-header-mobile-bar button:hover { color: hsl(var(--primary)); background-color: transparent !important; } } /* Focus gets a ring, NOT a colour swap. Radix restores focus to the trigger when the drawer closes, so a recoloured icon stays recoloured after every close — a ring reads as "focused" without looking like a permanent state change. `box-shadow: none` drops core's blue shadcn ring in favour of the brand one. */ [data-header='client'] header.sep-header .sep-header-mobile-bar button:focus-visible { color: hsl(var(--secondary)); outline: 2px solid hsl(var(--primary)); outline-offset: 2px; box-shadow: none !important; background-color: transparent !important; } /* Trim the phone + CTA to fit a phone width (desktop utility sizes are larger) */ [data-header='client'] header.sep-header .sep-header-mobile-utility .sep-header-phone { font-size: 19px; letter-spacing: 0.08em; gap: 7px; } [data-header='client'] header.sep-header .sep-header-mobile-utility .sep-header-phone-icon { width: 17px; height: 17px; } [data-header='client'] header.sep-header .sep-header-mobile-utility .sep-header-cta { font-size: 13px; letter-spacing: 0.09em; padding: 7px 14px; } /* ---------------------------------------------- SEP HERO — off-white, centered script eyebrow + big red headline + black-outline CTA, worker photo below (Figma #178:337) ---------------------------------------------- */ [data-theme='client'] .sep-hero { position: relative; background-color: hsl(var(--background)); overflow: hidden; } [data-theme='client'] .sep-hero-content { max-width: 1240px; margin-inline: auto; padding: 46px 20px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; } /* Seed authors h1 (headline) then p (eyebrow); reverse so script sits on top. */ [data-theme='client'] .sep-hero-copy { display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; width: 100%; } [data-theme='client'] .sep-hero-copy h1 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; letter-spacing: 0.01em; font-size: clamp(26px, 5.9vw, 76px); color: hsl(var(--primary)); /* One line on a subtle off-white highlight band (Figma rect #178:67) */ white-space: nowrap; /* hug the text (was stretching full-width, breaking the layout) + center */ width: fit-content; max-width: 100%; margin-inline: auto; /* OFFSET highlight (Figma): box behind lower ~2/3, caps poke out top */ background: linear-gradient( to bottom, transparent 0 34%, hsl(0 0% 100% / 0.5) 34% 100% ); border-radius: 3px; padding: 0 clamp(14px, 2vw, 30px) 8px; } [data-theme='client'] .sep-hero-copy p { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(24px, 3.1vw, 39px); line-height: 1.1; color: hsl(var(--sep-charcoal)); } @media (max-width: 680px) { [data-theme='client'] .sep-hero-copy h1 { white-space: normal; } } /* Request Service — black outline (Figma A/CTA-Blk) */ [data-theme='client'] .sep-hero-cta-row { display: flex; gap: 16px; justify-content: center; list-style: none; padding: 0; margin: 0; } [data-theme='client'] .sep-hero-cta-row a { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; color: hsl(var(--foreground)) !important; background-color: transparent !important; border: 1px solid hsl(var(--foreground)) !important; border-radius: 3px; padding: 9px 20px; } [data-theme='client'] .sep-hero-cta-row a:hover { background-color: hsl(var(--foreground)) !important; color: hsl(var(--secondary)) !important; } /* Hero imagery — trucks photo full-bleed at the bottom of the hero */ [data-theme='client'] .sep-hero-media { width: 100%; margin-top: 0; } [data-theme='client'] .sep-hero-media .sep-hero-picture { display: block; width: 100%; } [data-theme='client'] .sep-hero-img { width: 100%; height: clamp(320px, 38vw, 470px); object-fit: cover; object-position: center 42%; display: block; } /* ---------------------------------------------- SEP FOOTER — off-white, 3 columns + legal bar (Figma #181:461) ---------------------------------------------- */ [data-footer='client'] footer.sep-footer { padding-top: 40px; } [data-footer='client'] footer.sep-footer .sep-footer-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 60px; padding-bottom: 30px; } /* Left: phone + address */ [data-footer='client'] footer.sep-footer .sep-footer-contact { display: flex; flex-direction: column; align-items: center; gap: 10px; } [data-footer='client'] footer.sep-footer .sep-footer-phone { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 22px; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--foreground)); } [data-footer='client'] footer.sep-footer .sep-footer-phone-icon { color: hsl(var(--sep-gold)); width: 18px; height: 18px; } [data-footer='client'] footer.sep-footer .sep-footer-address { font-family: var(--font-body); font-style: normal; font-size: 13px; line-height: 20px; text-align: center; color: hsl(var(--foreground)); } [data-footer='client'] footer.sep-footer .sep-footer-hours { font-family: var(--font-body); font-size: 13px; line-height: 20px; text-align: center; color: hsl(var(--foreground)); margin-top: 4px; } /* Center: logo + nav */ [data-footer='client'] footer.sep-footer .sep-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 22px; } [data-footer='client'] footer.sep-footer .sep-footer-logo-img { width: 340px; max-width: 100%; height: auto; display: block; } [data-footer='client'] footer.sep-footer .sep-footer-nav { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; } [data-footer='client'] footer.sep-footer .sep-footer-nav-link { font-family: var(--font-heading); font-weight: 700; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--foreground)); text-decoration: none; } [data-footer='client'] footer.sep-footer .sep-footer-nav-link:hover { color: hsl(var(--primary)); } /* Right: leave review + rating */ [data-footer='client'] footer.sep-footer .sep-footer-reviews { display: flex; flex-direction: column; align-items: center; gap: 14px; justify-self: end; } /* Stars + review count on top, Leave Review button below (Figma). DOM ships the button first, so reorder here. */ [data-footer='client'] footer.sep-footer .sep-footer-rating { order: 1; } [data-footer='client'] footer.sep-footer .sep-footer-review-btn { order: 2; } [data-footer='client'] footer.sep-footer .sep-footer-review-btn { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 14px; letter-spacing: 0.09em; text-transform: uppercase; color: hsl(var(--foreground)) !important; background-color: transparent !important; border: 1px solid hsl(var(--foreground)) !important; border-radius: 3px; padding: 8px 18px; /* Never wrap into two lines — a wrapped button would collide with the stars below it in the reviews column. */ white-space: nowrap; } [data-footer='client'] footer.sep-footer .sep-footer-review-btn:hover { background-color: hsl(var(--foreground)) !important; color: hsl(var(--secondary)) !important; } [data-footer='client'] footer.sep-footer .sep-footer-rating { display: flex; flex-direction: column; align-items: center; gap: 4px; } /* Footer rating stars use the same Figma star as the review blocks — they were the odd set out, still core's plain FA glyph at 18px with a 2px gap. `StarRow` (src/Footer/sections/StarRow.tsx) always renders 5 FILLED stars regardless of rating, so unlike the review cards there is no empty-star class to distinguish; all five paint gold. */ [data-footer='client'] footer.sep-footer [aria-label*='stars' i] { gap: 6px; } [data-footer='client'] footer.sep-footer .sep-footer-star { width: 20px; height: 20px; color: transparent !important; background-color: hsl(var(--sep-gold)); -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } [data-footer='client'] footer.sep-footer .sep-footer-rating-text { font-family: var(--font-body); font-size: 14px; color: hsl(var(--foreground)); text-decoration: none; } /* Bottom legal bar → solid gold band with dark text (Figma) */ [data-footer='client'] footer.sep-footer .sep-footer-legal-bar { background-color: hsl(var(--sep-gold)); padding: 9px 0; margin-top: 8px; } [data-footer='client'] footer.sep-footer .sep-footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-body); font-size: 12px; color: hsl(var(--foreground)); } [data-footer='client'] footer.sep-footer .sep-footer-legal-link { color: hsl(var(--foreground)); text-decoration: none; } [data-footer='client'] footer.sep-footer .sep-footer-legal-link:hover { color: hsl(var(--primary)); } [data-footer='client'] footer.sep-footer .sep-footer-sep { color: hsl(var(--foreground) / 0.4); margin: 0 4px; } /* Stack to one centered column below 1100px. The 3-col `1fr auto 1fr` grid needs the middle nav (~465px) + both side columns to fit; under ~1100px the reviews (right) track collapses and the Leave Review button gets squeezed under the stars. Stacking earlier keeps every width clean. */ @media (max-width: 1100px) { [data-footer='client'] footer.sep-footer .sep-footer-main { grid-template-columns: 1fr; gap: 32px; text-align: center; } [data-footer='client'] footer.sep-footer .sep-footer-reviews { justify-self: center; } } /* ---------------------------------------------- FEATURED SERVICES — left-aligned cards, red uppercase title, red-outline circle icon, red accent line, outline "learn more" (Figma "A/FS-2" #38:194) ---------------------------------------------- */ /* Card: icon+title top row, red-line + description below (Figma A/FS-2 #178:403). Grid: [icon | title] / [description spanning, red left rule]. No button. */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 16px; align-items: center; align-content: start; text-align: left; max-width: none; border-radius: 3px; padding: 30px 30px 32px; /* The card's surface is painted by ::before, NOT by this element's own background, so the "learn more" bar can be parked UNDERNEATH it. A negative z-index cannot do this job: the card creates no stacking context, so a z-index:-1 child escapes to the section and hides behind its bg-accent instead of behind the card. */ position: relative; isolation: isolate; background-color: transparent; } [data-theme='client'] [data-block-type='featuredItems'] .grid > div::before { content: ''; position: absolute; inset: 0; z-index: 1; background-color: hsl(var(--sep-card)); border-radius: 3px; } /* Card content rides above the surface; the button (below) stays under it. */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div > :not(a) { position: relative; z-index: 2; } /* Icon → red-outline circle, top-left (shrink the 240px placeholder ring) */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div > div:first-child { grid-column: 1; grid-row: 1; height: 62px; width: 62px; } /* SVG icon carries its own red-outline circle + glyph — no added ring, fill it */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div > div:first-child > div { border: none; background-color: transparent; overflow: visible; } [data-theme='client'] [data-block-type='featuredItems'] .grid > div > div:first-child img { height: 100%; width: 100%; object-fit: contain; } /* Title → red Garage Gothic, right of the icon */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div h2 { grid-column: 2; grid-row: 1; text-align: left; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 26px; line-height: 1.0; color: hsl(var(--primary)) !important; } /* Description → full width below, red vertical rule on the left */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div p { grid-column: 1 / -1; grid-row: 2; text-align: left; border-left: 2px solid hsl(var(--primary)); padding-left: 18px; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: hsl(var(--foreground)); } /* "Learn more" button — Figma component set A/FS-2 #38:195 has TWO variants: the default parks the gold bar BEHIND the card (button y=208 inside a 264-tall card, covered by the white panel) and the hover variant moves it to y=264, i.e. 56px lower — it slides out from underneath the card's bottom edge. An earlier pass read the default variant as "no button" and hid the anchor outright; it was never absent, just concealed. Rest: parked at the card's bottom edge, under the card surface painted by ::before. Hover/focus: translateY(100%) slides it clear of the card. */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div { position: relative; } [data-theme='client'] [data-block-type='featuredItems'] .grid > div a { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 0 0 3px 3px; background-color: hsl(var(--sep-gold)) !important; color: hsl(var(--foreground)) !important; font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 22px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none !important; border: 0 !important; transform: translateY(0); transition: transform 260ms ease; } /* Figma insets a 1px off-white outline 348x38 inside the 363x56 gold bar. */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div a::before { content: ''; position: absolute; inset: 9px 8px; border: 1px solid hsl(var(--secondary)); border-radius: 3px; pointer-events: none; } [data-theme='client'] [data-block-type='featuredItems'] .grid > div:hover a, [data-theme='client'] [data-block-type='featuredItems'] .grid > div:focus-within a { transform: translateY(100%); } /* Icon: the hover variant scales the ring 70 -> 84.69 (1.21x) and rotates the glyph ~15deg. Ring and glyph are one SVG here, so the whole badge takes both. */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div > div:first-child { transition: transform 260ms ease; } [data-theme='client'] [data-block-type='featuredItems'] .grid > div:hover > div:first-child, [data-theme='client'] [data-block-type='featuredItems'] .grid > div:focus-within > div:first-child { transform: rotate(15deg) scale(1.21); } @media (prefers-reduced-motion: reduce) { [data-theme='client'] [data-block-type='featuredItems'] .grid > div a, [data-theme='client'] [data-block-type='featuredItems'] .grid > div > div:first-child { transition: none; } } /* ---------------------------------------------- SECTION HEADINGS + BANDS ---------------------------------------------- */ /* Light-section CTAs (Read Reviews, Leave Review, Explore Blog) → black outline, matching the hero's Request Service (Figma A/CTA-Blk) */ [data-theme='client'] :is(#sep-reviews, #sep-blog) a.inline-flex { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 3px; color: hsl(var(--foreground)) !important; background-color: transparent !important; border: 1px solid hsl(var(--foreground)) !important; } [data-theme='client'] :is(#sep-reviews, #sep-blog) a.inline-flex:hover { color: hsl(var(--secondary)) !important; background-color: hsl(var(--foreground)) !important; } /* Light-bg section headings → red Garage Gothic (About, Reviews, Blog) */ [data-theme='client'] #sep-about h2, [data-theme='client'] #sep-reviews h2, [data-theme='client'] #sep-blog h2 { color: hsl(var(--primary)) !important; font-family: var(--font-heading); font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; } /* Blog sits on the cream page bg (the core

is white) so the white highlight box on the heading is visible, matching Figma. Convert the block's my-16 margins to padding so the cream fills the whole section (no white gaps at the top/bottom). */ [data-theme='client'] #sep-blog { background-color: hsl(var(--background)); margin-block: 0 !important; padding-block: 60px; } /* Blog (Figma #181:433) — "The Blog" Damion eyebrow above the red uppercase heading, which sits on a white OFFSET highlight box (caps poke out the top). The eyebrow is positioned absolutely ABOVE the box so the box wraps only the heading text, not the eyebrow. */ [data-theme='client'] #sep-blog h2 { position: relative; display: block; width: fit-content; margin: 44px auto 0; background: linear-gradient( to bottom, transparent 0 34%, hsl(0 0% 100%) 34% 100% ); border-radius: 3px; padding: 0 22px 5px; } [data-theme='client'] #sep-blog h2::before { content: 'The Blog'; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); font-family: var(--font-script); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.55em; line-height: 1.1; color: hsl(var(--sep-charcoal)); white-space: nowrap; } /* Cards → dark full-image fill with overlaid off-white text on black bars */ [data-theme='client'] #sep-blog article { position: relative; min-height: 300px; border: none; border-radius: 3px; overflow: hidden; } [data-theme='client'] #sep-blog article > a.block { position: absolute; inset: 0; z-index: 0; } [data-theme='client'] #sep-blog article > a.block > div { aspect-ratio: auto !important; height: 100%; } [data-theme='client'] #sep-blog article > a.block::after { content: ''; position: absolute; inset: 0; z-index: 1; /* Figma A/Blog #30:156 builds the card as a solid SEP Black base with the photo at 18% opacity on top (same treatment as the reviews background), so the photo reads at 18%, not 42%. We keep the photo at full strength and darken with an overlay instead, so the matching alpha is 1 - 0.18 = 0.82. */ background-color: hsl(var(--foreground) / 0.82); } [data-theme='client'] #sep-blog article > div.p-4 { position: relative; z-index: 2; height: 100%; justify-content: flex-start; padding: 30px 28px; } /* hide date + read-more button (Figma cards show title + excerpt only) */ [data-theme='client'] #sep-blog article time, [data-theme='client'] #sep-blog article > div.p-4 > *:last-child:not(.flex-grow) { display: none; } /* title → off-white uppercase on black bars */ [data-theme='client'] #sep-blog article h3 { margin-bottom: 14px; } [data-theme='client'] #sep-blog article h3 a { display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; background-color: hsl(var(--foreground)); color: hsl(var(--secondary)); font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 24px; line-height: 1.5; padding: 2px 7px; } [data-theme='client'] #sep-blog article .mt-2 p { color: hsl(var(--secondary)); font-family: var(--font-body); font-size: 15px; line-height: 1.5; /* Excerpts run to different lengths; Figma gives every card a 3-line block (#30:153 is 66px at a 22px line-height). Clamp so the cards stay level. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* Red accent line down the LEFT of the excerpt copy (Figma A/Blog). It used to `flex-grow: 1` so the line ran to the card bottom, which was right while the excerpt was unclamped. Now the excerpt is clamped to 3 lines, so growing left the line overhanging the copy by 37-73px — and by a DIFFERENT amount per card, since the titles wrap to different line counts. Hugging the copy makes the line exactly as tall as the 3 lines it marks, and identical across cards. */ [data-theme='client'] #sep-blog article .flex-grow { display: flex; flex-direction: column; } [data-theme='client'] #sep-blog article .mt-2 { flex-grow: 0; margin-top: 14px; border-left: 2px solid hsl(var(--primary)); padding-left: 18px; } /* About 1 — gold Damion "About Us" script eyebrow above the red headline; no button (Figma #178:401 has none). */ [data-theme='client'] #sep-about h2::before { content: 'About Us'; display: block; font-family: var(--font-script); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.6em; line-height: 1.1; color: hsl(var(--secondary)); margin-bottom: 2px; } [data-theme='client'] #sep-about a { display: none; } /* Dark background → off-white body copy */ [data-theme='client'] #sep-about p, [data-theme='client'] #sep-about li { color: hsl(var(--secondary)); } /* Dark space below About-1 for the red band to overlap into (paired with #sep-local's negative margin-top so the Reviews section stays put). */ [data-theme='client'] #sep-about { padding-bottom: 150px; } /* Reviews (Figma #178:394) — heading on highlight box; cream cards with gold stars, dark quote, gold underline + right-aligned gold name (no title/date) */ [data-theme='client'] #sep-reviews { position: relative; /* Top padding clears the red band's bottom overlap (band's negative margin-bottom pulls this section up under it), THEN adds the gap Figma wants below the band. The band's bottom lands 120px into this section at every width, so padding-top = 120 + that gap. Mobile (Figma #181:463): band ends y=2659, heading y=2695 -> 36px gap => 156px. Bottom: last CTA ends ~3245 in a section ending 3360 => 115px. */ padding-top: 156px; padding-bottom: 115px; margin-top: 0 !important; margin-bottom: 0 !important; /* Solid A/OffWhite base; the photo (18% opacity) sits on top = Figma exact */ background-color: hsl(var(--background)); } /* Desktop (Figma #178:394): section 772 tall, content starts y=166 and the band ends y=1795 (85px into the section) -> 81px gap => 120 + 81 = 201px. Content block totals 497 (47 heading + 19 + 48 copy + 40 + 262 cards + 43 + 38 buttons), so the bottom band is 772 - 166 - 497 = 109px. */ @media (min-width: 1024px) { [data-theme='client'] #sep-reviews { padding-top: 201px; padding-bottom: 109px; } } /* Flow straight into the Service Area below — no white gap */ [data-theme='client'] #sep-service-area { margin-top: 0 !important; } [data-theme='client'] #sep-reviews h2 { display: block; width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; line-height: 1; /* OFFSET highlight (Figma): box behind the lower ~2/3 of the text so the caps poke out the top. Gradient = transparent top ~34%, box color below. */ background: linear-gradient( to bottom, transparent 0 34%, hsl(0 0% 100% / 0.6) 34% 100% ); border-radius: 3px; padding: 0 22px 4px; } /* Flattened bridge/marina bg (effects baked into the asset). Rendered inline on the wrapper by BlockWrapper at 100% opacity; desktop crop comes from the seed media id. On <1024px swap to the portrait crop so the framing fits a tall phone viewport. */ @media (max-width: 1023px) { [data-theme='client'] #sep-reviews { background-image: url('https://jp7irlsdg5tenid7.public.blob.vercel-storage.com/Review-BG%20Mobile.jpg') !important; background-position: center top !important; } } [data-theme='client'] #sep-reviews article { background-color: hsl(var(--sep-card)); border: none; border-radius: 3px; } /* Hide the review title + date — Figma cards show stars, quote, name only */ [data-theme='client'] #sep-reviews article .prose, [data-theme='client'] #sep-reviews article .p-4 > p:first-of-type { display: none; } /* Gold stars (brand gold, not the default yellow) */ [data-theme='client'] #sep-reviews article svg { color: hsl(var(--sep-gold)) !important; } /* Stars — the Figma star (#178:107) is a custom faceted shape, not FA's fa-star-sharp. Core renders the FA icon and we cannot change that markup from a client repo, so the glyph is masked out: the FA path is made transparent and the element paints brand gold through a mask of the Figma star. Per-star (not one flat 5-star image) so a non-5 rating still renders correctly. Figma pitch is 26.74 across a 20.51 star => ~6px gap. */ [data-theme='client'] [data-block-type='reviewsBlock'] [aria-label*='stars' i] { gap: 6px; } [data-theme='client'] #sep-reviews article [aria-label*='stars' i] svg, [data-theme='client'] [data-block-type='reviewsBlock'] [aria-label*='stars' i] svg { /* One size everywhere: the homepage cards were 20px but the /reviews list carries core's w-[30px] h-[30px]. */ width: 20px; height: 20px; /* transparent so the FA glyph itself never paints — the shape comes entirely from the mask + background. Needs the #sep-reviews selector too: the older `#sep-reviews article svg` colour rule carries an id and would otherwise win. */ color: transparent !important; -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Core renders all 5 icons and marks the state by class: filled stars are text-yellow-400, empty ones text-gray-400 with a hollow glyph. Colour them separately or a 3-star review would render as 5 solid gold stars. */ [data-theme='client'] #sep-reviews article [aria-label*='stars' i] svg.text-yellow-400, [data-theme='client'] [data-block-type='reviewsBlock'] [aria-label*='stars' i] svg.text-yellow-400 { background-color: hsl(var(--sep-gold)); } [data-theme='client'] #sep-reviews article [aria-label*='stars' i] svg.text-gray-400, [data-theme='client'] [data-block-type='reviewsBlock'] [aria-label*='stars' i] svg.text-gray-400 { background-color: hsl(var(--sep-gold) / 0.28); } /* Homepage review copy is A/Body-Small (Kumbh Sans 13/20) — deliberately a step down from the 16px body copy (Figma #178:106). Homepage only: the internal /reviews list keeps its own scale. */ [data-theme='client'] #sep-reviews article p.line-clamp-3 { font-size: 13px; line-height: 20px; } /* Quote → dark SEP text */ [data-theme='client'] #sep-reviews article p.line-clamp-3 { color: hsl(var(--foreground)) !important; -webkit-line-clamp: 6; } /* H2 — the internal-page design labels this explicitly (Figma #181:1124): GarageGothic Bold 32/36, 0.05em, UPPERCASE, BrightRed. Deliberately a bare `h2` selector at low specificity (0,1,1): every bespoke section heading on the homepage is id-scoped and keeps its own size/colour, and the two Damion script headings (#sep-service-area, #sep-brands) keep `text-transform: none` for the same reason — verified zero homepage headings change. */ [data-theme='client'] h2 { font-size: 32px; line-height: 36px; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--primary)); } /* H3 — same internal-page spec sheet as H2 (Figma #181:1138): GarageGothic Bold 24/22, 0.16em, UPPERCASE, SEP Black. Restores the step down from H2 (32px red), which the two shared before this. Same bare-selector approach as h2 so the homepage's bespoke h3s (blog card titles etc.) keep their own rules. */ [data-theme='client'] h3 { font-size: 24px; line-height: 22px; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(var(--foreground)); } /* Footer needs a top edge — it is the same off-white as the page and was running straight into it with `border-top: 0`. The footer container in the design carries its own stroke: 1px A/Charcoal (Figma #181:1333, fills A/OffWhite + strokes A/Charcoal 1px). NOT the 2px gold used for the internal page's section dividers (#181:1088 / #181:1136) — that was the wrong reference. */ [data-footer='client'] footer.sep-footer { border-top: 1px solid hsl(var(--sep-charcoal)); } /* Inline text hyperlinks are blue (#2693BB), not brand red. Tailwind Typography drives prose link colour through --tw-prose-links, so setting that variable is the whole fix — no specificity fight with the zero-specificity `.prose :where(a)` rule, and buttons are unaffected because they are not prose links. Deliberately scoped to prose: the inner-page hero's phone number (`.hero-cta-content h2 a`, 32px) is red hero styling, not a body hyperlink. */ [data-theme='client'] .prose { --tw-prose-links: hsl(var(--sep-link)); } /* Drop the prefix character core hardcodes before every reviewer name — `— ` in ReviewCard (homepage cards) and `- ` in the MinimalList variant (/reviews). It is a bare text node with no element around it, so no selector can reach it directly. But it IS the block's first typographic unit, and ::first-letter matches leading punctuation ON ITS OWN when a space separates it from the first real letter — measured on both: the reviewer's initial is untouched (homepage shrank by the em dash's 14.8px, /reviews by the hyphen's 4.6px). The space after it survives, so the left-aligned list needs the indent back; the homepage list is right-aligned and stays flush without it. NOTE the internal list's date shares `.text-primary.font-bold` with the name — matching on that would zero the "J" in "July". `> p:last-child` is the name. */ [data-theme='client'] #sep-reviews article p.font-medium::first-letter, [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article > p:last-child::first-letter { font-size: 0; } [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article > p:last-child { text-indent: -0.26em; } /* Reviewer name → gold uppercase, right-aligned, gold rule above */ [data-theme='client'] #sep-reviews article p.font-medium { color: hsl(var(--sep-gold)) !important; font-family: var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; font-size: 1.05em; text-align: right; border-top: 2px solid hsl(var(--sep-gold)); padding-top: 10px; margin-top: 6px; } /* About-2 — CONTAINED red band (3px radius) straddling the dark About above and the cream page below; Tug bleeds out top (head) + bottom (paws). (Figma #178:400) Red lives on the inner .container so the block itself is transparent and the dark/cream show in the side margins. Overlap = negative margin-top into the dark, compensated by #sep-about's padding-bottom so Reviews stays put. */ [data-theme='client'] #sep-local { background-color: transparent !important; /* Straddle the About↔Reviews seam: pull up into the dark About and pull the cream Reviews up under the band, so both sections touch (no gap) and the band overlays both. Net flow ≈ 0 (margins ≈ band height). */ margin-top: -120px !important; margin-bottom: -120px !important; padding-block: 0; overflow: visible; position: relative; z-index: 3; } [data-theme='client'] #sep-local .container { position: relative; background-color: hsl(var(--primary)); border-radius: 3px; padding: 40px 56px 42px; overflow: visible; } [data-theme='client'] #sep-local :is(h1, h2, h3), [data-theme='client'] #sep-local p { color: hsl(var(--secondary)) !important; } [data-theme='client'] #sep-local h2 { font-family: var(--font-heading); font-size: clamp(28px, 3.6vw, 42px); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.02em; } /* Content stack (inner flex-col): heading full-width, then body (left) + button (right) */ /* Outer grid → block so content fills the band (the dog's own grid column left a big empty gap on the right; the dog is absolute so it needs no column). The content just reserves ~160px on the right so it clears the (now ~132px) dog. */ [data-theme='client'] #sep-local .grid { display: block !important; } [data-theme='client'] #sep-local .grid > div:first-child > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; row-gap: 12px; align-items: center; padding-right: 160px; } [data-theme='client'] #sep-local .grid > div:first-child > div > h2 { grid-column: 1; grid-row: 1; } /* Button in its own right column, spanning both rows → vertically centered against the heading + body block (no overlap with the heading) */ [data-theme='client'] #sep-local .grid > div:first-child > div > div:has(a) { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: start; } /* Tug — absolutely placed on the right, taller than the box so head bleeds above and paws bleed below the red band; doesn't expand the container height. */ [data-theme='client'] #sep-local .grid img { position: absolute; right: 8px; top: 40%; transform: translateY(-50%); height: 300px; width: auto; max-width: none; object-fit: contain; object-position: bottom center; z-index: 2; } /* Service Area (Figma #181:417) — map left, red panel right: script eyebrow "Proudly Serving Our" + uppercase "WISCONSIN COMMUNITIES" + uppercase cities */ [data-theme='client'] #sep-service-area .z-10.flex.flex-col { align-items: flex-start; text-align: left; } /* Reorder: script eyebrow → uppercase headline → city columns */ [data-theme='client'] #sep-service-area .z-10.flex.flex-col > h2 { order: 1; } [data-theme='client'] #sep-service-area .z-10.flex.flex-col > p.font-semibold { order: 2; } [data-theme='client'] #sep-service-area .z-10.flex.flex-col > div.font-semibold { order: 3; } [data-theme='client'] #sep-service-area h2 { font-family: var(--font-script) !important; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(24px, 2.6vw, 33px); line-height: 1.1; margin-bottom: -6px; color: hsl(var(--secondary)) !important; } [data-theme='client'] #sep-service-area p.font-semibold { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; } /* Map already carries the dark styling + highlighted overlay (Figma Map group) */ [data-theme='client'] #sep-service-area .grid > div:first-child img { object-fit: cover; } /* Map 30% | red panel 70% (Figma ~36/64, per request ~30/70). min-height is dropped so the row height is driven purely by the red-panel content — that's what lets the CTA sit in a fixed reserved band directly under the city list no matter how many cities the CMS holds (the map is `absolute inset-0` and contributes no height of its own). */ @media (min-width: 768px) { [data-theme='client'] #sep-service-area .grid { grid-template-columns: 30% 70% !important; min-height: 0 !important; } } /* Solid red panel + slight top/bottom bleed + rounded left edge */ [data-theme='client'] #sep-service-area, [data-theme='client'] #sep-service-area section, [data-theme='client'] #sep-service-area .grid, [data-theme='client'] #sep-service-area .grid > div { overflow: visible; } [data-theme='client'] #sep-service-area .bg-primary { opacity: 1 !important; top: -22px !important; bottom: -22px !important; border-radius: 3px 0 0 3px; } /* Lift the map cell (holds the CTA) above the red cell so the button shows. Must beat the panel's own `.z-10` content box: the CTA is moved into the red panel below, and that content box reserves a padding band over the same spot — at a lower z-index it paints under it and swallows the clicks. The map image is confined to this cell's own 30% column, so nothing else is raised with it. */ [data-theme='client'] #sep-service-area .grid > div:first-child { position: relative; z-index: 20; } /* Left-align the red-panel content (Figma) so the CTA sits under it. The block reserves a bottom band via padding — the CTA is parked in it below. */ [data-theme='client'] #sep-service-area .grid > div:nth-child(2) { align-items: flex-start !important; padding-left: clamp(24px, 5vw, 68px); } @media (min-width: 768px) { [data-theme='client'] #sep-service-area .grid > div:nth-child(2) .z-10 { transform: none; padding-block: 64px 104px; } /* Move Request Service out of the map into the red panel, bottom-anchored so it lands in the reserved band right under the last city row. */ [data-theme='client'] #sep-service-area .grid > div:first-child > .absolute.bottom-8 { left: calc(100% + clamp(24px, 5vw, 68px)); right: auto; top: auto; bottom: 34px; transform: none; } } /* Same off-white outline treatment as every other button in the theme (A/CTA-Rev). The font block is not optional — without it the link keeps the core body font and sentence case, which reads as a different component entirely. */ [data-theme='client'] #sep-service-area .grid > div:first-child > .absolute.bottom-8 a { color: hsl(var(--secondary)) !important; background-color: transparent !important; border: 1px solid hsl(var(--secondary)) !important; border-radius: 3px; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; } [data-theme='client'] #sep-service-area .grid > div:first-child > .absolute.bottom-8 a:hover { color: hsl(var(--foreground)) !important; background-color: hsl(var(--secondary)) !important; } /* "Wisconsin Communities" → SEP Black (Figma); eyebrow stays white */ [data-theme='client'] #sep-service-area p.font-semibold { color: hsl(var(--foreground)) !important; } /* City items: black location-pin before each name */ [data-theme='client'] #sep-service-area a[href*='service-area'] { display: inline-flex; align-items: center; gap: 9px; } [data-theme='client'] #sep-service-area a[href*='service-area']::before { content: ''; flex-shrink: 0; width: 14px; height: 18px; background-color: hsl(var(--sep-charcoal)); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2019%27%3E%3Cpath%20d%3D%27M7.91667%201.58333C6.20139%201.58333%205.04688%202.21007%204.32118%203.13368C3.5625%204.09028%203.16667%205.47569%203.16667%207.125C3.16667%208.14757%203.46354%209.33507%203.99132%2010.5556C4.48611%2011.776%205.14583%2012.9965%205.80556%2014.1181C6.49826%2015.2066%207.19097%2016.1632%207.68576%2016.8229C7.75174%2016.9219%207.85069%2017.0538%207.91667%2017.1198C7.98264%2017.0538%208.0816%2016.9219%208.14757%2016.8229C8.67535%2016.1632%209.33507%2015.2066%2010.0278%2014.1181C10.6875%2012.9965%2011.3472%2011.776%2011.875%2010.5556C12.3698%209.33507%2012.6667%208.14757%2012.6667%207.125C12.6667%205.47569%2012.2708%204.09028%2011.5122%203.13368C10.7865%202.21007%209.63194%201.58333%207.91667%201.58333ZM7.45486%2018.901C7.38889%2019%207.38889%2019%207.38889%2019L7.3559%2018.967C7.3559%2018.967%207.32292%2018.934%207.28993%2018.901C7.25694%2018.8681%207.15799%2018.7691%207.05903%2018.6701C6.86111%2018.5052%206.56424%2018.2083%206.23438%2017.8455C5.57465%2017.1528%204.65104%2016.1632%203.72743%2015.0087C2.83681%2013.8872%201.91319%2012.5677%201.22049%2011.2483C0.527778%209.89583%200%208.47743%200%207.125C0%205.2118%200.59375%203.43055%201.94618%202.07812C3.26562%200.75868%205.27778%200%207.91667%200C10.5556%200%2012.5677%200.75868%2013.9201%202.07812C15.2396%203.43055%2015.8333%205.2118%2015.8333%207.125C15.8333%208.47743%2015.3385%209.89583%2014.6458%2011.2483C13.9201%2012.5677%2012.9965%2013.8872%2012.1059%2015.0087C11.1823%2016.1632%2010.2917%2017.1528%209.59896%2017.8455C9.2691%2018.2083%208.97222%2018.4722%208.77431%2018.6701C8.67535%2018.7691%208.60938%2018.8681%208.5434%2018.901C8.51042%2018.934%208.47743%2018.967%208.47743%2018.967L8.44444%2019L8.37847%2018.901L8.44444%2019H7.38889L7.45486%2018.901ZM7.91667%205.54167C7.68576%205.54167%207.52083%205.64063%207.38889%205.83854C7.22396%206.10243%207.125%206.53125%207.125%207.125C7.125%207.71875%207.22396%208.14757%207.38889%208.41146C7.52083%208.60938%207.68576%208.70833%207.91667%208.70833C8.18056%208.70833%208.3125%208.60938%208.44444%208.41146C8.60938%208.14757%208.70833%207.71875%208.70833%207.125C8.70833%206.53125%208.60938%206.10243%208.44444%205.83854C8.3125%205.64063%208.18056%205.54167%207.91667%205.54167ZM5.50868%204.91493C6.06944%204.28819%206.8941%203.95833%207.91667%203.95833C8.93924%203.95833%209.76389%204.28819%2010.3247%204.91493C10.8854%205.54167%2011.0833%206.33333%2011.0833%207.125C11.0833%207.91667%2010.8854%208.70833%2010.3247%209.33507C9.76389%209.96181%208.93924%2010.2917%207.91667%2010.2917C6.8941%2010.2917%206.06944%209.96181%205.50868%209.33507C4.9809%208.70833%204.75%207.91667%204.75%207.125C4.75%206.33333%204.9809%205.54167%205.50868%204.91493Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E"); } [data-theme='client'] #sep-service-area a[href*='service-area'] { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } /* Three city columns on desktop. The block hard-splits the list into two flex columns; `display: contents` dissolves those wrappers so every city becomes a direct child of a CSS multi-column box, which reflows them into 3 balanced columns (still A–Z down each) for any city count. */ @media (min-width: 768px) { [data-theme='client'] #sep-service-area .z-10 > div.font-semibold { display: block; columns: 3; column-gap: clamp(24px, 3vw, 48px); width: 100%; max-width: 640px; } [data-theme='client'] #sep-service-area .z-10 > div.font-semibold > div { display: contents; } [data-theme='client'] #sep-service-area a[href*='service-area'] { /* block-level (not inline-flex) so multicol lays each city out as its own box */ display: flex; width: fit-content; break-inside: avoid; } } /* Careers — dark photo section; extra bottom padding = dark space that frames the contained We-Service-All-Brands red band (same container, ~45px above/below). */ [data-theme='client'] #sep-careers { padding-top: 52px; /* Dark photo extends this far below the content; the band (margin-top -100 = its height) sits flush at this bottom edge, so band.bottom = careers.bottom = footer.top. Robust across widths (not tied to content height). darkAbove = padding-bottom(145) - bandHeight(100) = 45. */ padding-bottom: 145px; } /* Remove the careers cta wrapper's own vertical padding so the content box ends at the button — makes darkAbove predictable (was ~128px of hidden slack). */ [data-theme='client'] #sep-careers .relative.z-10 { padding-bottom: 0 !important; } /* Kill the cta block's built-in red (primary) overlay — Figma has only the dark photo overlay here (careers), and the contained .container box (brands). */ [data-theme='client'] #sep-careers .relative.overflow-hidden .absolute.inset-0, [data-theme='client'] #sep-brands .relative.overflow-hidden .absolute.inset-0 { background-color: transparent !important; } /* Stack the cta content and put Explore Openings in its own centered row */ [data-theme='client'] #sep-careers [class*='md:flex-row'] { flex-direction: column !important; align-items: center !important; text-align: center; gap: 10px; } [data-theme='client'] #sep-careers .cta-content { text-align: center; /* Widen past the CTA block's max-w-[933px] so the 4-item benefits row fits on one line. Heading is inline + paragraph has its own 780px cap, so only the benefits row uses the extra width. */ max-width: 1060px !important; } [data-theme='client'] #sep-careers :is(h1, h2, h3), [data-theme='client'] #sep-careers p { color: hsl(var(--secondary)) !important; } [data-theme='client'] #sep-careers h2 { font-family: var(--font-heading); font-size: clamp(26px, 3.2vw, 40px); /* tight line box (Oswald's tall ascent leaves black space above the caps); extra bottom padding shifts the box down so it hugs the text (Figma). */ line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; /* OFFSET highlight (Figma): black box behind lower ~2/3, caps poke out top */ background: linear-gradient( to bottom, transparent 0 34%, hsl(var(--foreground)) 34% 100% ); border-radius: 3px; padding: 0 14px 5px; } /* body copy → Kumbh 16/24, constrained like Figma */ [data-theme='client'] #sep-careers .cta-content p { font-family: var(--font-body); font-size: 16px; line-height: 1.5; max-width: 780px; margin-inline: auto; } /* Careers benefits row — 4 gold-icon + gold-label items (Figma #181:447) */ [data-theme='client'] #sep-careers ul { list-style: none; padding: 0; margin: 26px 0 4px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 40px; } [data-theme='client'] #sep-careers li { display: flex; align-items: center; gap: 10px; /* label text white; only the icon (::before) is gold */ color: hsl(var(--secondary)) !important; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; line-height: 1.1; /* Let each label breathe on one line — the band container (~1264px) has ample room; the old 210px cap forced "supportive…"/"growth…" to wrap. Cap kept generous as an overflow safety; labels wrap only on narrow viewports. */ max-width: 360px; text-align: left; } [data-theme='client'] #sep-careers li::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; background-color: hsl(var(--sep-gold)); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain; } [data-theme='client'] #sep-careers li:nth-child(1)::before { mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2216%22%20viewBox%3D%220%200%2019%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M9.07118%202.74143C7.68576%201.81781%206.03646%201.42198%204.38715%201.65288L3.16667%201.78483V11.4827L4.18924%2011.3508C6.20139%2011.0869%208.24653%2011.5817%209.92882%2012.7032C11.3142%2013.6268%2012.9635%2014.0227%2014.6128%2013.7918L15.8333%2013.6598V3.96191L14.8108%204.09386C12.7986%204.35774%2010.7535%203.86295%209.07118%202.74143ZM4.18924%200.0695505C6.20139%20-0.194337%208.24653%200.300453%209.92882%201.42198C11.3142%202.34559%2012.9635%202.74142%2014.6128%202.51052C17.3837%202.18066%2018.8351%201.98275%2019%201.98275V14.8473L18.3073%2014.9463L14.8108%2015.3751C12.7986%2015.639%2010.7535%2015.1442%209.07118%2014.0227C7.68576%2013.0991%206.03646%2012.7032%204.38715%2012.9341C1.61632%2013.264%200.164931%2013.4619%200%2013.4619V0.597328L0.692708%200.49837L4.18924%200.0695505ZM10.2257%206.63379C10.0608%206.6008%209.89583%206.56782%209.69792%206.53483C9.53299%206.50184%209.36806%206.50184%209.20312%206.46886C8.64236%206.46886%208.27951%206.56781%208.04861%206.69976C7.78472%206.86469%207.65278%207.09559%207.58681%207.42545C7.55382%207.75532%207.61979%208.0192%207.85069%208.25011C8.0816%208.48101%208.5434%208.7449%209.40104%208.87684C10.2257%209.00879%2010.7535%208.87684%2011.0503%208.67893C11.3142%208.54698%2011.4792%208.28309%2011.5122%207.98622C11.5451%207.65636%2011.4792%207.35948%2011.2812%207.16156C11.0833%206.96365%2010.7535%206.76573%2010.2257%206.63379ZM12.3698%2010.1963C11.5451%2010.5591%2010.4566%2010.6251%209.17014%2010.4602C7.85069%2010.2623%206.82812%209.89941%206.1684%209.30566C5.44271%208.71191%205.11285%207.95323%205.24479%207.09559C5.34375%206.27094%205.87153%205.57823%206.72917%205.21538C7.42188%204.91851%208.27951%204.81955%209.30208%204.88552C9.5%204.88552%209.7309%204.91851%209.92882%204.9515C10.1597%204.98448%2010.3906%205.01747%2010.5885%205.08344C11.5781%205.28136%2012.3698%205.61122%2012.9306%206.10601C13.6562%206.69976%2013.9861%207.45844%2013.8542%208.31608C13.7222%209.14073%2013.1944%209.83344%2012.3698%2010.1963Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E"); } [data-theme='client'] #sep-careers li:nth-child(2)::before { mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2215%22%20viewBox%3D%220%200%2019%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M6.63021%202.04514C6.36632%201.74826%206.00347%201.58333%205.54167%201.58333C5.07986%201.58333%204.71701%201.74826%204.48611%202.04514C4.18924%202.375%203.95833%202.96875%203.95833%203.95833C3.95833%204.94792%204.18924%205.54167%204.48611%205.87153C4.71701%206.1684%205.07986%206.33333%205.54167%206.33333C6.00347%206.33333%206.36632%206.1684%206.63021%205.87153C6.8941%205.54167%207.125%204.94792%207.125%203.95833C7.125%202.96875%206.8941%202.375%206.63021%202.04514ZM8.34549%206.92708C8.74132%207.09201%209.10417%207.32292%209.40104%207.58681C9.69792%207.81771%209.92882%208.0816%2010.1597%208.37847C10.1927%208.34549%2010.2257%208.3125%2010.2917%208.27951C10.5556%208.04861%2010.8854%207.85069%2011.2153%207.68576C10.6215%207.05903%2010.2917%206.20139%2010.2917%205.14583C10.2917%203.99132%2010.6545%203.06771%2011.3802%202.44097C12.0399%201.84722%2012.9635%201.58333%2013.8542%201.58333C14.7448%201.58333%2015.6684%201.84722%2016.3281%202.44097C17.0538%203.06771%2017.4167%203.99132%2017.4167%205.14583C17.4167%206.20139%2017.0868%207.05903%2016.4931%207.68576C16.8559%207.85069%2017.1528%208.04861%2017.4167%208.27951C18.4062%209.07118%2019%2010.2257%2019%2011.7101V14.25H0V11.5122C0%209.79688%200.626736%208.47743%201.68229%207.58681C2.01215%207.32292%202.34201%207.09201%202.73785%206.92708C1.97917%206.23438%201.58333%205.2118%201.58333%203.95833C1.58333%202.67187%202.01215%201.64931%202.77083%200.956597C3.52951%200.263889%204.5191%200%205.54167%200C6.56424%200%207.55382%200.263889%208.3125%200.956597C9.07118%201.64931%209.5%202.67187%209.5%203.95833C9.5%205.2118%209.10417%206.23438%208.34549%206.92708ZM16.625%2012.6667V11.6771C16.625%2010.6545%2016.2951%209.89583%2015.8333%209.43403C15.3385%208.97222%2014.6788%208.70833%2013.8542%208.70833C13.0625%208.70833%2012.3698%208.97222%2011.908%209.43403C11.4132%209.89583%2011.0833%2010.6545%2011.0833%2011.6771V12.6667H16.625ZM8.70833%2012.6667V10.9184C8.70833%209.86285%208.34549%209.17014%207.81771%208.67535C7.25694%208.21354%206.49826%207.91667%205.54167%207.91667C4.61806%207.91667%203.82639%208.21354%203.26562%208.67535C2.73785%209.17014%202.375%209.86285%202.375%2010.9184V12.6667H8.70833ZM14.6458%203.52951C14.4479%203.29861%2014.184%203.16667%2013.8542%203.16667C13.5243%203.16667%2013.2604%203.29861%2013.0625%203.52951C12.8646%203.7934%2012.6667%204.28819%2012.6667%205.14583C12.6667%206.00347%2012.8646%206.49826%2013.0625%206.76215C13.2604%207.02604%2013.5243%207.125%2013.8542%207.125C14.184%207.125%2014.4479%207.02604%2014.6458%206.76215C14.8438%206.49826%2015.0417%206.00347%2015.0417%205.14583C15.0417%204.28819%2014.8438%203.7934%2014.6458%203.52951Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E"); } [data-theme='client'] #sep-careers li:nth-child(3)::before { mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2219%22%20viewBox%3D%220%200%2016%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M2.27601%2011.8896V11.8556V11.8896ZM3.46497%2010.259H7.16774V15.9321L12.535%208.62846H8.79831V2.95542L3.46497%2010.259ZM0%2012.2293L8.96817%200L10.4289%200.475585V5.36731H15.3206L16%206.65818L7.03186%2018.8875L5.53716%2018.4119V13.5202H0.645436L0%2012.2293Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E"); } [data-theme='client'] #sep-careers li:nth-child(4)::before { mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2019%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M5.86894%208.77605C5.63799%208.1162%205.53901%207.45635%205.53901%206.73051C5.53901%203.00233%208.54134%200%2012.2695%200H12.6654C13.7542%200%2014.777%200.263942%2015.6678%200.758831L16.6245%201.25372C16.0637%201.8146%2015.6348%202.21051%2015.3378%202.54044L12.8634%204.98189C12.5994%205.27883%2012.5994%205.77372%2012.8964%206.07065C13.2263%206.40058%2013.7212%206.40058%2014.0511%206.07065C16.3606%203.76117%2017.6143%202.50744%2017.7463%202.37547L18.2412%203.33226C18.7361%204.22306%2019%205.24584%2019%206.3016C19%206.33459%2019%206.33459%2019%206.33459V6.73051C19%2010.4587%2015.9977%2013.461%2012.2695%2013.461C11.5437%2013.461%2010.8178%2013.362%2010.158%2013.1311L5.30806%2018.08C4.12032%2019.2677%202.20675%2019.3007%200.986018%2018.146C-0.300697%2016.9582%20-0.333689%2014.9457%200.920032%2013.725L5.86894%208.77605ZM12.6654%201.58365C10.026%201.58365%207.91448%203.69518%207.91448%206.3016C7.91448%206.92846%208.01346%207.48934%208.24441%208.01722L8.40937%208.51211L8.04645%208.87503L3.72441%2013.1641C3.16354%2013.725%203.16354%2014.6487%203.72441%2015.2096C4.28529%2015.7705%205.20908%2015.7705%205.76996%2015.2096L10.092%2010.8876L10.4549%2010.5247L10.9498%2010.7226C11.4777%2010.9206%2012.0716%2011.0196%2012.6654%2011.0196C15.3048%2011.0196%2017.4164%208.90802%2017.4164%206.3016C17.4164%205.90569%2017.3504%205.47678%2017.2514%205.11387L14.744%207.58832C13.8202%208.51211%2012.3355%208.51211%2011.3787%207.58832C10.4549%206.66452%2010.4549%205.14686%2011.3787%204.22306L11.7416%203.86014L11.7746%203.82715L13.8862%201.74861C13.4902%201.64963%2013.0943%201.58365%2012.6654%201.58365Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E"); } /* We Service All Brands — red band: "We Service All Brands" off-white eyebrow, "No Matter the System…" SEP-black headline (per Figma) */ /* CONTAINED red band (top radius) that sits WITHIN the Careers section (same container) — red on the inner .container, block transparent, pulled up into the Careers dark bottom. Single row: white Damion script + black uppercase headline + white outline button. */ [data-theme='client'] #sep-brands { background-color: transparent !important; /* margin-top = band height (100) so band.bottom lands exactly on careers.bottom (dark photo behind + beside it, footer flush directly below, no white gap). */ margin-top: -100px !important; margin-bottom: 0 !important; padding-block: 0; position: relative; z-index: 3; } [data-theme='client'] #sep-brands .container { background-color: hsl(var(--primary)); border-radius: 3px 3px 0 0; max-width: 1180px; margin-inline: auto; padding: 28px 40px; } /* Zero the cta wrapper's vertical padding so the band block = just the red container (height ~100 = the -100 margin), making band.bottom land exactly on careers.bottom (flush, no gap) and darkAbove predictable. */ [data-theme='client'] #sep-brands .relative.z-10 { padding-block: 0 !important; } /* script eyebrow + headline inline in a row */ [data-theme='client'] #sep-brands .payload-richtext { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; } [data-theme='client'] #sep-brands h2 { color: hsl(var(--secondary)) !important; font-family: var(--font-script) !important; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; margin: 0; } [data-theme='client'] #sep-brands p { color: hsl(var(--foreground)) !important; font-family: var(--font-heading); font-size: clamp(19px, 2.3vw, 30px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; margin: 0; } /* Buttons on the red/black bands → off-white outline (Figma A/CTA-Rev) */ [data-theme='client'] :is(#sep-local, #sep-careers, #sep-brands) a:has(button), [data-theme='client'] :is(#sep-local, #sep-careers, #sep-brands) a.inline-flex, [data-theme='client'] :is(#sep-local, #sep-careers, #sep-brands) button:not(.nav-trigger) { color: hsl(var(--secondary)) !important; background-color: transparent !important; border: 1px solid hsl(var(--secondary)) !important; border-radius: 3px; font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } [data-theme='client'] :is(#sep-local, #sep-careers, #sep-brands) a:has(button):hover button, [data-theme='client'] :is(#sep-local, #sep-careers, #sep-brands) a.inline-flex:hover, [data-theme='client'] :is(#sep-local, #sep-careers, #sep-brands) button:not(.nav-trigger):hover { color: hsl(var(--foreground)) !important; background-color: hsl(var(--secondary)) !important; } /* ============================================================ MOBILE OVERRIDES — Figma mobile frame "iPhone 16 & 17 Pro" #181:463. Desktop layouts above lean on absolute positioning that collapses on a narrow viewport; these queries restack the affected sections per the mobile design. Breakpoints: header switches to the mobile row below lg (1024); section layouts switch at the block md breakpoint (768). ============================================================ */ /* Header — Figma mobile nav is a SOLID charcoal bar (the translucent blur is a desktop-over-hero treatment; on mobile it reads as muddy gray). */ @media (max-width: 1023px) { [data-header='client'] header.sep-header { background-color: hsl(var(--sep-charcoal)); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* About 2 (sep-local) — stack heading → body → button in one column and shrink Tug into the bottom-right corner. Desktop reserves 160px + a 300px absolute dog, which on mobile crushes the text to one word per line (Figma #181:656). */ @media (max-width: 767px) { [data-theme='client'] #sep-local .container { padding: 30px 26px 34px; } [data-theme='client'] #sep-local .grid > div:first-child > div { display: block !important; padding-right: 116px; /* clear the corner dog */ } [data-theme='client'] #sep-local .grid > div:first-child > div > div:has(a) { margin-top: 18px; } [data-theme='client'] #sep-local .grid img { /* Figma mobile (#181:654) puts Tug at 128x314 in a 364-wide band — 35% of the band's width and 79% of its height. At 196px he was barely half that. Sized from the band so he keeps those proportions at any phone width, and still bleeds a little past the bottom edge the way the design shows. */ height: min(295px, 79vw); top: auto; bottom: -18px; right: -6px; transform: none; } } /* Service Area — Figma mobile stacks the MAP on top, then a red band with the centered script eyebrow + headline + city columns, and Request Service at the very bottom. Desktop hides the map (hidden md:block), left-shifts the content (translateY) and parks the CTA off to the right — all undone here. */ @media (max-width: 767px) { /* Reveal the map cell as a fixed-height banner on top. Its internals are all `absolute inset-0` (map fill) + a bottom-centered CTA, so a defined cell height makes everything lay out correctly (undefined height let the map overflow to 400px and swallow the content). */ [data-theme='client'] #sep-service-area .grid > div:first-child { display: block !important; position: relative !important; /* Figma's mobile map (#181:841) is 402x397.6 — square-ish, not the letterbox 250px this was. The CMS image is already the square crop (servicearea-map2.png, 1377x1362), so this needs no new asset: give the cell the design's aspect ratio and the whole crop is visible. */ aspect-ratio: 402 / 398; height: auto !important; overflow: hidden; border-radius: 3px 3px 0 0; } /* The block ships TWO CTAs: one over the map (desktop) and an `md:hidden` one inside the red panel. Below md both would show, so the map copy is dropped and the in-flow one is used — ordered last so it lands under the city list, matching desktop. */ [data-theme='client'] #sep-service-area .grid > div:first-child > .absolute.bottom-8 { display: none; } [data-theme='client'] #sep-service-area .z-10.flex.flex-col > div.md\:hidden { order: 4; margin-top: 10px; } [data-theme='client'] #sep-service-area .z-10.flex.flex-col > div.md\:hidden a { color: hsl(var(--secondary)) !important; background-color: transparent !important; border: 1px solid hsl(var(--secondary)) !important; border-radius: 3px; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; } /* Center the red-panel content (undo the desktop left-align + up-shift) */ [data-theme='client'] #sep-service-area .grid > div:nth-child(2) { align-items: center !important; /* The block ships px-6 (24px each side); the desktop rule replaces the left one with a clamp. Zeroing only the left here left the panel 0/24 and shoved the centred city list 12px off-centre (65 vs 89). Mirror the right side. */ padding-left: 24px; } [data-theme='client'] #sep-service-area .z-10.flex.flex-col { align-items: center; text-align: center; } [data-theme='client'] #sep-service-area .grid > div:nth-child(2) .z-10 { transform: none; padding-block: 40px 44px; /* trims the big empty red gap */ } /* Featured services: on a touch device there is no hover, and the mobile design instantiates all three cards as A/FS-2 "Property 1=Variant2" (#38:196) — the variant with the gold bar already slid out. So park it in the exposed position and give each card the 56px of clearance it now occupies, or it would sit on top of the next card. */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div a { transform: translateY(100%); transition: none; } [data-theme='client'] [data-block-type='featuredItems'] .grid > div { margin-bottom: 56px; } /* "We Service All Brands" band: the richtext is a wrapping flex row, so on mobile the script heading and the line below it wrapped onto their own rows but stayed left-packed — each read as left-aligned despite text-align:center, because the boxes are shrink-to-fit (40 -> 222 inside a 390 container). */ [data-theme='client'] #sep-brands .payload-richtext { justify-content: center; } /* Hero trucks: the mobile design (#181:510) places Trucks-BW UNCROPPED — `needsCropping: false`, 453.57x161.32, which is exactly the asset's own 2.81:1. The 320px-tall box with `cover` was cropping the sides hard, i.e. zoomed in. Matching the ratio shows the whole photo — the "zoomed out" version — with no new image needed. */ [data-theme='client'] .sep-hero-img { height: auto; aspect-ratio: 2200 / 782; object-fit: cover; object-position: center; } /* Careers background: the mobile design (#181:918) crops the SAME careers-bg to a portrait slice — 32.4% of the source width starting at 48.5%, full height. That centres on 64.7% across, which `background-position` reproduces without a second asset. */ [data-theme='client'] #sep-careers { background-position: 64.7% center !important; } /* Latest 2 posts only on mobile — the block still fetches 3. */ [data-theme='client'] #sep-blog .grid > *:nth-child(n + 3) { display: none; } [data-theme='client'] #sep-service-area .bg-primary { top: 0 !important; bottom: 0 !important; border-radius: 0 0 3px 3px; } } /* ============================================================ INTERNAL PAGES — Figma "Internal Page" #181:1072. Cream body throughout; charcoal page-title banner with off-white Damion-script H1 (the H1 SEO heading doubles as the page title on its own; when a page uses the callToAction hero it also shows red H2 subheadings + a Request Service button); and a red, contained CTA band (the `cta` layout block). All scoped to the client theme + core hero/block containers (merge-safe). ============================================================ */ /* Cream everywhere — is already cream but

paints white over it. Homepage sections all set their own bg, so this is invisible there. */ [data-theme='client'] main { /* !important beats the layout's inline background-color:#ffffff on

. */ background-color: hsl(var(--background)) !important; } /* ---- Page-title banner (charcoal): the pageTitle hero (H1 only) and the callToAction hero (H1 + subheadings + Request Service) share this look. ---- */ [data-theme='client'] div:has(> .hero-pagetitle-content), [data-theme='client'] div:has(> .hero-cta-content) { background-color: hsl(var(--sep-charcoal)) !important; padding-block: clamp(40px, 6vw, 72px) !important; } /* Drop the light template gradient/overlay layers behind the content. */ [data-theme='client'] div:has(> .hero-pagetitle-content) > .absolute.inset-0, [data-theme='client'] div:has(> .hero-cta-content) > .absolute.inset-0 { display: none !important; } /* H1 SEO heading → off-white Damion script (Figma style_964d8c4e, 48px). */ [data-theme='client'] .hero-pagetitle-content h1, [data-theme='client'] .hero-cta-content h1 { color: hsl(var(--secondary)) !important; font-family: var(--font-script) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: -0.02em; font-size: clamp(34px, 4.6vw, 48px) !important; line-height: 1.06 !important; } /* pageTitle subtitle + callToAction subheadings → red Garage Gothic (Figma style_217ceea2), full opacity (core dims them to 0.8 over dark bgs). */ [data-theme='client'] .hero-pagetitle-content p, [data-theme='client'] .hero-cta-content h2, [data-theme='client'] .hero-cta-content .space-y-1 p { color: hsl(var(--primary)) !important; font-family: var(--font-heading) !important; text-transform: uppercase; letter-spacing: 0.03em; opacity: 1 !important; } [data-theme='client'] .hero-cta-content .space-y-1 { opacity: 1 !important; } /* Request Service in the banner CTA → off-white outline (A/CTA-Rev). */ [data-theme='client'] .hero-cta-content ul a { color: hsl(var(--secondary)) !important; background-color: transparent !important; border: 1px solid hsl(var(--secondary)) !important; border-radius: 3px; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; } [data-theme='client'] .hero-cta-content ul a:hover { color: hsl(var(--foreground)) !important; background-color: hsl(var(--secondary)) !important; } /* ---- Red CTA band (the `cta` layout block) — Figma #181:1270. Scoped to cta blocks WITHOUT a customId so the homepage #sep-careers / #sep-brands ctas (which have their own bespoke styling) are left alone. ---- */ [data-theme='client'] [data-block-type='cta']:not([id]) [data-block='cta'][data-variant='fullWidth'] { background-color: hsl(var(--primary)); border-radius: 3px; } /* When the CMS record has NO background set, the core FullWidth variant paints a `bg-muted-foreground` fallback layer over everything — near-black, and it hides the red above while the block's own resolved text color goes white. Our black Garage Gothic lines below then render black-on-black. Drop the fallback so the red band shows; a real CMS background (image or color) uses a different element and is untouched. */ [data-theme='client'] [data-block-type='cta']:not([id]) [data-block='cta'] > .absolute.inset-0.bg-muted-foreground { display: none; } /* Lead heading (h1/h2) → off-white Damion script; the lead-in lines (h3/p) → SEP black Garage Gothic (Figma: "Need Internal Page Service?" script off-white + black lines). Our cta template renders the lead as

and the phone line as
. / [data-theme='client'] [data-block-type='cta']:not([id]) .cta-content :is(h1, h2) { color: hsl(var(--secondary)) !important; font-family: var(--font-script) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: -0.02em; } [data-theme='client'] [data-block-type='cta']:not([id]) .cta-content :is(h3, p), [data-theme='client'] [data-block-type='cta']:not([id]) .cta-content :is(h3, p) em, [data-theme='client'] [data-block-type='cta']:not([id]) .cta-content :is(h3, p) a { color: hsl(var(--foreground)) !important; font-family: var(--font-heading) !important; font-style: normal; text-transform: uppercase; letter-spacing: 0.03em; } / Band button → off-white outline (Request Service, A/CTA-Rev). / [data-theme='client'] [data-block-type='cta']:not([id]) [data-block='cta'] a[class='inline-flex'] { color: hsl(var(--secondary)) !important; background-color: transparent !important; border: 1px solid hsl(var(--secondary)) !important; border-radius: 3px; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; } [data-theme='client'] [data-block-type='cta']:not([id]) [data-block='cta'] a[class='inline-flex']:hover { color: hsl(var(--foreground)) !important; background-color: hsl(var(--secondary)) !important; } / Red CTA band alignment — Figma floats the title/copy hard-left and the button hard-right across the full band width (the template's `narrow` content width centers them in a narrow column instead). On mobile the row already stacks (flex-col items-center); just center the text. / @media (min-width: 768px) { [data-theme='client'] [data-block-type='cta']:not([id]) [data-block='cta'] .relative.z-10 > .container { max-width: none !important; margin-inline: 0 !important; } [data-theme='client'] [data-block-type='cta']:not([id]) .cta-content, [data-theme='client'] [data-block-type='cta']:not([id]) .cta-content .payload-richtext { text-align: left !important; margin-inline: 0 !important; max-width: none !important; } } @media (max-width: 767px) { [data-theme='client'] [data-block-type='cta']:not([id]) .cta-content, [data-theme='client'] [data-block-type='cta']:not([id]) .cta-content .payload-richtext { text-align: center !important; } } / ============================================================ GLOBAL — all images get a 3px radius (Figma uses 3px on photos/masked images). No !important so any element that intentionally sets its own radius still wins. ============================================================ / [data-theme='client'] img { border-radius: 3px; } / ============================================================ INTERNAL REVIEWS LIST — Figma review row #181:1312 (reviewsBlock `minimal` variant on /reviews). Reorder to: [stars + date] top row → title → body → name; recolor date gold + name black; gold divider. Scoped to reviewsBlocks WITHOUT a customId so the homepage #sep-reviews cards are untouched. ============================================================ / [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 8px; } / Baseline order so unhandled children (e.g. a business response) sort LAST, not before the stars (default order 0). / [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article > { order: 6; flex: 0 0 100%; } /* stars (left) + date (right) share the first row / [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article > .flex.items-center { order: 1; flex: 0 0 auto; margin-bottom: 0 !important; } [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article > .flex.items-center + p { order: 1; flex: 0 0 auto; margin-left: auto; color: hsl(var(--sep-gold)) !important; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; } / title → black Garage Gothic uppercase (Figma style_9ecece03, 24px) / [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article > .mb-1 { order: 2; flex: 0 0 100%; margin-bottom: 0 !important; } [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article > .mb-1 :is(h1, h2, h3, a) { color: hsl(var(--foreground)) !important; font-family: var(--font-heading) !important; font-size: 26px !important; line-height: 1.1 !important; text-transform: uppercase; letter-spacing: 0.05em; } / body → SEP black Kumbh, not italic (Figma A/Body-Small) / [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article > p.italic { order: 3; flex: 0 0 100%; color: hsl(var(--foreground)) !important; font-family: var(--font-body) !important; font-style: normal !important; } / name → SEP black Garage Gothic uppercase. Target the p right after the body (not :last-child) so it still matches when a business response follows. / [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article > p.italic + p { order: 4; flex: 0 0 100%; color: hsl(var(--foreground)) !important; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.06em; } / stars → brand gold / [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article svg { color: hsl(var(--sep-gold)) !important; } / gold divider between reviews (was a gray divide-y) + breathing room */ [data-theme='client'] [data-block-type='reviewsBlock']:not([id]) article + article { border-top: 2px solid hsl(var(--sep-gold)) !important; margin-top: 34px; padding-top: 34px; }

PPC Landing