/* Homepage featured-property hero ----------------------------------------- */ .pm-property-hero { --pm-gold: #fca311; height: 80vh; min-height: 80vh; overflow: hidden; background: #09182c; } .pm-property-hero, .pm-property-hero .pm-property-hero__slides, .pm-property-hero .slick-list, .pm-property-hero .slick-track, .pm-property-hero .pm-property-hero__slide { height: 80vh; } .pm-property-hero .pm-property-hero__slides { position: absolute; inset: 0; margin: 0; } .pm-property-hero .pm-property-hero__slide { position: relative; z-index: 0; isolation: isolate; background-position: center; background-repeat: no-repeat; background-size: cover; } .pm-property-hero .pm-property-hero__slide::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(90deg, rgba(3, 12, 25, .72) 0%, rgba(3, 12, 25, .16) 55%, rgba(3, 12, 25, .34) 100%), linear-gradient(0deg, rgba(3, 12, 25, .8) 0%, rgba(3, 12, 25, .08) 52%, rgba(3, 12, 25, .26) 100%); } .pm-property-hero .pm-property-hero__search { position: absolute; top: 46%; left: 50%; z-index: 4; width: min(760px, calc(100% - 150px)); transform: translate(-50%, -50%); text-align: center; pointer-events: none; } .pm-property-hero .banner-caption { position: static; width: 100%; max-width: none; transform: none; } .pm-property-hero .banner-title { margin: 0 0 6px; color: #fff; font-size: clamp(38px, 4vw, 58px); font-weight: 700; line-height: 1.08; letter-spacing: -2px; text-shadow: 0 2px 16px rgba(0, 0, 0, .32); } .pm-property-hero .banner-title > span { color: var(--pm-gold); } .pm-property-hero .banner-subtitle { max-width: 680px; margin: 0 auto 22px; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.5; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); } .pm-property-hero .houzez-search-form-js, .pm-property-hero .search-banner-wrap, .pm-property-hero .search-banner-wrap * { pointer-events: auto; } .pm-property-hero .search-banner-wrap { max-width: 700px; margin: 0 auto; padding: 8px; border-radius: 999px; background: #fff; box-shadow: 0 16px 44px rgba(0, 0, 0, .24); } .pm-property-hero .search-banner-wrap .form-group { margin-bottom: 0; } .pm-property-hero .search-banner-wrap .form-control, .pm-property-hero .search-banner-wrap .btn, .pm-property-hero .search-banner-wrap .bootstrap-select > .dropdown-toggle, .pm-property-hero .search-banner-wrap .houzez-keyword-autocomplete { height: 48px; border-radius: 999px !important; } .pm-property-hero .search-banner-wrap .btn-search { min-width: 124px; border-color: var(--pm-gold); background: var(--pm-gold); font-weight: 600; } .pm-property-hero .search-banner-wrap .bootstrap-select > .dropdown-toggle:hover, .pm-property-hero .search-banner-wrap .bootstrap-select > .dropdown-toggle:focus { border-color: var(--pm-gold); background: #fff8e8; color: #101c33; } /* The city picker menu is portalled to by Bootstrap Select. */ .pm-property-hero .bootstrap-select .dropdown-menu, body.home .bs-container.bootstrap-select .dropdown-menu { padding: 10px; border: 1px solid var(--pm-border, #e5e8ee); border-radius: 28px; background: #fff; box-shadow: 0 18px 42px rgba(16, 28, 51, .16); overflow: hidden; } .pm-property-hero .bootstrap-select .bs-searchbox, body.home .bs-container.bootstrap-select .bs-searchbox { padding: 0 0 8px; } .pm-property-hero .bootstrap-select .bs-searchbox .form-control, body.home .bs-container.bootstrap-select .bs-searchbox .form-control { height: 42px; border-color: var(--pm-border, #e5e8ee); border-radius: 999px !important; } .pm-property-hero .bootstrap-select .dropdown-menu.inner, body.home .bs-container.bootstrap-select .dropdown-menu.inner { padding: 3px 3px 14px; border: 0; border-radius: 22px; box-shadow: none; overflow-y: auto; scroll-padding-bottom: 14px; } .pm-property-hero .bootstrap-select .dropdown-item, body.home .bs-container.bootstrap-select .dropdown-item { margin: 2px 0; border: 1px solid transparent; border-radius: 999px; background: #fff; color: #101c33; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .pm-property-hero .bootstrap-select li:last-child > .dropdown-item, body.home .bs-container.bootstrap-select li:last-child > .dropdown-item { margin-top: 14px; margin-bottom: 0; } .pm-property-hero .bootstrap-select .dropdown-item:hover, .pm-property-hero .bootstrap-select .dropdown-item:focus, .pm-property-hero .bootstrap-select .dropdown-item.active, .pm-property-hero .bootstrap-select li.selected > .dropdown-item, body.home .bs-container.bootstrap-select .dropdown-item:hover, body.home .bs-container.bootstrap-select .dropdown-item:focus, body.home .bs-container.bootstrap-select .dropdown-item.active, body.home .bs-container.bootstrap-select li.selected > .dropdown-item { border-color: var(--pm-gold); background: #fff8e8; color: #101c33; outline: 0; } .pm-property-hero .pm-property-hero__property { position: absolute; bottom: 28px; left: max(4vw, 32px); z-index: 3; max-width: min(520px, calc(100% - 340px)); color: #fff; } .pm-property-hero .pm-property-hero__status { display: inline-block; margin-bottom: 8px; padding: 5px 11px; border-radius: 999px; background: var(--pm-gold); color: #111827; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .08em; text-transform: uppercase; } .pm-property-hero .pm-property-hero__property-title { margin: 0 0 5px; font-size: clamp(25px, 2.3vw, 34px); font-weight: 700; line-height: 1.15; } .pm-property-hero .pm-property-hero__property-title a, .pm-property-hero .pm-property-hero__property-title a:hover { color: #fff; } .pm-property-hero .pm-property-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: rgba(255, 255, 255, .84); font-size: 13px; } .pm-property-hero .pm-property-hero__location { display: inline-flex; align-items: center; gap: 5px; } .pm-property-hero .pm-property-hero__location svg { width: 14px; height: 14px; fill: var(--pm-gold); } .pm-property-hero .pm-property-hero__price { color: var(--pm-gold); font-weight: 700; } .pm-property-hero .pm-property-hero__details { position: absolute; right: max(4vw, 32px); bottom: 30px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--pm-gold); color: #111827; font-size: 13px; font-weight: 700; } .pm-property-hero .pm-property-hero__details:hover { background: #fff; color: #111827; } .pm-property-hero .pm-property-hero__details svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .pm-property-hero .slick-arrow { z-index: 6; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(10, 16, 25, .68); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); } .pm-property-hero .slick-prev { left: 24px; } .pm-property-hero .slick-next { right: 24px; } .pm-property-hero .slick-arrow:hover, .pm-property-hero .slick-arrow:focus { border-color: var(--pm-gold); background: var(--pm-gold); color: #111827; } @media (max-width: 767.98px) { .pm-property-hero, .pm-property-hero .pm-property-hero__slides, .pm-property-hero .slick-list, .pm-property-hero .slick-track, .pm-property-hero .pm-property-hero__slide { height: 80vh; min-height: 80vh; } .pm-property-hero .pm-property-hero__search { top: 88px; width: calc(100% - 38px); transform: translateX(-50%); } .pm-property-hero .banner-title { font-size: 36px; letter-spacing: -1px; } .pm-property-hero .banner-subtitle { display: none; } .pm-property-hero .search-banner-wrap { margin-top: 16px; padding: 7px; border-radius: 24px; } .pm-property-hero .search-banner-wrap .d-flex { gap: 7px; } .pm-property-hero .search-banner-wrap .d-flex.flex-sm-max-column { display: flex !important; flex-direction: column !important; } .pm-property-hero .search-banner-wrap .flex-search, .pm-property-hero .search-banner-wrap .flex-grow-1 { display: block; flex: 0 0 auto; width: 100%; padding: 0; } .pm-property-hero .search-banner-wrap .houzez-keyword-autocomplete { display: block !important; width: 100% !important; border: 1px solid var(--pm-gold); background: #fff; } .pm-property-hero .search-banner-wrap .form-group, .pm-property-hero .search-banner-wrap .search-icon { display: block !important; width: 100%; height: 48px; margin: 0 !important; visibility: visible !important; opacity: 1 !important; } .pm-property-hero .pm-property-hero__property { right: 24px; bottom: 74px; left: 24px; max-width: none; } .pm-property-hero .pm-property-hero__details { right: auto; bottom: 22px; left: 24px; padding: 9px 15px; } .pm-property-hero .slick-arrow { top: auto; bottom: 20px; width: 38px; height: 38px; transform: none; } .pm-property-hero .slick-prev { right: 72px; left: auto; } .pm-property-hero .slick-next { right: 24px; } } @media (max-width: 575.98px) { .pm-property-hero, .pm-property-hero .pm-property-hero__slides, .pm-property-hero .slick-list, .pm-property-hero .slick-track, .pm-property-hero .pm-property-hero__slide { height: 80vh; min-height: 80vh; } .pm-property-hero .search-banner-wrap .form-control, .pm-property-hero .search-banner-wrap .btn, .pm-property-hero .search-banner-wrap .btn-search { width: 100%; min-width: 0; } } @media (prefers-reduced-motion: reduce) { .pm-property-hero .slick-track { transition-duration: 0ms !important; } }