.hp-preview, .hp-preview *, .hp-preview *::before, .hp-preview *::after { box-sizing: border-box; } .hp-preview { margin: 0; font-family: var(--lr-font); color: #23262B; background: #fff; -webkit-font-smoothing: antialiased; } .hp-preview a { color: #FC4A0A; text-decoration: none; } .hp-preview a:hover { color: #d63e08; } .hp-preview button { font-family: inherit; } .hp-preview img { max-width: 100%; } .hp-preview ::selection { background: #FFD9C7; } /* Design shows a thin visible scrollbar on desktop horizontal-scroll rows (not hidden) and only hides it on mobile, where swipe is used instead - see the mobile-only override further down. */ .hp-preview .hp-scroll { scrollbar-width: thin; scrollbar-color: #e6ddd4 transparent; } .hp-preview .hp-scroll::-webkit-scrollbar { height: 6px; } .hp-preview .hp-scroll::-webkit-scrollbar-track { background: transparent; } .hp-preview .hp-scroll::-webkit-scrollbar-thumb { background: #e6ddd4; border-radius: 6px; } /* ---------- Layout shell ---------- */ .hp-preview .hp-shell { max-width: 1280px; margin: 0 auto; overflow: hidden; } /* ---------- Header ---------- */ .hp-preview .hp-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid #f0eae3; } .hp-preview .hp-header-inner { display: flex; align-items: center; gap: 36px; padding: 14px 40px; } .hp-preview .hp-logo-link { display: flex; align-items: center; text-decoration: none; } .hp-preview .hp-logo-img { height: 38px; width: auto; display: block; } .hp-preview .hp-nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; font-weight: 600; color: #3a3f47; } .hp-preview .hp-nav a.active { color: #FC4A0A; } .hp-preview .hp-header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; } .hp-preview .hp-post-btn { position: relative; overflow: hidden; border: 1.5px solid #D9420A; color: #D9420A; background: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; animation: hpBtnPulseOutline 2.4s ease-in-out infinite; } .hp-preview .hp-post-btn:hover { color: #D9420A; background: #FFF2EC; } .hp-preview .hp-post-btn .hp-free-badge { background: #FC4A0A; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 5px; margin-left: 4px; } .hp-preview .hp-post-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(252,74,10,.2), transparent); transform: skewX(-20deg); animation: hpBtnShimmer 3.4s ease-in-out infinite; } @keyframes hpBtnPulseOutline { 0%, 100% { box-shadow: 0 0 0 0 rgba(252,74,10,.35); } 50% { box-shadow: 0 0 0 7px rgba(252,74,10,0); } } .hp-preview .hp-avatar { width: 38px; height: 38px; border-radius: 50%; background: #FFF2EC; color: #FC4A0A; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; overflow: hidden; border: 1px solid #f6dccb; cursor: pointer; padding: 0; transition: .2s ease; } .hp-preview .hp-avatar:hover { background: #FC4A0A; color: #fff; border-color: #FC4A0A; } .hp-preview .hp-avatar img { width: 100%; height: 100%; object-fit: cover; } .hp-preview .hp-profile-trigger { position: relative; display: flex; align-items: center; } /* Header notification bell - persistent way to (re-)enable web push once the soft-ask banner has been snoozed/dismissed. States driven by JS from Notification.permission. */ .hp-preview .hp-notif-bell { width: 38px; height: 38px; border-radius: 50%; background: #FFF2EC; color: #FC4A0A; display: flex; align-items: center; justify-content: center; font-size: 17px; border: 1px solid #f6dccb; cursor: pointer; padding: 0; transition: .2s ease; flex-shrink: 0; } .hp-preview .hp-notif-bell:hover { background: #FC4A0A; color: #fff; border-color: #FC4A0A; } .hp-preview .hp-notif-bell.is-on { background: #FC4A0A; color: #fff; border-color: #FC4A0A; cursor: default; } .hp-preview .hp-notif-bell.is-denied { background: #F2F2F5; color: #9a9089; border-color: #ece3d9; } .hp-preview .hp-notif-bell-mobile { width: 34px; height: 34px; font-size: 15px; } /* Logged-in header trigger as a bordered chip/card (avatar + name + account-type label) instead of a bare button, matching the real site's .user-account-chip in header.blade.php. */ .hp-preview .hp-profile-chip { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #ece3d9; border-radius: 999px; padding: 6px 16px 6px 6px; cursor: pointer; font-family: inherit; box-shadow: 0 6px 16px -10px rgba(58,40,20,.35); transition: .2s ease; } .hp-preview .hp-profile-chip:hover { border-color: #f6dccb; box-shadow: 0 8px 20px -10px rgba(58,40,20,.45); } .hp-preview .hp-profile-chip-avatar { width: 40px; height: 40px; border-radius: 50%; background: #FFF2EC; color: #FC4A0A; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; overflow: hidden; flex-shrink: 0; } .hp-preview .hp-profile-chip-avatar img { width: 100%; height: 100%; object-fit: cover; } .hp-preview .hp-profile-chip-copy { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; text-align: left; } .hp-preview .hp-profile-chip-name { font-size: 14px; font-weight: 700; color: #23262B; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hp-preview .hp-profile-chip-type { font-size: 11.5px; font-weight: 600; color: #9a9089; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Profile dropdown (shown when logged in) */ .hp-preview .hp-profile-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border: 1px solid #eee3d9; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.3); min-width: 200px; padding: 8px; z-index: 60; } .hp-preview .hp-profile-menu.open { display: block; } .hp-preview .hp-profile-menu a, .hp-preview .hp-profile-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; font-size: 14px; font-weight: 600; color: #3a3f47; border-radius: 8px; background: none; border: none; cursor: pointer; font-family: inherit; } .hp-preview .hp-profile-menu a:hover, .hp-preview .hp-profile-menu button:hover { background: #FFF2EC; color: #c0410a; } .hp-preview .hp-profile-menu .hp-profile-logout { color: #c0410a; border-top: 1px solid #f5efe8; margin-top: 4px; padding-top: 12px; display: flex; align-items: center; gap: 8px; } .hp-preview .hp-profile-logout:disabled { color: #b3a99f; cursor: default; } .hp-preview .hp-btn-spinner { width: 13px; height: 13px; border: 2px solid #f0dfd3; border-top-color: #c0410a; border-radius: 50%; animation: hpSpin .7s linear infinite; flex-shrink: 0; } .hp-preview .hp-profile-logout:disabled .hp-btn-spinner { border-top-color: #b3a99f; } @keyframes hpSpin { to { transform: rotate(360deg); } } /* Bottom-nav account sheet - same link list/styling language as .hp-profile-menu above, laid out for a full-width bottom sheet instead of a small anchored dropdown. */ .hp-preview .hp-account-sheet-links { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .hp-preview .hp-account-sheet-links a, .hp-preview .hp-account-sheet-links button { display: block; width: 100%; text-align: left; padding: 13px 14px; font-size: 15px; font-weight: 600; color: #3a3f47; border-radius: 10px; background: none; border: none; cursor: pointer; font-family: inherit; } .hp-preview .hp-account-sheet-links a:hover, .hp-preview .hp-account-sheet-links button:hover { background: #FFF2EC; color: #c0410a; } .hp-preview .hp-account-sheet-links .hp-profile-logout { color: #c0410a; border-top: 1px solid #f5efe8; margin-top: 6px; padding-top: 16px; display: flex; align-items: center; gap: 8px; } /* ========================================================== REAL AUTH MODAL SYSTEM - the markup/classes/ids and the JS behavior ported from the live site's template.blade.php + custom.css stay exactly as-is (that's the proven, business-critical registration flow), but the visual styling below is this page's own design language - Plus Jakarta Sans (inherited from .hp-preview, no font-family override needed here) and the same warm cream/orange palette used everywhere else on this page, instead of the old site's Konnect font and #ff5a00 styling. ========================== */ .property-selector-overlay { position: fixed; inset: 0; background: rgba(35,38,43,.6); display: flex; justify-content: center; align-items: center; z-index: 99999; opacity: 0; visibility: hidden; transition: .3s ease; } /* Google's .pac-container defaults to z-index:1000, which renders behind the modal overlay (z-index:99999) above - the suggestions still work, they're just invisible without this. */ .pac-container { z-index: 999999 !important; } .property-selector-overlay.show { opacity: 1; visibility: visible; } .property-selector { width: 460px; max-width: 92vw; background: #fff; border-radius: 22px; padding: 36px 32px; position: relative; border: 1px solid #f2ebe3; box-shadow: 0 24px 60px -28px rgba(58,40,20,.35); } .property-close-btn { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: none; background: none; cursor: pointer; font-size: 28px; color: #9a9089; z-index: 5; } .property-selector-overlay .mobile-header { display: none; } .mobile-card { background: transparent; padding: 0; } .mobile-card h5.mobile-card-title { font-family: var(--lr-font); font-size: 24px; line-height: 1.3; font-weight: 600; color: #23262B; margin-bottom: 22px;letter-spacing:-.02em;} .property-options { display: flex; flex-direction: column; gap: 12px; } .property-item input { display: none; } .property-item label { height: 56px; border: 1px solid #ece3d9; border-radius: 11px; display: flex; align-items: center; padding: 0 16px; cursor: pointer; font-size: 15.5px; font-weight: 600; color: #23262B; background: #faf7f3; transition: .25s; } .property-item label:before { content: ""; width: 18px; height: 18px; border: 1px solid #cfc3b6; border-radius: 50%; margin-right: 12px; flex-shrink: 0; } .property-item input:checked + label { background: #FC4A0A; border-color: #FC4A0A; color: #fff; box-shadow: 0 10px 22px -10px rgba(252,74,10,.6); } .property-item input:checked + label:before { background: #fff; border-color: #fff; } .continue-btn { width: 100%; height: 52px; margin-top: 18px; border: none; border-radius: 11px; background: #FC4A0A; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(252,74,10,.7); } .onboarding-terms { margin-top: 12px; margin-bottom: 0; text-align: center; font-size: 12px; line-height: 18px; color: #7b8089; } .onboarding-link { color: #FC4A0A; text-decoration: none; font-weight: 600; } .onboarding-link:hover { text-decoration: underline; } .name-input-wrapper { margin-top: 10px; } /* font-size held at 16px (not the design's 15px) - anything smaller makes iOS Safari auto-zoom the whole page on focus, which is what throws this bottom-sheet modal wildly out of position against the keyboard. Same fix on .login-phone-input/.location-search-input below. */ .name-input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid #ece3d9; border-radius: 11px; background: #faf7f3; font-size: 16px; font-weight: 600; color: #23262B; outline: none; } .name-input:focus { border-color: #FC4A0A; } .login-error-name-message { margin-top: 8px; font-size: 12px; color: #e53935; } .otp-subtitle { font-size: 14px; color: #7b8089; margin-bottom: 24px; line-height: 1.5; } .otp-edit-number-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 2px; border: none; background: #FFF1E9; color: #FC4A0A; border-radius: 50%; font-size: 11px; cursor: pointer; vertical-align: middle; padding: 0; } .otp-edit-number-btn:hover { background: #FC4A0A; color: #fff; } .otp-input-wrapper { display: flex; gap: 12px; margin-bottom: 24px; } .otp-input { width: 56px; height: 56px; border: 1px solid #ece3d9; border-radius: 11px; text-align: center; font-size: 22px; font-weight: 700; background: #faf7f3; color: #23262B; } .otp-input:focus { border-color: #FC4A0A; outline: none; } .otp-resend-section { margin-bottom: 20px; font-size: 14px; color: #5f6570; } .otp-resend-btn { color: #FC4A0A; font-weight: 700; text-decoration: none; cursor: pointer; } .popup-terms-text { margin-top: 12px; text-align: center; font-size: 12px; line-height: 1.5; color: #7b8089; } .popup-terms-text a { color: #FC4A0A; text-decoration: none; } .login-phone-wrapper { display: flex; align-items: center; width: 100%; border: 1px solid #ece3d9; border-radius: 11px; overflow: hidden; background: #faf7f3; margin-top: 10px; } .country-code { min-width: 70px; height: 52px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #ece3d9; font-weight: 700; color: #23262B; } .login-phone-input { flex: 1; border: none; outline: none; height: 52px; padding: 0 15px; font-size: 16px; font-weight: 600; background: transparent; color: #23262B; } .mobile-terms-text { margin-top: 16px; text-align: center; font-size: 12px; line-height: 18px; color: #7b8089; } .mobile-terms-text a { color: #FC4A0A; text-decoration: none; font-weight: 700; } .login-phone-error { display: none; margin-top: 8px; padding: 10px 14px; border-radius: 10px; background: #FDEBEC; color: #FF2D55; font-size: 13px; font-weight: 500; } .login-phone-wrapper.error { border: 1px solid #FF2D55; box-shadow: 0 0 0 1px rgba(255,45,85,.15); } #otpModalOverlay .otp-success-message { width: 280px; display: flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 5px; background: linear-gradient(to right, rgba(212,247,234,1), rgba(255,255,255,0)); border-radius: 30px; } .otp-success-icon { flex: 0 0 auto; } .location-search-wrapper { display: flex; align-items: center; gap: 10px; border: 1px solid #ece3d9; border-radius: 11px; padding: 0 14px; margin-top: 10px; background: #faf7f3; } .location-search-icon { position: static; flex: 0 0 auto; transform: none; color: #666; } .location-search-input { flex: 1; min-width: 0; border: none; outline: none; height: 52px; padding: 0; font-size: 16px; font-weight: 600; color: #23262B; background: transparent; box-shadow: none; } .location-search-input:focus { border: none; outline: none; box-shadow: none; } .login-modal-title { font-family: var(--lr-font); font-size: 24px; font-weight: 600; color: #23262B; margin: 0 0 12px;letter-spacing:-.02em;} .location-modal-description { font-size: 14px; color: #5f6570; line-height: 1.5; margin: 0 0 6px; } .login-continue-btn-a { width: 100%; height: 52px; margin-top: 18px; border: none; border-radius: 11px; background: #FC4A0A; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(252,74,10,.7); } .login-modal-form { margin: 0; } .toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px); background: #23262B; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; opacity: 0; transition: .3s ease; z-index: 999999; max-width: 90vw; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .hp-preview .hp-header-mobile { display: none; } .hp-preview .hp-header-mobile-inner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .hp-preview .hp-logo-img-mobile { height: 30px; width: auto; display: block; } .hp-preview .hp-header-actions-mobile { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Search by PID on the mobile header — icon-only, matched to the notification bell's 34px so the row stays even. Same destination as the desktop header's labelled pill. */ .hp-preview .hp-pid-btn-mobile { height: 34px; padding: 0 11px; gap: 6px; border-radius: 999px; background: #FFF2EC; color: #FC4A0A; border: 1px solid #f6dccb; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; flex-shrink: 0; transition: .2s ease; } .hp-preview .hp-pid-btn-mobile i { font-size: 14px; } /* The label is the first thing to go if the row runs out of room — a logged-in tenant also carries the notification bell, which is the tightest case on a 360px device. */ @media (max-width: 359px) { .hp-preview .hp-pid-btn-mobile span { display: none; } .hp-preview .hp-pid-btn-mobile { width: 34px; padding: 0; border-radius: 50%; } } .hp-preview .hp-pid-btn-mobile:hover { background: #FC4A0A; color: #fff; border-color: #FC4A0A; } .hp-preview .hp-avatar-mobile { width: 38px; height: 38px; border-radius: 50%; background: #FC4A0A; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; overflow: hidden; } .hp-preview .hp-avatar-mobile.hp-avatar-mobile-guest { background: #FFF2EC; color: #FC4A0A; border: 1px solid #f6dccb; } .hp-preview .hp-avatar-mobile .bi-person-fill { font-size: 19px; } /* ---------- App download banner (mobile only) ---------- */ .hp-preview .hp-app-banner { display: none; position: sticky; top: 0; z-index: 70; background: #fff; border-bottom: 1px solid #f0eae3; } .hp-preview .hp-app-banner.hp-app-banner-hide { display: none !important; } .hp-preview .hp-app-banner-inner { display: flex; align-items: center; gap: 10px; padding: 9px 12px; } .hp-preview .hp-app-banner-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #FC4A0A, #FF8A3D); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 10px -4px rgba(252,74,10,.55); } .hp-preview .hp-app-banner-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .hp-preview .hp-app-banner-title { font-size: 12.5px; font-weight: 700; color: #23262B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-preview .hp-app-banner-sub { font-size: 11px; color: #8a8f98; display: flex; align-items: center; gap: 4px; } .hp-preview .hp-app-banner-rating { color: #c0410a; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; } .hp-preview .hp-app-banner-rating .bi-star-fill { font-size: 9px; } .hp-preview .hp-app-banner-dot { color: #d8d5d0; } .hp-preview .hp-app-banner-cta { flex-shrink: 0; background: linear-gradient(135deg, #FC4A0A, #FF8A3D); color: #fff; font-size: 12.5px; font-weight: 700; padding: 7px 16px; border-radius: 100px; box-shadow: 0 6px 14px -6px rgba(252,74,10,.55); } .hp-preview .hp-app-banner-cta:hover { color: #fff; } .hp-preview .hp-app-banner-close { flex-shrink: 0; width: 22px; height: 22px; border: none; background: transparent; color: #b5b0a9; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .hp-preview .hp-app-banner-close:hover { color: #8a8f98; } /* ---------- Hero ---------- */ .hp-preview .hp-hero { position: relative; padding: 0; background: linear-gradient(120deg,#FFF4EE 0%,#FFEDE3 40%,#fff 100%); } .hp-preview .hp-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; } .hp-preview .hp-hero-copy { padding: 64px 48px 120px; } .hp-preview .hp-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #f2e4d8; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #c0410a; } .hp-preview .hp-hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ea44f; } .hp-preview .hp-hero-title { font-family: var(--lr-font); font-weight: 600; font-size: 58px; line-height: 1.04; letter-spacing: -0.5px; margin: 22px 0 0; color: #23262B; } .hp-preview .hp-hero-accent { color: #FC4A0A; font-style: italic; } .hp-preview .hp-hero-sub { font-size: 17px; line-height: 1.6; color: #5f6570; max-width: 460px; margin: 20px 0 0; } .hp-preview .hp-hero-stats { display: flex; gap: 30px; margin-top: 34px; } .hp-preview .hp-hero-stat-num { font-family: var(--lr-font); font-size: 30px; font-weight: 700; color: #23262B;letter-spacing:-.02em;} .hp-preview .hp-hero-stat-label { font-size: 13px; color: #7b8089; font-weight: 500; } .hp-preview .hp-hero-stat-divider { width: 1px; background: #ecdfd3; } .hp-preview .hp-hero-visual { position: relative; min-height: 440px; background: url('/front/assets/images/hp-preview/hero-image.webp') center / cover no-repeat; display: flex; align-items: center; justify-content: center; } /* Search card - the hero above bleeds full width, but the search card itself still lines up with the same 1280px container every section below it uses, so it doesn't stretch edge-to-edge on wide screens. */ .hp-preview .hp-hero-search-wrap { max-width: 1280px; margin: 0 auto; position: relative; } .hp-preview .hp-search-card { position: relative; margin: -72px 48px 0; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(58,40,20,.35); border: 1px solid #f2ebe3; padding: 8px 8px 22px; z-index: 5; } .hp-preview .hp-search-tabs-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 0; flex-wrap: wrap; gap: 10px; } .hp-preview .hp-search-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .hp-preview .hp-tab-btn { font-family: inherit; font-weight: 600; font-size: 14.5px; padding: 10px 18px; border: none; border-radius: 10px; background: transparent; color: #6f757e; cursor: pointer; } .hp-preview .hp-tab-btn.active { font-weight: 700; background: #FFF2EC; color: #c0410a; } .hp-preview .hp-search-right { display: flex; align-items: center; gap: 14px; } .hp-preview .hp-pid-btn { display: inline-flex; align-items: center; gap: 6px; background: #FFF2EC; color: #c0410a; border: 1px solid #f6dccb; font-weight: 700; font-size: 12.5px; padding: 7px 12px; border-radius: 999px; cursor: pointer; } .hp-preview .hp-verified-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #5f6570; cursor: pointer; } .hp-preview .hp-search-fields { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 14px; padding: 16px 18px 0; } .hp-preview .hp-field-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #9a9089; text-transform: uppercase; margin-bottom: 6px; } .hp-preview .hp-custom-select { position: relative; } .hp-preview .hp-field-select-btn { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; background: #faf7f3; border: 1px solid #ece3d9; border-radius: 11px; padding: 13px 15px; font-family: inherit; font-size: 15px; font-weight: 600; color: #23262B; cursor: pointer; gap: 8px; } .hp-preview .hp-select-arrow { color: #b3a99f; flex: 0 0 auto; } .hp-preview .hp-select-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin-top: 0; background: #fff; border: 1px solid #eee3d9; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.25); overflow: hidden; z-index: 20; max-height: 260px; overflow-y: auto; } .hp-preview .hp-select-dropdown.open { display: block; } .hp-preview .hp-select-option { padding: 12px 16px; font-size: 14px; font-weight: 600; color: #3a3f47; cursor: pointer; border-bottom: 1px solid #f5efe8; } .hp-preview .hp-select-option:last-child { border-bottom: none; } .hp-preview .hp-select-option:hover { background: #faf7f3; } .hp-preview .hp-field-location { display: flex; align-items: center; gap: 10px; background: #faf7f3; border: 1px solid #ece3d9; border-radius: 11px; padding: 13px 15px; } .hp-preview .hp-field-location input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 15px; font-weight: 600; color: #23262B; width: 100%; } /* Location pin with a radar-style pulse behind it, like a "your location" marker on a map, instead of a plain radio-button dot. */ .hp-preview .hp-location-pin { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .hp-preview .hp-location-pin i { position: relative; z-index: 2; color: #FC4A0A; font-size: 16px; line-height: 1; } .hp-preview .hp-location-pin::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: rgba(252,74,10,.4); animation: hpLocationPulse 1.8s ease-out infinite; } @keyframes hpLocationPulse { 0% { transform: scale(.6); opacity: .8; } 70%, 100% { transform: scale(2.4); opacity: 0; } } .hp-preview .hp-search-btn { height: 48px; width: 100%; background: #FC4A0A; color: #fff; border: none; font-family: inherit; font-weight: 700; font-size: 15px; padding: 0 30px; border-radius: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 22px -10px rgba(252,74,10,.7); } .hp-preview .hp-search-btn:hover { background: #e04409; } .hp-preview .hp-search-btn:disabled { opacity: .7; cursor: default; } .hp-preview .hp-recent-row { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; font-size: 13px; color: #8a8079; flex-wrap: wrap; } .hp-preview .hp-recent-row-label { font-weight: 600; } .hp-preview .hp-recent-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #eee3d9; border-radius: 999px; padding: 5px 12px; font-weight: 600; color: #5f6570; cursor: pointer; text-decoration: none; flex: 0 0 auto; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Where do you want to live? ---------- */ .hp-preview .hp-cities-section { padding: 40px 48px 0; } .hp-preview .hp-section-head-center { text-align: center; margin-bottom: 34px; } .hp-preview .hp-section-title { font-family: var(--lr-font); font-weight: 600; font-size: 32px; margin: 0; letter-spacing: 0px; } .hp-preview .hp-section-sub { color: #7b8089; font-size: 15.5px; margin: 10px 0 0; } .hp-preview .hp-cities-track { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 14px; } .hp-preview .hp-city-card { flex: 0 0 220px; border-radius: 16px; overflow: hidden; cursor: pointer; position: relative; box-shadow: 0 12px 30px -22px rgba(0,0,0,.4); display: block; } .hp-preview .hp-city-card-img { height: 150px; width: 100%; object-fit: cover; display: block; } .hp-preview .hp-city-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 16px 14px; background: linear-gradient(transparent, rgba(20,12,6,.82)); } .hp-preview .hp-city-card-name { color: #fff; font-weight: 700; font-size: 15px; } .hp-preview .hp-city-card-count { color: #f3d9c8; font-size: 12px; font-weight: 500; margin-top: 2px; min-height: 15px; } /* ---------- My current requirement ---------- */ .hp-preview .hp-requirement-section { padding: 30px 40px 0; } .hp-preview .hp-requirement-card { position: relative; border: 1.5px solid #FC4A0A; border-radius: 16px; background: linear-gradient(120deg,#fff 55%,#FFF4EE 100%); padding: 22px 26px; display: flex; align-items: center; gap: 20px; box-shadow: 0 14px 34px -26px rgba(252,74,10,.35); } .hp-preview .hp-requirement-icon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; background: #FFF1E9; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #FC4A0A; } .hp-preview .hp-requirement-body { flex: 1; min-width: 0; } .hp-preview .hp-requirement-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: #c0410a; text-transform: uppercase; } .hp-preview .hp-requirement-title { font-size: 19px; font-weight: 800; color: #23262B; margin-top: 4px; } .hp-preview .hp-requirement-meta { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; font-size: 13px; color: #6f757e; font-weight: 600; } .hp-preview .hp-requirement-edit-btn { flex: 0 0 auto; background: #fff; color: #FC4A0A; border: 1.5px solid #FC4A0A; font-weight: 700; font-size: 14px; padding: 11px 22px; border-radius: 11px; cursor: pointer; text-decoration: none; white-space: nowrap; } .hp-preview .hp-requirement-edit-btn:hover { background: #FFF4EE; color: #FC4A0A; } /* ---------- Exclusive rental properties ---------- */ .hp-preview .hp-listings-section { padding: 30px 48px 0; } .hp-preview .hp-section-head-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 12px; } .hp-preview .hp-see-all { font-weight: 700; font-size: 14px; } /* The head row has three children on a rows homepage - title block, "See all" and the scroll arrows - where it had two. Grouping the last two keeps space-between putting the title at one end and the controls at the other, instead of spreading three items evenly across the width. */ .hp-preview .hp-row-head-actions { display: flex; align-items: center; gap: 16px; flex: none; } .hp-preview .hp-see-all { color: #FF5403; text-decoration: none; white-space: nowrap; } .hp-preview .hp-see-all:hover { text-decoration: underline; } /* Consecutive rows would otherwise carry the section's full 56px top padding each, leaving a gap between rows far larger than the gap inside one. */ .hp-preview .hp-listings-row + .hp-listings-row { padding-top: 8px; } .hp-preview .hp-listings-track { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 16px; } .hp-preview .hp-prop-card { flex: 0 0 300px; border: 1px solid #f0eae3; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px -26px rgba(0,0,0,.4); } .hp-preview .hp-prop-img-wrap { position: relative; height: 190px; } .hp-preview .hp-prop-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hp-preview .hp-prop-tag { position: absolute; top: 12px; left: 12px; background: #fff; color: #c0410a; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; } .hp-preview .hp-prop-save { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); cursor: pointer; font-size: 15px; color: #c9bfb4; display: flex; align-items: center; justify-content: center; } .hp-preview .hp-prop-save.active { color: #FC4A0A; } .hp-preview .hp-prop-photos { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; } .hp-preview .hp-prop-body { padding: 15px 16px 18px; } .hp-preview .hp-prop-price-row { display: flex; align-items: center; justify-content: space-between; } .hp-preview .hp-prop-price { font-size: 20px; font-weight: 800; color: #23262B; } .hp-preview .hp-prop-price-suffix { font-size: 12px; font-weight: 600; color: #8a8079; } .hp-preview .hp-prop-verified { display: inline-flex; align-items: center; gap: 4px; background: #e9f7ee; color: #1f9d55; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; } .hp-preview .hp-prop-pid { font-size: 11px; color: #a59a8f; font-weight: 600; margin-top: 4px; } .hp-preview .hp-prop-title { font-size: 15px; font-weight: 700; margin-top: 8px; color: #23262B; } .hp-preview .hp-prop-location { font-size: 13px; color: #7b8089; margin-top: 3px; } .hp-preview .hp-prop-specs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .hp-preview .hp-prop-spec { font-size: 11.5px; font-weight: 600; color: #5f6570; background: #f8f4ef; border: 1px solid #eee3d9; padding: 4px 9px; border-radius: 7px; } .hp-preview .hp-prop-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 13px; border-top: 1px solid #f2ece5; gap: 10px; } .hp-preview .hp-prop-listed { font-size: 12px; color: #8a8079; font-weight: 600; white-space: nowrap; } .hp-preview .hp-prop-contact { background: #23262B; color: #fff; border: none; font-weight: 700; font-size: 12.5px; padding: 8px 16px; border-radius: 9px; text-decoration: none; white-space: nowrap; } .hp-preview .hp-prop-contact:hover { color: #fff; background: #34383f; } .hp-preview .hp-scroll-nav { display: flex; align-items: center; gap: 10px; } .hp-preview .hp-scroll-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #ece3d9; background: #fff; color: #23262B; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; } .hp-preview .hp-prop-actions { display: flex; align-items: center; gap: 8px; } .hp-preview .hp-prop-call { background: #FFF1E9; color: #c0410a; border: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; } .hp-preview .hp-prop-whatsapp { width: 34px; height: 34px; border-radius: 50%; border: none; background: #25D366; color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* Owner-facing "My Properties" cards reuse the .hp-prop-* card shell but add a management action row (View Insights / Availability etc.) the public homepage card doesn't need. */ .hp-preview .hp-prop-actions-row { display: flex; gap: 8px; margin-top: 14px; } .hp-preview .hp-prop-action-btn { flex: 1; text-align: center; font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 9px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; border: 1.5px solid #FC4A0A; background: #fff; color: #FC4A0A; text-decoration: none; display: inline-block; } .hp-preview .hp-prop-action-btn:hover { background: #FFF4EE; color: #FC4A0A; } .hp-preview .hp-prop-action-btn.primary { background: #FC4A0A; color: #fff; border-color: #FC4A0A; } .hp-preview .hp-prop-action-btn.primary:hover { background: #e04409; color: #fff; } /* My Properties: four cards per row on desktop. This page-specific selector overrides the legacy full-width .property-listings rule. */ @media (min-width: 992px) { .hp-preview .my-properties-grid > [class*="col-"] { display: flex; flex: 0 0 25%; width: 25%; max-width: 25%; } .hp-preview .my-properties-grid .hp-prop-card { height: 100%; width: 100%; } .hp-preview .my-properties-grid .hp-prop-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ---------- Explore by property type / What's your budget? ---------- */ .hp-preview .hp-browse-section { padding: 40px 48px 0; } .hp-preview .hp-browse-title { font-family: var(--lr-font); font-weight: 600; font-size: 32px; margin: 0 0 8px; letter-spacing: -0.3px; } .hp-preview .hp-browse-sub { color: #7b8089; font-size: 15px; margin: 0 0 16px; } .hp-preview .hp-city-chips { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .hp-preview .hp-city-chip { font-family: inherit; font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 999px; border: 1px solid #ece3d9; background: #fff; color: #5f6570; cursor: pointer; white-space: nowrap; } .hp-preview .hp-city-chip.active { font-weight: 700; border-color: #FC4A0A; background: #FC4A0A; color: #fff; } .hp-preview .hp-type-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .hp-preview .hp-type-tile { border-radius: 16px; overflow: hidden; cursor: pointer; position: relative; height: 200px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; box-shadow: 0 12px 30px -24px rgba(0,0,0,.4); text-decoration: none; } .hp-preview .hp-type-tile-title { font-weight: 700; font-size: 17px; color: #23262B; max-width: 70%; } .hp-preview .hp-type-tile-ph { align-self: flex-end; background: url('/front/assets/images/hp-preview/flats-apartments.png') center / cover no-repeat; border-radius: 12px; width: 88px; height: 88px; } /* Services (Rent Agreement / Police Verification / Explore Locality) */ .hp-preview .hp-services-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 18px; } .hp-preview .hp-service-card { position: relative; height: 170px; border-radius: 16px; overflow: hidden; border: 1px solid #f2ece5; cursor: pointer; box-shadow: 0 12px 30px -26px rgba(0,0,0,.35); text-decoration: none; display: block; } .hp-preview .hp-service-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .9; } .hp-preview .hp-service-card-fade { position: absolute; inset: 0; background: linear-gradient(100deg,#fff 22%,rgba(255,255,255,0) 62%); } .hp-preview .hp-service-card-title { position: relative; padding: 24px 0 0 26px; font-weight: 800; font-size: 18px; line-height: 1.3; color: #23262B; max-width: 130px; } .hp-preview .hp-budget-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; } .hp-preview .hp-budget-tile { border-radius: 16px; padding: 20px 20px; cursor: pointer; text-decoration: none; display: block; } .hp-preview .hp-budget-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: #6b6157; text-transform: uppercase; } .hp-preview .hp-budget-amt { font-family: var(--lr-font); font-size: 32px; font-weight: 700; color: #23262B; margin-top: -6px; letter-spacing: -.02em; } .hp-preview .hp-budget-count { font-size: 12.5px; color: #6b6157; font-weight: 600; margin-top: 4px; } /* ---------- Personal assistance ---------- */ .hp-preview .hp-assist-section { padding: 40px 48px 0; } .hp-preview .hp-assist-card { background: #221f1c; border-radius: 22px; padding: 36px 36px; color: #fff; position: relative; overflow: hidden; } .hp-preview .hp-assist-glow { position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle,rgba(252,74,10,.35),transparent 70%); pointer-events: none; } .hp-preview .hp-assist-top { position: relative; } .hp-preview .hp-assist-label { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #FC7A46; } .hp-preview .hp-assist-heading { font-family: var(--lr-font); font-weight: 600; font-size: 34px; margin: 12px 0 0; max-width: 520px; line-height: 1.15; } .hp-preview .hp-assist-accent { color: #FC7A46; font-style: italic; } /* Sits top-right next to the heading on desktop (card has its own 48px/44px padding, so this aligns flush with it); on mobile it drops below the steps as a full-width button, matching the design's own two different layouts for this button rather than one compromise. */ .hp-preview .hp-assist-btn { position: absolute; top: 0; right: 0; background: #FC4A0A; color: #fff; border: none; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; } .hp-preview .hp-assist-btn:hover { color: #fff; background: #e04409; } .hp-preview .hp-assist-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 38px; position: relative; } .hp-preview .hp-assist-step { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 15px; padding: 22px 20px; } .hp-preview .hp-assist-num { width: 40px; height: 40px; border-radius: 11px; background: #FC4A0A; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; } .hp-preview .hp-assist-step-title { font-weight: 700; font-size: 17px; margin: 16px 0 8px; } .hp-preview .hp-assist-step-body { font-size: 13.5px; line-height: 1.55; color: #b9b3ac; margin: 0; } .hp-preview .hp-assist-step-body span { color: #FC7A46; font-weight: 600; } /* ---------- Post property CTA ---------- */ .hp-preview .hp-postcta-section { padding: 40px 48px 0; } .hp-preview .hp-postcta-card { background: linear-gradient(110deg,#FFEDE3,#FFF6F0); border: 1px solid #f6dccb; border-radius: 22px; padding: 40px 44px; display: flex; align-items: center; gap: 40px; } .hp-preview .hp-postcta-photo { width: 180px; height: 130px; flex: 0 0 180px; border-radius: 14px; object-fit: cover; } .hp-preview .hp-postcta-copy { flex: 1; } .hp-preview .hp-postcta-title { font-family: var(--lr-font); font-weight: 600; font-size: 32px; margin: 0; letter-spacing: -0.3px; line-height: 1.15; } .hp-preview .hp-postcta-sub { color: #5f6570; font-size: 16px; margin: 10px 0 8px; max-width: 560px; } .hp-preview .hp-postcta-actions { display: flex; gap: 12px; } .hp-preview .hp-postcta-btn { position: relative; overflow: hidden; background: #FC4A0A; color: #fff; border: none; font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; animation: hpBtnPulse 2.4s ease-in-out infinite; } .hp-preview .hp-postcta-btn:hover { color: #fff; background: #e04409; } .hp-preview .hp-postcta-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: hpBtnShimmer 3.4s ease-in-out infinite; } @keyframes hpBtnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(252,74,10,.45); } 50% { box-shadow: 0 0 0 9px rgba(252,74,10,0); } } @keyframes hpBtnShimmer { 0% { left: -60%; } 45%, 100% { left: 130%; } } .hp-preview .hp-postcta-whatsapp { position: relative; overflow: hidden; background: #fff; color: #23262B; border: 1.5px solid #e6d8cc; font-weight: 700; font-size: 15px; padding: 14px 22px; border-radius: 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; animation: hpWhatsappPulse 2.4s ease-in-out infinite; } .hp-preview .hp-postcta-whatsapp i { color: #25D366; font-size: 18px; } .hp-preview .hp-postcta-whatsapp::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(37,211,102,.3), transparent); transform: skewX(-20deg); animation: hpBtnShimmer 3.4s ease-in-out infinite; animation-delay: 1.7s; } @keyframes hpWhatsappPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.35); } 50% { box-shadow: 0 0 0 8px rgba(37,211,102,0); } } .hp-preview .hp-postcta-mobile-title, .hp-preview .hp-postcta-mobile-sub { display: none; } /* ---------- Tools & calculators ---------- */ .hp-preview .hp-tools-section { padding: 40px 48px 0; } .hp-preview .hp-tools-title { font-family: var(--lr-font); font-weight: 600; font-size: 34px; margin: 0 0 8px; letter-spacing: -0.3px; } .hp-preview .hp-tools-sub { color: #7b8089; font-size: 15px; margin: 0 0 20px; } .hp-preview .hp-tools-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .hp-preview .hp-tool-card { border: 1px solid #f0eae3; border-radius: 16px; padding: 26px 24px; cursor: pointer; background: #fff; box-shadow: 0 12px 30px -26px rgba(0,0,0,.4); text-decoration: none; display: block; } .hp-preview .hp-tool-icon { width: 48px; height: 48px; border-radius: 13px; background: #FFF2EC; display: flex; align-items: center; justify-content: center; font-size: 22px; } .hp-preview .hp-tool-title { font-weight: 700; font-size: 18px; margin: 16px 0 6px; color: #c0410a; } .hp-preview .hp-tool-body { font-size: 14px; color: #6f757e; line-height: 1.5; } .hp-preview .hp-tool-cta { font-weight: 700; font-size: 13.5px; color: #FC4A0A; margin-top: 14px; } .hp-preview .hp-tool-arrow { display: none; } /* ---------- App download ---------- */ .hp-preview .hp-app-section { padding: 40px 48px 0; } .hp-preview .hp-app-card { background: #221f1c; border-radius: 22px; padding: 26px 40px; display: flex; align-items: center; gap: 30px; position: relative; overflow: hidden; color: #fff; } .hp-preview .hp-app-glow { position: absolute; left: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle,rgba(252,74,10,.3),transparent 70%); pointer-events: none; } .hp-preview .hp-app-copy { flex: 1; position: relative; } .hp-preview .hp-app-badge { display: inline-block; background: #FC4A0A; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; letter-spacing: .04em; } .hp-preview .hp-app-title { font-family: var(--lr-font); font-weight: 600; font-size: 32px; margin: 16px 0 0; } .hp-preview .hp-app-sub { color: #b9b3ac; font-size: 15px; margin: 10px 0 0; max-width: 520px; line-height: 1.6; } .hp-preview .hp-app-stores { display: flex; gap: 12px; margin-top: 22px; } .hp-preview .hp-app-store-btn { background: #000; border: 1px solid #3a3631; border-radius: 11px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .hp-preview .hp-app-store-btn i { font-size: 17px; } .hp-preview .hp-app-mockup { width: 240px; height: 200px; flex: 0 0 240px; border-radius: 16px; object-fit: contain; position: relative; z-index: 1; } /* ---------- Popular cities / SEO links ---------- */ .hp-preview .hp-seo-section { padding: 40px 48px 0; } .hp-preview .hp-seo-title { font-family: var(--lr-font); font-weight: 600; font-size: 34px; margin: 0 0 8px; letter-spacing: -0.3px; } .hp-preview .hp-seo-sub { color: #7b8089; font-size: 14px; margin: 0 0 16px; } /* touch-action:pan-x + user-select:none so a horizontal swipe is unambiguously a scroll gesture - without user-select:none, a touch-drag starting on a tab's text triggers native text selection instead of scrolling the row (confirmed via window.getSelection() picking up the tab labels instead of the row moving). */ .hp-preview .hp-seo-tabs { display: flex; gap: 26px; border-bottom: 1px solid #f0eae3; margin-bottom: 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; user-select: none; -webkit-user-select: none; } .hp-preview .hp-seo-tab { font-family: inherit; font-weight: 600; font-size: 14.5px; padding: 0 2px 12px; border: none; background: transparent; color: #6f757e; border-bottom: 2.5px solid transparent; cursor: pointer; white-space: nowrap; } .hp-preview .hp-seo-tab.active { font-weight: 700; color: #FC4A0A; border-bottom-color: #FC4A0A; } .hp-preview .hp-seo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .hp-preview .hp-seo-col-head { font-weight: 700; font-size: 15px; margin-bottom: 12px; } /* All real links for the city/category show here (no cap), so the column scrolls internally instead of blowing out the section height. */ .hp-preview .hp-seo-links { display: flex; flex-direction: column; gap: 9px; max-height: 320px; overflow-y: auto; padding-right: 6px; } .hp-preview .hp-seo-links::-webkit-scrollbar { width: 6px; } .hp-preview .hp-seo-links::-webkit-scrollbar-thumb { background: #e6ddd4; border-radius: 6px; } .hp-preview .hp-seo-links a { font-size: 13.5px; color: #6f757e; } /* ---------- Tenant videos (decorative - no real video source) ---------- */ .hp-preview .hp-video-section { padding: 40px 48px 0; text-align: center; } .hp-preview .hp-video-title { font-family: var(--lr-font); font-weight: 600; font-size: 34px; margin: 0 0 8px; letter-spacing: -0.3px; } .hp-preview .hp-video-title span { color: #FC4A0A; font-style: italic; } .hp-preview .hp-video-sub { color: #7b8089; font-size: 15px; margin: 0 0 26px; } .hp-preview .hp-video-frame { position: relative; max-width: 820px; margin: 0 auto; height: 420px; border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(135deg,#2a2622,#2a2622 10px,#332f2a 10px,#332f2a 20px); display: flex; align-items: center; justify-content: center; } .hp-preview .hp-video-play { width: 76px; height: 76px; border-radius: 50%; background: #FC4A0A; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; box-shadow: 0 14px 30px -10px rgba(252,74,10,.7); } /* ---------- Testimonials ---------- */ .hp-preview .hp-testi-section { padding: 40px 48px 40px; } .hp-preview .hp-testi-head { text-align: center; margin-bottom: 32px; } .hp-preview .hp-testi-title { font-family: var(--lr-font); font-weight: 600; font-size: 34px; margin: 0; letter-spacing: -0.3px; } .hp-preview .hp-testi-title span { color: #FC4A0A; font-style: italic; } .hp-preview .hp-testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .hp-preview .hp-testi-card { border: 1px solid #f0eae3; border-radius: 16px; padding: 26px 24px; background: #fff; box-shadow: 0 14px 34px -28px rgba(0,0,0,.4); } .hp-preview .hp-testi-stars { color: #FFB020; font-size: 16px; letter-spacing: 2px; } .hp-preview .hp-testi-quote { font-size: 15px; line-height: 1.65; color: #3a3f47; margin: 16px 0 20px; } .hp-preview .hp-testi-person { display: flex; align-items: center; gap: 12px; } .hp-preview .hp-testi-avatar { width: 44px; height: 44px; border-radius: 50%; background: repeating-linear-gradient(135deg,#e6ddd2,#e6ddd2 6px,#eee5da 6px,#eee5da 12px); flex: 0 0 44px; } .hp-preview .hp-testi-name { font-weight: 700; font-size: 14.5px; } .hp-preview .hp-testi-role { font-size: 12.5px; color: #8a8079; } /* ---------- Footer ---------- */ .hp-preview .hp-footer { margin-top: 0px; background: #1b1917; color: #c7c1ba; padding: 56px 48px 30px; } .hp-preview .hp-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 40px; } /* The real footer.png asset is white-on-transparent, made to sit directly on this dark footer - no white background pill needed (that was inherited from the design's own inline style, which assumed a different, dark-on-white logo asset). */ .hp-preview .hp-footer-logo-link { display: inline-block; } .hp-preview .hp-footer-logo { height: 40px; width: auto; } .hp-preview .hp-footer-tagline { font-size: 14px; line-height: 1.6; margin: 18px 0 0; color: #9a938c; max-width: 280px; } .hp-preview .hp-footer-socials { display: flex; gap: 10px; margin-top: 18px; } .hp-preview .hp-footer-social { width: 36px; height: 36px; border-radius: 9px; background: #2c2926; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; color: #c7c1ba; } .hp-preview .hp-footer-col-head { font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 16px; } .hp-preview .hp-footer-links { display: flex; flex-direction: column; gap: 11px; } .hp-preview .hp-footer-links a { font-size: 13.5px; color: #9a938c; } /* On desktop these three columns need to act as direct items of the outer 5-column .hp-footer-grid (matching its grid-template-columns); display:contents lets the wrapper disappear from layout while still existing in the DOM for the mobile 2-column grid below. */ .hp-preview .hp-footer-cols-wrap { display: contents; } .hp-preview .hp-footer-contact { font-size: 13.5px; line-height: 1.9; color: #9a938c; } .hp-preview .hp-footer-contact i { width: 15px; margin-right: 6px; color: #c7856a; } .hp-preview .hp-footer-apps { display: flex; gap: 10px; margin-top: 16px; } .hp-preview .hp-footer-app-btn { background: #2c2926; border-radius: 9px; padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; color: #c7c1ba; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .hp-preview .hp-footer-app-btn i { font-size: 14px; } .hp-preview .hp-footer-bottom { border-top: 1px solid #2c2926; margin-top: 40px; padding-top: 22px; text-align: center; font-size: 12.5px; color: #7d766f; } /* ---------- Mobile bottom nav ---------- */ .hp-preview .hp-bottom-nav { display: none; } /* ================= MOBILE (≤767px), values from the design's mobile mockup rather than scaled-down desktop values ================= */ /* ================= LISTING PAGE (.lp-preview) ================= Full pixel-match rebuild of Lets Rentz Listings.dc.html, scoped under .lp-preview so none of this leaks onto any other page - only front/property/listing.blade.php ever gets this class or any of these markup changes. Real data/filtering underneath is unchanged. Mobile-only (max-width:767.98px) overrides for this page are in responsive1.css instead. */ /* White page (not flat grey) on purpose - matches buy-sell-listing-v2.html's body/.searchband split, where only the search bar band is grey and everything else (filters, results, cards) sits on white so the bordered-not-filled .lcard cards actually stand out. Was #F7F7F8 everywhere here, which flattened that contrast - see .lp-desktop-search-wrap below for the grey band this page was missing. */ .lp-preview { font-family: var(--lr-font); background: #FFFFFF; } .lp-preview .main-content { background: #FFFFFF; } .lp-preview a { color: #FC4A0A; } /* ---------- Breadcrumb / heading ---------- */ .lp-preview .filter-title, .lp-preview .lp-locality-title, .lp-preview .lp-card-title, .lp-preview .lp-card-stat-price { font-family: var(--lr-font); font-weight: 600; } /* results-count (the "989 House/Flat for rent in Mohali" heading) is deliberately NOT in the Newsreader-serif group above - per past direction, a prototype port should use the prototype's own exact styling rather than blending with the live site's existing tokens. buy-sell-listing-v2.html's .results-head h1: sans-serif (inherits .lp-preview's Plus Jakarta Sans), 24px/800/-0.015em. */ .lp-preview .results-count { font-family: inherit; font-size: 24px; font-weight: 800; letter-spacing: -0.015em; } .lp-preview .results-count .property-count { color: #FC4A0A; } .lp-preview .lp-breadcrumb { font-size: 12px; color: #9a948e; padding: 14px 0 6px; } .lp-preview .lp-breadcrumb a { color: #5f6570; text-decoration: none; } .lp-preview .lp-breadcrumb span.sep { color: #c4beb8; margin: 0 4px; } /* .results-head in buy-sell-listing-v2.html - heading + sort dropdown sharing one row instead of two stacked rows. */ .lp-preview .lp-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; } /* ---------- Sort row / active-filter summary ---------- */ .lp-preview .lp-sort-row { display: flex; align-items: center; gap: 10px; } .lp-preview .lp-sort-label { font-size: 14px; font-weight: 500; color: var(--ink, #333); white-space: nowrap; } .lp-preview .lp-sort-btn { display: flex; align-items: center; gap: 7px; border: 1px solid #ddd; background: #fff; border-radius: 10px; padding: 10px 13px; font-weight: 600; font-size: 13.5px; color: #3a3f47; cursor: pointer; white-space: nowrap; } .lp-preview .lp-sort-btn span.lbl { color: #9a948e; } .lp-preview .lp-sort-wrap { position: relative; } /* Matches buy-sell-listing-v2.html's .sort-select exactly (border/radius/ padding/chevron), replacing the old pill-style sort button look. */ .lp-preview .lp-sort-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #E5E5E5; background: #fff; border-radius: 8px; padding: 11px 34px 11px 16px; font-family: inherit; font-weight: 500; font-size: 14px; color: var(--ink, #333); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; } .lp-preview .lp-sort-wrap::after { content: none; } .lp-preview .lp-active-filters { display: none; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: 13.5px; color: #6f757e; } .lp-preview .lp-active-filters.show { display: flex; } .lp-preview .lp-active-filters .lp-count { color: #23262B; } .lp-preview .lp-active-filters button { border: none; background: transparent; color: #FC4A0A; font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 0; } .lp-preview .lp-sort-chevron-sm { font-size: 10px; } .lp-preview .lp-results-row { margin-top: 20px; } /* ---------- 3-column layout at wide desktop (sidebar / results / quick links). buy-sell-listing-v2.html's own .layout is 376px 1fr 264px; sidebar trimmed to 350px per explicit feedback that 376px read too wide. Narrower than this breakpoint, .lp-results-row keeps the existing Bootstrap col-lg-3/col-md-4 flex behavior (see the 768-1100px patches above) and quick links just stacks in normal flow - not worth replicating the reference's own two more breakpoints for this. */ @media (min-width: 1200px) { /* .row.g-3 selector (3 classes) beats a plain .lp-preview .lp-results-row (2 classes) - styles.css's ".main-content .row.g-3{display:flex}" was winning over this. Match its specificity with .row.g-3 here too. */ .lp-preview .lp-results-row.row.g-3 { display: grid; grid-template-columns: 350px 1fr 264px; gap: 24px; } /* Bootstrap's col-lg-3/col-md-4/col-lg-9/col-md-8 still carry their own width:25%/75% (etc.) even once the parent is display:grid - that's a percentage OF the grid track the item was placed in, not of the row, so each item was shrinking to a fraction of its own already-correct track width instead of filling it. Reset them back to fill their track, same as any normal grid item does by default. */ .lp-preview .lp-results-row.row.g-3 > .lp-sidebar-col, .lp-preview .lp-results-row.row.g-3 > .col-lg-9.col-md-8, .lp-preview .lp-results-row.row.g-3 > .lp-quick-links { width: 100%; max-width: 100%; flex: none; } } /* ---------- Mobile header (search pill + sort/filter row) ---------- */ .lp-preview .lp-mobile-header { background: #fff; border-bottom: 1px solid #ececec; padding: 12px 14px; } .lp-preview .lp-mobile-toprow { display: flex; align-items: center; gap: 8px; } .lp-preview .lp-mobile-back { flex: 0 0 auto; border: none; background: transparent; font-size: 20px; color: #23262B; padding: 0; } .lp-preview .lp-mobile-search-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid #ddd; border-radius: 999px; padding: 9px 14px; background: #F7F7F8; } .lp-preview .lp-mobile-search-pill i { color: #FC4A0A; font-size: 15px; flex: 0 0 auto; } .lp-preview .lp-mobile-search-pill input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 13px; font-weight: 600; color: #3a3f47; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-preview .lp-mobile-icon-btn { flex: 0 0 auto; position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #ddd; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #3a3f47; cursor: pointer; } .lp-preview .lp-mobile-icon-btn.save { color: #FC4A0A; } .lp-preview .lp-mobile-icon-btn .lp-badge { position: absolute; top: -3px; right: -3px; background: #FC4A0A; color: #fff; font-size: 9px; font-weight: 800; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; } .lp-preview .lp-mobile-secondrow { display: flex; align-items: center; gap: 8px; padding-top: 12px; } .lp-preview .lp-mobile-sort-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #ddd; background: #fff; border-radius: 10px; padding: 9px 10px; font-weight: 600; font-size: 13px; color: #3a3f47; cursor: pointer; } .lp-preview .lp-mobile-premium-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #FC4A0A; background: #FFF1E9; color: #c0410a; border-radius: 10px; padding: 9px 10px; font-weight: 700; font-size: 13px; cursor: pointer; } /* ---------- Desktop search bar ---------- */ /* The grey band buy-sell-listing-v2.html calls .searchband - white-to- #F3F3F3 gradient, same values as that file's --grey-50 token, full width edge-to-edge. .lp-desktop-search-wrap now sits outside .container (see listing.blade.php) specifically so this background can reach the true viewport edges instead of stopping at the container's own padding - .lp-desktop-search-inner is a second .container nested inside it that re-centers the actual search bar to line up with the breadcrumb/results below. */ .lp-preview .lp-desktop-search-wrap { background: linear-gradient(180deg, #FFFFFF 0%, #F3F3F3 100%); } .lp-preview .lp-desktop-search-inner { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 18px; padding-bottom: 18px; } .lp-preview .lp-desktop-search-bar { width: 100%; max-width: 640px; display: flex; align-items: center; gap: 8px; border: 1px solid #DDD; border-radius: 999px; padding: 6px 6px 6px 8px; background: #fff; } .lp-preview .lp-mode-wrap { position: relative; flex: 0 0 auto; } .lp-preview .lp-mode-btn { display: flex; align-items: center; gap: 6px; border: none; background: #F4F4F5; border-radius: 999px; padding: 9px 14px; font-weight: 700; font-size: 13.5px; color: #23262B; cursor: pointer; white-space: nowrap; } .lp-preview .lp-mode-chevron { font-size: 11px; color: #a09a94; } .lp-preview .lp-mode-menu { position: absolute; top: 110%; left: 0; background: #fff; border: 1px solid #eee; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.25); overflow: hidden; z-index: 30; min-width: 150px; display: none; } .lp-preview .lp-mode-menu.show { display: block; } .lp-preview .lp-mode-menu a { display: block; padding: 11px 15px; font-size: 13.5px; font-weight: 600; color: #3a3f47; border-bottom: 1px solid #f5efe8; white-space: nowrap; text-decoration: none; } .lp-preview .lp-mode-menu a.active { color: #FC4A0A; } .lp-preview .lp-loc-chip { display: inline-flex; align-items: center; gap: 6px; background: #FFF1E9; border: 1px solid #f7d3bf; color: #c0410a; border-radius: 999px; padding: 7px 10px 7px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; flex: 0 1 auto; min-width: 0; } .lp-preview .lp-loc-chip span.txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-preview .lp-desktop-search-input { flex: 1; min-width: 70px; border: none; background: transparent; outline: none; font-size: 14px; color: #23262B; padding: 8px 6px; } .lp-preview .lp-search-submit-btn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none; background: #FC4A0A; color: #fff; font-size: 17px; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(252,74,10,.7); display: flex; align-items: center; justify-content: center; } .lp-preview .lp-pid-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; border: 1px solid #FC4A0A; background: #FFF1E9; color: #23262B; font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; text-decoration: none; } .lp-preview .lp-pid-btn span { color: #FC4A0A; font-size: 15px; } /* ---------- Sidebar ---------- */ /* Matches buy-sell-listing-v2.html's .filter-card/.fsection spacing: padding lives once on the card itself (20px) instead of on every child, and sections are separated by a light 16px+2px gap instead of an 18px-padding-plus-divider-line box each - the old per-section border-bottom read as more boxed/cluttered than the reference. */ .lp-preview .filter-card { border: 1px solid #ececec; border-radius: 15px; background: #fff; box-shadow: none; padding: 20px; } .lp-preview .filter-title-row { padding: 0; margin-bottom: 4px; } .lp-preview .filter-title { font-size: 20px; } .lp-preview .btn-reset-all { color: #FC4A0A; font-weight: 700; font-size: 13px; border: none; background: transparent; } .lp-preview .filter-section { padding: 16px 0 0; margin-top: 2px; border-bottom: none; } .lp-preview .filter-section-header { font-weight: 700; font-size: 15px; color: #23262B; } .lp-preview .lp-pill-row { display: flex; gap: 8px; flex-wrap: wrap; } .lp-preview .lp-pill { font-family: inherit; font-weight: 600; font-size: 13px; padding: 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; background: #fff; border: 1px solid #e2ddd7; color: #5f6570; } .lp-preview .lp-pill.active, .lp-preview .lp-pill input:checked + span { background: #FFF1E9; border-color: #FC4A0A; color: #c0410a; } .lp-preview .lp-pill input { display: none; } .lp-preview .lp-checklist { display: flex; flex-direction: column; gap: 11px; } /* padding: 0 - Bootstrap's .form-check keeps padding-left:1.5em for its floated checkbox; here the box is a flex item, so that padding just indented every checkbox row 21px past the section headings and chips. */ .lp-preview .lp-checklist .form-check { display: flex; align-items: center; gap: 11px; font-size: 14px; color: #3a3f47; margin: 0; padding: 0; } .lp-preview .lp-checklist .form-check-input { width: 20px; height: 20px; border-radius: 6px; margin: 0; } .lp-preview .lp-checklist .form-check-input:checked { background-color: #FC4A0A; border-color: #FC4A0A; } .lp-preview .lp-checklist .form-check-label { margin: 0; } /* Category / Preferred Tenant / Furnished / Food / Property Type / Listed By all render as JS-populated or static .form-check lists - style every one of them as the mockup's pill row instead of a checkbox list, without touching the JS that populates them. */ .lp-preview .filter-options-list, .lp-preview .filter-options { display: flex; flex-wrap: wrap; gap: 8px; } .lp-preview .filter-options-list .form-check, .lp-preview .filter-options .form-check { /* styles.css:42779 (@media min-width:768px) bordered-pill-wrapper rule fights our own border-on-