/* ========================================================= LV BODY WAXING & FACIALS FINAL UNIFIED SERVICE PAGE MOBILE DESIGN Facials = visual standard Body Waxing / Add-Ons = same structure Hydro = same structure, but full image remains uncropped ========================================================= */ /* ========================================================= MOBILE — SHARED DESIGN ========================================================= */ @media (max-width: 820px) { /* ------------------------------------------------------- HEADER ------------------------------------------------------- */ body.service-page .sales-header { position: relative !important; z-index: 9999 !important; height: 82px !important; overflow: visible !important; } body.service-page .sales-header-inner { width: 100% !important; height: 82px !important; padding: 0 18px !important; display: flex !important; align-items: center !important; overflow: visible !important; } body.service-page .sales-logo { width: 100px !important; height: 100px !important; margin-top: 28px !important; } /* ------------------------------------------------------- STANDARD HERO — BODY / FACIALS / ADD-ONS ------------------------------------------------------- */ body.service-page:not(.page-hydro-facials) .sales-hero { position: relative !important; display: block !important; min-height: 740px !important; padding: 0 !important; overflow: hidden !important; background: #211109 !important; box-shadow: 0 16px 32px rgba(40,20,10,.16) !important; } body.service-page:not(.page-hydro-facials) .sales-hero-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; transform: none !important; filter: brightness(.92) contrast(1.03) saturate(.97) !important; } /* individual focal points */ body.page-body-waxing .sales-hero-image { object-position: 94% center !important; } body.page-facials .sales-hero-image { object-position: 52% center !important; } body.page-add-ons .sales-hero-image { object-position: 52% center !important; } /* ------------------------------------------------------- SHARED HERO SHADE ------------------------------------------------------- */ body.service-page:not(.page-hydro-facials) .sales-hero::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient( 180deg, rgba(18,8,5,.02) 0%, rgba(18,8,5,.02) 35%, rgba(18,8,5,.08) 48%, rgba(18,8,5,.26) 61%, rgba(24,11,7,.63) 81%, rgba(24,11,7,.86) 100% ) !important; } /* ------------------------------------------------------- HERO TEXT PANEL — SHARED ------------------------------------------------------- */ body.service-page:not(.page-hydro-facials) .sales-hero-inner { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 28px !important; z-index: 4 !important; width: 100% !important; margin: 0 !important; padding: 0 18px !important; background: transparent !important; } body.service-page .sales-hero-copy { width: 100% !important; max-width: 470px !important; margin: 0 auto !important; padding: 22px 20px 20px !important; background: linear-gradient( 135deg, rgba(49,25,14,.86), rgba(27,13,8,.75) ) !important; border: 1px solid rgba(224,181,96,.34) !important; box-shadow: 0 16px 36px rgba(0,0,0,.24) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } body.service-page .sales-hero-copy .eyebrow { margin-bottom: 8px !important; color: #edc56f !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .15em !important; } body.service-page .sales-hero h1 { margin: 0 0 12px !important; color: #fffaf4 !important; font-size: 48px !important; line-height: .95 !important; letter-spacing: -.025em !important; } body.service-page .sales-hero p { margin: 0 !important; max-width: 100% !important; color: rgba(255,250,245,.92) !important; font-size: 13.5px !important; line-height: 1.68 !important; } /* ------------------------------------------------------- CTA BUTTONS — SHARED ------------------------------------------------------- */ body.service-page .hero-actions { margin-top: 19px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } body.service-page .hero-actions .btn-primary, body.service-page .hero-actions .btn-secondary { width: 100% !important; min-height: 52px !important; padding: 0 12px !important; font-size: 8.8px !important; letter-spacing: .065em !important; } body.service-page .hero-actions .btn-primary { background: linear-gradient( 135deg, #f0cc79 0%, #d89d3f 52%, #eabd62 100% ) !important; color: #211008 !important; border: 1px solid #f2d38b !important; box-shadow: 0 0 18px rgba(220,164,65,.28), 0 10px 25px rgba(0,0,0,.18) !important; } body.service-page .hero-actions .btn-secondary { background: rgba(255,255,255,.07) !important; color: #fffaf5 !important; border: 1px solid rgba(233,193,111,.82) !important; } /* ------------------------------------------------------- STANDARD HERO DIVIDER ------------------------------------------------------- */ body.service-page:not(.page-hydro-facials) .sales-hero::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; height: 55px !important; z-index: 3 !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(54,28,16,0) 0%, rgba(74,42,24,.20) 38%, rgba(224,217,208,.72) 82%, rgba(244,240,235,.98) 100% ) !important; } /* ===================================================== HYDRO — SAME DESIGN, FULL IMAGE / NO CROP ===================================================== */ body.page-hydro-facials .sales-hero { position: relative !important; display: block !important; min-height: auto !important; padding: 0 0 225px !important; overflow: visible !important; background: linear-gradient( 180deg, #2b160c 0%, #241109 100% ) !important; box-shadow: 0 16px 32px rgba(40,20,10,.16) !important; } /* Entire Hydro photograph remains visible. No cover. No crop. No scale. */ body.page-hydro-facials .sales-hero-image { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; max-width: 100% !important; display: block !important; object-fit: contain !important; object-position: center center !important; transform: none !important; filter: none !important; } /* Let the shared card overlap the lower edge of the full image instead of creating cream space. */ body.page-hydro-facials .sales-hero-inner { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 24px !important; z-index: 4 !important; width: 100% !important; margin: 0 !important; padding: 0 18px !important; background: transparent !important; } body.page-hydro-facials .sales-hero::before { display: none !important; content: none !important; } /* Transition is dark-to-cream only at the very bottom, not a large blank cream block. */ body.page-hydro-facials .sales-hero::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; height: 42px !important; z-index: 3 !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(43,22,12,0) 0%, rgba(77,43,24,.24) 40%, rgba(224,217,208,.76) 83%, rgba(244,240,235,.98) 100% ) !important; } /* ------------------------------------------------------- TRUST STRIP — ALL SERVICE PAGES ------------------------------------------------------- */ body.service-page .trust-strip { position: relative !important; z-index: 5 !important; margin-top: 0 !important; padding: 27px 10px !important; background: linear-gradient( 135deg, #211008, #351b0e ) !important; box-shadow: inset 0 1px 0 rgba(225,184,98,.18) !important; } body.service-page .trust-inner { width: 100% !important; min-height: auto !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 0 !important; } body.service-page .trust-item { padding: 4px 10px !important; } body.service-page .trust-item + .trust-item { border-left: 1px solid rgba(224,181,94,.25) !important; } body.service-page .trust-item strong { margin-bottom: 7px !important; color: #e6b95c !important; font-size: 18px !important; line-height: 1 !important; } body.service-page .trust-item span { display: block !important; color: rgba(255,255,255,.66) !important; font-size: 7.3px !important; line-height: 1.45 !important; letter-spacing: .065em !important; } } /* ========================================================= NARROW MOBILE ========================================================= */ @media (max-width: 540px) { body.service-page:not(.page-hydro-facials) .sales-hero { min-height: 720px !important; } body.service-page .sales-hero h1 { font-size: 44px !important; } body.service-page .sales-hero-copy { padding: 20px 17px !important; } body.service-page:not(.page-hydro-facials) .sales-hero-inner, body.page-hydro-facials .sales-hero-inner { padding: 0 14px !important; } body.service-page .hero-actions { grid-template-columns: 1fr !important; } body.page-hydro-facials .sales-hero { padding-bottom: 230px !important; } body.page-hydro-facials .sales-hero-inner { bottom: 20px !important; } body.service-page .trust-item { padding: 4px 7px !important; } body.service-page .trust-item strong { font-size: 16px !important; } body.service-page .trust-item span { font-size: 6.8px !important; } } /* ========================================================= HYDRO FACIALS — FINAL HERO Match Body Waxing / reference screenshot ========================================================= */ @media (max-width: 820px) { body.page-hydro-facials .sales-hero { position: relative !important; display: block !important; min-height: 760px !important; padding: 0 !important; overflow: hidden !important; background: #211109 !important; box-shadow: 0 16px 32px rgba(40,20,10,.16) !important; } /* Fill hero and focus on woman's face */ body.page-hydro-facials .sales-hero-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: 78% center !important; transform: scale(1.03) !important; transform-origin: center center !important; filter: brightness(.94) contrast(1.03) saturate(.98) !important; } /* Elegant image shading */ body.page-hydro-facials .sales-hero::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient( 180deg, rgba(18,8,5,.01) 0%, rgba(18,8,5,.01) 35%, rgba(18,8,5,.08) 50%, rgba(18,8,5,.28) 64%, rgba(24,11,7,.62) 82%, rgba(24,11,7,.86) 100% ) !important; } /* Glass panel overlays bottom of photograph */ body.page-hydro-facials .sales-hero-inner { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 28px !important; z-index: 4 !important; width: 100% !important; margin: 0 !important; padding: 0 18px !important; background: transparent !important; } body.page-hydro-facials .sales-hero-copy { width: 100% !important; max-width: 470px !important; margin: 0 auto !important; } /* Soft shaded transition */ body.page-hydro-facials .sales-hero::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; height: 55px !important; z-index: 3 !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(54,28,16,0) 0%, rgba(74,42,24,.20) 38%, rgba(224,217,208,.72) 82%, rgba(244,240,235,.98) 100% ) !important; } } @media (max-width: 540px) { body.page-hydro-facials .sales-hero { min-height: 740px !important; } body.page-hydro-facials .sales-hero-image { object-position: 80% center !important; transform: scale(1.04) !important; } body.page-hydro-facials .sales-hero-inner { bottom: 26px !important; padding: 0 14px !important; } } /* ========================================================= HYDRO FACIALS — LOWER OVERLAY BOX TO SHOW MORE CHIN ========================================================= */ @media (max-width: 820px) { body.page-hydro-facials .sales-hero-inner { bottom: 8px !important; padding: 0 18px !important; } body.page-hydro-facials .sales-hero-copy { max-width: 470px !important; margin: 0 auto !important; } body.page-hydro-facials .sales-hero::after { height: 42px !important; } } @media (max-width: 540px) { body.page-hydro-facials .sales-hero-inner { bottom: 4px !important; padding: 0 14px !important; } body.page-hydro-facials .sales-hero-copy { max-width: 100% !important; } body.page-hydro-facials .sales-hero::after { height: 34px !important; } } /* ========================================================= SERVICE PAGES — LARGER MOBILE LOGO ========================================================= */ @media (max-width: 820px) { body.service-page .sales-logo { width: 120px !important; height: 120px !important; margin-top: 38px !important; max-width: none !important; max-height: none !important; object-fit: contain !important; filter: drop-shadow(0 8px 16px rgba(0,0,0,.28)) !important; } body.service-page .service-brand-link { position: relative !important; z-index: 100005 !important; } } @media (max-width: 480px) { body.service-page .sales-logo { width: 114px !important; height: 114px !important; margin-top: 34px !important; } } /* ========================================================= SERVICE PAGES — STICKY NAVIGATION HEADER ========================================================= */ body.service-page .sales-header { position: sticky !important; position: -webkit-sticky !important; top: 0 !important; z-index: 99999 !important; background: rgba(25, 12, 7, .98) !important; box-shadow: 0 8px 24px rgba(24, 11, 6, .18) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body.service-page .sales-header-inner { position: relative !important; z-index: 100001 !important; } body.service-page .service-brand-link, body.service-page .sales-logo { position: relative !important; z-index: 100002 !important; } /* Mobile dropdown remains attached beneath sticky header */ @media (max-width: 820px) { body.service-page .mobile-service-menu { position: absolute !important; top: 82px !important; z-index: 100000 !important; } } /* ========================================================= SERVICE PAGES — MOBILE FIXED HEADER Desktop remains sticky ========================================================= */ @media (max-width: 820px) { body.service-page { padding-top: 82px !important; } body.service-page .sales-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 82px !important; z-index: 99999 !important; overflow: visible !important; background: rgba(25, 12, 7, .98) !important; box-shadow: 0 7px 22px rgba(20, 9, 5, .24) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body.service-page .sales-header-inner { position: relative !important; z-index: 100001 !important; overflow: visible !important; } body.service-page .service-brand-link, body.service-page .sales-logo { z-index: 100003 !important; } /* Keep hamburger dropdown directly under the permanently fixed header. */ body.service-page .mobile-service-menu { position: fixed !important; top: 82px !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 99998 !important; } } /* ========================================================= SERVICE PAGES — DARKER / CLEARER MOBILE MENU ========================================================= */ @media (max-width: 820px) { body.service-page .sales-header { background: rgba(22,10,5,.99) !important; box-shadow: 0 9px 28px rgba(0,0,0,.34) !important; } body.service-page .mobile-service-menu { background: linear-gradient( 180deg, rgba(18,8,4,.995) 0%, rgba(38,17,8,.995) 100% ) !important; border-top: 1px solid rgba(230,187,98,.28) !important; border-bottom: 1px solid rgba(230,187,98,.18) !important; box-shadow: 0 24px 48px rgba(0,0,0,.46) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } body.service-page .mobile-service-menu a { color: rgba(255,255,255,.96) !important; } body.service-page .mobile-service-menu a:hover { color: #efc66f !important; background: rgba(255,255,255,.045) !important; } body.service-page .mobile-menu-label { color: #e8b95d !important; } } /* ========================================================= SERVICE PAGES — FULL HEIGHT MOBILE MENU PANEL ========================================================= */ @media (max-width: 820px) { body.service-page .mobile-service-menu.is-open, body.service-page .mobile-service-menu.open { position: fixed !important; top: 82px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: calc(100dvh - 82px) !important; padding: 24px 28px 36px !important; overflow-y: auto !important; z-index: 99997 !important; background: linear-gradient( 180deg, #190a04 0%, #251007 48%, #150803 100% ) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.service-page .mobile-service-menu.is-open a, body.service-page .mobile-service-menu.open a { display: block !important; width: 100% !important; padding: 16px 2px !important; color: #fffaf3 !important; border-bottom: 1px solid rgba(232,185,92,.18) !important; } } /* ========================================================= SERVICE PAGES — PROFESSIONAL FLOATING MOBILE MENU ========================================================= */ @media (max-width: 820px) { body.service-page .mobile-service-menu.is-open, body.service-page .mobile-service-menu.open { position: fixed !important; top: 92px !important; left: 14px !important; right: 14px !important; bottom: auto !important; width: auto !important; height: auto !important; max-height: calc(100dvh - 112px) !important; padding: 12px 18px 16px !important; overflow-y: auto !important; z-index: 99997 !important; background: linear-gradient( 145deg, rgba(29,12,6,.985), rgba(48,20,9,.975) ) !important; border: 1px solid rgba(225,178,88,.34) !important; border-radius: 18px !important; box-shadow: 0 22px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,231,178,.06) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } body.service-page .mobile-service-menu.is-open a, body.service-page .mobile-service-menu.open a { display: block !important; width: 100% !important; padding: 13px 5px !important; color: #fff9ef !important; font-size: 18px !important; line-height: 1.15 !important; border-bottom: 1px solid rgba(223,177,88,.14) !important; } body.service-page .mobile-service-menu.is-open a:last-child, body.service-page .mobile-service-menu.open a:last-child { border-bottom: none !important; } body.service-page .mobile-service-menu.is-open a:hover, body.service-page .mobile-service-menu.open a:hover { color: #efc66f !important; background: rgba(255,255,255,.025) !important; } } @media (max-width: 520px) { body.service-page .mobile-service-menu.is-open, body.service-page .mobile-service-menu.open { top: 90px !important; left: 12px !important; right: 12px !important; border-radius: 16px !important; padding: 11px 16px 14px !important; } } /* ========================================================= SERVICE MOBILE MENUS — HIDE REVIEWS + GALLERY ========================================================= */ @media (max-width: 820px) { body.service-page .mobile-service-menu a[href*="#reviews"], body.service-page .mobile-service-menu a[href*="#gallery"] { display: none !important; } }