[data-theme='red-mountain'] { --background: 0 0% 100%; --foreground: 210 20% 14%; --primary: 201 76% 50%; --primary-foreground: 0 0% 100%; --secondary: 201 75% 40%; --secondary-foreground: 0 0% 100%; --accent: 348 76% 37%; --accent-foreground: 0 0% 100%; --card: 210 20% 98%; --card-foreground: 210 20% 14%; --popover: 0 0% 100%; --popover-foreground: 210 20% 14%; --muted: 210 16% 94%; --muted-foreground: 210 12% 42%; --destructive: 0 72% 50%; --destructive-foreground: 0 0% 100%; --border: 210 16% 86%; --input: 210 16% 92%; --ring: 201 76% 50%; --font-heading: var(--font-montserrat), sans-serif; --font-body: var(--font-montserrat), sans-serif; --font-size-h1-px: 64; --font-size-h2-px: 44; --font-size-h3-px: 32; --font-size-h4-px: 22; --font-size-body-px: 16; --line-height-heading: 1.1; --line-height-body: 1.55; --font-weight-heading: 700; --radius: 0.5rem; } /** * Red Mountain Air Conditioning — CSS Variable Overrides * * Scope: variables only. Header / footer / block-specific styling will be added * once the Red Mountain Air Figma is provided. Until then, the default header * and footer variants render with the theme's color tokens. */ [data-theme='red-mountain'] { /* brand color tokens — migrated from hex literals for check:themes (pixel-exact HSL) */ --rma-red-1: 348.4 67.5% 51.8%; /* was #d73151 */ --rma-red-2: 348.3 76.5% 36.7%; /* was #a51632 */ --rma-blue-1: 201 76% 50%; /* was #1f9de0 */ --rma-red-3: 348.1 72.7% 25.9%; /* was #721225 */ --rma-red-4: 341.9 67.5% 51.8%; /* was #d73163 */ --rma-blue-2: 201.4 75.7% 85.5%; /* was #bee2f6 */ --rma-blue-3: 212.7 33.3% 93.5%; /* was #e9eef4 */ --rma-blue-4: 211.9 15.8% 60.4%; /* was #8a99aa */ --rma-red-5: 355.4 54.2% 90.6%; /* was #f4dadc */ --rma-red-6: 347.4 78.1% 28.6%; /* was #821028 */ /* Core surfaces */ --background: 0 0% 100%; --foreground: 210 20% 14%; /* Brand palette — primary hsl(var(--rma-blue-1)), secondary #197EB3, accent hsl(var(--rma-red-2)) (Red Mountain red) */ --primary: 201 76% 50%; --primary-foreground: 0 0% 100%; --secondary: 201 75% 40%; --secondary-foreground: 0 0% 100%; --accent: 348 76% 37%; --accent-foreground: 0 0% 100%; /* Supporting colors */ --card: 210 20% 98%; --card-foreground: 210 20% 14%; --popover: 0 0% 100%; --popover-foreground: 210 20% 14%; --muted: 210 16% 94%; --muted-foreground: 210 12% 42%; --destructive: 0 72% 50%; --destructive-foreground: 0 0% 100%; --border: 210 16% 86%; --input: 210 16% 92%; --ring: 201 76% 50%; /* Typography */ --font-heading: var(--font-montserrat), sans-serif; --font-body: var(--font-montserrat), sans-serif; --font-h1: var(--font-antonio), sans-serif; --font-size-h1-px: 64; --font-size-h2-px: 44; --font-size-h3-px: 32; --font-size-h4-px: 22; --font-size-body-px: 16; --font-weight-heading: 700; --line-height-heading: 1.1; --line-height-body: 1.55; --radius: 0.5rem; } /* H1 uses Antonio while the rest of the heading scale stays on Montserrat. */ [data-theme='red-mountain'] h1, [data-theme='red-mountain'] .prose h1 { font-family: var(--font-h1); font-weight: 700; } /* Hero subtitle/eyebrow paragraph (e.g. "Originally owned since 1989"). */ [data-theme='red-mountain'] .rma-hero-content p { margin: 0; color: #FFF; text-align: right; font-family: var(--font-montserrat), sans-serif; font-size: 25px; font-style: normal; font-weight: 700; line-height: 60px; } /* Hero headline (e.g. "The Best Is The Least We Could Do!"). */ [data-theme='red-mountain'] .rma-hero-content h1 { color: #FFF; text-align: right; font-family: var(--font-antonio), sans-serif; font-size: 55px; font-style: normal; font-weight: 700; line-height: 55px; text-transform: uppercase; } /* ============================================================= HEADER — Red Mountain Air Conditioning Single dark-red gradient bar. Grid: logo (left) | center (CTAs + nav) | phone+reviews (right) ============================================================= */ [data-header='red-mountain'] header.rma-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(0deg, hsl(var(--rma-red-2)) 0%, hsl(var(--rma-red-3)) 100%); color: #ffffff; border-bottom: 10px solid #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); } [data-header='red-mountain'] .rma-header-grid { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 8px; align-items: center; padding: 8px 0; } /* col 1 (logo) spans all three rows */ [data-theme='red-mountain'] .rma-logo-link { grid-column: 1; grid-row: 1 / span 3; align-self: center; } /* row 1, col 2 — CTAs (right-aligned so they sit close to the phone chip, matching the Figma reference where Request Estimate ≈17px from the chip) */ [data-theme='red-mountain'] .rma-cta-row { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 16px; } /* Mobile/tablet CTA row — lives INSIDE the hamburger drawer below the nav items. Stack each CTA vertically and stretch full-width. */ [data-theme='red-mountain'] .rma-cta-row--mobile { grid-column: auto; grid-row: auto; justify-self: stretch; flex-direction: column; align-items: stretch; gap: 12px; padding: 0; } [data-theme='red-mountain'] .rma-cta-row--mobile .rma-cta { width: 100% !important; flex: 0 0 auto; } /* Drawer CTAs — the row sits in a fixed-width 300-400px sidebar so vw scaling isn't useful here. Use a fixed comfortable size on tablet/mobile, trim slightly on the smallest phones. Higher-specificity selector beats .rma-cta.inline-flex (0,0,2,1). */ [data-theme='red-mountain'] .rma-cta-row--mobile .rma-cta.inline-flex, [data-theme='red-mountain'] .rma-cta-row--mobile a.rma-cta.inline-flex, [data-theme='red-mountain'] .rma-cta-row--mobile button.rma-cta.inline-flex { font-size: 15px !important; height: 44px !important; letter-spacing: 0.4px !important; } @media (max-width: 360px) { [data-theme='red-mountain'] .rma-cta-row--mobile .rma-cta.inline-flex, [data-theme='red-mountain'] .rma-cta-row--mobile a.rma-cta.inline-flex, [data-theme='red-mountain'] .rma-cta-row--mobile button.rma-cta.inline-flex { font-size: 13px !important; height: 40px !important; } } /* row 1, col 3 — phone chip flush with the top of the header */ [data-header='red-mountain'] .rma-header-grid > .rma-phone-chip { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; margin-top: -8px; /* offsets the grid's 8px top padding so the chip sits flush */ } /* row 2, col 3 — Google review badge (right edge) */ [data-header='red-mountain'] .rma-header-grid > .rma-review-badge { grid-column: 3; grid-row: 2; justify-self: end; } /* row 3, cols 2-3 — nav spans wide, items right-aligned */ [data-header='red-mountain'] .rma-header-grid > .rma-nav { grid-column: 2 / span 2; grid-row: 3; justify-self: stretch; width: 100%; } [data-header='red-mountain'] .rma-header-grid > .rma-nav nav { justify-content: flex-end; } [data-header='red-mountain'] .rma-header-grid > .rma-nav ul { margin-left: auto !important; } [data-theme='red-mountain'] .rma-cta.inline-flex, [data-theme='red-mountain'] a.rma-cta.inline-flex, [data-theme='red-mountain'] button.rma-cta.inline-flex { height: 42px !important; padding: 0 24px !important; border-radius: 10px !important; font-family: var(--font-montserrat), sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border: 1px solid transparent !important; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* ---------- Theme-wide: all buttons uppercase ---------- Mirrors theme-d's pattern. Excludes form controls (combobox/checkbox/radio), accordion/dialog system buttons, back-to-top widget, and nav links (styled separately above). Form inputs (role="combobox") explicitly reset below. */ [data-theme='red-mountain'] button:not([class*='accordion']):not([class*='dialog']):not([role='combobox']):not([role='checkbox']):not([role='radio']):not([class*='back-to-top']):not(.nav-trigger):not(.video-facade):not(.tabbed-tab), [data-theme='red-mountain'] a.inline-flex:not(nav a):not(.rma-nav a) { text-transform: uppercase !important; letter-spacing: 0.5px; } /* Re-enable normal case on form select triggers — they should not look like buttons */ [data-theme='red-mountain'] button[role='combobox'] { text-transform: none !important; letter-spacing: normal !important; font-weight: 400 !important; } /* Red CTAs (Leave A Review, Request Estimate) — Figma node 305:907 Background hsl(var(--rma-red-2)) with a lighter red 1px stroke hsl(var(--rma-red-1)), 10px radius. */ [data-theme='red-mountain'] a.rma-cta-red.inline-flex, [data-theme='red-mountain'] button.rma-cta-red.inline-flex, [data-theme='red-mountain'] .rma-cta-red.inline-flex { background-color: hsl(var(--rma-red-2)) !important; border-color: hsl(var(--rma-red-1)) !important; color: #ffffff !important; } [data-theme='red-mountain'] a.rma-cta-red.inline-flex:hover, [data-theme='red-mountain'] button.rma-cta-red.inline-flex:hover, [data-theme='red-mountain'] .rma-cta-red.inline-flex:hover { background-color: #ffffff !important; color: hsl(var(--rma-red-2)) !important; border-color: hsl(var(--rma-red-1)) !important; } /* Black CTA (2nd in row, e.g., Financing) */ [data-theme='red-mountain'] a.rma-cta-black.inline-flex, [data-theme='red-mountain'] button.rma-cta-black.inline-flex, [data-theme='red-mountain'] .rma-cta-black.inline-flex { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; } [data-theme='red-mountain'] a.rma-cta-black.inline-flex:hover, [data-theme='red-mountain'] button.rma-cta-black.inline-flex:hover, [data-theme='red-mountain'] .rma-cta-black.inline-flex:hover { background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important; } /* ---------- Navigation ---------- */ /* Reset shared NavItem hover backgrounds (per CLAUDE.md theme guidance) */ [data-header='red-mountain'] header nav a, [data-header='red-mountain'] header nav button.nav-trigger { background-color: transparent !important; text-decoration: none !important; } [data-header='red-mountain'] header nav a:hover, [data-header='red-mountain'] header nav button.nav-trigger:hover, [data-header='red-mountain'] header nav button.nav-trigger[data-state='open'], [data-header='red-mountain'] header nav button.nav-trigger[data-state='open']:hover { background-color: transparent !important; text-decoration: none !important; } [data-header='red-mountain'] header nav a:focus, [data-header='red-mountain'] header nav button.nav-trigger:focus { background-color: transparent !important; } /* Nav typography per Figma: Montserrat 18/700 uppercase white. Scoped to TOP-LEVEL items only (.nav-item-link, .nav-trigger) so the white color doesn't leak into submenu items inside the white panel. */ [data-theme='red-mountain'] .rma-nav a.nav-item-link, [data-theme='red-mountain'] .rma-nav button.nav-trigger { font-family: var(--font-montserrat), sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: #ffffff !important; text-transform: uppercase; letter-spacing: 0.5px; padding-left: 0; padding-right: 0; } /* Right-align the nav inside its full-width grid cell. The inner Radix

Specials

Need HVAC Service?