[data-theme='client'] { --background: 0 0% 100%; --foreground: 259 52% 35%; --primary: 259 52% 35%; --primary-foreground: 0 0% 100%; --secondary: 199 100% 40%; --secondary-foreground: 0 0% 100%; --accent: 33 94% 66%; --accent-foreground: 259 52% 22%; --card: 0 0% 100%; --card-foreground: 259 52% 35%; --popover: 0 0% 100%; --popover-foreground: 259 52% 35%; --muted: 0 0% 96%; --muted-foreground: 259 15% 45%; --destructive: 1 80% 54%; --destructive-foreground: 0 0% 100%; --border: 0 0% 76%; --input: 0 0% 92%; --ring: 259 52% 35%; --font-heading: var(--font-open-sans), sans-serif; --font-body: var(--font-open-sans), sans-serif; --font-size-h1-px: 48; --font-size-h2-px: 40; --font-size-h3-px: 28; --font-size-h4-px: 22; --font-size-body-px: 17; --line-height-heading: 1.15; --line-height-body: 1.6; --font-weight-heading: 700; --radius: 0.75rem; --font-weight-body: 400; } /** * Client Theme CSS surface. * * This is the structural stylesheet for the per-client custom theme. It ships * upstream as a MINIMAL, neutral baseline — just enough so the header and footer * render sanely when "Client" is the active theme. Each client repo replaces / * extends these rules with the client's brand. * * All selectors are scoped to `data-*='client'`: * [data-theme='client'] — global (buttons, headings, blocks) * [data-header='client'] — header structure * [data-footer='client'] — footer structure * The palette/typography come from the token bag in ./config.ts (emitted at SSR * as [data-theme='client'] { … }). Add brand-specific structural CSS below. */ /* Headings — default to foreground, overrideable via --heading-color from blockSettings */ [data-theme='client'] :is(h1, h2, h3, h4, h5, h6) { color: var(--heading-color, hsl(var(--foreground))); } /* ============================================== HEADER — Client (neutral baseline) ============================================== */ [data-header='client'] header[data-header-style='light'] { --header-bg: hsl(var(--background)); --header-text: hsl(var(--foreground)); --header-border: hsl(var(--border)); } [data-header='client'] header[data-header-style='dark'] { --header-bg: hsl(var(--foreground)); --header-text: hsl(var(--background)); --header-border: hsl(var(--background) / 0.2); } /* Focus-visible for accessibility */ [data-header='client'] header nav a:focus-visible, [data-header='client'] header nav button:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } /* ============================================== FOOTER — Client (neutral baseline) ============================================== */ [data-footer='client'] footer[data-footer-scheme='dark'] { background-color: hsl(var(--foreground)); color: hsl(var(--background)); } [data-footer='client'] footer[data-footer-scheme='dark'] a { color: hsl(var(--background)); } [data-footer='client'] footer[data-footer-scheme='light'] { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } [data-footer='client'] footer a:focus-visible, [data-footer='client'] footer button:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } /* ============================================== CLIENT BRAND STYLES — add below Buttons, nav, CTA, block-specific overrides, etc. ============================================== */ /* ============================================== BUTTONS — ComforTemp (approved CodePen styles, brand-token driven) Shared CTA look: Open Sans Bold, uppercase, 8px radius, 45px tall. Variants map to brand tokens: primary=purple, secondary=blue, accent=orange. ============================================== */ [data-theme='client'] :is(a, button).btn, [data-theme='client'] .cta-button, [data-theme='client'] [class*='inline-flex'][class*='rounded'][data-cta] { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; border-radius: 8px; } /* Approved hover transitions on branded buttons */ [data-theme='client'] a[class*='bg-primary'], [data-theme='client'] a[class*='bg-secondary'], [data-theme='client'] a[class*='bg-accent'], [data-theme='client'] button[class*='bg-primary'], [data-theme='client'] button[class*='bg-secondary'], [data-theme='client'] button[class*='bg-accent'] { border-radius: 8px; font-weight: 700; text-transform: uppercase; transition: background-color 0.45s ease-in-out, color 0.45s ease-in-out, box-shadow 0.45s ease-in-out, transform 0.2s ease; } /* ---------- Mascot buttons (approved CTP designs) ---------- Scoped by SECTION, not href, so a CMS link change can't silently detach the dog + hover. (Prod re-pointed the hero Book Now → /request-service and Get To Know Us → /company, which dropped the old href-keyed styling on live while the local mirror — still on /book-now, /about — kept working and masked it.) Each of these homepage sections holds exactly one CTA (the bg-* button): Hero card = puppy right, blue→red hover (Figma "Book now" 240:2925) About = puppy left, blue→red hover (Figma "Get To Know Us" 197:1522) Community = paw, blue→orange hover */ [data-theme='client'] main .ctp-hero-card a[class*='bg-'], [data-theme='client'] main .ctp-about a[class*='bg-'], [data-theme='client'] main .ctp-community a[class*='bg-'] { position: relative; overflow: visible; background-color: hsl(var(--secondary)) !important; color: hsl(var(--secondary-foreground)) !important; border-radius: 8px; } [data-theme='client'] main .ctp-hero-card a[class*='bg-'] { padding-right: 72px; } [data-theme='client'] main .ctp-about a[class*='bg-'] { padding-left: 72px; } [data-theme='client'] main .ctp-community a[class*='bg-'] { padding-right: 64px; } [data-theme='client'] main .ctp-hero-card a[class*='bg-']::after, [data-theme='client'] main .ctp-about a[class*='bg-']::after, [data-theme='client'] main .ctp-community a[class*='bg-']::after { content: ''; position: absolute; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; } /* Eyes-open frames use the 64x74 mask-group exports so they align pixel-for-pixel with the eyes-closed (blink) frames — the hover swap then only changes the eyes, no jump. (The other right-puppy buttons keep the tighter 60x64 puppy-right.svg.) */ [data-theme='client'] main .ctp-hero-card a[class*='bg-']::after { right: 4px; top: -24px; width: 64px; height: 74px; background-image: url('/ctp/buttons/puppy-right-open.svg'); } [data-theme='client'] main .ctp-about a[class*='bg-']::after { left: 6px; top: -24px; width: 64px; height: 74px; background-image: url('/ctp/buttons/puppy-left.svg'); } [data-theme='client'] main .ctp-community a[class*='bg-']::after { right: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-image: url('/ctp/buttons/paw.svg'); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-theme='client'] main .ctp-hero-card a[class*='bg-']:hover, [data-theme='client'] main .ctp-about a[class*='bg-']:hover { background-color: hsl(var(--destructive)) !important; } [data-theme='client'] main .ctp-community a[class*='bg-']:hover { background-color: hsl(var(--accent)) !important; } /* Blink: on hover the dog swaps to the eyes-closed frame (Figma hover variants 197:2644 / 240:2970). Same 64x74 geometry as the open frame, so only the eyes change. */ [data-theme='client'] main .ctp-hero-card a[class*='bg-']:hover::after { background-image: url('/ctp/buttons/puppy-right-blink.svg'); } [data-theme='client'] main .ctp-about a[class*='bg-']:hover::after { background-image: url('/ctp/buttons/puppy-left-blink.svg'); } /* markup — community "See How We Give Back" paw rotates on hover (already yellow) */ [data-theme='client'] main .ctp-community a[class*='bg-']:hover::after { transform: translateY(-50%) rotate(38deg); } /* Card radius to match Figma's 20px cards (reviews, service-area, etc.) */ [data-theme='client'] [class*='rounded-2xl'], [data-theme='client'] [class*='rounded-xl'] { border-radius: 20px; } /* ============================================== HEADER — ComforTemp (data-header-layout='ctp') Figma 408:4169. Two-tone bar: orange 55px / white 80px, 135px tall. ============================================== */ /* Kill the shared sticky bg so our two-tone gradient shows */ [data-header='client'] header[data-header-layout='ctp'] { background: transparent; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06); } /* Full-width two-tone background: orange top 55px, white below */ [data-header='client'] header .ctp-header { background: linear-gradient( to bottom, hsl(var(--accent)) 0, hsl(var(--accent)) 55px, hsl(var(--background)) 55px, hsl(var(--background)) 100% ); } [data-header='client'] header .ctp-header-inner { position: relative; display: flex; align-items: stretch; gap: 32px; min-height: 135px; } /* Logo — left, vertically centered across both strips */ [data-header='client'] header .ctp-logo { display: flex; align-items: center; flex-shrink: 0; } [data-header='client'] header .ctp-logo :is(img, svg) { height: 96px; width: auto; } [data-header='client'] header .ctp-right { flex: 1 1 auto; display: flex; flex-direction: column; } /* Top strip — orange, 55px */ [data-header='client'] header .ctp-utility { height: 55px; gap: 22px; } [data-header='client'] header .ctp-emergency { font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 1; text-transform: uppercase; color: hsl(var(--primary)); white-space: nowrap; } [data-header='client'] header .ctp-pills { gap: 12px; } /* White pills, purple text (sit on the orange strip) */ [data-header='client'] header .ctp-pill { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 25px; border-radius: 8px; background: hsl(var(--background)); color: hsl(var(--primary)); font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; } [data-header='client'] header .ctp-pill:hover { background: hsl(var(--primary)); color: hsl(var(--background)); } /* Bottom strip — white, 80px: nav + phone */ [data-header='client'] header .ctp-mainrow { height: 80px; gap: 32px; } /* Nav items — purple, semibold, uppercase */ [data-header='client'] header .ctp-nav :is(a, button.nav-trigger) { font-family: var(--font-body); font-weight: 600; font-size: 17px; text-transform: uppercase; color: hsl(var(--primary)); background: transparent !important; text-decoration: none !important; } [data-header='client'] header .ctp-nav :is(a, button.nav-trigger):hover { color: hsl(var(--secondary)); background: transparent !important; } /* Nav item padding. Internals added items until the bar hit 7 across; at 1440px that rendered 861px wide with only 32px of clearance from the logo. This belongs in Settings > Header > Menu Item Settings > itemPadding, but core applies that value inline to `button.nav-trigger` only — plain items keep Tailwind's px-4. Setting it in the CMS therefore produces a half-styled bar (submenu items 8px, plain links 16px), so the CMS field is deliberately left empty and both are set here instead. Move this back to the CMS once core applies itemPadding to links too. */ [data-header='client'] header .ctp-nav :is(a, button.nav-trigger) { padding-left: 8px; padding-right: 8px; } /* Blue phone button with dog mascot poking above its top-left */ [data-header='client'] header .ctp-phone-btn { position: relative; display: inline-flex; align-items: center; height: 49px; padding: 0 20px 0 72px; border-radius: 8px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-family: var(--font-body); font-weight: 700; font-size: 22px; line-height: 1; white-space: nowrap; text-decoration: none; transition: background 0.2s ease; } /* #12 — hover turns red and the dog shuts its eyes (blink), matching the other dog buttons. The rest dog is an ; overlay the closed-eyes frame on hover. */ [data-header='client'] header .ctp-phone-btn:hover { background: hsl(var(--destructive)); } [data-header='client'] header .ctp-phone-btn::before { content: ''; position: absolute; left: 8px; top: -19px; width: 64px; height: 74px; background: url('/ctp/buttons/puppy-right-blink.svg') no-repeat center / contain; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 1; } [data-header='client'] header .ctp-phone-btn:hover::before { opacity: 1; } [data-header='client'] header .ctp-phone-btn:hover .ctp-phone-dog { opacity: 0; } [data-header='client'] header .ctp-phone-dog { position: absolute; left: 8px; top: -19px; width: 64px; height: auto; pointer-events: none; transition: opacity 0.15s ease; } /* Header nav neutralize (per CLAUDE.md — remove default hover backgrounds) */ [data-header='client'] header nav a, [data-header='client'] header nav button.nav-trigger { background-color: transparent !important; text-decoration: none !important; } [data-header='client'] header nav a:hover, [data-header='client'] header nav button.nav-trigger:hover, [data-header='client'] header nav button.nav-trigger[data-state='open'], [data-header='client'] header nav button.nav-trigger[data-state='open']:hover { background-color: transparent !important; text-decoration: none !important; } /* Mobile/tablet header utility bar (orange). The phone becomes a plain text link (no blue pill, no dog) so it can't overlap the logo, and everything sits inside the orange bar. Tablet: emergency line + phone side-by-side (2 cols). */ [data-header='client'] header .ctp-utility-mobile { background: hsl(var(--accent)); padding: 10px 0; } /* Centering (and its display:flex) must stay below lg: an unscoped display here out-specifies Tailwind's `lg:hidden`, leaking this bar onto desktop as a duplicate orange strip under the header. */ @media (max-width: 1023px) { [data-header='client'] header .ctp-utility-mobile { display: flex; align-items: center; justify-content: center; } } [data-header='client'] header .ctp-utility-mobile .container { gap: 2px; justify-content: center; } [data-header='client'] header .ctp-utility-mobile .ctp-emergency { line-height: 1.2; } /* phone → text link */ [data-header='client'] header .ctp-utility-mobile .ctp-phone-mobile { margin-top: 0; } [data-header='client'] header .ctp-utility-mobile .ctp-phone-btn { background: transparent !important; color: hsl(var(--primary)) !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; font-size: 20px !important; } [data-header='client'] header .ctp-utility-mobile .ctp-phone-dog { display: none !important; } /* tablet: emergency + phone side-by-side */ @media (min-width: 768px) { [data-header='client'] header .ctp-utility-mobile .container { flex-direction: row !important; justify-content: center; align-items: center; gap: 22px; } } [data-header='client'] header .ctp-mobile-logo-row { background: hsl(var(--background)); padding: 10px 0; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06); } [data-header='client'] header .ctp-mobile-logo-row--collapsed { display: none; } /* ============================================== Featured Services — horizontal bordered cards (Figma 408:4187) Restyles the featuredItems Default variant (vertical grid → rows). ============================================== */ /* container reserves room on the left for the dog mascot, cards fill the rest */ [data-theme='client'] [data-block-type='featuredItems'] .container { position: relative; padding-left: 430px; } [data-theme='client'] [data-block-type='featuredItems'] .container::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 390px; /* markup #1 — enlarge the pup + paw-prints illustration */ height: 470px; background: url('/ctp/icons/services-dog.svg') no-repeat left center / contain; pointer-events: none; } [data-theme='client'] [data-block-type='featuredItems'] .grid { grid-template-columns: 1fr !important; gap: 20px !important; max-width: none; margin: 0; } /* grid: icon column (spans both rows) + text column (title / description) — avoids the Default variant's w-full/shrink-0 overflowing in a flex row */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div { display: grid !important; grid-template-columns: 128px minmax(0, 1fr); /* markup #28 — wider icon column */ grid-template-rows: auto auto; column-gap: 24px; row-gap: 2px; align-items: center; max-width: none !important; width: 100%; border: 1px solid hsl(var(--border)); border-radius: 20px; background: hsl(var(--card)); padding: 16px 30px 40px; text-align: left; position: relative; overflow: hidden; } /* icon badge — the uploaded SVG already carries the colored shape */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div > div:first-child { grid-row: 1 / span 2; grid-column: 1; height: 128px !important; /* markup #28 — icon fills more of the card height */ width: 128px !important; } [data-theme='client'] [data-block-type='featuredItems'] .grid h2 { grid-column: 2; align-self: end; text-align: left !important; margin: 0; font-weight: 700; /* markup #30 — service titles bold */ color: hsl(var(--primary)); } [data-theme='client'] [data-block-type='featuredItems'] .grid p { grid-column: 2; align-self: start; text-align: left !important; margin: 0; font-size: 0.9rem; padding-right: 150px; /* keep copy clear of the Learn More corner tag */ } /* Learn More = gray diagonal corner tag, bottom-right (Figma 173:4050) */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div a { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 46px 8px 20px; /* right padding reserves room for the absolute paw */ background: #aaaaaa; color: #fff !important; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.01em; border-radius: 20px 0 20px 0; transition: background-color 0.35s ease-in-out; white-space: nowrap; /* keep "LEARN MORE" + paw on one line */ } /* markup #29 — paw next to "Learn More" (white, matches the label); waves on hover */ /* Paw pinned absolute to the right (same pattern as the other paw buttons) with reserved padding on the tag, so it can never overlap "LEARN MORE" at any width. */ [data-theme='client'] [data-block-type='featuredItems'] .grid > div a::after { content: ''; position: absolute; right: 20px; top: 50%; width: 18px; height: 20px; transform: translateY(-50%); transform-origin: bottom center; background: url('/ctp/buttons/paw.svg') no-repeat center / contain; } /* markup #29 — each Learn More hovers to its service's icon color (card order: Cooling, Heating, IAQ, Maintenance). Cooling/Heating are exact-hex tokens; IAQ and Maintenance already equal --primary / --accent. */ [data-theme='client'] [data-block-type='featuredItems'] { --ctp-svc-cooling: 202 100% 38%; /* #007CC2 */ --ctp-svc-heating: 356 87% 47%; /* #DF101D */ } [data-theme='client'] [data-block-type='featuredItems'] .grid > div:nth-child(1) a:hover { background: hsl(var(--ctp-svc-cooling)); } [data-theme='client'] [data-block-type='featuredItems'] .grid > div:nth-child(2) a:hover { background: hsl(var(--ctp-svc-heating)); } [data-theme='client'] [data-block-type='featuredItems'] .grid > div:nth-child(3) a:hover { background: hsl(var(--primary)); /* IAQ #482B87 */ } [data-theme='client'] [data-block-type='featuredItems'] .grid > div:nth-child(4) a:hover { background: hsl(var(--accent)); /* Maintenance #FAB155 */ } [data-theme='client'] [data-block-type='featuredItems'] .grid > div a:hover::after { animation: ctp-learnmore-paw-wave 0.7s ease-in-out infinite; } @keyframes ctp-learnmore-paw-wave { 0%, 100% { transform: translateY(-50%) rotate(0deg); } 25% { transform: translateY(-50%) rotate(-16deg); } 60% { transform: translateY(-50%) rotate(12deg); } 85% { transform: translateY(-50%) rotate(-6deg); } } /* neutralize the block's inner

Gas Furnace Maintenance in Glen Ellyn 60137