/* ======================================================================== BPP_GLOBAL_MOBILE_NAV_PROPERTY_DETAIL_PARITY_V1_2 Single global mobile sticky navigation. ======================================================================== */ /* Desktop authority */ @media (min-width: 1101px) { #bpp-global-mobile-bottom-nav { display: none !important; } } /* ================================================================ MOBILE + TABLET ================================================================ */ @media (max-width: 1100px) { :root { --bpp-gmbn-height: 78px; --bpp-gmbn-clearance: 110px; } body.bpp-gmbn-active { padding-bottom: calc( var(--bpp-gmbn-clearance) + env(safe-area-inset-bottom) ) !important; } /* ============================================================ ONE GLOBAL CONTAINER ============================================================ */ #bpp-global-mobile-bottom-nav { position: fixed !important; left: 8px !important; right: 8px !important; bottom: max( 8px, env(safe-area-inset-bottom) ) !important; z-index: 2147482000 !important; display: grid !important; grid-template-columns: repeat( 5, minmax(0, 1fr) ) !important; align-items: end !important; gap: 1px !important; box-sizing: border-box !important; width: auto !important; height: var(--bpp-gmbn-height) !important; min-height: var(--bpp-gmbn-height) !important; margin: 0 !important; padding: 8px 5px 7px !important; overflow: visible !important; border: 1px solid rgba( 18, 58, 40, .10 ) !important; border-radius: 24px !important; background: rgba( 255, 255, 255, .985 ) !important; box-shadow: 0 16px 42px rgba( 16, 45, 32, .17 ) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } /* ============================================================ ALL FIVE ITEMS ============================================================ */ #bpp-global-mobile-bottom-nav .bpp-gmbn-item { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; gap: 4px !important; min-width: 0 !important; width: auto !important; min-height: 60px !important; margin: 0 !important; padding: 4px 1px !important; border: 0 !important; border-radius: 13px !important; background: transparent !important; color: #667386 !important; text-decoration: none !important; text-align: center !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1 !important; box-shadow: none !important; transform: none !important; -webkit-tap-highlight-color: transparent !important; } /* ============================================================ STANDARD ICONS ============================================================ */ #bpp-global-mobile-bottom-nav .bpp-gmbn-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 31px !important; height: 31px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #69778a !important; box-shadow: none !important; } #bpp-global-mobile-bottom-nav .bpp-gmbn-icon svg { display: block !important; width: 25px !important; height: 25px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* ============================================================ LABELS ============================================================ */ #bpp-global-mobile-bottom-nav .bpp-gmbn-label { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: 1 !important; } /* ============================================================ ACTIVE ITEM Property Details treatment: restrained icon emphasis, NOT a large green tile. ============================================================ */ #bpp-global-mobile-bottom-nav .bpp-gmbn-item.is-active:not(.bpp-gmbn-item--list) { background: transparent !important; color: #078f54 !important; box-shadow: none !important; transform: none !important; } #bpp-global-mobile-bottom-nav .bpp-gmbn-item.is-active:not(.bpp-gmbn-item--list) .bpp-gmbn-icon { background: #e9f6ef !important; color: #078f54 !important; } /* ============================================================ RAISED CENTER LIST PROPERTY ACTION ============================================================ */ #bpp-global-mobile-bottom-nav .bpp-gmbn-item--list { position: relative !important; overflow: visible !important; justify-content: flex-end !important; padding-top: 29px !important; background: transparent !important; color: #078f54 !important; box-shadow: none !important; transform: none !important; } #bpp-global-mobile-bottom-nav .bpp-gmbn-item--list .bpp-gmbn-icon { position: absolute !important; left: 50% !important; top: -39px !important; display: flex !important; width: 70px !important; height: 70px !important; margin: 0 !important; padding: 0 !important; border: 6px solid #f7faf8 !important; border-radius: 999px !important; background: linear-gradient( 145deg, #12ae69 0%, #08a05d 50%, #05894f 100% ) !important; color: #ffffff !important; box-shadow: 0 12px 29px rgba( 6, 145, 82, .29 ) !important; transform: translateX(-50%) !important; } #bpp-global-mobile-bottom-nav .bpp-gmbn-item--list .bpp-gmbn-icon svg { width: 32px !important; height: 32px !important; stroke-width: 2 !important; } #bpp-global-mobile-bottom-nav .bpp-gmbn-item--list .bpp-gmbn-label { display: block !important; visibility: visible !important; opacity: 1 !important; max-width: 84px !important; overflow: visible !important; text-overflow: clip !important; color: #078f54 !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; } /* ============================================================ RETIRE ALL PAGE-LOCAL DUPLICATES ============================================================ */ body.bpp-gmbn-active [data-bpp-global-nav-retired="1"] { display: none !important; } body.bpp-gmbn-active nav.rpgx-mobile-bottom:not(#bpp-global-mobile-bottom-nav), body.bpp-gmbn-active nav.rpgp-mobile-bottom:not(#bpp-global-mobile-bottom-nav), body.bpp-gmbn-active nav.bpp-mobile-nav-v19:not(#bpp-global-mobile-bottom-nav), body.bpp-gmbn-active .bpp-dashboard-mobile-bottom:not(#bpp-global-mobile-bottom-nav) { display: none !important; } /* ============================================================ PROPERTY DETAILS Existing sticky contact/action CTA sits ABOVE global nav. ============================================================ */ body.rpg-property-detail-exact-v2 .rpgpd35-sticky, body.rpg-property-detail-exact-v2 .rpg-mobile-contact-bar { bottom: calc( 96px + env(safe-area-inset-bottom) ) !important; z-index: 2147481900 !important; } /* Project detail CTA also stays above global navigation. */ body.bpp-v33-project-detail .bpp-v33-sticky-cta { bottom: calc( 96px + env(safe-area-inset-bottom) ) !important; z-index: 2147481900 !important; } /* ============================================================ SMALL PHONES ============================================================ */ @media (max-width: 375px) { #bpp-global-mobile-bottom-nav { left: 5px !important; right: 5px !important; border-radius: 21px !important; } #bpp-global-mobile-bottom-nav .bpp-gmbn-item { font-size: 10px !important; } #bpp-global-mobile-bottom-nav .bpp-gmbn-item--list .bpp-gmbn-icon { width: 64px !important; height: 64px !important; top: -35px !important; } } } /* /BPP_GLOBAL_MOBILE_NAV_PROPERTY_DETAIL_PARITY_V1_2 */ /* ================================================================ BPP GLOBAL MOBILE NAV DISTRIBUTION V1.2.1 Property Detail compatibility authority ================================================================ */ @media (max-width:1100px) { /* * Older property-detail styles hide generic * nav[class*="mobile-bottom"] elements. * * Our canonical global nav must remain visible. */ body.rpg-property-detail-exact-v2 #bpp-global-mobile-bottom-nav, body.rpg-property-detail-page #bpp-global-mobile-bottom-nav { display: grid !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* * Property-detail contact CTA stays above the global * navigation instead of competing with it. */ body.rpg-property-detail-exact-v2 .rpgpd35-sticky, body.rpg-property-detail-exact-v2 .rpg-mobile-contact-bar, body.rpg-property-detail-page .rpgpd35-sticky, body.rpg-property-detail-page .rpg-mobile-contact-bar { bottom: calc( 96px + env(safe-area-inset-bottom) ) !important; z-index: 2147481900 !important; } } /* /BPP GLOBAL MOBILE NAV DISTRIBUTION V1.2.1 */