/* Theme Name: McAllister Home Builders Theme URI: https://mcallisterbuilders.com Author: McAllister Home Builders Author URI: https://mcallisterbuilders.com Description: Custom WordPress theme for McAllister Home Builders — family-owned backyard remodeling contractor serving Woodland Hills, CA and the surrounding 60-mile radius. Mirrors the Vercel marketing site (mcallisterbuilder.vercel.app) — terracotta + alabaster palette, Lora serif + Inter body. Version: 2.0.3 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: mcallister Tags: business, contractor, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready */ /* ========================================================= DESIGN TOKENS — sourced from the Vercel build ========================================================= */ /* PHASE-0 TOKEN ALIGNMENT (2026-05-17): see D:\Desktop\Ultra corn\design-tokens.json - --mc-bg: #FFFFFF → #F5F2EA (Vercel body page-bg; surfaces alternate explicit FFF / F7F5F0 / F0EDE5) - --mc-surface: #FFFFFF unchanged (Vercel --color-bg inside .theme-warmth = white card surface) - --mc-surface-soft: #F5EFE6 → #F7F5F0 (Vercel --color-surface) - --mc-surface-alt: #F5EFE6 → #F0EDE5 (Vercel --color-surface-alt) - --mc-surface-warm: #F5EFE6 → #F0EDE5 (alias of surface-alt) - --mc-ink: #1F1B17 → #2D2A24 (Vercel computed body color — Tailwind text-mc-text) - --mc-ink-heading: NEW #0C0C0C (Vercel .theme-warmth --color-ink, used on h1/h2/h3) - --mc-text: #1F1B17 unchanged (Vercel :root --color-text — still referenced widely; kept for compat) - --mc-text-mid: #6B6059 → #3D3631 (Vercel :root --color-text-mid) - --mc-text-light: #B5B4A8 → #6B6359 (Vercel :root --color-text-light) - --mc-accent-olive: NEW #6A8C45 (alias of --mc-olive; Vercel eyebrows + stat numbers) - --mc-cta-bg: NEW #A64528 (alias of --mc-accent-dark / terra-700; primary CTA bg) - --mc-terra-700: NEW #A64528 (canonical terra-700 token name from Vercel) - --mc-cream-50: NEW #FBF9F4 (alias of --mc-accent-cream) - --mc-sage-900: NEW #286848 (alias of --mc-sage) - --mc-page-bg: NEW #F5F2EA (Vercel body bg — independent of --mc-bg for explicit refs) - --mc-card-border: NEW #F0EDE5 (Vercel card border) - --mc-focus-ring: NEW rgba(197,87,49,1) - --mc-olive-shadow: NEW #3F5B2A - --mc-footer-text: NEW rgba(245,242,234,0.8) Container/padding kept at 1408/40px desktop. Note: --mc-accent stays #B5552B (terracotta, Vercel :root --color-accent); the .theme-warmth scope below overrides it to olive #6A8C45 for elements inside that wrapper. */ :root { /* Palette — Vercel-exact tokens extracted from _vercel.css */ --mc-bg: #F5F2EA; /* Vercel body page-bg (was #FFF — caused white strip above hero) */ --mc-page-bg: #F5F2EA; /* Explicit alias when --mc-bg might be themed differently */ --mc-surface: #FFFFFF; /* Vercel --color-bg inside .theme-warmth (card/white surface) */ --mc-surface-soft: #F7F5F0; /* Vercel --color-surface (alternating section bg #1) */ --mc-surface-warm: #F0EDE5; /* alias of surface-alt */ --mc-surface-alt: #F0EDE5; /* Vercel --color-surface-alt (alternating section bg #2) */ --mc-ink: #2D2A24; /* Vercel computed body color (Tailwind text-mc-text) */ --mc-ink-heading: #0C0C0C; /* Vercel .theme-warmth --color-ink (h1/h2/h3) */ --mc-ink-muted: #6B6059; /* Vercel --color-ink-muted */ --mc-text: #1F1B17; /* Vercel :root --color-text (kept for compat with many selectors) */ --mc-text-mid: #3D3631; /* Vercel --color-text-mid (was #6B6059) */ --mc-text-light: #6B6359; /* Vercel --color-text-light (was #B5B4A8) */ --mc-body-text: #2D2A24; /* Vercel computed body color */ --mc-border: #E3DCD2; --mc-card-border: #F0EDE5; /* Vercel computed card border */ --mc-accent: #B5552B; /* Vercel :root --color-accent (terracotta, decorative role) */ --mc-accent-olive: #6A8C45; /* Vercel .theme-warmth --color-accent (olive-sage — eyebrows + stats) */ --mc-accent-2: #E4915B; /* Vercel --color-accent-2 (warm orange) */ --mc-accent-dark: #A64528; /* Vercel terra-700 (primary CTA bg) */ --mc-accent-deep: #8C3F1E; /* Vercel --color-accent-dark */ --mc-accent-cream: #FBF9F4; /* Vercel cream-50 (primary CTA text) */ --mc-cta-bg: #A64528; /* Alias of accent-dark — clarifies CTA role */ --mc-cta-text: #FBF9F4; /* Alias of accent-cream — clarifies CTA role */ --mc-cream-50: #FBF9F4; /* canonical token name */ --mc-terra-600: #C55731; /* Vercel terra-600 (ring-color, decorative) */ --mc-terra-700: #A64528; /* canonical token name (= accent-dark = cta-bg) */ --mc-sage: #286848; /* Vercel sage-900 (footer bg) */ --mc-sage-900: #286848; /* canonical token name */ --mc-sage-700: #2A7058; /* Vercel sage-700 */ --mc-olive: #6A8C45; /* alias of accent-olive */ --mc-olive-600: #6A8C45; /* canonical token name */ --mc-olive-shadow: #3F5B2A; /* olive button shadow */ --mc-orange: #E4915B; --mc-terracotta: #E28A63; --mc-star: #E5A93C; --mc-on-dark: #FFFFFF; --mc-footer-text: rgba(245,242,234,0.8); --mc-focus-ring: rgba(197,87,49,1); /* Gradient */ --mc-gradient-primary: linear-gradient(135deg, #6A8C45 0%, #E4915B 100%); /* Shadows + radii */ --mc-shadow-card: 0 8px 32px 0 rgba(40, 104, 72, 0.10); --mc-shadow-cta: 0 4px 14px -6px rgba(166, 69, 40, 0.4); --mc-shadow-soft: 0 1px 2px rgba(0,0,0,.04); --mc-shadow-card-hover: 0 12px 48px rgba(40,104,72,0.14); --mc-shadow-cta-hover: 0 12px 28px -8px rgba(166,69,40,0.5); --mc-radius-xs: 2px; --mc-radius-sm: 8px; --mc-radius-md: 8px; --mc-radius-lg: 12px; --mc-radius-xl: 20px; --mc-radius-card: 12px; --mc-radius-pill: 9999px; /* Layout */ --mc-container: 1408px; --mc-pad-x: 2.5rem; /* 40px desktop */ --mc-pad-x-mobile: 1.25rem; /* 20px @375 */ --mc-container-pad: clamp(1.25rem, 1.25rem + 2vw, 5rem); /* Vercel responsive --container-padding */ /* Vercel: --space-section: clamp(7rem, 14vh, 12.5rem) — fluid section padding */ --mc-section-y: clamp(7rem, 14vh, 12.5rem); --mc-section-y-sm: clamp(4rem, 8vh, 6rem); --mc-space-section: clamp(7rem, 14vh, 12.5rem); --mc-space-gap: clamp(1.5rem, 2.5vw, 3.5rem); /* Typography */ --mc-font-serif: "Lora", Georgia, serif; --mc-font-display: "Lora", Georgia, serif; /* alias used by some components */ --mc-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Motion (Agent-7: canonical transition tokens — Vercel parity) */ --mc-ease: cubic-bezier(0.4, 0, 0.2, 1); --mc-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); /* hero h1 split-text + soft reveals */ --mc-dur-color: 150ms; /* nav links, areachips, text-button color hover */ --mc-dur-fast: 200ms; /* primary CTA / button-all */ --mc-dur: 300ms; /* card hover transform/shadow */ --mc-dur-slow: 500ms; /* image hover zoom (.mc-recent) */ --mc-dur-image: 700ms; /* service-card image hover (Vercel = 0.7s) */ --mc-dur-reveal: 600ms; /* in-view fade-up reveals */ --mc-dur-counter: 1500ms;/* count-up duration */ --mc-transition-default: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --mc-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --mc-transition-color: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); --mc-transition-card: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Tints hoisted from contact-page inline hex (Loop addition) */ --mc-tint-peach: #F7E9D4; --mc-tint-sage: #E5EFE6; --mc-tint-sand: #F2EBE0; --mc-honey-200: #F4E8C6; --mc-sage-50: #EDF5EE; --mc-cream-200: #E8DFC9; --mc-form-card-bg: #FDF3E5; } /* ========================================================= .theme-warmth — Vercel-canonical scope. Mirrors Vercel _vercel.css line 5+ so any element wrapped in .theme-warmth resolves to the exact Vercel palette. ========================================================= */ .theme-warmth { --color-bg: #FFFFFF; --color-surface: #F7F5F0; --color-surface-alt: #F0EDE5; --color-ink: #0C0C0C; --color-ink-muted: #6B6059; --color-accent: #6A8C45; --color-accent-2: #E4915B; --color-on-dark: #FFFFFF; --gradient-primary: linear-gradient(135deg, #6A8C45 0%, #E4915B 100%); --font-display: var(--mc-font-serif); --font-body: var(--mc-font-sans); --font-accent: var(--mc-font-serif); --h1-size: clamp(2rem, 1.2rem + 1.8vw, 3rem); --h1-size-mobile: clamp(2rem, 1.7rem + 0.8vw, 2.5rem); --h2-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); --h2-size-mobile: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); --h3-size: clamp(1.375rem, 1.05rem + 0.95vw, 1.875rem); --h4-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem); --h5-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); --body-size: 17px; --body-line: 1.9em; --label-size: 12px; --accent-size: 13px; --space-section: clamp(7rem, 14vh, 12.5rem); --space-gap: clamp(1.5rem, 2.5vw, 3.5rem); --radius: 2px; --border-weight: 1px; --shadow-card: 0 2px 8px rgba(0,0,0,0.04); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.08); } @media (max-width: 1024px) { .theme-warmth { --h1-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem); --h2-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); } } /* ========================================================= BASE / RESET ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--mc-font-sans); color: var(--mc-body-text); /* Vercel-exact body bg: rgb(245, 242, 234) — the cream that shows through the transparent sticky header's 80px strip above the hero. */ background: var(--mc-page-bg); /* Vercel parity: body is 16/1.65 (was 15/1.7 — caused proportional text size drift on every page). */ font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--mc-sage); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--mc-accent-deep); } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; border-radius: 4px; } h1, h2, h3, h4, h5 { font-family: var(--mc-font-serif); color: var(--mc-ink-heading); margin: 0 0 .5em; line-height: 1.2; font-weight: 500; letter-spacing: -.005em; } h1 { font-size: clamp(28px, 4.5vw, 42.3px); line-height: 1.15; letter-spacing: -.01em; } h2 { font-size: clamp(1.625rem, 3.4vw, 31.4px); } h3 { font-size: 20px; font-weight: 600; } h4 { font-size: 17px; font-weight: 600; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-left: 1.25rem; } /* ========================================================= LAYOUT UTILITIES ========================================================= */ .mc-container, .container-brand { max-width: var(--mc-container); margin-inline: auto; padding-inline: var(--mc-pad-x); width: 100%; } @media (max-width: 768px) { .mc-container, .container-brand { padding-inline: 1.25rem; } } .mc-section { padding-block: var(--mc-section-y); } .mc-section--sm { padding-block: var(--mc-section-y-sm); } .mc-section--white { background: var(--mc-surface); } .mc-section--soft { background: var(--mc-surface-soft); } .mc-section--warm { background: var(--mc-surface-warm); } /* Compat aliases */ .section { padding-block: var(--mc-section-y); } .section--soft { background: var(--mc-surface-soft); } .section--band { background: var(--mc-surface-warm); } .section--dark { background: var(--mc-ink); color: #fff; } .section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; } @media (max-width: 768px) { .mc-section, .section { padding-block: 56px; } .mc-section--sm { padding-block: 48px; } } .mc-eyebrow, .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 600; color: var(--mc-sage); margin-bottom: .75rem; font-family: var(--mc-font-sans); } /* Vercel-parity typographic scale (matches --h1-size / --h2-size from Vercel CSS): desktop (>1024): h1 clamp(2rem, 1.2rem + 1.8vw, 3rem) — 32→48px range h2 clamp(1.5rem, 1rem + 1.2vw, 2.125rem) — 24→34px range mobile (<=1024): h1 clamp(2rem, 1.7rem + 1.2vw, 2.5rem) h2 clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem) */ .mc-h1 { font-size: clamp(2rem, 1.2rem + 1.8vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--mc-ink); font-family: var(--mc-font-serif); } .mc-h2 { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); font-weight: 500; line-height: 1.1; color: var(--mc-ink); font-family: var(--mc-font-serif); } .mc-h3 { font-size: 20px; font-weight: 600; color: var(--mc-ink); font-family: var(--mc-font-serif); } @media (max-width: 1024px) { .mc-h1 { font-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem); } .mc-h2 { font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); } } .mc-lead, .lede { font-size: 17px; color: var(--mc-text-mid); line-height: 1.7; max-width: 60ch; } .mc-text-center, .text-center { text-align: center; } .mc-text-muted, .text-muted { color: var(--mc-text-light); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .divider { height: 1px; background: var(--mc-border); margin: 2rem 0; border: 0; } /* ========================================================= SKIP LINK + SR-ONLY ========================================================= */ .skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--mc-accent-dark); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--mc-radius-sm) var(--mc-radius-sm); z-index: 9999; font-weight: 600; text-decoration: none; transition: top .2s; } .skip-link:focus { top: 0; color: #fff; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================= BUTTONS ========================================================= */ .mc-btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 8px 16px; font-size: 14px; font-weight: 500; line-height: 1.2; border-radius: var(--mc-radius-pill); border: 1px solid transparent; font-family: var(--mc-font-sans); text-decoration: none; transition: background-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease), border-color var(--mc-dur-fast) var(--mc-ease), transform var(--mc-dur-fast) var(--mc-ease), box-shadow var(--mc-dur-fast) var(--mc-ease); cursor: pointer; } .mc-btn--primary, .btn-primary, .btn-accent { background: var(--mc-accent-dark); color: var(--mc-accent-cream); border-color: var(--mc-accent-dark); box-shadow: var(--mc-shadow-cta); padding: 8px 16px; } .mc-btn--primary:hover, .btn-primary:hover, .btn-accent:hover { /* Vercel parity: bg stays terracotta, lift translateY(-2px), add terracotta glow */ background: var(--mc-accent-dark); border-color: var(--mc-accent-dark); color: var(--mc-accent-cream); transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(166, 69, 40, 0.5); } /* Ghost = outline pill, bigger padding (Vercel parity) */ .mc-btn--ghost, .btn-secondary { background: transparent; color: var(--mc-ink); border: 1.5px solid var(--mc-accent-dark); padding: 14px 32px; box-shadow: none; } .mc-btn--pill { /* Vercel: rounded-full px-8 py-3.5 with inline arrow icon */ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; padding: .875rem 2rem; font-weight: 500; white-space: nowrap; } .mc-btn--pill svg { width: 1rem; height: 1rem; flex: none; } .mc-btn--ghost:hover, .btn-secondary:hover { /* Loop 23: Vercel parity — hover fills terra-700 with cream text + lift + glow. Previously was a faint translucent terra tint with ink text. */ background: var(--mc-accent-dark); color: var(--mc-accent-cream); border-color: var(--mc-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(166, 69, 40, 0.45); } .mc-btn--sage { background: var(--mc-sage); color: #fff; border-color: var(--mc-sage); } .mc-btn--sage:hover { background: #1f5742; color: #fff; } .mc-btn--lg { padding: 14px 24px; font-size: 15px; } /* ========================================================= CARDS / GRID ========================================================= */ .mc-card, .card { background: var(--mc-surface); padding: 24px; border-radius: var(--mc-radius-card); border: 1px solid var(--mc-surface-warm); box-shadow: var(--mc-shadow-card); transition: transform .2s ease, box-shadow .2s ease; } .mc-card--sm { padding: 14px; } .mc-card:hover, .card:hover { transform: translateY(-2px); } .mc-card h3 { margin-top: 0; } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .grid-4 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .grid-5 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-5 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } } /* Service cards (homepage trio) — Vercel parity: cream surface, 20px radius, subtle neutral shadow, single 0.3s ease for all property transitions. */ .service-card { background: var(--mc-surface-soft); border: 1px solid var(--mc-surface-warm); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: .3s var(--mc-ease); text-decoration: none; color: inherit; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04); } .service-card:hover { /* Loop 23: Vercel parity — shadow-only swap, NO transform (Vercel uses transition-all duration-300 with only hover:shadow-lg). */ color: inherit; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10); border-color: var(--mc-surface-warm); } .service-card__media { aspect-ratio: 4 / 3; background: var(--mc-surface-warm); overflow: hidden; } .service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--mc-ease); } .service-card:hover .service-card__media img { transform: scale(1.03); } /* Loop 18: trimmed body padding/spacing to close section-height delta vs Vercel. Was: 20px 20px 24px / h3 mb 8px / p mb 12px = ~52px vertical. Now ~36px. */ .service-card__body { padding: 1rem 1.25rem 1.125rem; } /* Loop A8: Vercel parity — service-card title is sage-700 non-italic display font. */ .service-card__body h3, .service-card__body h2 { font-size: 1.125rem; margin-bottom: .35rem; color: var(--mc-sage-700, #2A7058); font-family: var(--mc-font-display, var(--mc-font-serif)); font-style: normal; font-weight: 600; letter-spacing: -0.01em; } .service-card__body p { color: var(--mc-text-mid); font-size: 14.5px; line-height: 1.45; margin: 0 0 .5rem; } .service-card__more { font-weight: 600; color: var(--mc-sage-700, #2A7058); text-decoration: none; font-size: .9rem; } /* Check-list bullets */ .check-list { list-style: none; padding: 0; margin: 1rem 0; } .check-list li { position: relative; padding-left: 1.75rem; margin: .5rem 0; line-height: 1.55; color: var(--mc-text); } .check-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #DDEEE5; } .check-list li::after { content: ""; position: absolute; left: .28rem; top: .55em; width: .55rem; height: .3rem; border-left: 2px solid var(--mc-sage); border-bottom: 2px solid var(--mc-sage); transform: rotate(-45deg); } /* ========================================================= SPLIT (image + copy) ========================================================= */ .split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--reverse > :first-child { order: 2; } } .split-media { border-radius: var(--mc-radius-card); overflow: hidden; box-shadow: var(--mc-shadow-card); aspect-ratio: 4 / 3; } .split-media img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================= HEADER / NAV ========================================================= */ /* HEADER — PHASE 1 (2026-05-16): re-verified via Vercel computed-style extraction. Vercel header background-color is actually rgba(245, 242, 234, 0) — TRANSPARENT. It LOOKS opaque cream visually because the body background underneath is the same cream (#F5F2EA), so a transparent overlay reads identically to an opaque overlay. The plan was right after all; my earlier "revert to opaque" was based on a visual coincidence. Now matches Vercel computed style exactly. */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(245, 242, 234, 0); border-bottom: 1px solid rgba(0, 0, 0, 0); box-shadow: none; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .site-header.scrolled { background: rgba(245, 242, 234, 0.92); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); border-bottom-color: rgba(15, 23, 18, 0.08); box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; /* PHASE 1 (2026-05-16): Vercel-extracted header height is 81px (computed bounding rect). Earlier Fix 6 (64px) was based on a wrong premise — reverted to 80px (close to Vercel's 81). */ min-height: 80px; } .site-brand { display: inline-flex; align-items: baseline; gap: .5rem; font-family: var(--mc-font-serif); font-weight: 500; font-size: 1.35rem; letter-spacing: -.01em; color: var(--mc-ink); text-decoration: none; } .site-brand:hover { color: var(--mc-accent-dark); } .site-brand .brand-mark { display: none; } .site-brand__logo { width: auto; /* PHASE 1 (2026-05-16): Vercel-extracted token says logo height is 48px (computed). Earlier Fix 1 (56px) was based on a wrong premise — reverted. */ height: 48px; max-height: 48px; display: block; object-fit: contain; } @media (max-width: 640px) { .site-brand__logo { height: 44px; max-height: 44px; } } .primary-nav { display: none; } @media (min-width: 980px) { .primary-nav { display: block; } } /* Agent-6 (2026-05-17): Vercel parity — nav uses gap-10 (40px) between top-level items. Previous WP value (.25rem gap + .75rem item margins) produced ~24px spacing. */ .primary-nav > ul { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; align-items: center; } .primary-nav a { display: inline-flex; align-items: center; gap: .3rem; padding: 4px 0; margin: 0; /* Agent-6: gap on parent handles spacing now */ font-size: 16px; /* Agent-6 (2026-05-17): Vercel parity — inactive nav links are weight 500 + sage-700; only the aria-current link gets weight 600 + sage-900 (set below). */ font-weight: 500; color: var(--mc-sage-700); text-decoration: none; border-radius: var(--mc-radius-sm); position: relative; transition: color var(--mc-dur-fast, .15s) var(--mc-ease, cubic-bezier(.4, 0, .2, 1)); } .primary-nav a:hover { color: var(--mc-accent-dark); } .primary-nav a[aria-current="page"], .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a { color: var(--mc-sage-900); font-weight: 600; } /* Agent-6 (2026-05-17): Vercel active-indicator is a 20×3px terra-600 pill, centered, bottom -4px. Previous WP rendered as full-width 2px underline. */ .primary-nav a[aria-current="page"]::before, .primary-nav .current-menu-item > a::before, .primary-nav .current_page_item > a::before, .primary-nav .current-menu-ancestor > a::before, .primary-nav .current_page_ancestor > a::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -4px; width: 20px; height: 3px; background: var(--mc-terra-600); border-radius: 9999px; pointer-events: none; } /* Header-parity Fix 4 (2026-05-16): Services dropdown chevron — Vercel renders "Services ▾". Built from a rotated bottom-right border square. Flips on hover/open. */ .primary-nav .has-dropdown > a { display: inline-flex; align-items: center; gap: 4px; } .primary-nav .has-dropdown > a::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); transition: transform .2s var(--mc-ease, cubic-bezier(.4, 0, .2, 1)); margin-left: 4px; flex: 0 0 auto; } .primary-nav .has-dropdown:hover > a::after, .primary-nav .has-dropdown:focus-within > a::after, .primary-nav .has-dropdown > a[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-1px, -2px); } /* Dropdown — Vercel parity: 2-column grid, cream-50 bg, rounded-2xl, ring */ .has-dropdown { position: relative; } /* Loop 27 (2026-05-15): Invisible 12px hover-bridge between trigger and dropdown. Without this, mouse traversal between trigger and menu un-hovers .has-dropdown and the menu closes mid-transit. Pseudo-element sits in the gap and inherits the hover-state from its parent. */ .has-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none; } .has-dropdown:hover::after, .has-dropdown:focus-within::after { pointer-events: auto; } .has-dropdown > .dropdown { position: absolute; top: calc(100% + 0.75rem); left: 50%; transform: translate(-50%, -4px); width: min(640px, 90vw); background: #FBF9F4; border: 1px solid rgba(31, 27, 23, 0.10); border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10), 0 0 0 1px rgba(31, 27, 23, 0.05); padding: .75rem; list-style: none; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 1000; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; } .has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown, .has-dropdown > .dropdown.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .has-dropdown > .dropdown li { list-style: none; } .has-dropdown > .dropdown a { /* Vercel parity: dropdown item matches sage-50 hover, 16px / 500, 8px×12px, 44px min-height */ display: flex; align-items: center; padding: 8px 12px; min-height: 44px; border-radius: 8px; font-size: 16px; font-weight: 500; line-height: 1.25; color: var(--mc-sage); transition: color var(--mc-dur-fast, .15s) var(--mc-ease, cubic-bezier(.4, 0, .2, 1)), background-color var(--mc-dur-fast, .15s) var(--mc-ease, cubic-bezier(.4, 0, .2, 1)); } .has-dropdown > .dropdown a:hover, .has-dropdown > .dropdown a:focus-visible { background: rgb(237, 245, 238); /* Vercel sage-50 */ color: var(--mc-sage); } .dropdown__divider { grid-column: 1 / -1; border-top: 1px solid rgba(31, 27, 23, 0.08); margin: .35rem 0; } .dropdown__viewall { grid-column: 1 / -1; color: var(--mc-accent-dark) !important; font-weight: 600; justify-content: center; } .header-phone { display: none; align-items: center; gap: .35rem; color: var(--mc-sage); font-weight: 600; font-size: 14px; text-decoration: none; margin-right: .5rem; } .header-phone:hover { color: #1f5742; } .header-cta { display: none; } @media (min-width: 980px) { .header-cta, .header-phone { display: inline-flex; } } /* Agent-6 (2026-05-17): Vercel parity — hamburger is bare-icon, no border, no bg, rounded-full hit target, color sage-900. Previous WP rendered a bordered rounded-square. */ .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 9999px; padding: .5rem; color: var(--mc-sage-900); cursor: pointer; } .mobile-toggle:hover { color: var(--mc-accent-dark); } @media (min-width: 980px) { .mobile-toggle { display: none; } } /* Agent-6 (2026-05-17): Vercel parity — mobile menu is a right-side slide-in panel (was: full-width drop-down with white bg). Specs from Vercel computed style: fixed top-0 right-0 h-[100svh] w-[min(360px,85vw)] z-[1110] bg-cream-50, border-left ink-200, shadow-2xl translates from translate-x-full → translate-x-0 in 300ms ease-out */ .mobile-menu-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(79, 107, 86, 0.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s ease-out; } .mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; } .mobile-menu { position: fixed; top: 0; right: 0; z-index: 1110; height: 100svh; width: min(360px, 85vw); background: var(--mc-cream-50); border-left: 1px solid rgba(31, 27, 23, 0.10); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow-y: auto; transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); padding: 60px 24px 24px; display: block; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 9999px; color: var(--mc-sage-900); cursor: pointer; transition: background .15s ease, color .15s ease; } .mobile-menu-close:hover { background: rgba(31,27,23,.05); color: var(--mc-accent-dark); } .mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .mobile-menu > .mobile-menu-list { padding: 0; } .mobile-menu li { margin: 0; } .mobile-menu a { /* Vercel parity (src/components/design/shared/MobileMenu.tsx): full-width row, uppercase display font, 15px tracking-wide, left-aligned with a 1px surface-alt border-bottom separator, 44px min-height touch target. */ display: flex; align-items: center; min-height: 44px; padding: 14px 4px; border-bottom: 1px solid var(--mc-surface-alt, #F0EDE5); color: var(--mc-ink, #2D2A24); text-decoration: none; font-family: var(--mc-font-serif, "Lora", Georgia, serif); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; transition: color .15s ease; } .mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--mc-accent-dark, #A64528); background: transparent; } .mobile-menu a[aria-current="page"] { color: var(--mc-accent-dark, #A64528); } .mobile-menu .mobile-cta { /* Vercel parity: filled terra accent with on-dark cream text. Was rendering as sage-on-terra (very low contrast) because the base .mc-btn--primary token cascaded. */ margin: 16px 0 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 8px; background: var(--mc-accent, #B5552B) !important; color: var(--mc-cream-50, #FBF9F4) !important; font-family: var(--mc-font-sans, Inter, sans-serif); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; text-align: center; border-bottom: 0; } .mobile-menu .mobile-cta:hover, .mobile-menu .mobile-cta:focus-visible { background: var(--mc-accent-dark, #A64528) !important; color: var(--mc-cream-50, #FBF9F4) !important; } .mobile-submenu { list-style: none; /* Indent from the left to match the left-aligned parent list. */ padding: 4px 0 8px 16px !important; margin: 4px 0 8px 0 !important; border-left: 2px solid rgba(31, 27, 23, 0.08); border-right: 0; display: flex; flex-direction: column; gap: 0; } .mobile-submenu a { /* Submenu items are smaller, mixed-case, and have no separator line of their own (the parent toggle's border-bottom is the only separator above; submenu lives nested inside that). */ min-height: 36px; padding: 8px 12px; border-bottom: 0; font-family: var(--mc-font-sans, Inter, sans-serif); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; } /* ========================================================= HERO ========================================================= */ /* HERO — Vercel parity ("relative isolate flex min-h-[100svh] items-end overflow-hidden md:min-h-0 md:aspect-[3/2] lg:min-h-[60svh]") */ .mc-hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; } @media (min-width: 768px) { .mc-hero { min-height: 0; aspect-ratio: 3 / 2; } } @media (min-width: 1024px) { .mc-hero { min-height: 60svh; aspect-ratio: 3 / 2; } } .mc-hero__bg { position: absolute; inset: 0; z-index: -20; } .mc-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; display: block; } @media (min-width: 768px) { .mc-hero__bg img { object-position: 50% 50%; } } @media (min-width: 1024px) { .mc-hero__bg img { object-position: 0% 0%; } } /* Mobile-only dark gradient overlay (hidden on lg+) — Vercel: `lg:hidden` */ .mc-hero::before { content: ""; position: absolute; inset: 0; z-index: -10; background: linear-gradient( to top, rgba(20, 26, 18, 0.78) 0%, rgba(20, 26, 18, 0.55) 35%, rgba(20, 26, 18, 0.20) 65%, rgba(20, 26, 18, 0.00) 100% ); pointer-events: none; } @media (min-width: 1024px) { .mc-hero::before { display: none; } } /* Warmth-grain noise overlay — soft-light at 22% (Vercel parity) */ .mc-hero::after { content: ""; position: absolute; inset: 0; z-index: -10; opacity: 0.22; mix-blend-mode: soft-light; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } .mc-hero .mc-container { width: 100%; position: relative; /* Vercel parity: hero uses .container-design (max-w 1240px, px-[43.2px]). Global .mc-container is 1408px which placed h1 at x=48; Vercel x=135.53. Match by overriding scoped to hero. */ max-width: 1240px; padding-inline: 43.2px; padding-block: 32px; } @media (min-width: 1024px) { .mc-hero .mc-container { padding-block: 40px; } } .mc-hero__inner { max-width: 760px; text-align: left; /* Loop 28 v2: zero padding-block so flex-end seats content at the hero bottom edge. Matches Vercel rendered h1 viewport position (~542 at 1440). */ padding-block: 0; margin-inline: 0; } .mc-hero__media { display: none; } .mc-hero__eyebrow { display: inline-block; text-transform: uppercase; font-size: 11px; letter-spacing: .14em; color: var(--mc-sage); font-weight: 600; margin-bottom: 1.25rem; } .mc-hero h1 { font-family: var(--mc-font-serif); /* Vercel parity: h1 computed font-size 42.3px @ 1268px viewport (3.34vw). */ font-size: clamp(1.85rem, 3.34vw, 45.12px); font-weight: 500; /* Vercel-rendered effective line-height ratio is 1.15 (block-span nesting adds half-leading); declared `leading-[1.08]` in Vercel CSS but actual h1.height/2/font-size = 51.5/45.12 = 1.14. Using 1.15 to match the 103px h1 bounding rect on Vercel (was 1.08 → WP h1 height 97). */ line-height: 1.15; letter-spacing: -.01em; /* Vercel exact: first line cream (#F5EEDF) at all breakpoints. */ color: #F5EEDF; margin-bottom: 0; text-shadow: 0 2px 10px rgba(20, 26, 18, .85), 0 1px 3px rgba(20, 26, 18, .75), 0 0 24px rgba(20, 26, 18, .4); } /* Vercel parity (Loop 19): desktop-only radial gradient scrim BEHIND hero text. Inset -24/-28 (`-inset-y-6 -inset-x-7`), rounded-2xl, dark fade. Sits at z-index -5 between image (z-20) and content (z-0) to darken the photo under the text so dark h1 reads against bright sky/foliage. */ .mc-hero__inner { position: relative; z-index: 1; isolation: isolate; } @media (min-width: 1024px) { .mc-hero__inner::before { content: ""; position: absolute; inset: -24px -28px; z-index: -1; border-radius: 16px; background: radial-gradient( at 35% 55%, rgba(20, 26, 18, 0.62) 0%, rgba(20, 26, 18, 0.45) 55%, rgba(20, 26, 18, 0) 95% ); pointer-events: none; } /* Scrim darkens the photo under the cream h1 so text reads against bright sky/foliage. */ } .mc-hero h1 .mc-hero__accent { /* Vercel exact: second line warm tan (#EFCFA3), italic, normal weight. */ color: #EFCFA3; font-style: italic; display: block; font-weight: 400; letter-spacing: -.01em; } .mc-hero__lead { max-width: 520px; /* Vercel: mt-6 (24px) gap from h1, max-w-[520px] @ lg. */ margin: 24px 0 0; color: rgba(245, 238, 223, .98); font-size: 15px; line-height: 1.7; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); } /* Vercel parity: hero lead is `md:hidden lg:block` — visible on mobile (<768) and desktop (1024+), hidden in the tablet range (768-1023). WP was showing it always → caused Y-drift cascade at 768. */ @media (min-width: 768px) and (max-width: 1023.98px) { .mc-hero__lead { display: none; } } .mc-hero__cta { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .75rem; /* Loop 28 v2: mt-8 (32px) — Vercel CTA group is 32px below the lead p. */ margin-top: 32px; margin-bottom: 0; } /* Vercel-exact hero CTA pill: padding 14px 32px, font-size 16px, line-height 1.65 (=26.4px). Was 14px 24px / 15px / lh 1.2 from .mc-btn--lg defaults — total height 48 vs Vercel 54. */ .mc-hero__cta-btn, a.mc-hero__cta-btn.mc-btn--lg { padding: 14px 32px; font-size: 16px; line-height: 1.65; } .mc-hero__phone { color: var(--mc-sage); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: .35rem; } .mc-hero__google .mc-stars { color: var(--mc-star); letter-spacing: .04em; font-size: 14px; } .mc-areachips { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .5rem; /* Vercel-exact: chips UL has mt-4 (16px) below the Google rating block. */ margin-top: 16px; } .mc-areachips__label { width: 100%; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--mc-text-light); margin-bottom: .25rem; } .mc-areachip { /* Vercel: sage-900 filled pill with cream-50 text — solid dark-green chip. */ background: var(--mc-sage, #286848); border: 1px solid transparent; border-radius: var(--mc-radius-pill); padding: 6px 14px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--mc-accent-cream, #FBF9F4); backdrop-filter: none; -webkit-backdrop-filter: none; } .mc-areachips__extra { display: contents; } .mc-areachips__extra[hidden] { display: none; } .mc-areachips__more { /* Vercel: + N MORE button uses the same sage-filled chip style as the chips. */ background: var(--mc-sage, #286848); border: 1px solid transparent; border-radius: var(--mc-radius-pill); padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--mc-accent-cream, #FBF9F4); cursor: pointer; transition: filter .2s cubic-bezier(.4,0,.2,1); } .mc-areachips__more:hover { filter: brightness(1.15); } /* Vercel hero rating: single-line inline pill — stars + "5.0 Google · 50+ reviews", no card chrome. Vercel rating P has mt-5 (20px) above. */ .mc-hero__google { display: inline-flex; flex-direction: row; align-items: center; gap: .5rem; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; color: var(--mc-accent-cream, #FBF9F4); text-decoration: none; margin: 20px 0 0; } .mc-hero__google-stars { color: var(--mc-star, #E5A93C); letter-spacing: .05em; font-size: 14px; line-height: 1; } .mc-hero__google-text { font-size: 13px; color: var(--mc-accent-cream, #FBF9F4); text-shadow: 0 1px 4px rgba(0, 0, 0, .55); } .mc-hero__google-text strong { color: var(--mc-accent-cream, #FBF9F4); font-weight: 600; } /* Legacy two-line variant — preserved so other pages aren't broken; superseded by single-line above. */ .mc-hero__google-line { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mc-ink); font-weight: 500; } .mc-hero__google-line strong { color: var(--mc-ink); font-weight: 700; } .mc-hero__google-sub { font-size: 11.5px; color: var(--mc-text-mid); } .mc-hero__google-sub strong { color: var(--mc-ink); font-weight: 700; } /* ========================================================= SERVICE STRIP (marquee-ish band) ========================================================= */ .mc-strip { background: var(--mc-surface-soft); padding: 32px 0; border-block: 1px solid var(--mc-border); } .mc-strip__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; text-align: center; } .mc-strip__item { font-family: var(--mc-font-sans); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 600; color: var(--mc-text-mid); position: relative; } .mc-strip__item + .mc-strip__item::before { content: "•"; color: var(--mc-accent); margin-right: 1.5rem; margin-left: -1.25rem; } /* ========================================================= GOOGLE/TRUST STAT BAND — single inline row, ~36px tall (Vercel parity) ========================================================= */ .mc-trust { background: var(--mc-surface-warm); padding-block: 16px; border-top: 1px solid rgba(12, 12, 12, 0.08); border-bottom: 1px solid rgba(12, 12, 12, 0.08); } .mc-trust__row { max-width: 1100px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; padding-inline: clamp(0.75rem, 2.5vw, 2.5rem); } .mc-trust__item { display: inline-flex; align-items: center; gap: 6px; line-height: 1.9; font-family: var(--mc-font-sans); font-weight: 400; color: var(--mc-text-mid); font-size: 12px; text-decoration: none; } .mc-trust__item--google { font-size: 17px; color: var(--mc-ink-heading); } .mc-trust__item--google strong { font-weight: 600; } .mc-trust__item .mc-stars { color: var(--mc-star); letter-spacing: -.05em; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; } .mc-trust__item .mc-trust__icon { color: #6a8c45; display: inline-flex; align-items: center; } .mc-trust__item .mc-trust__icon svg { display: inline-block; width: 14px; height: 14px; } .mc-trust__text { display: inline-flex; align-items: baseline; gap: 4px; } .mc-trust__sub { font-size: 11px; color: #6b6059; line-height: 1.4; } /* Vercel parity — VERIFIED pill badge inside the verified chip */ .mc-trust__item--verified { line-height: 1.4; color: #6b6059; } .mc-trust__badge { display: inline-flex; align-items: center; background-color: #6a8c45; color: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: 0.25px; text-transform: uppercase; padding: 2px 8px; border-radius: 9999px; line-height: 1.4; } .mc-trust__div { display: inline-block; width: 1px; height: 12px; background: currentColor; opacity: 0.25; } @media (min-width: 601px) { .mc-trust__row { gap: 12px 24px; padding-inline: clamp(1rem, 3vw, 38.46px); } } @media (max-width: 600px) { .mc-trust__div { display: none; } .mc-trust__row { gap: 12px 24px; padding-inline: 16px; } } /* ========================================================= ABOUT US ========================================================= */ .mc-badges { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.25rem 0 1.5rem; } .mc-badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--mc-surface-soft); border: 1px solid var(--mc-border); color: var(--mc-text-mid); padding: 6px 12px; border-radius: var(--mc-radius-pill); font-size: 12px; font-weight: 500; } .mc-badge svg { color: var(--mc-sage); } /* ========================================================= POPULAR UPGRADES — 10 boxed cards ========================================================= */ /* Vercel parity: plain icon + label list, NO card boxes, NO h3/descriptions. Loop 22 rebuild: Vercel uses boxed icon-cards in a 5/3/2-col grid with terracotta-tinted icon circles and translateY(-2px) + border-color-accent hover. */ .mc-upgrades { /* Vercel: section-padding bg color-surface (white) */ padding-block: var(--mc-space-section); background-color: var(--mc-surface, #FFFFFF); } .mc-upgrades__header { /* Vercel: max-w-3xl LEFT-aligned (NOT centered) */ text-align: left; max-width: 48rem; margin: 0; } .mc-upgrades__header .mc-eyebrow { /* Vercel: text-terra-600 (not sage) */ color: var(--mc-terra-600, #C55731); display: block; } .mc-upgrades__header .mc-h2 { /* Vercel: mt-3 + heading-rule (red underline below h2) */ margin-top: .75rem; margin-bottom: 0; position: relative; display: inline-block; padding-bottom: .5rem; letter-spacing: -0.01em; } .mc-upgrades__header .mc-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 2px; background: var(--mc-accent, #B5552B); } .mc-upgrades__header .mc-lead { /* Vercel: mt-5 max-w-prose color ink-muted (NOT centered, NOT auto-margins) */ margin: 1.25rem 0 0; max-width: 65ch; color: var(--mc-ink-muted, #6B6059); font-size: 16px; line-height: 1.65; } .mc-upgrades__list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 640px) { .mc-upgrades__list { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (min-width: 1024px) { .mc-upgrades__list { grid-template-columns: repeat(5, 1fr); } } .mc-upgrades__cta { display: flex; justify-content: center; margin-top: 2.5rem; } /* Vercel-parity card: rounded-xl, border, soft shadow, hover translateY + border-accent. */ .mc-upgrade-card { height: 100%; background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: 12px; /* rounded-xl */ padding: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1); } .mc-upgrade-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.12); border-color: var(--mc-accent); } .mc-upgrade-card__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; background: rgba(228, 145, 91, 0.12); /* Vercel: accent-2 12% tint */ color: var(--mc-accent-2, #E4915B); /* Vercel: text accent-2 (not accent) */ flex-shrink: 0; transition: transform .3s ease-out, background-color .3s ease-out; } .mc-upgrade-card:hover .mc-upgrade-card__icon { transform: scale(1.08); background: rgba(228, 145, 91, 0.22); } .mc-upgrade-card__icon svg { width: 16px; height: 16px; } .mc-upgrade-card__label { font-family: var(--mc-font-display, var(--mc-font-serif)); font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; color: var(--mc-ink); margin: 0; } /* Loop 22: override reveal-stagger transition after .is-visible so card hover responds at .3s. */ @media (prefers-reduced-motion: no-preference) { .mc-reveal--stagger.is-visible > li > .mc-upgrade-card { transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1); } } /* Legacy `.mc-upgrades__grid` / `.mc-upgrade` selectors kept as no-ops for any leftover markup. */ .mc-upgrades__grid, .mc-upgrade { /* deprecated — see .mc-upgrades__list */ } .mc-upgrade-item { /* deprecated — replaced by .mc-upgrade-card */ } /* ========================================================= FREE ESTIMATE FORM — Vercel parity (Loop 31) Section bg surface-alt; container max-w 500px; italic h2; sage-700 eyebrow. ========================================================= */ .mc-estimate-section { padding-block: var(--mc-space-section); background-color: var(--mc-surface-alt, #F0EDE5); } .mc-estimate__container { max-width: 500px; padding-inline: clamp(1rem, 3vw, 3.5rem); } .mc-estimate__eyebrow { text-align: center; margin: 0 0 .75rem; font-family: var(--mc-font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mc-sage-700, #2A7058); } .mc-estimate__h2 { text-align: center; margin: 0; font-family: var(--mc-font-serif); font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); font-weight: 500; font-style: italic; line-height: 1.1; color: var(--mc-ink); } .mc-estimate { /* Vercel parity: transparent form, no card chrome; stacked fields. */ background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; max-width: 500px; margin: 2rem auto 0; display: flex; flex-direction: column; gap: 1.25rem; } .mc-estimate__row { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; } .mc-estimate label { display: block; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--mc-ink); margin-bottom: .4rem; font-weight: 500; font-family: var(--mc-font-sans); } .mc-estimate__req { color: var(--mc-accent); margin-left: 2px; } .mc-estimate input, .mc-estimate select, .mc-estimate textarea { width: 100%; padding: 12px 16px; /* Vercel: bg var(--color-bg) [white], border 1px var(--color-surface-alt), text 15px ink */ border: 1px solid var(--mc-surface-alt, #F0EDE5); border-radius: 8px; font-family: inherit; font-size: 15px; line-height: 1.4; background-color: #FFFFFF; color: var(--mc-ink); transition: border-color 180ms ease, box-shadow 180ms ease; } /* Vercel parity: rendered Free-Estimate uses a custom listbox trigger with a Lucide chevron-down icon on the right. We keep a native . Without JS, the native select renders (with the CSS chevron above). With JS, .mc-select--enhanced is added: the native select is visually hidden, the trigger button + styled options panel take over so service names get full CSS. ========================================================= */ .mc-select { position: relative; } /* Default (no JS): hide custom UI, native select shows. */ .mc-select__trigger, .mc-select__panel { display: none; } /* Enhanced: hide native, show custom UI. */ .mc-select--enhanced > .mc-select__native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; /* Native select stays in DOM for form submission + a11y fallback. */ } .mc-select--enhanced > .mc-select__trigger { display: flex; } /* Trigger button — mirrors .mc-estimate input styling. */ .mc-select__trigger { width: 100%; padding: 12px 16px; padding-right: 44px; border: 1px solid var(--mc-surface-alt, #F0EDE5); border-radius: 8px; background-color: #FFFFFF; color: var(--mc-ink); font-family: inherit; font-size: 15px; line-height: 1.4; text-align: left; cursor: pointer; align-items: center; justify-content: space-between; gap: 0.5rem; position: relative; transition: border-color 180ms ease, box-shadow 180ms ease; } .mc-select__trigger:focus-visible { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 3px rgba(181, 85, 43, .15); } .mc-select__value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-select__value--placeholder { color: var(--mc-ink-muted, #6B6059); } .mc-select__chevron { flex-shrink: 0; color: var(--mc-ink-muted, #6B6059); transition: transform 200ms ease, color 200ms ease; pointer-events: none; } .mc-select--open .mc-select__chevron { transform: rotate(180deg); color: var(--mc-accent); } /* Panel — styled options list. */ .mc-select__panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: 6px; list-style: none; background: #FFFFFF; border: 1px solid var(--mc-surface-alt, #F0EDE5); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06); max-height: 280px; overflow-y: auto; /* Hidden by default; shown when --open is on the wrapper. */ } .mc-select--enhanced.mc-select--open > .mc-select__panel { display: block; } .mc-select__option { padding: 10px 12px; border-radius: 6px; font-family: inherit; font-size: 15px; line-height: 1.35; color: var(--mc-ink); cursor: pointer; user-select: none; transition: background-color 120ms ease, color 120ms ease; } .mc-select__option:hover, .mc-select__option.is-active { background-color: rgba(181, 85, 43, .08); color: var(--mc-accent); } .mc-select__option[aria-selected="true"] { font-weight: 600; color: var(--mc-accent); } /* ========================================================= EVERYWALL / FINANCING — Vercel parity rebuild (Loop 31) 3fr:2fr split — copy LEFT, image RIGHT. § divider, rounded-full ghost CTA. ========================================================= */ .mc-everywall { padding-block: var(--mc-space-section); background-color: var(--mc-bg); } .mc-everywall__container { max-width: 1100px; padding-inline: clamp(1rem, 3vw, 3.5rem); } .mc-everywall__split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 1024px) { .mc-everywall__split { grid-template-columns: 3fr 2fr; gap: 4rem; } } .mc-everywall__h2 { margin: 0; font-family: var(--mc-font-serif); font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; color: var(--mc-ink); } .mc-everywall__lead { margin: 2rem 0 0; font-family: var(--mc-font-sans); font-size: 17px; line-height: 1.9; color: var(--mc-ink-muted, #6B6059); } .mc-everywall__list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; row-gap: .75rem; } @media (min-width: 640px) { .mc-everywall__list { grid-template-columns: repeat(2, 1fr); } } .mc-everywall__item { display: flex; align-items: flex-start; gap: .625rem; font-size: 15px; line-height: 1.6; color: var(--mc-ink); } .mc-everywall__icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; color: var(--mc-terra-600, #C55731); transition: transform .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1); } .mc-everywall__item:hover .mc-everywall__icon { transform: scale(1.1) rotate(-6deg); color: var(--mc-accent-dark, #A64528); } .mc-everywall__icon svg { width: 16px; height: 16px; } .mc-everywall__divider { display: flex; align-items: center; gap: .75rem; justify-content: center; /* Vercel parity: warmth-divider my-10 = 2.5rem top + 2.5rem bottom */ margin: 2.5rem 0; } .mc-everywall__divider-rule { flex: 0 0 48px; height: 1px; background: rgba(42, 112, 88, .6); } .mc-everywall__divider-glyph { font-family: var(--mc-font-serif); color: var(--mc-sage-700, #2A7058); font-size: 18px; font-style: italic; line-height: 1; } .mc-everywall__cta { margin-top: 0; } .mc-everywall__media { margin: 0 auto; width: 100%; max-width: 320px; } @media (min-width: 1024px) { .mc-everywall__media { max-width: none; margin: 0; } } .mc-everywall__figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; border: 1px solid var(--mc-surface-alt, #F0EDE5); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08); margin: 0; } .mc-everywall__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .mc-everywall__figure:hover img { transform: scale(1.02); } /* ========================================================= IMAGINE BACKYARD (Vercel parity — Loop 31) No eyebrow. H2 regular. Bullets are colored display-font phrases, no icons. ========================================================= */ .mc-imagine { padding-block: var(--mc-space-section); background-color: var(--mc-bg); position: relative; overflow: hidden; } /* PROMPTFIX 2026-05-17: Vercel `imagine` section has a soft radial halo overlay (terra glow top-left + sage glow bottom-right). */ .mc-imagine::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 50% at 20% 10%, rgba(228, 145, 91, 0.14), rgba(0, 0, 0, 0) 60%), radial-gradient(70% 60% at 90% 100%, rgba(122, 132, 84, 0.10), rgba(0, 0, 0, 0) 65%); } .mc-imagine > * { position: relative; z-index: 1; } .mc-imagine__container { max-width: 1280px; padding-inline: clamp(1rem, 3vw, 3.5rem); } .mc-imagine__split { display: grid; grid-template-columns: 1fr; align-items: center; gap: 2.5rem; } @media (min-width: 1024px) { .mc-imagine__split { grid-template-columns: 1fr 1fr; gap: 4rem; } } .mc-imagine__figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; border: 1px solid var(--mc-surface-alt, #F0EDE5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin: 0; } .mc-imagine__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mc-imagine__h2 { /* Vercel: tracking-tight inline-block font-display font-size var(--h2-size) line-height 1.1 */ font-family: var(--mc-font-serif); font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--mc-ink); margin: 0; font-style: normal; display: inline-block; } .mc-imagine__list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: .5rem; } .mc-imagine__item { font-family: var(--mc-font-serif); font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; padding: 0; } /* Vercel exact bullet color gradient — accent → accent-2 walk */ .mc-imagine__item--a1 { color: var(--mc-accent, #B5552B); } .mc-imagine__item--a2 { color: color-mix(in srgb, var(--mc-accent) 60%, var(--mc-ink)); } .mc-imagine__item--ink { color: var(--mc-ink); } .mc-imagine__item--b2 { color: color-mix(in srgb, var(--mc-accent-2) 70%, var(--mc-ink)); } .mc-imagine__item--b1 { color: var(--mc-accent-2, #E4915B); } .mc-imagine__closer { /* Vercel: mt-6 italic font-display color accent-2 font-size --h5-size */ margin-top: 1.5rem; font-family: var(--mc-font-serif); font-style: italic; color: var(--mc-accent-2, #E4915B); font-size: clamp(1.05rem, 1.1vw, 1.25rem); margin-bottom: 0; } /* ========================================================= TESTIMONIALS — Vercel parity rebuild (Loop 31) 3fr:2fr split — LEFT: eyebrow + italic h2 + simple rating + 2 stacked cards; RIGHT (lg only): tall image with verified-on-google overlay badge. ========================================================= */ .mc-test { padding-block: clamp(4rem, 8vh, 5rem); background-color: var(--mc-bg); } .mc-test__container { max-width: 1100px; padding-inline: clamp(1rem, 3vw, 3.5rem); } .mc-test__split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: stretch; } @media (min-width: 1024px) { .mc-test__split { grid-template-columns: 3fr 2fr; } } .mc-test__main { text-align: left; } .mc-test-card { text-align: left; } .mc-test__eyebrow { font-family: var(--mc-font-serif); font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em; color: var(--mc-accent, #B5552B); margin: 0; } .mc-test__h2 { margin: 1rem 0 0; font-family: var(--mc-font-serif); font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); font-weight: 500; font-style: italic; line-height: 1.15; color: var(--mc-ink); } .mc-test__sub { margin: .75rem 0 0; font-size: 13px; color: var(--mc-ink-muted, #6B6059); } .mc-test__cards { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .mc-test-card { /* Loop A8: Vercel parity — radius 20px (rounded-2xl), sage shadow on hover, surface bg. */ position: relative; overflow: hidden; background: var(--mc-surface-soft, #F7F5F0); border: 1px solid var(--mc-surface-alt, #F0EDE5); border-radius: 20px; padding: clamp(1rem, 1.8vw, 1.5rem); box-shadow: 0 2px 8px rgba(0, 0, 0, .04); transition: box-shadow .3s cubic-bezier(.4,0,.2,1); margin: 0; } .mc-test-card:hover { box-shadow: 0 12px 48px rgba(40, 104, 72, .14); } .mc-test-card__quote-glyph { /* Loop A8: sage accent (--color-accent on Vercel = sage), bigger and more visible. */ position: absolute; top: -8px; left: 16px; font-family: var(--mc-font-serif); font-size: 80px; line-height: 1; color: var(--mc-sage-700, #2A7058); opacity: 1; user-select: none; pointer-events: none; } .mc-test-card__stars { /* Loop A8 v2: revert — Vercel uses peach/terra stars (--color-accent-2), not sage. */ position: relative; display: flex; align-items: center; gap: 4px; margin-bottom: .5rem; color: var(--mc-accent-2, #E4915B); } .mc-test-card__source { margin-left: .5rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mc-ink-muted, #6B6059); } .mc-test-card__quote { position: relative; margin: 0; } .mc-test-card__quote p { font-family: var(--mc-font-serif); font-size: clamp(0.95rem, 1vw + 0.2rem, 1.125rem); font-weight: 500; font-style: italic; line-height: 1.5; color: var(--mc-ink); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .mc-test-card__quote.is-expanded p { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .mc-test-card__readmore { margin-top: .5rem; padding: 0; background: none; border: 0; color: var(--mc-accent-2, #E4915B); font-size: 13px; font-weight: 500; font-style: italic; cursor: pointer; } .mc-test-card__author { position: relative; margin-top: 1rem; display: flex; align-items: center; gap: .75rem; color: var(--mc-ink-muted, #6B6059); } .mc-test-card__avatar { position: relative; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--mc-accent, #B5552B), 0 2px 8px rgba(0,0,0,0.06); } .mc-test-card__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mc-test-card__meta { display: flex; flex-direction: column; line-height: 1.2; } .mc-test-card__name { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mc-ink); } .mc-test-card__year { font-size: 11px; letter-spacing: 0.05em; color: var(--mc-ink-muted, #6B6059); } .mc-test-card__link { margin-left: auto; font-size: 12px; color: var(--mc-accent-2, #E4915B); text-decoration: none; } .mc-test-card__link:hover { text-decoration: underline; text-underline-offset: 2px; } .mc-test__aside { display: none; } @media (min-width: 1024px) { .mc-test__aside { display: block; height: 100%; } } .mc-test__photo { position: relative; height: 100%; min-height: 420px; overflow: hidden; border-radius: 16px; border: 1px solid var(--mc-surface-alt, #F0EDE5); box-shadow: 0 32px 64px rgba(0, 0, 0, 0.07); } .mc-test__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .mc-test__badge { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; padding: 1rem; background: linear-gradient(to top, rgba(12,12,12,0.55) 0%, rgba(12,12,12,0) 80%); color: #FBF9F4; pointer-events: none; } .mc-test__badge-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; } .mc-test__badge-score { font-family: var(--mc-font-serif); font-size: 15px; font-style: italic; } /* Old test-summary / seal kept for backward compatibility — but new layout doesn't use them */ .mc-test-summary { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: 0 auto 2.5rem; text-align: center; } .mc-test-summary .mc-stars { color: var(--mc-star); font-size: 18px; letter-spacing: .08em; } .mc-test-summary__main { font-family: var(--mc-font-serif); font-size: 18px; color: var(--mc-ink); } .mc-test-summary__sub { font-size: 13px; color: var(--mc-text-mid); } .mc-testimonial { background: var(--mc-surface); border: 1px solid var(--mc-border); /* Loop 20: Vercel parity — rounded-2xl=20px, shadow-only hover, 0.3s ease-in-out cubic */ border-radius: 20px; padding: 28px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; gap: 1rem; transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1); } .mc-testimonial:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10); } .mc-testimonial__quote { font-family: var(--mc-font-serif); font-size: 17px; color: var(--mc-text); line-height: 1.65; margin: 0; } .mc-testimonial__author { display: flex; align-items: center; gap: .85rem; border-top: 1px solid var(--mc-border); padding-top: 1rem; } .mc-testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--mc-surface-warm); flex: 0 0 48px; display: block; } .mc-testimonial__avatar--fallback { color: var(--mc-accent-dark); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mc-font-serif); font-weight: 600; font-size: 17px; } /* Read-more clamp on long testimonial quotes — matches Vercel's expandable behavior */ .mc-testimonial__quote[data-clamp]:not(.is-expanded) { display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .mc-testimonial__readmore { margin-top: .5rem; padding: 0; background: none; border: 0; color: var(--mc-sage); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color var(--mc-dur, .15s) var(--mc-ease, cubic-bezier(.4,0,.2,1)); } .mc-testimonial__readmore:hover { color: var(--mc-accent-deep); } .mc-testimonial__quote.is-expanded ~ .mc-testimonial__readmore { /* visible state */ } /* Verified-on-Google trust seal at end of testimonials */ .mc-test-seal { display: inline-flex; align-items: center; gap: .85rem; padding: .65rem .9rem .65rem .65rem; background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-pill, 9999px); box-shadow: var(--mc-shadow-soft); margin: 2.5rem auto 0; } .mc-test-seal__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 56px; } .mc-test-seal__meta { display: flex; flex-direction: column; gap: 2px; } .mc-test-seal__label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-text-mid); } .mc-test-seal__score { font-size: 16px; font-weight: 700; color: var(--mc-ink); display: inline-flex; align-items: center; gap: 4px; } .mc-test-seal__star { color: var(--mc-star); font-size: 18px; } /* Center the trust seal under the 2-up card grid */ section[aria-label="Customer testimonials"] .mc-container { text-align: center; } section[aria-label="Customer testimonials"] .mc-test-summary, section[aria-label="Customer testimonials"] .grid-2 { text-align: left; } /* Free-estimate subnote (Vercel: "No spam. No obligation. Just a conversation.") */ .mc-estimate__subnote { margin: .85rem 0 0; text-align: center; font-size: 12.5px; color: var(--mc-text-light); letter-spacing: .01em; } .mc-testimonial__name { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; color: var(--mc-ink); } .mc-testimonial__year { font-size: 12px; color: var(--mc-text-light); } .mc-testimonial__google { margin-left: auto; font-size: 12px; color: var(--mc-sage); font-weight: 600; } .mc-stars { color: var(--mc-star); font-size: 14px; letter-spacing: .05em; } .stars { color: var(--mc-star); } /* ========================================================= RECENT WORK ========================================================= */ /* Loop 22: Fresh-Off-Job-Site was +57 vs Vercel 600. Trim padding-block to close. Specificity bump (.mc-section.mc-recent) overrides .mc-section--sm rule. */ .mc-section.mc-recent { /* Vercel: section is on var(--color-surface-alt) background, py-clamp pattern */ padding-block: clamp(3rem, 7vh, 4.5rem); background-color: var(--mc-surface-alt, #F0EDE5); } .mc-recent__header { text-align: center; margin-bottom: 2rem; } .mc-recent__eyebrow { font-family: var(--mc-font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mc-sage-700, #2A7058); margin: 0 0 .5rem; } .mc-recent__h2 { font-family: var(--mc-font-serif); font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--mc-ink); margin: 0; } .mc-recent__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .mc-recent__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .mc-recent__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1180px){ .mc-recent__grid { grid-template-columns: repeat(5, 1fr); } } .mc-recent__card { background: transparent; border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .mc-recent__card:hover { transform: translateY(-4px); } .mc-recent__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--mc-surface); border: 1px solid var(--mc-surface-alt, #F0EDE5); } .mc-recent__media img { width: 100%; height: 100%; object-fit: cover; } .mc-recent__body { /* Horizontal + bottom padding so text doesn't get clipped by the card's overflow:hidden + 20px radius (set later in the cascade). */ padding: .85rem 1rem 1rem; text-align: left; } .mc-recent__title { font-family: var(--mc-font-serif); font-size: 14px; font-style: italic; color: var(--mc-ink); margin: 0 0 .25rem; font-weight: 400; } .mc-recent__meta { font-family: var(--mc-font-sans); font-size: 12px; color: var(--mc-ink-muted, #6B6059); letter-spacing: 0.02em; margin: 0; text-transform: none; } /* ========================================================= WHY-US DETAIL with show-more ========================================================= */ /* Loop 22: WP -53 vs Vercel 651 — bump padding-block on this --sm section to recover ~30 each side. */ .mc-whyus { padding-block: 110px; } .mc-whyus__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .mc-whyus__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px){ .mc-whyus__grid { grid-template-columns: repeat(4, 1fr); } } .mc-whyus__h2 { font-style: italic; margin-bottom: 2.5rem; } .mc-whyus__card { /* Loop A8: Vercel parity — surface cream bg #F7F5F0, 20px radius, 28px padding, 1px surface-alt border, soft card shadow, taller card with bold non-italic h3. */ background: var(--mc-surface-soft, #F7F5F0); border: 1px solid var(--mc-surface-alt, #F0EDE5); border-radius: 20px; padding: 28px; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); position: relative; transition: box-shadow .3s ease; } .mc-whyus__card:hover { box-shadow: 0 12px 48px rgba(40, 104, 72, .14); } .mc-whyus__card::before { content: ""; position: absolute; top: 16px; left: 28px; width: 28px; height: 2px; background: var(--mc-accent-2, #E4915B); border-radius: 2px; } .mc-whyus__card h3 { /* Loop A8: Vercel uses display/serif bold non-italic h3 (text-h3 sage-900). */ font-family: var(--mc-font-display, var(--mc-font-serif)); font-size: 28px; font-style: normal; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 14px 0 .75rem; color: var(--mc-ink); } .mc-whyus__card p { font-size: 15px; color: var(--mc-text-mid); margin: 0; line-height: 1.6; } .mc-whyus__card[data-hidden="true"] { display: none; } .mc-whyus.is-expanded .mc-whyus__card[data-hidden="true"] { display: block; } .mc-whyus__more { text-align: center; margin-top: 1.5rem; } /* ========================================================= FAQ — Vercel parity rebuild (Loop 31) Image LEFT (380px, hidden mobile), accordion RIGHT, border-bottom rows, +/− toggle. ========================================================= */ /* ---------- HOMEPAGE FAQ — Vercel parity (2026-05-19) ---------- Mirrors mcallisterbuilder.vercel.app/ Frequently Asked Questions section: 2-col grid (lg:grid-cols-[2fr_3fr]), 1100px container, 3:4 image, accordion rows are buttons with border-bottom + large +/− toggle in accent. */ .mc-faq { padding-block: var(--mc-space-section); background-color: var(--mc-bg); } .mc-faq__container { max-width: 1100px; /* Vercel: max-w-[1100px] */ padding-inline: clamp(1rem, 3vw, 3.5rem); } .mc-faq__split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 1024px) { .mc-faq__split { grid-template-columns: 2fr 3fr; gap: 4rem; } /* lg:grid-cols-[2fr_3fr] lg:gap-16 */ } .mc-faq__media { display: none; } @media (min-width: 1024px) { .mc-faq__media { display: block; } } .mc-faq__figure { position: relative; aspect-ratio: 3 / 4; /* Vercel: aspect-[3/4] */ overflow: hidden; border-radius: 16px; border: 1px solid var(--mc-surface-alt, #F0EDE5); margin: 0; } .mc-faq__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mc-faq__eyebrow { font-family: var(--mc-font-sans); /* Vercel text-caption font-semibold uppercase tracking-[0.18em] text-sage-700 */ font-size: max(.75rem, min(.75vw, .8125rem)); line-height: 1.5; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mc-sage-700, #2A7058); margin: 0; } .mc-faq__h2 { /* Vercel mt-4 font-serif text-h2 font-medium leading-[1.1] color:ink */ margin: 16px 0 0; font-family: var(--mc-font-serif); font-size: clamp(1.5rem, 1rem + 1.2vw, 1.8rem); font-weight: 500; line-height: 1.1; letter-spacing: 0; color: var(--mc-ink); } .mc-faq__list { margin-top: 48px; /* Vercel mt-12 */ } /* Legacy .faq-item kept for non-home pages */ .faq-item { background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-card); margin-bottom: .75rem; overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 1.25rem; font-weight: 600; color: var(--mc-ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--mc-font-serif); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--mc-accent-dark); } .faq-item[open] summary::after { content: "–"; } .faq-item .faq-answer { padding: 0 1.25rem 1.25rem; color: var(--mc-text-mid); } /* Sage left-bar on the expanded service-page FAQ item — parity with the home FAQ (.mc-faq__item[open] > summary.mc-faq__q). Base keeps a 2px transparent border so [open] animates color only (no layout shift). The border-left-color transition is already wired up at L3980+. */ .faq-item > summary { border-left: 2px solid transparent; } .faq-item[open] > summary { border-left-color: #6a8c45; } /* New home FAQ uses .mc-faq__item — Vercel parity: border-bottom only (no left border, no open-state bg tint), question is SERIF medium 16px line 1.35, toggle is large +/− text in accent. */ .mc-faq__item { background: transparent; border: 0; border-radius: 0; margin: 0; border-bottom: 1px solid var(--mc-surface-alt, #F0EDE5); transition: none; } .mc-faq__item[open] { background-color: transparent; /* Vercel: no tint */ } .mc-faq__item summary, .mc-faq__item .mc-faq__q { list-style: none; cursor: pointer; /* Vercel py-6 (24px each side), zero inline padding so the border-bottom runs full-width. */ padding: 24px 0; color: var(--mc-ink); display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; /* Vercel gap-8 */ /* Vercel font-serif text-body font-medium leading-[1.35] */ font-family: var(--mc-font-serif); font-size: 16px; font-weight: 500; line-height: 1.35; min-height: 44px; } .mc-faq__item summary::-webkit-details-marker { display: none; } /* Vercel parity: green left bar on expanded FAQ items. Base keeps a 2px transparent border + 16px padding-left so toggling [open] animates color only (no layout shift). Transition for border-left-color is provided by the existing summary rule below. */ .mc-faq__item > summary.mc-faq__q { border-left: 2px solid transparent; padding-left: 16px; } .mc-faq__item[open] > summary.mc-faq__q { border-left-color: #6a8c45; } /* Toggle — render +/− text (Vercel pattern). The PHP currently emits an empty .mc-faq__toggle span; we provide the glyph via ::before so PHP stays untouched. */ .mc-faq__toggle { display: inline-block; flex-shrink: 0; width: auto; height: auto; margin-top: 4px; /* Vercel mt-1: optically drop the glyph below text baseline */ font-family: var(--mc-font-sans); font-size: clamp(1.25rem, 1rem + 0.5vw, 1.5rem); font-weight: 400; line-height: 1; color: var(--mc-accent, #C55731); /* Vercel uses --color-accent (terra) */ text-align: center; min-width: 16px; } .mc-faq__toggle::before, .mc-faq__toggle::after { content: none; background: none; } .mc-faq__toggle::before { content: "+"; } .mc-faq__item[open] .mc-faq__toggle::before { content: "\2212"; } /* U+2212 minus */ .mc-faq__a { /* Vercel: pb-8 pt-4 (32 bottom, 16 top) */ padding: 16px 0 32px; } .mc-faq__a p { margin: 0; /* Vercel text-body leading-[1.8] color:ink-muted */ color: var(--mc-text-mid, #6B6059); font-family: var(--mc-font-sans, Inter); font-size: 16px; line-height: 1.8; } /* ========================================================= CTA BANNER ========================================================= */ .cta-band, .mc-cta-band { background: var(--mc-surface-warm); border: 1px solid var(--mc-border); color: var(--mc-ink); border-radius: var(--mc-radius-card); padding: clamp(2rem, 4vw, 3.5rem); text-align: center; box-shadow: var(--mc-shadow-card); } .cta-band h2, .mc-cta-band h2 { color: var(--mc-ink); margin-bottom: .75rem; } .cta-band p, .mc-cta-band p { color: var(--mc-text-mid); max-width: 60ch; margin: 0 auto 1.5rem; } /* ========================================================= HOMEPAGE BOTTOM CTA — Loop 21: Vercel parity, plain centered text on white. ========================================================= */ .mc-cta-home { padding-block: 126px; } .mc-cta-home__inner { max-width: 820px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 3.5rem); text-align: center; } .mc-cta-home__ornament { display: inline-flex; align-items: center; gap: .75rem; margin: 0 auto 1.75rem; color: var(--mc-sage-700, #2A7058); } .mc-cta-home__ornament-rule { display: block; width: 64px; height: 1px; background: currentColor; opacity: .5; } .mc-cta-home__ornament-glyph { font-family: var(--mc-font-serif); font-style: italic; font-size: 18px; line-height: 1; color: var(--mc-sage-700, #2A7058); } .mc-cta-home__title { font-family: var(--mc-font-serif); font-size: clamp(28px, 4vw, 44px); font-weight: 500; font-style: italic; /* Vercel: italic */ line-height: 1.1; color: var(--mc-ink); margin: 0; } .mc-cta-home__body { max-width: 36rem; /* Vercel: max-w-xl ≈ 36rem */ margin: 3rem auto 0; /* Vercel: mt-12 = 48px */ color: var(--mc-text-mid); font-size: 17px; line-height: 1.65; } .mc-cta-home__actions { margin-top: 3.5rem; /* Vercel: mt-14 = 56px */ } /* ========================================================= FOOTER (Agent-6 2026-05-17: Vercel parity rewrite) ========================================================= */ .site-footer { position: relative; isolation: isolate; background-color: var(--mc-sage-900); background-image: radial-gradient(80% 60% at 15% 0px, rgba(229, 190, 115, 0.28), rgba(0, 0, 0, 0) 60%), radial-gradient(60% 50% at 90% 100%, rgba(74, 146, 117, 0.55), rgba(0, 0, 0, 0) 60%), url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); color: rgba(245, 242, 234, .80); padding: 0; margin-top: 0; } .site-footer a { color: rgba(245, 242, 234, .80); text-decoration: none; transition: color .15s cubic-bezier(.4, 0, .2, 1); } /* Vercel hover: terra-400 (#E28A63). */ .site-footer a:hover { color: var(--mc-terracotta); } /* Footer grid: 4-column on desktop (brand + Services + Visit + Contact); single-column on mobile. Container also serves as the grid; padding-block 80px matches Vercel py-20. */ .site-footer .footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; /* gap-12 = 48px */ padding-top: 80px; padding-bottom: 80px; } @media (min-width: 768px) { .site-footer .footer-grid { grid-template-columns: repeat(4, 1fr); } } /* Brand col: chip wraps logo in cream-50 rounded box w/ sage shadow. On mobile the chip stays compact (36px logo, 8px padding); from 768px it bumps to the desktop size and the column gets right-side breathing room so it doesn't crowd the next footer column. */ .footer-col--brand { display: block; } .footer-brand-chip { display: inline-flex; align-items: center; justify-content: center; background: var(--mc-cream-50); padding: 8px; border-radius: 10px; box-shadow: 0 8px 32px 0 rgba(40, 104, 72, 0.10); } .footer-brand__logo { width: auto; height: 36px; object-fit: contain; display: block; } @media (min-width: 768px) { .footer-col--brand { padding-right: 24px; } .footer-brand-chip { padding: 12px; border-radius: 12px; } .footer-brand__logo { height: 48px; } } .footer-brand__tag { color: rgba(245, 242, 234, .80); font-size: 14px; line-height: 1.625; /* leading-relaxed */ margin: 24px 0 0; max-width: none; } /* Section heading: terra-400 caption, uppercase, 0.18em tracking */ .footer-heading { font-family: var(--mc-font-sans); color: var(--mc-terracotta); /* terra-400 #E28A63 */ font-size: 12px; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; } .footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .footer-list li { font-size: 14px; line-height: 1.55; margin: 0; display: flex; align-items: center; gap: 8px; } .footer-list li a:hover { color: var(--mc-terracotta); } .footer-list svg { flex: 0 0 auto; opacity: .8; } .footer-list li.footer-list__addr { align-items: flex-start; gap: 12px; } .footer-list li.footer-list__addr svg { margin-top: 4px; } /* Social row: bare svg icons (no bg pill), 20×20, terra-on-hover */ .social-row { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; align-items: center; } .social-row a { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: transparent; color: rgba(245, 242, 234, .80); transition: color .2s cubic-bezier(.4, 0, .2, 1); } .social-row a:hover { color: var(--mc-terracotta); background: transparent; transform: none; } .social-row svg { width: 20px; height: 20px; opacity: 1; } /* Footer bottom — separate border-top wrapper */ .footer-bottom-wrap { border-top: 1px solid rgba(245, 242, 234, .10); } .site-footer .footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 24px; padding-bottom: 24px; color: rgba(245, 242, 234, .80); font-size: 12px; line-height: 1.6; text-align: center; border-top: 0; } @media (min-width: 640px) { .site-footer .footer-bottom { flex-direction: row; text-align: start; } } .footer-bottom p { margin: 0; } .footer-bottom a { color: rgba(245, 242, 234, .80); } .footer-bottom a:hover { color: var(--mc-terracotta); } .footer-bottom .sep { color: rgba(245, 242, 234, .35); margin: 0 .5rem; } /* ========================================================= FLOATING ACTION BUTTONS (Vercel parity — bottom-right stack) ========================================================= */ .mc-fab { position: fixed; bottom: 24px; right: 16px; top: auto; left: auto; z-index: 30; display: flex; flex-direction: column; gap: 16px; background: transparent; padding: 0; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; } .mc-fab__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 9999px; text-decoration: none; overflow: visible; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mc-fab__btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; } /* Vercel parity: warmth-fab-wave pulse rings on each FAB button. Two waves per button, staggered via inline animation-delay. */ .mc-fab__wave { pointer-events: none; position: absolute; inset: 0; border-radius: 9999px; will-change: transform, opacity; transform-origin: 50%; animation: mc-fab-wave 2.4s cubic-bezier(.16, 1, .3, 1) infinite; } .mc-fab__icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; } @keyframes mc-fab-wave { 0% { opacity: .55; transform: scale(.95); } 60% { opacity: 0; transform: scale(1.85); } 100% { opacity: 0; transform: scale(1.85); } } @media (prefers-reduced-motion: reduce) { .mc-fab__wave { display: none; } } .mc-fab__btn--call { background-color: rgb(181, 85, 43); color: rgb(245, 239, 230); box-shadow: rgba(181, 85, 43, 0.42) 0px 12px 30px 0px, rgba(0, 0, 0, 0.18) 0px 2px 6px 0px; } .mc-fab__btn--call:hover { background-color: rgb(157, 73, 36); box-shadow: rgba(181, 85, 43, 0.55) 0px 16px 36px 0px, rgba(0, 0, 0, 0.22) 0px 4px 8px 0px; transform: translateY(-2px); color: rgb(245, 239, 230); } .mc-fab__btn--text { background-color: rgb(63, 91, 42); color: rgb(242, 235, 217); box-shadow: rgba(63, 91, 42, 0.4) 0px 12px 30px 0px, rgba(0, 0, 0, 0.18) 0px 2px 6px 0px; } .mc-fab__btn--text:hover { background-color: rgb(50, 73, 33); box-shadow: rgba(63, 91, 42, 0.55) 0px 16px 36px 0px, rgba(0, 0, 0, 0.22) 0px 4px 8px 0px; transform: translateY(-2px); color: rgb(242, 235, 217); } .mc-fab__btn--quote { background-color: rgb(245, 239, 230); color: rgb(63, 91, 42); box-shadow: rgba(63, 91, 42, 0.22) 0px 10px 26px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px; } .mc-fab__btn--quote:hover { background-color: rgb(255, 251, 244); box-shadow: rgba(63, 91, 42, 0.32) 0px 14px 32px 0px, rgba(0, 0, 0, 0.14) 0px 4px 8px 0px; transform: translateY(-2px); color: rgb(63, 91, 42); } @media (max-width: 480px) { .mc-fab { bottom: 16px; right: 12px; gap: 12px; } .mc-fab__btn { width: 44px; height: 44px; } .mc-fab__btn svg { width: 18px; height: 18px; } } /* Header-parity Fix 5 (2026-05-16): hide the FAB stack above the fold on desktop so it doesn't crowd the hero. Fades in once main.js adds .is-visible (scrollY > 200). On mobile (<=768) the FAB stays visible from first paint — better UX for one-tap call. */ .mc-fab { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s var(--mc-ease, cubic-bezier(.4, 0, .2, 1)), transform .3s var(--mc-ease, cubic-bezier(.4, 0, .2, 1)); } .mc-fab.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (max-width: 768px) { .mc-fab { opacity: 1; transform: none; pointer-events: auto; } } /* ========================================================= SERVICE PAGE (preserved) ========================================================= */ .service-hero { position: relative; background: var(--mc-ink); color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; overflow: hidden; } .service-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--service-hero-bg, none); background-size: cover; background-position: center; opacity: .4; } .service-hero > .container-brand, .service-hero > .mc-container { position: relative; z-index: 1; } .service-hero h1 { color: #fff; max-width: 22ch; } .service-hero .lede, .service-hero .mc-lead { color: rgba(255,255,255,.9); max-width: 60ch; font-size: 1.0625rem; } .service-section h2 { margin-bottom: 1rem; } .service-section + .service-section { padding-top: 0; } /* ========================================================= GENERIC PAGE TEMPLATE (privacy/terms) ========================================================= */ .mc-page { max-width: 720px; margin-inline: auto; padding-block: clamp(48px, 8vw, 96px); padding-inline: var(--mc-pad-x); } .mc-page h1 { text-align: center; margin-bottom: 1.5rem; font-family: var(--mc-font-serif); } .mc-page p { font-size: 16px; color: var(--mc-text); line-height: 1.75; } /* ========================================================= EYEBROW VARIANTS — em-dash wrapped sage caps ========================================================= */ .mc-eyebrow--dashed::before, .mc-eyebrow--dashed::after { content: "—"; color: var(--mc-sage); margin: 0 .55em; opacity: .7; font-weight: 400; letter-spacing: 0; } /* ========================================================= H2 ITALIC TREATMENT — for Vercel italic Lora H2s ========================================================= */ .mc-h2--italic, h2.mc-h2--italic { font-style: italic; font-weight: 500; } /* ========================================================= SERVICE STRIP — sage caps, orange dot separator (Vercel parity) ========================================================= */ .mc-strip { background: var(--mc-surface-alt, #F5EFE6); padding: 24px 0; border-block: 1px solid var(--mc-border); } .mc-strip__inner { gap: .5rem .75rem; } .mc-strip__item { color: var(--mc-sage-700, #2A7058); font-weight: 600; letter-spacing: .18em; font-size: 12px; display: inline-flex; align-items: center; gap: .75rem; } .mc-strip__item + .mc-strip__item::before { content: "•"; color: var(--mc-accent-2, #E4915B); opacity: 1; margin-left: 0; margin-right: 0; font-size: 14px; line-height: 1; } /* TRUST BAND legacy block removed — see GOOGLE/TRUST STAT BAND above (single inline row). */ /* ========================================================= FOUNDER QUOTE (A3) ========================================================= */ .mc-founder { background: var(--mc-surface-warm); text-align: center; /* Loop 22: Trust(197) + Founder needed to total ~560 on Vercel. Reducing from 64 → 32 brings Founder to ~361, Trust+Founder=~558, matching Vercel ±2. */ padding-block: 32px 64px; } .mc-founder__quote { max-width: 920px; margin: 0 auto 2.5rem; padding: 0; } .mc-founder__quote .mc-eyebrow { margin-bottom: 1.5rem; } .mc-founder__blockquote { /* Vercel parity (1280): Inter italic 500, 1.6rem (25.6px), line-height 1.4, #0c0c0c */ font-family: var(--mc-font-sans, Inter, system-ui, sans-serif); font-style: italic; font-weight: 500; font-size: 1.6rem; line-height: 1.4; color: #0c0c0c; margin: 0; position: relative; } @media (max-width: 600px) { /* Mobile parity: 24px / 1.4 — keep existing mobile size unchanged */ .mc-founder__blockquote { font-size: 1.5rem; line-height: 1.4; } } .mc-founder__hl { color: #6a8c45; font-style: italic; font-weight: 500; display: inline-block; } .mc-founder__open, .mc-founder__close { color: var(--mc-accent); font-size: 1.4em; line-height: 0; vertical-align: -.1em; } .mc-founder__attrib { /* Vercel parity: Inter 500, 12px, #6b6059, letter-spacing 2.16px (0.18em), 32px top margin */ font-family: var(--mc-font-sans); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; line-height: 1.5; color: #6b6059; font-weight: 500; margin: 32px 0 0; } .mc-founder__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; list-style: none; padding: 0; margin: 0; text-align: center; } @media (min-width: 768px) { .mc-founder__stats { grid-template-columns: repeat(4, 1fr); } } .mc-founder__stat { display: flex; flex-direction: column; align-items: center; gap: .35rem; position: relative; padding: 0 1rem; } @media (min-width: 768px) { .mc-founder__stat + .mc-founder__stat::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: var(--mc-border); } } /* Vercel-exact: stat value is Inter (sans), NOT italic, weight 500, ~49px (font-display-lg). Number = olive #6A8C45 (--mc-olive). Suffix " mi" / "%" = accent-2 orange #E4915B. Suffix "+" stays the same olive as the number. */ .mc-founder__stat-value { font-family: var(--mc-font-sans); font-style: normal; font-weight: 500; font-size: clamp(2rem, 3.4vw, 48.96px); line-height: 1; letter-spacing: -.01em; display: inline-flex; align-items: baseline; } .mc-founder__stat-num, .mc-founder__stat-suffix--num { color: var(--mc-olive, #6A8C45); } .mc-founder__stat-suffix--accent { color: var(--mc-accent-2, #E4915B); } .mc-founder__stat-label { font-family: var(--mc-font-sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-text-mid); margin-top: .5rem; } /* ========================================================= ABOUT US — drop cap + ornament + italic badges (A4) ========================================================= */ .mc-about { /* Vercel: section py-[var(--space-section)] background-color var(--color-bg) */ padding-block: var(--mc-space-section); background-color: var(--mc-bg); } .mc-about__container { /* Vercel: mx-auto max-w-[1100px] px-[clamp(1rem,3vw,3.5rem)] */ max-width: 1100px; padding-inline: clamp(1rem, 3vw, 3.5rem); } .mc-about__eyebrow { /* Vercel: text-sage-700 centered uppercase above grid (mt-14 to grid below) */ display: block; text-align: center; margin: 0 0 3.5rem; color: var(--mc-sage-700, #2A7058); } .mc-about__split { align-items: center; gap: 2.5rem; /* mobile/tablet tighter; lg expands to 4rem (gap-16) */ display: grid; grid-template-columns: 1fr; } @media (min-width: 1024px) { /* Loop 31: 50/50 split at lg — image left, copy right, gap-16. */ .mc-about__split { grid-template-columns: 1fr 1fr; gap: 4rem; } } .mc-about__media { /* Mobile/tablet: centered, capped. lg: fill its column. */ margin: 0 auto; width: 100%; max-width: 460px; } @media (min-width: 1024px) { .mc-about__media { margin: 0; max-width: none; } } .mc-about__frame { /* Vercel: warmth-image-frame relative aspect-[4/5] overflow-hidden rounded-2xl */ position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; border: 1px solid var(--mc-surface-alt, rgba(0,0,0,.06)); box-shadow: var(--mc-shadow-card); } .mc-about__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .mc-about__frame:hover img { transform: scale(1.02); } .mc-about__caption { /* Vercel: figcaption mt-3 text-caption italic color:var(--color-ink-muted) — BELOW the frame */ display: block; margin-top: .75rem; text-align: left; color: var(--mc-text-mid, #6B6F6A); font-family: var(--mc-font-sans); font-style: italic; font-size: 13px; line-height: 1.5; background: none; padding: 0; position: static; } .mc-about__copy { display: flex; flex-direction: column; justify-content: center; } .mc-about__h2 { /* Vercel: font-serif text-h2 font-medium leading-[1.1] */ line-height: 1.1; margin: 0; } .mc-about__body { /* Vercel: warmth-drop-cap mt-8 text-body */ font-family: var(--mc-font-sans); font-size: 16px; line-height: 1.65; color: var(--mc-ink); margin: 2rem 0 0; } .mc-about__divider { /* Vercel: warmth-divider my-10 — § glyph centered with side rules */ display: flex; align-items: center; gap: .85rem; justify-content: center; margin: 2.5rem 0; } .mc-about__divider::before, .mc-about__divider::after { content: ""; flex: 1; height: 1px; background: rgba(42, 112, 88, .25); max-width: 80px; } .mc-about__divider span { font-family: var(--mc-font-serif); color: var(--mc-sage); font-size: 18px; line-height: 1; } .mc-about__dropcap { /* Vercel .warmth-drop-cap: olive drop cap, serif italic 500, 5.25em, line-height 0.8 */ float: left; font-family: var(--mc-font-serif); font-size: 5.25em; line-height: .8; color: var(--mc-accent-olive, #6A8C45); margin: .1em .12em 0 0; padding: 0; font-style: italic; font-weight: 500; } .mc-ornament { display: flex; align-items: center; gap: .85rem; justify-content: center; margin: 1.25rem auto 1.25rem; max-width: 320px; } .mc-ornament__line { flex: 1; height: 1px; background: rgba(42, 112, 88, .35); } .mc-ornament__glyph { font-family: var(--mc-font-serif); color: var(--mc-sage); font-size: 18px; line-height: 1; opacity: .85; } .mc-about__badges { /* Vercel: grid gap-3 md:grid-cols-3 — single col through 767, 3-col from 768+ */ display: grid; grid-template-columns: 1fr; gap: .75rem; list-style: none; padding: 0; margin: 0; text-align: left; } @media (min-width: 768px) { .mc-about__badges { grid-template-columns: repeat(3, 1fr); } } .mc-about__badge { font-family: var(--mc-font-serif); font-style: italic; color: var(--mc-text-mid, #6B6F6A); font-size: 14px; line-height: 1.4; } .mc-about__cta { /* Vercel: mt-10 */ text-align: left; margin-top: 2.5rem; } /* ========================================================= ICON LIST — 2-col grid, terracotta lucide icons (A5) Loop 32: Vercel parity rewrite. Vercel uses .container-design (max-width 1240px, padding max(1rem,min(3vw,3.5rem))) and .section-padding (5rem mobile -> 11rem desktop). Our global .mc-container is 1408px and .mc-section is clamp(7rem,14vh,12.5rem) which stretched the section wider and taller than Vercel - root cause of 768/1440 diff. Overrides are scoped to .mc-iconlist so other sections are unaffected. ========================================================= */ .mc-iconlist { /* Vercel .section-padding: 5rem -> 7rem (≥768) -> 9rem (≥1920) -> 11rem (≥2560). The earlier WP breakpoints (9rem at 1024, 11rem at 1536) added 64px of extra gap above/below the image at every common desktop width. */ padding-block: 5rem; } @media (min-width: 768px) { .mc-iconlist { padding-block: 7rem; } } @media (min-width: 1920px) { .mc-iconlist { padding-block: 9rem; } } @media (min-width: 2560px) { .mc-iconlist { padding-block: 11rem; } } /* Override the global 1408px mc-container - Vercel container-design is 1240px. */ .mc-iconlist > .mc-container { max-width: 1240px; padding-inline: max(1rem, min(3vw, 3.5rem)); } .mc-iconlist .split { align-items: center; /* Vercel: gap-10 mobile, lg:gap-16 desktop */ gap: 2.5rem; grid-template-columns: 1fr; display: grid; } @media (min-width: 1024px) { .mc-iconlist .split { gap: 4rem; } } /* Force single column below 1024 with higher specificity than the global ".split @media (min-width: 900px)" rule which would otherwise leave 900-1023 in a half-broken 2-col-without-order-swap state. */ @media (max-width: 1023.98px) { .mc-iconlist .split { grid-template-columns: 1fr; } } /* DEFAULT (mobile <1024): copy first, media second per Vercel order-1/order-2. Desktop swap lives in the >=1024 block further down. */ .mc-iconlist .split > .split-copy { order: 1; } .mc-iconlist .split > .split-media { order: 2; } .mc-iconlist__figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; border: 1px solid var(--mc-border, rgba(0,0,0,.06)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin: 0; } .mc-iconlist__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mc-iconlist__eyebrow { /* Vercel: text-terra-600 uppercase tracking-[0.18em] (#C55731 exact) */ color: var(--mc-terra-600, #C55731); font-family: var(--mc-font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; margin: 0 0 .75rem; } .mc-iconlist__h2 { /* Vercel: mt-3 tracking-tight font-display line-height 1.1 */ line-height: 1.1; margin: 0; letter-spacing: -0.01em; } .mc-iconlist .split-media { /* Wrapper only — the inner .mc-iconlist__figure owns aspect / border / shadow. */ margin: 0; aspect-ratio: auto; border-radius: 0; overflow: visible; box-shadow: none; } @media (min-width: 1024px) { /* Why-Choose variant (section-transform-backyard.php, .split without --reverse): Vercel lg:grid-cols-2 — equal halves, image LEFT (order-1), copy RIGHT (order-2). */ .mc-iconlist .split:not(.split--reverse) { grid-template-columns: 1fr 1fr; } .mc-iconlist .split:not(.split--reverse) > .split-copy { order: 2; } .mc-iconlist .split:not(.split--reverse) > .split-media { order: 1; } /* Better-Backyard variant (section-everywall.php, .split--reverse): Vercel lg:grid-cols-[3fr_2fr] — figure RIGHT capped max-w-sm (384px). */ .mc-iconlist .split.split--reverse { grid-template-columns: 3fr 2fr; } .mc-iconlist .split.split--reverse > .split-media { max-width: 384px; justify-self: end; width: 100%; } } .mc-iconlist__grid { list-style: none; padding: 0; /* Vercel: mt-8 (2rem) gap-x-6 gap-y-3 (1.5rem / 0.75rem) */ margin: 2rem 0 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem 1.5rem; } @media (min-width: 640px) { /* Vercel: sm:grid-cols-2 — sm breakpoint is 640px (not 600). */ .mc-iconlist__grid { grid-template-columns: 1fr 1fr; } } .mc-iconlist__item { display: flex; align-items: flex-start; gap: .625rem; /* Vercel: gap-2.5 = 10px */ line-height: 1.6; /* Vercel: leading-[1.6] */ color: var(--mc-ink); font-size: 15px; /* Vercel: text-[15px] */ cursor: default; } .mc-iconlist__icon { /* Vercel parity: no background, no border, no border-radius — free-floating 16px glyph in 20px flex span */ flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; /* Vercel: mt-0.5 */ display: inline-flex; align-items: center; justify-content: center; color: var(--mc-terra-600, #C55731); /* Vercel text-terra-600 exact */ transition: transform 300ms cubic-bezier(.4,0,.2,1), color 300ms cubic-bezier(.4,0,.2,1); } .mc-iconlist__icon svg { width: 16px; /* Vercel: h-4 w-4 inside 20px span */ height: 16px; } .mc-iconlist__item:hover .mc-iconlist__icon { color: var(--mc-accent-dark, #A64528); /* Vercel terra-700 */ transform: scale(1.1) rotate(-6deg); } .mc-iconlist__label { padding-top: 0; } /* ========================================================= SERVICES 6-CARD GRID (A7) ========================================================= */ .mc-services-grid__cards { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: stretch; margin-top: 64px; } .mc-services-grid__cards > .service-card { height: 100%; } @media (min-width: 640px) { .mc-services-grid__cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .mc-services-grid__cards { grid-template-columns: repeat(3, 1fr); } } /* `.service-card--clean` modifier intentionally inherits the base `.service-card` shadow + border now (Vercel parity at base). Kept as a no-op selector for any markup still referencing the class. */ .service-card--clean { /* inherits base */ } .service-card__title { /* Loop A8: Vercel parity — sage-700, display font, non-italic, semibold. */ font-family: var(--mc-font-display, var(--mc-font-serif)); font-style: normal; font-weight: 600; font-size: 1.25rem; color: var(--mc-sage-700, #2A7058); letter-spacing: -0.01em; } .service-card__more { color: var(--mc-sage-700, #2A7058); font-weight: 600; } /* Home services grid — Vercel parity overrides (unboxed cards, Lora italic title) */ .mc-services-grid .service-card { background: transparent; border: 0; border-radius: 16px; box-shadow: none; overflow: hidden; transition: box-shadow .3s var(--mc-ease); } .mc-services-grid .service-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); transform: none; } .mc-services-grid .service-card__media { aspect-ratio: 4 / 3; overflow: hidden; } /* "One Company. Complete Backyard Remodeling." — Vercel parity ken-burns animation. Each tile zooms slowly in/out forever; on hover the cycle accelerates so the card "feels alive" instead of pausing. */ .mc-services-grid .service-card__media img { width: 100%; height: 100%; object-fit: cover; animation: mc-tile-ken-burns 16s ease-in-out infinite; will-change: transform; transform-origin: 50% 50%; } /* Stagger the cycle across the grid so all cards don't pulse in lockstep. Negative delays start each tile partway through the keyframe. 14 featured cards cycle through 8 desync slots. */ .mc-services-grid .service-card:nth-child(8n+1) .service-card__media img { animation-delay: 0s; } .mc-services-grid .service-card:nth-child(8n+2) .service-card__media img { animation-delay: -3.3s; } .mc-services-grid .service-card:nth-child(8n+3) .service-card__media img { animation-delay: -6.6s; } .mc-services-grid .service-card:nth-child(8n+4) .service-card__media img { animation-delay: -9.9s; } .mc-services-grid .service-card:nth-child(8n+5) .service-card__media img { animation-delay: -13.2s; } .mc-services-grid .service-card:nth-child(8n+6) .service-card__media img { animation-delay: -1.6s; } .mc-services-grid .service-card:nth-child(8n+7) .service-card__media img { animation-delay: -4.9s; } .mc-services-grid .service-card:nth-child(8n) .service-card__media img { animation-delay: -8.2s; } /* Hover/focus-within — keep running infinitely but speed up to 6s so the motion is clearly visible (was a one-shot scale(1.05) transition). */ .mc-services-grid .service-card:hover .service-card__media img, .mc-services-grid .service-card:focus-within .service-card__media img { animation-duration: 6s; } @media (prefers-reduced-motion: reduce) { .mc-services-grid .service-card__media img { animation: none; } } @keyframes mc-tile-ken-burns { 0% { transform: scale(1.00) translate3d(0, 0, 0); } 50% { transform: scale(1.06) translate3d(-1.5%, -0.8%, 0); } 100% { transform: scale(1.00) translate3d(0, 0, 0); } } .mc-services-grid .service-card__body { padding: 20px; } .mc-services-grid .service-card__title { font-family: var(--mc-font-serif, Lora, Georgia, serif); font-style: italic; font-weight: 500; font-size: clamp(1.1rem, 1.5vw + 0.25rem, 1.375rem); line-height: 1.25; color: #0c0c0c; letter-spacing: 0; margin: 0; } .mc-services-grid .service-card__body p { font-size: 14px; line-height: 1.7; color: #0c0c0c; margin: 8px 0 0; } .mc-services-grid .service-card__more { margin-top: auto; padding-top: 12px; font-size: 13px; font-style: italic; font-weight: 500; color: #6a8c45; display: inline-flex; align-items: center; gap: 6px; } /* ========================================================= SERVICE PAGE (Vercel-parity) — B-scope ========================================================= */ /* New Vercel-style service hero — LIGHT split layout, NOT a dark photo background */ .mc-service-hero { background: var(--mc-bg); padding-block: 64px 96px; } .mc-service-hero .mc-container { width: 100%; } .mc-breadcrumbs { display: flex; align-items: center; gap: .5rem; font-size: 14px; color: var(--mc-text-mid); margin-bottom: 2rem; } .mc-breadcrumbs a { color: var(--mc-text-mid); } .mc-breadcrumbs a:hover { color: var(--mc-accent-deep); } .mc-breadcrumbs__current { color: var(--mc-sage); font-weight: 500; } .mc-service-hero__split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } @media (max-width: 900px) { .mc-service-hero__split { grid-template-columns: 1fr; gap: 32px; } } .mc-service-hero__copy { max-width: 600px; } .mc-service-hero__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .18em; font-size: 13px; font-weight: 600; color: var(--mc-accent-dark); margin-bottom: 1.25rem; font-family: var(--mc-font-sans); } .mc-service-hero__h1 { font-family: var(--mc-font-serif); font-size: clamp(2rem, 3.6vw, 44px); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; color: var(--mc-sage); margin: 0 0 1.5rem; } .mc-service-hero__lead, .mc-service-hero__copy p { font-size: 16px; line-height: 1.7; color: var(--mc-text-mid); margin-bottom: 1.25rem; } .mc-service-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; } .mc-service-hero__media { border-radius: 16px; overflow: hidden; box-shadow: var(--mc-shadow-card); aspect-ratio: 4 / 3; } .mc-service-hero__media img { width: 100%; height: 100%; object-fit: cover; } /* Old dark hero (kept for backwards-compat, but unused after this commit) */ .mc-service-page__hero { position: relative; min-height: clamp(440px, 60vh, 620px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; } .mc-service-page__hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; } .mc-service-page__hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 35%, rgba(0,0,0,.75) 100%); } .mc-service-page__hero-inner { padding-block: 56px 72px; max-width: 820px; } .mc-service-page__hero h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 48px); line-height: 1.1; margin-bottom: 1rem; text-shadow: 0 2px 12px rgba(0,0,0,.5); } .mc-service-page__hero-eyebrow { display: inline-block; text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: .16em; color: #DDEEE5; margin-bottom: 1rem; } .mc-service-page__hero-eyebrow::before, .mc-service-page__hero-eyebrow::after { content: "—"; margin: 0 .55em; opacity: .7; } .mc-service-page__hero-lead { color: rgba(245, 238, 223, .96); font-size: 17px; line-height: 1.65; max-width: 60ch; margin: 0 0 1.5rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .mc-service-page__hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } .mc-service-page__hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; } .mc-service-page__hero-chip { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 9999px; padding: 4px 12px; font-size: 12px; color: #fff; backdrop-filter: blur(4px); } .mc-service-page__split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 900px) { .mc-service-page__split { grid-template-columns: 1fr 1fr; } .mc-service-page__split--reverse > :first-child { order: 2; } } .mc-service-page__split-media { border-radius: var(--mc-radius-card); overflow: hidden; box-shadow: var(--mc-shadow-card); aspect-ratio: 4 / 3; } .mc-service-page__split-media img { width: 100%; height: 100%; object-fit: cover; } .mc-service-page__why-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { .mc-service-page__why-grid { grid-template-columns: repeat(3, 1fr); } } .mc-service-page__why-card { /* Loop A8: Vercel parity — cream-50 bg, 12px radius (rounded-xl), 20px padding (p-5), sage-700 serif title, no shadow. */ background: var(--mc-cream-50, #FBF9F4); border: 1px solid var(--mc-cream-200); /* cream-200 */ border-radius: 12px; padding: 20px; box-shadow: none; } .mc-service-page__why-card h3 { font-family: var(--mc-font-serif); font-size: 1.125rem; font-weight: 600; margin-bottom: .5rem; color: var(--mc-sage-700, #2A7058); letter-spacing: -0.01em; line-height: 1.25; } .mc-service-page__why-card p { color: var(--mc-text-mid); font-size: 14.5px; line-height: 1.55; margin: 0; } .mc-service-page__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; } @media (min-width: 768px) { .mc-service-page__gallery { grid-template-columns: repeat(4, 1fr); } } .mc-service-page__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mc-radius-card); box-shadow: var(--mc-shadow-soft); } /* ========================================================= WPForms (basic) — keep these for compat once form plugin is on ========================================================= */ .wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container textarea, .wpforms-container select { width: 100%; padding: .75rem .9rem; border: 1px solid var(--mc-border); border-radius: var(--mc-radius-sm); font-family: inherit; font-size: 1rem; background: var(--mc-surface); } .wpforms-container input:focus, .wpforms-container textarea:focus, .wpforms-container select:focus { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 3px rgba(181, 85, 43, .15); } /* ========================================================= SCROLL REVEAL (IntersectionObserver-driven; mirrors Framer Motion) ========================================================= */ @media (prefers-reduced-motion: no-preference) { .mc-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--mc-dur-reveal) var(--mc-ease), transform var(--mc-dur-reveal) var(--mc-ease); will-change: opacity, transform; } .mc-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Directional reveals (Vercel framer-motion parity: slide-in / fly-in from left/right). Initial offset matches Vercel's translateX(-24px) / translateX(24px) start state. */ .mc-reveal--from-left { transform: translateX(-24px); } .mc-reveal--from-right { transform: translateX(24px); } .mc-reveal--from-left.is-visible, .mc-reveal--from-right.is-visible { transform: translateX(0); } /* Stagger children — assign --i via :nth-child for first 12 kids */ .mc-reveal--stagger > * { opacity: 0; transform: translateY(12px); transition: opacity var(--mc-dur-reveal) var(--mc-ease), transform var(--mc-dur-reveal) var(--mc-ease); transition-delay: calc(var(--i, 0) * 80ms); } .mc-reveal--stagger.is-visible > * { opacity: 1; transform: translateY(0); } .mc-reveal--stagger > *:nth-child(1) { --i: 0; } .mc-reveal--stagger > *:nth-child(2) { --i: 1; } .mc-reveal--stagger > *:nth-child(3) { --i: 2; } .mc-reveal--stagger > *:nth-child(4) { --i: 3; } .mc-reveal--stagger > *:nth-child(5) { --i: 4; } .mc-reveal--stagger > *:nth-child(6) { --i: 5; } .mc-reveal--stagger > *:nth-child(7) { --i: 6; } .mc-reveal--stagger > *:nth-child(8) { --i: 7; } .mc-reveal--stagger > *:nth-child(9) { --i: 8; } .mc-reveal--stagger > *:nth-child(10) { --i: 9; } .mc-reveal--stagger > *:nth-child(11) { --i: 10; } .mc-reveal--stagger > *:nth-child(12) { --i: 11; } /* PROMPTFIX: long-list extension (chips, gallery items, 37-city lists). Faster 30ms step so chip #40 caps under 1200ms instead of 3.2s. */ .mc-reveal--stagger > *:nth-child(13) { --i: 12; } .mc-reveal--stagger > *:nth-child(14) { --i: 13; } .mc-reveal--stagger > *:nth-child(15) { --i: 14; } .mc-reveal--stagger > *:nth-child(16) { --i: 15; } .mc-reveal--stagger > *:nth-child(17) { --i: 16; } .mc-reveal--stagger > *:nth-child(18) { --i: 17; } .mc-reveal--stagger > *:nth-child(19) { --i: 18; } .mc-reveal--stagger > *:nth-child(20) { --i: 19; } .mc-reveal--stagger > *:nth-child(21) { --i: 20; } .mc-reveal--stagger > *:nth-child(22) { --i: 21; } .mc-reveal--stagger > *:nth-child(23) { --i: 22; } .mc-reveal--stagger > *:nth-child(24) { --i: 23; } .mc-reveal--stagger > *:nth-child(25) { --i: 24; } .mc-reveal--stagger > *:nth-child(26) { --i: 25; } .mc-reveal--stagger > *:nth-child(27) { --i: 26; } .mc-reveal--stagger > *:nth-child(28) { --i: 27; } .mc-reveal--stagger > *:nth-child(29) { --i: 28; } .mc-reveal--stagger > *:nth-child(30) { --i: 29; } .mc-reveal--stagger > *:nth-child(31) { --i: 30; } .mc-reveal--stagger > *:nth-child(32) { --i: 31; } .mc-reveal--stagger > *:nth-child(33) { --i: 32; } .mc-reveal--stagger > *:nth-child(34) { --i: 33; } .mc-reveal--stagger > *:nth-child(35) { --i: 34; } .mc-reveal--stagger > *:nth-child(36) { --i: 35; } .mc-reveal--stagger > *:nth-child(37) { --i: 36; } .mc-reveal--stagger > *:nth-child(38) { --i: 37; } .mc-reveal--stagger > *:nth-child(39) { --i: 38; } .mc-reveal--stagger > *:nth-child(40) { --i: 39; } /* Override step duration for long chip lists (capped under 1.2s) */ .about-areas__chips.mc-reveal--stagger > *, .mc-service-area__chips-col .about-areas__chips.mc-reveal--stagger > * { transition-delay: calc(var(--i, 0) * 30ms); } /* Loop 20: After reveal completes, swap the reveal-tuned transition for the card-hover transition so hover responds at 0.3s instead of inheriting the 0.6s reveal timing. Cards are children of .mc-reveal--stagger so the reveal rule lives at `.mc-reveal--stagger > *` — match that specificity. */ .mc-reveal--stagger.is-visible > .mc-recent__card, .mc-recent__card.mc-reveal.is-visible { transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .mc-reveal--stagger.is-visible > .mc-testimonial, .mc-testimonial.mc-reveal.is-visible { transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1); } } /* Vercel parity: nav uses pure color swap on hover (sage → terracotta), no ::after underline. Earlier loop had assumed an underline-grow pattern from Tailwind; live audit at 1280 disproved it. */ /* ========================================================= "LEARN MORE →" ARROW + GENERIC ARROW HOVER ========================================================= */ .service-card__more, .mc-arrow-link { display: inline-flex; align-items: center; gap: .35rem; } .service-card__more::after, .mc-arrow-link::after { content: "\2192"; /* → */ display: inline-block; transition: transform 200ms var(--mc-ease); } .service-card:hover .service-card__more::after, .mc-arrow-link:hover::after { transform: translateX(4px); } /* If the markup already includes a → in the text, hide the duplicate */ .service-card__more { font-size: 14px; } /* ========================================================= COUNT-UP NUMBERS ========================================================= */ .mc-count-up { font-variant-numeric: tabular-nums; } /* ========================================================= SERVICE CARD REFINEMENTS (Vercel parity) These overrides duplicate the primary rules at line ~287 — kept only for the image transition tweak. Card transition is single-shorthand .3s. ========================================================= */ .service-card__media img { transition: transform .7s var(--mc-ease); } .service-card:hover .service-card__media img { transform: scale(1.03); } /* Recent work card image zoom on hover. PROMPTFIX: explicit 700ms cubic-bezier to match Vercel's transition on .warmth-image-frame img (verified 2026-05-17). */ .mc-recent__card { overflow: hidden; } .mc-recent__media img, .mc-recent__media img[data-mc-fade] { transition: opacity 400ms var(--mc-ease), transform 700ms cubic-bezier(0.4, 0, 0.2, 1); } .mc-recent__card:hover .mc-recent__media img { transform: scale(1.03); } /* ========================================================= FAQ HOVER STATE ========================================================= */ .faq-item summary, .mc-faq__item summary { /* Vercel parity: 0.3s bg + border-left-color transition */ transition: background-color 0.3s var(--mc-ease), border-left-color 0.3s var(--mc-ease); } .faq-item summary:hover, .mc-faq__item summary:hover { background: var(--mc-surface-soft); } /* MOBILE DRAWER — Agent-6 (2026-05-17) replaced slide-down with right-side panel. Original max-height transitions superseded by the .mobile-menu rules above which use transform: translateX. This block neutralized to avoid conflicts. */ /* (intentionally empty — see .mobile-menu / .mobile-menu-backdrop above) */ /* ========================================================= RESPONSIVE SECTION PADDING — clamp on mobile ========================================================= */ @media (max-width: 768px) { .mc-section, .section { padding-block: clamp(56px, 8vw, 80px); } .mc-section--sm { padding-block: clamp(48px, 7vw, 64px); } } /* ========================================================= FAB visible at lg+ explicitly ========================================================= */ @media (min-width: 1024px) { .mc-fab { display: flex; } } /* ========================================================= SERVICE-PAGE VERCEL-PARITY OVERRIDES (scoped, all 14 services) Measured deltas at 1440 vs https://mcallisterbuilder.vercel.app ========================================================= */ /* H1: Vercel uses Inter 33.37px / 38.37px / weight 400 (NOT Lora) */ .mc-service-page .mc-service-hero__h1 { font-family: var(--mc-font-sans); font-size: clamp(1.85rem, 2.6vw, 33.37px); line-height: 1.15; font-weight: 400; letter-spacing: -0.005em; } /* H2s on service pages: Vercel uses Inter 25.67px / 30.8px / weight 400. .mc-service-faq__h2 is excluded — it has its own canonical rule (weight 800, fluid clamp size) that mirrors Vercel's SectionHeader. */ .mc-service-page .mc-h2:not(.mc-service-faq__h2), .mc-service-page h2:not(.mc-service-faq__h2) { font-family: var(--mc-font-sans); font-size: clamp(1.4rem, 2vw, 25.67px); line-height: 1.2; font-weight: 400; } /* Hero media: fluid object-fit cover, radius 20px. (Loop addition: spec requires 4/3 fluid container; was 4/5 portrait crop.) */ .mc-service-page .mc-service-hero__media { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; } .mc-service-page .mc-service-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Hero copy lead: Vercel uses terra-600 accent color for first paragraph */ .mc-service-page .mc-service-hero__lead { color: var(--mc-terra-600, #C55731); } /* Continuous background: Vercel keeps cream across nearly all post-hero sections. Force --soft variant onto every service-page section and zero out top padding, keeping only bottom 112px — collapses the visible "banding" that doubles air. */ .mc-service-page .mc-section--white, .mc-service-page .mc-section--soft { background: var(--mc-bg, #F5F2EA); } .mc-service-page > section.mc-section, .mc-service-page > section.mc-section--sm { padding-top: 0; padding-bottom: 112px; } .mc-service-page .mc-service-hero { /* Top padding must clear the sticky header (~81px) so the breadcrumb doesn't overlap the logo as the user scrolls past the transparent pre-scroll state. */ padding-block: clamp(88px, 8vh, 112px) 112px; background: var(--mc-bg, #F5F2EA); } /* "What we do" container: Vercel uses full container width, not 920px */ .mc-service-page .svc-what-we-do .mc-container { max-width: var(--mc-container) !important; } /* "What we do" bullet list: Vercel renders as 3-col grid of card-styled rows (each LI: bg #FBF9F4, border #E8DFC9, padding 16px) */ .mc-service-page .svc-what-we-do .check-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; padding: 0; margin-top: 1.5rem; } @media (max-width: 900px) { .mc-service-page .svc-what-we-do .check-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mc-service-page .svc-what-we-do .check-list { grid-template-columns: 1fr; } } .mc-service-page .svc-what-we-do .check-list li { background: #FBF9F4; border: 1px solid var(--mc-cream-200); border-radius: 12px; /* Vercel rounded-xl = 12px */ padding: 16px 16px 16px 64px; margin: 0; font-size: 16px; /* Vercel uses base 16px, not 14.5 */ line-height: 1.5; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; min-height: 64px; display: flex; align-items: center; } .mc-service-page .svc-what-we-do .check-list li:hover { border-color: var(--mc-terra-600, #C55731); transform: translateY(-2px); box-shadow: 0 4px 12px -4px rgba(166, 69, 40, 0.12); } /* Replace the small checkmark with a 32x32 sage-50 circle holding a terra arrow */ .mc-service-page .svc-what-we-do .check-list li::before { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--mc-sage-50, #EDF5EE); border: 1px solid rgba(168, 201, 175, 0.5); /* sage-200 */ transition: transform .3s ease; } .mc-service-page .svc-what-we-do .check-list li::after { content: ""; position: absolute; left: 26px; top: 50%; transform: translateY(-50%) rotate(-45deg); width: 8px; height: 4px; border-left: 1.5px solid var(--mc-terra-600, #C55731); border-bottom: 1.5px solid var(--mc-terra-600, #C55731); transition: transform .3s ease; } .mc-service-page .svc-what-we-do .check-list li:hover::before { transform: translateY(-50%) scale(1.10) rotate(-6deg); } .mc-service-page .svc-what-we-do .check-list li:hover::after { transform: translateY(-50%) rotate(-45deg) scale(1.10); border-color: var(--mc-terra-700, #A64528); } /* Gallery imgs: Vercel ServiceGallery uses rounded-fluid-xl + soft shadow. Earlier comment claimed "no border-radius" — that was wrong. Let the default .mc-service-page__gallery img rule (12px + soft shadow) apply, and ensure the skeleton-host wrapper inherits the same radius so its clip matches the image edge. */ .mc-service-page .mc-service-page__gallery img { aspect-ratio: 4 / 3; border-radius: var(--mc-radius-card, 12px); box-shadow: var(--mc-shadow-soft, 0 1px 2px rgba(0,0,0,.06)); } .mc-service-page .mc-service-page__gallery > .mc-skeleton-host { border-radius: var(--mc-radius-card, 12px); } /* Collapsed gallery — hide every tile past the first 8 (2 desktop rows / 4 mobile rows). The base .mc-service-page__gallery img rule sets display:block which overrides the HTML `hidden` attribute, so this explicit rule does the gating. JS only toggles the wrapper attribute. */ .mc-service-page__gallery[data-mc-gallery-collapsed="true"] [data-mc-gallery-extra] { display: none !important; } .mc-service-page__gallery[data-mc-gallery-collapsed="false"] [data-mc-gallery-extra] { display: block !important; } /* "Show N more images" toggle below the gallery grid. The wrapper sits outside the gallery-section grid-template (which only re-positions .text-center.mt-4 into the top-right), so it lands centered under the grid as intended. */ .mc-service-page section[aria-label$="gallery" i] > .mc-container > .mc-service-page__gallery-more { grid-column: 1 / -1; grid-row: 3 / 4; text-align: center; margin: 1.5rem 0 0 0; } .mc-service-page__gallery-more-btn { /* Forwarded-from .mc-btn--ghost — clearer pill so the button reads as a real action, not a quiet text link. Brand palette: terra outline on cream, fills sage-cream on hover. */ display: inline-flex !important; align-items: center; gap: 0.5rem; min-height: 44px; padding: 10px 22px !important; border: 1.5px solid var(--mc-accent-dark, #A64528) !important; border-radius: 999px !important; background: transparent !important; color: var(--mc-accent-dark, #A64528) !important; font-family: var(--mc-font-sans, Inter, sans-serif); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; box-shadow: none !important; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .mc-service-page__gallery-more-btn:hover, .mc-service-page__gallery-more-btn:focus-visible { background: var(--mc-accent-dark, #A64528) !important; color: var(--mc-cream-50, #FBF9F4) !important; outline: none; } /* Recent Work gallery section parity — Vercel renders: row 1: [eyebrow "RECENT WORK" + h2 left-aligned] ............ [Open full gallery link top-right] row 2: 4-col image grid No centered bottom button. Re-flow the existing PHP (header + grid + bottom-wrap) via CSS grid placement; restyle the bottom .mc-btn--ghost as inline arrow link; inject the missing eyebrow via header::before. */ .mc-service-page section[aria-label$="gallery" i] > .mc-container { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 1rem; row-gap: 0; align-items: end; } .mc-service-page section[aria-label$="gallery" i] > .mc-container > header { grid-column: 1 / 2; grid-row: 1 / 2; text-align: left !important; margin-bottom: 24px; } /* The template already emits

Recent work

; suppress the legacy ::before duplicate injection. */ .mc-service-page section[aria-label$="gallery" i] > .mc-container > header::before { content: none !important; display: none !important; } .mc-service-page section[aria-label$="gallery" i] > .mc-container > header .mc-h2 { text-align: left; margin: 0; } .mc-service-page section[aria-label$="gallery" i] > .mc-container > .mc-service-page__gallery { grid-column: 1 / -1; grid-row: 2 / 3; } .mc-service-page section[aria-label$="gallery" i] > .mc-container > .text-center.mt-4 { grid-column: 2 / 3; grid-row: 1 / 2; text-align: right !important; margin: 0 0 24px 0 !important; align-self: end; } .mc-service-page section[aria-label$="gallery" i] > .mc-container > .text-center.mt-4 .mc-btn.mc-btn--ghost { background: transparent; border: 0; padding: 0; color: var(--mc-accent, #B5552B); font-size: 12px; font-weight: 500; font-family: var(--mc-font-sans); text-transform: none; letter-spacing: 0; box-shadow: none; display: inline-flex; align-items: center; gap: .35rem; border-radius: 0; min-height: 0; line-height: 1.2; } .mc-service-page section[aria-label$="gallery" i] > .mc-container > .text-center.mt-4 .mc-btn.mc-btn--ghost::after { content: "\2197"; /* ↗ arrow-up-right */ font-size: 12px; font-weight: 400; color: var(--mc-accent, #B5552B); } .mc-service-page section[aria-label$="gallery" i] > .mc-container > .text-center.mt-4 .mc-btn.mc-btn--ghost:hover { background: transparent; color: var(--mc-accent-deep, #8C3F1E); } @media (max-width: 640px) { .mc-service-page section[aria-label$="gallery" i] > .mc-container { grid-template-columns: 1fr; } .mc-service-page section[aria-label$="gallery" i] > .mc-container > header, .mc-service-page section[aria-label$="gallery" i] > .mc-container > .text-center.mt-4 { grid-column: 1 / -1; } .mc-service-page section[aria-label$="gallery" i] > .mc-container > .text-center.mt-4 { grid-row: 3 / 4; text-align: left !important; margin-top: 12px !important; } } /* Service-area chips: Vercel renders as plain inline city list (no pill). Strip the pill styling on service pages only. */ .mc-service-page .svc-areas .about-areas__chips { gap: 4px 12px; } .mc-service-page .svc-areas .about-areas__chip { background: transparent; border: none; padding: 0; font-size: 16px; color: var(--mc-ink); border-radius: 0; } /* Final CTA: Vercel uses a cream-50 CARD with subtle cream-200 border, 48px padding, 20px radius. NOT plain centered text — that was wrong. */ .mc-service-page .mc-cta-band { background: var(--mc-cream-50, #FBF9F4) !important; border: 1px solid var(--mc-cream-200, #E8DFC9) !important; border-radius: 20px !important; box-shadow: none !important; padding: clamp(32px, 5vw, 48px) !important; position: relative; overflow: hidden; } /* Mobile: keep tighter section padding */ @media (max-width: 768px) { .mc-service-page > section.mc-section, .mc-service-page > section.mc-section--sm { padding-bottom: clamp(56px, 9vw, 80px); } .mc-service-page .mc-service-hero { padding-block: 32px 48px; } } /* ========================================================= EYEBROW LETTER-SPACING — 0.12em parity ========================================================= */ .mc-eyebrow, .eyebrow { letter-spacing: .12em; } /* ========================================================= ABOUT PAGE — Vercel /about parity ========================================================= */ .about-page { background: var(--mc-bg); color: var(--mc-text); } .about-eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mc-sage); margin: 0 0 1.25rem; } .about-eyebrow--numbered { color: var(--mc-accent-deep); } .about-section__head { max-width: 760px; margin: 0 auto 3rem; text-align: center; } .about-section__title { font-family: var(--mc-font-serif); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -.01em; font-weight: 500; color: var(--mc-ink); margin: 0 0 1rem; } /* 1) Intro --------------------------------------------------- */ .about-intro { padding-block: clamp(64px, 7vw, 112px) clamp(48px, 6vw, 80px); } .about-intro__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 960px) { .about-intro__grid { grid-template-columns: 1.05fr 1fr; } } .about-intro__title { /* Vercel parity: text-h1 = clamp(1.75rem, 2.6vw, 2.75rem) lh:1.15 ls:-0.01em + tracking-tight adds -0.025em → -0.035em total; weight inherits 400; color sage-900. */ font-family: var(--mc-font-serif); font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 400; color: var(--mc-sage-900, #286848); margin: 0 0 1.5rem; } .about-intro__lede { font-size: 17px; line-height: 1.7; color: var(--mc-text); margin: 0 0 1.25rem; max-width: 56ch; } .about-intro__body { font-size: 16px; line-height: 1.7; color: var(--mc-text-mid); margin: 0 0 2rem; max-width: 56ch; } .about-intro__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .about-intro__cta .mc-btn--ghost { display: inline-flex; align-items: center; gap: 8px; } .about-intro__media { margin: 0; border-radius: var(--mc-radius-card); overflow: hidden; box-shadow: var(--mc-shadow-card); aspect-ratio: 4 / 3; background: var(--mc-surface-warm); } .about-intro__media img { width: 100%; height: 100%; object-fit: cover; } /* 2) Stats --------------------------------------------------- */ /* Stats bar — Vercel parity: `
` with a 2-col / 4-col cream-50 card grid. */ .about-stats { margin-top: 3rem; padding-block: 0; } .about-stats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; /* Vercel gap-3 */ } @media (min-width: 768px) { .about-stats__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } /* md:gap-4 */ } .about-stats__card { background: #FBF9F4; /* cream-50 */ border: 1px solid #E8DFC9; /* cream-200 */ border-radius: 16px; /* rounded-2xl */ padding: 16px; /* p-4 */ text-align: left; box-shadow: none; display: flex; flex-direction: column; gap: 4px; /* mt-1 between dt and dd */ } @media (min-width: 768px) { .about-stats__card { padding: 20px; } /* md:p-5 */ } .about-stats__value { font-family: var(--mc-font-serif); /* Vercel text-h2: clamp(1.5rem, 1rem+1.2vw, 2.125rem) */ font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); line-height: 1.2; font-weight: 500; color: #286848; /* sage-900 */ letter-spacing: -.01em; } .about-stats__label { /* Vercel text-caption + tracking-[0.14em] + text-ink-500 */ font-size: max(.75rem, min(.75vw, .8125rem)); line-height: 1.5; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6B6A68; /* ink-500 */ } /* 3) Why grid ------------------------------------------------ */ .about-why { background: var(--mc-surface-warm); padding-block: clamp(64px, 7vw, 112px); } .about-why__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; /* Vercel parity: gap-3 (12px) mobile, md:gap-4 (16px) ≥768. */ gap: 12px; } @media (min-width: 640px) { .about-why__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .about-why__grid { gap: 16px; } } @media (min-width: 1024px) { .about-why__grid { grid-template-columns: repeat(4, 1fr); } } .about-why__card { background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: 16px; /* Vercel rounded-2xl (override block also sets 16) */ padding: 24px; box-shadow: var(--mc-shadow-soft); transition: transform var(--mc-dur) var(--mc-ease), box-shadow var(--mc-dur) var(--mc-ease); } .about-why__card:hover { transform: translateY(-2px); box-shadow: var(--mc-shadow-card); } .about-why__card-title { font-family: var(--mc-font-serif); font-size: 18px; line-height: 1.25; margin: 0 0 .5rem; color: var(--mc-ink); } .about-why__card-body { font-size: 14px; line-height: 1.6; color: var(--mc-text-mid); margin: 0; } /* 4) Mission ------------------------------------------------- */ .about-mission { padding-block: clamp(64px, 7vw, 112px); } .about-mission__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 960px) { .about-mission__grid { grid-template-columns: 1.1fr 1fr; } } .about-mission__copy p { font-size: 16px; line-height: 1.75; color: var(--mc-text-mid); margin: 0 0 1rem; } .about-mission__bullets { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 10px; } .about-mission__bullets li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.6; color: var(--mc-text); } .about-mission__bullets li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 999px; background: radial-gradient(circle at 50% 50%, var(--mc-sage) 0 4px, transparent 5px), rgba(42, 112, 88, .12); } .about-mission__media { margin: 0; border-radius: var(--mc-radius-card); overflow: hidden; box-shadow: var(--mc-shadow-card); aspect-ratio: 4 / 5; background: var(--mc-surface-warm); } .about-mission__media img { width: 100%; height: 100%; object-fit: cover; } /* 5) Specializations ---------------------------------------- */ .about-trades { background: var(--mc-surface-warm); padding-block: clamp(64px, 7vw, 112px); } .about-trades__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 960px) { .about-trades__grid { grid-template-columns: 1fr 1.15fr; } } .about-trades__media { margin: 0; border-radius: var(--mc-radius-card); overflow: hidden; box-shadow: var(--mc-shadow-card); aspect-ratio: 4 / 5; background: var(--mc-surface); } .about-trades__media img { width: 100%; height: 100%; object-fit: cover; } .about-trades__copy p { font-size: 16px; line-height: 1.75; color: var(--mc-text-mid); margin: 0 0 1.25rem; } .about-trades__list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: 1fr; gap: 10px 24px; } @media (min-width: 640px) { .about-trades__list { grid-template-columns: repeat(2, 1fr); } } .about-trades__list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5; color: var(--mc-text); } .about-trades__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 999px; background: var(--mc-accent); } .about-trades__license { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--mc-border); font-size: 13px; color: var(--mc-text-mid); } .about-trades__license strong { color: var(--mc-ink); font-weight: 600; } /* 6) Service area ------------------------------------------- */ .about-areas { padding-block: clamp(64px, 7vw, 112px); } .about-areas__lede { font-size: 16px; line-height: 1.7; color: var(--mc-text-mid); margin: .75rem 0 0; max-width: 60ch; margin-inline: auto; } .about-areas__chips { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .about-areas__chip { display: inline-block; padding: 8px 14px; background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-pill); font-size: 13px; color: var(--mc-text); transition: border-color var(--mc-dur-fast) var(--mc-ease), color var(--mc-dur-fast) var(--mc-ease), background var(--mc-dur-fast) var(--mc-ease); } .about-areas__chip:hover { border-color: var(--mc-sage); color: var(--mc-sage); background: rgba(42, 112, 88, .04); } /* PROMPTFIX 2026-05-17: All-areas card — wraps chips + disclaimer + phone CTA in a cream card matching the Vercel service-area pattern. */ .about-areas__card { position: relative; margin: 2.5rem auto 0; max-width: 1080px; /* VAR-CASCADE-FIX 2026-05-17: was var(--mc-surface)/var(--mc-border) which resolve to #FFFFFF/#E3DCD2 — wrong palette for the cream service-area card. Rewired to cream-50/cream-200 to match Vercel. */ background: var(--mc-cream-50, #FBF9F4); border: 1px solid var(--mc-cream-200, #E8DFC9); border-radius: 20px; padding: clamp(24px, 3vw, 40px); overflow: hidden; } .about-areas__card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1rem; } .about-areas__pill { display: inline-block; background: var(--mc-accent-deep, #A64528); color: var(--mc-cream-50, #FBF9F4); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; } .about-areas__count { font-size: 12px; font-weight: 600; color: var(--mc-text-mid, #4a4a44); letter-spacing: .04em; } .about-areas__card .about-areas__chips { margin: 0; justify-content: flex-start; } .about-areas__card .about-areas__chip { background: #fff; border: 1px solid rgba(40, 104, 72, .3); padding: 6px 12px; font-size: 12.5px; font-weight: 500; } .about-areas__card .about-areas__chip:hover { border-color: var(--mc-accent-deep, #A64528); color: var(--mc-accent-deep, #A64528); background: #fff; } .about-areas__disclaimer { margin: 1.5rem 0 1rem; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--mc-text-mid, #4a4a44); } .about-areas__disclaimer a { color: var(--mc-sage, #286848); font-weight: 600; margin-left: 4px; } .about-areas__disclaimer a:hover { color: var(--mc-accent-deep, #A64528); } .about-areas__phone { display: flex; justify-content: center; margin-top: .5rem; } /* 7) Final CTA ----------------------------------------------- Vercel parity: cream card with soft blurred honey + sage gradient blobs (Tailwind blur-3xl ≈ 64px). 2-col grid (text left, CTAs right stacked) at lg, single column below. No shadow. */ .about-final-cta { padding-block: 0 clamp(64px, 7vw, 112px); background: transparent; } .about-final-cta__card { position: relative; background: #FBF9F4; /* cream-50 — matches Vercel exactly */ border: 1px solid #E8DFC9; /* cream-200 */ border-radius: 20px; padding: 32px; box-shadow: none; overflow: hidden; } @media (min-width: 768px) { .about-final-cta__card { padding: 48px; } } .about-final-cta__card::before, .about-final-cta__card::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 9999px; pointer-events: none; z-index: 0; filter: blur(64px); /* Tailwind blur-3xl — the fabrication fix */ } .about-final-cta__card::before { top: -80px; right: -80px; background: rgba(244, 232, 198, 0.7); /* honey-200/70 */ } .about-final-cta__card::after { bottom: -96px; left: -64px; background: rgba(182, 210, 189, 0.7); /* sage-200/70 */ } .about-final-cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 1024px) { .about-final-cta__inner { grid-template-columns: 7fr 5fr; } } .about-final-cta__card .about-eyebrow { margin: 0; } .about-final-cta__card .about-section__title { margin: 8px 0 0; } .about-final-cta__card p { font-size: 16px; line-height: 1.65; color: var(--mc-text-mid); margin: 12px 0 0; max-width: 65ch; } .about-final-cta__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .about-final-cta__actions .mc-btn { width: 100%; justify-content: center; } .about-final-cta__email { color: var(--mc-sage); font-weight: 500; font-size: 13px; text-align: center; margin-top: 4px; text-decoration: underline; text-underline-offset: 3px; } .about-final-cta__email:hover { color: var(--mc-accent-deep); } /* ========================================================= LEGAL PAGES — Privacy Policy / Terms of Use Verbatim ports of /privacy and /terms from the Vercel site. ========================================================= */ .legal-page { padding-block: clamp(64px, 7vw, 112px); background: var(--mc-bg); } .legal-page .mc-container { max-width: 768px; margin-inline: auto; padding-inline: var(--mc-pad-x); } .legal-page__eyebrow { font-family: var(--mc-font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--mc-accent); margin: 0 0 1rem; } .legal-page__h1 { font-family: var(--mc-font-serif); font-size: clamp(28px, 4vw, 36px); line-height: 1.15; color: var(--mc-ink); margin: 0 0 0.5rem; font-weight: 600; letter-spacing: -0.01em; } .legal-page__updated { font-family: var(--mc-font-sans); font-size: 14px; color: var(--mc-text-light); margin: 0 0 2.5rem; } .legal-page__h2 { font-family: var(--mc-font-serif); font-size: clamp(20px, 2.4vw, 24px); line-height: 1.25; color: var(--mc-ink); margin: 2rem 0 0.75rem; font-weight: 600; letter-spacing: -0.005em; } .legal-page p { font-size: 16px; line-height: 1.65; color: var(--mc-text); margin: 0 0 1rem; max-width: 72ch; } .legal-page a { color: var(--mc-accent-deep); text-decoration: underline; text-underline-offset: 2px; } .legal-page a:hover { color: var(--mc-accent-dark); } /* ========================================================= CONTACT PAGE — Vercel parity rebuild ========================================================= */ .contact-page section { padding-block: clamp(64px, 7vw, 112px); } .contact-page .eyebrow { color: var(--mc-accent-deep); } /* ---------- Hero ---------- */ .contact-hero { background: var(--mc-surface-soft); } .contact-hero__title { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; letter-spacing: -.015em; margin: .25em 0 .5em; max-width: 22ch; } .contact-hero__body { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--mc-text-mid); max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); } .contact-hero__cards { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 720px) { .contact-hero__cards { grid-template-columns: repeat(3, 1fr); } } .contact-channel { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-card); text-decoration: none; color: var(--mc-text); box-shadow: var(--mc-shadow-soft); transition: transform .2s var(--mc-ease), border-color .2s var(--mc-ease), box-shadow .2s var(--mc-ease); } .contact-channel:hover { transform: translateY(-2px); border-color: var(--mc-accent); box-shadow: 0 12px 28px -14px rgba(166, 69, 40, .35); color: var(--mc-text); } .contact-channel__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--mc-accent-deep); } .contact-channel__value { font-family: var(--mc-font-serif); font-size: clamp(18px, 2vw, 22px); font-weight: 500; color: var(--mc-ink); line-height: 1.25; } .contact-channel__meta { font-size: 13px; color: var(--mc-text-light); } /* ---------- Visit the office ---------- */ .contact-office { background: var(--mc-surface); } .contact-office__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); } @media (min-width: 1024px) { .contact-office__grid { grid-template-columns: 1.05fr 1fr; align-items: start; } } .contact-office__lede { font-size: 17px; line-height: 1.65; color: var(--mc-text-mid); max-width: 50ch; margin: 0; } .contact-office__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mc-border); } .contact-office__list li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--mc-border); align-items: start; } .contact-office__key { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--mc-text-light); padding-top: 2px; } .contact-office__val { color: var(--mc-text); line-height: 1.55; } .contact-office__val a { color: var(--mc-sage); font-weight: 500; } .contact-office__val a:hover { color: var(--mc-accent-deep); } /* ---------- Service radius ---------- */ .contact-radius { background: var(--mc-surface-soft); } .contact-radius__chips { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .contact-radius__chip { padding: 6px 14px; background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-pill); font-size: 13px; color: var(--mc-text); transition: border-color .2s var(--mc-ease), color .2s var(--mc-ease), background .2s var(--mc-ease); } .contact-radius__chip:hover { border-color: var(--mc-sage); color: var(--mc-sage); background: rgba(42, 112, 88, .04); } /* ---------- Request a quote / Form ---------- */ .contact-quote { background: var(--mc-surface); } .contact-quote__head { max-width: 720px; margin-bottom: clamp(24px, 3vw, 40px); } .contact-quote__lede { font-size: 15px; color: var(--mc-text-light); line-height: 1.6; margin: .75rem 0 0; } .contact-quote__lede a { color: var(--mc-sage); font-weight: 500; } .contact-form { display: flex; flex-direction: column; gap: 18px; max-width: 880px; background: var(--mc-surface-soft); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-card); padding: clamp(20px, 3vw, 36px); } .contact-form__row { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 720px) { .contact-form__row { grid-template-columns: 1fr 1fr; } } .contact-form__field { display: flex; flex-direction: column; gap: 6px; } .contact-form__field--full { width: 100%; } .contact-form__field label { font-size: 13px; font-weight: 600; color: var(--mc-text); letter-spacing: .01em; } .contact-form__field label span[aria-hidden="true"] { color: var(--mc-accent-deep); margin-left: 2px; } .contact-form input[type="text"], .contact-form input[type="tel"], .contact-form input[type="email"], .contact-form textarea, .contact-form select { width: 100%; border: 1px solid var(--mc-border); border-radius: 8px; padding: 12px 16px; background: var(--mc-surface); font-family: var(--mc-font-sans); font-size: 15px; color: var(--mc-text); line-height: 1.4; transition: border-color .2s var(--mc-ease), box-shadow .2s var(--mc-ease), background .2s var(--mc-ease); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--mc-text-light); opacity: 1; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 3px rgba(181, 85, 43, .15); background: var(--mc-surface); } .contact-form textarea { resize: vertical; min-height: 130px; } .contact-form__select { position: relative; } .contact-form__select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 44px; cursor: pointer; } .contact-form__select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--mc-text-mid); border-bottom: 2px solid var(--mc-text-mid); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; } .contact-form__meta { font-size: 13px; color: var(--mc-text-light); } /* ---------- FAQ ---------- */ .contact-faq { background: var(--mc-surface-soft); } .contact-faq__head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); } .contact-faq__group + .contact-faq__group { margin-top: clamp(32px, 4vw, 56px); } .contact-faq__group-title { font-family: var(--mc-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-text-light); margin: 0 0 1rem; } .contact-faq__num { color: var(--mc-accent-deep); } .contact-faq__items { display: flex; flex-direction: column; border-top: 1px solid var(--mc-border); } .contact-faq__item { border-bottom: 1px solid var(--mc-border); background: transparent; } .contact-faq__item > summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-family: var(--mc-font-serif); font-size: clamp(17px, 1.8vw, 19px); color: var(--mc-ink); position: relative; line-height: 1.4; } .contact-faq__item > summary::-webkit-details-marker { display: none; } .contact-faq__item > summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 1; color: var(--mc-accent-deep); transition: transform .25s var(--mc-ease); } .contact-faq__item[open] > summary::after { content: "\2212"; } .contact-faq__answer { padding: 0 0 20px; color: var(--mc-text-mid); line-height: 1.7; max-width: 70ch; } .contact-faq__answer p { margin: 0; } /* ---------- Final CTA card ---------- */ .contact-final { background: var(--mc-surface); } .contact-final__card { background: var(--mc-surface-soft); border: 1px solid var(--mc-border); border-radius: 20px; padding: clamp(32px, 5vw, 56px); text-align: center; max-width: 920px; margin: 0 auto; box-shadow: var(--mc-shadow-soft); } .contact-final__card h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; max-width: 28ch; margin: .25em auto .75em; } .contact-final__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 1rem; } .contact-final__meta { font-size: 14px; color: var(--mc-text-light); margin: 0; } .contact-final__meta a { color: var(--mc-sage); font-weight: 500; } .contact-final__meta a:hover { color: var(--mc-accent-deep); } /* ========================================================= GALLERY PAGE — Vercel parity (page-gallery.php) Hero + 12 category sections + clips row + outro CTA. ========================================================= */ .gallery-page { background: var(--mc-cream, #f7f4ec); color: var(--mc-ink); } .gallery-page .mc-container { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); } .gallery-hero { text-align: left; max-width: 760px; padding-block: clamp(32px, 4vw, 64px) clamp(48px, 5vw, 80px); } .gallery-hero__eyebrow { text-transform: none; letter-spacing: 0; font-size: 14px; font-style: italic; color: var(--mc-accent-deep, #b54b2a); font-family: var(--mc-font-serif); font-weight: 400; margin-bottom: 1rem; } .gallery-hero__title { margin: 0 0 1rem; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em; } .gallery-hero__lead { margin: 0; max-width: 62ch; font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.65; color: var(--mc-text-mid, #4a4a44); } .gallery-category, .gallery-clips, .gallery-outro { padding-block: clamp(40px, 5vw, 80px); border-top: 1px solid rgba(20, 26, 18, 0.08); } .gallery-category__head { margin-bottom: clamp(20px, 2.5vw, 32px); } .gallery-category__eyebrow { color: var(--mc-accent-deep, #b54b2a); margin-bottom: .5rem; } .gallery-category__title { margin: 0; font-family: var(--mc-font-serif); font-weight: 500; color: var(--mc-ink); font-size: clamp(1.5rem, 2.25vw, 2rem); line-height: 1.2; letter-spacing: -.01em; } .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } } .gallery-card { /* Loop A8: Vercel parity — aspect 4/5 portrait, no shadow, sage-100 bg placeholder. */ margin: 0; overflow: hidden; border-radius: 12px; background: #D8E8DC; /* sage-100 placeholder while image loads */ box-shadow: none; aspect-ratio: 4 / 5; position: relative; transition: transform .35s ease, box-shadow .35s ease; will-change: transform; } /* "FEATURED PROJECT" overlay badge bottom-left (first card only). */ .gallery-card--featured::after { content: "FEATURED PROJECT"; position: absolute; left: 12px; bottom: 12px; background: var(--mc-cream-50, #FBF9F4); color: var(--mc-sage-700, #2A7058); font-family: var(--mc-font-sans, Inter); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; padding: 6px 12px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.12); pointer-events: none; } .gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .gallery-card:hover { transform: translateY(-2px); box-shadow: 0 14px 38px 0 rgba(40, 104, 72, 0.18); } .gallery-card:hover img { transform: scale(1.03); } .gallery-card--clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 26, 18, .35), rgba(20, 26, 18, 0) 60%); pointer-events: none; } .gallery-card__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--mc-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(20, 26, 18, .25); pointer-events: none; } .gallery-card__play svg { margin-left: 2px; } .gallery-clips__title { margin: 0; font-family: var(--mc-font-serif); font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em; } .gallery-outro { text-align: center; max-width: 720px; margin-inline: auto; padding-block: clamp(56px, 6vw, 96px); } .gallery-outro__title { margin: 0 0 1rem; font-size: clamp(1.85rem, 3.25vw, 2.75rem); line-height: 1.15; } .gallery-outro__body { margin: 0 auto 1.5rem; max-width: 56ch; color: var(--mc-text-mid, #4a4a44); font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.65; } .gallery-outro__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* ─── SERVICE PAGE TEMPLATE (Agent 3) ───────────────────────────────── */ /* Eyebrow + Final-CTA helpers for the master service-page partial. */ .mc-service-section__eyebrow { color: var(--mc-accent, #6A8C45); font-family: var(--mc-font-sans, Inter, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 18px; margin: 0 0 12px; } /* PROMPTFIX: Vercel `Ready to start?` section has transparent bg — the visual band is the inner cream card, NOT a peach section band. Vercel adds two decorative blur circles inside the card for the subtle gradient halo (honey-200 top-right + sage bottom-left). */ .mc-service-cta { background: transparent; } .mc-service-cta .mc-cta-band { position: relative; overflow: hidden; } .mc-service-cta .mc-cta-band::before, .mc-service-cta .mc-cta-band::after { content: ""; position: absolute; width: 288px; height: 288px; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(64px); /* Tailwind blur-3xl parity */ } .mc-service-cta .mc-cta-band::before { top: -80px; right: -80px; background: rgba(244, 232, 198, 0.7); /* honey-200 / .7 */ } .mc-service-cta .mc-cta-band::after { bottom: -96px; left: -64px; background: rgba(182, 210, 189, 0.7); /* sage-200 / .7 */ } .mc-service-cta .mc-cta-band > * { position: relative; z-index: 1; } .mc-service-cta__eyebrow { color: var(--mc-accent, #6A8C45); font-family: var(--mc-font-sans, Inter, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 18px; margin: 0 0 12px; } .mc-service-cta__h2 { font-family: var(--mc-font-serif, "Lora", Georgia, serif); font-style: italic; color: var(--mc-ink, #1F1B17); margin: 0 0 16px; } .mc-service-cta__lead { max-width: 60ch; margin: 0 auto 24px; color: var(--mc-text-mid, #3D3631); font-size: 17px; line-height: 1.65; } .mc-service-cta__actions { justify-content: center; } /* Constrain hero h1 + lead container so they don't go full-width on wide screens. */ .mc-service-hero__h1 { color: var(--mc-ink, #1F1B17); } .mc-service-hero__eyebrow { color: var(--mc-accent, #6A8C45); letter-spacing: 0.18em; font-size: 12px; line-height: 18px; } /* What-we-do section: align eyebrow + heading left of constrained container */ .svc-what-we-do .mc-service-section__eyebrow { text-align: left; } .svc-what-we-do .mc-h2 { font-style: italic; margin-bottom: 16px; } /* ─── SERVICE-AREA two-col (chips left, Google Maps iframe right @ lg+) ─── */ .mc-service-area__wrap { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-top: clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 1024px) { .mc-service-area__wrap { grid-template-columns: 1fr 1fr; } } .mc-service-area__chips-col .about-areas__chips { margin: 0; } .mc-service-area__map-col { width: 100%; border-radius: var(--mc-radius-lg, 20px); overflow: hidden; box-shadow: var(--mc-shadow-card); } .mc-service-area__map-col iframe { display: block; width: 100%; border: 0; } /* ─── FAQ accordion (per-service, modelled on .mc-faq__item) ─── */ .mc-service-faq { padding-block: var(--mc-space-section, clamp(7rem, 14vh, 12.5rem)); } .mc-service-faq__h2 { /* Brand-palette heading: sage-900 — same as every other service-page heading. Inter weight 800 + tight tracking for the Vercel-style SectionHeader rhythm. Size matches the other section h2s (clamp 1.4rem→25.67px) so the FAQ stands out by WEIGHT not size, keeping the page's heading rhythm coherent. */ font-family: var(--mc-font-sans, Inter, sans-serif); font-style: normal; font-size: clamp(1.4rem, 2vw, 25.67px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--mc-sage-900, #286848); text-align: center; margin: 0 0 1.5rem; } .mc-service-faq__eyebrow { /* Terra-cotta eyebrow — uses --mc-accent-dark / token #A64528, the canonical eyebrow tone already used by .mc-eyebrow elsewhere. */ display: block; font-family: var(--mc-font-sans, Inter, sans-serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; color: var(--mc-accent-dark, #A64528); margin: 0 0 0.75rem; } .mc-service-faq__list { list-style: none; /* Vercel max-w-3xl = 768px. */ max-width: 768px; margin: clamp(1.5rem, 2.5vw, 3rem) auto 0; padding: 0; } .mc-service-faq__item { background: transparent; border: 0; margin: 0; /* Brand-palette separator: --mc-surface-alt (#F0EDE5) was too pale; cream-200 (#ECE3D6) gives the needed contrast while staying inside the cream family. */ border-bottom: 1px solid var(--mc-cream-200, #ECE3D6); } /* Vercel: last:border-b-0 — accordion has no trailing rule. */ .mc-service-faq__item:last-child { border-bottom: 0; } .mc-service-faq__item details { position: relative; } .mc-service-faq__item summary, .mc-service-faq__q { list-style: none; cursor: pointer; /* py-5 = 20px vert; right inset 56px leaves room for the 36px circle toggle + 16px gap. */ padding: 1.25rem 56px 1.25rem 16px; color: var(--mc-ink, #2D2A24); display: block; /* Inter, fluid clamp 18→28px, weight 700. */ font-family: var(--mc-font-sans, Inter, sans-serif); font-size: clamp(1.125rem, 1.4vw + 0.15rem, 1.75rem); font-weight: 700; line-height: 1.3; min-height: 44px; position: relative; /* Sage left bar — transparent by default so the layout doesn't shift on toggle; details[open] swaps the color in. */ border-left: 2px solid transparent; transition: border-left-color 0.3s var(--mc-ease, cubic-bezier(.4,0,.2,1)), color 0.2s ease; } .mc-service-faq__item summary:hover { color: var(--mc-accent-dark, #A64528); } .mc-service-faq__item summary:focus-visible { outline: 2px solid var(--mc-accent-dark, #A64528); outline-offset: 2px; border-radius: 2px; } /* The native [open] attribute lives on
, not on the wrapping
  • , so all open-state styling keys off `details[open]`. Sage left bar matches the home FAQ pattern. */ .mc-service-faq__item details[open] > summary { border-left-color: var(--mc-sage-700, #6a8c45); } .mc-service-faq__item summary::-webkit-details-marker { display: none; } /* 36×36 circular toggle — 1px ink border, ink glyph closed. On open the circle fills with sage-900 and the glyph turns cream so the open state reads as the same brand-green moment as the left bar. */ .mc-service-faq__item summary::after { content: "+"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--mc-ink, #2D2A24); border-radius: 9999px; background: transparent; font-family: var(--mc-font-sans, Inter, sans-serif); font-size: 18px; font-weight: 400; line-height: 1; color: var(--mc-ink, #2D2A24); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .mc-service-faq__item details[open] summary::after { content: "\2212"; /* − */ background: var(--mc-sage-900, #286848); border-color: var(--mc-sage-900, #286848); color: var(--mc-cream-50, #FBF9F4); } .mc-service-faq__a { /* pb-6 = 24px, indented 16px to align under the question text past the sage open-state bar. Brand-palette text-mid (#6B6059 ink-muted). Weight 500 (not 400) so the answer doesn't read anemic next to the 700 question — Inter 400 at fluid-body size reads sub-pixel-thin on Windows ClearType. */ padding: 0 0 1.5rem 16px; color: var(--mc-ink-muted, #6B6059); font-family: var(--mc-font-sans, Inter, sans-serif); font-size: clamp(1rem, 0.9vw + 0.25rem, 1.25rem); font-weight: 500; line-height: 1.7; } .mc-service-faq__a p { margin: 0 0 .75rem; } .mc-service-faq__a p:last-child { margin-bottom: 0; } /* ─── Hero fluid object-fit (kill fixed 1200x900 crop) ─── */ .mc-service-hero__media { width: 100%; height: auto; aspect-ratio: 4 / 3; } .mc-service-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ========================================================= AGENT-4: REMAINING PAGES (about / services index / gallery / contact / privacy / terms) Add-only scoped selectors. Do not modify other agents' selectors. ========================================================= */ /* ── /services index — hero + outro split (text left, CTAs right) ── */ .mc-services-index-hero__split, .mc-services-index-outro__split { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; } @media (min-width: 960px) { .mc-services-index-hero__split, .mc-services-index-outro__split { grid-template-columns: 1.4fr 1fr; } } .mc-services-index-hero__copy .mc-h1, .mc-services-index-outro__copy .mc-h2 { margin-top: .5rem; margin-bottom: 1rem; } .mc-services-index-hero__copy .mc-lead, .mc-services-index-outro__copy .mc-lead { margin-inline: 0; max-width: 60ch; } .mc-services-index-hero__actions, .mc-services-index-outro__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-start; } @media (min-width: 960px) { .mc-services-index-hero__actions, .mc-services-index-outro__actions { justify-content: flex-end; } } .mc-services-index-hero__actions .mc-btn--ghost, .mc-services-index-outro__actions .mc-btn--ghost { display: inline-flex; align-items: center; gap: 8px; } .mc-services-index-outro { background: var(--mc-bg); } /* ── /about — eyebrow letter-spacing & numbered-eyebrow color fix ── */ /* Vercel uses .18em not .2em; numbered eyebrows are accent (olive) not accent-deep (red) */ .about-page .about-eyebrow { letter-spacing: .18em; color: var(--mc-accent, #6A8C45); } .about-page .about-eyebrow--numbered { color: var(--mc-accent, #6A8C45); } /* Hero intro lede width slightly wider to match Vercel content flow */ .about-page .about-intro__lede { max-width: 60ch; } /* ── /gallery — eyebrow color + chip-rule overrides ───────────────── */ /* Vercel uses olive accent for category eyebrows, not terra; existing .gallery-category__eyebrow uses accent-deep */ .gallery-page .gallery-hero__eyebrow { color: var(--mc-accent, #6A8C45); font-family: var(--mc-font-sans, Inter, sans-serif); font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } .gallery-page .gallery-category__eyebrow { color: var(--mc-accent, #6A8C45); } /* Remove the border-top divider — Vercel sections flow without separators */ .gallery-page .gallery-category, .gallery-page .gallery-clips, .gallery-page .gallery-outro { border-top: 0; } /* ── /privacy + /terms — Vercel parity: LEFT-aligned prose, sage headings ── */ .legal-page .mc-container { /* Vercel uses full container with prose constrained to ~540px col on left */ max-width: 1408px; } .legal-page__prose { max-width: 540px; margin-inline: 0; padding-block: clamp(48px, 6vw, 96px); } .legal-page .legal-page__eyebrow { color: var(--mc-accent-deep, #C55731); letter-spacing: .18em; font-size: 12px; font-weight: 600; text-transform: uppercase; font-family: var(--mc-font-sans, Inter, sans-serif); margin: 0 0 16px; } .legal-page .legal-page__h1 { font-family: var(--mc-font-serif); font-size: clamp(34px, 4vw, 48px); line-height: 1.1; letter-spacing: -.015em; font-weight: 500; color: var(--mc-sage-700, #2A7058); margin: 0 0 16px; } .legal-page .legal-page__updated { color: var(--mc-accent, #6A8C45); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-family: var(--mc-font-sans, Inter, sans-serif); margin: 0 0 1.5rem; } .legal-page .legal-page__h2 { font-family: var(--mc-font-serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; font-weight: 500; color: var(--mc-sage-700, #2A7058); margin-top: 2.5rem; margin-bottom: 0.75rem; } .legal-page p { font-size: 16px; line-height: 1.75; color: var(--mc-ink, #0C0C0C); margin: 0 0 1rem; } .legal-page a { color: var(--mc-accent-deep, #C55731); text-decoration: underline; text-underline-offset: 2px; } .legal-page a:hover { color: var(--mc-accent-dark, #8C3F1E); } /* ── /contact — hero card row + form polish ─────────────────────── */ .contact-page .contact-hero__cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(24px, 3vw, 40px); } @media (min-width: 768px) { .contact-page .contact-hero__cards { grid-template-columns: repeat(3, 1fr); } } .contact-page .contact-channel { /* Loop A8: Vercel parity — radius 20px, icon-square top-left, sage value text, taller card. */ background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: 20px; padding: 24px; box-shadow: var(--mc-shadow-soft); display: flex; flex-direction: column; gap: 6px; transition: box-shadow var(--mc-dur) var(--mc-ease), transform var(--mc-dur) var(--mc-ease); color: var(--mc-ink); text-decoration: none; min-height: 180px; } .contact-page .contact-channel:hover { box-shadow: var(--mc-shadow-card); transform: translateY(-4px); } .contact-page .contact-channel__icon { /* Vercel parity: h-10 w-10 rounded-xl bg-cream-50 text-terra-600 (40x40, 12px radius, cream-50 bg, terra-600 glyph, no resting shadow). */ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #FBF9F4; /* cream-50 */ box-shadow: none; color: #C55731; /* terra-600 */ margin-bottom: 12px; } /* Vercel parity: ALL three channel icons share terra-600 (uniform across cards). */ .contact-page .contact-channel__label { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mc-sage-700, #2A7058); } .contact-page .contact-channel__value { /* Sage-700 serif, larger size to match Vercel. */ font-family: var(--mc-font-serif); font-size: 24px; line-height: 1.2; color: var(--mc-sage-700, #2A7058); font-weight: 500; letter-spacing: -0.01em; } .contact-page .contact-channel__meta { font-size: 14px; color: var(--mc-text-mid); margin-top: 4px; } /* Vercel-parity warm-tinted hero cards (honey/sage/cream from Vercel computed). */ .contact-page .contact-hero__cards .contact-channel--peach, .contact-page .contact-hero__cards .contact-channel:nth-child(1) { background: var(--mc-honey-200); /* honey-200 = warm peach/honey */ } .contact-page .contact-hero__cards .contact-channel--sage, .contact-page .contact-hero__cards .contact-channel:nth-child(2) { background: var(--mc-sage-50); /* sage-50 */ } .contact-page .contact-hero__cards .contact-channel--sand, .contact-page .contact-hero__cards .contact-channel:nth-child(3) { background: var(--mc-cream-200); /* cream-200 */ } /* /contact — office + quote form: 2-col split @ lg+ ─────────────── Vercel: lg:grid-cols-12 with col-span-5 (office) + col-span-7 (form). */ .contact-page .contact-office__quote-grid { display: grid; grid-template-columns: 1fr; gap: 40px; /* Vercel lg:gap-10 */ align-items: start; } @media (min-width: 1024px) { .contact-page .contact-office__quote-grid { grid-template-columns: 5fr 7fr; } } .contact-page .contact-quote--inline { background: var(--mc-form-card-bg); border: 1px solid var(--mc-border); border-radius: 20px; padding: clamp(24px, 3vw, 40px); box-shadow: var(--mc-shadow-soft); } .contact-page .contact-quote--inline .contact-quote__head { margin-bottom: 1.25rem; } /* /contact — service radius compact chip styling within office col */ .contact-page .contact-radius { padding-block: clamp(40px, 5vw, 64px); } .contact-page .contact-radius__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; } .contact-page .contact-radius__chip { padding: 6px 12px; font-size: 13px; } /* /contact — FAQ split layout (heading left, accordion right) ───── */ .contact-page .contact-faq__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; } @media (min-width: 1024px) { .contact-page .contact-faq__grid { grid-template-columns: 1fr 2fr; } } .contact-page .contact-faq__items--bare { list-style: none; padding: 0; margin: 0; } /* /contact — final 2-col card ──────────────────────────────────── */ .contact-page .contact-final__grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; } @media (min-width: 768px) { .contact-page .contact-final__grid { grid-template-columns: 1fr 1.2fr; } } .contact-page .contact-final__left, .contact-page .contact-final__right { background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: 20px; padding: clamp(24px, 3vw, 40px); box-shadow: var(--mc-shadow-soft); } /* ========================================================= AGENT-7 ANIMATION PARITY — appended 2026-05-17 Cataloged from Vercel chrome-devtools probe. All wrapped in prefers-reduced-motion: no-preference except where the static fallback would be wrong (e.g. scroll progress hidden). ========================================================= */ /* 1. SCROLL PROGRESS BAR (Vercel: 3px top fixed gradient). Width is set via JS (--mc-scroll-progress 0-100). Opacity fades in once we leave the hero (scrollY > 80px) to match Vercel's reveal. */ .mc-scroll-progress { position: fixed; top: 0; left: 0; z-index: 60; /* above sticky header (40) but below mobile drawer (50) */ height: 3px; width: var(--mc-scroll-progress, 0%); background: linear-gradient(90deg, var(--mc-accent, #6A8C45), var(--mc-accent-2, #E4915B)); opacity: 0; pointer-events: none; transition: opacity 300ms var(--mc-ease), width 80ms linear; will-change: width; } .mc-scroll-progress.is-active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .mc-scroll-progress { display: none; } } /* 2. FAQ
    height transition shim — uses :is(.is-animating) class added by JS during open/close to opt-into max-height transition. Without JS,
    snaps open instantly (graceful degradation). */ .mc-faq__item .mc-faq__a, .faq-item .faq-item__a, .service-faq__item .service-faq__a, .mc-service-faq__item details .mc-service-faq__a { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { .mc-faq__item.is-animating .mc-faq__a, .faq-item.is-animating .faq-item__a, .service-faq__item.is-animating .service-faq__a, .mc-service-faq__item details.is-animating .mc-service-faq__a { transition: max-height 280ms var(--mc-ease), opacity 200ms var(--mc-ease); } } /* 3. IMAGE FADE-IN on load (Vercel uses native Next/Image with no placeholder, but our WP version benefits from a gentle fade so lazy-loaded images don't pop in jarringly). PROMPTFIX: include `transform` so per-component hover-scale rules (e.g. .mc-recent__media img) inherit a real transform transition instead of being clobbered to opacity-only. */ @media (prefers-reduced-motion: no-preference) { img[data-mc-fade] { opacity: 0; transition: opacity 400ms var(--mc-ease), transform 700ms cubic-bezier(0.4, 0, 0.2, 1); } img[data-mc-fade].is-loaded { opacity: 1; } } /* 4. HERO H1 SPLIT-TEXT REVEAL (per-word fade-up). JS wraps each word in and adds .is-revealed on load so we can stagger. Mirrors Vercel's Framer-Motion split-text. */ .mc-split-word { display: inline-block; will-change: transform, opacity; } @media (prefers-reduced-motion: no-preference) { .mc-split-word { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--mc-ease-reveal), transform 500ms var(--mc-ease-reveal); transition-delay: calc(var(--mc-split-i, 0) * 30ms); } .mc-split-host.is-revealed .mc-split-word { opacity: 1; transform: translateY(0); } } /* 5. ICON HOVER scale+rotate (Vercel cards `hover:scale-110 hover:-rotate-6`) Apply to icon containers inside cards. Honors reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .mc-upgrade-card .mc-upgrade-card__icon, .service-card .service-card__icon, .mc-whyus__card .mc-whyus__card-icon, .mc-iconlist__bullet-icon, [data-mc-icon-hover] { transition: transform 300ms var(--mc-ease); will-change: transform; } .mc-upgrade-card:hover .mc-upgrade-card__icon, .service-card:hover .service-card__icon, .mc-whyus__card:hover .mc-whyus__card-icon, .mc-iconlist__bullet:hover .mc-iconlist__bullet-icon, [data-mc-icon-hover]:hover, a:hover > [data-mc-icon-hover] { transform: scale(1.10) rotate(-6deg); } } /* 6. AREACHIPS — clamp transition to color/bg/border only (not "all") so the chip doesn't animate width when "+N MORE" expands. */ .mc-areachip { transition: var(--mc-transition-color); } .mc-areachips__more { transition: var(--mc-transition-color); } /* 7. PAGE TRANSITION fade (approximates Next.js client routing). Body fades in on pageshow; bfcache restores get instant. */ @media (prefers-reduced-motion: no-preference) { body.mc-page-fade { opacity: 0; animation: mcPageFadeIn 200ms var(--mc-ease) forwards; } @keyframes mcPageFadeIn { to { opacity: 1; } } } /* 8. NAV LINK COLOR HOVER (already partially present, canonical token). Limit to color/bg/border 0.15s so anchor doesn't animate transform. */ .site-nav a, .site-footer a, .mobile-menu a { transition: var(--mc-transition-color); } /* 9. SAFETY: any leftover `transition: all` on interactive elements that the Vercel probe flagged as too-broad ("31 cards with transition all" leaks to layout properties). The cards that should hover-lift already have the explicit transform/shadow/border transition above (.mc-recent__card et al.). This catch-all reduces leakage on remaining anchors. */ @media (prefers-reduced-motion: no-preference) { a[href]:not([class*="card"]):not(.mc-btn):not(.mc-cta):not(.mc-cta-pill):not(.mc-cta-band__btn) { transition: var(--mc-transition-color); } } /* 10. REDUCED MOTION fallback — force everything to instant for users who opted out at the OS level. Reveal classes already use a `no-preference` gate so they're naturally invisible -> we explicitly opacity:1 here. */ @media (prefers-reduced-motion: reduce) { .mc-reveal, .mc-reveal--stagger > *, .mc-split-word, img[data-mc-fade] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================= SERVICE-PAGE DEEP TYPOGRAPHY / COLOR / SIZE PARITY Direct Vercel-vs-WP probe deltas captured 2026-05-17. Vercel computed values @ probe (dpr 1.5): h1 33.37px / 400 / -0.834px / rgb(40,104,72) [sage-900] h2 25.67px / 400 / -0.642px / rgb(40,104,72) [sage-900] why-card h3 16px / 400 / / rgb(40,104,72) [sage-900] eyebrow hero 16px / 600 / 2.88px / rgb(197,87,49) [terra-600] eyebrow section 16px / 600 / 2.88px / rgb(197,87,49) [terra-600] body para 16px / 400 / 26px lh / rgb(62,61,59) hero CTA primary 16px / 14px 32px / radius 9999px / bg terra-700, color cream-50 ghost CTA 16px / 14px 32px / 1.33px border terra-700 / color ink, bg transparent city chip 16px / 400 / plain text (no chip pill) ========================================================= */ /* --- Heading colors: h1/h2/h3 on service page are sage-900, EXCEPT the FAQ h2 which Vercel paints near-black (#0F0D0B). --- */ .mc-service-page .mc-service-hero__h1, .mc-service-page h1, .mc-service-page h2:not(.mc-service-faq__h2), .mc-service-page .mc-h2:not(.mc-service-faq__h2), .mc-service-page .mc-service-cta__h2, .mc-service-page .mc-service-page__why-card h3 { color: var(--mc-sage-900, #286848) !important; font-style: normal !important; /* Vercel uses upright Inter, not italic Lora */ } /* --- H1 typography parity: Inter 400, tighter letter-spacing --- */ .mc-service-page .mc-service-hero__h1 { font-family: var(--mc-font-sans, Inter, sans-serif) !important; font-weight: 400 !important; letter-spacing: -0.025em !important; /* Vercel -0.834px / 33.37px = ~ -0.025em */ line-height: 1.15 !important; } /* --- H2 typography parity: Inter 400, tighter letter-spacing, NOT italic. The FAQ h2 is excluded because Vercel's SectionHeader paints it weight 800 / -0.02em (see .mc-service-faq__h2 above) — letting this 400-weight rule cascade over it would flatten the heading. --- */ .mc-service-page h2:not(.mc-service-faq__h2), .mc-service-page .mc-h2:not(.mc-service-faq__h2), .mc-service-page .mc-service-cta__h2, .mc-service-page .svc-what-we-do .mc-h2 { font-family: var(--mc-font-sans, Inter, sans-serif) !important; font-weight: 400 !important; letter-spacing: -0.025em !important; line-height: 1.2 !important; font-style: normal !important; } /* --- Why-choose card h3: fluid 16→19px so the card title scales with the body text inside its own card (which is fluid 16→20px). Weight bumped 400 → 600 so the title reads as the card's anchor instead of blending into the body. --- */ .mc-service-page .mc-service-page__why-card h3 { font-family: var(--mc-font-sans, Inter, sans-serif) !important; font-size: clamp(1rem, 0.9vw + 0.3rem, 1.1875rem) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -0.0125em !important; margin-bottom: 0.5rem !important; } /* --- Hero eyebrow: terra-600 rust orange, 16px, 600, 0.18em --- */ .mc-service-page .mc-service-hero__eyebrow { color: var(--mc-terra-600, #C55731) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; line-height: 1.65 !important; font-family: var(--mc-font-sans, Inter, sans-serif) !important; } /* --- Section eyebrows: terra-600, 16px not 12px, 0.18em letter-spacing --- */ .mc-service-page .mc-eyebrow, .mc-service-page .mc-service-section__eyebrow, .mc-service-page .mc-service-cta__eyebrow { color: var(--mc-terra-600, #C55731) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; line-height: 1.65 !important; font-family: var(--mc-font-sans, Inter, sans-serif) !important; text-transform: uppercase !important; margin: 0 0 12px !important; } /* --- Hero lead paragraph: warm dark gray, NOT rust --- Excludes .mc-service-hero__eyebrow which is also a

    in copy. Size bumped from locked 16px → fluid clamp matching Vercel `text-fluid-body-lg` so the lead doesn't read sub-pixel-thin at desktop widths. */ .mc-service-page .mc-service-hero__lead, .mc-service-page .mc-service-hero__copy p:not(.mc-service-hero__eyebrow) { color: rgb(62, 61, 59) !important; /* Vercel #3E3D3B */ font-size: clamp(1.0625rem, 1.1vw + 0.25rem, 1.375rem) !important; line-height: 1.6 !important; font-weight: 500 !important; font-family: var(--mc-font-sans, Inter, sans-serif) !important; font-style: normal !important; } /* --- "What we do" list items: Vercel fluid-body (16→20px), weight 500 so the bullets don't read anemic next to the bold question heading in the FAQ below. --- */ .mc-service-page .svc-what-we-do .check-list li { font-size: clamp(1rem, 0.9vw + 0.25rem, 1.25rem) !important; line-height: 1.65 !important; font-weight: 500 !important; color: var(--mc-ink, #2D2A24) !important; font-family: var(--mc-font-sans, Inter, sans-serif) !important; } /* --- Why-card body: floor bumped from 0.875rem → 1rem so it lands at 16.96px (matching intro bullets + FAQ answer) instead of 15.5px. Keeps the why-card aligned with the rest of the page body rhythm — was reading as a demoted text tier. --- */ .mc-service-page .mc-service-page__why-card p { color: rgb(62, 61, 59) !important; font-size: clamp(1rem, 0.9vw + 0.25rem, 1.25rem) !important; line-height: 1.6 !important; font-weight: 500 !important; font-family: var(--mc-font-sans, Inter, sans-serif) !important; } /* --- Service-area city chips: WHITE PILL with sage-500/30% border, sage-900 text. 12px / 500 / 4px 12px / 9999px. Hover: terra border + terra text + lift. --- */ .mc-service-page .svc-areas .about-areas__chip, .mc-service-page .mc-service-area__chips-col .about-areas__chip { display: inline-block !important; background: #FFFFFF !important; border: 1px solid rgba(74, 146, 117, 0.3) !important; padding: 4px 12px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--mc-sage-900, #286848) !important; border-radius: 9999px !important; line-height: 1.5 !important; font-family: var(--mc-font-sans, Inter, sans-serif) !important; text-transform: none !important; letter-spacing: 0 !important; transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; cursor: default; } .mc-service-page .svc-areas .about-areas__chip:hover, .mc-service-page .mc-service-area__chips-col .about-areas__chip:hover { border-color: var(--mc-terra-600, #C55731) !important; color: var(--mc-terra-700, #A64528) !important; transform: translateY(-2px); box-shadow: 0 4px 8px -2px rgba(166, 69, 40, 0.15); } .mc-service-page .svc-areas .about-areas__chips, .mc-service-page .mc-service-area__chips-col .about-areas__chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .mc-service-page .svc-areas .about-areas__chips li, .mc-service-page .mc-service-area__chips-col .about-areas__chips li { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* --- Primary CTA on service pages: pill, terra-700 bg, cream text, 14px 32px / 16px --- */ .mc-service-page .mc-service-hero__cta .mc-btn--primary, .mc-service-page .mc-service-cta__actions .mc-btn--primary, .mc-service-page .mc-btn--primary.mc-btn--lg { padding: 14px 32px !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.65 !important; border-radius: 9999px !important; background: var(--mc-terra-700, #A64528) !important; color: var(--mc-cream-50, #FBF9F4) !important; border: 0 !important; min-height: 57px !important; } /* --- Ghost CTA on service pages: pill, terra-700 border, ink text, transparent bg --- */ .mc-service-page .mc-service-hero__cta .mc-btn--ghost, .mc-service-page .mc-service-cta__actions .mc-btn--ghost, .mc-service-page .mc-btn--ghost { padding: 14px 32px !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.65 !important; border-radius: 9999px !important; background: transparent !important; color: var(--mc-ink, #2D2A24) !important; border: 1.5px solid var(--mc-terra-700, #A64528) !important; min-height: 57px !important; } /* --- Gallery overrides: the [section[aria-label$="gallery" i]] block injects a `::before` "Recent work" eyebrow on the header. Make it match the new 16px/terra-600/0.18em spec. --- */ .mc-service-page section[aria-label$="gallery" i] > .mc-container > header::before { font-size: 16px !important; color: var(--mc-terra-600, #C55731) !important; letter-spacing: 0.18em !important; font-weight: 600 !important; font-family: var(--mc-font-sans, Inter, sans-serif) !important; margin-bottom: 0.75rem !important; } /* "Open full gallery" arrow link: bump to 14px/terra-600 (was 12px) */ .mc-service-page section[aria-label$="gallery" i] > .mc-container > .text-center.mt-4 .mc-btn.mc-btn--ghost, .mc-service-page section[aria-label$="gallery" i] > .mc-container > .text-center.mt-4 .mc-btn.mc-btn--ghost::after { font-size: 14px !important; color: var(--mc-terra-600, #C55731) !important; /* Reset the pill/border that the general ghost override above applied, since this gallery-arrow variant is text-only. */ padding: 0 !important; border: 0 !important; background: transparent !important; min-height: 0 !important; border-radius: 0 !important; font-weight: 500 !important; } /* --- FAQ summary: Inter, fluid clamp size, weight 700, brand ink. The earlier override forced 17px/500/Lora; this overrides it so the canonical typography at .mc-service-faq__item summary applies. --- */ .mc-service-page .mc-service-faq__item summary, .mc-service-page .mc-service-faq__q { font-family: var(--mc-font-sans, Inter, sans-serif) !important; font-style: normal !important; font-size: clamp(1.125rem, 1.4vw + 0.15rem, 1.75rem) !important; font-weight: 700 !important; color: var(--mc-ink, #2D2A24) !important; } /* "What we do": Vercel constrains the eyebrow + h2 + intro paragraph to max-w-3xl (768px) while the bullet list spans the full container width. Match that layout. */ .mc-service-page .svc-what-we-do .mc-container > .mc-eyebrow, .mc-service-page .svc-what-we-do .mc-container > .mc-service-section__eyebrow, .mc-service-page .svc-what-we-do .mc-container > h2, .mc-service-page .svc-what-we-do .mc-container > .mc-h2, .mc-service-page .svc-what-we-do .mc-container > p { max-width: 768px; } /* --- Section headers (Service area, Why choose, FAQ, Final CTA): Vercel renders ALL section headings LEFT-aligned ("text-align: start"), but WP template wraps them in `.text-center mb-4`. Force left for service-page. --- */ .mc-service-page .svc-areas > .mc-container > header, .mc-service-page .svc-areas > .mc-container > header.text-center, .mc-service-page > section[aria-label="Why homeowners choose McAllister"] > .mc-container > header, .mc-service-page > section[aria-label="Why homeowners choose McAllister"] > .mc-container > header.text-center, .mc-service-page .mc-service-cta .mc-cta-band { text-align: left !important; } .mc-service-page .svc-areas > .mc-container > header h2, .mc-service-page > section[aria-label="Why homeowners choose McAllister"] > .mc-container > header h2, .mc-service-page .mc-service-cta .mc-cta-band h2 { text-align: left !important; } /* FAQ section heading: also left */ /* FAQ heading is CENTERED on the Vercel reference (SectionHeader default). Was previously force-left to match the other service-section headings; removed so the canonical .mc-service-faq__h2 rule (text-align:center) applies. */ /* Service-area paragraph "We proudly serve..." also left-aligned */ .mc-service-page .svc-areas > .mc-container > header p { text-align: left !important; } .mc-service-page > section[aria-label="Why homeowners choose McAllister"] > .mc-container > header p { text-align: left !important; max-width: 60ch; } /* Final CTA bottom paragraph + actions: keep left-aligned in a grid-style 2-col on lg+ */ .mc-service-page .mc-service-cta .mc-cta-band .mc-service-cta__actions { justify-content: flex-start !important; } @media (min-width: 900px) { .mc-service-page .mc-service-cta .mc-cta-band { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; gap: 32px !important; } .mc-service-page .mc-service-cta .mc-cta-band .mc-eyebrow, .mc-service-page .mc-service-cta .mc-cta-band h2, .mc-service-page .mc-service-cta .mc-cta-band .mc-service-cta__lead { grid-column: 1 / 2; } .mc-service-page .mc-service-cta .mc-cta-band .mc-service-cta__actions { grid-column: 2 / 3; grid-row: 1 / 4; flex-wrap: wrap; align-self: center; } } /* Also relax the "Don't see your city?" footer text under areas to left + ink-mid */ .mc-service-page .svc-areas > .mc-container > p.text-center.mt-4 { text-align: left !important; color: rgb(62, 61, 59) !important; margin-top: 24px !important; } .mc-service-page .svc-areas > .mc-container > .text-center.mt-2 { text-align: left !important; margin-top: 12px !important; } /* --- Breadcrumb: smaller, sage-700 hover --- */ .mc-service-page .mc-breadcrumbs { font-size: 13px !important; color: rgb(62, 61, 59) !important; } .mc-service-page .mc-breadcrumbs a { color: rgb(62, 61, 59) !important; } .mc-service-page .mc-breadcrumbs a:hover { color: var(--mc-terra-700, #A64528) !important; } .mc-service-page .mc-breadcrumbs__current { color: var(--mc-sage-900, #286848) !important; font-weight: 500 !important; } /* SKELETON LOADERS — canonical block lives at the bottom of this file ("SKELETON / SHIMMER — lazy-load placeholder system"). The earlier duplicate that used to sit here was removed 2026-05-19: its conflicting @keyframes (left→right vs right→left) and .mc-img-wrap > img rules (height:100%/object-fit:cover vs height:auto) were cascading over the canonical block. Search for "mc-shimmer" to find the live rules. */ /* ===================================================================== PHASE B CARD AUDIT FIXES (2026-05-17) Probe-driven fixes for 8 card variants vs Vercel computed styles. Each rule scoped to card class only — does NOT touch tokens. ===================================================================== */ /* --- Testimonial card: body text color/weight, name color --- */ .mc-test-card__quote p, .mc-test-card__quote { color: #0C0C0C; /* Vercel rgb(12,12,12) */ font-size: 17.6px; /* Vercel text-h6-ish */ font-weight: 500; /* Vercel medium */ } .mc-test-card__name { color: #6B6059; } /* Vercel ink-500 rgb(107,96,89) */ /* --- Why-us 4-card grid (home) --- */ .mc-whyus__card h3, .mc-whyus__card h4 { font-size: 30px; color: #0C0C0C; font-weight: 500; } .mc-whyus__card p { font-size: 16px; color: #6B6059; /* Vercel ink-500 */ line-height: 1.55; } /* --- Upgrade card: body color, shadow match Vercel sage glow --- */ .mc-upgrade-card { box-shadow: 0 8px 32px 0 rgba(40, 104, 72, 0.10); } .mc-upgrade-card__label { color: #0C0C0C; } .mc-upgrade-card { border-color: rgb(240, 237, 229); } /* --- Recent-work card: add Vercel-parity radius + resting shadow --- */ .mc-recent__card { border-radius: 20px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04); } /* --- Service card (index page): body font Inter, title weight/size, drop resting shadow (Vercel hover-only). --- */ .service-card { box-shadow: none; } .service-card__body h3, .service-card__body h2 { font-family: var(--mc-font-sans, Inter, sans-serif); font-style: normal; font-weight: 400; font-size: 17px; color: #286848; /* Vercel sage-700 rgb(40,104,72) */ letter-spacing: 0; } .service-card__body p { font-size: 14px; color: #3E3D3B; /* Vercel ink-600 rgb(62,61,59) */ line-height: 1.625; /* 22.75 / 14 */ } .service-card { background: #FBF9F4; border-color: rgb(232, 223, 201); } /* --- Channel cards (contact): value font/size/color/weight match Vercel --- */ .contact-page .contact-channel__value, .contact-channel__value { font-family: var(--mc-font-sans, Inter, sans-serif); font-style: normal; font-size: 17px; font-weight: 400; color: #286848; /* sage-900 ish; Vercel rgb(40,104,72) */ letter-spacing: 0; } .contact-page .contact-channel__label, .contact-channel__label { color: #6B6A68; } /* ink-500 */ .contact-page .contact-channel__meta, .contact-channel__meta { color: #3E3D3B; font-size: 14px; } .contact-page .contact-channel, .contact-channel { border-color: rgb(232, 223, 201); box-shadow: none; } /* ========================================================= CONTACT PAGE — Vercel parity rebuild (2026-05-19) - Hero compacted (channel cards moved to their own section) - Office list = 3 icon items (Office/Hours/Response) - Service radius wrapped in cream-100 card - Form card: cream-50 bg + honey blur halo, uppercase caption labels, rounded-xl inputs with cream-300 border + terra-600 focus. ========================================================= */ .contact-page .contact-hero { padding-block: clamp(40px, 5vw, 64px); } .contact-page .contact-options { background: var(--mc-surface-soft); padding-bottom: clamp(40px, 5vw, 56px); } .contact-page .contact-options__cards { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 720px) { .contact-page .contact-options__cards { grid-template-columns: repeat(3, 1fr); } } .contact-page .contact-options .contact-channel--peach { background: var(--mc-honey-200, #F4E8C6); } .contact-page .contact-options .contact-channel--sage { background: var(--mc-sage-50, #EDF5EE); } .contact-page .contact-options .contact-channel--sand { background: var(--mc-cream-200, #E8DFC9); } .contact-page .contact-office__list { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 0; display: flex; flex-direction: column; gap: 1rem; } .contact-page .contact-office__item { display: flex; align-items: flex-start; gap: 1rem; padding: 0; border: 0; } .contact-page .contact-office__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9999px; background: var(--mc-sage-50, #EDF5EE); color: var(--mc-sage, #2A7058); border: 1px solid rgba(42, 112, 88, .25); flex-shrink: 0; } .contact-page .contact-office__body { min-width: 0; } .contact-page .contact-office__key { margin: 0; font-family: var(--mc-font-sans); font-size: max(.75rem, min(.75vw, .8125rem)); line-height: 1.5; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-accent, #B5552B); } .contact-page .contact-office__val { margin: 4px 0 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--mc-sage-900, #286848); } .contact-page .contact-radius--card { margin-top: 2.5rem; padding: clamp(20px, 2.5vw, 24px); background: #F5EFE3; /* cream-100 */ border: 1px solid var(--mc-cream-200, #E8DFC9); border-radius: 16px; } .contact-page .contact-radius--card .contact-radius__eyebrow { margin: 0; font-family: var(--mc-font-sans); font-size: max(.75rem, min(.75vw, .8125rem)); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-accent, #B5552B); } .contact-page .contact-radius--card .contact-radius__lede { margin: 8px 0 0; font-size: 15px; color: var(--mc-text-mid); line-height: 1.5; } .contact-page .contact-radius--card .contact-radius__chips { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .contact-page .contact-radius--card .contact-radius__chip { padding: 4px 12px; background: #FBF9F4; border: 1px solid rgba(42, 112, 88, .25); border-radius: 9999px; font-size: max(.75rem, min(.75vw, .8125rem)); color: var(--mc-sage-900, #286848); } .contact-page .contact-quote--inline { position: relative; overflow: hidden; background: #FBF9F4; border: 1px solid var(--mc-cream-200, #E8DFC9); border-radius: 16px; padding: clamp(24px, 3vw, 40px); box-shadow: none; } .contact-page .contact-quote__halo { pointer-events: none; position: absolute; top: -64px; right: -64px; width: 224px; height: 224px; border-radius: 9999px; background: rgba(244, 232, 198, .70); filter: blur(40px); } .contact-page .contact-quote--inline > * { position: relative; z-index: 1; } .contact-page .contact-quote--inline > .contact-quote__halo { z-index: 0; } .contact-page .contact-quote__req { color: var(--mc-accent, #B5552B); } .contact-page .contact-form__field label { font-family: var(--mc-font-sans); font-size: max(.75rem, min(.75vw, .8125rem)); line-height: 1.5; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-sage, #2A7058); } .contact-page .contact-form__field label span[aria-hidden="true"] { color: var(--mc-accent, #B5552B); } .contact-page .contact-form input[type="text"], .contact-page .contact-form input[type="tel"], .contact-page .contact-form input[type="email"], .contact-page .contact-form textarea, .contact-page .contact-form select { border-radius: 12px; background: #FBF9F4; border: 1px solid #DCD2B5; color: var(--mc-ink, #1F1B17); } .contact-page .contact-form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; } .contact-page .contact-form input:focus, .contact-page .contact-form textarea:focus, .contact-page .contact-form select:focus { border-color: var(--mc-accent, #B5552B); box-shadow: 0 0 0 3px rgba(181, 85, 43, .20); background: #FBF9F4; } .contact-page .contact-form input::placeholder, .contact-page .contact-form textarea::placeholder { color: var(--mc-text-light, #6B6A68); } .contact-page .contact-form__select::after { border-color: var(--mc-sage, #2A7058); } /* ========================================================= CONTACT PAGE — Vercel parity DEEP-FIX pass (2026-05-19, round 2) Driven by side-by-side computed-style probe at 1440px. All rules scoped to .contact-page so other pages are unaffected. ========================================================= */ /* Eyebrows — Vercel uses 16px (default

    ) font-semibold uppercase tracking-[0.18em] text-terra-600. WP global .eyebrow is 11px tracking-0.12em color accent-deep — way smaller/darker. */ .contact-page .eyebrow { display: block; margin: 0; font-size: 16px; line-height: 1.65; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: #C55731; /* terra-600 */ } /* Hero h1 — Vercel: Inter sans (font-serif var unset on contact route — falls back), weight 400, sage-900, text-h1 ≈ 37.44px @ 1440, tracking-tight (-0.025em), margin-top 8px (mt-2 from eyebrow above). */ .contact-page .contact-hero__title { font-family: var(--mc-font-sans, Inter, system-ui, sans-serif); font-size: clamp(28px, 1rem + 1.5vw, 37.44px); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; color: #286848; /* sage-900 */ margin: 8px 0 0; max-width: none; /* unset old 22ch */ } /* All h2 on contact page (office, faq, quote) — Inter sans, weight 400, sage-900, text-h2 ≈ 28.8px @ 1440 (max). */ .contact-page #contact-office-h, .contact-page #contact-faq-h, .contact-page #contact-quote-h { font-family: var(--mc-font-sans, Inter, system-ui, sans-serif); font-size: clamp(24px, 1rem + 0.9vw, 28.8px); font-weight: 400; line-height: 1.2; letter-spacing: -0.025em; color: #286848; /* sage-900 */ margin: 8px 0 0; } /* Hero body — Vercel text-body 16px line 1.65 color ink-600 #3E3D3B, mt-3 */ .contact-page .contact-hero__body { font-size: 16px; line-height: 1.65; color: #3E3D3B; /* ink-600 */ margin: 12px 0 0; max-width: 60ch; } /* Hero section padding — Vercel pt-6 md:pt-10 with no bottom (the next options section has its own mt-8 md:mt-10). */ .contact-page .contact-hero { padding-block: 24px 0; background: transparent; } @media (min-width: 768px) { .contact-page .contact-hero { padding-block: 40px 0; } } /* Contact-options section spacing — Vercel mt-8 md:mt-10, no padding-block of its own. */ .contact-page .contact-options { padding-block: 32px; background: transparent; } @media (min-width: 768px) { .contact-page .contact-options { padding-block: 40px 0; } } /* Channel cards — Vercel renders block with margin-spaced children (icon → mt-4 label → mt-1 value → mt-2 meta). Override WP's flex-column gap:6 to display:block + per-child margins so vertical rhythm matches Vercel. */ .contact-page .contact-options .contact-channel { display: block; flex-direction: row; gap: normal; padding: 20px; /* Vercel p-5 */ border-radius: 20px; /* Vercel observed: 20px (rounded-2xl rendered larger) */ border: 1px solid #E8DFC9; /* cream-200 */ } @media (min-width: 768px) { .contact-page .contact-options .contact-channel { padding: 24px; } /* md:p-6 */ } .contact-page .contact-options .contact-channel__icon { margin: 0; } /* Vercel channel icon SVG is 16x16 (h-4 w-4), not 20x20. */ .contact-page .contact-options .contact-channel__icon > svg { width: 16px; height: 16px; } .contact-page .contact-options .contact-channel__label { display: block; margin: 16px 0 0; /* mt-4 */ /* Vercel text-caption uppercase tracking-[0.14em] text-ink-500 (NOT terra-600). Vercel's actual rendered weight is 400 (text-caption default), NOT semibold. */ font-family: var(--mc-font-sans, Inter, system-ui, sans-serif); font-size: 12px; /* text-caption min — Vercel renders 12px on contact cards */ font-weight: 400; line-height: 1.5; letter-spacing: 0.14em; color: #6B6A68; /* ink-500 */ text-transform: uppercase; } .contact-page .contact-options .contact-channel__value { display: block; margin: 4px 0 0; /* mt-1 */ /* Vercel: font-serif text-h4 text-sage-900 (font-serif var unset → falls back to Inter). Rendered at 17px @ 1440px, weight 400, normal letter-spacing. */ font-family: var(--mc-font-sans, Inter, system-ui, sans-serif); font-size: 17px; font-weight: 400; line-height: 1.4; letter-spacing: normal; color: #286848; /* sage-900 */ } .contact-page .contact-options .contact-channel__meta { display: block; margin: 8px 0 0; /* mt-2 */ font-size: 14px; /* text-small */ line-height: 1.5; color: #3E3D3B; /* ink-600 */ } /* Office section padding — Vercel section-padding 5rem (80px) mobile, 7rem (112px) ≥768. The clamp ensures exact 112px at 1440px (matching Vercel's px output). */ .contact-page .contact-office { background: transparent; padding-block: 80px; } @media (min-width: 768px) { .contact-page .contact-office { padding-block: 112px; } } /* Office icon chip — Vercel uses sage-700 #2A7058 (NOT WP's sage-900). Border sage-200 #B6D2BD. Inner SVG must be 16x16 (h-4 w-4 in Vercel), not the 20x20 default. */ .contact-page .contact-office__icon { color: #2A7058; /* sage-700 */ border-color: #B6D2BD; /* sage-200 */ } .contact-page .contact-office__icon > svg { width: 16px; height: 16px; } /* Office key — Vercel terra-600 caption, NO top padding (the global rule added 2px). */ .contact-page .contact-office__key { color: #C55731; /* terra-600 */ padding-top: 0; } /* Office value text — Vercel text-body 16px line 1.65 sage-900. */ .contact-page .contact-office__val { font-size: 16px; line-height: 1.65; color: #286848; /* sage-900 */ } /* Service radius card — Vercel rounded-3xl-ish (20px observed) on cream-100 #F5F2EA bg. */ .contact-page .contact-radius--card { background: #F5F2EA; /* cream-100 (Vercel observed) */ border-radius: 20px; } /* Service-radius chips — Vercel inline-block, sage-200 border, sage-900 text, text-caption (12-13px). */ .contact-page .contact-radius--card .contact-radius__chip { display: inline-block; background: #FBF9F4; /* cream-50 */ border: 1px solid #B6D2BD; /* sage-200 */ color: #286848; /* sage-900 */ letter-spacing: 0.04em; /* Vercel text-caption tracking */ line-height: 1.5; } /* Force inline-block at the

  • level too — WP wraps chips in
  • , Vercel chip is the inner span. */ .contact-page .contact-radius--card .contact-radius__chips > li { display: inline-block; } /* Quote card — Vercel rounded-3xl-ish (20px). Honey halo already correct. */ .contact-page .contact-quote--inline { border-radius: 20px; } /* Form labels — Vercel sage-700 (NOT WP sage-900 from earlier round). */ .contact-page .contact-form__field label { color: #2A7058; } /* Form inputs — Vercel text-body 16px line 1.65 + cream-300 border #D5C8A6. */ .contact-page .contact-form input[type="text"], .contact-page .contact-form input[type="tel"], .contact-page .contact-form input[type="email"], .contact-page .contact-form textarea, .contact-page .contact-form select { font-size: 16px; line-height: 1.65; border-color: #D5C8A6; /* cream-300 (closer to Vercel observed) */ } /* FAQ section bg + padding — Vercel bg-cream-100 #F5F2EA + section-padding 5rem/7rem. */ .contact-page .contact-faq { background: #F5F2EA; padding-block: 80px; } @media (min-width: 768px) { .contact-page .contact-faq { padding-block: 112px; } } /* FAQ left column (head + pills + callout) is sticky on desktop. */ @media (min-width: 1024px) { .contact-page .contact-faq__head { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 32px; /* Vercel flex-col gap-8 */ } } /* FAQ lede paragraph (replaces inline-styled p). */ .contact-page .contact-faq__lede { margin: 12px 0 0; font-size: 14px; /* Vercel text-small */ line-height: 1.65; color: #3E3D3B; /* ink-600 */ max-width: 60ch; } /* Category pills — Vercel: flex flex-wrap gap-2; pills rounded-full sage-500/30 border, bg cream-50, text-caption sage-900 with ink-500 count. */ .contact-page .contact-faq__pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .contact-page .contact-faq__pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid rgba(106, 140, 69, .30); /* sage-500/30 */ background: #FBF9F4; /* cream-50 */ color: #286848; /* sage-900 */ border-radius: 9999px; font-size: 12px; /* Vercel text-caption (not 13px) */ font-weight: 600; line-height: 1.5; text-decoration: none; transition: border-color .2s, background .2s; } /* Vercel pill icon renders in terra-600 (not the inherited sage-900). */ .contact-page .contact-faq__pill > svg { color: #C55731; } .contact-page .contact-faq__pill:hover { border-color: #C55731; /* terra-600 */ background: #FFFFFF; color: #286848; } .contact-page .contact-faq__pill-num { color: #6B6A68; /* ink-500 */ font-weight: 600; } /* Callout card — Vercel rounded-2xl cream-50 + cream-200 border + honey-200 halo, icon chip (40x40 rounded-xl honey-200 terra-600) + caption "Didn't find your answer?". */ .contact-page .contact-faq__callout { position: relative; overflow: hidden; padding: 24px; background: #FBF9F4; /* cream-50 */ border: 1px solid #E8DFC9; /* cream-200 */ border-radius: 16px; } @media (min-width: 768px) { .contact-page .contact-faq__callout { padding: 28px; } /* md:p-7 */ } .contact-page .contact-faq__callout-halo { pointer-events: none; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 9999px; background: rgba(244, 232, 198, .70); /* honey-200/70 */ filter: blur(40px); } .contact-page .contact-faq__callout-inner { position: relative; z-index: 1; } .contact-page .contact-faq__callout-head { display: flex; align-items: center; gap: 12px; } .contact-page .contact-faq__callout-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #F4E8C6; /* honey-200 */ color: #C55731; /* terra-600 */ flex-shrink: 0; } .contact-page .contact-faq__callout-title { margin: 0; font-family: var(--mc-font-sans, Inter, system-ui, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #2A7058; /* sage-700 */ } .contact-page .contact-faq__callout-body { margin: 16px 0 0; /* mt-4 */ font-size: 16px; line-height: 1.65; color: #1F1B17; /* ink-900 */ } .contact-page .contact-faq__callout-links { margin: 20px 0 0; /* mt-5 */ display: flex; flex-direction: column; gap: 10px; /* gap-2.5 */ } .contact-page .contact-faq__callout-links a { font-size: 16px; font-weight: 500; color: #C55731; /* terra-600 */ text-decoration: none; transition: color .2s; } .contact-page .contact-faq__callout-links a:hover { color: #A64528; } /* terra-700 */ /* Form footer note — below the submit button. */ .contact-page .contact-form__footer { margin: 16px 0 0; font-size: 13px; /* text-caption-ish */ line-height: 1.5; color: #6B6A68; /* ink-500 */ } .contact-page .contact-form__footer a { color: #C55731; font-weight: 500; } /* FAQ item number (Vercel parity): 2-digit "01", "02", … prefix before each question. */ .contact-page .contact-faq__item > summary { display: flex; align-items: baseline; gap: 12px; /* Vercel summary is 16px text-body, not the project default 19px. Vercel renders 24px all-side padding; WP keeps 40px right for the +/- toggle. */ font-size: 16px; line-height: 1.5; padding: 24px 40px 24px 0; } .contact-page .contact-faq__item-num { flex: 0 0 auto; font-family: var(--mc-font-sans, Inter, system-ui, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: #C55731; /* terra-600 */ line-height: 1.5; align-self: flex-start; padding-top: 4px; } .contact-page .contact-faq__item-q { flex: 1 1 auto; } /* Submit button — Vercel renders text-body (16px) not WP's default mc-btn--lg (15px). */ .contact-page .contact-form button[type="submit"] { font-size: 16px; padding: 14px 32px; } /* --- Gallery card: speed up img transition to Vercel 500ms --- */ .gallery-card img { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================= GALLERY — Watch / Project clips section (Vercel parity 2026-05-19) Vercel: container-brand mt-8 with a flex header (eyebrow + h3) and a 1/2/3-col grid of aspect-video cards in sage-100 with a center play button (cream-50/95 bg, terra-700 icon), bottom labels, and a terra-700/15 ring on hover. ========================================================= */ .gallery-watch { padding-block: clamp(40px, 4vw, 56px) clamp(48px, 6vw, 80px); } .gallery-watch__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; /* Vercel mt-5 between header and grid */ } .gallery-watch__eyebrow { display: block; margin: 0 0 8px; font-family: var(--mc-font-sans); font-size: max(.75rem, min(.75vw, .8125rem)); line-height: 1.5; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #C55731; /* terra-600 */ } .gallery-watch__title { margin: 0; font-family: var(--mc-font-serif); font-size: clamp(22px, 1rem + 0.9vw, 26px); /* Vercel text-h3 */ font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; color: #286848; /* sage-900 */ } .gallery-watch__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .gallery-watch__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .gallery-watch__grid { grid-template-columns: repeat(3, 1fr); } } .gallery-watch__card { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #D8E8DC; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); } /* "Show more" reveal animation for extra clip cards (rows 2+). * The parent .mc-reveal--stagger already carries .is-visible by the time the * user clicks expand, so the static stagger transition can't fire when [hidden] * is removed (CSS transitions need a property change; going from display:none * straight to the .is-visible final state doesn't qualify). Run a dedicated * keyframe animation instead — re-applied each time [hidden] is removed because * the :not([hidden]) selector starts matching again. --watch-extra-i (0..N) is * set inline per-card in page-gallery.php for the staggered delay. */ .gallery-watch__card[data-watch-extra]:not([hidden]) { animation: mc-watch-card-reveal .55s var(--mc-ease) both; animation-delay: calc(var(--watch-extra-i, 0) * 80ms); } @keyframes mc-watch-card-reveal { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .gallery-watch__card[data-watch-extra]:not([hidden]) { animation: none; } } .gallery-watch__btn { position: absolute; inset: 0; cursor: pointer; border-radius: 16px; overflow: hidden; } .gallery-watch__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #FBF9F4, 0 0 0 4px #A64528; } .gallery-watch__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.4, 0, .2, 1); pointer-events: none; user-select: none; } .gallery-watch__card:hover .gallery-watch__poster { transform: scale(1.04); } /* Video element — invisible by default; fades in once the user hits play. Mirrors the Vercel ClipCard pattern: poster carries the visual, video is the playback surface. */ .gallery-watch__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms ease-out; pointer-events: none; } .gallery-watch__btn.is-playing .gallery-watch__video { opacity: 1; } .gallery-watch__btn.is-playing .gallery-watch__poster { opacity: 0; } .gallery-watch__btn.is-playing .gallery-watch__overlay, .gallery-watch__btn.is-playing .gallery-watch__play, .gallery-watch__btn.is-playing .gallery-watch__caption { opacity: 0; } .gallery-watch__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(31,27,23,.55) 0%, rgba(31,27,23,0) 40%); transition: opacity 500ms; } .gallery-watch__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 9999px; background: rgba(251, 249, 244, .95); color: #A64528; display: grid; place-items: center; pointer-events: none; transition: transform 500ms cubic-bezier(0, 0, .2, 1); box-shadow: 0 20px 25px -5px rgba(0,0,0,.25), 0 8px 10px -6px rgba(0,0,0,.15); } .gallery-watch__card:hover .gallery-watch__play { transform: translate(-50%, -50%) scale(1.10) rotate(6deg); } .gallery-watch__play svg { margin-left: 2px; } .gallery-watch__caption { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; color: #FBF9F4; pointer-events: none; } .gallery-watch__label { font-size: max(.75rem, min(.75vw, .8125rem)); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: .80; } .gallery-watch__cta { padding: 4px 12px; border-radius: 9999px; background: rgba(31, 27, 23, .55); font-size: max(.75rem, min(.75vw, .8125rem)); font-weight: 500; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .gallery-watch__ring { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 0 rgba(166, 69, 40, 0); transition: box-shadow 500ms ease; } .gallery-watch__card:hover .gallery-watch__ring { box-shadow: 0 0 0 4px rgba(166, 69, 40, .15); } /* "Show N more clips" toggle below the grid — Vercel parity (mt-10 centered). Button swaps from terra-700 filled to outlined when expanded. */ .gallery-watch__more { margin-top: 40px; display: flex; justify-content: center; gap: 12px; } .gallery-watch__more [data-watch-toggle][aria-expanded="true"] { background: transparent; color: #A64528; border: 1.5px solid #A64528; box-shadow: none; } .gallery-watch__more [data-watch-toggle][aria-expanded="true"]:hover { background: #A64528; color: #FBF9F4; } /* ========================================================= GALLERY — Before & After section (2026-05-19) "See the Difference We Make" — ported from ultra-core-construction Gallery.tsx + BeforeAfterSlider.tsx, rebranded for McAllister: - Serif Lora h2 with sage-900 ink - Terracotta (#C55731) eyebrow + accent - Cream-50 caption surface, cream-200 border - Same drag-to-reveal + view-more pattern. ========================================================= */ .gallery-ba { padding-block: clamp(48px, 6vw, 96px); } .gallery-ba__head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); } .gallery-ba__eyebrow { /* terra-600 caption — matches new contact-page eyebrow scale */ display: block; margin: 0 0 12px; font-family: var(--mc-font-sans); font-size: max(.75rem, min(.75vw, .8125rem)); line-height: 1.5; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #C55731; } .gallery-ba__title { font-family: var(--mc-font-serif); font-size: clamp(28px, 1rem + 1.5vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; color: #286848; /* sage-900 */ margin: 0; } .gallery-ba__subtitle { margin: 12px auto 0; max-width: 60ch; font-size: 16px; line-height: 1.65; color: #3E3D3B; /* ink-600 */ } .gallery-ba__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .gallery-ba__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .gallery-ba__grid { grid-template-columns: repeat(3, 1fr); } } .gallery-ba__card { border-radius: 16px; overflow: hidden; border: 1.5px solid #E8DFC9; /* cream-200 */ background: #FBF9F4; /* cream-50 caption surface */ transition: border-color .3s ease; } .gallery-ba__card:hover { border-color: #C55731; } /* terra-600 on hover */ /* Slider container */ .gallery-ba__slider { position: relative; width: 100%; user-select: none; touch-action: none; cursor: col-resize; background: #1F1B17; /* ink fallback under images */ overflow: hidden; } .gallery-ba__slider:focus-visible { outline: 2px solid #C55731; outline-offset: 2px; } .gallery-ba__img { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .gallery-ba__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gallery-ba__img--before { /* clip-path is set inline + updated by JS */ z-index: 1; } /* Vertical drag line + handle */ .gallery-ba__line { position: absolute; top: 0; bottom: 0; width: 0; z-index: 2; pointer-events: none; } .gallery-ba__line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #FFFFFF; box-shadow: 0 0 6px rgba(0, 0, 0, .4); } .gallery-ba__handle { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 9999px; background: #FFFFFF; color: #C55731; /* terra-600 chevrons */ display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: col-resize; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); } /* Corner labels */ .gallery-ba__label { position: absolute; top: 12px; z-index: 3; padding: 4px 10px; border-radius: 6px; background: rgba(0, 0, 0, .60); color: #FFFFFF; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; pointer-events: none; } .gallery-ba__label--before { left: 12px; } .gallery-ba__label--after { right: 12px; } /* Caption */ .gallery-ba__caption { padding: 14px 20px; background: #FFFFFF; } .gallery-ba__card-title { margin: 0; font-family: var(--mc-font-serif); font-size: 15px; font-weight: 600; line-height: 1.4; color: #286848; /* sage-900 */ } .gallery-ba__meta { margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gallery-ba__location { font-size: 12px; color: #6B6A68; /* ink-500 */ line-height: 1.5; } .gallery-ba__cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 9999px; background: rgba(197, 87, 49, .10); /* terra-600/10 */ color: #A64528; /* terra-700 */ } /* View More button row */ .gallery-ba__more { text-align: center; margin-top: 40px; } /* --- About-why 8-card grid (Vercel parity): rounded-2xl, p-5/p-6, honey-200 → sage-50 → cream-200 → sage-100 color cycle, icon chip (40x40 rounded-xl, cream-50 bg, terra-600 color) above the title. --- */ .about-why__card { background: #F4E8C6; /* honey-200 (1, 5) */ border-color: rgb(232, 223, 201); border-radius: 16px; /* rounded-2xl */ box-shadow: none; padding: 20px; /* p-5 */ } @media (min-width: 768px) { .about-why__card { padding: 24px; } /* md:p-6 */ } .about-why__card-icon { display: grid; place-items: center; width: 40px; /* h-10 w-10 */ height: 40px; border-radius: 12px; /* rounded-xl */ background: #FBF9F4; /* cream-50 */ color: #C55731; /* terra-600 */ margin-bottom: 0; } .about-why__card-icon svg { width: 16px; /* h-4 w-4 */ height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } .about-why__card-title { /* Vercel font-serif text-h4 — serif Lora, NOT sans Inter. */ font-family: var(--mc-font-serif); font-style: normal; font-size: 17px; font-weight: 400; color: #286848; letter-spacing: 0; margin-top: 1rem; /* mt-4 after icon */ margin-bottom: 0.5rem; /* keep tight to body */ } .about-why__card-body { font-size: 14px; color: #3E3D3B; line-height: 1.625; margin: 0.5rem 0 0; /* mt-2 */ } /* Vercel color cycle: honey-200, sage-50, cream-200, sage-100 (repeating). Explicit nth-child(4n+1) for cards 1 and 5 so the cycle can't be overridden by other rules with matching specificity. */ .about-why__card:nth-child(4n+1) { background: #F4E8C6; } /* honey-200 (1, 5) */ .about-why__card:nth-child(4n+2) { background: #EDF5EE; } /* sage-50 (2, 6) */ .about-why__card:nth-child(4n+3) { background: #E8DFC9; } /* cream-200 (3, 7) */ .about-why__card:nth-child(4n) { background: #D8E8DC; } /* sage-100 (4, 8) */ /* ========================================================= WAVE-2E PARITY OVERRIDES (appended 2026-05-19) Single coherent pass that closes every style.css row in PARITY-AUDIT.md. Add-only: no existing rules removed. Token aliases first; component overrides grouped by region. ========================================================= */ /* ---------- Token additions / aliases (Vercel Tailwind → WP CSS vars) ---------- */ :root { /* Tailwind warm palette — exact Vercel tones, surfaced as --mc-* so all component selectors can route through tokens instead of inline hex. */ --mc-sage-100: #D8E8DC; /* gallery card load bg + about-why card 4 */ --mc-sage-200: #B6D2BD; /* about-final-cta blob */ --mc-sage-500: #4A9275; /* Tailwind sage-500 — chip border at 30% alpha */ --mc-ink-200: rgba(31, 27, 23, 0.10); /* nav dropdown ring + scrolled-header border */ --mc-ink-500: #6B6A68; --mc-honey-50: #FBF3DC; --mc-honey-300: #EED893; --mc-cream-100: rgba(245, 242, 234, 0.80); /* cream-100/80 footer text */ --mc-terra-400: #E28A63; /* footer headings + hover */ --mc-terra-700-15: rgba(166, 69, 40, 0.15); --mc-shadow-soft-lg: 0 12px 28px -14px rgba(166, 69, 40, .35); --mc-cream-50-95: rgba(251, 249, 244, 0.95); /* scrolled header bg per N05 */ } /* ---------- H19/H21 hero color verification (rules already match Vercel; no change needed) ----- */ /* ---------- H20 trust-bar VERIFIED pill — token-ify (was bare #6a8c45) -------- */ .mc-trust__badge { background-color: var(--mc-accent-olive, #6A8C45); } .mc-trust__item .mc-trust__icon { color: var(--mc-accent-olive, #6A8C45); } /* ---------- H25 hero responsive heights — 768 known regression point --------- Vercel: mobile min-h-[100svh], tablet aspect-[3/2] WITHOUT min-h, desktop min-h-[60svh]. WP base already matches at mobile + desktop. The 768 tablet rule sets min-height:0 which is correct but combined with aspect 3/2 in the existing rule the height can collapse below the lead. Reinforce the lead-hidden + min-aspect cap. */ @media (min-width: 768px) and (max-width: 1023.98px) { .mc-hero { min-height: 0; aspect-ratio: 3 / 2; } .mc-hero__inner { padding-bottom: clamp(16px, 3vw, 32px); } } /* ---------- H29/H43 recent-projects horizontal scroll (CSS portion) --------- Vercel uses horizontal scroll-snap on mobile/tablet; desktop fans out as a grid. Keep WP's grid at >=1180px and convert to scroll-snap below that. */ @media (max-width: 1179.98px) { .mc-recent__grid { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .mc-recent__grid > .mc-recent__card { flex: 0 0 clamp(220px, 70vw, 280px); scroll-snap-align: start; } } /* ---------- H37 recent-card hover lift + warmth-shimmer sweep ---------- */ .mc-recent__card { position: relative; } .mc-recent__card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 12px; background: linear-gradient( 110deg, transparent 30%, rgba(255, 245, 220, 0.18) 50%, transparent 70% ); transform: translateX(-110%); transition: transform 700ms var(--mc-ease-reveal, cubic-bezier(.22,1,.36,1)); } .mc-recent__card:hover::after { transform: translateX(110%); } .mc-recent__card:hover { transform: translateY(-2px); } /* ---------- H32 FAQ +/− toggle — already styled; reinforce accent color ---- */ .mc-faq__toggle { color: var(--mc-accent, #B5552B); } /* ---------- H30 imagine bullets — guarantee Lora display + token cleanup ---- */ .mc-imagine__item { /* H30 audit calls out display font; existing rule sets var(--mc-font-serif). Reinforce so cascade overrides from generic ul li can't downgrade. */ font-family: var(--mc-font-serif, "Lora", Georgia, serif); font-style: normal; font-weight: 500; } /* ---------- A10 about hero h1 = sage-900 (Vercel text-sage-900) -------- */ .about-intro__title { color: var(--mc-sage-900, #286848); } /* ---------- A11/A14 about stats card — token cleanup (no behavior change) -- */ .about-stats__card { background: var(--mc-cream-50, #FBF9F4); border-color: var(--mc-cream-200, #E8DFC9); } /* ---------- A16 specialties list rows — cream-50 bg, cream-200 border ---- */ .about-trades__list li { padding-left: 38px; background: var(--mc-cream-50, #FBF9F4); border: 1px solid var(--mc-cream-200, #E8DFC9); border-radius: 12px; padding-top: 10px; padding-bottom: 10px; padding-right: 14px; } .about-trades__list li::before { left: 14px; top: 1.05em; width: 6px; height: 6px; background: var(--mc-accent-olive, #6A8C45); } /* ---------- A17 about service-area chips — cream-50 + sage-500/30 border --- */ .about-areas__chip { background: var(--mc-cream-50, #FBF9F4); border-color: rgba(74, 146, 117, 0.30); /* sage-500/30 */ } .about-areas__chip:hover { border-color: var(--mc-sage-700, #2A7058); background: var(--mc-cream-50, #FBF9F4); color: var(--mc-sage-900, #286848); } /* ---------- A18 about final-CTA — already has halos; token-cleanup the bg --- */ .about-final-cta__card { background: var(--mc-cream-50, #FBF9F4); border-color: var(--mc-cream-200, #E8DFC9); } /* ---------- C09 contact channel cards — bg tones match Vercel honey/sage/sand (existing rules at L6402-6404 already do this; reinforce hover-lift per C12). */ .contact-channel { transition: transform .2s var(--mc-ease), border-color .2s var(--mc-ease), box-shadow .2s var(--mc-ease); } .contact-channel:hover { transform: translateY(-4px); box-shadow: var(--mc-shadow-soft-lg, 0 12px 28px -14px rgba(166,69,40,.35)); border-color: var(--mc-cream-200, #E8DFC9); } /* ---------- C10 contact form border + focus ring — cream-200/terra-600 ----- */ .contact-form input[type="text"], .contact-form input[type="tel"], .contact-form input[type="email"], .contact-form textarea, .contact-form select { border-color: var(--mc-cream-200, #E8DFC9); } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--mc-terra-600, #C55731); box-shadow: 0 0 0 3px rgba(197, 87, 49, .18); } /* ---------- C13 contact office grid + form halo ---------- */ @media (min-width: 1024px) { .contact-quote__grid, .contact-office__quote-grid { grid-template-columns: 5fr 7fr; } } .contact-quote { position: relative; } .contact-quote::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 50% at 80% 10%, rgba(244, 232, 198, 0.35), transparent 65%); pointer-events: none; } .contact-quote > * { position: relative; z-index: 1; } /* ---------- C18 contact FAQ pill smooth-scroll target offset ---------- When users click .faq-pill anchors, the sticky header (80px) covers the heading. scroll-margin-top closes that gap purely in CSS — no JS handler needed. */ .contact-faq__group[id^="faq-"], [id="faq-estimates"], [id="faq-build"], [id="faq-aftercare"] { scroll-margin-top: 96px; } /* ---------- G05 gallery card placeholder bg — token-ify -------- */ .gallery-card { background: var(--mc-sage-100, #D8E8DC); } /* ---------- G06 gallery hero h1 sized to Vercel text-h2 (not text-h1) ---- Vercel intentionally renders Gallery hero h1 at h2 size. WP uses .mc-h1 → too large. */ .gallery-hero__title { font-size: clamp(1.85rem, 3vw, 2.5rem); line-height: 1.1; } /* ---------- G10 gallery card hover scale parity — 1.04 over 500ms ---- */ .gallery-card img { transition: transform 500ms var(--mc-ease, cubic-bezier(.4,0,.2,1)); } .gallery-card:hover img { transform: scale(1.04); } /* ---------- S07 services-index card uses cream surface (token-ify) ----- */ .mc-services-grid .service-card, .service-card--clean { background: var(--mc-cream-50, #FBF9F4); border-color: var(--mc-cream-200, #E8DFC9); } /* ---------- S08 services-index card title — confirm serif Lora ---- */ .service-card__title { font-family: var(--mc-font-serif, "Lora", Georgia, serif); } /* ---------- S10 services-index card hover image zoom 1.04 over 700ms ---- */ .mc-services-grid .service-card__media img { transition: transform 700ms var(--mc-ease); } .mc-services-grid .service-card:hover .service-card__media img { transform: scale(1.04); } /* ---------- SV13 service-page why-card — already cream-50/cream-200; reinforce --- */ .mc-service-page__why-card { background: var(--mc-cream-50, #FBF9F4); border-color: var(--mc-cream-200, #E8DFC9); } /* ---------- SV14 service hero split ratio 7:5 (was 1:1) ---------- Vercel lg:grid-cols-12 with copy col-span-7, image col-span-5. */ @media (min-width: 901px) { .mc-service-hero__split { grid-template-columns: 7fr 5fr; } } /* ---------- SV15 service hero image aspect — Vercel aspect-[4/5] portrait (was 4/3 landscape). */ .mc-service-hero__media { aspect-ratio: 4 / 5; border-radius: 16px; } /* ---------- SV16 service services-bullets grid — sm 2-col / lg 3-col ----- */ .mc-service-page .check-list { display: grid; grid-template-columns: 1fr; gap: 8px 24px; } @media (min-width: 640px) { .mc-service-page .check-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .mc-service-page .check-list { grid-template-columns: repeat(3, 1fr); } } /* ---------- SV17/SV18 — already match (4 cols + 3 cols); no change needed --- */ /* ---------- SV19 service-page final CTA halos — already implemented via .mc-service-cta .mc-cta-band::before/::after; nothing to change. */ /* ---------- P04 legal-page reading column + h2 spacing ---------- Vercel uses max-w-prose (≈65ch) with mt-10 on h2. */ .legal-page__prose { max-width: 65ch; margin-inline: auto; } .legal-page .legal-page__h2, .legal-page__prose h2 { margin-top: 2.5rem; } /* mt-10 */ /* ---------- P05 legal-page h1 sized to Vercel text-display-lg --- */ .legal-page__h1 { font-size: clamp(34px, 5vw, 48px); } /* ---------- P06 legal-page anchor styling — terra-600 underline ---- */ .legal-page a, .legal-page__prose a { color: var(--mc-terra-600, #C55731); text-decoration: underline; text-decoration-color: var(--mc-terra-600, #C55731); text-underline-offset: 4px; } .legal-page a:hover, .legal-page__prose a:hover { color: var(--mc-accent-deep, #8C3F1E); } /* ---------- N04 nav active indicator — already terra-600 pill; reinforce -- */ .primary-nav a[aria-current="page"], .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a { color: var(--mc-sage-900, #286848); } /* ---------- N05 scrolled header — cream-50/95 bg, backdrop blur, ink-200/60 border. WP JS may emit either .scrolled OR .is-scrolled; provide rule for both. */ .site-header.is-scrolled { background: var(--mc-cream-50-95, rgba(251, 249, 244, 0.95)); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom-color: rgba(31, 27, 23, 0.06); /* ink-200/60 */ box-shadow: var(--mc-shadow-soft, 0 1px 2px rgba(0,0,0,.04)); } /* Also bump existing .scrolled rule to Vercel-exact tokens via a more-specific selector. */ header.site-header.scrolled { background: var(--mc-cream-50-95, rgba(251, 249, 244, 0.95)); } /* ---------- N06 nav item font sizing — text-small / font-medium / Inter ---- */ .primary-nav a { font-family: var(--mc-font-sans, Inter, system-ui, sans-serif); font-size: 15px; /* Tailwind text-small */ font-weight: 500; } /* ---------- N07 dropdown 2-col + 44px min-height + 640px max-w (already set; confirm via add-only override). */ .has-dropdown > .dropdown { grid-template-columns: 1fr 1fr; max-width: 640px; } .has-dropdown > .dropdown a { min-height: 44px; } /* ---------- F07 footer bg — uses sage-900 via existing token; reinforce ---- */ .site-footer { background-color: var(--mc-sage-900, #286848); } /* ---------- F08 footer brand chip — already correct; reinforce ----------- */ .footer-brand-chip { background: var(--mc-cream-50, #FBF9F4); } /* ---------- F09 footer heading — terra-400 caps tracking 0.18em ---- */ .footer-heading { color: var(--mc-terra-400, #E28A63); letter-spacing: 0.18em; } /* ---------- F10/F11 footer link hover & per-icon brand color hover ------ */ .site-footer a:hover, .footer-list li a:hover, .footer-bottom a:hover { color: var(--mc-terra-400, #E28A63); } .social-row a[data-brand="facebook"]:hover { color: #1877F2; } .social-row a[data-brand="instagram"]:hover { color: #E1306C; } .social-row a[data-brand="google"]:hover { color: #4285F4; } .social-row a[data-brand="yelp"]:hover { color: #D32323; } .social-row a[data-brand="thumbtack"]:hover { color: #009FD9; } .social-row a[data-brand="bbb"]:hover { color: #134A8E; } .social-row a[data-brand="angi"]:hover { color: #FF7100; } .social-row a[style*="--brand"]:hover { color: var(--brand, var(--mc-terra-400, #E28A63)); } /* ---------- F12 footer grid 4-col on md+ — already set (L2691-2692); confirm. -- */ /* ========================================================= SKELETON / SHIMMER — lazy-load placeholder system Agent-C 2026-05-19: shows a shimmering muted card while an image, video, or text block is loading, then cross-fades to the real content once `load` / `canplay` fires (see assets/js/main.js → setupSkeletons). Single source of truth for the shimmer keyframes on the WP side — any new lazy media should add `data-mc-skeleton-target` and the JS wrapper will inject the overlay automatically. ========================================================= */ @keyframes mc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Wrapper that the JS injects around an /
  • . */ .check-list--feature-icons li:hover .mc-feature-icon { transform: scale(1.10) rotate(-6deg); color: var(--mc-terra-700, #A64528); } .mc-feature-text { flex: 1 1 auto; min-width: 0; } /* Respect reduced-motion: keep the colour change, drop the transform. */ @media (prefers-reduced-motion: reduce) { .mc-feature-icon { transition: color .2s linear; } .check-list--feature-icons li:hover .mc-feature-icon { transform: none; } } /* ========================================================= HEADER + MOBILE MENU — Vercel parity fixes (May 2026) 1. .header-actions wraps phone + CTA so `space-between` on .header-inner doesn't push a gap between them. 2. Mobile Services submenu is collapsed by default (uses the [hidden] attribute as the only display gate) — toggled open by the button at .mobile-menu-list__toggle. Chevron rotates 180deg when aria-expanded="true". ========================================================= */ .header-actions { display: none; align-items: center; gap: 1rem; } @media (min-width: 980px) { .header-actions { display: inline-flex; } } /* Override the legacy display rules so the children inside .header-actions don't double-toggle visibility — only the wrapper controls show/hide. */ @media (min-width: 980px) { .header-actions .header-phone, .header-actions .header-cta { display: inline-flex; } } /* Mobile submenu — collapsed by default via the [hidden] attribute on the