/** * Jaingems masthead — mobile / tablet (loads LAST in ). * Clean bar + drawer inspired by modern Framer-style sites (e.g. Estatix). */ /* Legacy top strip: address, phones, email, social (was blue #22b6db) — removed from layout */ .main_header_wrapper .hs_navigation_header_wrapper { display: none !important; } /* Real backdrop (JS inserts #jg-nav-backdrop) — shared by mobile + desktop homepage masthead */ #jg-nav-backdrop { position: fixed !important; inset: 0 !important; z-index: 100080 !important; background: rgba(15, 23, 42, 0.4) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.28s ease, visibility 0s linear 0.3s !important; } #jg-nav-backdrop.is-visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: opacity 0.28s ease, visibility 0s linear 0s !important; } /* ---------- Mobile & tablet: show masthead, hide desktop bar ---------- */ @media (max-width: 1199.98px) { /* One height everywhere (matches .jg-masthead-bar: 10+10 padding + --jg-nav-logo-max-height) */ html { --jg-masthead-h: 72px; scroll-padding-top: var(--jg-masthead-h); } /* Reserve space for fixed masthead (body > #jg-masthead) */ body { padding-top: var(--jg-masthead-h) !important; } /* Homepage mobile/tablet: no extra white spacer above hero image */ body.jg-home-page { padding-top: 0 !important; } /* In hero: masthead is only a floating hamburger (drawer offset below) */ html:has(body.jg-home-page.jg-nav-compact) { --jg-masthead-h: 72px; scroll-padding-top: var(--jg-masthead-h); } /* Hero in view: larger logo + full bar tap targets (see .jg-masthead-logo rules below) */ html:has(body.jg-home-page.jg-nav-compact.jg-home-hero-active) { --jg-masthead-h: 88px; scroll-padding-top: var(--jg-masthead-h); } body.jg-home-page.jg-nav-compact #jg-masthead.jg-mobile-header, body.jg-home-page.jg-nav-compact header#jg-masthead.mobail_menu { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: none !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; pointer-events: none !important; } body.jg-home-page.jg-nav-compact #jg-masthead.jg-mobile-header.menu_fixed, body.jg-home-page.jg-nav-compact header#jg-masthead.mobail_menu.menu_fixed { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: none !important; box-shadow: none !important; } body.jg-home-page.jg-nav-compact .jg-masthead-bar { justify-content: flex-end !important; min-height: 0 !important; padding: 12px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)) !important; gap: 0 !important; pointer-events: none !important; } body.jg-home-page.jg-nav-compact .jg-masthead-logo, body.jg-home-page.jg-nav-compact .jg-masthead-cta, body.jg-home-page.jg-nav-compact #jg-masthead .jg-masthead-cta.hs_btn_hover { display: none !important; } body.jg-home-page.jg-nav-compact .jg-masthead-end { pointer-events: auto !important; } /* * Masthead “Chat with us on WhatsApp” pill is desktop (≥1200px) + in-hero only. * Past hero, custom.js removes jg-nav-compact on all breakpoints — without this, * the chip would become visible in the fixed masthead on phones. Mobile/tablet use the FAB. */ .jg-wa-masthead-chip { display: none !important; } body.jg-home-page.jg-nav-compact .jg-masthead-burger.house_toggle, body.jg-home-page.jg-nav-compact button.jg-masthead-burger { pointer-events: auto !important; background: #ffffff !important; border-color: rgba(15, 23, 42, 0.1) !important; box-shadow: 0 6px 16px rgba(11, 18, 35, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } /* Hero fold visible: show wordmark + align with menu (logo hidden otherwise in compact) */ body.jg-home-page.jg-nav-compact.jg-home-hero-active .jg-masthead-logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; pointer-events: auto !important; } body.jg-home-page.jg-nav-compact.jg-home-hero-active .jg-masthead-bar { justify-content: space-between !important; gap: 10px !important; min-height: 56px !important; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)) !important; } body.jg-home-page.jg-nav-compact.jg-home-hero-active .jg-masthead-logo img { max-height: var(--jg-hero-masthead-logo-max-height) !important; max-width: min(300px, 78vw) !important; width: auto !important; height: auto !important; object-fit: contain !important; object-position: left center !important; filter: none !important; -webkit-filter: none !important; } .main_header_wrapper { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; position: relative !important; z-index: 1 !important; } .main_header_wrapper .hs_header_Wrapper, .main_header_wrapper .hs_header_Wrapper.jg-desktop-header, .main_header_wrapper .jg-desktop-header { display: none !important; } /* * Fixed bar — not inside .main_header_wrapper (avoids sticky/containment bugs). * Must stay above hero/slider and must not rely on parent stacking. */ #jg-masthead.jg-mobile-header, header#jg-masthead.mobail_menu { display: flex !important; flex-direction: column !important; align-items: stretch !important; box-sizing: border-box !important; width: 100% !important; max-width: 100vw !important; min-height: var(--jg-masthead-h) !important; height: auto !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 100095 !important; background: rgba(255, 255, 255, 0.42) !important; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 10px 30px rgba(11, 18, 35, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; -webkit-transform: translateZ(0); transform: translateZ(0); clip: auto !important; clip-path: none !important; pointer-events: auto !important; } /* custom.js adds .menu_fixed on scroll; global .menu_fixed uses low z-index — keep masthead on top */ #jg-masthead.jg-mobile-header.menu_fixed, header#jg-masthead.mobail_menu.menu_fixed { z-index: 100095 !important; } /* Homepage past hero (mobile/tablet): glass bar with logo + CTA */ body.jg-home-page:not(.jg-nav-compact) #jg-masthead.jg-mobile-header, body.jg-home-page:not(.jg-nav-compact) header#jg-masthead.mobail_menu { background: rgba(255, 255, 255, 0.14) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.26) !important; box-shadow: 0 6px 20px rgba(11, 18, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important; } body.jg-home-page:not(.jg-nav-compact) .jg-masthead-burger.house_toggle, body.jg-home-page:not(.jg-nav-compact) button.jg-masthead-burger { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.1) !important; box-shadow: 0 6px 16px rgba(11, 18, 35, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } /* Legacy layout (row/col) still used on inner pages */ #jg-masthead .container { max-width: 100% !important; width: 100% !important; padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; padding-top: 10px !important; padding-bottom: 10px !important; margin: 0 auto !important; box-sizing: border-box !important; } #jg-masthead .hs_logo { padding: 0 !important; margin: 0 !important; } #jg-masthead .row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; margin: 0 !important; min-height: 40px !important; } #jg-masthead .col-xs-8, #jg-masthead .col-sm-8, #jg-masthead .col-xs-4, #jg-masthead .col-sm-4 { display: block !important; visibility: visible !important; float: none !important; width: auto !important; flex: 0 0 auto !important; } #jg-masthead .col-xs-8, #jg-masthead .col-sm-8 { flex: 1 1 auto !important; min-width: 0 !important; } #jg-masthead .hs_logo > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; line-height: 0 !important; text-decoration: none !important; background: var(--jg-logo-chip-bg) !important; border: 1px solid var(--jg-logo-chip-border) !important; border-radius: var(--jg-logo-chip-radius) !important; box-shadow: var(--jg-logo-chip-shadow) !important; padding: var(--jg-logo-chip-pad-y) var(--jg-logo-chip-pad-x) !important; transition: transform 0.22s ease, box-shadow 0.22s ease !important; } #jg-masthead .hs_logo > a:hover { transform: translateY(-1px) !important; box-shadow: var(--jg-logo-chip-shadow-hover) !important; } #jg-masthead .hs_logo > a:focus-visible { outline: 2px solid rgba(106, 178, 239, 0.55) !important; outline-offset: 3px !important; } #jg-masthead .hs_logo img { max-height: var(--jg-nav-logo-max-height) !important; max-width: var(--jg-nav-logo-max-width) !important; width: auto !important; height: auto !important; display: block !important; filter: none !important; -webkit-filter: none !important; } #jg-masthead .cd-dropdown-wrapper { display: inline-flex !important; align-items: center !important; visibility: visible !important; margin: 0 !important; float: none !important; height: auto !important; min-height: 0 !important; } /* ---------- New compact bar (index) ---------- */ .jg-masthead-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; min-height: 52px !important; padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left)) !important; box-sizing: border-box !important; width: 100% !important; } .jg-masthead-logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 auto !important; min-width: 0 !important; text-decoration: none !important; box-sizing: border-box !important; line-height: 0 !important; background: var(--jg-logo-chip-bg) !important; border: 1px solid var(--jg-logo-chip-border) !important; border-radius: var(--jg-logo-chip-radius) !important; box-shadow: var(--jg-logo-chip-shadow) !important; padding: var(--jg-logo-chip-pad-y) var(--jg-logo-chip-pad-x) !important; transition: transform 0.22s ease, box-shadow 0.22s ease !important; } .jg-masthead-logo:hover { transform: translateY(-1px) !important; box-shadow: var(--jg-logo-chip-shadow-hover) !important; } .jg-masthead-logo:focus-visible { outline: 2px solid rgba(106, 178, 239, 0.55) !important; outline-offset: 3px !important; } .jg-masthead-logo img { max-height: var(--jg-nav-logo-max-height) !important; max-width: var(--jg-nav-logo-max-width) !important; width: auto !important; height: auto !important; display: block !important; filter: none !important; -webkit-filter: none !important; } .jg-masthead-end { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; } /* Same pill as desktop: global .hs_btn_hover in style.css */ #jg-masthead .jg-masthead-cta.hs_btn_hover { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; width: auto !important; padding: 10px 18px !important; margin: 0 !important; font-size: 0.875rem !important; line-height: 1.2 !important; border-radius: 12px !important; text-decoration: none !important; box-sizing: border-box !important; box-shadow: 0 8px 20px rgba(106, 178, 239, 0.22) !important; } @media (max-width: 767.98px) { #jg-masthead .jg-masthead-cta.hs_btn_hover { display: none !important; } } /* Burger button */ button.jg-masthead-burger, .jg-masthead-burger.house_toggle { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 13px !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; background: #ffffff !important; box-shadow: 0 8px 20px rgba(11, 18, 35, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; cursor: pointer !important; display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 2 !important; transition: background-color 0.26s ease, border-color 0.26s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease !important; } button.jg-masthead-burger:active, .jg-masthead-burger.house_toggle:active { transform: scale(0.92) !important; } .jg-burger-line { display: block !important; width: 20px !important; height: 2px !important; background: #0f172a !important; border-radius: 1px !important; transform-origin: center !important; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background-color 0.25s ease !important; } .jg-masthead-burger.dropdown-is-active { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.16) !important; } .jg-masthead-burger.dropdown-is-active .jg-burger-line { background: #0f172a !important; } .jg-masthead-burger.dropdown-is-active .jg-burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg) scaleX(0.95) !important; } .jg-masthead-burger.dropdown-is-active .jg-burger-line:nth-child(2) { opacity: 0 !important; transform: scaleX(0.3) !important; } .jg-masthead-burger.dropdown-is-active .jg-burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg) scaleX(0.95) !important; } /* Legacy anchor toggle (inner pages): visible icon */ #jg-masthead a.house_toggle:not(.jg-masthead-burger) { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; visibility: visible !important; opacity: 1 !important; border-radius: 12px !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; background: #fff !important; } #jg-masthead a.house_toggle:not(.jg-masthead-burger) svg { display: none !important; } #jg-masthead a.house_toggle:not(.jg-masthead-burger)::before { content: "" !important; position: absolute !important; left: 11px !important; right: 11px !important; top: 15px !important; height: 2px !important; background: #0f172a !important; border-radius: 1px !important; box-shadow: 0 6px 0 #0f172a, 0 12px 0 #0f172a !important; } /* ---------- Drawer (light, editorial) ---------- */ #jg-mobile-nav.cd-dropdown, #jg-mobile-nav.jg-drawer { position: fixed !important; top: var(--jg-masthead-h) !important; bottom: 0 !important; right: 0 !important; left: auto !important; /* positioning context for .cd-close */ isolation: isolate !important; width: 75vw !important; max-width: 75vw !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; color: #0f172a !important; z-index: 100050 !important; box-shadow: -24px 0 80px rgba(15, 23, 42, 0.12) !important; transform: translateX(105%) !important; opacity: 1 !important; visibility: hidden !important; transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.4s !important; border: 1px solid rgba(223, 230, 239, 0.5) !important; border-right: none !important; border-top-left-radius: 18px !important; border-bottom-left-radius: 18px !important; overflow: hidden !important; } /* Closed drawer must not capture taps/clicks over the page */ #jg-mobile-nav.cd-dropdown:not(.dropdown-is-active), #jg-mobile-nav.jg-drawer:not(.dropdown-is-active) { pointer-events: none !important; } #jg-mobile-nav.cd-dropdown.dropdown-is-active, #jg-mobile-nav.jg-drawer.dropdown-is-active { visibility: visible !important; transform: translateX(0) !important; transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s !important; pointer-events: auto !important; /* Above masthead (100095) so Close and links receive taps */ z-index: 100200 !important; top: var(--jg-masthead-h) !important; left: auto !important; right: 0 !important; bottom: 0 !important; width: 75vw !important; max-width: 75vw !important; height: calc(100dvh - var(--jg-masthead-h)) !important; min-height: calc(100vh - var(--jg-masthead-h)) !important; background: #ffffff !important; border: 1px solid rgba(223, 230, 239, 0.5) !important; border-right: none !important; border-top-left-radius: 18px !important; border-bottom-left-radius: 18px !important; } #jg-mobile-nav h2 { display: none !important; } #jg-mobile-nav h2 a { color: #0f172a !important; text-decoration: none !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-transform: none !important; } #jg-mobile-nav h2::after { display: none !important; } #jg-mobile-nav .cd-close { display: none !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 10px !important; right: 16px !important; width: 44px !important; height: 44px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important; z-index: 20 !important; cursor: pointer !important; text-indent: 0 !important; overflow: visible !important; color: transparent !important; } #jg-mobile-nav .cd-close::before, #jg-mobile-nav .cd-close::after { background: #0f172a !important; } #jg-mobile-nav .cd-dropdown-content { position: relative !important; padding: 6px 10px 12px !important; height: calc(100dvh - var(--jg-masthead-h)) !important; min-height: calc(100vh - var(--jg-masthead-h)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important; background: #ffffff !important; display: block !important; visibility: visible !important; opacity: 1 !important; transform: none !important; max-height: none !important; } #jg-mobile-nav .cd-dropdown-content::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* Force top-level mobile menu to render in place (legacy cd-dropdown CSS can hide/translate it) */ #jg-mobile-nav > ul.cd-dropdown-content { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; transform: none !important; -webkit-transform: none !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; max-height: none !important; } /* Top-level list only — nested .cd-secondary-dropdown is styled below */ #jg-mobile-nav ul.cd-dropdown-content ul:not(.cd-secondary-dropdown) { position: static !important; transform: none !important; -webkit-transform: none !important; visibility: visible !important; opacity: 1 !important; } /* Astrology (and future) accordion submenus inside the drawer */ #jg-mobile-nav .cd-secondary-dropdown { list-style: none !important; box-sizing: border-box !important; margin: 0.2rem 0 0.4rem 14px !important; padding: 0.35rem 0 0.4rem 12px !important; width: calc(100% - 14px) !important; max-width: calc(100% - 14px) !important; height: auto !important; overflow: visible !important; position: static !important; transform: none !important; -webkit-transform: none !important; border-top: 1px solid rgba(15, 23, 42, 0.08) !important; border-left: 2px solid rgba(106, 178, 239, 0.38) !important; background: rgba(248, 250, 252, 0.65) !important; border-radius: 10px !important; } #jg-mobile-nav .cd-secondary-dropdown.is-hidden { display: none !important; } #jg-mobile-nav .cd-secondary-dropdown:not(.is-hidden) { display: block !important; } #jg-mobile-nav .cd-secondary-dropdown > li { list-style: none !important; } #jg-mobile-nav li.jg-mobile-nav__subhead { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.35rem !important; padding: 0.35rem 0 0.65rem !important; margin: 0 0 0.15rem !important; border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important; } #jg-mobile-nav li.jg-mobile-nav__subhead > a { font-size: 0.8125rem !important; font-weight: 600 !important; color: #1a5f8a !important; padding: 8px 14px !important; border-radius: 8px !important; width: auto !important; max-width: max-content !important; } #jg-mobile-nav .jg-mobile-nav__breadcrumb { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #64748b !important; padding: 0 14px 2px !important; margin: 0 !important; line-height: 1.35 !important; } #jg-mobile-nav .jg-mobile-nav__breadcrumb span[aria-hidden="true"] { margin: 0 0.35em !important; opacity: 0.65 !important; } #jg-mobile-nav .jg-nav-astrology > a { position: relative !important; padding-right: 2.25rem !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 600 !important; } #jg-mobile-nav .jg-nav-astrology > a::after { content: "" !important; position: absolute !important; right: 18px !important; top: 50% !important; width: 0.4rem !important; height: 0.4rem !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; transform: translateY(-70%) rotate(45deg) !important; opacity: 0.45 !important; pointer-events: none !important; transition: transform 0.22s ease, opacity 0.2s ease !important; } #jg-mobile-nav .jg-nav-astrology.is-open > a::after { transform: translateY(-30%) rotate(-135deg) !important; opacity: 0.65 !important; } #jg-mobile-nav .cd-dropdown-content > li { display: block !important; visibility: visible !important; opacity: 1 !important; } #jg-mobile-nav .cd-dropdown-content > li > a, #jg-mobile-nav .cd-dropdown-content a { color: #0f172a !important; border: none !important; border-radius: 8px !important; padding: 12px 14px !important; margin: 0 !important; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-size: 0.92rem !important; font-weight: 500 !important; letter-spacing: 0.01em !important; white-space: normal !important; line-height: 1.35 !important; background: transparent !important; display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; text-align: left !important; transition: background 0.2s ease, color 0.2s ease, font-weight 0.15s ease !important; } /* Ensure CONTACT link has no extra top gap in mobile drawer */ #jg-mobile-nav .cd-dropdown-content > li:last-child > a { margin-top: 0 !important; padding-top: 12px !important; } /* Opaque pill hover — reads clearly on glass or white drawer */ #jg-mobile-nav .cd-dropdown-content > li > a:hover, #jg-mobile-nav .cd-dropdown-content > li > a:focus-visible, #jg-mobile-nav .cd-dropdown-content a:hover, #jg-mobile-nav .cd-dropdown-content a:focus-visible { background: #e8f2fa !important; color: #1a5f8a !important; font-weight: 700 !important; } } /* ---------- Desktop: classic bar only ---------- */ @media (min-width: 1200px) { /* * Hamburger drawer: Astrology is a direct link (submenu hidden; href set in jquery.menu-aim.js). */ #jg-mobile-nav .jg-nav-astrology .cd-secondary-dropdown { display: none !important; } #jg-mobile-nav .jg-nav-astrology > a { padding-right: 14px !important; } #jg-mobile-nav .jg-nav-astrology > a::after, #jg-mobile-nav .jg-nav-astrology.is-open > a::after, body.jg-home-page.jg-nav-compact #jg-mobile-nav .jg-nav-astrology > a::after, body.jg-home-page.jg-nav-compact #jg-mobile-nav .jg-nav-astrology.is-open > a::after { display: none !important; content: none !important; } /* * Desktop nav is position:fixed — reserve space so hero/content is not hidden under the bar. * Match actual bar height with larger logo (~80–84px). */ html { scroll-padding-top: 82px; } body { padding-top: 82px !important; } /* Homepage: no spacer in hero; past hero reserve height for fixed desktop bar */ body.jg-home-page { padding-top: 0 !important; } body.jg-home-page:not(.jg-nav-compact) { padding-top: 82px !important; } body:not(.jg-home-page) #jg-masthead.jg-mobile-header, body:not(.jg-home-page) header#jg-masthead.mobail_menu, body.jg-home-page:not(.jg-nav-compact) #jg-masthead.jg-mobile-header, body.jg-home-page:not(.jg-nav-compact) header#jg-masthead.mobail_menu { display: none !important; } .main_header_wrapper .hs_header_Wrapper, .main_header_wrapper .jg-desktop-header { display: block !important; } /* Desktop glassmorphic navbar (initial state) */ .main_header_wrapper .hs_header_Wrapper, .main_header_wrapper .hs_header_Wrapper.jg-desktop-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; z-index: 10060 !important; background: rgba(243, 246, 249, 0.5) !important; -webkit-backdrop-filter: blur(12px) saturate(1.12) !important; backdrop-filter: blur(12px) saturate(1.12) !important; border: 1px solid rgba(223, 230, 239, 0.58) !important; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important; transform: translateZ(0) scale(1); transform-origin: center top; transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important; } .main_header_wrapper .hs_top_header_main_Wrapper { background: transparent !important; min-height: 78px; padding: 12px 26px; transition: min-height 0.35s ease, padding 0.35s ease !important; } /* Reduce gap between last nav item (Astrology) and Contact button */ .main_header_wrapper .hs_header_logo_right { gap: 8px !important; } .main_header_wrapper nav.hs_main_menu > ul { display: flex; align-items: center; gap: 4px; } .main_header_wrapper nav.hs_main_menu > ul > li > a.menu-button { color: #374151 !important; border-radius: 10px !important; transition: background 0.2s ease, color 0.2s ease !important; } .main_header_wrapper nav.hs_main_menu > ul > li > a.menu-button:hover, .main_header_wrapper nav.hs_main_menu > ul > li > a.menu-button:focus-visible { background: #e8f2fa !important; color: #1a5f8a !important; } .main_header_wrapper .hs_btn_wrapper .hs_btn_hover { border-radius: 12px !important; box-shadow: 0 8px 20px rgba(106, 178, 239, 0.22); transition: transform 0.28s ease, box-shadow 0.28s ease !important; } .main_header_wrapper .hs_btn_wrapper .hs_btn_hover:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(106, 178, 239, 0.28); } /* Keep Contact CTA vertically aligned with nav links */ .main_header_wrapper .hs_btn_wrapper ul { margin: 0 !important; padding: 0 !important; list-style: none !important; display: flex !important; align-items: center !important; } .main_header_wrapper .hs_btn_wrapper ul > li { margin: 0 !important; padding: 0 !important; } .main_header_wrapper .hs_btn_wrapper ul > li > a.hs_btn_hover { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; line-height: 1.2 !important; } .main_header_wrapper .hs_btn_wrapper { margin-left: 8px !important; gap: 6px !important; } /* Homepage hero (desktop): logo row + hamburger; full bar returns after hero */ html:has(body.jg-home-page.jg-nav-compact) { --jg-masthead-h: 90px; scroll-padding-top: var(--jg-masthead-h); } body.jg-home-page.jg-nav-compact { padding-top: 0 !important; } body.jg-home-page.jg-nav-compact .main_header_wrapper { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; position: relative !important; z-index: 1 !important; } /* * Hero overlay: hide full desktop bar without display:none so transform/opacity can animate. * Scroll + class sync in custom.js compensates for body padding to avoid boundary jitter. */ body.jg-home-page.jg-nav-compact .main_header_wrapper .hs_header_Wrapper, body.jg-home-page.jg-nav-compact .main_header_wrapper .hs_header_Wrapper.jg-desktop-header, body.jg-home-page.jg-nav-compact .main_header_wrapper .jg-desktop-header { display: block !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; transform: translate3d(0, -100%, 0) !important; transition: opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, visibility 0s linear 0.36s !important; } body.jg-home-page:not(.jg-nav-compact) .main_header_wrapper .hs_header_Wrapper, body.jg-home-page:not(.jg-nav-compact) .main_header_wrapper .hs_header_Wrapper.jg-desktop-header, body.jg-home-page:not(.jg-nav-compact) .main_header_wrapper .jg-desktop-header { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: translateZ(0) scale(1) !important; transition: opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, visibility 0s linear 0s !important; } @media (prefers-reduced-motion: reduce) { body.jg-home-page.jg-nav-compact .main_header_wrapper .hs_header_Wrapper, body.jg-home-page.jg-nav-compact .main_header_wrapper .hs_header_Wrapper.jg-desktop-header, body.jg-home-page.jg-nav-compact .main_header_wrapper .jg-desktop-header, body.jg-home-page:not(.jg-nav-compact) .main_header_wrapper .hs_header_Wrapper, body.jg-home-page:not(.jg-nav-compact) .main_header_wrapper .hs_header_Wrapper.jg-desktop-header, body.jg-home-page:not(.jg-nav-compact) .main_header_wrapper .jg-desktop-header { transition-duration: 0.01ms !important; transition-delay: 0s !important; } } body.jg-home-page.jg-nav-compact #jg-masthead.jg-mobile-header, body.jg-home-page.jg-nav-compact header#jg-masthead.mobail_menu { display: flex !important; flex-direction: column !important; align-items: stretch !important; box-sizing: border-box !important; width: 100% !important; max-width: 100vw !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 100095 !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: none !important; box-shadow: none !important; -webkit-transform: translateZ(0); transform: translateZ(0); clip: auto !important; clip-path: none !important; pointer-events: none !important; } body.jg-home-page.jg-nav-compact #jg-masthead.jg-mobile-header.menu_fixed, body.jg-home-page.jg-nav-compact header#jg-masthead.mobail_menu.menu_fixed { z-index: 100095 !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: none !important; box-shadow: none !important; } /* Legacy layout (row/col) still used on inner pages */ body.jg-home-page.jg-nav-compact #jg-masthead .container { max-width: 100% !important; width: 100% !important; padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; padding-top: 10px !important; padding-bottom: 10px !important; margin: 0 auto !important; box-sizing: border-box !important; } body.jg-home-page.jg-nav-compact #jg-masthead .hs_logo { padding: 0 !important; margin: 0 !important; } body.jg-home-page.jg-nav-compact #jg-masthead .row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; margin: 0 !important; min-height: 40px !important; } body.jg-home-page.jg-nav-compact #jg-masthead .col-xs-8, body.jg-home-page.jg-nav-compact #jg-masthead .col-sm-8, body.jg-home-page.jg-nav-compact #jg-masthead .col-xs-4, body.jg-home-page.jg-nav-compact #jg-masthead .col-sm-4 { display: block !important; visibility: visible !important; float: none !important; width: auto !important; flex: 0 0 auto !important; } body.jg-home-page.jg-nav-compact #jg-masthead .col-xs-8, body.jg-home-page.jg-nav-compact #jg-masthead .col-sm-8 { flex: 1 1 auto !important; min-width: 0 !important; } body.jg-home-page.jg-nav-compact #jg-masthead .hs_logo > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; line-height: 0 !important; text-decoration: none !important; background: var(--jg-logo-chip-bg) !important; border: 1px solid var(--jg-logo-chip-border) !important; border-radius: var(--jg-logo-chip-radius) !important; box-shadow: var(--jg-logo-chip-shadow) !important; padding: var(--jg-logo-chip-pad-y) var(--jg-logo-chip-pad-x) !important; transition: transform 0.22s ease, box-shadow 0.22s ease !important; } body.jg-home-page.jg-nav-compact #jg-masthead .hs_logo > a:hover { transform: translateY(-1px) !important; box-shadow: var(--jg-logo-chip-shadow-hover) !important; } body.jg-home-page.jg-nav-compact #jg-masthead .hs_logo img { max-height: var(--jg-nav-logo-max-height) !important; max-width: var(--jg-nav-logo-max-width) !important; width: auto !important; height: auto !important; display: block !important; filter: none !important; -webkit-filter: none !important; } body.jg-home-page.jg-nav-compact #jg-masthead .cd-dropdown-wrapper { display: inline-flex !important; align-items: center !important; visibility: visible !important; margin: 0 !important; float: none !important; height: auto !important; min-height: 0 !important; } /* * Hero top row (desktop): logo + hamburger. * Horizontal inset matches post-hero navbar: Bootstrap .container-fluid (15px) + * .hs_top_header_main_Wrapper padding (26px) — see .main_header_wrapper .hs_top_header_main_Wrapper above. */ body.jg-home-page.jg-nav-compact .jg-masthead-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; min-height: 52px !important; padding: 12px max(41px, env(safe-area-inset-right)) 8px max(41px, env(safe-area-inset-left)) !important; box-sizing: border-box !important; width: 100% !important; pointer-events: none !important; } body.jg-home-page.jg-nav-compact .jg-masthead-logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; flex: 0 0 auto !important; min-width: 0 !important; pointer-events: auto !important; text-decoration: none !important; box-sizing: border-box !important; line-height: 0 !important; background: var(--jg-logo-chip-bg) !important; border: 1px solid var(--jg-logo-chip-border) !important; border-radius: var(--jg-logo-chip-radius) !important; box-shadow: var(--jg-logo-chip-shadow) !important; padding: var(--jg-logo-chip-pad-y) var(--jg-logo-chip-pad-x) !important; transition: transform 0.22s ease, box-shadow 0.22s ease !important; } body.jg-home-page.jg-nav-compact .jg-masthead-logo:hover { transform: translateY(-1px) !important; box-shadow: var(--jg-logo-chip-shadow-hover) !important; } body.jg-home-page.jg-nav-compact .jg-masthead-logo:focus-visible { outline: 2px solid rgba(106, 178, 239, 0.55) !important; outline-offset: 3px !important; } body.jg-home-page.jg-nav-compact .jg-masthead-logo img { display: block !important; max-height: var(--jg-hero-masthead-logo-max-height) !important; max-width: var(--jg-hero-masthead-logo-max-width) !important; width: auto !important; height: auto !important; object-fit: contain !important; object-position: left center !important; filter: none !important; -webkit-filter: none !important; } /* Desktop bar logo: match hero masthead (was width:100% of180px column — taller than hero cap) */ .main_header_wrapper .hs_header_logo_left .hs_logo_wrapper > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; line-height: 0 !important; text-decoration: none !important; background: var(--jg-logo-chip-bg) !important; border: 1px solid var(--jg-logo-chip-border) !important; border-radius: var(--jg-logo-chip-radius) !important; box-shadow: var(--jg-logo-chip-shadow) !important; padding: var(--jg-logo-chip-pad-y) var(--jg-logo-chip-pad-x) !important; transition: transform 0.22s ease, box-shadow 0.22s ease !important; } .main_header_wrapper .hs_header_logo_left .hs_logo_wrapper > a:hover { transform: translateY(-1px) !important; box-shadow: var(--jg-logo-chip-shadow-hover) !important; } .main_header_wrapper .hs_header_logo_left .hs_logo_wrapper > a:focus-visible { outline: 2px solid rgba(106, 178, 239, 0.55) !important; outline-offset: 3px !important; } .main_header_wrapper .hs_header_logo_left .hs_logo_wrapper a img { width: auto !important; max-width: var(--jg-nav-logo-max-width) !important; max-height: var(--jg-nav-logo-max-height) !important; height: auto !important; display: block !important; filter: none !important; -webkit-filter: none !important; } body.jg-home-page.jg-nav-compact .jg-masthead-end { display: flex !important; align-items: center !important; gap: 0 !important; flex-shrink: 0 !important; pointer-events: auto !important; } /* Desktop hero: WhatsApp pill beside hamburger (FAB hidden until user scrolls past hero) */ body.jg-home-page.jg-nav-compact.jg-home-hero-active .jg-masthead-end { gap: 10px !important; } .jg-wa-masthead-chip { display: none !important; position: relative !important; isolation: isolate !important; overflow: hidden !important; box-sizing: border-box !important; align-items: center !important; justify-content: flex-start !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0.6rem !important; max-width: min(17.5rem, calc(100vw - 5.5rem)) !important; height: 44px !important; min-height: 44px !important; padding-block: 0 !important; padding-inline: 1rem !important; margin: 0 !important; align-self: center !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.55) !important; background: var(--jg-wa-brand) !important; color: #fff !important; text-decoration: none !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; line-height: 1 !important; box-shadow: 0 8px 20px rgba(18, 140, 126, 0.35), 0 2px 6px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, filter 0.28s ease !important; -webkit-transform: translateZ(0); transform: translateZ(0); } .jg-wa-masthead-chip::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: inherit !important; z-index: 0 !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%) !important; pointer-events: none !important; } .jg-wa-masthead-chip::after { content: "" !important; position: absolute !important; z-index: 0 !important; width: 180% !important; height: 260% !important; top: -90% !important; left: -130% !important; background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 62%) !important; transform: translateX(0) !important; transition: transform 0.48s ease !important; pointer-events: none !important; } .jg-wa-masthead-chip:hover, .jg-wa-masthead-chip:focus-visible { transform: translateY(-2px) !important; filter: saturate(1.05) !important; background: var(--jg-wa-brand-hover) !important; box-shadow: 0 12px 28px rgba(18, 140, 126, 0.45), 0 4px 10px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; outline: none !important; } .jg-wa-masthead-chip:hover::after, .jg-wa-masthead-chip:focus-visible::after { transform: translateX(72%) !important; } .jg-wa-masthead-chip:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 5px rgba(18, 140, 126, 0.5), 0 12px 28px rgba(18, 140, 126, 0.36) !important; } .jg-wa-masthead-chip__label { display: flex !important; align-items: center !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; flex: 1 1 auto !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; position: relative !important; z-index: 1 !important; } .jg-wa-masthead-chip__icon { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 2.25rem !important; height: 2.25rem !important; margin: 0 !important; padding: 0 !important; position: relative !important; z-index: 1 !important; } .jg-wa-masthead-chip__icon svg { width: 1.4rem !important; height: 1.4rem !important; display: block !important; margin: 0 !important; } body.jg-home-page.jg-nav-compact.jg-home-hero-active .jg-wa-masthead-chip { display: inline-flex !important; } body.jg-home-page.jg-nav-compact #jg-masthead .jg-masthead-cta.hs_btn_hover { display: none !important; } /* Burger — same glass language as .hs_header_Wrapper (desktop navbar) */ body.jg-home-page.jg-nav-compact button.jg-masthead-burger, body.jg-home-page.jg-nav-compact .jg-masthead-burger.house_toggle { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 16px !important; border: 1px solid rgba(223, 230, 239, 0.58) !important; background: rgba(243, 246, 249, 0.5) !important; -webkit-backdrop-filter: blur(12px) saturate(1.12) !important; backdrop-filter: blur(12px) saturate(1.12) !important; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important; cursor: pointer !important; display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 2 !important; pointer-events: auto !important; -webkit-transform: translateZ(0); transform: translateZ(0); transition: background-color 0.26s ease, border-color 0.26s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease !important; } body.jg-home-page.jg-nav-compact button.jg-masthead-burger:active, body.jg-home-page.jg-nav-compact .jg-masthead-burger.house_toggle:active { transform: scale(0.92) !important; } body.jg-home-page.jg-nav-compact .jg-burger-line { display: block !important; width: 20px !important; height: 2px !important; background: #0f172a !important; border-radius: 1px !important; transform-origin: center !important; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background-color 0.25s ease !important; } body.jg-home-page.jg-nav-compact .jg-masthead-burger.dropdown-is-active { background: rgba(242, 246, 250, 0.62) !important; border-color: rgba(220, 228, 239, 0.65) !important; box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important; } body.jg-home-page.jg-nav-compact .jg-masthead-burger.dropdown-is-active .jg-burger-line { background: #0f172a !important; } body.jg-home-page.jg-nav-compact .jg-masthead-burger.dropdown-is-active .jg-burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg) scaleX(0.95) !important; } body.jg-home-page.jg-nav-compact .jg-masthead-burger.dropdown-is-active .jg-burger-line:nth-child(2) { opacity: 0 !important; transform: scaleX(0.3) !important; } body.jg-home-page.jg-nav-compact .jg-masthead-burger.dropdown-is-active .jg-burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg) scaleX(0.95) !important; } /* Legacy anchor toggle (inner pages): visible icon */ body.jg-home-page.jg-nav-compact #jg-masthead a.house_toggle:not(.jg-masthead-burger) { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; visibility: visible !important; opacity: 1 !important; border-radius: 12px !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; background: #fff !important; } body.jg-home-page.jg-nav-compact #jg-masthead a.house_toggle:not(.jg-masthead-burger) svg { display: none !important; } body.jg-home-page.jg-nav-compact #jg-masthead a.house_toggle:not(.jg-masthead-burger)::before { content: "" !important; position: absolute !important; left: 11px !important; right: 11px !important; top: 15px !important; height: 2px !important; background: #0f172a !important; border-radius: 1px !important; box-shadow: 0 6px 0 #0f172a, 0 12px 0 #0f172a !important; } /* ---------- Drawer (light, editorial) ---------- */ body.jg-home-page.jg-nav-compact #jg-mobile-nav.cd-dropdown, body.jg-home-page.jg-nav-compact #jg-mobile-nav.jg-drawer { position: fixed !important; top: var(--jg-masthead-h) !important; bottom: auto !important; right: 0 !important; left: auto !important; /* positioning context for .cd-close */ isolation: isolate !important; width: 30vw !important; max-width: 30vw !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: rgba(243, 246, 249, 0.48) !important; -webkit-backdrop-filter: blur(14px) saturate(1.12) !important; backdrop-filter: blur(14px) saturate(1.12) !important; border: 1px solid rgba(223, 230, 239, 0.6) !important; border-right: none !important; border-top-left-radius: 18px !important; border-bottom-left-radius: 18px !important; color: #0f172a !important; z-index: 100050 !important; box-shadow: -16px 0 56px rgba(15, 23, 42, 0.08), inset 1px 0 0 rgba(255, 255, 255, 0.45) !important; transform: translateX(105%) !important; opacity: 1 !important; visibility: hidden !important; transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.4s !important; overflow: hidden !important; } /* Closed drawer must not capture taps/clicks over the page */ body.jg-home-page.jg-nav-compact #jg-mobile-nav.cd-dropdown:not(.dropdown-is-active), body.jg-home-page.jg-nav-compact #jg-mobile-nav.jg-drawer:not(.dropdown-is-active) { pointer-events: none !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav.cd-dropdown.dropdown-is-active, body.jg-home-page.jg-nav-compact #jg-mobile-nav.jg-drawer.dropdown-is-active { visibility: visible !important; transform: translateX(0) !important; transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s !important; pointer-events: auto !important; /* Above masthead (100095) so Close and links receive taps */ z-index: 100200 !important; top: var(--jg-masthead-h) !important; left: auto !important; right: 0 !important; bottom: auto !important; width: 30vw !important; max-width: 30vw !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - var(--jg-masthead-h) - 16px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; background: rgba(243, 246, 249, 0.52) !important; -webkit-backdrop-filter: blur(14px) saturate(1.12) !important; backdrop-filter: blur(14px) saturate(1.12) !important; border: 1px solid rgba(223, 230, 239, 0.65) !important; border-right: none !important; border-top-left-radius: 18px !important; border-bottom-left-radius: 18px !important; box-shadow: -16px 0 56px rgba(15, 23, 42, 0.08), inset 1px 0 0 rgba(255, 255, 255, 0.45) !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav h2 { display: none !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav h2 a { color: #0f172a !important; text-decoration: none !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-transform: none !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav h2::after { display: none !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-close { display: none !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 10px !important; right: 16px !important; width: 44px !important; height: 44px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important; z-index: 20 !important; cursor: pointer !important; text-indent: 0 !important; overflow: visible !important; color: transparent !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-close::before, body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-close::after { background: #0f172a !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-dropdown-content { position: relative !important; padding: 6px 10px 12px !important; height: auto !important; min-height: 0 !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important; background: transparent !important; display: block !important; visibility: visible !important; opacity: 1 !important; transform: none !important; max-height: none !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-dropdown-content::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* Force top-level mobile menu to render in place (legacy cd-dropdown CSS can hide/translate it) */ body.jg-home-page.jg-nav-compact #jg-mobile-nav > ul.cd-dropdown-content { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; transform: none !important; -webkit-transform: none !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; max-height: none !important; } /* Top-level list only — nested .cd-secondary-dropdown is styled below */ body.jg-home-page.jg-nav-compact #jg-mobile-nav ul.cd-dropdown-content ul:not(.cd-secondary-dropdown) { position: static !important; transform: none !important; -webkit-transform: none !important; visibility: visible !important; opacity: 1 !important; } /* Astrology (and future) accordion submenus inside the drawer */ body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-secondary-dropdown { list-style: none !important; box-sizing: border-box !important; margin: 0.2rem 0 0.4rem 14px !important; padding: 0.35rem 0 0.4rem 12px !important; width: calc(100% - 14px) !important; max-width: calc(100% - 14px) !important; height: auto !important; overflow: visible !important; position: static !important; transform: none !important; -webkit-transform: none !important; border-top: 1px solid rgba(15, 23, 42, 0.08) !important; border-left: 2px solid rgba(106, 178, 239, 0.38) !important; background: rgba(248, 250, 252, 0.42) !important; -webkit-backdrop-filter: blur(10px) saturate(1.08) !important; backdrop-filter: blur(10px) saturate(1.08) !important; border-radius: 10px !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-secondary-dropdown.is-hidden { display: none !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-secondary-dropdown:not(.is-hidden) { display: block !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-secondary-dropdown > li { list-style: none !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav li.jg-mobile-nav__subhead { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.35rem !important; padding: 0.35rem 0 0.65rem !important; margin: 0 0 0.15rem !important; border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav li.jg-mobile-nav__subhead > a { font-size: 0.8125rem !important; font-weight: 600 !important; color: #1a5f8a !important; padding: 8px 14px !important; border-radius: 8px !important; width: auto !important; max-width: max-content !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .jg-mobile-nav__breadcrumb { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #64748b !important; padding: 0 14px 2px !important; margin: 0 !important; line-height: 1.35 !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .jg-mobile-nav__breadcrumb span[aria-hidden="true"] { margin: 0 0.35em !important; opacity: 0.65 !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .jg-nav-astrology > a { position: relative !important; padding-right: 14px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 600 !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-dropdown-content > li { display: block !important; visibility: visible !important; opacity: 1 !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-dropdown-content > li > a, body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-dropdown-content a { color: #0f172a !important; border: none !important; border-radius: 10px !important; padding: 12px 14px !important; margin: 0 !important; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-size: 0.92rem !important; font-weight: 500 !important; letter-spacing: 0.01em !important; white-space: normal !important; line-height: 1.35 !important; background: transparent !important; display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; text-align: left !important; transition: background 0.2s ease, color 0.2s ease, font-weight 0.15s ease !important; } /* Ensure CONTACT link has no extra top gap in mobile drawer */ body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-dropdown-content > li:last-child > a { margin-top: 0 !important; padding-top: 12px !important; } body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-dropdown-content > li > a:hover, body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-dropdown-content > li > a:focus-visible, body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-dropdown-content a:hover, body.jg-home-page.jg-nav-compact #jg-mobile-nav .cd-dropdown-content a:focus-visible { background: #e8f2fa !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #1a5f8a !important; font-weight: 700 !important; } /* Stronger glass once sticky class is applied */ .main_header_wrapper .hs_header_Wrapper.menu_fixed { background: rgba(242, 246, 250, 0.62) !important; border-bottom-color: rgba(220, 228, 239, 0.6) !important; border-radius: 0 !important; box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important; transform: translateZ(0) scale(1); } } /* Gem detail pages: responsive.css adds padding-top to .hs_shop_single_border_Wrapper — keep title flush */ @media (max-width: 991px) { body:has(.side-links) .hs_shop_single_border_Wrapper { padding-top: 0; } }