/* ========================================================================== Brandywine Services — Brand stylesheet Pure CSS, no frameworks. Mobile-first. Drop-in for static hosting. ========================================================================== */ :root { --navy: #0132B4; --navy-dark: #011F6E; --navy-deep: #00164E; --red: #EF3C13; --red-dark: #C92E0B; --white: #FFFFFF; --off-white: #F5F7FB; --gray-100: #F2F4F8; --gray-200: #E5E7EB; --gray-400: #9CA3AF; --gray-600: #4B5563; --gray-800: #1F2937; --black: #0B0F19; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --shadow-lg: 0 20px 40px -12px rgba(1, 50, 180, 0.25); --container: 1320px; --nav-h: 72px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.55; color: var(--gray-800); background: var(--white); -webkit-font-smoothing: antialiased; padding-bottom: 72px; /* space for sticky mobile CTA */ } /* Cursor is set via JS — random element each page load. Theme classes set on via script.js. */ body.cur-snow, body.cur-snow a, body.cur-snow button, body.cur-snow [role="button"], body.cur-snow .phone-pill, body.cur-snow .btn-primary, body.cur-snow .btn-secondary, body.cur-snow .btn-book, body.cur-snow .symptom-card, body.cur-snow .pill-card, body.cur-snow .review-card, body.cur-snow .service-row, body.cur-snow .cta-channel, body.cur-snow .service-area-list a, body.cur-snow .portrait-card, body.cur-snow .photo-card, body.cur-snow .nav-links a, body.cur-snow .mobile-nav a, body.cur-snow .menu-toggle, body.cur-snow .brand { cursor: url('cursor-snow.svg') 16 16, auto; } body.cur-fire, body.cur-fire a, body.cur-fire button, body.cur-fire [role="button"], body.cur-fire .phone-pill, body.cur-fire .btn-primary, body.cur-fire .btn-secondary, body.cur-fire .btn-book, body.cur-fire .symptom-card, body.cur-fire .pill-card, body.cur-fire .review-card, body.cur-fire .service-row, body.cur-fire .cta-channel, body.cur-fire .service-area-list a, body.cur-fire .portrait-card, body.cur-fire .photo-card, body.cur-fire .nav-links a, body.cur-fire .mobile-nav a, body.cur-fire .menu-toggle, body.cur-fire .brand { cursor: url('cursor-fire.svg') 16 16, auto; } body.cur-water, body.cur-water a, body.cur-water button, body.cur-water [role="button"], body.cur-water .phone-pill, body.cur-water .btn-primary, body.cur-water .btn-secondary, body.cur-water .btn-book, body.cur-water .symptom-card, body.cur-water .pill-card, body.cur-water .review-card, body.cur-water .service-row, body.cur-water .cta-channel, body.cur-water .service-area-list a, body.cur-water .portrait-card, body.cur-water .photo-card, body.cur-water .nav-links a, body.cur-water .mobile-nav a, body.cur-water .menu-toggle, body.cur-water .brand { cursor: url('cursor-water.svg') 16 16, auto; } body.cur-bolt, body.cur-bolt a, body.cur-bolt button, body.cur-bolt [role="button"], body.cur-bolt .phone-pill, body.cur-bolt .btn-primary, body.cur-bolt .btn-secondary, body.cur-bolt .btn-book, body.cur-bolt .symptom-card, body.cur-bolt .pill-card, body.cur-bolt .review-card, body.cur-bolt .service-row, body.cur-bolt .cta-channel, body.cur-bolt .service-area-list a, body.cur-bolt .portrait-card, body.cur-bolt .photo-card, body.cur-bolt .nav-links a, body.cur-bolt .mobile-nav a, body.cur-bolt .menu-toggle, body.cur-bolt .brand { cursor: url('cursor-bolt.svg') 16 16, auto; } @media (hover: none) and (pointer: coarse) { body, a, button { cursor: auto !important; } } @media (min-width: 900px) { body { padding-bottom: 0; } } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--black); margin: 0 0 .5em; line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; } h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; } h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; } .lede { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; color: rgba(255,255,255,0.88); max-width: 680px; } p { margin: 0 0 1em; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; } @media (min-width: 900px) { .container { padding: 0 48px; } } @media (min-width: 1200px) { .container { padding: 0 64px; } } .section { padding: 96px 0; } .section-lg { padding: 128px 0; } @media (max-width: 700px) { .section { padding: 64px 0; } .section-lg { padding: 80px 0; } } .eyebrow { color: var(--red); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; } /* ============ HEADER / NAV ============ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease; } /* Soft top-of-page gradient so header text reads on hero photo without a hard band */ .site-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 22, 78, 0.55) 0%, rgba(0, 22, 78, 0.25) 60%, rgba(0, 22, 78, 0) 100%); pointer-events: none; transition: opacity .25s ease; } /* Once user scrolls, header gets a navy tint with blur so it stays readable over white sections */ .site-header.scrolled { background: rgba(1, 31, 110, 0.92); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); } .site-header.scrolled::before { opacity: 0; } /* Body needs to compensate for the now-fixed header — push hero down by header height */ body { padding-top: 0; } .site-header .nav-links a { color: rgba(255,255,255,0.86); } .site-header .nav-links a:hover, .site-header .nav-links a.active { color: var(--white); } .site-header .btn-book { border-color: rgba(255,255,255,0.7); color: var(--white); } .site-header .btn-book:hover { background: var(--white); color: var(--navy); } .site-header .menu-toggle { color: var(--white); } .nav-wrap { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); } .brand { display: flex; align-items: center; gap: 12px; transition: transform .15s; } .brand img { height: 48px; width: auto; display: block; } .brand img.logo-invert { filter: invert(1) brightness(1.1); } .brand:hover { transform: scale(1.03); } @media (max-width: 700px) { .brand img { height: 36px; } } .brand .brand-text { display: none; font-weight: 800; color: var(--navy); font-size: 1.15rem; letter-spacing: -0.01em; } .nav-links { display: none; gap: 28px; } .nav-links a { color: var(--gray-800); font-weight: 500; font-size: 0.95rem; transition: color .15s; } .nav-links a:hover, .nav-links a.active { color: var(--navy); } .nav-cta { display: flex; align-items: center; gap: 8px; } .phone-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: var(--white); padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.95rem; transition: background .15s, transform .15s; position: relative; box-shadow: 0 0 0 0 rgba(239, 60, 19, 0.75); animation: phonePulse 2.4s ease-in-out infinite; z-index: 1; } .phone-pill:hover { background: var(--red-dark); transform: translateY(-2px); animation-play-state: paused; } .phone-pill svg { width: 16px; height: 16px; } .phone-pill .phone-digits { display: none; } @keyframes phonePulse { 0% { box-shadow: 0 0 0 0 rgba(239, 60, 19, 0.7); } 50% { box-shadow: 0 0 0 14px rgba(239, 60, 19, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 60, 19, 0); } } /* Tiny swinging phone icon inside the button */ .phone-pill svg { animation: phoneTilt 2.4s ease-in-out infinite; transform-origin: 50% 50%; } @keyframes phoneTilt { 0%, 65%, 100% { transform: rotate(0deg); } 72% { transform: rotate(-18deg); } 79% { transform: rotate(18deg); } 86% { transform: rotate(-10deg); } 93% { transform: rotate(6deg); } } .btn-book { display: none; } /* Mobile menu toggle */ .menu-toggle { background: none; border: none; cursor: pointer; width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--navy); } .menu-toggle svg { width: 28px; height: 28px; } .mobile-nav { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-md); padding: 16px 20px 24px; } .mobile-nav.open { display: block; } .mobile-nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--gray-100); font-weight: 600; font-size: 1.05rem; color: var(--gray-800); } .mobile-nav a:last-child { border-bottom: none; } @media (min-width: 900px) { .nav-links { display: flex; } .menu-toggle { display: none; } .btn-book { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--radius-pill); border: 2px solid var(--navy); color: var(--navy); font-weight: 700; font-size: 0.95rem; transition: background .15s, color .15s; } .btn-book:hover { background: var(--navy); color: var(--white); } .phone-pill .phone-digits { display: inline; } } /* ============ STICKY MOBILE CTA BAR ============ */ .mobile-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 10px; padding: 10px 12px; background: var(--white); border-top: 1px solid var(--gray-200); z-index: 40; box-shadow: 0 -4px 12px rgba(0,0,0,0.06); } .mobile-cta-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.95rem; transition: all .15s; } .mobile-cta-bar .cta-primary { background: var(--red); color: var(--white); } .mobile-cta-bar .cta-secondary { background: var(--navy); color: var(--white); } .mobile-cta-bar svg { width: 18px; height: 18px; } @media (min-width: 900px) { .mobile-cta-bar { display: none; } } /* ============ HERO ============ */ .hero { position: relative; background: url('hero-pattern.svg') center/cover no-repeat, linear-gradient(170deg, var(--navy) 0%, var(--navy-dark) 55%, var(--navy-deep) 100%); color: var(--white); padding: 160px 0 200px; overflow: hidden; min-height: 880px; display: flex; align-items: center; } @media (max-width: 700px) { .hero { padding: 120px 0 140px; min-height: 680px; } } .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-media video, .hero-media img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); opacity: 0.35; } .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 85% 15%, rgba(239, 60, 19, 0.25), transparent 45%), linear-gradient(170deg, rgba(1, 50, 180, 0.75) 0%, rgba(1, 31, 110, 0.85) 55%, rgba(0, 22, 78, 0.92) 100%); pointer-events: none; } /* Solid blue hero (legacy) */ .hero.hero-solid::before { background: radial-gradient(circle at 85% 15%, rgba(239, 60, 19, 0.2), transparent 45%), linear-gradient(170deg, rgba(1, 50, 180, 0.97) 0%, rgba(1, 31, 110, 0.98) 55%, rgba(0, 22, 78, 0.99) 100%); } .hero.hero-solid .hero-media img { opacity: 0.18; } /* Photo hero (home page) — image is the star, overlay keeps text readable */ .hero.hero-photo::before { background: linear-gradient(100deg, rgba(1, 50, 180, 0.85) 0%, rgba(1, 31, 110, 0.6) 50%, rgba(0, 22, 78, 0.35) 100%); } .hero.hero-photo .hero-media img { opacity: 1; } /* When the live-open card is shown (≥1500px viewport, not dismissed), reflow content right of it. */ @media (min-width: 1500px) { body:has(.live-open-floating:not(.dismissed)) .hero .container, body:has(.live-open-floating:not(.dismissed)) .value-pills .container, body:has(.live-open-floating:not(.dismissed)) .services-section .container, body:has(.live-open-floating:not(.dismissed)) .two-col-wrap .container, body:has(.live-open-floating:not(.dismissed)) .reviews-section .container, body:has(.live-open-floating:not(.dismissed)) .dark-section .container, body:has(.live-open-floating:not(.dismissed)) .cta-section .container, body:has(.live-open-floating:not(.dismissed)) .stat-banner .container { padding-left: 260px; } } @media (min-width: 1700px) { body:has(.live-open-floating:not(.dismissed)) .hero .container, body:has(.live-open-floating:not(.dismissed)) .value-pills .container, body:has(.live-open-floating:not(.dismissed)) .services-section .container, body:has(.live-open-floating:not(.dismissed)) .two-col-wrap .container, body:has(.live-open-floating:not(.dismissed)) .reviews-section .container, body:has(.live-open-floating:not(.dismissed)) .dark-section .container, body:has(.live-open-floating:not(.dismissed)) .cta-section .container, body:has(.live-open-floating:not(.dismissed)) .stat-banner .container { padding-left: 280px; } } .hero .container { position: relative; z-index: 2; width: 100%; } .hero .eyebrow { color: #FFB9A8; font-size: 0.95rem; margin-bottom: 24px; display: inline-block; } .hero h1 { color: var(--white); margin-bottom: 24px; max-width: 900px; } .hero .lede { font-size: clamp(1.15rem, 2vw, 1.4rem); color: rgba(255,255,255,0.92); max-width: 700px; margin-bottom: 44px; line-height: 1.55; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 56px; } .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: var(--radius-pill); font-weight: 700; font-size: 1.05rem; transition: all .15s; } .btn-primary { background: var(--red); color: var(--white); box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary { background: rgba(255,255,255,0.08); color: var(--white); border: 2px solid rgba(255,255,255,0.5); } .btn-secondary:hover { background: var(--white); color: var(--navy); border-color: var(--white); } .btn-primary svg, .btn-secondary svg { width: 18px; height: 18px; } /* Trust strip in hero */ .trust-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 36px; padding: 32px 0 0; border-top: 1px solid rgba(255,255,255,0.18); margin-top: 12px; } .trust-strip > div { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.95); font-size: 0.98rem; font-weight: 600; } .trust-strip svg { width: 22px; height: 22px; color: #7BE39B; flex-shrink: 0; } @media (min-width: 640px) { .trust-strip { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .trust-strip { grid-template-columns: repeat(6, 1fr); } } /* ============ 3-pill row (value props) ============ */ .value-pills { padding: 120px 0; background: var(--off-white); position: relative; } @media (max-width: 700px) { .value-pills { padding: 72px 0; } } .pill-grid { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 56px; } @media (min-width: 700px) { .pill-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .pill-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 40px 32px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; } .pill-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .pill-card h3 { margin-top: 24px; color: var(--navy); font-size: 1.5rem; } .pill-card .pill-icon { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -6px rgba(1, 50, 180, 0.4); } .pill-card .pill-icon svg { width: 32px; height: 32px; } .pill-card p { color: var(--gray-600); margin-bottom: 24px; font-size: 1.02rem; line-height: 1.55; } .pill-card a.card-link { color: var(--red); font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; } .pill-card a.card-link:hover { color: var(--red-dark); } /* ============ Services grid (numbered list) ============ */ .services-section { padding: 128px 0; background: var(--white); } @media (max-width: 700px) { .services-section { padding: 80px 0; } } .services-section h2 { max-width: 820px; margin-bottom: 24px; } .section-lede { color: var(--gray-600); max-width: 760px; font-size: 1.2rem; margin-bottom: 64px; line-height: 1.55; } .section-header { margin-bottom: 56px; max-width: 860px; } .section-header .eyebrow { margin-bottom: 20px; display: inline-block; } .section-header h2 { margin-bottom: 24px; } .service-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 32px; align-items: center; padding: 40px 24px; border-bottom: 1px solid var(--gray-200); transition: background .2s, padding .2s; border-radius: var(--radius-md); margin: 0 -24px; text-decoration: none; color: inherit; } .service-row:last-child { border-bottom: none; } .service-row:hover { background: var(--off-white); } .service-row .num { font-family: var(--font-display); font-weight: 800; font-size: 3rem; color: var(--gray-200); line-height: 1; transition: color .2s; } .service-row:hover .num { color: var(--red); } .service-row .content h3 { margin: 0 0 10px; color: var(--black); font-size: 1.6rem; } .service-row .content p { color: var(--gray-600); margin: 0; font-size: 1.08rem; line-height: 1.55; } .service-row .arrow { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; flex-shrink: 0; } .service-row .arrow svg { width: 22px; height: 22px; } .service-row:hover .arrow { background: var(--red); transform: translateX(8px); } @media (max-width: 700px) { .service-row { grid-template-columns: 48px 1fr; gap: 20px; padding: 28px 16px; margin: 0 -16px; } .service-row .num { font-size: 1.6rem; } .service-row .content h3 { font-size: 1.25rem; } .service-row .arrow { display: none; } } /* ============ Dark callout section ============ */ .dark-section { background: linear-gradient(170deg, var(--navy) 0%, var(--navy-dark) 55%, var(--navy-deep) 100%); color: var(--white); padding: 128px 0; position: relative; overflow: hidden; } @media (max-width: 700px) { .dark-section { padding: 80px 0; } } .dark-section::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 90% 20%, rgba(239, 60, 19, 0.2), transparent 50%); } .dark-section .container { position: relative; z-index: 1; } .dark-section h2 { color: var(--white); max-width: 760px; } .dark-section p { color: rgba(255,255,255,0.84); max-width: 640px; font-size: 1.05rem; } .dark-section .eyebrow { color: #FFB9A8; } .tcs-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } @media (min-width: 800px) { .tcs-layout { grid-template-columns: 200px 1fr; } } .tcs-badge { width: 160px; height: 160px; border-radius: 24px; background: var(--white); color: var(--navy); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; font-size: 0.9rem; padding: 16px; box-shadow: var(--shadow-md); } .tcs-wide-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } @media (min-width: 900px) { .tcs-wide-grid { grid-template-columns: 280px 1fr; gap: 80px; } } .tcs-badge-lg { width: 220px; height: 220px; font-size: 1.1rem; border-radius: 32px; background: linear-gradient(135deg, #FFFFFF, #E5E7EB); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3), inset 0 0 0 2px rgba(255,255,255,0.8); animation: badgeFloat 6s ease-in-out infinite; } .tcs-logo-img { width: 220px; height: auto; border-radius: 16px; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4)); animation: badgeFloat 6s ease-in-out infinite; } .tcs-logo-img.tcs-logo-lg { width: 280px; } @keyframes badgeFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } } .tcs-bullets { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; max-width: 920px; } @media (min-width: 700px) { .tcs-bullets { grid-template-columns: 1fr 1fr; gap: 20px; } } .tcs-bullets > div { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-md); color: var(--white); font-weight: 600; font-size: 1rem; transition: background .2s, transform .2s; } .tcs-bullets > div:hover { background: rgba(255,255,255,0.14); transform: translateX(4px); } .tcs-bullets svg { width: 22px; height: 22px; color: #7BE39B; flex-shrink: 0; } /* ============ Symptoms / service type grid (Repair page) ============ */ .symptom-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 32px; } @media (min-width: 640px) { .symptom-grid { grid-template-columns: repeat(4, 1fr); } } .symptom-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 20px 16px; text-align: center; transition: all .15s; color: var(--gray-800); font-weight: 600; font-size: 0.95rem; display: flex; flex-direction: column; align-items: center; gap: 10px; } .symptom-card svg { width: 28px; height: 28px; color: var(--red); } .symptom-card:hover { border-color: var(--navy); transform: translateY(-2px); color: var(--navy); } /* ============ Reviews / testimonials ============ */ .reviews-section { padding: 128px 0; background: var(--off-white); } @media (max-width: 700px) { .reviews-section { padding: 80px 0; } } .reviews-grid { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 56px; } @media (min-width: 700px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .review-card { background: var(--white); border-radius: var(--radius-lg); padding: 40px 32px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); transition: transform .2s, box-shadow .2s; } .review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .stars { color: #F5B800; font-size: 1.35rem; margin-bottom: 20px; letter-spacing: 3px; } .review-card .quote { color: var(--gray-800); font-size: 1.08rem; margin-bottom: 24px; line-height: 1.6; } .review-card .author { color: var(--gray-600); font-size: 0.96rem; font-weight: 600; display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--gray-200); } .avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--red)); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; } .review-card .author div { display: flex; flex-direction: column; } .review-card .author .name { color: var(--gray-800); font-weight: 700; } .review-card .author .loc { color: var(--gray-600); font-size: 0.88rem; font-weight: 500; } /* ============ Stats block (Air Quality) ============ */ .stats-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 40px; } @media (min-width: 700px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } } .stat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; } .stat-card .big { color: var(--navy); font-size: 3.5rem; font-weight: 800; line-height: 1; margin-bottom: 10px; font-family: var(--font-display); letter-spacing: -0.03em; } .stat-card p { color: var(--gray-600); margin: 0; font-size: 0.98rem; } /* ============ CTA / Contact block ============ */ .cta-section { padding: 128px 0; background: var(--white); } @media (max-width: 700px) { .cta-section { padding: 80px 0; } } .cta-card { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: var(--white); border-radius: var(--radius-lg); padding: 56px 32px; display: grid; grid-template-columns: 1fr; gap: 48px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .cta-card::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 90% 20%, rgba(239, 60, 19, 0.25), transparent 50%); } .cta-card > * { position: relative; z-index: 1; } @media (min-width: 800px) { .cta-card { grid-template-columns: 1fr 1fr; padding: 80px; gap: 80px; } } .cta-card h2 { color: var(--white); } .cta-card p { color: rgba(255,255,255,0.85); } .cta-channels { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } .cta-channel { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: rgba(255,255,255,0.08); border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.15); color: var(--white); font-weight: 600; transition: background .15s; text-decoration: none; } .cta-channel:hover { background: rgba(255,255,255,0.15); } .cta-channel > svg { width: 24px; height: 24px; color: var(--red); flex-shrink: 0; } .cta-channel > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cta-channel .meta { font-size: 0.82rem; color: rgba(255,255,255,0.65); font-weight: 500; } .cta-channel .big-number { font-size: 1.25rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; } .form-block { background: var(--white); color: var(--gray-800); border-radius: var(--radius-md); padding: 20px; } .form-block h3 { color: var(--navy); margin-bottom: 12px; } .form-placeholder { border: 2px dashed var(--gray-400); border-radius: var(--radius-md); padding: 40px 24px; text-align: center; color: var(--gray-600); font-size: 0.95rem; background: var(--gray-100); } .form-placeholder code { display: block; margin-top: 12px; padding: 10px; background: var(--white); border-radius: 6px; font-size: 0.82rem; color: var(--navy); } /* ============ CONTACT FORM (Netlify Forms) ============ */ .form-block h3 { font-size: 1.25rem; margin-bottom: 8px; } .bw-form { display: flex; flex-direction: column; gap: 10px; } .form-lede { color: var(--gray-600); font-size: 0.85rem; margin: 0 0 6px; line-height: 1.45; } .form-row { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 500px) { .form-row { grid-template-columns: 1fr 1fr; } } .form-stack, .form-row > label { display: flex; flex-direction: column; gap: 4px; } .form-label { font-weight: 700; font-size: 0.75rem; color: var(--gray-800); letter-spacing: 0.01em; } .form-label em { color: var(--red); font-style: normal; font-weight: 800; margin-left: 2px; } .bw-form input[type="text"], .bw-form input[type="email"], .bw-form input[type="tel"], .bw-form select, .bw-form textarea { width: 100%; padding: 9px 11px; font-family: inherit; font-size: 0.88rem; color: var(--gray-800); background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 8px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; } .bw-form input:focus, .bw-form select:focus, .bw-form textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(1, 50, 180, 0.15); } .bw-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px; cursor: pointer; } .bw-form textarea { resize: vertical; min-height: 60px; line-height: 1.45; } .form-submit { margin-top: 4px; padding: 11px 20px; background: var(--red); color: var(--white); border: 0; border-radius: 999px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; box-shadow: 0 6px 14px -4px rgba(239, 60, 19, 0.5); } .form-submit:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(239, 60, 19, 0.6); } .form-submit:active { transform: translateY(0); } .form-fineprint { color: var(--gray-400); font-size: 0.7rem; line-height: 1.45; margin: 4px 0 0; } /* Honeypot field — invisible to humans, bots fill it */ .hidden-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Success state — shown after redirect ?contact-success=1 */ #contact-success-message { display: none; background: #DCFCE7; border: 1px solid #16A34A; color: #166534; border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 16px; font-weight: 600; } body.contact-submitted #contact-success-message { display: block; } /* ============ FOOTER ============ */ .site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.8); padding: 56px 0 24px; font-size: 0.92rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; } @media (min-width: 700px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer-grid h4 { color: var(--white); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; } .footer-grid a { display: block; color: rgba(255,255,255,0.72); padding: 4px 0; transition: color .15s; } .footer-grid a:hover { color: var(--white); } .footer-brand img { height: 72px; margin-bottom: 20px; filter: brightness(1.1); } .footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.88rem; max-width: 300px; } .footer-bottom { padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: rgba(255,255,255,0.5); font-size: 0.82rem; } /* ============ PAGE HEADERS (inner pages) ============ */ .page-header { background: url('hero-pattern.svg') center/cover no-repeat, linear-gradient(170deg, var(--navy) 0%, var(--navy-dark) 100%); color: var(--white); padding: 160px 0 180px; text-align: left; position: relative; overflow: hidden; min-height: 740px; display: flex; align-items: center; } @media (max-width: 700px) { .page-header { padding: 110px 0 130px; min-height: 560px; } } .page-header .header-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .page-header .header-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; } .page-header::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 90% 30%, rgba(239, 60, 19, 0.22), transparent 55%), linear-gradient(170deg, rgba(1, 50, 180, 0.78), rgba(0, 22, 78, 0.92)); } .page-header .container { position: relative; z-index: 2; width: 100%; } .page-header h1 { color: var(--white); max-width: 900px; margin-bottom: 24px; } .page-header .lede { color: rgba(255,255,255,0.92); font-size: clamp(1.1rem, 1.8vw, 1.3rem); max-width: 720px; margin-top: 0; margin-bottom: 0; } .page-header .hero-ctas { margin-top: 44px; margin-bottom: 0; } .page-header .eyebrow { margin-bottom: 24px; display: inline-block; font-size: 0.95rem; } /* ============ Two-column content ============ */ .two-col-wrap { padding: 128px 0; } .two-col-wrap.alt { background: var(--off-white); } @media (max-width: 700px) { .two-col-wrap { padding: 80px 0; } } .two-col { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: start; } @media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 96px; } } .two-col h2 { margin-bottom: 24px; } .two-col p { color: var(--gray-600); font-size: 1.1rem; line-height: 1.65; } .two-col ul { padding-left: 24px; color: var(--gray-600); font-size: 1.05rem; line-height: 1.65; } .two-col ul li { margin-bottom: 14px; } .two-col ul li strong { color: var(--gray-800); } .two-col img, .two-col .image-block { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; } /* ============ Comparison columns (Installation) ============ */ .compare-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 32px; } @media (min-width: 700px) { .compare-grid { grid-template-columns: 1fr 1fr; } } .compare-col { padding: 28px; border-radius: var(--radius-lg); } .compare-col.you { background: var(--white); border: 2px solid var(--navy); } .compare-col.us { background: var(--navy); color: var(--white); } .compare-col h4 { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; color: var(--red); } .compare-col.us h4 { color: #FFB9A8; } .compare-col ul { list-style: none; padding: 0; margin: 0; } .compare-col ul li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid rgba(0,0,0,0.08); } .compare-col.us ul li { border-bottom-color: rgba(255,255,255,0.15); } .compare-col ul li:last-child { border-bottom: none; } .compare-col ul li::before { content: '✓'; position: absolute; left: 0; top: 10px; color: var(--red); font-weight: 800; } .compare-col.us ul li::before { color: #FFB9A8; } /* ============ Owner quote block ============ */ .quote-block { background: var(--off-white); border-radius: var(--radius-lg); padding: 40px 32px; position: relative; margin: 40px 0; } .quote-block::before { content: '"'; position: absolute; top: -20px; left: 24px; font-family: Georgia, serif; font-size: 6rem; color: var(--red); line-height: 1; } .quote-block blockquote { margin: 0; padding-left: 40px; font-size: 1.2rem; line-height: 1.55; color: var(--gray-800); font-style: italic; } .quote-block cite { display: block; margin-top: 16px; padding-left: 40px; color: var(--red); font-weight: 700; font-style: normal; font-size: 0.95rem; } /* ============ Service area / list pages ============ */ .service-area-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; } @media (min-width: 700px) { .service-area-list { grid-template-columns: repeat(4, 1fr); } } .service-area-list a { padding: 12px 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); color: var(--gray-800); font-weight: 600; font-size: 0.95rem; transition: all .15s; } .service-area-list a:hover { border-color: var(--navy); color: var(--navy); } /* ============ Brand logos strip ============ */ .brand-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: center; padding: 40px 0; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); margin-top: 48px; } @media (min-width: 700px) { .brand-strip { grid-template-columns: repeat(5, 1fr); } } .brand-strip .brand-chip { text-align: center; font-weight: 700; color: var(--gray-600); letter-spacing: -0.01em; padding: 12px; font-size: 1.05rem; } /* ============ Utilities ============ */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .py-lg { padding: 72px 0; } .hide-mobile { display: none; } @media (min-width: 700px) { .hide-mobile { display: initial; } } /* Benefit grid (Maintenance Comfort Club perks) — 2-col compact */ .benefit-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 900px; margin-top: 32px; } @media (min-width: 700px) { .benefit-grid { grid-template-columns: 1fr 1fr; gap: 14px 20px; } } .benefit-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); color: var(--white); font-size: 0.98rem; line-height: 1.4; transition: background .2s; } .benefit-row:hover { background: rgba(255,255,255,0.12); } .benefit-row svg { width: 20px; height: 20px; color: #7BE39B; flex-shrink: 0; } .benefit-row span { flex: 1; } /* ============ LIVE "ALWAYS OPEN" CARD (floating, narrow + tall, pinned to viewport) ============ */ .live-open-card.live-open-floating { position: fixed; top: 50%; left: 32px; transform: translateY(-50%); z-index: 45; width: 180px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px 18px; background: rgba(255, 255, 255, 0.97); border-radius: 18px; box-shadow: 0 22px 50px -12px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; animation: liveCardSlideIn .6s cubic-bezier(0.2, 0.7, 0.2, 1) .8s both; display: none; } @media (min-width: 1500px) { .live-open-card.live-open-floating { display: flex; } } @keyframes liveCardSlideIn { from { opacity: 0; transform: translate(-30px, -50%); } to { opacity: 1; transform: translate(0, -50%); } } @media (min-width: 1700px) { .live-open-card.live-open-floating { left: 56px; } } .live-open-close { position: absolute; top: 6px; right: 8px; background: none; border: 0; width: 24px; height: 24px; font-size: 1.3rem; color: var(--gray-400); cursor: pointer; line-height: 1; transition: color .15s; padding: 0; } .live-open-close:hover { color: var(--gray-800); } .live-open-pulse { position: relative; width: 12px; height: 12px; margin-bottom: 2px; } .live-open-pulse .dot { position: absolute; inset: 0; background: #16A34A; border-radius: 50%; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); animation: liveDotPulse 2s ease-in-out infinite; } @keyframes liveDotPulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); } 60% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } } .live-open-eyebrow { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #16A34A; font-weight: 800; } .live-open-time { font-size: 1.6rem; font-weight: 800; color: var(--navy); font-feature-settings: "tnum"; line-height: 1.1; margin: 2px 0; white-space: nowrap; } .live-open-tagline { font-size: 0.78rem; color: var(--gray-600); font-weight: 600; line-height: 1.3; } .live-open-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; margin-top: 8px; width: 100%; background: var(--red); color: var(--white); border-radius: 999px; font-weight: 700; font-size: 0.85rem; white-space: nowrap; transition: background .15s, transform .15s; } .live-open-cta:hover { background: var(--red-dark); transform: translateY(-1px); } .live-open-cta svg { width: 14px; height: 14px; } /* When user dismisses */ .live-open-floating.dismissed { display: none; } /* ============ IMAGE-RICH PATTERNS ============ */ /* Photo card (used in services, features) */ .photo-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); } .photo-card::after { content: ''; position: absolute; inset: 0; background: url('hero-pattern.svg') center/cover no-repeat; opacity: 0.6; pointer-events: none; z-index: 0; } .photo-card img { position: relative; z-index: 1; } .photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .photo-card:hover img { transform: scale(1.05); } /* Tall portrait card (team, owner) */ .portrait-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); } .portrait-card::before { content: ''; position: absolute; inset: 0; background: url('hero-pattern.svg') center/cover no-repeat; opacity: 0.7; } .portrait-card img { width: 100%; height: 100%; object-fit: cover; } .portrait-card .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 28px; background: linear-gradient(to top, rgba(0,22,78,0.9), transparent); color: var(--white); } .portrait-card .caption h4 { color: var(--white); margin: 0 0 4px; font-size: 1.15rem; } .portrait-card .caption p { color: rgba(255,255,255,0.85); margin: 0; font-size: 0.92rem; } /* Feature block with image split */ .feature-split { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; padding: 128px 0; } @media (min-width: 900px) { .feature-split { grid-template-columns: 1fr 1fr; gap: 96px; } } @media (max-width: 700px) { .feature-split { padding: 80px 0; gap: 40px; } } .feature-split.reverse > *:first-child { order: 2; } @media (max-width: 900px) { .feature-split.reverse > *:first-child { order: 1; } } .feature-split .text h2 { margin-bottom: 24px; } .feature-split .text p { color: var(--gray-600); font-size: 1.15rem; line-height: 1.7; margin-bottom: 20px; } .feature-split .image img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-lg); display: block; } .feature-split .image { position: relative; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); min-height: 300px; } .feature-split .image::before { content: ''; position: absolute; inset: 0; background: url('hero-pattern.svg') center/cover no-repeat; opacity: 0.6; border-radius: var(--radius-lg); } .feature-split .image img { position: relative; z-index: 1; } .feature-split .image::after { content: ''; position: absolute; bottom: -20px; right: -20px; width: 40%; height: 40%; background: var(--red); border-radius: var(--radius-lg); z-index: -1; } /* Image gallery grid */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; } @media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } } .gallery-grid .photo-card:nth-child(1) { aspect-ratio: 3 / 4; } .gallery-grid .photo-card:nth-child(4) { aspect-ratio: 3 / 4; } /* Stat banner — big numbers on image */ .stat-banner { position: relative; padding: 112px 0; background-size: cover; background-position: center; color: var(--white); overflow: hidden; } .stat-banner.stat-banner-wide { padding: 160px 0; } .stat-banner.stat-banner-wide .big-stat { font-size: clamp(4rem, 10vw, 8rem); } .stat-banner.stat-banner-fullbleed .stat-fullbleed-inner { position: relative; z-index: 1; width: 100%; padding: 0 64px; } @media (max-width: 700px) { .stat-banner.stat-banner-fullbleed .stat-fullbleed-inner { padding: 0 24px; } } .stat-banner.stat-banner-fullbleed .stat-row { max-width: none; gap: 64px; } .stat-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(1,50,180,0.92), rgba(0,22,78,0.94)); z-index: 0; } .stat-banner .container { position: relative; z-index: 1; } .stat-banner .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; text-align: center; } @media (min-width: 800px) { .stat-banner .stat-row { grid-template-columns: repeat(4, 1fr); gap: 32px; } } .stat-banner .stat-row .big-stat { font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; color: var(--white); line-height: 1; letter-spacing: -0.03em; font-family: var(--font-display); margin-bottom: 12px; } .stat-banner .stat-row .big-stat .accent { color: #FFB9A8; } .stat-banner .stat-row p { color: rgba(255,255,255,0.88); font-size: 1rem; font-weight: 500; margin: 0; } /* Team grid */ .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; } @media (min-width: 700px) { .team-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } } .team-grid.team-grid-three { grid-template-columns: 1fr; max-width: 1100px; margin-left: auto; margin-right: auto; } @media (min-width: 700px) { .team-grid.team-grid-three { grid-template-columns: repeat(3, 1fr); gap: 32px; } } /* Brand logo strip with images */ .brand-strip-img { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: center; justify-items: center; padding: 48px 0; margin-top: 64px; } @media (min-width: 700px) { .brand-strip-img { grid-template-columns: repeat(5, 1fr); gap: 48px; } } .brand-strip-img .brand-chip { padding: 24px 32px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); color: rgba(255,255,255,0.88); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; text-align: center; width: 100%; } /* Real brand logos in strip */ .brand-strip-real .brand-chip { padding: 20px 24px; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; min-height: 80px; transition: background .2s, transform .2s; } .brand-strip-real .brand-chip:hover { background: rgba(255,255,255,1); transform: translateY(-2px); } .brand-strip-real .brand-chip img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; } /* Larger symptom cards with accent */ .symptom-card { padding: 28px 20px; border-radius: var(--radius-md); min-height: 120px; } .symptom-card svg { width: 34px; height: 34px; } /* CTA channels with bigger type */ .cta-channels { gap: 20px; } .cta-channel { padding: 22px 26px; } .cta-channel > svg { width: 28px; height: 28px; } .cta-channel .big-number { font-size: 1.5rem; } /* Anchor offset for sticky header */ section[id] { scroll-margin-top: calc(var(--nav-h) + 20px); } /* ============ AMBIENT EFFECTS ============ */ /* Floating snowflake layer (sits in cool-themed sections) */ .flake-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .flake { position: absolute; top: -40px; color: rgba(255, 255, 255, 0.55); font-size: 14px; animation-name: flakeFall; animation-timing-function: linear; animation-iteration-count: infinite; text-shadow: 0 0 8px rgba(255,255,255,0.3); } .flake:nth-child(1) { left: 5%; animation-duration: 14s; font-size: 18px; animation-delay: 0s; } .flake:nth-child(2) { left: 12%; animation-duration: 18s; font-size: 24px; animation-delay: -3s; } .flake:nth-child(3) { left: 22%; animation-duration: 11s; font-size: 16px; animation-delay: -6s; } .flake:nth-child(4) { left: 30%; animation-duration: 16s; font-size: 20px; animation-delay: -2s; } .flake:nth-child(5) { left: 38%; animation-duration: 13s; font-size: 22px; animation-delay: -8s; } .flake:nth-child(6) { left: 46%; animation-duration: 19s; font-size: 17px; animation-delay: -1s; } .flake:nth-child(7) { left: 54%; animation-duration: 12s; font-size: 21px; animation-delay: -5s; } .flake:nth-child(8) { left: 62%; animation-duration: 17s; font-size: 19px; animation-delay: -9s; } .flake:nth-child(9) { left: 70%; animation-duration: 15s; font-size: 23px; animation-delay: -4s; } .flake:nth-child(10) { left: 78%; animation-duration: 20s; font-size: 18px; animation-delay: -7s; } .flake:nth-child(11) { left: 84%; animation-duration: 13s; font-size: 22px; animation-delay: -2.5s; } .flake:nth-child(12) { left: 90%; animation-duration: 16s; font-size: 20px; animation-delay: -10s; } .flake:nth-child(13) { left: 95%; animation-duration: 14s; font-size: 16px; animation-delay: -6.5s; } .flake:nth-child(14) { left: 8%; animation-duration: 17s; font-size: 24px; animation-delay: -11s; } /* Element-specific styling */ .flake.el-snow { color: rgba(255, 255, 255, 0.85); text-shadow: 0 0 10px rgba(173, 216, 255, 0.6); } .flake.el-fire { filter: drop-shadow(0 0 8px rgba(239, 60, 19, 0.6)); } .flake.el-water { filter: drop-shadow(0 0 8px rgba(100, 180, 255, 0.6)); } .flake.el-bolt { filter: drop-shadow(0 0 10px rgba(255, 220, 60, 0.7)); } /* Default fall — no rotation (water + fire) */ @keyframes flakeFall { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate3d(20px, calc(100vh + 80px), 0); opacity: 0; } } /* Spinning fall — used by snow + bolt */ @keyframes flakeFallSpin { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate3d(20px, calc(100vh + 80px), 0) rotate(720deg); opacity: 0; } } .flake.el-snow, .flake.el-bolt { animation-name: flakeFallSpin; } .flake.el-water, .flake.el-fire { animation-name: flakeFall; } /* Wind streaks (Maintenance hero) — fast curved gusts whooshing across */ .wind-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .wind-streak { position: absolute; height: 2px; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0.4) 90%, transparent 100%); border-radius: 2px; animation-name: windWhoosh; animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); animation-iteration-count: infinite; filter: blur(0.6px); box-shadow: 0 0 8px rgba(255,255,255,0.4); } .wind-streak:nth-child(1) { top: 8%; width: 260px; animation-duration: 2.6s; animation-delay: 0s; opacity: 0.85; height: 2px; } .wind-streak:nth-child(2) { top: 16%; width: 380px; animation-duration: 3.2s; animation-delay: -0.4s; opacity: 0.7; height: 3px; } .wind-streak:nth-child(3) { top: 24%; width: 200px; animation-duration: 2.2s; animation-delay: -1s; opacity: 0.95; height: 1.5px; } .wind-streak:nth-child(4) { top: 33%; width: 320px; animation-duration: 2.8s; animation-delay: -1.6s; opacity: 0.75; height: 2px; } .wind-streak:nth-child(5) { top: 42%; width: 180px; animation-duration: 1.9s; animation-delay: -0.2s; opacity: 0.9; height: 2px; } .wind-streak:nth-child(6) { top: 51%; width: 420px; animation-duration: 3.6s; animation-delay: -2.2s; opacity: 0.65; height: 2.5px; } .wind-streak:nth-child(7) { top: 60%; width: 230px; animation-duration: 2.4s; animation-delay: -0.8s; opacity: 0.85; height: 2px; } .wind-streak:nth-child(8) { top: 69%; width: 300px; animation-duration: 3.0s; animation-delay: -1.4s; opacity: 0.75; height: 1.8px; } .wind-streak:nth-child(9) { top: 78%; width: 250px; animation-duration: 2.6s; animation-delay: -2s; opacity: 0.8; height: 2px; } .wind-streak:nth-child(10) { top: 88%; width: 340px; animation-duration: 3.4s; animation-delay: -0.6s; opacity: 0.65; height: 2.2px; } @keyframes windWhoosh { 0% { transform: translateX(-30%) skewX(-8deg); opacity: 0; } 8% { opacity: var(--wind-opacity, 0.85); } 92% { opacity: var(--wind-opacity, 0.85); } 100% { transform: translateX(110vw) skewX(-8deg); opacity: 0; } } /* Heat-wave ripple (for warm-themed sections — orange/red) */ .heatwave-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .heatwave-layer::before, .heatwave-layer::after { content: ''; position: absolute; bottom: -20%; left: -10%; width: 120%; height: 200%; background: radial-gradient(ellipse at 30% 80%, rgba(239,60,19,0.08), transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(239,60,19,0.06), transparent 55%); animation: heatRipple 8s ease-in-out infinite; } .heatwave-layer::after { animation-delay: -4s; } @keyframes heatRipple { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; } 50% { transform: translateY(-30px) scale(1.08); opacity: 1; } } /* Removed opacity-based scroll reveal (too fragile). Cards keep their hover-lift animation. */ /* Hover tilt on cards */ .pill-card, .review-card, .symptom-card, .stat-card { transition: transform .3s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow .3s; } .pill-card:hover, .review-card:hover { transform: translateY(-8px) rotateX(3deg) rotateY(-1deg); transform-style: preserve-3d; box-shadow: 0 30px 50px -20px rgba(1, 50, 180, 0.35); } /* Animated underline on nav links */ .nav-links a { position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -6px; left: 50%; width: 0; height: 3px; background: var(--red); border-radius: 3px; transition: width .25s, left .25s; } .nav-links a:hover::after, .nav-links a.active::after { width: 80%; left: 10%; } /* Logo gentle bob on hover */ .brand:hover img { transform: translateY(-2px) rotate(-1deg); } /* Button shimmer on hover */ .btn-primary { overflow: hidden; position: relative; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transition: left .7s; } .btn-primary:hover::before { left: 100%; } /* Service row slide-accent on hover */ .service-row { position: relative; } .service-row::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 0; background: var(--red); border-radius: 3px; transition: height .25s; } .service-row:hover::before { height: 60%; } /* Print */ @media print { .mobile-cta-bar, .site-header, .nav-cta, .flake-layer, .heatwave-layer { display: none; } body, a { cursor: auto !important; } }