/* ========================================================= ZELMOR HOUSE CLEANING GLOBAL DESIGN SYSTEM ========================================================= */ /* ========================================================= 01. VARIABLES ========================================================= */ :root { /* ========================================================= FIRST VIEWPORT SYSTEM Topbar + Header + Hero ========================================================= */ --zelmor-topbar-height: 38px; /* * Esta será la altura reservada para el header. * La terminaremos de validar cuando construyamos el nav. */ --zelmor-header-height: 82px; /* * Total ocupado antes del Hero: * 38px + 82px = 120px */ --zelmor-first-fold-offset: calc( var(--zelmor-topbar-height) + var(--zelmor-header-height) ); /* ----------------------------------------- BRAND — COLORS FROM LOGO ----------------------------------------- */ --zelmor-navy-950: #041A38; --zelmor-navy-900: #082442; --zelmor-navy-700: #173F63; --zelmor-pink-600: #E22571; --zelmor-pink-500: #F02A78; --zelmor-pink-100: #F9DCE8; --zelmor-white: #FFFFFF; --zelmor-silver: #CDD0D6; --zelmor-silver-light: #EEF0F2; /* ----------------------------------------- COMPLEMENTARY COLORS ----------------------------------------- */ --zelmor-aqua: #29B7C5; --zelmor-aqua-soft: #DDF4F4; --zelmor-ivory: #F8F5EF; --zelmor-warm-white: #FCFAF7; --zelmor-charcoal: #171E27; --zelmor-slate: #647080; /* ----------------------------------------- RGB VALUES Useful for rgba() ----------------------------------------- */ --zelmor-navy-rgb: 4, 26, 56; --zelmor-pink-rgb: 226, 37, 113; --zelmor-aqua-rgb: 41, 183, 197; --zelmor-white-rgb: 255, 255, 255; /* ----------------------------------------- BACKGROUNDS ----------------------------------------- */ --zelmor-bg-main: #FCFAF7; --zelmor-bg-soft: #F8F5EF; --zelmor-bg-white: #FFFFFF; --zelmor-bg-dark: #041A38; /* ----------------------------------------- TEXT ----------------------------------------- */ --zelmor-text-primary: #171E27; --zelmor-text-secondary: #647080; --zelmor-text-dark: #041A38; --zelmor-text-light: #FFFFFF; /* ----------------------------------------- BORDERS ----------------------------------------- */ --zelmor-border-light: rgba(var(--zelmor-navy-rgb), 0.08); --zelmor-border-medium: rgba(var(--zelmor-navy-rgb), 0.14); --zelmor-border-pink: rgba(var(--zelmor-pink-rgb), 0.24); --zelmor-border-aqua: rgba(var(--zelmor-aqua-rgb), 0.24); /* ----------------------------------------- TYPOGRAPHY ----------------------------------------- */ --zelmor-font-heading: "Instrument Serif", "DM Serif Display", Georgia, "Times New Roman", serif; --zelmor-font-body: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ----------------------------------------- FONT WEIGHTS ----------------------------------------- */ --zelmor-weight-regular: 400; --zelmor-weight-medium: 500; --zelmor-weight-semibold: 600; --zelmor-weight-bold: 700; --zelmor-weight-extrabold: 800; /* ----------------------------------------- BORDER RADIUS ----------------------------------------- */ --zelmor-radius-xs: 8px; --zelmor-radius-sm: 12px; --zelmor-radius-md: 18px; --zelmor-radius-lg: 28px; --zelmor-radius-xl: 40px; --zelmor-radius-pill: 999px; /* ----------------------------------------- SHADOWS ----------------------------------------- */ --zelmor-shadow-xs: 0 4px 14px rgba(var(--zelmor-navy-rgb), 0.05); --zelmor-shadow-sm: 0 8px 24px rgba(var(--zelmor-navy-rgb), 0.08); --zelmor-shadow-md: 0 18px 48px rgba(var(--zelmor-navy-rgb), 0.11); --zelmor-shadow-lg: 0 30px 80px rgba(var(--zelmor-navy-rgb), 0.15); --zelmor-shadow-pink: 0 14px 34px rgba(var(--zelmor-pink-rgb), 0.23); --zelmor-shadow-aqua: 0 14px 34px rgba(var(--zelmor-aqua-rgb), 0.18); /* ----------------------------------------- TRANSITIONS ----------------------------------------- */ --zelmor-ease: cubic-bezier(0.22, 1, 0.36, 1); --zelmor-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --zelmor-transition-fast: 180ms var(--zelmor-ease); --zelmor-transition: 320ms var(--zelmor-ease); --zelmor-transition-slow: 600ms var(--zelmor-ease); /* ----------------------------------------- GLOBAL LAYOUT ----------------------------------------- */ --zelmor-container-max: 1240px; --zelmor-page-gutter: 28px; --zelmor-section-space: 110px; /* * Más adelante ajustaremos este valor * de acuerdo con la altura real del header. */ --zelmor-scroll-offset: 100px; /* ----------------------------------------- GLOBAL Z-INDEX ----------------------------------------- */ --zelmor-z-base: 1; --zelmor-z-content: 10; --zelmor-z-header: 1000; --zelmor-z-menu: 3000; --zelmor-z-modal: 6000; --zelmor-z-transition: 100000; /* Real height measured by topbar.js */ --zelmor-topbar-live-height: var(--zelmor-topbar-height); } /* ========================================================= 02. RESET ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { width: 100%; min-height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { width: 100%; min-height: 100vh; min-height: 100svh; margin: 0; overflow-x: hidden; font-family: var(--zelmor-font-body); font-size: 16px; font-weight: var(--zelmor-weight-regular); line-height: 1.65; color: var(--zelmor-text-primary); background-color: var(--zelmor-bg-main); background-image: radial-gradient( circle at 4% 8%, rgba(var(--zelmor-pink-rgb), 0.055) 0, transparent 28rem ), radial-gradient( circle at 96% 18%, rgba(var(--zelmor-aqua-rgb), 0.06) 0, transparent 30rem ), linear-gradient( 180deg, var(--zelmor-warm-white) 0%, var(--zelmor-ivory) 100% ); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.zelmor-is-leaving { overflow: hidden; } /* ========================================================= 03. GLOBAL ELEMENTS ========================================================= */ main { position: relative; z-index: var(--zelmor-z-base); } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, textarea, select { font: inherit; } button { color: inherit; } a { color: inherit; text-decoration: none; } p, h1, h2, h3, h4, h5, h6 { margin-top: 0; } p:last-child { margin-bottom: 0; } ul, ol { margin-top: 0; } ::selection { color: var(--zelmor-white); background: var(--zelmor-pink-600); } ::-moz-selection { color: var(--zelmor-white); background: var(--zelmor-pink-600); } /* ========================================================= 04. HEADINGS ========================================================= */ h1, h2, h3, h4, h5, h6 { color: var(--zelmor-text-dark); font-family: var(--zelmor-font-heading); font-weight: var(--zelmor-weight-regular); line-height: 1.05; text-wrap: balance; } h1 { font-size: clamp(3rem, 7vw, 6.7rem); } h2 { font-size: clamp(2.5rem, 5vw, 4.8rem); } h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); } p { color: var(--zelmor-text-secondary); text-wrap: pretty; } /* ========================================================= 05. ACCESSIBLE FOCUS ========================================================= */ :focus { outline: none; } :focus-visible { outline: 3px solid rgba(var(--zelmor-aqua-rgb), 0.55); outline-offset: 4px; } /* ========================================================= 06. GLOBAL CONTAINER ========================================================= */ .zelmor-container { width: min( calc(100% - (var(--zelmor-page-gutter) * 2)), var(--zelmor-container-max) ); margin-inline: auto; } .zelmor-section { position: relative; padding-top: var(--zelmor-section-space); padding-bottom: var(--zelmor-section-space); scroll-margin-top: var(--zelmor-scroll-offset); } /* Elements with an ID that can receive anchor navigation */ section[id], div[id] { scroll-margin-top: var(--zelmor-scroll-offset); } /* ========================================================= 07. GLOBAL BUTTON SYSTEM ========================================================= */ .zelmor-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 13px 24px; overflow: hidden; border: 1px solid transparent; border-radius: var(--zelmor-radius-pill); font-size: 0.94rem; font-weight: var(--zelmor-weight-bold); line-height: 1; cursor: pointer; isolation: isolate; transition: transform var(--zelmor-transition), box-shadow var(--zelmor-transition), color var(--zelmor-transition), background-color var(--zelmor-transition), border-color var(--zelmor-transition); } .zelmor-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transform: scaleX(0.4); transform-origin: center; border-radius: inherit; transition: transform var(--zelmor-transition), opacity var(--zelmor-transition); } .zelmor-btn:hover { transform: translateY(-3px); } .zelmor-btn:hover::before { opacity: 1; transform: scaleX(1); } .zelmor-btn:active { transform: translateY(-1px); } /* Primary */ .zelmor-btn--primary { color: var(--zelmor-white); background: var(--zelmor-pink-600); box-shadow: var(--zelmor-shadow-pink); } .zelmor-btn--primary::before { background: var(--zelmor-navy-950); } .zelmor-btn--primary:hover { box-shadow: 0 18px 42px rgba(var(--zelmor-pink-rgb), 0.28); } /* Dark */ .zelmor-btn--dark { color: var(--zelmor-white); background: var(--zelmor-navy-950); box-shadow: var(--zelmor-shadow-md); } .zelmor-btn--dark::before { background: var(--zelmor-pink-600); } /* Outline */ .zelmor-btn--outline { color: var(--zelmor-navy-950); border-color: rgba(var(--zelmor-navy-rgb), 0.18); background: rgba(var(--zelmor-white-rgb), 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .zelmor-btn--outline::before { background: var(--zelmor-navy-950); } .zelmor-btn--outline:hover { color: var(--zelmor-white); border-color: var(--zelmor-navy-950); box-shadow: var(--zelmor-shadow-sm); } /* ========================================================= 08. COMMON SURFACE ========================================================= */ .zelmor-surface { border: 1px solid var(--zelmor-border-light); border-radius: var(--zelmor-radius-lg); background: rgba(var(--zelmor-white-rgb), 0.78); box-shadow: var(--zelmor-shadow-sm); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ========================================================= 09. BODY SCROLLBAR ========================================================= */ /* Firefox */ html { scrollbar-width: thin; scrollbar-color: var(--zelmor-pink-600) var(--zelmor-navy-950); } /* Chromium / Edge / Safari */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--zelmor-navy-950); } ::-webkit-scrollbar-thumb { min-height: 50px; border: 3px solid var(--zelmor-navy-950); border-radius: var(--zelmor-radius-pill); background: var(--zelmor-pink-600); } ::-webkit-scrollbar-thumb:hover { background: var(--zelmor-pink-500); } ::-webkit-scrollbar-corner { background: var(--zelmor-navy-950); } /* ========================================================= 10. PAGE TRANSITION ========================================================= */ .zelmor-page-transition { position: fixed; inset: 0; z-index: var(--zelmor-z-transition); display: grid; place-items: center; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; visibility: hidden; pointer-events: none; transform: translate3d(0, 100%, 0); background: var(--zelmor-navy-950); will-change: transform; transition: transform 520ms var(--zelmor-ease), visibility 0s linear 520ms; } /* Pink ambient shape */ .zelmor-page-transition::before { content: ""; position: absolute; top: -22vw; right: -14vw; width: min(58vw, 780px); aspect-ratio: 1; border-radius: 50%; background: rgba(var(--zelmor-pink-rgb), 0.16); filter: blur(2px); } /* Aqua accent */ .zelmor-page-transition::after { content: ""; position: absolute; left: -8vw; bottom: -32vw; width: min(60vw, 760px); aspect-ratio: 1; border: 1px solid rgba(var(--zelmor-aqua-rgb), 0.2); border-radius: 50%; box-shadow: 0 0 0 34px rgba(var(--zelmor-aqua-rgb), 0.025), 0 0 0 76px rgba(var(--zelmor-aqua-rgb), 0.018); } /* Leaving current page */ .zelmor-page-transition.is-active { visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); transition: transform 520ms var(--zelmor-ease), visibility 0s linear 0s; } /* Transition branding */ .zelmor-page-transition__content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--zelmor-white); opacity: 0; transform: translateY(16px); transition: opacity 280ms var(--zelmor-ease), transform 400ms var(--zelmor-ease); } .zelmor-page-transition.is-active .zelmor-page-transition__content { opacity: 1; transform: translateY(0); } .zelmor-page-transition__name { font-family: var(--zelmor-font-heading); font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 0.9; letter-spacing: -0.02em; } .zelmor-page-transition__line { width: 54px; height: 3px; border-radius: var(--zelmor-radius-pill); background: var(--zelmor-pink-500); } .zelmor-page-transition__label { font-size: 0.68rem; font-weight: var(--zelmor-weight-bold); letter-spacing: 0.25em; text-transform: uppercase; color: rgba(var(--zelmor-white-rgb), 0.65); } /* ========================================================= 11. ARRIVAL TRANSITION Used after navigating to another internal page. ========================================================= */ html.zelmor-page-arriving .zelmor-page-transition { visibility: visible; pointer-events: none; transform: translate3d(0, 0, 0); animation: zelmor-page-arrive 720ms var(--zelmor-ease) 80ms both; } html.zelmor-page-arriving .zelmor-page-transition__content { opacity: 1; transform: translateY(0); animation: zelmor-transition-content-out 420ms var(--zelmor-ease) both; } /* * This state is used by JS to instantly clean a * transition when a page is restored from bfcache. * * IMPORTANT: * no animation is allowed here. */ .zelmor-page-transition.is-resetting { visibility: hidden !important; pointer-events: none !important; transform: translate3d(0, 100%, 0) !important; animation: none !important; transition: none !important; } @keyframes zelmor-page-arrive { 0% { visibility: visible; transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(0, -100%, 0); } } @keyframes zelmor-transition-content-out { 0%, 30% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-12px); } } /* ========================================================= 12. SMALL SCROLL FEEDBACK Applied through the Web Animations API. ========================================================= */ [data-zelmor-scroll-target] { scroll-margin-top: var(--zelmor-scroll-offset); } /* ========================================================= 13. RESPONSIVE EXACTLY FOUR LAYOUT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- 1. COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { :root { --zelmor-container-max: 1240px; --zelmor-page-gutter: 34px; --zelmor-section-space: 112px; --zelmor-scroll-offset: 104px; } } /* --------------------------------------------------------- 2. TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { :root { --zelmor-page-gutter: 28px; --zelmor-section-space: 92px; --zelmor-scroll-offset: 92px; } .zelmor-btn { min-height: 52px; padding-inline: 22px; } } /* --------------------------------------------------------- 3. MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { :root { --zelmor-page-gutter: 22px; --zelmor-section-space: 74px; --zelmor-scroll-offset: 82px; } body { font-size: 15.5px; } .zelmor-btn { min-height: 50px; padding: 12px 20px; } ::-webkit-scrollbar { width: 8px; } } /* --------------------------------------------------------- 4. SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { :root { --zelmor-page-gutter: 18px; --zelmor-section-space: 64px; --zelmor-scroll-offset: 76px; } body { font-size: 15px; background-image: radial-gradient( circle at 5% 5%, rgba(var(--zelmor-pink-rgb), 0.045), transparent 20rem ), radial-gradient( circle at 100% 20%, rgba(var(--zelmor-aqua-rgb), 0.045), transparent 22rem ), linear-gradient( 180deg, var(--zelmor-warm-white), var(--zelmor-ivory) ); } .zelmor-btn { min-height: 49px; padding: 12px 18px; font-size: 0.88rem; } ::-webkit-scrollbar { width: 7px; } } /* ========================================================= 14. REDUCED MOTION ACCESSIBILITY QUERY — NOT A LAYOUT BREAKPOINT ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .zelmor-page-transition, .zelmor-page-transition.is-active, html.zelmor-page-arriving .zelmor-page-transition { visibility: hidden !important; pointer-events: none !important; transform: translate3d(0, 100%, 0) !important; animation: none !important; transition: none !important; } .zelmor-btn:hover { transform: none; } } /* ========================================================= ZELMOR HOUSE CLEANING TOP INFORMATION BAR ========================================================= */ /* ========================================================= 01. TOPBAR ========================================================= */ .zelmor-topbar { position: relative; z-index: 1100; width: 100%; height: var(--zelmor-topbar-height); /* * IMPORTANT: * The topbar deliberately remains in normal document flow. * * No fixed. * No sticky. * No transform. * No overflow hidden on a parent wrapper. */ color: var(--zelmor-white); background-color: var(--zelmor-navy-950); border-bottom: 1px solid rgba(var(--zelmor-pink-rgb), 0.42); } /* Decorative line */ .zelmor-topbar::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: min(440px, 42vw); height: 1px; transform: translateX(-50%); pointer-events: none; background-color: var(--zelmor-pink-500); opacity: 0.68; } /* ========================================================= 02. INNER ========================================================= */ .zelmor-topbar__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; height: 100%; } /* ========================================================= 03. COMMON ITEMS ========================================================= */ .zelmor-topbar__item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: rgba( var(--zelmor-white-rgb), 0.78 ); font-size: 0.74rem; font-weight: var(--zelmor-weight-semibold); letter-spacing: 0.02em; white-space: nowrap; } .zelmor-topbar__item--area { justify-self: start; } .zelmor-topbar__item--hours { justify-self: center; } /* ========================================================= 04. LOCATION ICON ========================================================= */ .zelmor-topbar__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; color: var(--zelmor-aqua); } .zelmor-topbar__icon svg { width: 16px; height: 16px; } /* ========================================================= 05. STATUS DOT ========================================================= */ .zelmor-topbar__dot { position: relative; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background-color: var(--zelmor-aqua); box-shadow: 0 0 0 4px rgba(var(--zelmor-aqua-rgb), 0.09); } /* ========================================================= 06. TEXT ========================================================= */ .zelmor-topbar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zelmor-topbar__text--mobile { display: none; } /* ========================================================= 07. PHONE ========================================================= */ .zelmor-topbar__phone { justify-self: end; display: inline-flex; align-items: center; gap: 7px; height: 100%; padding-inline: 3px; color: var(--zelmor-white); white-space: nowrap; transition: color var(--zelmor-transition-fast); } .zelmor-topbar__phone-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.44); border-radius: 50%; color: var(--zelmor-white); background-color: rgba(var(--zelmor-pink-rgb), 0.17); transition: background-color var(--zelmor-transition), border-color var(--zelmor-transition), color var(--zelmor-transition); } .zelmor-topbar__phone-icon svg { width: 14px; height: 14px; } .zelmor-topbar__phone-label { color: rgba( var(--zelmor-white-rgb), 0.58 ); font-size: 0.68rem; font-weight: var(--zelmor-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; } .zelmor-topbar__phone-number { color: var(--zelmor-white); font-size: 0.79rem; font-weight: var(--zelmor-weight-bold); letter-spacing: 0.025em; } /* ========================================================= 08. DESKTOP HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { .zelmor-topbar__phone:hover { color: var(--zelmor-pink-100); } .zelmor-topbar__phone:hover .zelmor-topbar__phone-icon { color: var(--zelmor-white); border-color: var(--zelmor-pink-500); background-color: var(--zelmor-pink-600); } } /* ========================================================= 09. RESPONSIVE ONLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { :root { --zelmor-topbar-height: 38px; --zelmor-header-height: 82px; } .zelmor-topbar__inner { gap: 30px; } .zelmor-topbar__item { font-size: 0.75rem; } .zelmor-topbar__phone-number { font-size: 0.8rem; } } /* --------------------------------------------------------- TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { :root { --zelmor-topbar-height: 36px; --zelmor-header-height: 76px; } .zelmor-topbar__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; } .zelmor-topbar__item { font-size: 0.69rem; } .zelmor-topbar__phone-label { display: none; } .zelmor-topbar__phone-number { font-size: 0.75rem; } .zelmor-topbar__phone-icon { width: 23px; height: 23px; } } /* --------------------------------------------------------- MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { :root { --zelmor-topbar-height: 34px; --zelmor-header-height: 70px; } .zelmor-topbar__inner { grid-template-columns: 1fr auto; gap: 14px; } /* * Remove the least important piece of information * instead of forcing the row to wrap. */ .zelmor-topbar__item--area { display: none; } .zelmor-topbar__item--hours { justify-self: start; font-size: 0.68rem; } .zelmor-topbar__text--desktop { display: none; } .zelmor-topbar__text--mobile { display: inline; } .zelmor-topbar__phone { justify-self: end; gap: 6px; } .zelmor-topbar__phone-label { display: none; } .zelmor-topbar__phone-number { font-size: 0.72rem; } .zelmor-topbar__phone-icon { width: 22px; height: 22px; } .zelmor-topbar__phone-icon svg { width: 12px; height: 12px; } .zelmor-topbar::after { width: 44%; } } /* --------------------------------------------------------- SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { :root { --zelmor-topbar-height: 32px; --zelmor-header-height: 66px; } .zelmor-topbar__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .zelmor-topbar__item--area { display: none; } .zelmor-topbar__item--hours { justify-self: start; gap: 6px; font-size: 0.63rem; letter-spacing: 0; } .zelmor-topbar__text--desktop { display: none; } .zelmor-topbar__text--mobile { display: inline; } .zelmor-topbar__dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(var(--zelmor-aqua-rgb), 0.08); } .zelmor-topbar__phone { justify-self: end; gap: 5px; } .zelmor-topbar__phone-label { display: none; } .zelmor-topbar__phone-number { font-size: 0.67rem; letter-spacing: 0; } .zelmor-topbar__phone-icon { width: 20px; height: 20px; } .zelmor-topbar__phone-icon svg { width: 11px; height: 11px; } .zelmor-topbar::after { width: 38%; } } /* ========================================================= 10. REDUCED MOTION NOT A LAYOUT BREAKPOINT ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-topbar__phone, .zelmor-topbar__phone-icon { transition: none; } } /* ========================================================= ZELMOR HOUSE CLEANING 02. HEADER / NAVIGATION ========================================================= */ /* ========================================================= 01. HEADER SLOT This element ALWAYS stays in document flow. It reserves the exact header height even after JavaScript changes the real header to position: fixed. This is what prevents layout jumps. ========================================================= */ .zelmor-header-slot { position: relative; z-index: 1200; width: 100%; height: var(--zelmor-header-height); background-color: var(--zelmor-warm-white); } /* ========================================================= 02. HEADER ========================================================= */ .zelmor-header { position: relative; z-index: 1300; width: 100%; height: var(--zelmor-header-height); border-bottom: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); background-color: rgba(252, 250, 247, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background-color var(--zelmor-transition), border-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } /* * IMPORTANT: * We DO NOT use position: sticky. * * JavaScript adds this class only when the * original header slot reaches the viewport top. */ .zelmor-header.is-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: var(--zelmor-z-header); width: 100%; border-bottom-color: rgba(var(--zelmor-navy-rgb), 0.11); background-color: rgba(252, 250, 247, 0.97); box-shadow: 0 10px 34px rgba(var(--zelmor-navy-rgb), 0.09); } /* ========================================================= 03. INNER ========================================================= */ .zelmor-header__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; height: 100%; } /* ========================================================= 04. LOGO ========================================================= */ .zelmor-header__logo { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 66px; height: 66px; padding: 2px; overflow: hidden; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.07); border-radius: 19px; background-color: var(--zelmor-white); box-shadow: 0 8px 24px rgba(var(--zelmor-navy-rgb), 0.08); transition: border-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-header__logo img { width: 100%; height: 100%; object-fit: contain; } .zelmor-header__logo:hover { border-color: rgba(var(--zelmor-pink-rgb), 0.22); box-shadow: 0 10px 30px rgba(var(--zelmor-navy-rgb), 0.12); } /* ========================================================= 05. DESKTOP NAV ========================================================= */ .zelmor-header__nav { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2vw, 34px); min-width: 0; } .zelmor-header__nav-link { position: relative; display: inline-flex; align-items: center; height: 42px; color: var(--zelmor-navy-950); font-size: 0.83rem; font-weight: var(--zelmor-weight-semibold); letter-spacing: -0.01em; white-space: nowrap; transition: color var(--zelmor-transition-fast); } .zelmor-header__nav-link::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background-color: var(--zelmor-pink-600); opacity: 0; transform: translateX(-50%) scale(0.25); transition: opacity var(--zelmor-transition), transform var(--zelmor-transition); } .zelmor-header__nav-link:hover { color: var(--zelmor-pink-600); } .zelmor-header__nav-link:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } /* ========================================================= 06. FREE ESTIMATE CTA ========================================================= */ .zelmor-header__estimate { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 6px 7px 6px 20px; overflow: hidden; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.2); border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background-color: var(--zelmor-pink-600); box-shadow: 0 10px 28px rgba(var(--zelmor-pink-rgb), 0.22); font-size: 0.8rem; font-weight: var(--zelmor-weight-bold); white-space: nowrap; isolation: isolate; transition: background-color var(--zelmor-transition), border-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-header__estimate::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--zelmor-navy-950); opacity: 0; transition: opacity var(--zelmor-transition); } .zelmor-header__estimate:hover::before { opacity: 1; } .zelmor-header__estimate:hover { border-color: rgba(var(--zelmor-navy-rgb), 0.16); box-shadow: 0 14px 34px rgba(var(--zelmor-navy-rgb), 0.18); } .zelmor-header__estimate-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 35px; height: 35px; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-white); } .zelmor-header__estimate-icon svg { width: 17px; height: 17px; } /* ========================================================= 07. HAMBURGER Hidden on desktop by default. ========================================================= */ .zelmor-header__menu-button { display: none; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; padding: 0; border: 0; color: var(--zelmor-navy-950); background: transparent; cursor: pointer; } .zelmor-header__menu-icon { display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: 0 0 auto; width: 40px; height: 40px; padding-inline: 10px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.1); border-radius: 13px; background-color: rgba(var(--zelmor-white-rgb), 0.8); box-shadow: var(--zelmor-shadow-xs); } .zelmor-header__menu-icon span { display: block; height: 2px; border-radius: var(--zelmor-radius-pill); background-color: var(--zelmor-navy-950); transition: width var(--zelmor-transition); } .zelmor-header__menu-icon span:first-child { width: 100%; } .zelmor-header__menu-icon span:last-child { width: 65%; } .zelmor-header__menu-button:hover .zelmor-header__menu-icon span:last-child { width: 100%; } .zelmor-header__menu-label { font-size: 0.72rem; font-weight: var(--zelmor-weight-bold); letter-spacing: 0.02em; } /* ========================================================= 08. FULLSCREEN MOBILE MENU Critical architecture: - position: fixed - direct body-level sibling - NOT inside Hero - NOT inside header-slot - NOT dependent on header positioning ========================================================= */ .zelmor-mobile-menu { position: fixed; inset: 0; z-index: var(--zelmor-z-menu); width: 100%; height: 100vh; height: 100dvh; overflow: hidden; visibility: hidden; pointer-events: none; opacity: 0; color: var(--zelmor-white); background-color: var(--zelmor-navy-950); transition: opacity 380ms var(--zelmor-ease), visibility 0s linear 380ms; } .zelmor-mobile-menu.is-open { visibility: visible; pointer-events: auto; opacity: 1; transition: opacity 380ms var(--zelmor-ease), visibility 0s linear 0s; } /* ========================================================= 09. MOBILE DECORATION ========================================================= */ .zelmor-mobile-menu__orb { position: absolute; display: block; pointer-events: none; border-radius: 50%; } .zelmor-mobile-menu__orb--pink { top: -180px; right: -130px; width: 420px; height: 420px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.25); box-shadow: 0 0 0 38px rgba(var(--zelmor-pink-rgb), 0.035), 0 0 0 82px rgba(var(--zelmor-pink-rgb), 0.02); } .zelmor-mobile-menu__orb--aqua { left: -130px; bottom: -190px; width: 380px; height: 380px; background-color: rgba(var(--zelmor-aqua-rgb), 0.05); } /* ========================================================= 10. MOBILE MENU INNER ========================================================= */ .zelmor-mobile-menu__inner { position: relative; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min( calc(100% - 40px), 700px ); height: 100%; margin-inline: auto; padding: max(18px, env(safe-area-inset-top)) 0 max(22px, env(safe-area-inset-bottom)); } /* ========================================================= 11. MOBILE MENU HEADER ========================================================= */ .zelmor-mobile-menu__header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 66px; } .zelmor-mobile-menu__close { position: relative; justify-self: start; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(var(--zelmor-white-rgb), 0.14); border-radius: 14px; color: var(--zelmor-white); background-color: rgba(var(--zelmor-white-rgb), 0.055); cursor: pointer; transition: background-color var(--zelmor-transition), border-color var(--zelmor-transition); } .zelmor-mobile-menu__close:hover { border-color: rgba(var(--zelmor-pink-rgb), 0.4); background-color: rgba(var(--zelmor-pink-rgb), 0.15); } .zelmor-mobile-menu__close span { position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; border-radius: 999px; background-color: currentColor; } .zelmor-mobile-menu__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .zelmor-mobile-menu__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .zelmor-mobile-menu__logo { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; padding: 2px; overflow: hidden; border-radius: 17px; background-color: var(--zelmor-white); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); } .zelmor-mobile-menu__logo img { width: 100%; height: 100%; object-fit: contain; } .zelmor-mobile-menu__spacer { display: block; width: 44px; justify-self: end; } /* ========================================================= 12. MOBILE LINKS ========================================================= */ .zelmor-mobile-menu__nav { display: flex; flex-direction: column; justify-content: center; padding-block: 22px; } .zelmor-mobile-menu__link { display: grid; grid-template-columns: 38px 1fr; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(var(--zelmor-white-rgb), 0.085); color: var(--zelmor-white); font-family: var(--zelmor-font-heading); font-size: clamp(2rem, 7vw, 3.4rem); font-weight: var(--zelmor-weight-regular); line-height: 1; transition: color var(--zelmor-transition), padding-left var(--zelmor-transition); } .zelmor-mobile-menu__number { color: rgba(var(--zelmor-aqua-rgb), 0.8); font-family: var(--zelmor-font-body); font-size: 0.62rem; font-weight: var(--zelmor-weight-bold); letter-spacing: 0.12em; } .zelmor-mobile-menu__link:hover { padding-left: 6px; color: var(--zelmor-pink-100); } /* ========================================================= 13. MOBILE MENU FOOTER ========================================================= */ .zelmor-mobile-menu__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding-top: 18px; border-top: 1px solid rgba(var(--zelmor-white-rgb), 0.1); } .zelmor-mobile-menu__info { display: flex; flex-direction: column; gap: 4px; } .zelmor-mobile-menu__eyebrow { color: rgba(var(--zelmor-white-rgb), 0.47); font-size: 0.62rem; font-weight: var(--zelmor-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; } .zelmor-mobile-menu__phone { color: var(--zelmor-white); font-size: 1rem; font-weight: var(--zelmor-weight-bold); } .zelmor-mobile-menu__hours { color: rgba(var(--zelmor-white-rgb), 0.57); font-size: 0.68rem; } .zelmor-mobile-menu__estimate { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 18px; border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background-color: var(--zelmor-pink-600); box-shadow: 0 14px 34px rgba(var(--zelmor-pink-rgb), 0.22); font-size: 0.76rem; font-weight: var(--zelmor-weight-bold); white-space: nowrap; } /* ========================================================= 14. BODY MENU STATE ========================================================= */ body.zelmor-menu-open { overscroll-behavior: none; } /* ========================================================= 15. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- 1. COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { :root { --zelmor-header-height: 82px; } .zelmor-header__menu-button { display: none; } .zelmor-header__logo { width: 66px; height: 66px; } .zelmor-header__nav { display: flex; } .zelmor-header__estimate { min-height: 48px; } /* * Mobile overlay is never part of desktop layout. */ .zelmor-mobile-menu { display: none; } } /* --------------------------------------------------------- 2. TABLET / SMALL LAPTOP 768px — 1199px Responsive nav: hamburger | logo | free estimate --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { :root { --zelmor-header-height: 76px; } .zelmor-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; } .zelmor-header__menu-button { display: inline-flex; justify-self: start; } .zelmor-header__nav { display: none; } .zelmor-header__logo { justify-self: center; width: 62px; height: 62px; border-radius: 18px; } .zelmor-header__estimate { justify-self: end; min-height: 44px; padding: 5px 6px 5px 17px; } .zelmor-header__estimate-icon { width: 32px; height: 32px; } .zelmor-mobile-menu__inner { width: min( calc(100% - 56px), 680px ); } } /* --------------------------------------------------------- 3. MOBILE 481px — 767px hamburger | larger logo | Free Estimate --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { :root { --zelmor-header-height: 70px; } .zelmor-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; } .zelmor-header__menu-button { display: inline-flex; justify-self: start; } .zelmor-header__menu-label { display: none; } .zelmor-header__menu-icon { width: 41px; height: 41px; padding-inline: 10px; } .zelmor-header__nav { display: none; } /* * Logo intentionally larger than the * hamburger and CTA icon. */ .zelmor-header__logo { justify-self: center; width: 58px; height: 58px; border-radius: 17px; } .zelmor-header__estimate { justify-self: end; gap: 7px; min-height: 42px; padding: 5px 5px 5px 14px; font-size: 0.72rem; } .zelmor-header__estimate-icon { width: 30px; height: 30px; } .zelmor-header__estimate-icon svg { width: 15px; height: 15px; } .zelmor-mobile-menu__inner { width: calc(100% - 44px); } .zelmor-mobile-menu__link { padding-block: 11px; } .zelmor-mobile-menu__footer { gap: 14px; } } /* --------------------------------------------------------- 4. SMALL MOBILE <= 480px hamburger | larger logo | Free Estimate --------------------------------------------------------- */ @media (max-width: 480px) { :root { --zelmor-header-height: 66px; } .zelmor-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; } .zelmor-header__menu-button { display: inline-flex; justify-self: start; } .zelmor-header__menu-label { display: none; } .zelmor-header__menu-icon { width: 39px; height: 39px; padding-inline: 9px; border-radius: 12px; } .zelmor-header__nav { display: none; } .zelmor-header__logo { justify-self: center; width: 54px; height: 54px; border-radius: 16px; } .zelmor-header__estimate { justify-self: end; gap: 5px; min-height: 40px; padding: 4px 4px 4px 11px; font-size: 0.67rem; letter-spacing: -0.015em; } .zelmor-header__estimate-icon { width: 29px; height: 29px; } .zelmor-header__estimate-icon svg { width: 14px; height: 14px; } .zelmor-mobile-menu__inner { width: calc(100% - 36px); padding-top: max( 14px, env(safe-area-inset-top) ); } .zelmor-mobile-menu__header { min-height: 58px; } .zelmor-mobile-menu__logo { width: 55px; height: 55px; } .zelmor-mobile-menu__close { width: 40px; height: 40px; } .zelmor-mobile-menu__spacer { width: 40px; } .zelmor-mobile-menu__nav { padding-block: 12px; } .zelmor-mobile-menu__link { grid-template-columns: 30px 1fr; gap: 9px; padding-block: 9px; font-size: clamp( 1.75rem, 8vw, 2.45rem ); } .zelmor-mobile-menu__number { font-size: 0.54rem; } .zelmor-mobile-menu__footer { align-items: stretch; flex-direction: column; gap: 13px; padding-top: 13px; } .zelmor-mobile-menu__hours { font-size: 0.62rem; } .zelmor-mobile-menu__estimate { width: 100%; min-height: 43px; } } /* ========================================================= REDUCED MOTION Accessibility — not a layout breakpoint ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-header, .zelmor-header__logo, .zelmor-header__nav-link, .zelmor-header__nav-link::after, .zelmor-header__estimate, .zelmor-header__estimate::before, .zelmor-header__menu-icon span, .zelmor-mobile-menu, .zelmor-mobile-menu__link { transition: none !important; } } /* ========================================================= ZELMOR HOUSE CLEANING 03. HERO ========================================================= */ /* ========================================================= 01. HERO SHELL ========================================================= */ .zelmor-hero { position: relative; isolation: isolate; width: 100%; /* * CRITICAL FIRST-FOLD RULE * * Topbar + Header + Hero = 100vh / 100svh * * We use an exact height instead of adding * an arbitrary min-height that could break the rule. */ height: calc( 100vh - var( --zelmor-topbar-live-height, var(--zelmor-topbar-height) ) - var(--zelmor-header-height) ); height: calc( 100svh - var( --zelmor-topbar-live-height, var(--zelmor-topbar-height) ) - var(--zelmor-header-height) ); overflow: clip; color: var(--zelmor-white); background-color: var(--zelmor-navy-950); } /* ========================================================= 02. PARALLAX MEDIA ========================================================= */ .zelmor-hero__media { --zelmor-hero-parallax-y: 0px; position: absolute; /* * Extra room is intentional. * It prevents empty edges when the image moves * during the parallax animation. */ inset: -8% -3%; z-index: -4; overflow: hidden; pointer-events: none; transform: translate3d( 0, var(--zelmor-hero-parallax-y), 0 ) scale(1.08); transform-origin: center center; will-change: transform; } .zelmor-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; pointer-events: none; } /* ========================================================= 03. IMAGE OVERLAY Stronger on the left so text remains readable. The right keeps more photography visible. ========================================================= */ .zelmor-hero__overlay { position: absolute; inset: 0; z-index: -3; pointer-events: none; background: linear-gradient( 90deg, rgba(var(--zelmor-navy-rgb), 0.96) 0%, rgba(var(--zelmor-navy-rgb), 0.89) 34%, rgba(var(--zelmor-navy-rgb), 0.61) 62%, rgba(var(--zelmor-navy-rgb), 0.27) 100% ); } /* ========================================================= 04. AMBIENT BRAND LIGHT ========================================================= */ .zelmor-hero__ambient { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .zelmor-hero__ambient::before { content: ""; position: absolute; left: -180px; bottom: -260px; width: 520px; height: 520px; border-radius: 50%; background: rgba(var(--zelmor-pink-rgb), 0.13); filter: blur(2px); } .zelmor-hero__ambient::after { content: ""; position: absolute; right: 8%; top: 12%; width: 210px; height: 210px; border: 1px solid rgba(var(--zelmor-aqua-rgb), 0.22); border-radius: 50%; box-shadow: 0 0 0 34px rgba(var(--zelmor-aqua-rgb), 0.025), 0 0 0 70px rgba(var(--zelmor-aqua-rgb), 0.015); } /* ========================================================= 05. INNER LAYOUT ========================================================= */ .zelmor-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.55fr); align-items: center; gap: clamp(40px, 6vw, 90px); height: 100%; padding-top: 32px; padding-bottom: 38px; } /* ========================================================= 06. CONTENT ========================================================= */ .zelmor-hero__content { width: min(100%, 760px); } /* ========================================================= 07. EYEBROW ========================================================= */ .zelmor-hero__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: fit-content; margin-bottom: 20px; color: rgba( var(--zelmor-white-rgb), 0.9 ); font-size: 0.94rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.025em; } .zelmor-hero__eyebrow-mark { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid rgba(var(--zelmor-aqua-rgb), 0.38); border-radius: 50%; background: rgba(var(--zelmor-aqua-rgb), 0.11); } .zelmor-hero__eyebrow-mark span { width: 7px; height: 7px; border-radius: 50%; background-color: var(--zelmor-aqua); box-shadow: 0 0 0 4px rgba(var(--zelmor-aqua-rgb), 0.1); } .zelmor-hero__eyebrow-location { display: inline-flex; align-items: center; min-height: 30px; padding-inline: 11px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.14); border-radius: var(--zelmor-radius-pill); color: var(--zelmor-pink-100); background: rgba(var(--zelmor-white-rgb), 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ========================================================= 08. TITLE ========================================================= */ .zelmor-hero__title { max-width: 760px; margin-bottom: 22px; color: var(--zelmor-white); font-family: var(--zelmor-font-heading); font-size: clamp( 3.7rem, 6vw, 6.3rem ); font-weight: var(--zelmor-weight-regular); line-height: 0.93; letter-spacing: -0.04em; text-wrap: balance; } .zelmor-hero__title span { display: block; color: var(--zelmor-pink-100); } /* ========================================================= 09. DESCRIPTION ========================================================= */ .zelmor-hero__description { max-width: 620px; margin-bottom: 28px; color: rgba( var(--zelmor-white-rgb), 0.79 ); font-size: clamp( 1.05rem, 1.25vw, 1.17rem ); font-weight: var(--zelmor-weight-regular); line-height: 1.65; text-wrap: pretty; } /* ========================================================= 10. ACTIONS ========================================================= */ .zelmor-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-bottom: 26px; } .zelmor-hero__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; border-radius: var(--zelmor-radius-pill); font-size: 0.94rem; font-weight: var(--zelmor-weight-bold); line-height: 1.2; transition: background-color var(--zelmor-transition), border-color var(--zelmor-transition), color var(--zelmor-transition), box-shadow var(--zelmor-transition); } /* Primary */ .zelmor-hero__cta--primary { gap: 13px; padding: 6px 7px 6px 22px; color: var(--zelmor-white); background-color: var(--zelmor-pink-600); border: 1px solid rgba(var(--zelmor-pink-rgb), 0.3); box-shadow: 0 14px 36px rgba(var(--zelmor-pink-rgb), 0.27); } .zelmor-hero__cta--primary:hover { background-color: var(--zelmor-pink-500); box-shadow: 0 18px 42px rgba(var(--zelmor-pink-rgb), 0.33); } .zelmor-hero__cta-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; color: var(--zelmor-navy-950); background: var(--zelmor-white); transition: transform var(--zelmor-transition); } .zelmor-hero__cta--primary:hover .zelmor-hero__cta-icon { transform: rotate(7deg); } .zelmor-hero__cta-icon svg { width: 19px; height: 19px; } /* Call CTA */ .zelmor-hero__cta--call { gap: 11px; padding: 7px 18px 7px 8px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.17); color: var(--zelmor-white); background: rgba(var(--zelmor-white-rgb), 0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .zelmor-hero__cta--call:hover { border-color: rgba(var(--zelmor-aqua-rgb), 0.35); background: rgba(var(--zelmor-white-rgb), 0.11); } .zelmor-hero__call-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 41px; height: 41px; border-radius: 50%; color: var(--zelmor-aqua); background: rgba(var(--zelmor-aqua-rgb), 0.1); } .zelmor-hero__call-icon svg { width: 19px; height: 19px; } .zelmor-hero__call-content { display: flex; flex-direction: column; gap: 1px; text-align: left; } .zelmor-hero__call-content small { color: rgba(var(--zelmor-white-rgb), 0.59); font-size: 0.8rem; font-weight: var(--zelmor-weight-semibold); line-height: 1.25; } .zelmor-hero__call-content strong { color: var(--zelmor-white); font-size: 0.93rem; font-weight: var(--zelmor-weight-bold); line-height: 1.25; } /* ========================================================= 11. FEATURES ========================================================= */ .zelmor-hero__features { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; } .zelmor-hero__feature { display: inline-flex; align-items: center; gap: 8px; color: rgba( var(--zelmor-white-rgb), 0.76 ); font-size: 0.92rem; font-weight: var(--zelmor-weight-medium); line-height: 1.45; } .zelmor-hero__feature-check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua); font-size: 0.72rem; font-weight: var(--zelmor-weight-extrabold); } /* ========================================================= 12. FLOATING SERVICE CARD ========================================================= */ .zelmor-hero__service-card { position: relative; align-self: end; justify-self: end; width: min(100%, 330px); margin-bottom: 16px; padding: 23px; overflow: hidden; border: 1px solid rgba(var(--zelmor-white-rgb), 0.18); border-radius: var(--zelmor-radius-lg); color: var(--zelmor-white); background: rgba(var(--zelmor-navy-rgb), 0.54); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.19); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .zelmor-hero__service-card::before { content: ""; position: absolute; width: 150px; height: 150px; top: -88px; right: -70px; border-radius: 50%; background: rgba(var(--zelmor-pink-rgb), 0.16); } .zelmor-hero__service-card-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 19px; } .zelmor-hero__service-card-label { color: rgba(var(--zelmor-white-rgb), 0.67); font-size: 0.88rem; font-weight: var(--zelmor-weight-bold); letter-spacing: 0.025em; } .zelmor-hero__service-card-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--zelmor-pink-100); background: rgba(var(--zelmor-pink-rgb), 0.15); font-size: 1rem; } .zelmor-hero__service-card-title { position: relative; display: block; margin-bottom: 20px; color: var(--zelmor-white); font-family: var(--zelmor-font-heading); font-size: 2rem; font-weight: var(--zelmor-weight-regular); line-height: 1.02; letter-spacing: -0.025em; } .zelmor-hero__service-card-title span { display: block; color: var(--zelmor-pink-100); } /* Schedule pills */ .zelmor-hero__schedule { position: relative; display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; } .zelmor-hero__schedule span { display: inline-flex; align-items: center; justify-content: center; min-height: 35px; padding-inline: 11px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.12); border-radius: var(--zelmor-radius-pill); color: rgba(var(--zelmor-white-rgb), 0.85); background: rgba(var(--zelmor-white-rgb), 0.055); font-size: 0.84rem; font-weight: var(--zelmor-weight-semibold); } .zelmor-hero__service-card-bottom { position: relative; display: flex; align-items: center; gap: 8px; padding-top: 17px; border-top: 1px solid rgba(var(--zelmor-white-rgb), 0.1); color: rgba(var(--zelmor-white-rgb), 0.63); font-size: 0.83rem; font-weight: var(--zelmor-weight-medium); line-height: 1.4; } .zelmor-hero__service-card-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background-color: var(--zelmor-aqua); box-shadow: 0 0 0 4px rgba(var(--zelmor-aqua-rgb), 0.08); } /* ========================================================= 13. BOTTOM ACCENT ========================================================= */ .zelmor-hero__bottom-line { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 3px; background: rgba(var(--zelmor-white-rgb), 0.05); } .zelmor-hero__bottom-line span { display: block; width: 34%; height: 100%; background-color: var(--zelmor-pink-600); } /* ========================================================= 14. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- 1. COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { .zelmor-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.52fr); padding-top: 34px; padding-bottom: 40px; } .zelmor-hero__description { max-width: 600px; } .zelmor-hero__service-card { width: 325px; } } /* --------------------------------------------------------- 2. TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .zelmor-hero__inner { grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; padding-top: 28px; padding-bottom: 30px; } .zelmor-hero__title { font-size: clamp( 3.2rem, 6vw, 4.7rem ); margin-bottom: 18px; } .zelmor-hero__description { max-width: 560px; margin-bottom: 22px; font-size: 1.03rem; } .zelmor-hero__actions { margin-bottom: 21px; } .zelmor-hero__service-card { width: 260px; padding: 20px; } .zelmor-hero__service-card-title { font-size: 1.7rem; } .zelmor-hero__schedule { gap: 6px; } .zelmor-hero__schedule span { min-height: 33px; padding-inline: 9px; font-size: 0.8rem; } } /* --------------------------------------------------------- 3. MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { .zelmor-hero__media { inset: -7% -10%; transform: translate3d( 0, var(--zelmor-hero-parallax-y), 0 ) scale(1.1); } .zelmor-hero__overlay { background: linear-gradient( 90deg, rgba(var(--zelmor-navy-rgb), 0.93) 0%, rgba(var(--zelmor-navy-rgb), 0.79) 65%, rgba(var(--zelmor-navy-rgb), 0.55) 100% ); } .zelmor-hero__inner { display: flex; align-items: center; height: 100%; padding-top: 26px; padding-bottom: 30px; } .zelmor-hero__content { width: min(100%, 610px); } .zelmor-hero__eyebrow { margin-bottom: 16px; font-size: 0.89rem; } .zelmor-hero__title { max-width: 610px; margin-bottom: 17px; font-size: clamp( 3rem, 10vw, 4.2rem ); line-height: 0.95; } .zelmor-hero__description { max-width: 540px; margin-bottom: 21px; font-size: 1.02rem; line-height: 1.58; } .zelmor-hero__actions { gap: 10px; margin-bottom: 20px; } .zelmor-hero__cta { min-height: 52px; font-size: 0.9rem; } .zelmor-hero__cta-icon { width: 38px; height: 38px; } .zelmor-hero__call-icon { width: 38px; height: 38px; } .zelmor-hero__feature { font-size: 0.88rem; } /* * Removed on mobile to preserve the * topbar + nav + hero <= 100svh requirement. */ .zelmor-hero__service-card { display: none; } .zelmor-hero__ambient::after { right: -80px; width: 190px; height: 190px; } } /* --------------------------------------------------------- 4. SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { .zelmor-hero__media { inset: -7% -14%; transform: translate3d( 0, var(--zelmor-hero-parallax-y), 0 ) scale(1.11); } .zelmor-hero__image { /* * This can be customized later depending on * the composition of the actual hero photo. */ object-position: center; } .zelmor-hero__overlay { background: linear-gradient( 90deg, rgba(var(--zelmor-navy-rgb), 0.94) 0%, rgba(var(--zelmor-navy-rgb), 0.82) 70%, rgba(var(--zelmor-navy-rgb), 0.62) 100% ); } .zelmor-hero__inner { display: flex; align-items: center; height: 100%; padding-top: 21px; padding-bottom: 24px; } .zelmor-hero__eyebrow { gap: 7px; margin-bottom: 14px; font-size: 0.84rem; } .zelmor-hero__eyebrow-mark { width: 22px; height: 22px; } .zelmor-hero__eyebrow-location { min-height: 27px; padding-inline: 9px; } .zelmor-hero__title { margin-bottom: 15px; font-size: clamp( 2.55rem, 12.5vw, 3.55rem ); line-height: 0.95; } .zelmor-hero__description { margin-bottom: 18px; font-size: 1rem; line-height: 1.55; } .zelmor-hero__actions { align-items: stretch; flex-direction: column; gap: 8px; margin-bottom: 17px; } .zelmor-hero__cta { width: 100%; min-height: 50px; font-size: 0.9rem; } .zelmor-hero__cta--primary { justify-content: space-between; padding-left: 20px; } .zelmor-hero__cta--call { justify-content: flex-start; } .zelmor-hero__cta-icon, .zelmor-hero__call-icon { width: 37px; height: 37px; } .zelmor-hero__features { display: grid; grid-template-columns: 1fr; gap: 7px; } .zelmor-hero__feature { font-size: 0.86rem; } .zelmor-hero__feature-check { width: 20px; height: 20px; } .zelmor-hero__service-card { display: none; } .zelmor-hero__ambient::before { left: -230px; bottom: -300px; } .zelmor-hero__ambient::after { display: none; } } /* ========================================================= 15. REDUCED MOTION Accessibility — not a layout breakpoint ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-hero__media { transform: scale(1.08) !important; will-change: auto; } .zelmor-hero__cta, .zelmor-hero__cta-icon { transition: none; } } /* ========================================================= ZELMOR HOUSE CLEANING 05. INTRODUCTION / MEET ZELMOR ========================================================= */ /* ========================================================= 01. SECTION ========================================================= */ .zelmor-intro { position: relative; overflow: hidden; background-color: var(--zelmor-ivory); } /* * Very subtle environmental lighting. * Keeps the section connected to the brand without * turning it into a pink / aqua background. */ .zelmor-intro::before { content: ""; position: absolute; top: -280px; right: -260px; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-aqua-rgb), 0.055); } .zelmor-intro::after { content: ""; position: absolute; left: -240px; bottom: -320px; width: 560px; height: 560px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-pink-rgb), 0.045); } /* ========================================================= 02. GRID ========================================================= */ .zelmor-intro__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(60px, 7vw, 110px); } /* ========================================================= 03. VISUAL ========================================================= */ .zelmor-intro__visual { position: relative; width: min(100%, 510px); } .zelmor-intro__figure { position: relative; width: 100%; aspect-ratio: 0.84; margin: 0; overflow: hidden; border-radius: var(--zelmor-radius-xl) var(--zelmor-radius-xl) var(--zelmor-radius-xl) 90px; background-color: var(--zelmor-silver-light); box-shadow: 0 28px 75px rgba(var(--zelmor-navy-rgb), 0.14); } .zelmor-intro__image { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 850ms var(--zelmor-ease); } .zelmor-intro__figure:hover .zelmor-intro__image { transform: scale(1.035); } /* ========================================================= 04. IMAGE OVERLAY ========================================================= */ .zelmor-intro__image-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(var(--zelmor-navy-rgb), 0.01) 30%, rgba(var(--zelmor-navy-rgb), 0.08) 68%, rgba(var(--zelmor-navy-rgb), 0.36) 100% ); } /* ========================================================= 05. DECORATIVE CORNER ========================================================= */ .zelmor-intro__corner { position: absolute; top: 24px; left: 24px; width: 70px; height: 70px; border-top: 2px solid rgba(var(--zelmor-white-rgb), 0.72); border-left: 2px solid rgba(var(--zelmor-white-rgb), 0.72); border-radius: 15px 0 0 0; pointer-events: none; } /* ========================================================= 06. IMAGE BADGE ========================================================= */ .zelmor-intro__badge { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 13px 17px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.2); border-radius: 20px; color: var(--zelmor-white); background: rgba(var(--zelmor-navy-rgb), 0.72); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } .zelmor-intro__badge-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 45px; height: 45px; border-radius: 50%; color: var(--zelmor-white); background-color: var(--zelmor-pink-600); } .zelmor-intro__badge-icon svg { width: 21px; height: 21px; } .zelmor-intro__badge-copy { display: flex; flex-direction: column; gap: 3px; } .zelmor-intro__badge-copy strong { color: var(--zelmor-white); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.35; } .zelmor-intro__badge-copy span { color: rgba(var(--zelmor-white-rgb), 0.72); font-size: 0.9rem; font-weight: var(--zelmor-weight-medium); line-height: 1.45; } /* ========================================================= 07. LOCATION CARD ========================================================= */ .zelmor-intro__location-card { position: absolute; top: 54px; right: -42px; display: flex; align-items: center; gap: 11px; width: 210px; padding: 13px 15px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 17px; color: var(--zelmor-navy-950); background-color: rgba(var(--zelmor-white-rgb), 0.94); box-shadow: var(--zelmor-shadow-md); font-size: 0.9rem; font-weight: var(--zelmor-weight-semibold); line-height: 1.45; } .zelmor-intro__location-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 13px; color: var(--zelmor-aqua); background-color: var(--zelmor-aqua-soft); } .zelmor-intro__location-icon svg { width: 20px; height: 20px; } /* ========================================================= 08. CONTENT ========================================================= */ .zelmor-intro__content { position: relative; width: 100%; } /* ========================================================= 09. EYEBROW ========================================================= */ .zelmor-intro__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--zelmor-pink-600); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.055em; text-transform: uppercase; } .zelmor-intro__eyebrow-line { width: 38px; height: 2px; border-radius: 999px; background-color: var(--zelmor-pink-600); } /* ========================================================= 10. TITLE ========================================================= */ .zelmor-intro__title { max-width: 680px; margin-bottom: 24px; color: var(--zelmor-navy-950); font-size: clamp( 3rem, 5vw, 5.1rem ); line-height: 0.98; letter-spacing: -0.035em; } .zelmor-intro__title span { display: block; color: var(--zelmor-pink-600); } /* ========================================================= 11. TEXT ========================================================= */ .zelmor-intro__lead { max-width: 680px; margin-bottom: 14px; color: var(--zelmor-charcoal); font-size: clamp( 1.08rem, 1.35vw, 1.2rem ); font-weight: var(--zelmor-weight-medium); line-height: 1.68; } .zelmor-intro__description { max-width: 680px; margin-bottom: 31px; color: var(--zelmor-slate); font-size: 1.04rem; line-height: 1.7; } /* ========================================================= 12. VALUES GRID ========================================================= */ .zelmor-intro__values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 31px; } .zelmor-intro__value { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 13px; min-height: 120px; padding: 17px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 18px; background: rgba(var(--zelmor-white-rgb), 0.67); box-shadow: 0 8px 24px rgba(var(--zelmor-navy-rgb), 0.045); transition: transform var(--zelmor-transition), border-color var(--zelmor-transition), box-shadow var(--zelmor-transition), background-color var(--zelmor-transition); } .zelmor-intro__value:hover { transform: translateY(-4px); border-color: rgba(var(--zelmor-pink-rgb), 0.16); background-color: rgba(var(--zelmor-white-rgb), 0.92); box-shadow: 0 16px 36px rgba(var(--zelmor-navy-rgb), 0.08); } /* ========================================================= 13. VALUE ICON ========================================================= */ .zelmor-intro__value-icon { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border-radius: 14px; color: var(--zelmor-navy-950); background-color: var(--zelmor-pink-100); transition: color var(--zelmor-transition), background-color var(--zelmor-transition); } .zelmor-intro__value:nth-child(even) .zelmor-intro__value-icon { color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua-soft); } .zelmor-intro__value:hover .zelmor-intro__value-icon { color: var(--zelmor-white); background-color: var(--zelmor-pink-600); } .zelmor-intro__value-icon svg { width: 22px; height: 22px; } /* ========================================================= 14. VALUE TEXT ========================================================= */ .zelmor-intro__value h3 { margin-bottom: 5px; color: var(--zelmor-navy-950); font-family: var(--zelmor-font-body); font-size: 1.02rem; font-weight: var(--zelmor-weight-bold); line-height: 1.35; } .zelmor-intro__value p { margin: 0; color: var(--zelmor-slate); font-size: 0.94rem; line-height: 1.58; } /* ========================================================= 15. ACTIONS ========================================================= */ .zelmor-intro__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 22px; } /* ========================================================= 16. CTA ========================================================= */ .zelmor-intro__cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 55px; padding: 6px 7px 6px 21px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.15); border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background-color: var(--zelmor-pink-600); box-shadow: 0 13px 32px rgba(var(--zelmor-pink-rgb), 0.22); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); line-height: 1.3; transition: background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-intro__cta:hover { background-color: var(--zelmor-navy-950); box-shadow: 0 16px 36px rgba(var(--zelmor-navy-rgb), 0.18); } .zelmor-intro__cta-icon { display: flex; align-items: center; justify-content: center; width: 41px; height: 41px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-white); transition: transform var(--zelmor-transition); } .zelmor-intro__cta:hover .zelmor-intro__cta-icon { transform: rotate(7deg); } .zelmor-intro__cta-icon svg { width: 18px; height: 18px; } /* ========================================================= 17. PHONE ========================================================= */ .zelmor-intro__phone { display: flex; flex-direction: column; gap: 2px; color: var(--zelmor-navy-950); } .zelmor-intro__phone span { color: var(--zelmor-slate); font-size: 0.9rem; font-weight: var(--zelmor-weight-medium); line-height: 1.4; } .zelmor-intro__phone strong { color: var(--zelmor-navy-950); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; transition: color var(--zelmor-transition-fast); } .zelmor-intro__phone:hover strong { color: var(--zelmor-pink-600); } /* ========================================================= 18. SECTION NUMBER ========================================================= */ .zelmor-intro__section-number { position: absolute; right: 3%; bottom: -0.14em; z-index: 0; color: rgba(var(--zelmor-navy-rgb), 0.035); font-family: var(--zelmor-font-heading); font-size: clamp(8rem, 17vw, 16rem); line-height: 0.75; pointer-events: none; user-select: none; } /* ========================================================= 19. MOTION Elements remain visible by default. JS activates the initial hidden state only after the section has been prepared. ========================================================= */ .zelmor-intro.is-motion-ready [data-zelmor-intro-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 720ms var(--zelmor-ease), transform 720ms var(--zelmor-ease); } .zelmor-intro.is-motion-ready [data-zelmor-intro-reveal="visual"] { transform: translate3d(-26px, 20px, 0); } .zelmor-intro.is-motion-ready [data-zelmor-intro-reveal="values"] { transform: translate3d(0, 20px, 0); } .zelmor-intro.is-motion-ready [data-zelmor-intro-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* ========================================================= 20. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- 1. COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { .zelmor-intro__grid { grid-template-columns: minmax(390px, 0.88fr) minmax(0, 1.12fr); } .zelmor-intro__visual { width: min(100%, 520px); } .zelmor-intro__content { padding-left: 12px; } } /* --------------------------------------------------------- 2. TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .zelmor-intro__grid { grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr); gap: 48px; } .zelmor-intro__figure { border-radius: 30px 30px 30px 68px; } .zelmor-intro__location-card { top: 35px; right: -25px; width: 185px; font-size: 0.88rem; } .zelmor-intro__title { font-size: clamp( 2.8rem, 5.2vw, 4.1rem ); } .zelmor-intro__lead { font-size: 1.05rem; } .zelmor-intro__description { font-size: 1rem; } .zelmor-intro__values { grid-template-columns: 1fr; gap: 9px; } .zelmor-intro__value { min-height: auto; } } /* --------------------------------------------------------- 3. MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { .zelmor-intro__grid { grid-template-columns: 1fr; gap: 48px; } .zelmor-intro__visual { width: min(100%, 540px); margin-inline: auto; } .zelmor-intro__figure { aspect-ratio: 1.05; border-radius: 28px 28px 28px 62px; } .zelmor-intro__location-card { top: auto; right: 20px; bottom: -26px; width: 215px; } .zelmor-intro__badge { left: 19px; right: auto; bottom: 19px; width: min(330px, calc(100% - 38px)); } .zelmor-intro__content { padding-top: 6px; } .zelmor-intro__eyebrow { font-size: 0.92rem; } .zelmor-intro__title { max-width: 600px; font-size: clamp( 2.8rem, 10vw, 4rem ); } .zelmor-intro__lead { font-size: 1.05rem; } .zelmor-intro__description { font-size: 1rem; } .zelmor-intro__values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .zelmor-intro__value { display: flex; flex-direction: column; min-height: 170px; } .zelmor-intro__value p { font-size: 0.94rem; } .zelmor-intro__section-number { right: -3%; font-size: 9rem; } } /* --------------------------------------------------------- 4. SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { .zelmor-intro__grid { grid-template-columns: 1fr; gap: 44px; } .zelmor-intro__visual { width: 100%; } .zelmor-intro__figure { aspect-ratio: 0.98; border-radius: 24px 24px 24px 52px; } .zelmor-intro__corner { top: 18px; left: 18px; width: 52px; height: 52px; } .zelmor-intro__badge { left: 14px; right: 14px; bottom: 14px; min-height: 68px; padding: 11px 13px; } .zelmor-intro__badge-icon { width: 41px; height: 41px; } .zelmor-intro__badge-copy strong { font-size: 0.96rem; } .zelmor-intro__badge-copy span { font-size: 0.88rem; } /* * We remove the floating location card instead * of shrinking its text too much. */ .zelmor-intro__location-card { display: none; } .zelmor-intro__eyebrow { margin-bottom: 15px; font-size: 0.9rem; } .zelmor-intro__eyebrow-line { width: 31px; } .zelmor-intro__title { margin-bottom: 20px; font-size: clamp( 2.55rem, 12vw, 3.4rem ); line-height: 1; } .zelmor-intro__lead { margin-bottom: 13px; font-size: 1.04rem; line-height: 1.62; } .zelmor-intro__description { margin-bottom: 27px; font-size: 1rem; line-height: 1.65; } .zelmor-intro__values { grid-template-columns: 1fr; gap: 9px; margin-bottom: 27px; } .zelmor-intro__value { min-height: auto; padding: 15px; } .zelmor-intro__value h3 { font-size: 1rem; } .zelmor-intro__value p { font-size: 0.94rem; line-height: 1.55; } .zelmor-intro__actions { align-items: stretch; flex-direction: column; gap: 15px; } .zelmor-intro__cta { justify-content: space-between; width: 100%; min-height: 53px; font-size: 0.93rem; } .zelmor-intro__phone { align-items: center; text-align: center; } .zelmor-intro__phone span { font-size: 0.9rem; } .zelmor-intro__phone strong { font-size: 1rem; } .zelmor-intro__section-number { display: none; } } /* ========================================================= 21. REDUCED MOTION Accessibility — not a layout breakpoint ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-intro__image, .zelmor-intro__value, .zelmor-intro__value-icon, .zelmor-intro__cta, .zelmor-intro__cta-icon, .zelmor-intro__phone strong, .zelmor-intro [data-zelmor-intro-reveal] { transition: none !important; } .zelmor-intro.is-motion-ready [data-zelmor-intro-reveal] { opacity: 1 !important; transform: none !important; } .zelmor-intro__figure:hover .zelmor-intro__image, .zelmor-intro__value:hover { transform: none; } } /* ========================================================= ZELMOR HOUSE CLEANING 06. SERVICES OVERVIEW ========================================================= */ /* ========================================================= 01. SECTION ========================================================= */ .zelmor-services { position: relative; overflow: hidden; background-color: var(--zelmor-warm-white); } /* Subtle background detail */ .zelmor-services::before { content: ""; position: absolute; top: 9%; left: -230px; width: 460px; height: 460px; border: 1px solid rgba(var(--zelmor-aqua-rgb), 0.11); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 38px rgba(var(--zelmor-aqua-rgb), 0.018), 0 0 0 78px rgba(var(--zelmor-aqua-rgb), 0.012); } .zelmor-services::after { content: ""; position: absolute; right: -280px; bottom: -360px; width: 620px; height: 620px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-pink-rgb), 0.04); } /* ========================================================= 02. HEADER ========================================================= */ .zelmor-services__header { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); align-items: end; gap: 70px; margin-bottom: 48px; } .zelmor-services__heading { max-width: 760px; } /* ========================================================= 03. EYEBROW ========================================================= */ .zelmor-services__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; color: var(--zelmor-pink-600); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.055em; text-transform: uppercase; } .zelmor-services__eyebrow-line { display: block; width: 38px; height: 2px; border-radius: 999px; background-color: var(--zelmor-pink-600); } /* ========================================================= 04. TITLE ========================================================= */ .zelmor-services__title { max-width: 740px; margin: 0; color: var(--zelmor-navy-950); font-size: clamp( 3rem, 5vw, 5.2rem ); line-height: 0.98; letter-spacing: -0.04em; } .zelmor-services__title span { display: block; color: var(--zelmor-pink-600); } /* ========================================================= 05. INTRO ========================================================= */ .zelmor-services__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .zelmor-services__intro p { max-width: 520px; margin: 0; color: var(--zelmor-slate); font-size: 1.05rem; line-height: 1.7; } /* ========================================================= 06. VIEW ALL LINK ========================================================= */ .zelmor-services__all-link { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; color: var(--zelmor-navy-950); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); transition: color var(--zelmor-transition), gap var(--zelmor-transition); } .zelmor-services__all-link:hover { gap: 16px; color: var(--zelmor-pink-600); } .zelmor-services__all-link-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.12); border-radius: 50%; background-color: var(--zelmor-white); box-shadow: var(--zelmor-shadow-xs); } .zelmor-services__all-link-icon svg { width: 17px; height: 17px; } /* ========================================================= 07. GRID ========================================================= */ .zelmor-services__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 245px; gap: 16px; } /* ========================================================= 08. SERVICE CARD Entire card is clickable. ========================================================= */ .zelmor-service-card { position: relative; grid-column: span 4; min-height: 0; overflow: hidden; border: 1px solid rgba(var(--zelmor-white-rgb), 0.16); border-radius: 26px; color: var(--zelmor-white); background-color: var(--zelmor-navy-950); box-shadow: 0 18px 46px rgba(var(--zelmor-navy-rgb), 0.11); isolation: isolate; transition: transform var(--zelmor-transition), box-shadow var(--zelmor-transition), border-color var(--zelmor-transition); } .zelmor-service-card--featured { grid-column: span 7; grid-row: span 2; } .zelmor-service-card--wide { grid-column: span 8; } /* ========================================================= 09. MEDIA ========================================================= */ .zelmor-service-card__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; } .zelmor-service-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); transition: transform 850ms var(--zelmor-ease); } /* ========================================================= 10. SHADE ========================================================= */ .zelmor-service-card__shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient( 180deg, rgba(var(--zelmor-navy-rgb), 0.16) 0%, rgba(var(--zelmor-navy-rgb), 0.34) 40%, rgba(var(--zelmor-navy-rgb), 0.93) 100% ); } .zelmor-service-card--featured .zelmor-service-card__shade { background: linear-gradient( 90deg, rgba(var(--zelmor-navy-rgb), 0.92) 0%, rgba(var(--zelmor-navy-rgb), 0.72) 48%, rgba(var(--zelmor-navy-rgb), 0.30) 100% ); } /* ========================================================= 11. CONTENT ========================================================= */ .zelmor-service-card__content { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 22px; } /* ========================================================= 12. CARD TOP ========================================================= */ .zelmor-service-card__top { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .zelmor-service-card__number { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 34px; padding-inline: 10px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.16); border-radius: var(--zelmor-radius-pill); color: rgba(var(--zelmor-white-rgb), 0.86); background: rgba(var(--zelmor-navy-rgb), 0.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 0.88rem; font-weight: var(--zelmor-weight-bold); } .zelmor-service-card__type { display: inline-flex; align-items: center; min-height: 34px; padding-inline: 12px; border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background: rgba(var(--zelmor-pink-rgb), 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.86rem; font-weight: var(--zelmor-weight-semibold); } /* ========================================================= 13. CARD BODY ========================================================= */ .zelmor-service-card__body { width: min(100%, 540px); } .zelmor-service-card__body h3 { margin-bottom: 10px; color: var(--zelmor-white); font-family: var(--zelmor-font-heading); font-size: clamp( 1.8rem, 2.4vw, 2.65rem ); font-weight: var(--zelmor-weight-regular); line-height: 1; letter-spacing: -0.025em; } .zelmor-service-card--featured .zelmor-service-card__body h3 { font-size: clamp( 2.4rem, 4vw, 4.2rem ); } .zelmor-service-card__body p { max-width: 510px; margin: 0; color: rgba(var(--zelmor-white-rgb), 0.78); font-size: 0.98rem; line-height: 1.62; } /* ========================================================= 14. TAGS ========================================================= */ .zelmor-service-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; } .zelmor-service-card__tags span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding-inline: 12px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.13); border-radius: var(--zelmor-radius-pill); color: rgba(var(--zelmor-white-rgb), 0.88); background: rgba(var(--zelmor-white-rgb), 0.07); font-size: 0.87rem; font-weight: var(--zelmor-weight-semibold); } /* ========================================================= 15. ARROW ========================================================= */ .zelmor-service-card__arrow { position: absolute; right: 20px; bottom: 20px; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.19); border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-white); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); transition: transform var(--zelmor-transition), color var(--zelmor-transition), background-color var(--zelmor-transition); } .zelmor-service-card__arrow svg { width: 19px; height: 19px; } /* Give text room for arrow */ .zelmor-service-card:not( .zelmor-service-card--featured ) .zelmor-service-card__body { padding-right: 45px; } /* ========================================================= 16. HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { .zelmor-service-card:hover { transform: translateY(-6px); border-color: rgba(var(--zelmor-pink-rgb), 0.3); box-shadow: 0 28px 65px rgba(var(--zelmor-navy-rgb), 0.18); } .zelmor-service-card:hover .zelmor-service-card__media img { transform: scale(1.065); } .zelmor-service-card:hover .zelmor-service-card__arrow { transform: rotate(8deg); color: var(--zelmor-white); background-color: var(--zelmor-pink-600); } } /* ========================================================= 17. KEYBOARD FOCUS ========================================================= */ .zelmor-service-card:focus-visible { outline: 3px solid rgba(var(--zelmor-aqua-rgb), 0.8); outline-offset: 4px; } /* ========================================================= 18. GRID POSITIONING ========================================================= */ .zelmor-services__grid .zelmor-service-card:nth-child(2) { grid-column: span 5; } .zelmor-services__grid .zelmor-service-card:nth-child(4) { grid-column: span 4; } .zelmor-services__grid .zelmor-service-card:nth-child(5) { grid-column: span 4; } /* ========================================================= 19. BOTTOM ========================================================= */ .zelmor-services__bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(var(--zelmor-navy-rgb), 0.1); } .zelmor-services__bottom-copy { display: flex; align-items: center; gap: 12px; max-width: 700px; } .zelmor-services__bottom-copy p { margin: 0; color: var(--zelmor-slate); font-size: 1rem; line-height: 1.6; } .zelmor-services__bottom-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background-color: var(--zelmor-aqua); box-shadow: 0 0 0 5px rgba(var(--zelmor-aqua-rgb), 0.10); } /* ========================================================= 20. ESTIMATE LINK ========================================================= */ .zelmor-services__estimate { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 48px; padding-inline: 20px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.1); border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background-color: var(--zelmor-navy-950); box-shadow: var(--zelmor-shadow-sm); font-size: 0.94rem; font-weight: var(--zelmor-weight-bold); white-space: nowrap; transition: background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-services__estimate:hover { background-color: var(--zelmor-pink-600); box-shadow: var(--zelmor-shadow-pink); } /* ========================================================= 21. REVEAL MOTION Safe fallback: everything visible by default. ========================================================= */ .zelmor-services.is-motion-ready [data-zelmor-services-reveal], .zelmor-services.is-motion-ready [data-zelmor-services-card] { opacity: 0; transform: translate3d( 0, 26px, 0 ); transition: opacity 700ms var(--zelmor-ease), transform 700ms var(--zelmor-ease); } .zelmor-services.is-motion-ready [data-zelmor-services-reveal].is-visible, .zelmor-services.is-motion-ready [data-zelmor-services-card].is-visible { opacity: 1; transform: translate3d( 0, 0, 0 ); } /* ========================================================= 22. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- 1. COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { .zelmor-services__grid { grid-auto-rows: 250px; } .zelmor-service-card--featured { min-height: 516px; } } /* --------------------------------------------------------- 2. TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .zelmor-services__header { grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 42px; margin-bottom: 40px; } .zelmor-services__title { font-size: clamp( 2.8rem, 5vw, 4.3rem ); } .zelmor-services__intro p { font-size: 1rem; } .zelmor-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 330px; gap: 14px; } .zelmor-service-card, .zelmor-service-card--featured, .zelmor-service-card--wide, .zelmor-services__grid .zelmor-service-card:nth-child(2), .zelmor-services__grid .zelmor-service-card:nth-child(4), .zelmor-services__grid .zelmor-service-card:nth-child(5) { grid-column: span 1; grid-row: span 1; } .zelmor-service-card--featured { grid-column: span 2; min-height: 390px; } .zelmor-service-card--featured .zelmor-service-card__shade { background: linear-gradient( 90deg, rgba(var(--zelmor-navy-rgb), 0.91), rgba(var(--zelmor-navy-rgb), 0.43) ); } .zelmor-service-card__body p { font-size: 0.96rem; } .zelmor-services__bottom { align-items: flex-start; } } /* --------------------------------------------------------- 3. MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { .zelmor-services__header { grid-template-columns: 1fr; gap: 25px; margin-bottom: 34px; } .zelmor-services__title { max-width: 620px; font-size: clamp( 2.8rem, 10vw, 4rem ); } .zelmor-services__intro { max-width: 590px; } .zelmor-services__intro p { font-size: 1rem; line-height: 1.65; } .zelmor-services__grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 13px; } .zelmor-service-card, .zelmor-service-card--featured, .zelmor-service-card--wide, .zelmor-services__grid .zelmor-service-card:nth-child(2), .zelmor-services__grid .zelmor-service-card:nth-child(4), .zelmor-services__grid .zelmor-service-card:nth-child(5) { grid-column: 1; grid-row: auto; min-height: 360px; } .zelmor-service-card--featured { min-height: 430px; } .zelmor-service-card__content { padding: 20px; } .zelmor-service-card__body h3 { font-size: clamp( 2rem, 6vw, 2.7rem ); } .zelmor-service-card--featured .zelmor-service-card__body h3 { font-size: clamp( 2.5rem, 8vw, 3.6rem ); } .zelmor-service-card__body p { font-size: 1rem; } .zelmor-services__bottom { align-items: flex-start; flex-direction: column; gap: 19px; } } /* --------------------------------------------------------- 4. SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { .zelmor-services__header { grid-template-columns: 1fr; gap: 23px; margin-bottom: 30px; } .zelmor-services__eyebrow { margin-bottom: 15px; font-size: 0.9rem; } .zelmor-services__title { font-size: clamp( 2.55rem, 12vw, 3.45rem ); line-height: 1; } .zelmor-services__intro p { font-size: 1rem; line-height: 1.62; } .zelmor-services__all-link { font-size: 0.94rem; } .zelmor-services__grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; } .zelmor-service-card, .zelmor-service-card--featured, .zelmor-service-card--wide, .zelmor-services__grid .zelmor-service-card:nth-child(2), .zelmor-services__grid .zelmor-service-card:nth-child(4), .zelmor-services__grid .zelmor-service-card:nth-child(5) { grid-column: 1; grid-row: auto; min-height: 345px; border-radius: 22px; } .zelmor-service-card--featured { min-height: 410px; } .zelmor-service-card__content { padding: 18px; } .zelmor-service-card__number, .zelmor-service-card__type { font-size: 0.84rem; } .zelmor-service-card__body h3 { font-size: 2rem; } .zelmor-service-card--featured .zelmor-service-card__body h3 { font-size: clamp( 2.35rem, 11vw, 3.1rem ); } .zelmor-service-card__body p { padding-right: 0; font-size: 0.98rem; line-height: 1.58; } .zelmor-service-card:not( .zelmor-service-card--featured ) .zelmor-service-card__body { padding-right: 40px; } .zelmor-service-card__arrow { right: 17px; bottom: 17px; width: 42px; height: 42px; } .zelmor-services__bottom { align-items: stretch; flex-direction: column; gap: 18px; margin-top: 25px; } .zelmor-services__bottom-copy { align-items: flex-start; } .zelmor-services__bottom-copy p { font-size: 1rem; } .zelmor-services__estimate { width: 100%; min-height: 50px; font-size: 0.94rem; } } /* ========================================================= 23. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-service-card, .zelmor-service-card__media img, .zelmor-service-card__arrow, .zelmor-services__all-link, .zelmor-services__estimate, .zelmor-services [data-zelmor-services-reveal], .zelmor-services [data-zelmor-services-card] { transition: none !important; } .zelmor-services.is-motion-ready [data-zelmor-services-reveal], .zelmor-services.is-motion-ready [data-zelmor-services-card] { opacity: 1 !important; transform: none !important; } .zelmor-service-card:hover { transform: none; } .zelmor-service-card:hover .zelmor-service-card__media img { transform: none; } } /* ========================================================= ZELMOR HOUSE CLEANING 07. RECURRING CLEANING FEATURE ========================================================= */ /* ========================================================= 01. SECTION ========================================================= */ .zelmor-recurring { position: relative; overflow: hidden; color: var(--zelmor-white); background-color: var(--zelmor-navy-950); } .zelmor-recurring::before { content: ""; position: absolute; top: -320px; left: -280px; width: 620px; height: 620px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-pink-rgb), 0.085); } .zelmor-recurring::after { content: ""; position: absolute; right: -320px; bottom: -380px; width: 680px; height: 680px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-aqua-rgb), 0.055); } /* ========================================================= 02. MAIN FEATURE ========================================================= */ .zelmor-recurring__feature { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.78fr); align-items: center; gap: clamp(60px, 7vw, 105px); } /* ========================================================= 03. CONTENT ========================================================= */ .zelmor-recurring__content { max-width: 720px; } /* ========================================================= 04. EYEBROW ========================================================= */ .zelmor-recurring__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--zelmor-pink-100); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.055em; text-transform: uppercase; } .zelmor-recurring__eyebrow-line { width: 38px; height: 2px; border-radius: 999px; background-color: var(--zelmor-pink-500); } /* ========================================================= 05. TITLE ========================================================= */ .zelmor-recurring__title { max-width: 730px; margin-bottom: 24px; color: var(--zelmor-white); font-size: clamp( 3.1rem, 5vw, 5.25rem ); line-height: 0.97; letter-spacing: -0.04em; } .zelmor-recurring__title span { display: block; color: var(--zelmor-pink-100); } /* ========================================================= 06. DESCRIPTION ========================================================= */ .zelmor-recurring__description { max-width: 650px; margin-bottom: 31px; color: rgba(var(--zelmor-white-rgb), 0.76); font-size: clamp( 1.05rem, 1.25vw, 1.15rem ); line-height: 1.7; } /* ========================================================= 07. FREQUENCY ========================================================= */ .zelmor-recurring__frequency { max-width: 640px; margin-bottom: 30px; } .zelmor-recurring__frequency-label { display: block; margin-bottom: 11px; color: rgba(var(--zelmor-white-rgb), 0.72); font-size: 0.94rem; font-weight: var(--zelmor-weight-semibold); line-height: 1.45; } /* ========================================================= 08. FREQUENCY OPTIONS ========================================================= */ .zelmor-recurring__frequency-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 6px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.12); border-radius: 18px; background: rgba(var(--zelmor-white-rgb), 0.055); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .zelmor-recurring__frequency-button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding-inline: 15px; border: 0; border-radius: 13px; color: rgba(var(--zelmor-white-rgb), 0.7); background: transparent; font-size: 0.94rem; font-weight: var(--zelmor-weight-bold); cursor: pointer; transition: color var(--zelmor-transition), background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-recurring__frequency-button:hover { color: var(--zelmor-white); background: rgba(var(--zelmor-white-rgb), 0.07); } .zelmor-recurring__frequency-button.is-active { color: var(--zelmor-navy-950); background-color: var(--zelmor-white); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16); } .zelmor-recurring__frequency-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background-color: rgba(var(--zelmor-white-rgb), 0.38); } .zelmor-recurring__frequency-button.is-active .zelmor-recurring__frequency-dot { background-color: var(--zelmor-pink-600); box-shadow: 0 0 0 4px rgba(var(--zelmor-pink-rgb), 0.1); } /* ========================================================= 09. FREQUENCY STATUS ========================================================= */ .zelmor-recurring__frequency-status { margin: 10px 0 0; color: rgba(var(--zelmor-white-rgb), 0.57); font-size: 0.9rem; line-height: 1.5; } /* ========================================================= 10. ACTIONS ========================================================= */ .zelmor-recurring__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; } /* ========================================================= 11. ESTIMATE BUTTON ========================================================= */ .zelmor-recurring__estimate { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 55px; padding: 6px 7px 6px 21px; border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background-color: var(--zelmor-pink-600); box-shadow: 0 14px 36px rgba(var(--zelmor-pink-rgb), 0.25); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); transition: background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-recurring__estimate:hover { background-color: var(--zelmor-pink-500); box-shadow: 0 18px 44px rgba(var(--zelmor-pink-rgb), 0.31); } .zelmor-recurring__estimate-icon { display: grid; place-items: center; width: 41px; height: 41px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-white); transition: transform var(--zelmor-transition); } .zelmor-recurring__estimate:hover .zelmor-recurring__estimate-icon { transform: rotate(7deg); } .zelmor-recurring__estimate-icon svg { width: 18px; height: 18px; } /* ========================================================= 12. GALLERY LINK ========================================================= */ .zelmor-recurring__gallery-link { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; color: rgba(var(--zelmor-white-rgb), 0.88); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); transition: gap var(--zelmor-transition), color var(--zelmor-transition); } .zelmor-recurring__gallery-link:hover { gap: 14px; color: var(--zelmor-aqua); } /* ========================================================= 13. VISUAL ========================================================= */ .zelmor-recurring__visual { position: relative; width: min(100%, 480px); justify-self: end; } .zelmor-recurring__figure { position: relative; z-index: 2; width: 100%; aspect-ratio: 0.82; margin: 0; overflow: hidden; border: 1px solid rgba(var(--zelmor-white-rgb), 0.14); border-radius: 36px 36px 92px 36px; background-color: var(--zelmor-navy-900); box-shadow: 0 32px 90px rgba(0, 0, 0, 0.28); } /* ========================================================= 14. IMAGE ========================================================= */ .zelmor-recurring__image { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); transition: transform 900ms var(--zelmor-ease); } .zelmor-recurring__figure:hover .zelmor-recurring__image { transform: scale(1.045); } /* ========================================================= 15. IMAGE SHADE ========================================================= */ .zelmor-recurring__image-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(var(--zelmor-navy-rgb), 0.07) 20%, rgba(var(--zelmor-navy-rgb), 0.18) 65%, rgba(var(--zelmor-navy-rgb), 0.65) 100% ); } /* ========================================================= 16. VISUAL LABEL ========================================================= */ .zelmor-recurring__visual-label { position: absolute; top: 22px; left: 22px; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding-inline: 14px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.2); border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background: rgba(var(--zelmor-navy-rgb), 0.58); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 0.9rem; font-weight: var(--zelmor-weight-semibold); } .zelmor-recurring__visual-label-icon { color: var(--zelmor-aqua); font-size: 1rem; } /* ========================================================= 17. VISUAL CARD ========================================================= */ .zelmor-recurring__visual-card { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 13px; min-height: 76px; padding: 13px 16px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.18); border-radius: 20px; color: var(--zelmor-white); background: rgba(var(--zelmor-navy-rgb), 0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .zelmor-recurring__visual-card-check { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua); font-size: 0.9rem; font-weight: var(--zelmor-weight-extrabold); } .zelmor-recurring__visual-card div { display: flex; flex-direction: column; gap: 3px; } .zelmor-recurring__visual-card strong { color: var(--zelmor-white); font-size: 0.98rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-recurring__visual-card div span { color: rgba(var(--zelmor-white-rgb), 0.68); font-size: 0.9rem; line-height: 1.4; } /* ========================================================= 18. DECORATIVE RING ========================================================= */ .zelmor-recurring__ring { position: absolute; z-index: 0; top: -40px; right: -54px; width: 175px; height: 175px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.3); border-radius: 50%; box-shadow: 0 0 0 29px rgba(var(--zelmor-pink-rgb), 0.025), 0 0 0 60px rgba(var(--zelmor-pink-rgb), 0.015); pointer-events: none; } /* ========================================================= 19. INCLUDED PANEL ========================================================= */ .zelmor-recurring__included { position: relative; z-index: 2; margin-top: 75px; padding: 38px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.11); border-radius: 30px; background: rgba(var(--zelmor-white-rgb), 0.055); box-shadow: inset 0 1px 0 rgba(var(--zelmor-white-rgb), 0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ========================================================= 20. INCLUDED HEADER ========================================================= */ .zelmor-recurring__included-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr); align-items: end; gap: 50px; margin-bottom: 30px; padding-bottom: 29px; border-bottom: 1px solid rgba(var(--zelmor-white-rgb), 0.1); } .zelmor-recurring__included-kicker { display: block; margin-bottom: 8px; color: var(--zelmor-aqua); font-size: 0.94rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.045em; text-transform: uppercase; } .zelmor-recurring__included-header h3 { margin: 0; color: var(--zelmor-white); font-size: clamp( 2rem, 3vw, 3.2rem ); line-height: 1; letter-spacing: -0.025em; } .zelmor-recurring__included-header h3 span { color: var(--zelmor-pink-100); } .zelmor-recurring__included-header p { margin: 0; color: rgba(var(--zelmor-white-rgb), 0.65); font-size: 1rem; line-height: 1.65; } /* ========================================================= 21. CHECKLIST ========================================================= */ .zelmor-recurring__checklist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } /* ========================================================= 22. CHECK ITEM ========================================================= */ .zelmor-recurring__check-item { display: flex; align-items: flex-start; gap: 12px; min-height: 105px; padding: 15px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.08); border-radius: 17px; background: rgba(var(--zelmor-white-rgb), 0.035); transition: background-color var(--zelmor-transition), border-color var(--zelmor-transition), transform var(--zelmor-transition); } .zelmor-recurring__check-item:hover { transform: translateY(-3px); border-color: rgba(var(--zelmor-aqua-rgb), 0.22); background: rgba(var(--zelmor-white-rgb), 0.065); } .zelmor-recurring__check-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua); font-size: 0.76rem; font-weight: var(--zelmor-weight-extrabold); } .zelmor-recurring__check-item div { display: flex; flex-direction: column; gap: 4px; } .zelmor-recurring__check-item strong { color: var(--zelmor-white); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-recurring__check-item div span { color: rgba(var(--zelmor-white-rgb), 0.59); font-size: 0.9rem; line-height: 1.45; } /* ========================================================= 23. REVEAL MOTION ========================================================= */ .zelmor-recurring.is-motion-ready [data-zelmor-recurring-reveal] { opacity: 0; transform: translate3d( 0, 28px, 0 ); transition: opacity 760ms var(--zelmor-ease), transform 760ms var(--zelmor-ease); } .zelmor-recurring.is-motion-ready [data-zelmor-recurring-reveal="visual"] { transform: translate3d( 28px, 20px, 0 ); } .zelmor-recurring.is-motion-ready [data-zelmor-recurring-reveal].is-visible { opacity: 1; transform: translate3d( 0, 0, 0 ); } /* ========================================================= 24. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- 1. COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { .zelmor-recurring__feature { grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.72fr); } .zelmor-recurring__visual { width: min(100%, 490px); } } /* --------------------------------------------------------- 2. TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .zelmor-recurring__feature { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr); gap: 48px; } .zelmor-recurring__title { font-size: clamp( 2.8rem, 5vw, 4.1rem ); } .zelmor-recurring__description { font-size: 1.03rem; } .zelmor-recurring__visual { width: 100%; } .zelmor-recurring__figure { border-radius: 30px 30px 70px 30px; } .zelmor-recurring__included { margin-top: 62px; padding: 30px; } .zelmor-recurring__included-header { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr); gap: 35px; } .zelmor-recurring__checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zelmor-recurring__check-item { min-height: 92px; } } /* --------------------------------------------------------- 3. MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { .zelmor-recurring__feature { grid-template-columns: 1fr; gap: 46px; } .zelmor-recurring__content { max-width: 620px; } .zelmor-recurring__title { font-size: clamp( 2.8rem, 10vw, 4rem ); } .zelmor-recurring__description { font-size: 1.03rem; } .zelmor-recurring__visual { width: min(100%, 540px); justify-self: center; } .zelmor-recurring__figure { aspect-ratio: 1.03; border-radius: 28px 28px 64px 28px; } .zelmor-recurring__ring { right: -20px; } .zelmor-recurring__included { margin-top: 55px; padding: 27px; } .zelmor-recurring__included-header { grid-template-columns: 1fr; gap: 17px; } .zelmor-recurring__checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zelmor-recurring__check-item { min-height: 105px; } .zelmor-recurring__check-item strong { font-size: 0.96rem; } .zelmor-recurring__check-item div span { font-size: 0.9rem; } } /* --------------------------------------------------------- 4. SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { .zelmor-recurring__feature { grid-template-columns: 1fr; gap: 39px; } .zelmor-recurring__eyebrow { margin-bottom: 15px; font-size: 0.9rem; } .zelmor-recurring__title { margin-bottom: 20px; font-size: clamp( 2.55rem, 12vw, 3.45rem ); line-height: 1; } .zelmor-recurring__description { margin-bottom: 26px; font-size: 1rem; line-height: 1.65; } .zelmor-recurring__frequency { margin-bottom: 26px; } .zelmor-recurring__frequency-label { font-size: 0.92rem; } .zelmor-recurring__frequency-options { grid-template-columns: 1fr; padding: 5px; } .zelmor-recurring__frequency-button { justify-content: flex-start; min-height: 46px; padding-inline: 15px; font-size: 0.94rem; } .zelmor-recurring__frequency-status { font-size: 0.9rem; } .zelmor-recurring__actions { align-items: stretch; flex-direction: column; gap: 10px; } .zelmor-recurring__estimate { justify-content: space-between; width: 100%; min-height: 53px; } .zelmor-recurring__gallery-link { justify-content: center; width: 100%; font-size: 0.94rem; } .zelmor-recurring__visual { width: 100%; } .zelmor-recurring__figure { aspect-ratio: 0.98; border-radius: 24px 24px 54px 24px; } .zelmor-recurring__visual-label { top: 16px; left: 16px; min-height: 40px; font-size: 0.88rem; } .zelmor-recurring__visual-card { left: 14px; right: 14px; bottom: 14px; min-height: 69px; padding: 11px 13px; } .zelmor-recurring__visual-card-check { width: 38px; height: 38px; } .zelmor-recurring__visual-card strong { font-size: 0.95rem; } .zelmor-recurring__visual-card div span { font-size: 0.88rem; } .zelmor-recurring__ring { display: none; } .zelmor-recurring__included { margin-top: 46px; padding: 21px 17px; border-radius: 23px; } .zelmor-recurring__included-header { grid-template-columns: 1fr; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; } .zelmor-recurring__included-kicker { font-size: 0.9rem; } .zelmor-recurring__included-header h3 { font-size: clamp( 2rem, 9vw, 2.6rem ); } .zelmor-recurring__included-header p { font-size: 1rem; line-height: 1.6; } .zelmor-recurring__checklist { grid-template-columns: 1fr; gap: 8px; } .zelmor-recurring__check-item { min-height: auto; padding: 14px; } .zelmor-recurring__check-item strong { font-size: 0.96rem; } .zelmor-recurring__check-item div span { font-size: 0.9rem; } } /* ========================================================= 25. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-recurring__image, .zelmor-recurring__frequency-button, .zelmor-recurring__estimate, .zelmor-recurring__estimate-icon, .zelmor-recurring__gallery-link, .zelmor-recurring__check-item, .zelmor-recurring [data-zelmor-recurring-reveal] { transition: none !important; } .zelmor-recurring.is-motion-ready [data-zelmor-recurring-reveal] { opacity: 1 !important; transform: none !important; } .zelmor-recurring__figure:hover .zelmor-recurring__image, .zelmor-recurring__check-item:hover { transform: none; } } /* ========================================================= ZELMOR HOUSE CLEANING 08. MOVE-IN / MOVE-OUT FEATURE ========================================================= */ /* ========================================================= 01. SECTION ========================================================= */ .zelmor-move { position: relative; overflow: hidden; background-color: var(--zelmor-ivory); } .zelmor-move::before { content: ""; position: absolute; top: -280px; right: -280px; width: 620px; height: 620px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-pink-rgb), 0.05); } .zelmor-move::after { content: ""; position: absolute; left: -300px; bottom: -360px; width: 640px; height: 640px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-aqua-rgb), 0.045); } /* ========================================================= 02. MAIN EDITORIAL LAYOUT ========================================================= */ .zelmor-move__layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(380px, 0.86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(60px, 7vw, 110px); } /* ========================================================= 03. VISUAL ========================================================= */ .zelmor-move__visual { position: relative; width: min(100%, 500px); } /* ========================================================= 04. FIGURE ========================================================= */ .zelmor-move__figure { position: relative; z-index: 2; width: 100%; aspect-ratio: 0.82; margin: 0; overflow: hidden; border-radius: 90px 34px 34px 34px; background-color: var(--zelmor-silver-light); box-shadow: 0 30px 80px rgba(var(--zelmor-navy-rgb), 0.15); } /* ========================================================= 05. IMAGE ========================================================= */ .zelmor-move__image { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); transition: transform 900ms var(--zelmor-ease); } .zelmor-move__figure:hover .zelmor-move__image { transform: scale(1.045); } /* ========================================================= 06. IMAGE SHADE ========================================================= */ .zelmor-move__image-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(var(--zelmor-navy-rgb), 0.03) 25%, rgba(var(--zelmor-navy-rgb), 0.12) 60%, rgba(var(--zelmor-navy-rgb), 0.64) 100% ); } /* ========================================================= 07. IMAGE BADGE ========================================================= */ .zelmor-move__image-badge { position: absolute; top: 23px; right: 23px; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding-inline: 14px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.2); border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background: rgba(var(--zelmor-navy-rgb), 0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 0.9rem; font-weight: var(--zelmor-weight-semibold); line-height: 1.35; } .zelmor-move__image-badge-icon { color: var(--zelmor-aqua); font-size: 1rem; } /* ========================================================= 08. IMAGE CAPTION ========================================================= */ .zelmor-move__image-caption { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 15px; min-height: 78px; padding: 13px 16px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.18); border-radius: 21px; color: var(--zelmor-white); background: rgba(var(--zelmor-navy-rgb), 0.76); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } .zelmor-move__image-caption-number { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 15px; color: var(--zelmor-white); background-color: var(--zelmor-pink-600); font-size: 0.92rem; font-weight: var(--zelmor-weight-bold); } .zelmor-move__image-caption div { display: flex; flex-direction: column; gap: 3px; } .zelmor-move__image-caption strong { color: var(--zelmor-white); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-move__image-caption div span { color: rgba(var(--zelmor-white-rgb), 0.68); font-size: 0.9rem; line-height: 1.4; } /* ========================================================= 09. DECORATIVE OUTLINE ========================================================= */ .zelmor-move__visual-outline { position: absolute; z-index: 0; left: -34px; bottom: -34px; width: 190px; height: 190px; border: 1px solid rgba(var(--zelmor-aqua-rgb), 0.28); border-radius: 50%; box-shadow: 0 0 0 30px rgba(var(--zelmor-aqua-rgb), 0.025), 0 0 0 62px rgba(var(--zelmor-aqua-rgb), 0.015); pointer-events: none; } /* ========================================================= 10. CONTENT ========================================================= */ .zelmor-move__content { max-width: 720px; } /* ========================================================= 11. EYEBROW ========================================================= */ .zelmor-move__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--zelmor-pink-600); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.055em; text-transform: uppercase; } .zelmor-move__eyebrow-line { width: 38px; height: 2px; border-radius: 999px; background-color: var(--zelmor-pink-600); } /* ========================================================= 12. TITLE ========================================================= */ .zelmor-move__title { max-width: 720px; margin-bottom: 23px; color: var(--zelmor-navy-950); font-size: clamp( 3.1rem, 5vw, 5.15rem ); line-height: 0.98; letter-spacing: -0.04em; } .zelmor-move__title span { display: block; color: var(--zelmor-pink-600); } /* ========================================================= 13. TEXT ========================================================= */ .zelmor-move__lead { max-width: 660px; margin-bottom: 13px; color: var(--zelmor-charcoal); font-size: clamp( 1.06rem, 1.3vw, 1.18rem ); font-weight: var(--zelmor-weight-medium); line-height: 1.68; } .zelmor-move__description { max-width: 660px; margin-bottom: 29px; color: var(--zelmor-slate); font-size: 1.03rem; line-height: 1.7; } /* ========================================================= 14. MOVE TYPES ========================================================= */ .zelmor-move__types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 30px; } .zelmor-move__type { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 13px; padding: 16px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 18px; background: rgba(var(--zelmor-white-rgb), 0.68); box-shadow: 0 8px 24px rgba(var(--zelmor-navy-rgb), 0.045); transition: transform var(--zelmor-transition), border-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-move__type:hover { transform: translateY(-3px); border-color: rgba(var(--zelmor-pink-rgb), 0.18); box-shadow: 0 15px 34px rgba(var(--zelmor-navy-rgb), 0.08); } .zelmor-move__type-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua-soft); } .zelmor-move__type:nth-child(2) .zelmor-move__type-icon { background-color: var(--zelmor-pink-100); } .zelmor-move__type-icon svg { width: 21px; height: 21px; } .zelmor-move__type div { display: flex; flex-direction: column; gap: 4px; } .zelmor-move__type strong { color: var(--zelmor-navy-950); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-move__type div span { color: var(--zelmor-slate); font-size: 0.93rem; line-height: 1.55; } /* ========================================================= 15. ACTIONS ========================================================= */ .zelmor-move__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; } /* ========================================================= 16. ESTIMATE ========================================================= */ .zelmor-move__estimate { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 55px; padding: 6px 7px 6px 21px; border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background-color: var(--zelmor-pink-600); box-shadow: 0 14px 34px rgba(var(--zelmor-pink-rgb), 0.23); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); transition: background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-move__estimate:hover { background-color: var(--zelmor-navy-950); box-shadow: 0 17px 40px rgba(var(--zelmor-navy-rgb), 0.18); } .zelmor-move__estimate-icon { display: grid; place-items: center; width: 41px; height: 41px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-white); transition: transform var(--zelmor-transition); } .zelmor-move__estimate:hover .zelmor-move__estimate-icon { transform: rotate(7deg); } .zelmor-move__estimate-icon svg { width: 18px; height: 18px; } /* ========================================================= 17. GALLERY LINK ========================================================= */ .zelmor-move__gallery { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; color: var(--zelmor-navy-950); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); transition: color var(--zelmor-transition), gap var(--zelmor-transition); } .zelmor-move__gallery:hover { gap: 14px; color: var(--zelmor-pink-600); } /* ========================================================= 18. DETAILS PANEL ========================================================= */ .zelmor-move__details { position: relative; z-index: 2; margin-top: 78px; padding: 39px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 30px; background: rgba(var(--zelmor-white-rgb), 0.77); box-shadow: 0 22px 60px rgba(var(--zelmor-navy-rgb), 0.075); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ========================================================= 19. DETAILS HEADER ========================================================= */ .zelmor-move__details-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr); align-items: end; gap: 50px; margin-bottom: 31px; padding-bottom: 29px; border-bottom: 1px solid rgba(var(--zelmor-navy-rgb), 0.09); } .zelmor-move__details-kicker { display: block; margin-bottom: 8px; color: var(--zelmor-aqua); font-size: 0.94rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.045em; text-transform: uppercase; } .zelmor-move__details-header h3 { margin: 0; color: var(--zelmor-navy-950); font-size: clamp( 2rem, 3vw, 3.2rem ); line-height: 1; letter-spacing: -0.025em; } .zelmor-move__details-header h3 span { color: var(--zelmor-pink-600); } .zelmor-move__details-header p { margin: 0; color: var(--zelmor-slate); font-size: 1rem; line-height: 1.65; } /* ========================================================= 20. CHECKLIST ========================================================= */ .zelmor-move__checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* ========================================================= 21. DETAIL ITEM ========================================================= */ .zelmor-move__item { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 12px; min-height: 118px; padding: 17px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.075); border-radius: 18px; background-color: rgba(var(--zelmor-ivory-rgb, 248, 245, 239), 0.45); transition: transform var(--zelmor-transition), border-color var(--zelmor-transition), background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-move__item:hover { transform: translateY(-3px); border-color: rgba(var(--zelmor-pink-rgb), 0.17); background-color: var(--zelmor-white); box-shadow: 0 13px 30px rgba(var(--zelmor-navy-rgb), 0.06); } .zelmor-move__item-number { min-width: 26px; padding-top: 5px; color: rgba(var(--zelmor-navy-rgb), 0.42); font-size: 0.87rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-move__item-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-white); background-color: var(--zelmor-pink-600); font-size: 0.76rem; font-weight: var(--zelmor-weight-extrabold); } .zelmor-move__item div { display: flex; flex-direction: column; gap: 5px; } .zelmor-move__item strong { color: var(--zelmor-navy-950); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-move__item p { margin: 0; color: var(--zelmor-slate); font-size: 0.93rem; line-height: 1.55; } /* ========================================================= 22. MOTION ========================================================= */ .zelmor-move.is-motion-ready [data-zelmor-move-reveal] { opacity: 0; transform: translate3d( 0, 28px, 0 ); transition: opacity 760ms var(--zelmor-ease), transform 760ms var(--zelmor-ease); } .zelmor-move.is-motion-ready [data-zelmor-move-reveal="visual"] { transform: translate3d( -28px, 18px, 0 ); } .zelmor-move.is-motion-ready [data-zelmor-move-reveal="content"] { transform: translate3d( 28px, 18px, 0 ); } .zelmor-move.is-motion-ready [data-zelmor-move-reveal].is-visible { opacity: 1; transform: translate3d( 0, 0, 0 ); } /* ========================================================= 23. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- 1. COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { .zelmor-move__layout { grid-template-columns: minmax(390px, 0.86fr) minmax(0, 1.14fr); } .zelmor-move__visual { width: min(100%, 505px); } } /* --------------------------------------------------------- 2. TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .zelmor-move__layout { grid-template-columns: minmax(310px, 0.82fr) minmax(0, 1.18fr); gap: 48px; } .zelmor-move__figure { border-radius: 70px 30px 30px 30px; } .zelmor-move__title { font-size: clamp( 2.8rem, 5vw, 4.1rem ); } .zelmor-move__lead { font-size: 1.05rem; } .zelmor-move__types { grid-template-columns: 1fr; } .zelmor-move__details { margin-top: 63px; padding: 31px; } .zelmor-move__details-header { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr); gap: 35px; } } /* --------------------------------------------------------- 3. MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { .zelmor-move__layout { grid-template-columns: 1fr; gap: 50px; } .zelmor-move__visual { width: min(100%, 540px); margin-inline: auto; } .zelmor-move__figure { aspect-ratio: 1.02; border-radius: 58px 27px 27px 27px; } .zelmor-move__content { max-width: 620px; } .zelmor-move__title { font-size: clamp( 2.8rem, 10vw, 4rem ); } .zelmor-move__lead { font-size: 1.05rem; } .zelmor-move__types { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zelmor-move__details { margin-top: 55px; padding: 27px; } .zelmor-move__details-header { grid-template-columns: 1fr; gap: 17px; } .zelmor-move__checklist { grid-template-columns: 1fr; } .zelmor-move__item { min-height: auto; } } /* --------------------------------------------------------- 4. SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { .zelmor-move__layout { grid-template-columns: 1fr; gap: 42px; } .zelmor-move__visual { width: 100%; } .zelmor-move__figure { aspect-ratio: 0.98; border-radius: 48px 23px 23px 23px; } .zelmor-move__image-badge { top: 15px; right: 15px; min-height: 39px; padding-inline: 11px; font-size: 0.88rem; } .zelmor-move__image-caption { left: 14px; right: 14px; bottom: 14px; min-height: 69px; padding: 11px 13px; } .zelmor-move__image-caption-number { width: 40px; height: 40px; } .zelmor-move__image-caption strong { font-size: 0.95rem; } .zelmor-move__image-caption div span { font-size: 0.88rem; } .zelmor-move__visual-outline { display: none; } .zelmor-move__eyebrow { margin-bottom: 15px; font-size: 0.9rem; } .zelmor-move__title { margin-bottom: 20px; font-size: clamp( 2.55rem, 12vw, 3.45rem ); line-height: 1; } .zelmor-move__lead { font-size: 1.04rem; line-height: 1.62; } .zelmor-move__description { margin-bottom: 25px; font-size: 1rem; line-height: 1.65; } .zelmor-move__types { grid-template-columns: 1fr; margin-bottom: 26px; } .zelmor-move__type strong { font-size: 1rem; } .zelmor-move__type div span { font-size: 0.93rem; } .zelmor-move__actions { align-items: stretch; flex-direction: column; gap: 10px; } .zelmor-move__estimate { justify-content: space-between; width: 100%; min-height: 53px; } .zelmor-move__gallery { justify-content: center; width: 100%; font-size: 0.94rem; } .zelmor-move__details { margin-top: 46px; padding: 21px 17px; border-radius: 23px; } .zelmor-move__details-header { grid-template-columns: 1fr; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; } .zelmor-move__details-kicker { font-size: 0.9rem; } .zelmor-move__details-header h3 { font-size: clamp( 2rem, 9vw, 2.6rem ); } .zelmor-move__details-header p { font-size: 1rem; line-height: 1.6; } .zelmor-move__checklist { grid-template-columns: 1fr; gap: 8px; } .zelmor-move__item { grid-template-columns: auto minmax(0, 1fr); min-height: auto; padding: 14px; } .zelmor-move__item-number { display: none; } .zelmor-move__item strong { font-size: 0.98rem; } .zelmor-move__item p { font-size: 0.93rem; line-height: 1.55; } } /* ========================================================= 24. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-move__image, .zelmor-move__type, .zelmor-move__estimate, .zelmor-move__estimate-icon, .zelmor-move__gallery, .zelmor-move__item, .zelmor-move [data-zelmor-move-reveal] { transition: none !important; } .zelmor-move.is-motion-ready [data-zelmor-move-reveal] { opacity: 1 !important; transform: none !important; } .zelmor-move__figure:hover .zelmor-move__image, .zelmor-move__type:hover, .zelmor-move__item:hover { transform: none; } } /* ========================================================= ZELMOR HOUSE CLEANING 09. DEEP CLEANING / CUSTOMIZED CLEANING ========================================================= */ /* ========================================================= 01. SECTION ========================================================= */ .zelmor-deepcustom { position: relative; overflow: hidden; background-color: var(--zelmor-warm-white); } .zelmor-deepcustom::before { content: ""; position: absolute; top: 150px; left: -330px; width: 660px; height: 660px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-aqua-rgb), 0.045); } .zelmor-deepcustom::after { content: ""; position: absolute; right: -280px; bottom: -360px; width: 620px; height: 620px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-pink-rgb), 0.04); } /* ========================================================= 02. HEADER ========================================================= */ .zelmor-deepcustom__header { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.72fr); align-items: end; gap: 70px; margin-bottom: 53px; } /* ========================================================= 03. EYEBROW ========================================================= */ .zelmor-deepcustom__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; color: var(--zelmor-pink-600); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.055em; text-transform: uppercase; } .zelmor-deepcustom__eyebrow-line { width: 38px; height: 2px; border-radius: 999px; background-color: var(--zelmor-pink-600); } /* ========================================================= 04. TITLE ========================================================= */ .zelmor-deepcustom__title { max-width: 760px; margin: 0; color: var(--zelmor-navy-950); font-size: clamp( 3.1rem, 5vw, 5.2rem ); line-height: 0.98; letter-spacing: -0.04em; } .zelmor-deepcustom__title span { display: block; color: var(--zelmor-pink-600); } /* ========================================================= 05. HEADER COPY ========================================================= */ .zelmor-deepcustom__header-copy { max-width: 500px; margin: 0; color: var(--zelmor-slate); font-size: 1.05rem; line-height: 1.7; } /* ========================================================= 06. MAIN LAYOUT ========================================================= */ .zelmor-deepcustom__layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(380px, 0.78fr) minmax(0, 1.22fr); align-items: start; gap: clamp(48px, 6vw, 90px); } /* ========================================================= 07. VISUAL ========================================================= */ .zelmor-deepcustom__visual { position: sticky; top: calc( var(--zelmor-header-height) + 28px ); width: min(100%, 500px); } /* * The image itself is sticky only on desktop/tablet. * This section is far below the first screen, so it does * not interact with the mobile header system. */ /* ========================================================= 08. FIGURE ========================================================= */ .zelmor-deepcustom__figure { position: relative; z-index: 2; width: 100%; aspect-ratio: 0.83; margin: 0; overflow: hidden; border-radius: 34px 90px 34px 34px; background-color: var(--zelmor-silver-light); box-shadow: 0 30px 80px rgba(var(--zelmor-navy-rgb), 0.14); } /* ========================================================= 09. IMAGE ========================================================= */ .zelmor-deepcustom__image { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); transition: transform 900ms var(--zelmor-ease); } .zelmor-deepcustom__figure:hover .zelmor-deepcustom__image { transform: scale(1.045); } /* ========================================================= 10. SHADE ========================================================= */ .zelmor-deepcustom__image-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(var(--zelmor-navy-rgb), 0.02) 25%, rgba(var(--zelmor-navy-rgb), 0.13) 62%, rgba(var(--zelmor-navy-rgb), 0.68) 100% ); } /* ========================================================= 11. IMAGE LABEL ========================================================= */ .zelmor-deepcustom__image-label { position: absolute; top: 22px; left: 22px; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding-inline: 14px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.2); border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background: rgba(var(--zelmor-navy-rgb), 0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 0.9rem; font-weight: var(--zelmor-weight-semibold); line-height: 1.4; } .zelmor-deepcustom__image-label-mark { color: var(--zelmor-aqua); font-size: 1rem; } /* ========================================================= 12. IMAGE CARD ========================================================= */ .zelmor-deepcustom__image-card { position: absolute; left: 21px; right: 21px; bottom: 21px; display: flex; align-items: center; gap: 13px; min-height: 78px; padding: 13px 15px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.18); border-radius: 20px; color: var(--zelmor-white); background: rgba(var(--zelmor-navy-rgb), 0.77); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } .zelmor-deepcustom__image-card-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua); } .zelmor-deepcustom__image-card-icon svg { width: 21px; height: 21px; } .zelmor-deepcustom__image-card div { display: flex; flex-direction: column; gap: 3px; } .zelmor-deepcustom__image-card strong { color: var(--zelmor-white); font-size: 0.98rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-deepcustom__image-card div span { color: rgba(var(--zelmor-white-rgb), 0.68); font-size: 0.9rem; line-height: 1.4; } /* ========================================================= 13. DECORATION ========================================================= */ .zelmor-deepcustom__visual-ring { position: absolute; z-index: 0; top: -43px; right: -45px; width: 170px; height: 170px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.25); border-radius: 50%; box-shadow: 0 0 0 30px rgba(var(--zelmor-pink-rgb), 0.023), 0 0 0 62px rgba(var(--zelmor-pink-rgb), 0.014); pointer-events: none; } .zelmor-deepcustom__visual-dot { position: absolute; z-index: 3; right: -5px; bottom: 23%; width: 15px; height: 15px; border: 4px solid var(--zelmor-warm-white); border-radius: 50%; background-color: var(--zelmor-pink-600); box-shadow: 0 0 0 5px rgba(var(--zelmor-pink-rgb), 0.1); pointer-events: none; } /* ========================================================= 14. SERVICES COLUMN ========================================================= */ .zelmor-deepcustom__services { display: flex; flex-direction: column; gap: 16px; } /* ========================================================= 15. SERVICE PANEL ========================================================= */ .zelmor-deepcustom__service { position: relative; overflow: hidden; padding: 29px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 27px; background-color: var(--zelmor-white); box-shadow: 0 14px 40px rgba(var(--zelmor-navy-rgb), 0.065); transition: transform var(--zelmor-transition), border-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-deepcustom__service::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background-color: var(--zelmor-pink-600); } .zelmor-deepcustom__service--custom::before { background-color: var(--zelmor-aqua); } .zelmor-deepcustom__service:hover { transform: translateY(-4px); border-color: rgba(var(--zelmor-pink-rgb), 0.15); box-shadow: 0 20px 48px rgba(var(--zelmor-navy-rgb), 0.1); } .zelmor-deepcustom__service--custom:hover { border-color: rgba(var(--zelmor-aqua-rgb), 0.2); } /* ========================================================= 16. SERVICE TOP ========================================================= */ .zelmor-deepcustom__service-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 19px; } .zelmor-deepcustom__service-number { color: rgba(var(--zelmor-navy-rgb), 0.44); font-size: 0.9rem; font-weight: var(--zelmor-weight-bold); } .zelmor-deepcustom__service-label { display: inline-flex; align-items: center; min-height: 34px; padding-inline: 12px; border-radius: var(--zelmor-radius-pill); color: var(--zelmor-pink-600); background-color: var(--zelmor-pink-100); font-size: 0.88rem; font-weight: var(--zelmor-weight-bold); line-height: 1.3; } .zelmor-deepcustom__service--custom .zelmor-deepcustom__service-label { color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua-soft); } /* ========================================================= 17. SERVICE TITLE ========================================================= */ .zelmor-deepcustom__service h3 { margin-bottom: 13px; color: var(--zelmor-navy-950); font-size: clamp( 2rem, 3.2vw, 3rem ); line-height: 1; letter-spacing: -0.025em; } /* ========================================================= 18. SERVICE INTRO ========================================================= */ .zelmor-deepcustom__service-intro { max-width: 680px; margin-bottom: 23px; color: var(--zelmor-slate); font-size: 1rem; line-height: 1.67; } /* ========================================================= 19. WHEN LIST ========================================================= */ .zelmor-deepcustom__when { margin-bottom: 24px; } .zelmor-deepcustom__when-title { display: block; margin-bottom: 11px; color: var(--zelmor-navy-950); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-deepcustom__when ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .zelmor-deepcustom__when li { display: flex; align-items: flex-start; gap: 9px; min-height: 68px; padding: 11px 12px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.07); border-radius: 14px; color: var(--zelmor-slate); background-color: var(--zelmor-ivory); font-size: 0.93rem; line-height: 1.5; } .zelmor-deepcustom__when li > span:first-child { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-white); background-color: var(--zelmor-pink-600); font-size: 0.7rem; font-weight: var(--zelmor-weight-bold); } /* ========================================================= 20. CUSTOM ITEMS ========================================================= */ .zelmor-deepcustom__custom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; } .zelmor-deepcustom__custom-item { display: flex; flex-direction: column; gap: 12px; min-height: 154px; padding: 15px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.07); border-radius: 16px; background-color: rgba(var(--zelmor-aqua-rgb), 0.055); } .zelmor-deepcustom__custom-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua-soft); font-size: 0.86rem; font-weight: var(--zelmor-weight-bold); } .zelmor-deepcustom__custom-item div { display: flex; flex-direction: column; gap: 5px; } .zelmor-deepcustom__custom-item strong { color: var(--zelmor-navy-950); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-deepcustom__custom-item div span { color: var(--zelmor-slate); font-size: 0.91rem; line-height: 1.5; } /* ========================================================= 21. SERVICE LINK ========================================================= */ .zelmor-deepcustom__service-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--zelmor-navy-950); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); transition: color var(--zelmor-transition), gap var(--zelmor-transition); } .zelmor-deepcustom__service-link:hover { gap: 14px; color: var(--zelmor-pink-600); } .zelmor-deepcustom__service--custom .zelmor-deepcustom__service-link:hover { color: var(--zelmor-aqua); } /* ========================================================= 22. BOTTOM ========================================================= */ .zelmor-deepcustom__bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-top: 43px; padding: 23px 24px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 22px; background-color: var(--zelmor-ivory); } /* ========================================================= 23. BOTTOM COPY ========================================================= */ .zelmor-deepcustom__bottom-copy { display: flex; align-items: flex-start; gap: 14px; max-width: 720px; } .zelmor-deepcustom__bottom-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-white); background-color: var(--zelmor-navy-950); font-size: 1rem; font-weight: var(--zelmor-weight-bold); } .zelmor-deepcustom__bottom-copy div { display: flex; flex-direction: column; gap: 4px; } .zelmor-deepcustom__bottom-copy strong { color: var(--zelmor-navy-950); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-deepcustom__bottom-copy p { margin: 0; color: var(--zelmor-slate); font-size: 0.96rem; line-height: 1.58; } /* ========================================================= 24. ESTIMATE BUTTON ========================================================= */ .zelmor-deepcustom__estimate { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 54px; padding: 6px 7px 6px 20px; border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background-color: var(--zelmor-pink-600); box-shadow: 0 13px 32px rgba(var(--zelmor-pink-rgb), 0.22); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); white-space: nowrap; transition: background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-deepcustom__estimate:hover { background-color: var(--zelmor-navy-950); box-shadow: 0 16px 38px rgba(var(--zelmor-navy-rgb), 0.18); } .zelmor-deepcustom__estimate-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-white); transition: transform var(--zelmor-transition); } .zelmor-deepcustom__estimate:hover .zelmor-deepcustom__estimate-icon { transform: rotate(7deg); } .zelmor-deepcustom__estimate-icon svg { width: 18px; height: 18px; } /* ========================================================= 25. REVEAL MOTION ========================================================= */ .zelmor-deepcustom.is-motion-ready [data-zelmor-deepcustom-reveal] { opacity: 0; transform: translate3d( 0, 26px, 0 ); transition: opacity 740ms var(--zelmor-ease), transform 740ms var(--zelmor-ease); } .zelmor-deepcustom.is-motion-ready [data-zelmor-deepcustom-reveal="visual"] { transform: translate3d( -25px, 18px, 0 ); } .zelmor-deepcustom.is-motion-ready [data-zelmor-deepcustom-reveal="service"] { transform: translate3d( 25px, 18px, 0 ); } .zelmor-deepcustom.is-motion-ready [data-zelmor-deepcustom-reveal].is-visible { opacity: 1; transform: translate3d( 0, 0, 0 ); } /* ========================================================= 26. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- 1. COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { .zelmor-deepcustom__layout { grid-template-columns: minmax(400px, 0.78fr) minmax(0, 1.22fr); } .zelmor-deepcustom__visual { width: min(100%, 510px); } } /* --------------------------------------------------------- 2. TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .zelmor-deepcustom__header { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.8fr); gap: 45px; margin-bottom: 44px; } .zelmor-deepcustom__title { font-size: clamp( 2.8rem, 5vw, 4.2rem ); } .zelmor-deepcustom__header-copy { font-size: 1rem; } .zelmor-deepcustom__layout { grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr); gap: 42px; } .zelmor-deepcustom__visual { top: calc( var(--zelmor-header-height) + 20px ); } .zelmor-deepcustom__figure { border-radius: 29px 66px 29px 29px; } .zelmor-deepcustom__service { padding: 24px; } .zelmor-deepcustom__when ul { grid-template-columns: 1fr; } .zelmor-deepcustom__when li { min-height: auto; } .zelmor-deepcustom__custom-grid { grid-template-columns: 1fr; } .zelmor-deepcustom__custom-item { flex-direction: row; min-height: auto; } .zelmor-deepcustom__bottom { align-items: flex-start; } } /* --------------------------------------------------------- 3. MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { .zelmor-deepcustom__header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 38px; } .zelmor-deepcustom__title { max-width: 620px; font-size: clamp( 2.8rem, 10vw, 4rem ); } .zelmor-deepcustom__header-copy { max-width: 610px; font-size: 1rem; } .zelmor-deepcustom__layout { grid-template-columns: 1fr; gap: 48px; } /* * No sticky image on mobile. * Keep scrolling behavior simple and predictable. */ .zelmor-deepcustom__visual { position: relative; top: auto; width: min(100%, 550px); margin-inline: auto; } .zelmor-deepcustom__figure { aspect-ratio: 1.04; border-radius: 27px 60px 27px 27px; } .zelmor-deepcustom__services { gap: 13px; } .zelmor-deepcustom__service { padding: 24px; } .zelmor-deepcustom__service h3 { font-size: clamp( 2rem, 7vw, 2.8rem ); } .zelmor-deepcustom__service-intro { font-size: 1rem; } .zelmor-deepcustom__when ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zelmor-deepcustom__custom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zelmor-deepcustom__bottom { align-items: flex-start; flex-direction: column; gap: 19px; } } /* --------------------------------------------------------- 4. SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { .zelmor-deepcustom__header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 33px; } .zelmor-deepcustom__eyebrow { margin-bottom: 15px; font-size: 0.9rem; } .zelmor-deepcustom__title { font-size: clamp( 2.55rem, 12vw, 3.45rem ); line-height: 1; } .zelmor-deepcustom__header-copy { font-size: 1rem; line-height: 1.63; } .zelmor-deepcustom__layout { grid-template-columns: 1fr; gap: 39px; } .zelmor-deepcustom__visual { position: relative; top: auto; width: 100%; } .zelmor-deepcustom__figure { aspect-ratio: 0.98; border-radius: 23px 50px 23px 23px; } .zelmor-deepcustom__image-label { top: 15px; left: 15px; min-height: 39px; font-size: 0.88rem; } .zelmor-deepcustom__image-card { left: 14px; right: 14px; bottom: 14px; min-height: 69px; padding: 11px 13px; } .zelmor-deepcustom__image-card-icon { width: 39px; height: 39px; } .zelmor-deepcustom__image-card strong { font-size: 0.95rem; } .zelmor-deepcustom__image-card div span { font-size: 0.88rem; } .zelmor-deepcustom__visual-ring, .zelmor-deepcustom__visual-dot { display: none; } .zelmor-deepcustom__service { padding: 20px 17px; border-radius: 22px; } .zelmor-deepcustom__service-top { margin-bottom: 16px; } .zelmor-deepcustom__service h3 { font-size: clamp( 2rem, 9vw, 2.6rem ); } .zelmor-deepcustom__service-intro { margin-bottom: 20px; font-size: 1rem; line-height: 1.62; } .zelmor-deepcustom__when-title { font-size: 0.95rem; } .zelmor-deepcustom__when ul { grid-template-columns: 1fr; } .zelmor-deepcustom__when li { min-height: auto; font-size: 0.94rem; } .zelmor-deepcustom__custom-grid { grid-template-columns: 1fr; } .zelmor-deepcustom__custom-item { flex-direction: row; min-height: auto; padding: 14px; } .zelmor-deepcustom__custom-item strong { font-size: 0.96rem; } .zelmor-deepcustom__custom-item div span { font-size: 0.92rem; } .zelmor-deepcustom__service-link { font-size: 0.94rem; } .zelmor-deepcustom__bottom { align-items: stretch; flex-direction: column; gap: 18px; margin-top: 34px; padding: 19px 17px; } .zelmor-deepcustom__bottom-copy strong { font-size: 0.98rem; } .zelmor-deepcustom__bottom-copy p { font-size: 0.95rem; } .zelmor-deepcustom__estimate { justify-content: space-between; width: 100%; min-height: 52px; font-size: 0.94rem; } } /* ========================================================= 27. REDUCED MOTION Accessibility — not a layout breakpoint ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-deepcustom__image, .zelmor-deepcustom__service, .zelmor-deepcustom__service-link, .zelmor-deepcustom__estimate, .zelmor-deepcustom__estimate-icon, .zelmor-deepcustom [data-zelmor-deepcustom-reveal] { transition: none !important; } .zelmor-deepcustom.is-motion-ready [data-zelmor-deepcustom-reveal] { opacity: 1 !important; transform: none !important; } .zelmor-deepcustom__figure:hover .zelmor-deepcustom__image, .zelmor-deepcustom__service:hover { transform: none; } } /* ========================================================= ZELMOR HOUSE CLEANING 11. WHY CHOOSE US ========================================================= */ /* ========================================================= 01. SECTION ========================================================= */ .zelmor-why { position: relative; overflow: hidden; background-color: var(--zelmor-ivory); } .zelmor-why::before { content: ""; position: absolute; top: -330px; right: -310px; width: 660px; height: 660px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-aqua-rgb), 0.05); } .zelmor-why::after { content: ""; position: absolute; left: -260px; bottom: -330px; width: 580px; height: 580px; border-radius: 50%; pointer-events: none; background: rgba(var(--zelmor-pink-rgb), 0.045); } /* ========================================================= 02. HEADER ========================================================= */ .zelmor-why__header { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.75fr); align-items: end; gap: 70px; margin-bottom: 52px; } /* ========================================================= 03. EYEBROW ========================================================= */ .zelmor-why__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; color: var(--zelmor-pink-600); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.055em; text-transform: uppercase; } .zelmor-why__eyebrow-line { width: 38px; height: 2px; border-radius: 999px; background-color: var(--zelmor-pink-600); } /* ========================================================= 04. TITLE ========================================================= */ .zelmor-why__title { max-width: 760px; margin: 0; color: var(--zelmor-navy-950); font-size: clamp( 3.1rem, 5vw, 5.2rem ); line-height: 0.98; letter-spacing: -0.04em; } .zelmor-why__title span { display: block; color: var(--zelmor-pink-600); } /* ========================================================= 05. HEADER COPY ========================================================= */ .zelmor-why__header-copy { max-width: 520px; margin: 0; color: var(--zelmor-slate); font-size: 1.05rem; line-height: 1.7; } /* ========================================================= 06. MAIN LAYOUT ========================================================= */ .zelmor-why__layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr); align-items: stretch; gap: 17px; } /* ========================================================= 07. MANIFESTO ========================================================= */ .zelmor-why__manifesto { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: 34px; overflow: hidden; border: 1px solid rgba(var(--zelmor-white-rgb), 0.08); border-radius: 32px 32px 32px 72px; color: var(--zelmor-white); background-color: var(--zelmor-navy-950); box-shadow: 0 24px 65px rgba(var(--zelmor-navy-rgb), 0.16); } .zelmor-why__manifesto::before { content: ""; position: absolute; top: -130px; right: -130px; width: 320px; height: 320px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.23); border-radius: 50%; box-shadow: 0 0 0 34px rgba(var(--zelmor-pink-rgb), 0.025), 0 0 0 75px rgba(var(--zelmor-pink-rgb), 0.014); pointer-events: none; } /* ========================================================= 08. MANIFESTO NUMBER ========================================================= */ .zelmor-why__manifesto-number { position: absolute; right: -12px; bottom: -24px; color: rgba(var(--zelmor-white-rgb), 0.035); font-family: var(--zelmor-font-heading); font-size: clamp( 8rem, 13vw, 12rem ); line-height: 1; pointer-events: none; } /* ========================================================= 09. MANIFESTO TOP ========================================================= */ .zelmor-why__manifesto-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 70px; } .zelmor-why__manifesto-label { display: inline-flex; align-items: center; min-height: 38px; padding-inline: 13px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.13); border-radius: var(--zelmor-radius-pill); color: rgba(var(--zelmor-white-rgb), 0.8); background: rgba(var(--zelmor-white-rgb), 0.05); font-size: 0.9rem; font-weight: var(--zelmor-weight-semibold); } .zelmor-why__manifesto-star { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--zelmor-pink-100); background: rgba(var(--zelmor-pink-rgb), 0.14); font-size: 1.05rem; } /* ========================================================= 10. MANIFESTO QUOTE ========================================================= */ .zelmor-why__manifesto-quote { position: relative; z-index: 2; max-width: 460px; margin: auto 0 23px; padding: 0; color: var(--zelmor-white); font-family: var(--zelmor-font-heading); font-size: clamp( 2.5rem, 4vw, 4rem ); font-style: normal; line-height: 1; letter-spacing: -0.03em; } .zelmor-why__manifesto-quote span { display: block; color: var(--zelmor-pink-100); } /* ========================================================= 11. MANIFESTO COPY ========================================================= */ .zelmor-why__manifesto-copy { position: relative; z-index: 2; max-width: 450px; margin: 0 0 35px; color: rgba(var(--zelmor-white-rgb), 0.7); font-size: 1rem; line-height: 1.68; } /* ========================================================= 12. MANIFESTO BOTTOM ========================================================= */ .zelmor-why__manifesto-bottom { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding-top: 23px; border-top: 1px solid rgba(var(--zelmor-white-rgb), 0.1); } .zelmor-why__manifesto-detail { display: flex; align-items: center; gap: 10px; color: rgba(var(--zelmor-white-rgb), 0.72); font-size: 0.94rem; line-height: 1.45; } .zelmor-why__manifesto-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background-color: var(--zelmor-aqua); box-shadow: 0 0 0 4px rgba(var(--zelmor-aqua-rgb), 0.08); } /* ========================================================= 13. REASONS ========================================================= */ .zelmor-why__reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* ========================================================= 14. REASON CARD ========================================================= */ .zelmor-why__reason { position: relative; min-height: 220px; padding: 21px; overflow: hidden; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.075); border-radius: 22px; background: rgba(var(--zelmor-white-rgb), 0.74); box-shadow: 0 9px 26px rgba(var(--zelmor-navy-rgb), 0.045); transition: transform var(--zelmor-transition), border-color var(--zelmor-transition), background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-why__reason::after { content: ""; position: absolute; right: -55px; bottom: -65px; width: 130px; height: 130px; border-radius: 50%; background: rgba(var(--zelmor-pink-rgb), 0.035); pointer-events: none; } .zelmor-why__reason:nth-child(even)::after { background: rgba(var(--zelmor-aqua-rgb), 0.05); } .zelmor-why__reason:hover { transform: translateY(-4px); border-color: rgba(var(--zelmor-pink-rgb), 0.16); background-color: var(--zelmor-white); box-shadow: 0 17px 38px rgba(var(--zelmor-navy-rgb), 0.08); } /* ========================================================= 15. REASON TOP ========================================================= */ .zelmor-why__reason-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; } .zelmor-why__reason-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: var(--zelmor-navy-950); background-color: var(--zelmor-pink-100); transition: color var(--zelmor-transition), background-color var(--zelmor-transition); } .zelmor-why__reason:nth-child(even) .zelmor-why__reason-icon { background-color: var(--zelmor-aqua-soft); } .zelmor-why__reason:hover .zelmor-why__reason-icon { color: var(--zelmor-white); background-color: var(--zelmor-pink-600); } .zelmor-why__reason-icon svg { width: 23px; height: 23px; } .zelmor-why__reason-number { color: rgba(var(--zelmor-navy-rgb), 0.35); font-size: 0.9rem; font-weight: var(--zelmor-weight-bold); } /* ========================================================= 16. REASON TYPOGRAPHY ========================================================= */ .zelmor-why__reason h3 { position: relative; z-index: 2; margin-bottom: 9px; color: var(--zelmor-navy-950); font-family: var(--zelmor-font-body); font-size: 1.08rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-why__reason p { position: relative; z-index: 2; max-width: 430px; margin: 0; color: var(--zelmor-slate); font-size: 0.96rem; line-height: 1.62; } /* ========================================================= 17. WIDE REASON ========================================================= */ .zelmor-why__reason--wide { grid-column: 1 / -1; min-height: auto; padding: 23px 24px; } .zelmor-why__reason-wide-layout { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; } .zelmor-why__reason-wide-layout > div { max-width: 620px; } /* ========================================================= 18. WIDE CTA ========================================================= */ .zelmor-why__reason-cta { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; color: var(--zelmor-navy-950); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); white-space: nowrap; transition: color var(--zelmor-transition), gap var(--zelmor-transition); } .zelmor-why__reason-cta:hover { gap: 14px; color: var(--zelmor-pink-600); } /* ========================================================= 19. BOTTOM CTA ========================================================= */ .zelmor-why__bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-top: 34px; padding: 25px 26px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 23px; background: rgba(var(--zelmor-white-rgb), 0.7); box-shadow: 0 10px 30px rgba(var(--zelmor-navy-rgb), 0.045); } /* ========================================================= 20. BOTTOM COPY ========================================================= */ .zelmor-why__bottom-copy { display: flex; flex-direction: column; gap: 5px; } .zelmor-why__bottom-kicker { color: var(--zelmor-pink-600); font-size: 0.92rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.045em; } .zelmor-why__bottom-copy strong { color: var(--zelmor-navy-950); font-family: var(--zelmor-font-heading); font-size: clamp( 1.8rem, 2.5vw, 2.55rem ); font-weight: var(--zelmor-weight-regular); line-height: 1.08; } /* ========================================================= 21. BOTTOM ACTIONS ========================================================= */ .zelmor-why__bottom-actions { display: flex; align-items: center; gap: 18px; } /* ========================================================= 22. PHONE ========================================================= */ .zelmor-why__phone { display: flex; flex-direction: column; gap: 2px; color: var(--zelmor-navy-950); } .zelmor-why__phone span { color: var(--zelmor-slate); font-size: 0.9rem; font-weight: var(--zelmor-weight-medium); } .zelmor-why__phone strong { color: var(--zelmor-navy-950); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; transition: color var(--zelmor-transition-fast); } .zelmor-why__phone:hover strong { color: var(--zelmor-pink-600); } /* ========================================================= 23. ESTIMATE ========================================================= */ .zelmor-why__estimate { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 54px; padding: 6px 7px 6px 20px; border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background-color: var(--zelmor-pink-600); box-shadow: 0 13px 32px rgba(var(--zelmor-pink-rgb), 0.22); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); white-space: nowrap; transition: background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-why__estimate:hover { background-color: var(--zelmor-navy-950); box-shadow: 0 16px 38px rgba(var(--zelmor-navy-rgb), 0.18); } .zelmor-why__estimate-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-white); transition: transform var(--zelmor-transition); } .zelmor-why__estimate:hover .zelmor-why__estimate-icon { transform: rotate(7deg); } .zelmor-why__estimate-icon svg { width: 18px; height: 18px; } /* ========================================================= 24. REVEAL MOTION ========================================================= */ .zelmor-why.is-motion-ready [data-zelmor-why-reveal], .zelmor-why.is-motion-ready [data-zelmor-why-card] { opacity: 0; transform: translate3d( 0, 26px, 0 ); transition: opacity 720ms var(--zelmor-ease), transform 720ms var(--zelmor-ease); } .zelmor-why.is-motion-ready [data-zelmor-why-reveal="manifesto"] { transform: translate3d( -24px, 18px, 0 ); } .zelmor-why.is-motion-ready [data-zelmor-why-reveal].is-visible, .zelmor-why.is-motion-ready [data-zelmor-why-card].is-visible { opacity: 1; transform: translate3d( 0, 0, 0 ); } /* ========================================================= 25. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- 1. COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { .zelmor-why__layout { grid-template-columns: minmax(350px, 0.7fr) minmax(0, 1.3fr); } .zelmor-why__manifesto { padding: 36px; } } /* --------------------------------------------------------- 2. TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .zelmor-why__header { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.8fr); gap: 44px; margin-bottom: 43px; } .zelmor-why__title { font-size: clamp( 2.8rem, 5vw, 4.2rem ); } .zelmor-why__header-copy { font-size: 1rem; } .zelmor-why__layout { grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr); gap: 13px; } .zelmor-why__manifesto { padding: 27px; } .zelmor-why__manifesto-top { margin-bottom: 50px; } .zelmor-why__manifesto-quote { font-size: clamp( 2.25rem, 4vw, 3.2rem ); } .zelmor-why__reasons { grid-template-columns: 1fr; } .zelmor-why__reason { min-height: auto; } .zelmor-why__reason--wide { grid-column: auto; } .zelmor-why__reason-wide-layout { align-items: flex-start; flex-direction: column; gap: 14px; } .zelmor-why__bottom { align-items: flex-start; } } /* --------------------------------------------------------- 3. MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { .zelmor-why__header { grid-template-columns: 1fr; gap: 23px; margin-bottom: 38px; } .zelmor-why__title { max-width: 620px; font-size: clamp( 2.8rem, 10vw, 4rem ); } .zelmor-why__header-copy { max-width: 610px; font-size: 1rem; } .zelmor-why__layout { grid-template-columns: 1fr; gap: 14px; } .zelmor-why__manifesto { min-height: 520px; padding: 30px; border-radius: 29px 29px 29px 60px; } .zelmor-why__manifesto-top { margin-bottom: 70px; } .zelmor-why__manifesto-quote { max-width: 570px; font-size: clamp( 2.6rem, 8vw, 3.8rem ); } .zelmor-why__reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zelmor-why__reason { min-height: 230px; } .zelmor-why__reason--wide { grid-column: 1 / -1; min-height: auto; } .zelmor-why__bottom { align-items: flex-start; flex-direction: column; gap: 20px; } .zelmor-why__bottom-actions { width: 100%; justify-content: space-between; } } /* --------------------------------------------------------- 4. SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { .zelmor-why__header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; } .zelmor-why__eyebrow { margin-bottom: 15px; font-size: 0.9rem; } .zelmor-why__title { font-size: clamp( 2.55rem, 12vw, 3.45rem ); line-height: 1; } .zelmor-why__header-copy { font-size: 1rem; line-height: 1.63; } .zelmor-why__layout { grid-template-columns: 1fr; gap: 12px; } .zelmor-why__manifesto { min-height: 500px; padding: 23px 20px; border-radius: 24px 24px 24px 50px; } .zelmor-why__manifesto-top { margin-bottom: 55px; } .zelmor-why__manifesto-label { font-size: 0.88rem; } .zelmor-why__manifesto-quote { font-size: clamp( 2.35rem, 10vw, 3.15rem ); } .zelmor-why__manifesto-copy { font-size: 1rem; line-height: 1.62; } .zelmor-why__manifesto-detail { font-size: 0.93rem; } .zelmor-why__reasons { grid-template-columns: 1fr; gap: 9px; } .zelmor-why__reason, .zelmor-why__reason--wide { grid-column: auto; min-height: auto; padding: 18px; border-radius: 19px; } .zelmor-why__reason-top { margin-bottom: 19px; } .zelmor-why__reason-icon { width: 43px; height: 43px; } .zelmor-why__reason h3 { font-size: 1.05rem; } .zelmor-why__reason p { font-size: 0.96rem; line-height: 1.6; } .zelmor-why__reason-wide-layout { align-items: flex-start; flex-direction: column; gap: 14px; } .zelmor-why__reason-cta { min-height: 43px; font-size: 0.94rem; } .zelmor-why__bottom { align-items: stretch; flex-direction: column; gap: 19px; margin-top: 28px; padding: 20px 17px; } .zelmor-why__bottom-copy strong { font-size: clamp( 1.75rem, 8vw, 2.2rem ); } .zelmor-why__bottom-actions { align-items: stretch; flex-direction: column; width: 100%; gap: 13px; } .zelmor-why__phone { align-items: center; text-align: center; } .zelmor-why__phone span { font-size: 0.9rem; } .zelmor-why__phone strong { font-size: 1rem; } .zelmor-why__estimate { justify-content: space-between; width: 100%; min-height: 52px; font-size: 0.94rem; } } /* ========================================================= 26. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-why__reason, .zelmor-why__reason-icon, .zelmor-why__reason-cta, .zelmor-why__estimate, .zelmor-why__estimate-icon, .zelmor-why [data-zelmor-why-reveal], .zelmor-why [data-zelmor-why-card] { transition: none !important; } .zelmor-why.is-motion-ready [data-zelmor-why-reveal], .zelmor-why.is-motion-ready [data-zelmor-why-card] { opacity: 1 !important; transform: none !important; } .zelmor-why__reason:hover { transform: none; } } /* ========================================================= ZELMOR HOUSE CLEANING 14. REVIEWS / ELFSIGHT ========================================================= */ /* ========================================================= 01. SECTION ========================================================= */ .zelmor-reviews { position: relative; overflow: hidden; background-color: var(--zelmor-warm-white); } /* ========================================================= 02. DECORATIVE ENVIRONMENT ========================================================= */ .zelmor-reviews__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .zelmor-reviews__orb { position: absolute; display: block; border-radius: 50%; } .zelmor-reviews__orb--pink { top: -260px; right: -210px; width: 520px; height: 520px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.12); box-shadow: 0 0 0 38px rgba(var(--zelmor-pink-rgb), 0.018), 0 0 0 82px rgba(var(--zelmor-pink-rgb), 0.011); } .zelmor-reviews__orb--aqua { left: -240px; bottom: -280px; width: 520px; height: 520px; background: rgba(var(--zelmor-aqua-rgb), 0.045); } .zelmor-reviews__spark { position: absolute; color: rgba(var(--zelmor-pink-rgb), 0.42); font-size: 1.7rem; } .zelmor-reviews__spark--one { top: 18%; right: 8%; } .zelmor-reviews__spark--two { left: 5%; bottom: 26%; color: rgba(var(--zelmor-aqua-rgb), 0.55); font-size: 1.3rem; } .zelmor-reviews__quote-mark { position: absolute; top: 36%; right: 1%; color: rgba(var(--zelmor-navy-rgb), 0.025); font-family: Georgia, serif; font-size: clamp(14rem, 25vw, 25rem); line-height: 0.6; user-select: none; } /* ========================================================= 03. HEADER ========================================================= */ .zelmor-reviews__header { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.75fr); align-items: end; gap: 70px; margin-bottom: 48px; } /* ========================================================= 04. EYEBROW ========================================================= */ .zelmor-reviews__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; color: var(--zelmor-pink-600); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.055em; text-transform: uppercase; } .zelmor-reviews__eyebrow-line { width: 38px; height: 2px; border-radius: 999px; background-color: var(--zelmor-pink-600); } /* ========================================================= 05. TITLE ========================================================= */ .zelmor-reviews__title { max-width: 760px; margin: 0; color: var(--zelmor-navy-950); font-size: clamp( 3.1rem, 5vw, 5.2rem ); line-height: 0.98; letter-spacing: -0.04em; } .zelmor-reviews__title span { display: block; color: var(--zelmor-pink-600); } /* ========================================================= 06. INTRO ========================================================= */ .zelmor-reviews__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 21px; } .zelmor-reviews__intro > p { max-width: 520px; margin: 0; color: var(--zelmor-slate); font-size: 1.05rem; line-height: 1.7; } /* ========================================================= 07. SOURCE BADGE ========================================================= */ .zelmor-reviews__source { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 17px; background: rgba(var(--zelmor-white-rgb), 0.72); box-shadow: var(--zelmor-shadow-xs); } .zelmor-reviews__source-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua-soft); } .zelmor-reviews__source-icon svg { width: 21px; height: 21px; } .zelmor-reviews__source div { display: flex; flex-direction: column; gap: 2px; } .zelmor-reviews__source strong { color: var(--zelmor-navy-950); font-size: 0.97rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-reviews__source div span { color: var(--zelmor-slate); font-size: 0.9rem; line-height: 1.4; } /* ========================================================= 08. EXPERIENCE COMPOSITION ========================================================= */ .zelmor-reviews__experience { position: relative; z-index: 2; display: grid; grid-template-columns: 58px minmax(0, 1fr) 235px; align-items: stretch; gap: 14px; } /* ========================================================= 09. LEFT RAIL ========================================================= */ .zelmor-reviews__rail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; min-height: 420px; padding-block: 18px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 22px; background: rgba(var(--zelmor-white-rgb), 0.63); } .zelmor-reviews__rail-label { color: rgba(var(--zelmor-navy-rgb), 0.52); font-size: 0.86rem; font-weight: var(--zelmor-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); } .zelmor-reviews__rail-line { width: 1px; height: 70px; background: linear-gradient( 180deg, transparent, var(--zelmor-pink-600), transparent ); } /* ========================================================= 10. WIDGET FRAME ========================================================= */ .zelmor-reviews__widget-frame { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.09); border-radius: 28px; background-color: var(--zelmor-white); box-shadow: 0 24px 65px rgba(var(--zelmor-navy-rgb), 0.1); } /* ========================================================= 11. WIDGET FRAME TOP ========================================================= */ .zelmor-reviews__widget-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; padding: 15px 20px; border-bottom: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); background-color: var(--zelmor-ivory); } .zelmor-reviews__widget-title { display: flex; align-items: center; gap: 12px; } .zelmor-reviews__widget-mark { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; color: var(--zelmor-white); background-color: var(--zelmor-pink-600); } .zelmor-reviews__widget-mark svg { width: 22px; height: 22px; } .zelmor-reviews__widget-title div { display: flex; flex-direction: column; gap: 2px; } .zelmor-reviews__widget-title strong { color: var(--zelmor-navy-950); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-reviews__widget-title div span { color: var(--zelmor-slate); font-size: 0.9rem; line-height: 1.4; } .zelmor-reviews__widget-accent { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--zelmor-aqua); background-color: var(--zelmor-aqua-soft); font-size: 1rem; } /* ========================================================= 12. ELFSIGHT SLOT IMPORTANT: No loader styles. No animation. No shimmer. No pseudo loading state. ========================================================= */ .zelmor-reviews__widget-slot { position: relative; width: 100%; /* * Provides enough reserved vertical space for the * future Elfsight widget without forcing a tiny area. */ min-height: 420px; padding: 22px; background-color: var(--zelmor-white); } /* * Let the future Elfsight content use the full available * width without clipping. */ .zelmor-reviews__widget-slot > * { max-width: 100%; } /* ========================================================= 13. TEMPORARY PLACEHOLDER STATIC ONLY ========================================================= */ .zelmor-reviews__placeholder { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 376px; padding: 30px; border: 1px dashed rgba(var(--zelmor-navy-rgb), 0.15); border-radius: 21px; color: var(--zelmor-navy-950); background-color: rgba(var(--zelmor-ivory-rgb), 0.55); text-align: left; } .zelmor-reviews__placeholder-icon { display: grid; place-items: center; width: 49px; height: 49px; flex: 0 0 auto; border-radius: 15px; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua-soft); } .zelmor-reviews__placeholder-icon svg { width: 24px; height: 24px; } .zelmor-reviews__placeholder div { display: flex; flex-direction: column; gap: 4px; } .zelmor-reviews__placeholder strong { color: var(--zelmor-navy-950); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-reviews__placeholder div span { max-width: 340px; color: var(--zelmor-slate); font-size: 0.95rem; line-height: 1.55; } /* ========================================================= 14. SIDE PANEL ========================================================= */ .zelmor-reviews__side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding: 25px; overflow: hidden; border-radius: 24px 24px 54px 24px; color: var(--zelmor-white); background-color: var(--zelmor-navy-950); box-shadow: 0 20px 50px rgba(var(--zelmor-navy-rgb), 0.14); } .zelmor-reviews__side::before { content: ""; position: absolute; top: -85px; right: -85px; width: 210px; height: 210px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.24); border-radius: 50%; box-shadow: 0 0 0 28px rgba(var(--zelmor-pink-rgb), 0.025), 0 0 0 58px rgba(var(--zelmor-pink-rgb), 0.014); pointer-events: none; } .zelmor-reviews__side-symbol { position: absolute; top: 20px; left: 21px; color: rgba(var(--zelmor-pink-rgb), 0.65); font-family: Georgia, serif; font-size: 6rem; line-height: 1; } .zelmor-reviews__side > p { position: relative; z-index: 2; margin: auto 0 25px; color: var(--zelmor-white); font-family: var(--zelmor-font-heading); font-size: clamp( 1.9rem, 2.5vw, 2.6rem ); line-height: 1.06; letter-spacing: -0.025em; } .zelmor-reviews__side-line { display: block; width: 100%; height: 1px; margin-bottom: 17px; background: rgba(var(--zelmor-white-rgb), 0.12); } .zelmor-reviews__side-detail { display: flex; align-items: center; gap: 9px; color: rgba(var(--zelmor-white-rgb), 0.7); font-size: 0.92rem; font-weight: var(--zelmor-weight-medium); line-height: 1.45; } .zelmor-reviews__side-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background-color: var(--zelmor-aqua); box-shadow: 0 0 0 4px rgba(var(--zelmor-aqua-rgb), 0.09); } /* ========================================================= 15. BOTTOM CTA ========================================================= */ .zelmor-reviews__bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 33px; padding: 24px 25px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 22px; background-color: var(--zelmor-ivory); } /* ========================================================= 16. BOTTOM COPY ========================================================= */ .zelmor-reviews__bottom-copy { display: flex; flex-direction: column; gap: 5px; } .zelmor-reviews__bottom-kicker { color: var(--zelmor-pink-600); font-size: 0.92rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.045em; text-transform: uppercase; } .zelmor-reviews__bottom-copy strong { color: var(--zelmor-navy-950); font-family: var(--zelmor-font-heading); font-size: clamp( 1.8rem, 2.5vw, 2.5rem ); font-weight: var(--zelmor-weight-regular); line-height: 1.08; } /* ========================================================= 17. ESTIMATE CTA ========================================================= */ .zelmor-reviews__estimate { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 54px; padding: 6px 7px 6px 20px; border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background-color: var(--zelmor-pink-600); box-shadow: 0 13px 32px rgba(var(--zelmor-pink-rgb), 0.22); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); white-space: nowrap; transition: background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-reviews__estimate:hover { background-color: var(--zelmor-navy-950); box-shadow: 0 16px 38px rgba(var(--zelmor-navy-rgb), 0.18); } .zelmor-reviews__estimate-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-white); transition: transform var(--zelmor-transition); } .zelmor-reviews__estimate:hover .zelmor-reviews__estimate-icon { transform: rotate(7deg); } .zelmor-reviews__estimate-icon svg { width: 18px; height: 18px; } /* ========================================================= 18. ENTRANCE MOTION Important: this is SECTION entrance motion. It is NOT a loading animation for Elfsight. ========================================================= */ .zelmor-reviews.is-motion-ready [data-zelmor-reviews-reveal] { opacity: 0; transform: translate3d( 0, 25px, 0 ); transition: opacity 720ms var(--zelmor-ease), transform 720ms var(--zelmor-ease); } .zelmor-reviews.is-motion-ready [data-zelmor-reviews-reveal="widget"] { transform: translate3d( 0, 30px, 0 ); } .zelmor-reviews.is-motion-ready [data-zelmor-reviews-reveal].is-visible { opacity: 1; transform: translate3d( 0, 0, 0 ); } /* ========================================================= 19. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { .zelmor-reviews__experience { grid-template-columns: 58px minmax(0, 1fr) 235px; } .zelmor-reviews__widget-slot { min-height: 430px; } } /* --------------------------------------------------------- TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .zelmor-reviews__header { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.8fr); gap: 44px; margin-bottom: 41px; } .zelmor-reviews__title { font-size: clamp( 2.8rem, 5vw, 4.2rem ); } .zelmor-reviews__intro > p { font-size: 1rem; } .zelmor-reviews__experience { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; } /* * Side panel becomes a horizontal block underneath * instead of becoming too narrow. */ .zelmor-reviews__side { grid-column: 2; min-height: auto; flex-direction: row; align-items: center; gap: 25px; padding: 20px 22px; border-radius: 22px; } .zelmor-reviews__side-symbol { position: relative; top: auto; left: auto; flex: 0 0 auto; font-size: 4rem; } .zelmor-reviews__side > p { margin: 0; font-size: clamp( 1.7rem, 3vw, 2.15rem ); } .zelmor-reviews__side-line, .zelmor-reviews__side-detail { display: none; } .zelmor-reviews__bottom { align-items: flex-start; } } /* --------------------------------------------------------- MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { .zelmor-reviews__header { grid-template-columns: 1fr; gap: 23px; margin-bottom: 35px; } .zelmor-reviews__title { max-width: 620px; font-size: clamp( 2.8rem, 10vw, 4rem ); } .zelmor-reviews__intro { max-width: 600px; } .zelmor-reviews__intro > p { font-size: 1rem; line-height: 1.65; } .zelmor-reviews__experience { grid-template-columns: 1fr; gap: 12px; } .zelmor-reviews__rail { display: none; } .zelmor-reviews__widget-frame { border-radius: 24px; } .zelmor-reviews__widget-slot { min-height: 390px; padding: 18px; } .zelmor-reviews__placeholder { min-height: 350px; } .zelmor-reviews__side { min-height: 205px; padding: 22px; border-radius: 22px 22px 46px 22px; } .zelmor-reviews__side > p { max-width: 480px; margin-top: 70px; font-size: clamp( 2rem, 6vw, 2.7rem ); } .zelmor-reviews__bottom { align-items: flex-start; flex-direction: column; gap: 19px; } } /* --------------------------------------------------------- SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { .zelmor-reviews__header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; } .zelmor-reviews__eyebrow { margin-bottom: 15px; font-size: 0.9rem; } .zelmor-reviews__title { font-size: clamp( 2.55rem, 12vw, 3.45rem ); line-height: 1; } .zelmor-reviews__intro > p { font-size: 1rem; line-height: 1.62; } .zelmor-reviews__source { width: 100%; } .zelmor-reviews__source strong { font-size: 0.96rem; } .zelmor-reviews__source div span { font-size: 0.9rem; } .zelmor-reviews__experience { grid-template-columns: 1fr; gap: 10px; } .zelmor-reviews__rail { display: none; } .zelmor-reviews__widget-frame { border-radius: 21px; } .zelmor-reviews__widget-top { min-height: 70px; padding: 13px 14px; } .zelmor-reviews__widget-title { gap: 10px; } .zelmor-reviews__widget-mark { width: 40px; height: 40px; border-radius: 12px; } .zelmor-reviews__widget-title strong { font-size: 0.95rem; } .zelmor-reviews__widget-title div span { font-size: 0.88rem; } .zelmor-reviews__widget-accent { display: none; } .zelmor-reviews__widget-slot { min-height: 350px; padding: 13px; } .zelmor-reviews__placeholder { flex-direction: column; min-height: 324px; padding: 22px 17px; text-align: center; } .zelmor-reviews__placeholder strong { font-size: 0.98rem; } .zelmor-reviews__placeholder div span { font-size: 0.94rem; } .zelmor-reviews__side { min-height: 195px; padding: 20px; border-radius: 20px 20px 42px 20px; } .zelmor-reviews__side-symbol { top: 14px; left: 17px; font-size: 5rem; } .zelmor-reviews__side > p { max-width: 330px; margin: 63px 0 22px; font-size: clamp( 1.9rem, 9vw, 2.45rem ); } .zelmor-reviews__side-detail { font-size: 0.91rem; } .zelmor-reviews__bottom { align-items: stretch; flex-direction: column; gap: 18px; margin-top: 25px; padding: 19px 17px; } .zelmor-reviews__bottom-copy strong { font-size: clamp( 1.75rem, 8vw, 2.15rem ); } .zelmor-reviews__estimate { justify-content: space-between; width: 100%; min-height: 52px; font-size: 0.94rem; } /* * Simplify decoration rather than shrinking content. */ .zelmor-reviews__spark--two, .zelmor-reviews__quote-mark { display: none; } } /* ========================================================= 20. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-reviews__estimate, .zelmor-reviews__estimate-icon, .zelmor-reviews [data-zelmor-reviews-reveal] { transition: none !important; } .zelmor-reviews.is-motion-ready [data-zelmor-reviews-reveal] { opacity: 1 !important; transform: none !important; } } /* ========================================================= ZELMOR HOUSE CLEANING 15. SERVICE AREAS / LEAFLET MAP ========================================================= */ /* ========================================================= 01. SECTION ========================================================= */ .zelmor-areas { position: relative; overflow: hidden; background-color: var(--zelmor-ivory); } /* ========================================================= 02. DECORATIVE ENVIRONMENT ========================================================= */ .zelmor-areas__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .zelmor-areas__orb { position: absolute; display: block; border-radius: 50%; } .zelmor-areas__orb--pink { top: -280px; right: -240px; width: 560px; height: 560px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.13); box-shadow: 0 0 0 40px rgba(var(--zelmor-pink-rgb), 0.018), 0 0 0 84px rgba(var(--zelmor-pink-rgb), 0.011); } .zelmor-areas__orb--aqua { left: -270px; bottom: -320px; width: 580px; height: 580px; background: rgba(var(--zelmor-aqua-rgb), 0.045); } .zelmor-areas__spark { position: absolute; color: rgba(var(--zelmor-pink-rgb), 0.4); font-size: 1.5rem; } .zelmor-areas__spark--one { top: 18%; right: 7%; } .zelmor-areas__spark--two { left: 4%; bottom: 20%; color: rgba(var(--zelmor-aqua-rgb), 0.55); font-size: 1.2rem; } .zelmor-areas__grid-pattern { position: absolute; top: 27%; right: -50px; width: 360px; height: 360px; opacity: 0.17; background-image: linear-gradient( rgba(var(--zelmor-navy-rgb), 0.09) 1px, transparent 1px ), linear-gradient( 90deg, rgba(var(--zelmor-navy-rgb), 0.09) 1px, transparent 1px ); background-size: 34px 34px; mask-image: linear-gradient( 90deg, transparent, black ); } /* ========================================================= 03. HEADER ========================================================= */ .zelmor-areas__header { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.75fr); align-items: end; gap: 70px; margin-bottom: 47px; } /* ========================================================= 04. EYEBROW ========================================================= */ .zelmor-areas__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; color: var(--zelmor-pink-600); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.055em; text-transform: uppercase; } .zelmor-areas__eyebrow-line { width: 38px; height: 2px; border-radius: 999px; background-color: var(--zelmor-pink-600); } /* ========================================================= 05. TITLE ========================================================= */ .zelmor-areas__title { max-width: 770px; margin: 0; color: var(--zelmor-navy-950); font-size: clamp( 3.1rem, 5vw, 5.2rem ); line-height: 0.98; letter-spacing: -0.04em; } .zelmor-areas__title span { display: block; color: var(--zelmor-pink-600); } /* ========================================================= 06. INTRO ========================================================= */ .zelmor-areas__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .zelmor-areas__intro p { max-width: 520px; margin: 0; color: var(--zelmor-slate); font-size: 1.05rem; line-height: 1.7; } /* ========================================================= 07. HEADER CTA ========================================================= */ .zelmor-areas__estimate-link { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--zelmor-navy-950); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); transition: gap var(--zelmor-transition), color var(--zelmor-transition); } .zelmor-areas__estimate-link:hover { gap: 16px; color: var(--zelmor-pink-600); } .zelmor-areas__estimate-link-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.1); border-radius: 50%; background-color: var(--zelmor-white); box-shadow: var(--zelmor-shadow-xs); } .zelmor-areas__estimate-link-icon svg { width: 17px; height: 17px; } /* ========================================================= 08. EXPERIENCE LAYOUT ========================================================= */ .zelmor-areas__experience { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(315px, 0.52fr); align-items: stretch; gap: 15px; } /* ========================================================= 09. MAP PANEL ========================================================= */ .zelmor-areas__map-panel { min-width: 0; overflow: hidden; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.1); border-radius: 29px; background-color: var(--zelmor-white); box-shadow: 0 25px 65px rgba(var(--zelmor-navy-rgb), 0.11); } /* ========================================================= 10. MAP HEADER ========================================================= */ .zelmor-areas__map-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; padding: 14px 17px 14px 19px; border-bottom: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); background-color: var(--zelmor-white); } .zelmor-areas__map-header-copy { display: flex; align-items: center; gap: 12px; } .zelmor-areas__map-header-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua-soft); } .zelmor-areas__map-header-icon svg { width: 22px; height: 22px; } .zelmor-areas__map-header-copy div { display: flex; flex-direction: column; gap: 2px; } .zelmor-areas__map-header-copy strong { color: var(--zelmor-navy-950); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-areas__map-header-copy div span { color: var(--zelmor-slate); font-size: 0.9rem; line-height: 1.4; } /* ========================================================= 11. RESET ========================================================= */ .zelmor-areas__reset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding-inline: 14px; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.1); border-radius: var(--zelmor-radius-pill); color: var(--zelmor-navy-950); background-color: var(--zelmor-ivory); font-size: 0.9rem; font-weight: var(--zelmor-weight-bold); cursor: pointer; transition: color var(--zelmor-transition), background-color var(--zelmor-transition), border-color var(--zelmor-transition); } .zelmor-areas__reset:hover { color: var(--zelmor-white); border-color: var(--zelmor-navy-950); background-color: var(--zelmor-navy-950); } .zelmor-areas__reset svg { width: 17px; height: 17px; } /* ========================================================= 12. MAP STAGE ========================================================= */ .zelmor-areas__map-stage { position: relative; width: 100%; height: 560px; overflow: hidden; background-color: var(--zelmor-silver-light); } /* ========================================================= 13. LEAFLET MAP ========================================================= */ .zelmor-areas__map { position: relative; z-index: 2; width: 100%; height: 100%; background-color: var(--zelmor-silver-light); } /* * Slight visual adjustment so the standard map integrates * more naturally into Zelmor's palette. * * This affects only map tiles, not controls or markers. */ .zelmor-areas__map .leaflet-tile-pane { filter: saturate(0.72) contrast(0.95) brightness(1.03); } /* ========================================================= 14. MAP FALLBACK ========================================================= */ .zelmor-areas__map-fallback { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 30px; color: var(--zelmor-navy-950); background-color: var(--zelmor-silver-light); text-align: left; } .zelmor-areas__map-stage.is-ready .zelmor-areas__map-fallback { display: none; } .zelmor-areas__map-fallback-icon { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 auto; border-radius: 16px; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua-soft); } .zelmor-areas__map-fallback-icon svg { width: 25px; height: 25px; } .zelmor-areas__map-fallback div { display: flex; flex-direction: column; gap: 4px; } .zelmor-areas__map-fallback strong { font-size: 1rem; font-weight: var(--zelmor-weight-bold); } .zelmor-areas__map-fallback div span { max-width: 330px; color: var(--zelmor-slate); font-size: 0.95rem; line-height: 1.55; } /* ========================================================= 15. FLOATING MAP BADGE ========================================================= */ .zelmor-areas__map-badge { position: absolute; z-index: 500; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 41px; padding-inline: 13px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.45); border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background: rgba(var(--zelmor-navy-rgb), 0.86); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 0.9rem; font-weight: var(--zelmor-weight-bold); pointer-events: none; } .zelmor-areas__map-badge-dot { width: 7px; height: 7px; border-radius: 50%; background-color: var(--zelmor-aqua); box-shadow: 0 0 0 4px rgba(var(--zelmor-aqua-rgb), 0.12); } /* ========================================================= 16. MAP FOOTER ========================================================= */ .zelmor-areas__map-footer { display: flex; align-items: flex-start; gap: 11px; min-height: 68px; padding: 14px 19px; border-top: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); background-color: var(--zelmor-white); } .zelmor-areas__map-footer-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 8px; border-radius: 50%; background-color: var(--zelmor-pink-600); box-shadow: 0 0 0 4px rgba(var(--zelmor-pink-rgb), 0.09); } .zelmor-areas__map-footer p { max-width: 680px; margin: 0; color: var(--zelmor-slate); font-size: 0.92rem; line-height: 1.55; } /* ========================================================= 17. LOCATION PANEL ========================================================= */ .zelmor-areas__locations { display: flex; flex-direction: column; min-width: 0; padding: 25px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.1); border-radius: 29px 29px 58px 29px; color: var(--zelmor-white); background-color: var(--zelmor-navy-950); box-shadow: 0 24px 60px rgba(var(--zelmor-navy-rgb), 0.16); } /* ========================================================= 18. LOCATION HEADER ========================================================= */ .zelmor-areas__locations-header { margin-bottom: 23px; } .zelmor-areas__locations-kicker { display: block; margin-bottom: 8px; color: var(--zelmor-aqua); font-size: 0.92rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.045em; text-transform: uppercase; } .zelmor-areas__locations-header h3 { margin-bottom: 9px; color: var(--zelmor-white); font-size: clamp( 2rem, 3vw, 2.7rem ); line-height: 1; letter-spacing: -0.025em; } .zelmor-areas__locations-header p { margin: 0; color: rgba(var(--zelmor-white-rgb), 0.65); font-size: 0.96rem; line-height: 1.6; } /* ========================================================= 19. LOCATION LIST ========================================================= */ .zelmor-areas__locations-list { display: flex; flex-direction: column; gap: 7px; } /* ========================================================= 20. LOCATION BUTTON ========================================================= */ .zelmor-areas__location { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 67px; padding: 9px 11px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.09); border-radius: 16px; color: var(--zelmor-white); background: rgba(var(--zelmor-white-rgb), 0.035); text-align: left; cursor: pointer; transition: background-color var(--zelmor-transition), border-color var(--zelmor-transition), transform var(--zelmor-transition); } .zelmor-areas__location:hover { transform: translateX(3px); border-color: rgba(var(--zelmor-aqua-rgb), 0.23); background: rgba(var(--zelmor-white-rgb), 0.065); } .zelmor-areas__location.is-active { border-color: rgba(var(--zelmor-pink-rgb), 0.42); background: rgba(var(--zelmor-pink-rgb), 0.14); } /* ========================================================= 21. LOCATION NUMBER ========================================================= */ .zelmor-areas__location-number { color: rgba(var(--zelmor-white-rgb), 0.43); font-size: 0.87rem; font-weight: var(--zelmor-weight-bold); } .zelmor-areas__location.is-active .zelmor-areas__location-number { color: var(--zelmor-pink-100); } /* ========================================================= 22. LOCATION COPY ========================================================= */ .zelmor-areas__location-copy { display: flex; flex-direction: column; gap: 2px; } .zelmor-areas__location-copy strong { color: var(--zelmor-white); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-areas__location-copy span { color: rgba(var(--zelmor-white-rgb), 0.56); font-size: 0.9rem; line-height: 1.35; } /* ========================================================= 23. LOCATION ARROW ========================================================= */ .zelmor-areas__location-arrow { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: rgba(var(--zelmor-white-rgb), 0.64); background: rgba(var(--zelmor-white-rgb), 0.06); transition: color var(--zelmor-transition), background-color var(--zelmor-transition), transform var(--zelmor-transition); } .zelmor-areas__location.is-active .zelmor-areas__location-arrow { color: var(--zelmor-navy-950); background-color: var(--zelmor-white); transform: rotate(-8deg); } /* ========================================================= 24. LOCATION BOTTOM ========================================================= */ .zelmor-areas__locations-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; margin-top: auto; padding-top: 21px; border-top: 1px solid rgba(var(--zelmor-white-rgb), 0.1); } .zelmor-areas__locations-bottom-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-aqua); font-size: 0.92rem; font-weight: var(--zelmor-weight-bold); } .zelmor-areas__locations-bottom div { display: flex; flex-direction: column; gap: 5px; } .zelmor-areas__locations-bottom strong { color: var(--zelmor-white); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-areas__locations-bottom p { margin: 0; color: rgba(var(--zelmor-white-rgb), 0.62); font-size: 0.92rem; line-height: 1.55; } .zelmor-areas__locations-bottom a { display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 37px; margin-top: 2px; color: var(--zelmor-pink-100); font-size: 0.92rem; font-weight: var(--zelmor-weight-bold); transition: gap var(--zelmor-transition), color var(--zelmor-transition); } .zelmor-areas__locations-bottom a:hover { gap: 12px; color: var(--zelmor-aqua); } /* ========================================================= 25. LEAFLET CUSTOM MARKERS ========================================================= */ .zelmor-service-map__div-icon { border: 0 !important; background: transparent !important; } .zelmor-service-map__pin { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 4px solid var(--zelmor-white); border-radius: 50%; background-color: var(--zelmor-pink-600); box-shadow: 0 8px 25px rgba(var(--zelmor-navy-rgb), 0.27); transition: transform var(--zelmor-transition), background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-service-map__pin::before { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.26); border-radius: 50%; background: rgba(var(--zelmor-pink-rgb), 0.07); } .zelmor-service-map__pin-core { position: relative; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background-color: var(--zelmor-white); } .zelmor-service-map__div-icon.is-active .zelmor-service-map__pin { transform: scale(1.13); background-color: var(--zelmor-aqua); box-shadow: 0 10px 30px rgba(var(--zelmor-aqua-rgb), 0.3); } /* ========================================================= 26. LEAFLET CONTROLS ========================================================= */ .zelmor-areas .leaflet-control-zoom { overflow: hidden; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.12) !important; border-radius: 13px !important; box-shadow: 0 8px 24px rgba(var(--zelmor-navy-rgb), 0.13) !important; } .zelmor-areas .leaflet-control-zoom a { width: 39px !important; height: 39px !important; color: var(--zelmor-navy-950) !important; background-color: rgba(var(--zelmor-white-rgb), 0.96) !important; font-family: var(--zelmor-font-body) !important; font-size: 1.25rem !important; line-height: 39px !important; } .zelmor-areas .leaflet-control-zoom a:hover { color: var(--zelmor-white) !important; background-color: var(--zelmor-pink-600) !important; } /* ========================================================= 27. LEAFLET POPUP ========================================================= */ .zelmor-areas .leaflet-popup-content-wrapper { overflow: hidden; border: 1px solid rgba(var(--zelmor-navy-rgb), 0.08); border-radius: 18px; background-color: var(--zelmor-white); box-shadow: 0 18px 45px rgba(var(--zelmor-navy-rgb), 0.18); } .zelmor-areas .leaflet-popup-content { min-width: 190px; margin: 15px 17px; } .zelmor-map-popup { display: flex; flex-direction: column; gap: 4px; font-family: var(--zelmor-font-body); } .zelmor-map-popup__eyebrow { color: var(--zelmor-pink-600); font-size: 0.8rem; font-weight: var(--zelmor-weight-bold); letter-spacing: 0.045em; text-transform: uppercase; } .zelmor-map-popup strong { color: var(--zelmor-navy-950); font-family: var(--zelmor-font-heading); font-size: 1.45rem; font-weight: var(--zelmor-weight-regular); line-height: 1.1; } .zelmor-map-popup p { margin: 3px 0 7px; color: var(--zelmor-slate); font-size: 0.9rem; line-height: 1.5; } .zelmor-map-popup a { display: inline-flex; align-items: center; gap: 7px; width: fit-content; color: var(--zelmor-navy-950); font-size: 0.88rem; font-weight: var(--zelmor-weight-bold); } .zelmor-map-popup a:hover { color: var(--zelmor-pink-600); } .zelmor-areas .leaflet-popup-tip { background-color: var(--zelmor-white); } /* Attribution remains visible */ .zelmor-areas .leaflet-control-attribution { padding: 3px 6px !important; color: var(--zelmor-slate); background: rgba(var(--zelmor-white-rgb), 0.9) !important; font-size: 0.72rem; } /* ========================================================= 28. ENTRANCE MOTION ========================================================= */ .zelmor-areas.is-motion-ready [data-zelmor-areas-reveal] { opacity: 0; transform: translate3d( 0, 27px, 0 ); transition: opacity 740ms var(--zelmor-ease), transform 740ms var(--zelmor-ease); } .zelmor-areas.is-motion-ready [data-zelmor-areas-reveal="map"] { transform: translate3d( 0, 32px, 0 ); } .zelmor-areas.is-motion-ready [data-zelmor-areas-reveal].is-visible { opacity: 1; transform: translate3d( 0, 0, 0 ); } /* ========================================================= 29. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { .zelmor-areas__experience { grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.5fr); } .zelmor-areas__map-stage { height: 570px; } } /* --------------------------------------------------------- TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .zelmor-areas__header { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.8fr); gap: 44px; margin-bottom: 40px; } .zelmor-areas__title { font-size: clamp( 2.8rem, 5vw, 4.2rem ); } .zelmor-areas__intro p { font-size: 1rem; } .zelmor-areas__experience { grid-template-columns: minmax(0, 1.2fr) minmax(270px, 0.8fr); gap: 12px; } .zelmor-areas__map-stage { height: 535px; } .zelmor-areas__locations { padding: 21px; } .zelmor-areas__location { min-height: 63px; } .zelmor-areas__locations-bottom { margin-top: 22px; } } /* --------------------------------------------------------- MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { .zelmor-areas__header { grid-template-columns: 1fr; gap: 23px; margin-bottom: 34px; } .zelmor-areas__title { max-width: 620px; font-size: clamp( 2.8rem, 10vw, 4rem ); } .zelmor-areas__intro { max-width: 600px; } .zelmor-areas__intro p { font-size: 1rem; line-height: 1.65; } .zelmor-areas__experience { grid-template-columns: 1fr; gap: 13px; } /* * Keep the list before or after map according to HTML. * No sticky/fixed behavior here. */ .zelmor-areas__map-stage { height: 470px; } .zelmor-areas__locations { padding: 24px; border-radius: 25px 25px 50px 25px; } .zelmor-areas__locations-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .zelmor-areas__location { min-height: 70px; } .zelmor-areas__locations-bottom { margin-top: 23px; } } /* --------------------------------------------------------- SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { .zelmor-areas__header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; } .zelmor-areas__eyebrow { margin-bottom: 15px; font-size: 0.9rem; } .zelmor-areas__title { font-size: clamp( 2.55rem, 12vw, 3.45rem ); line-height: 1; } .zelmor-areas__intro p { font-size: 1rem; line-height: 1.62; } .zelmor-areas__experience { grid-template-columns: 1fr; gap: 11px; } .zelmor-areas__map-panel { border-radius: 22px; } .zelmor-areas__map-header { min-height: 72px; padding: 12px 13px; } .zelmor-areas__map-header-icon { width: 40px; height: 40px; border-radius: 12px; } .zelmor-areas__map-header-copy strong { font-size: 0.95rem; } .zelmor-areas__map-header-copy div span { font-size: 0.87rem; } .zelmor-areas__reset { width: 42px; min-height: 42px; padding: 0; } .zelmor-areas__reset span { display: none; } .zelmor-areas__map-stage { height: 420px; } .zelmor-areas__map-badge { top: 13px; left: 13px; min-height: 38px; font-size: 0.88rem; } .zelmor-areas__map-footer { padding: 13px 14px; } .zelmor-areas__map-footer p { font-size: 0.9rem; line-height: 1.5; } .zelmor-areas__locations { padding: 20px 17px; border-radius: 22px 22px 44px 22px; } .zelmor-areas__locations-header h3 { font-size: clamp( 2rem, 9vw, 2.6rem ); } .zelmor-areas__locations-header p { font-size: 0.95rem; } .zelmor-areas__locations-list { display: flex; flex-direction: column; gap: 7px; } .zelmor-areas__location { min-height: 65px; padding: 8px 10px; } .zelmor-areas__location-copy strong { font-size: 0.98rem; } .zelmor-areas__location-copy span { font-size: 0.9rem; } .zelmor-areas__locations-bottom { margin-top: 21px; } .zelmor-areas__locations-bottom strong { font-size: 0.96rem; } .zelmor-areas__locations-bottom p, .zelmor-areas__locations-bottom a { font-size: 0.92rem; } .zelmor-areas__grid-pattern, .zelmor-areas__spark--two { display: none; } } /* ========================================================= 30. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-areas__estimate-link, .zelmor-areas__reset, .zelmor-areas__location, .zelmor-areas__location-arrow, .zelmor-areas__locations-bottom a, .zelmor-service-map__pin, .zelmor-areas [data-zelmor-areas-reveal] { transition: none !important; } .zelmor-areas.is-motion-ready [data-zelmor-areas-reveal] { opacity: 1 !important; transform: none !important; } .zelmor-areas__location:hover { transform: none; } } /* ========================================================= ZELMOR HOUSE CLEANING 18. FOOTER ========================================================= */ /* ========================================================= 01. FOOTER ========================================================= */ .zelmor-footer { position: relative; overflow: hidden; color: var(--zelmor-white); background-color: var(--zelmor-navy-950); } /* ========================================================= 02. DECORATION ========================================================= */ .zelmor-footer__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .zelmor-footer__orb { position: absolute; border-radius: 50%; } .zelmor-footer__orb--pink { top: -300px; right: -270px; width: 650px; height: 650px; border: 1px solid rgba(var(--zelmor-pink-rgb), 0.2); box-shadow: 0 0 0 42px rgba(var(--zelmor-pink-rgb), 0.018), 0 0 0 88px rgba(var(--zelmor-pink-rgb), 0.01); } .zelmor-footer__orb--aqua { left: -300px; bottom: 40px; width: 560px; height: 560px; background: rgba(var(--zelmor-aqua-rgb), 0.035); } .zelmor-footer__spark { position: absolute; color: rgba(var(--zelmor-white-rgb), 0.22); font-size: 1.5rem; } .zelmor-footer__spark--one { top: 24%; left: 4%; color: rgba(var(--zelmor-aqua-rgb), 0.48); } .zelmor-footer__spark--two { right: 7%; bottom: 26%; color: rgba(var(--zelmor-pink-rgb), 0.48); } .zelmor-footer__grid { position: absolute; right: -40px; bottom: 7%; width: 360px; height: 360px; opacity: 0.08; background-image: linear-gradient( rgba(var(--zelmor-white-rgb), 0.35) 1px, transparent 1px ), linear-gradient( 90deg, rgba(var(--zelmor-white-rgb), 0.35) 1px, transparent 1px ); background-size: 38px 38px; mask-image: linear-gradient( 90deg, transparent, black ); } /* ========================================================= 03. TOP CTA ========================================================= */ .zelmor-footer__cta { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 55px; margin-bottom: 65px; padding: 36px 38px; overflow: hidden; border: 1px solid rgba(var(--zelmor-white-rgb), 0.12); border-radius: 30px 30px 65px 30px; background: rgba(var(--zelmor-white-rgb), 0.055); box-shadow: 0 20px 55px rgba(0, 0, 0, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .zelmor-footer__cta::after { content: ""; position: absolute; top: -90px; right: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(var(--zelmor-pink-rgb), 0.11); pointer-events: none; } /* ========================================================= 04. CTA TYPOGRAPHY ========================================================= */ .zelmor-footer__cta-copy { position: relative; z-index: 2; max-width: 690px; } .zelmor-footer__cta-kicker { display: block; margin-bottom: 10px; color: var(--zelmor-aqua); font-size: 0.94rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; letter-spacing: 0.045em; text-transform: uppercase; } .zelmor-footer__cta h2 { margin: 0; color: var(--zelmor-white); font-size: clamp( 2.5rem, 4vw, 4.3rem ); line-height: 0.98; letter-spacing: -0.035em; } .zelmor-footer__cta h2 span { color: var(--zelmor-pink-100); } /* ========================================================= 05. CTA ACTIONS ========================================================= */ .zelmor-footer__cta-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; } /* ========================================================= 06. CTA PHONE ========================================================= */ .zelmor-footer__cta-phone { display: inline-flex; align-items: center; gap: 11px; min-height: 56px; padding: 7px 18px 7px 8px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.14); border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background: rgba(var(--zelmor-white-rgb), 0.055); } .zelmor-footer__cta-phone-icon { display: grid; place-items: center; width: 41px; height: 41px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-aqua); background: rgba(var(--zelmor-aqua-rgb), 0.1); } .zelmor-footer__cta-phone-icon svg { width: 19px; height: 19px; } .zelmor-footer__cta-phone > span:last-child { display: flex; flex-direction: column; gap: 2px; } .zelmor-footer__cta-phone small { color: rgba(var(--zelmor-white-rgb), 0.58); font-size: 0.86rem; } .zelmor-footer__cta-phone strong { color: var(--zelmor-white); font-size: 0.96rem; font-weight: var(--zelmor-weight-bold); } /* ========================================================= 07. CTA ESTIMATE ========================================================= */ .zelmor-footer__cta-estimate { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 56px; padding: 7px 7px 7px 20px; border-radius: var(--zelmor-radius-pill); color: var(--zelmor-white); background-color: var(--zelmor-pink-600); box-shadow: 0 14px 35px rgba(var(--zelmor-pink-rgb), 0.24); font-size: 0.95rem; font-weight: var(--zelmor-weight-bold); white-space: nowrap; transition: background-color var(--zelmor-transition), box-shadow var(--zelmor-transition); } .zelmor-footer__cta-estimate:hover { background-color: var(--zelmor-pink-500); box-shadow: 0 18px 42px rgba(var(--zelmor-pink-rgb), 0.31); } .zelmor-footer__cta-estimate-icon { display: grid; place-items: center; width: 41px; height: 41px; flex: 0 0 auto; border-radius: 50%; color: var(--zelmor-navy-950); background-color: var(--zelmor-white); transition: transform var(--zelmor-transition); } .zelmor-footer__cta-estimate:hover .zelmor-footer__cta-estimate-icon { transform: rotate(7deg); } .zelmor-footer__cta-estimate-icon svg { width: 18px; height: 18px; } /* ========================================================= 08. MAIN FOOTER ========================================================= */ .zelmor-footer__main { position: relative; z-index: 2; padding-bottom: 58px; } /* ========================================================= 09. GRID ========================================================= */ .zelmor-footer__grid-layout { display: grid; grid-template-columns: minmax(230px, 1.25fr) repeat(3, minmax(130px, 0.72fr)) minmax(210px, 1fr) minmax(190px, 0.9fr); align-items: start; gap: 42px 34px; } /* ========================================================= 10. BRAND ========================================================= */ .zelmor-footer__brand { max-width: 315px; } .zelmor-footer__logo { display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; margin-bottom: 20px; padding: 4px; overflow: hidden; border-radius: 22px; background-color: var(--zelmor-white); box-shadow: 0 15px 36px rgba(0, 0, 0, 0.18); } .zelmor-footer__logo img { width: 100%; height: 100%; object-fit: contain; } .zelmor-footer__description { margin: 0 0 21px; color: rgba(var(--zelmor-white-rgb), 0.67); font-size: 0.98rem; line-height: 1.67; } .zelmor-footer__brand-location { display: flex; align-items: flex-start; gap: 9px; color: rgba(var(--zelmor-white-rgb), 0.7); font-size: 0.93rem; line-height: 1.5; } .zelmor-footer__brand-location-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; color: var(--zelmor-aqua); background: rgba(var(--zelmor-aqua-rgb), 0.09); } .zelmor-footer__brand-location-icon svg { width: 17px; height: 17px; } /* ========================================================= 11. COLUMNS ========================================================= */ .zelmor-footer__column h3 { margin: 0 0 19px; color: var(--zelmor-white); font-family: var(--zelmor-font-body); font-size: 1rem; font-weight: var(--zelmor-weight-bold); line-height: 1.4; } .zelmor-footer__column ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .zelmor-footer__column li { margin: 0; } .zelmor-footer__column li a { position: relative; display: inline-flex; color: rgba(var(--zelmor-white-rgb), 0.64); font-size: 0.94rem; font-weight: var(--zelmor-weight-medium); line-height: 1.45; transition: color var(--zelmor-transition), transform var(--zelmor-transition); } .zelmor-footer__column li a::before { content: ""; position: absolute; top: 50%; left: -13px; width: 5px; height: 5px; border-radius: 50%; background-color: var(--zelmor-pink-500); opacity: 0; transform: translateY(-50%) scale(0.3); transition: opacity var(--zelmor-transition), transform var(--zelmor-transition); } .zelmor-footer__column li a:hover { color: var(--zelmor-white); transform: translateX(5px); } .zelmor-footer__column li a:hover::before { opacity: 1; transform: translateY(-50%) scale(1); } /* ========================================================= 12. HOURS ========================================================= */ .zelmor-footer__hours { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; } .zelmor-footer__hours-row { display: flex; flex-direction: column; gap: 2px; padding-bottom: 9px; border-bottom: 1px solid rgba(var(--zelmor-white-rgb), 0.08); } .zelmor-footer__hours-row span { color: rgba(var(--zelmor-white-rgb), 0.55); font-size: 0.9rem; line-height: 1.4; } .zelmor-footer__hours-row strong { color: var(--zelmor-white); font-size: 0.95rem; font-weight: var(--zelmor-weight-semibold); line-height: 1.4; } /* ========================================================= 13. CONTACT ========================================================= */ .zelmor-footer__contact-link { display: flex; flex-direction: column; gap: 2px; margin-bottom: 17px; } .zelmor-footer__contact-link span { color: rgba(var(--zelmor-white-rgb), 0.55); font-size: 0.9rem; } .zelmor-footer__contact-link strong { color: var(--zelmor-white); font-size: 1rem; font-weight: var(--zelmor-weight-bold); transition: color var(--zelmor-transition); } .zelmor-footer__contact-link:hover strong { color: var(--zelmor-pink-100); } .zelmor-footer__contact-button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: var(--zelmor-pink-100); font-size: 0.94rem; font-weight: var(--zelmor-weight-bold); transition: color var(--zelmor-transition), gap var(--zelmor-transition); } .zelmor-footer__contact-button:hover { gap: 13px; color: var(--zelmor-aqua); } /* ========================================================= 14. SOCIAL ========================================================= */ .zelmor-footer__column--social > p { margin: 0 0 17px; color: rgba(var(--zelmor-white-rgb), 0.61); font-size: 0.93rem; line-height: 1.58; } .zelmor-footer__socials { display: flex; flex-direction: column; gap: 8px; } .zelmor-footer__social { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 64px; padding: 9px 11px; border: 1px solid rgba(var(--zelmor-white-rgb), 0.1); border-radius: 16px; background: rgba(var(--zelmor-white-rgb), 0.045); transition: background-color var(--zelmor-transition), border-color var(--zelmor-transition), transform var(--zelmor-transition); } .zelmor-footer__social:hover { transform: translateY(-3px); border-color: rgba(var(--zelmor-aqua-rgb), 0.22); background: rgba(var(--zelmor-white-rgb), 0.075); } .zelmor-footer__social-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: var(--zelmor-navy-950); background-color: var(--zelmor-white); font-size: 1rem; font-weight: var(--zelmor-weight-extrabold); } .zelmor-footer__social > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; } .zelmor-footer__social strong { color: var(--zelmor-white); font-size: 0.94rem; font-weight: var(--zelmor-weight-bold); } .zelmor-footer__social small { color: rgba(var(--zelmor-white-rgb), 0.53); font-size: 0.87rem; } .zelmor-footer__social-arrow { color: var(--zelmor-aqua); font-size: 1rem; } /* ========================================================= 15. BOTTOM FOOTER ========================================================= */ .zelmor-footer__bottom { position: relative; z-index: 2; border-top: 1px solid rgba(var(--zelmor-white-rgb), 0.09); background: rgba(0, 0, 0, 0.08); } .zelmor-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 76px; } /* ========================================================= 16. COPYRIGHT ========================================================= */ .zelmor-footer__copyright { margin: 0; color: rgba(var(--zelmor-white-rgb), 0.57); font-size: 0.9rem; line-height: 1.5; } /* ========================================================= 17. POWERED BY ========================================================= */ .zelmor-footer__powered { display: inline-flex; align-items: center; gap: 6px; color: rgba(var(--zelmor-white-rgb), 0.57); font-size: 0.9rem; line-height: 1.4; transition: color var(--zelmor-transition); } .zelmor-footer__powered strong { color: var(--zelmor-white); font-weight: var(--zelmor-weight-bold); transition: color var(--zelmor-transition); } .zelmor-footer__powered-arrow { margin-left: 3px; color: var(--zelmor-aqua); } .zelmor-footer__powered:hover, .zelmor-footer__powered:hover strong { color: var(--zelmor-pink-100); } /* ========================================================= 18. REVEAL ========================================================= */ .zelmor-footer.is-motion-ready [data-zelmor-footer-reveal] { opacity: 0; transform: translate3d( 0, 24px, 0 ); transition: opacity 700ms var(--zelmor-ease), transform 700ms var(--zelmor-ease); } .zelmor-footer.is-motion-ready [data-zelmor-footer-reveal].is-visible { opacity: 1; transform: translate3d( 0, 0, 0 ); } /* ========================================================= 19. RESPONSIVE EXACTLY FOUR PROJECT BREAKPOINTS ========================================================= */ /* --------------------------------------------------------- COMPUTER 1200px+ --------------------------------------------------------- */ @media (min-width: 1200px) { .zelmor-footer__grid-layout { grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(135px, 0.7fr)) minmax(205px, 0.95fr) minmax(190px, 0.9fr); } } /* --------------------------------------------------------- TABLET / SMALL LAPTOP 768px — 1199px --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .zelmor-footer__cta { gap: 38px; margin-bottom: 55px; padding: 31px; } .zelmor-footer__cta h2 { font-size: clamp( 2.4rem, 4vw, 3.5rem ); } .zelmor-footer__cta-actions { flex-direction: column; align-items: stretch; min-width: 220px; } .zelmor-footer__grid-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 30px; } .zelmor-footer__brand { grid-column: span 1; } .zelmor-footer__column--contact, .zelmor-footer__column--social { grid-column: span 1; } } /* --------------------------------------------------------- MOBILE 481px — 767px --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 767px) { .zelmor-footer__cta { align-items: flex-start; flex-direction: column; gap: 27px; margin-bottom: 48px; padding: 28px; border-radius: 27px 27px 54px 27px; } .zelmor-footer__cta h2 { font-size: clamp( 2.5rem, 8vw, 3.7rem ); } .zelmor-footer__cta-actions { width: 100%; } .zelmor-footer__grid-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 28px; } .zelmor-footer__brand { grid-column: 1 / -1; max-width: 520px; } .zelmor-footer__logo { width: 82px; height: 82px; } .zelmor-footer__bottom-inner { align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; padding-block: 18px; } } /* --------------------------------------------------------- SMALL MOBILE <= 480px --------------------------------------------------------- */ @media (max-width: 480px) { .zelmor-footer__cta { align-items: stretch; flex-direction: column; gap: 24px; margin-bottom: 42px; padding: 23px 18px; border-radius: 23px 23px 45px 23px; } .zelmor-footer__cta-kicker { font-size: 0.9rem; } .zelmor-footer__cta h2 { font-size: clamp( 2.3rem, 10vw, 3rem ); } .zelmor-footer__cta-actions { align-items: stretch; flex-direction: column; width: 100%; } .zelmor-footer__cta-phone, .zelmor-footer__cta-estimate { width: 100%; } .zelmor-footer__cta-estimate { justify-content: space-between; font-size: 0.94rem; } .zelmor-footer__grid-layout { grid-template-columns: 1fr; gap: 34px; } .zelmor-footer__brand { max-width: 100%; } .zelmor-footer__logo { width: 78px; height: 78px; border-radius: 20px; } .zelmor-footer__description { max-width: 430px; font-size: 1rem; line-height: 1.62; } .zelmor-footer__column h3 { margin-bottom: 16px; font-size: 1rem; } .zelmor-footer__column li a { font-size: 0.95rem; } .zelmor-footer__hours-row strong, .zelmor-footer__contact-link strong { font-size: 0.98rem; } .zelmor-footer__column--social > p { font-size: 0.94rem; } .zelmor-footer__bottom-inner { align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; min-height: auto; padding-block: 18px; } .zelmor-footer__copyright, .zelmor-footer__powered { font-size: 0.9rem; } .zelmor-footer__grid, .zelmor-footer__spark--two { display: none; } } /* ========================================================= 20. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .zelmor-footer__cta-estimate, .zelmor-footer__cta-estimate-icon, .zelmor-footer__column li a, .zelmor-footer__contact-button, .zelmor-footer__social, .zelmor-footer__powered, .zelmor-footer [data-zelmor-footer-reveal] { transition: none !important; } .zelmor-footer.is-motion-ready [data-zelmor-footer-reveal] { opacity: 1 !important; transform: none !important; } }