:root{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --bg:#f6f1ea; --panel:#ffffff; --paper:#f6f1ea; --text:#1d1f22; --muted:#6b7280; --white:#fff; --gold1:#c9a15a; --gold2:#8b6b33; --blue:#1d4ed8; --green:#16a34a; --shadow: 0 12px 30px rgba(0,0,0,.18); --shadow2: 0 8px 20px rgba(0,0,0,.14); --radius: 18px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: var(--bg); } /* ========================================= PROPERTY PAGE (Airbnb-like) Only applies when ========================================= */ .page-property{ background:#f7f4ef; } .page-property .container{ width:min(1120px, 92vw); margin:0 auto; } .page-property .topbar{ background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(17,24,39,.10); } .page-property .brand{ color:#111827; font-family: "Playfair Display", Georgia, serif; } .page-property .menu{ color:#111827; } .page-property .menu a{ color: rgba(17,24,39,.75); } .page-property .menu a:hover{ color:#111827; text-decoration:underline; } .page-property .bottom-bar{ display:none; } .page-property .spacer-bottom{ height:0; } .abp-wrap{ padding: 10px 0 50px; } .abp-head{ display:flex; justify-content:space-between; gap: 18px; align-items:flex-start; } .abp-title{ margin:0; font-size: 28px; font-weight: 800; letter-spacing:-.2px; } .abp-sub{ margin-top: 6px; color:#6b7280; font-size: 14px; } .abp-meta{ margin-top: 8px; display:flex; gap:8px; align-items:center; font-size: 14px; color:#111827; } .abp-star{ font-size: 16px; } .abp-dot{ color:#9ca3af; } .abp-link{ text-decoration:underline; color:#111827; } .abp-location{ color:#111827; text-decoration:underline; } .abp-actions{ display:flex; gap:10px; } .abp-action{ border:0; background:transparent; cursor:pointer; font-weight: 700; font-size: 14px; text-decoration: underline; color:#111827; padding: 8px 10px; border-radius: 10px; } .abp-action:hover{ background: rgba(17,24,39,.06); } .abp-action.is-on{ text-decoration:none; } .abp-gallery{ margin-top: 14px; display: grid; /* Airbnb-like: 1 big photo (left) + 4 equal tiles (right 2×2) */ grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; /* Desktop target size (like Airbnb) Width is controlled by .page-property .container (1120px max). Keep all images inside the container while preserving aspect ratio. */ width: 100%; height: 380px; border-radius: 16px; overflow: hidden; position: relative; background: #fff; /* gutter color (shows through the gaps) */ } .abp-gallery-right{ /* On desktop, treat the 4 tiles as direct grid items of .abp-gallery */ display: contents; } .abp-photo{ border:0; padding:0; background:transparent; cursor:pointer; width:100%; height:100%; position:relative; min-width: 0; min-height: 0; } .abp-photo--main{ grid-column: 1 / 2; grid-row: 1 / 3; } .abp-photo--a{ grid-column: 2 / 3; grid-row: 1 / 2; } .abp-photo--b{ grid-column: 3 / 4; grid-row: 1 / 2; } .abp-photo--c{ grid-column: 2 / 3; grid-row: 2 / 3; } .abp-photo--d{ grid-column: 3 / 4; grid-row: 2 / 3; } .abp-photo img{ width:100%; height:100%; display:block; object-fit: cover; object-position: center; } .abp-photo:hover::after{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.12); } .abp-showall{ position:absolute; right: 12px; bottom: 12px; border: 1px solid rgba(0,0,0,.18); background: rgba(255,255,255,.96); color:#111827; border-radius: 10px; padding: 10px 12px; font-weight: 800; font-size: 14px; display:flex; align-items:center; gap:8px; cursor:pointer; } .abp-gridico{ width:18px; height:18px; display:inline-block; position:relative; } .abp-gridico::before{ content:""; position:absolute; inset:0; background: linear-gradient(#111827,#111827) 0 0/7px 7px, linear-gradient(#111827,#111827) 11px 0/7px 7px, linear-gradient(#111827,#111827) 0 11px/7px 7px, linear-gradient(#111827,#111827) 11px 11px/7px 7px; background-repeat:no-repeat; border-radius: 3px; } .abp-main{ margin-top: 26px; display:grid; grid-template-columns: 1fr 372px; gap: 46px; align-items:start; } .abp-divider{ height:1px; background: rgba(17,24,39,.10); margin: 22px 0; } .abp-facts-title{ font-size: 22px; font-weight: 800; color:#111827; } .abp-facts-sub{ margin-top: 6px; color:#4b5563; font-size: 14px; } /* Social proof (Guest favorite / rating / reviews) */ .abp-socialproof{ margin-top: 14px; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr 1fr; background:#fff; } .abp-sp-item{ padding: 14px 14px; display: flex; align-items: center; justify-content: center; gap: 12px; } .abp-sp-item + .abp-sp-item{ border-left: 1px solid #e5e7eb; } .abp-sp-title{ font-weight: 900; font-size: 14px; line-height: 1.1; color:#111827; } .abp-sp-sub{ font-size: 12px; color:#6b7280; margin-top: 2px; } .abp-sp-num{ font-weight: 900; font-size: 18px; line-height: 1; color:#111827; } .abp-sp-label{ font-size: 12px; color:#6b7280; margin-top: 4px; } .abp-sp-ico{ font-size: 20px; } /* Host row */ .abp-host{ display:flex; align-items:center; gap: 12px; padding: 16px 0; } .abp-host-avatar{ width: 48px; height: 48px; border-radius: 999px; overflow:hidden; flex: 0 0 48px; } .abp-host-avatar img{ width: 100%; height: 100%; object-fit: cover; display:block; } .abp-host-name{ font-weight: 900; font-size: 14px; color:#111827; } .abp-host-sub{ font-size: 12px; color:#6b7280; margin-top: 2px; } .abp-h2{ margin:0 0 12px; font-size: 22px; font-weight: 800; } .abp-desc h3{ margin: 18px 0 8px; font-size: 16px; } .abp-text{ color:#111827; font-size: 15px; line-height: 1.55; } .abp-muted{ color:#6b7280; font-size: 14px; } .abp-clamp{ display:-webkit-box; -webkit-line-clamp: var(--clamp, 6); -webkit-box-orient: vertical; overflow:hidden; } .abp-clamp.is-expanded{ -webkit-line-clamp: unset; } .abp-more{ margin-top: 10px; border:0; background:transparent; cursor:pointer; font-weight: 800; font-size: 14px; color:#111827; text-decoration: underline; padding: 6px 0; } .abp-amen-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .abp-amen-item{ display:flex; gap: 12px; align-items:flex-start; color:#111827; font-size: 15px; } .abp-amen-item .am-ico{ width: 22px; height: 22px; color:#111827; flex:0 0 auto; margin-top: 1px; } .abp-btn-outline{ margin-top: 18px; border: 1px solid rgba(17,24,39,.30); background:#fff; color:#111827; font-weight: 900; padding: 12px 14px; border-radius: 12px; cursor:pointer; } .abp-btn-outline:hover{ background: rgba(17,24,39,.04); } .abp-right{ position: sticky; top: 88px; align-self: start; } .abp-book{ position: relative; border: 1px solid rgba(17,24,39,.14); border-radius: 14px; padding: 18px; background:#fff; box-shadow: 0 12px 28px rgba(0,0,0,.12); } .abp-book-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 14px; } .abp-price-amt{ font-weight: 900; font-size: 22px; } .abp-price-unit{ margin-left: 6px; color:#6b7280; font-weight: 700; } .abp-price-sub{ margin-top: 4px; font-size: 13px; color:#6b7280; font-weight: 800; } .abp-book-rate{ font-weight: 900; color:#111827; font-size: 14px; } .abp-book-rate span{ margin-right: 4px; } .abp-book-review{ color:#6b7280; font-weight: 800; } .abp-datebox{ display:grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(17,24,39,.30); border-radius: 12px 12px 0 0; border-bottom: 0; overflow:hidden; } .abp-guestbox{ border: 1px solid rgba(17,24,39,.30); border-top: 1px solid rgba(17,24,39,.30); border-radius: 0 0 12px 12px; margin-top: -1px; position: relative; background:#fff; } .abp-guestbtn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 10px 12px; border:0; background:transparent; cursor:pointer; } .abp-guestleft{ display:flex; flex-direction:column; align-items:flex-start; } .abp-guestlbl{ font-size: 10px; letter-spacing:.8px; font-weight: 900; color:#111827; } .abp-guestval{ font-size: 14px; font-weight: 800; color:#111827; padding-top: 6px; } .abp-guestchev{ font-size: 16px; color:#111827; opacity:.85; } .abp-guestdrop{ display:none; position:absolute; left: 0; right: 0; top: calc(100% + 10px); background:#fff; border: 1px solid rgba(17,24,39,.18); border-radius: 14px; padding: 14px 14px 10px; box-shadow: 0 18px 42px rgba(0,0,0,.16); z-index: 30; } .abp-guestbox.is-open .abp-guestdrop{ display:block; } .abp-grow{ display:flex; align-items:center; justify-content:space-between; padding: 10px 0; } .abp-grow + .abp-grow{ border-top: 1px solid rgba(17,24,39,.08); } .abp-gname{ font-weight: 900; color:#111827; } .abp-gsub{ font-size: 12px; color:#6b7280; margin-top: 2px; } .abp-glink{ color:#111827; text-decoration: underline; font-weight: 800; } .abp-gctl{ display:flex; align-items:center; gap: 12px; } .abp-gnum{ width: 20px; text-align:center; font-weight: 900; } .abp-gbtn{ width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(17,24,39,.28); background:#fff; cursor:pointer; font-size: 18px; line-height: 1; display:flex; align-items:center; justify-content:center; } .abp-gbtn:hover{ background: rgba(17,24,39,.04); } .abp-gbtn:disabled{ opacity: .35; cursor:not-allowed; } .abp-gnote{ margin-top: 10px; font-size: 12px; line-height: 1.35; color:#6b7280; } .abp-datehint{ margin-top: 10px; color:#6b7280; font-size: 13px; line-height: 1.35; } .abp-open-cal{ margin-top: 10px; width:100%; border: 1px solid rgba(17,24,39,.22); background:#fff; color:#111827; font-weight: 900; padding: 12px 14px; border-radius: 12px; cursor:pointer; } .abp-open-cal:hover{ background: rgba(17,24,39,.04); } .abp-date{ padding: 10px 12px; } .abp-date + .abp-date{ border-left: 1px solid rgba(17,24,39,.30); } .abp-date-lbl{ font-size: 10px; letter-spacing:.8px; font-weight: 900; color:#111827; } .abp-date-in{ width:100%; border:0; outline:0; font-size: 14px; font-weight: 700; padding: 6px 0 0; background:transparent; } .abp-date-in::placeholder{ color:#9ca3af; font-weight: 700; } .abp-cal{ margin-top: 12px; } .cal-nav{ display:flex; align-items:center; justify-content:space-between; margin: 8px 0 10px; } .cal-navlabel{ font-weight: 900; font-size: 14px; color:#111827; } .cal-navbtn{ border: 1px solid rgba(17,24,39,.16); background:#fff; width: 36px; height: 36px; border-radius: 999px; cursor:pointer; font-size: 20px; line-height: 1; } .cal-months{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cal-title{ text-align:center; font-weight: 900; font-size: 14px; margin-bottom: 8px; } .cal-dows{ display:grid; grid-template-columns: repeat(7, 1fr); color:#6b7280; font-size: 11px; text-align:center; margin-bottom: 6px; } .cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 0; } .cal-empty{ height: 56px; } /* Airbnb-ish day cell: day number + price */ .cal-day{ border: 1px solid transparent; background:transparent; height: 56px; border-radius: 0; cursor:pointer; padding: 6px 8px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; color:#111827; } .cal-num{ font-weight: 900; font-size: 12px; line-height:1; display:inline-flex; align-items:center; justify-content:center; } .cal-price{ font-weight: 800; font-size: 10px; line-height:1; color:#6b7280; } .cal-day:hover{ background: rgba(17,24,39,.06); } .cal-day.in-range{ background: rgba(17,24,39,.08); } .cal-day.is-start, .cal-day.is-end{ background: rgba(17,24,39,.08); } .cal-day.is-start .cal-num, .cal-day.is-end .cal-num{ width: 34px; height: 34px; border-radius: 999px; background:#111827; color:#fff; } .cal-day.is-deal .cal-price{ color:#16a34a; } .cal-day.is-blocked{ opacity:1; cursor:not-allowed; background: repeating-linear-gradient( -45deg, rgba(22,163,74,.16) 0, rgba(22,163,74,.16) 6px, rgba(22,163,74,.06) 6px, rgba(22,163,74,.06) 12px ); border-color: rgba(22,163,74,.35); } .cal-day.is-blocked .cal-num{ color: rgba(17,24,39,.55); text-decoration: line-through; } .cal-day.is-blocked .cal-price{ color:#9ca3af; } /* Allow selecting a reserved date as CHECKOUT (end date). */ .cal-day.is-blocked.is-end{ cursor:pointer; } .cal-day.is-blocked.is-end .cal-num{ text-decoration:none; } .cal-day.is-past{ opacity:.35; cursor:not-allowed; } .cal-day:disabled{ opacity:.35; cursor:not-allowed; } .abp-cal-foot{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-top: 10px; } .abp-clear{ border:0; background:transparent; cursor:pointer; font-weight: 900; text-decoration: underline; color:#111827; } /* Hide debug/meta line under the calendar (blocks/pricing status) */ #abpCalMeta{ display:none !important; } /* Hint + button (opens the date picker) */ .abp-datehint{ margin-top: 10px; color:#6b7280; font-size: 13px; } .abp-open-cal{ margin-top: 10px; width: 100%; border: 1px solid rgba(17,24,39,.30); background:#fff; color:#111827; font-weight: 900; padding: 12px 14px; border-radius: 12px; cursor:pointer; } .abp-open-cal:hover{ background: rgba(17,24,39,.04); } /* Dates modal (Airbnb-like popover) */ .abp-datepop{ position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.40); display:none; align-items: center; justify-content: center; padding: 18px; } .abp-datepop.is-open{ display:flex; } .abp-datepop-card{ width: 880px; max-width: 96vw; background:#fff; border-radius: 18px; box-shadow: 0 28px 80px rgba(0,0,0,.30); padding: 18px; } .abp-datepop-head{ display:flex; align-items:flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .abp-datepop-title{ font-weight: 900; font-size: 16px; color:#111827; } .abp-datepop-sum{ font-weight: 900; font-size: 18px; color:#111827; line-height:1.2; } .abp-datepop-range{ font-size: 13px; color:#6b7280; margin-top: 2px; } .abp-datepop-close{ border:0; background:transparent; cursor:pointer; width: 38px; height: 38px; border-radius: 999px; font-size: 18px; } .abp-datepop-close:hover{ background: rgba(17,24,39,.06); } .abp-datepop-foot{ display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(17,24,39,.10); } .abp-cal-meta{ flex: 1; text-align: center; font-size: 12px; color:#6b7280; font-weight: 800; user-select: none; } .abp-datepop .abp-cal{ margin-top: 0; } @media (max-width: 900px){ .abp-gallery{ height: 300px; } .abp-datepop-card{ width: 96vw; } } @media (max-width: 520px){ .abp-gallery{ height: 240px; } } .abp-btn-primary{ margin-top: 14px; display:flex; align-items:center; justify-content:center; padding: 14px 14px; background:#e11d48; color:#fff; font-weight: 900; border-radius: 12px; border:0; } /* Small hint + button (opens the date picker) */ .abp-datehint{ margin-top: 10px; color:#6b7280; font-size: 13px; } .abp-open-cal{ margin-top: 10px; width: 100%; border: 1px solid rgba(17,24,39,.22); background: #fff; color:#111827; font-weight: 900; padding: 12px 14px; border-radius: 12px; cursor:pointer; } .abp-open-cal:hover{ background: rgba(17,24,39,.04); } /* Dates modal (Airbnb-ish popover) */ .abp-datepop{ position: fixed; inset: 0; background: rgba(15,23,42,.42); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 250; } .abp-datepop.is-open{ display:flex; } .abp-datepop-card{ width: 860px; max-width: 96vw; background: #fff; border-radius: 18px; box-shadow: 0 28px 70px rgba(0,0,0,.28); border: 1px solid rgba(17,24,39,.12); padding: 16px 16px 14px; } .abp-datepop-head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 2px 4px 10px; } .abp-datepop-title{ font-weight: 900; font-size: 16px; color:#111827; } .abp-datepop-close{ border:0; background: rgba(17,24,39,.06); width: 36px; height: 36px; border-radius: 999px; cursor:pointer; font-weight: 900; } .abp-datepop-foot{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding-top: 12px; margin-top: 12px; border-top: 1px solid rgba(17,24,39,.10); } @media (max-width: 720px){ .abp-datepop-card{ width: 96vw; } } .abp-btn-primary:hover{ filter: brightness(0.95); } /* Lightbox */ .abp-noscroll{ overflow:hidden; } .abp-light{ position: fixed; inset: 0; background: rgba(0,0,0,.86); display:none; z-index: 200; } .abp-light.is-open{ display:block; } .abp-light-top{ position: absolute; top: 16px; left: 16px; right: 16px; display:flex; justify-content:space-between; align-items:center; color:#fff; } .abp-light-close{ border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.20); color:#fff; padding: 10px 12px; border-radius: 12px; cursor:pointer; font-weight: 900; } .abp-light-img{ position:absolute; top: 70px; left: 50%; transform: translateX(-50%); max-width: min(1080px, 92vw); max-height: calc(100vh - 190px); border-radius: 14px; object-fit: contain; background: rgba(0,0,0,.18); } .abp-light-nav{ position:absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.20); color:#fff; font-size: 28px; cursor:pointer; } .abp-light-prev{ left: 18px; } .abp-light-next{ right: 18px; } .abp-light-thumbs{ position:absolute; left: 50%; transform: translateX(-50%); bottom: 18px; display:flex; gap: 8px; overflow:auto; max-width: min(1080px, 92vw); padding: 8px; } .abp-thumb{ border: 2px solid transparent; background:transparent; padding:0; border-radius: 10px; cursor:pointer; flex:0 0 auto; } .abp-thumb img{ width: 82px; height: 56px; object-fit: cover; display:block; border-radius: 8px; } .abp-thumb.is-active{ border-color: rgba(255,255,255,.86); } /* Amenities modal */ .abp-modal{ position: fixed; inset:0; background: rgba(0,0,0,.55); display:none; z-index: 210; padding: 18px; } .abp-modal.is-open{ display:flex; align-items:center; justify-content:center; } .abp-modal-card{ width: min(760px, 96vw); max-height: min(78vh, 760px); overflow:hidden; background:#fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); } .abp-modal-head{ display:flex; justify-content:space-between; align-items:center; padding: 16px 16px; border-bottom: 1px solid rgba(17,24,39,.10); } .abp-modal-title{ font-weight: 900; font-size: 16px; } .abp-modal-close{ border:0; background: rgba(17,24,39,.06); width: 36px; height: 36px; border-radius: 999px; cursor:pointer; font-weight: 900; } .abp-modal-body{ padding: 14px 16px 18px; overflow:auto; max-height: calc(min(78vh, 760px) - 60px); } .abp-amen-all{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .abp-amen-name{ font-weight: 900; } .abp-amen-desc{ color:#6b7280; font-size: 13px; margin-top: 2px; } @media (max-width: 980px){ .abp-main{ grid-template-columns: 1fr; gap: 26px; } .abp-right{ position: static; top:auto; } .abp-book{ position: relative; top:auto; } .cal-months{ grid-template-columns: 1fr; } .abp-amen-all{ grid-template-columns: 1fr; } } @media (max-width: 720px){ .abp-head{ flex-direction: column; } .abp-actions{ align-self:flex-start; } /* Gallery becomes stacked on mobile (Airbnb-ish) */ .abp-gallery{ grid-template-columns: 1fr; grid-template-rows: auto; height: auto; } .abp-photo--main{ grid-column: auto; grid-row: auto; height: 240px; } /* Restore the right wrapper as a grid on mobile */ .abp-gallery-right{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .abp-gallery-right .abp-photo{ grid-column: auto; grid-row: auto; height: 160px; } .abp-title{ font-size: 24px; } } a{color:inherit; text-decoration:none} .container{ width:min(1060px, 92vw); margin:0 auto; } .topbar{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); background: rgba(15,19,26,.66); border-bottom: 1px solid rgba(255,255,255,.08); } .topbar .inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:14px; } .brand{ font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; letter-spacing:.3px; color: #f7f2ea; } .menu{ display:flex; gap:14px; flex-wrap:wrap; font-size: 13px; color: rgba(255,255,255,.85); } .menu a{opacity:.9} .menu a:hover{opacity:1; text-decoration:underline} .hero{ position:relative; min-height: 560px; border-radius: var(--radius); overflow:hidden; margin: 18px 0 22px; box-shadow: var(--shadow); background: #111827; } .hero::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(10,12,15,.78) 0%, rgba(10,12,15,.42) 45%, rgba(10,12,15,.22) 100%), var(--hero-img, radial-gradient(circle at 60% 40%, #374151 0%, #111827 55%, #0b1020 100%)); background-size:cover; background-position:center; filter: contrast(1.03) saturate(1.05); } .hero .content{ position:relative; padding: 54px 34px 28px; color:#fff; max-width: 640px; } .h1{ font-family: Georgia, "Times New Roman", Times, serif; font-size: clamp(34px, 6vw, 54px); line-height:1.05; margin:0 0 10px; text-shadow: 0 10px 26px rgba(0,0,0,.35); } .hero .sub{ font-size: 15px; opacity:.86; line-height:1.45; margin: 0 0 18px; max-width: 540px; } .cta{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 18px; border-radius: 10px; background: linear-gradient(180deg,var(--gold1),var(--gold2)); color: #fff; font-weight: 700; box-shadow: 0 10px 20px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.18); } .cta:hover{transform: translateY(-1px)} .hero .cta{min-width: 220px} .section{ padding: 12px 0 6px; } .h2{ font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; margin: 8px 0 14px; color:#1f2937; } .cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* Pay page: keep cards at 2 columns on desktop */ .pay-cards{ grid-template-columns: repeat(2, 1fr); } .card{ background: rgba(255,255,255,.72); border: 1px solid rgba(17,24,39,.08); border-radius: 14px; padding: 14px 12px; box-shadow: var(--shadow2); display:flex; gap:10px; align-items:center; } .icon{ width: 34px; height:34px; border-radius: 10px; display:grid; place-items:center; background: rgba(201,161,90,.14); border: 1px solid rgba(201,161,90,.28); flex: 0 0 auto; } .card .t{ font-size: 13px; font-weight: 700; } .card .d{ font-size: 12px; color: var(--muted); margin-top:2px; } .testimonial{ margin-top: 10px; background: rgba(255,255,255,.74); border: 1px solid rgba(17,24,39,.08); border-radius: 16px; box-shadow: var(--shadow2); padding: 14px; display:flex; gap:12px; align-items:center; } .testimonial img{ width: 88px; height: 66px; border-radius: 12px; object-fit:cover; background:#e5e7eb; } .stars{letter-spacing:1px; color:#b8892e; font-weight:900} .quote{ font-size: 12.5px; color: #374151; line-height:1.35; } .author{font-size:12px; color:#6b7280; margin-top:4px} .ideal{ margin: 16px 0 0; background: rgba(15,19,26,.78); color:#fff; border-radius: 16px; padding: 18px 14px; box-shadow: var(--shadow2); } .ideal h3{ margin:0 0 10px; font-family: Georgia, "Times New Roman", Times, serif; letter-spacing:.2px; } .checks{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; opacity:.92; font-size: 13px; } .checks span::before{ content:"✓"; margin-right:8px; color:#d9b46c; font-weight:900; } .footer-cta{ display:flex; justify-content:center; margin-top: 14px; } .contact{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; padding: 12px 0 10px; color: rgba(255,255,255,.88); font-size: 12.5px; opacity: .92; } .contact a{opacity:.95} .contact a:hover{opacity:1; text-decoration:underline} /* ============================= Professional site footer ============================= */ .site-footer{ margin-top: 54px; background: #0b0f14; color: rgba(255,255,255,.88); border-top: 1px solid rgba(255,255,255,.10); } .site-footer a{ color: rgba(255,255,255,.88); } .site-footer a:hover{ color:#fff; text-decoration:underline; } .sf-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; padding: 42px 0 22px; } .sf-logo{ display:inline-block; font-family: "Playfair Display", Georgia, serif; font-size: 20px; font-weight: 800; letter-spacing: .2px; color:#fff; } .sf-tag{ margin: 10px 0 14px; color: rgba(255,255,255,.72); line-height:1.45; max-width: 44ch; } .sf-pills{ display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 12px; } .sf-pill{ display:inline-flex; align-items:center; gap:8px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); text-decoration:none; font-weight: 800; font-size: 13px; } .sf-pill:hover{ background: rgba(255,255,255,.10); text-decoration:none; } .sf-icon{ width: 16px; height: 16px; display:inline-block; } .sf-icon svg{ width:100%; height:100%; display:block; fill: currentColor; opacity:.95; } .sf-meta{ display:grid; gap:8px; font-size: 13px; color: rgba(255,255,255,.74); } .sf-meta > div{ display:flex; align-items:center; gap:8px; } .sf-meta a{ color: rgba(255,255,255,.86); } .sf-col h4{ margin: 4px 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.78); } .sf-col a{ display:block; padding: 6px 0; font-size: 14px; } .sf-pay{ margin-top: 10px; } .sf-pay-title{ font-size: 12px; color: rgba(255,255,255,.62); margin-bottom: 8px; } .sf-pay-badges{ display:flex; gap:8px; flex-wrap:wrap; } .sf-badge{ font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); } .sf-bottom{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 16px 0 26px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.66); font-size: 13px; } .sf-bottom-links{ display:flex; align-items:center; gap:10px; } .sf-dot{ opacity:.6; } /* Property page footer: light variant to match Airbnb-like layout */ .page-property .site-footer{ background:#fff; color: rgba(17,24,39,.82); border-top: 1px solid rgba(17,24,39,.10); } .page-property .site-footer a{ color: rgba(17,24,39,.80); } .page-property .site-footer a:hover{ color:#111827; } .page-property .sf-logo{ color:#111827; } .page-property .sf-tag{ color: rgba(17,24,39,.64); } .page-property .sf-pill{ border: 1px solid rgba(17,24,39,.12); background: rgba(17,24,39,.04); } .page-property .sf-pill:hover{ background: rgba(17,24,39,.07); } .page-property .sf-col h4{ color: rgba(17,24,39,.62); } .page-property .sf-badge{ border: 1px solid rgba(17,24,39,.12); background: rgba(17,24,39,.04); color: rgba(17,24,39,.72); } .page-property .sf-bottom{ border-top: 1px solid rgba(17,24,39,.10); color: rgba(17,24,39,.60); } .bottom-bar{ display:none; position: fixed; left: 0; right:0; bottom:0; z-index: 80; background: rgba(9,12,16,.82); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.10); padding: 10px 0; } .bottom-bar .inner{ width:min(1060px, 92vw); margin:0 auto; display:flex; gap:10px; justify-content:space-between; } .btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding: 10px 10px; border-radius: 10px; font-weight: 800; font-size: 13px; color:#fff; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 20px rgba(0,0,0,.20); } .btn-blue{background: linear-gradient(180deg,#2563eb,#1e40af)} .btn-green{background: linear-gradient(180deg,#22c55e,#15803d)} .btn-gold{background: linear-gradient(180deg,var(--gold1),var(--gold2))} .btn:hover{transform: translateY(-1px)} .spacer-bottom{height: 0} /* Property page */ .grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items:start; } .panel{ background: rgba(255,255,255,.74); border: 1px solid rgba(17,24,39,.08); border-radius: 16px; box-shadow: var(--shadow2); overflow:hidden; } .panel .pad{padding: 14px} .gallery{ display:grid; grid-template-columns: 1.2fr 1fr; gap:10px; } .gallery .big{ border-radius: 14px; overflow:hidden; background:#e5e7eb; min-height: 220px; } .gallery .big img{width:100%;height:100%;object-fit:cover;display:block} .gallery .small{ display:grid; grid-template-columns: 1fr; gap:10px; } .gallery .small .img{ border-radius: 14px; overflow:hidden; background:#e5e7eb; min-height: 103px; } .gallery .small img{width:100%;height:100%;object-fit:cover;display:block} .ul{ margin:0; padding-left: 18px; font-size: 13px; color:#374151; } .ul li{margin: 6px 0} .muted{color: var(--muted); font-size: 12.5px} @media (max-width: 900px){ .cards{grid-template-columns: repeat(2, 1fr)} .grid{grid-template-columns: 1fr} .hero{min-height: 520px} .bottom-bar{display:block} .spacer-bottom{height: 86px} } @media (max-width: 520px){ .cards{grid-template-columns: 1fr} .hero .content{padding: 48px 18px 22px} .bottom-bar .inner{gap:8px} .btn{font-size: 12.5px; padding: 10px 8px} } /* --- NO-CROP responsive hero (image keeps full aspect ratio) --- */ .hero{ padding:0; min-height:unset; background:#0b0f14; } .hero-media{ width:100%; height:auto; /* key: no crop */ display:block; max-height:680px; /* keeps hero from becoming gigantic */ object-fit:contain; /* never crop */ background:#0b0f14; } .hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45) 40%, rgba(0,0,0,.55)); pointer-events:none; } .hero-inner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:110px 0 70px; text-align:left; z-index:10; } @media (max-width: 920px){ .hero-inner{padding:96px 0 62px;} .hero-media{max-height:620px;} } @media (max-width: 520px){ .hero-media{max-height:560px;} } /* Card images no-crop */ .img-contain{ width:100%; height:auto; display:block; object-fit:contain; background:#0b0f14; } /* --- Airbnb-like media (no distortion, consistent size) --- */ .prop-media{ border-radius: 18px 18px 0 0; overflow:hidden; background:#0b0f14; aspect-ratio: 16 / 10; /* consistent card height */ } .prop-media img{ width:100%; height:100%; display:block; object-fit: cover; /* fills box without distortion (may crop a bit) */ object-position: center; } /* Airbnb-style gallery grid on property page (1 big + 4 small) */ .gallery-airbnb{ display:grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap:10px; border-radius: 18px; overflow:hidden; background:#0b0f14; } .gallery-airbnb a, .gallery-airbnb button{ position:relative; display:block; width:100%; height:100%; } .gallery-airbnb .g-main{ grid-column: 1 / 2; grid-row: 1 / 3; aspect-ratio: 16 / 10; } .gallery-airbnb .g-small{ aspect-ratio: 16 / 10; } .gallery-airbnb img{ width:100%; height:100%; object-fit: cover; object-position:center; display:block; } .gallery-airbnb .g-overlay-btn{ position:absolute; right:12px; bottom:12px; background:#fff; color:#111827; border:1px solid rgba(0,0,0,.15); border-radius: 999px; padding: 10px 12px; font-weight: 700; font-size: 14px; display:inline-flex; align-items:center; gap:8px; box-shadow: 0 10px 20px rgba(0,0,0,.25); cursor:pointer; } .gallery-airbnb .g-overlay-btn svg{ width:18px; height:18px; } /* All photos section (hidden until open) */ .all-photos{ margin-top: 16px; display:none; } .all-photos.open{ display:block; } .all-photos-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; } .all-photos-grid img{ width:100%; height:220px; object-fit: cover; border-radius: 14px; display:block; } @media (max-width: 980px){ .gallery-airbnb{ grid-template-columns: 1fr 1fr; grid-template-rows:auto auto auto; } .gallery-airbnb .g-main{ grid-column:1 / 3; grid-row:1 / 2; aspect-ratio: 16 / 10; } .all-photos-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px){ .all-photos-grid{ grid-template-columns: 1fr; } .all-photos-grid img{ height: 220px; } } /* ---------------------------- Home: Hero Slider (Belmonte-style) ---------------------------- */ .layout-hero .topbar{ position: absolute; top:0; left:0; right:0; } .topbar--overlay{ position:absolute; top:0; left:0; right:0; background: transparent; border-bottom: 0; backdrop-filter: none; } .topbar--overlay .inner{ padding: 18px 0; } .topbar--overlay .brand{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; font-size: 18px; letter-spacing: .9px; text-transform: uppercase; border: 2px solid rgba(255,255,255,.88); padding: 10px 12px; line-height: 1; } .topbar--overlay .menu{ color: rgba(255,255,255,.92); } .topbar--overlay .menu a{ opacity: .92; } .topbar--overlay .menu a:hover{ opacity: 1; } .hero-full{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0 !important; } .hero-slider{ position: relative; height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh; overflow: hidden; box-shadow: none; margin: 0 0 22px; background: #111827; } @media (min-width: 992px){ .hero-slider{ height: min(96vh, 1020px); min-height: 780px; } } .hero-slider .hs-track{ position: relative; height: 100%; } .hero-slider .hs-slide{ position:absolute; inset:0; opacity:0; transform: scale(1.02); transition: opacity .6s ease, transform 1.2s ease; pointer-events: none; z-index: 1; } .hero-slider .hs-slide::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(10,12,15,.70) 0%, rgba(10,12,15,.34) 45%, rgba(10,12,15,.18) 100%), var(--hs-img, radial-gradient(circle at 60% 40%, #374151 0%, #111827 55%, #0b1020 100%)); background-size: cover; background-position: center; filter: contrast(1.04) saturate(1.05); } .hero-slider .hs-slide.is-active{ opacity:1; transform: scale(1.0); pointer-events:auto; z-index: 2; } .hero-slider .hs-shade{ display:none; } .hero-slider .hs-center{ position: relative; height:100%; display:grid; /* center vertically but shift a bit to the left for a more “luxury editorial” look */ place-items: center start; padding: 100px clamp(18px, 6vw, 80px) 28px; } .hero-slider .hs-card{ width: min(780px, 94vw); background: rgba(17,24,39,.55); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 30px 34px 26px; text-align:left; box-shadow: 0 18px 50px rgba(0,0,0,.28); } .hero-slider .hs-title{ color:#fff; font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: clamp(36px, 6.0vw, 68px); line-height: 1.05; margin: 0; letter-spacing: .6px; text-shadow: 0 12px 30px rgba(0,0,0,.38); } .hero-slider .hs-sub{ color: rgba(255,255,255,.90); font-size: clamp(15px, 2.5vw, 18px); line-height: 1.45; margin-top: 12px; max-width: 56ch; } .hero-slider .hs-cta{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 18px; border-radius: 2px; margin-top: 16px; background: rgba(140, 96, 33, .90); color:#fff; font-weight: 800; border: 1px solid rgba(255,255,255,.20); } .hero-slider .hs-cta:hover{ filter: brightness(1.05); transform: translateY(-1px); } .hero-slider .hs-arrow{ position:absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.28); color:#fff; font-size: 26px; display:grid; place-items:center; cursor:pointer; z-index: 3; } .hero-slider .hs-arrow:hover{ background: rgba(0,0,0,.38); } .hero-slider .hs-arrow.prev{ left: 16px; } .hero-slider .hs-arrow.next{ right: 16px; } .hero-slider .hs-dots{ position:absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display:flex; gap: 8px; z-index: 3; } .hero-slider .hs-dot{ width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.18); cursor:pointer; } .hero-slider .hs-dot.is-active{ background: rgba(255,255,255,.82); } @media (max-width: 560px){ .topbar--overlay .menu{ display:none; } .hero-slider .hs-center{ padding-top: 88px; } .hero-slider{ min-height: 560px; } } /* ===== Full-bleed HERO fix (so it doesn't look "fixed width") ===== */ body{ overflow-x:hidden; } .layout-hero .hero-slider.hero-full{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; } @supports (width: 100dvw){ .layout-hero .hero-slider.hero-full{ width: 100dvw; margin-left: calc(50% - 50dvw); margin-right: calc(50% - 50dvw); } } .layout-hero .hero-slider .hs-card{ margin: 0 auto; } /* ===== Wider Testimonials + Professional Card Slider ===== */ .section-wide{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .section-wide .wide-inner{ width: min(1240px, 96vw); margin: 0 auto; } .cards-slider{ position: relative; margin-top: 10px; } .cards-slider .cs-viewport{ overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cards-slider .cs-viewport::-webkit-scrollbar{ display:none; } .cards-slider .cs-track{ display:flex; gap: 16px; padding: 8px 10px 18px; } .cards-slider .cs-slide{ scroll-snap-align: center; flex: 0 0 calc((100% - 32px) / 3); min-width: 280px; } @media (max-width: 980px){ .cards-slider .cs-slide{ flex-basis: calc((100% - 16px) / 2); } } @media (max-width: 640px){ .cards-slider .cs-slide{ flex-basis: 86%; } } .cards-slider .cs-arrow{ position:absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(17,24,39,.10); background: rgba(255,255,255,.86); box-shadow: var(--shadow2); display:grid; place-items:center; cursor:pointer; z-index: 5; font-size: 26px; line-height: 1; color:#111827; } .cards-slider .cs-arrow.prev{ left: 6px; } .cards-slider .cs-arrow.next{ right: 6px; } .cards-slider .cs-arrow:hover{ filter: brightness(1.02); transform: translateY(-50%) translateY(-1px); } @media (max-width: 640px){ .cards-slider .cs-arrow{ display:none; } } .cards-slider .cs-dots{ display:flex; gap: 8px; justify-content:center; margin: 2px 0 0; } .cards-slider .cs-dot{ width: 9px; height: 9px; border-radius: 999px; border: 1px solid rgba(17,24,39,.20); background: rgba(17,24,39,.12); cursor:pointer; } .cards-slider .cs-dot.is-active{ background: rgba(17,24,39,.32); } .testi-card{ background: rgba(255,255,255,.80); border: 1px solid rgba(17,24,39,.09); border-radius: 18px; box-shadow: var(--shadow2); padding: 16px 16px 14px; position: relative; overflow:hidden; } .testi-card::before{ content:""; position:absolute; inset:-40px -60px auto auto; width: 180px; height: 180px; background: radial-gradient(circle at 30% 30%, rgba(201,161,90,.22), rgba(201,161,90,0) 62%); pointer-events:none; } .testi-head{ display:flex; align-items:center; gap: 12px; margin-bottom: 10px; } .testi-avatar{ width: 46px; height: 46px; border-radius: 999px; object-fit: cover; background:#e5e7eb; border: 1px solid rgba(17,24,39,.10); } .testi-meta{ flex: 1; min-width: 0; } .testi-name{ font-weight: 900; color:#111827; line-height: 1.1; } .testi-submeta{ font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .testi-rating{ text-align:right; flex: 0 0 auto; } .testi-rating .stars{ font-size: 12px; letter-spacing: 1px; } .testi-rating .score{ font-size: 12px; font-weight: 900; color:#111827; margin-top: 2px; } .testi-text{ font-size: 13px; color:#374151; line-height: 1.45; position: relative; } .testi-text::before{ content:"\201C"; font-family: Georgia, "Times New Roman", Times, serif; font-size: 44px; line-height: 1; color: rgba(201,161,90,.55); position:absolute; left: -2px; top: -18px; } /* ---------------------------- Property: Airbnb-style meta + description blocks ---------------------------- */ .ab-meta{ display:flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-weight: 700; } .ab-meta .dot{ opacity: .55; } .ab-photos-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 10px; } .airbnb-desc{ background: rgba(255,255,255,.78); border: 1px solid rgba(17,24,39,.09); border-radius: 14px; padding: 14px 14px 12px; } .airbnb-desc .ab-head{ margin-bottom: 8px; } .airbnb-desc .ab-summary{ font-size: 14px; line-height: 1.55; color:#111827; padding: 10px 0 12px; border-bottom: 1px solid rgba(17,24,39,.08); margin-bottom: 10px; } .ab-block{ padding: 10px 0 12px; border-bottom: 1px solid rgba(17,24,39,.08); } .ab-block h3{ font-size: 16px; margin: 0 0 8px; font-weight: 900; color:#111827; } .ab-body{ font-size: 14px; line-height: 1.55; color:#374151; } .ab-body.clamp{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp, 6); overflow: hidden; } .ab-body.expanded{ display:block; -webkit-line-clamp: unset; overflow: visible; } .ab-more{ margin-top: 8px; background: transparent; border: 0; color: #111827; font-weight: 900; cursor:pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; } .ab-more:hover{ opacity: .85; } /* Reviews / Guest favorite summary */ .abp-reviews{ padding: 22px 0 4px; } .abp-rev-hero{ padding-top: 6px; } .abp-rev-top{ display:flex; align-items:center; justify-content:center; gap: 14px; } .abp-rev-laurel{ font-size: 26px; opacity: .85; } .abp-rev-score{ font-size: 56px; font-weight: 900; line-height: 1; color:#111827; } .abp-rev-title{ margin-top: 8px; font-weight: 900; font-size: 18px; text-align:center; color:#111827; } .abp-rev-sub{ margin: 6px auto 0; max-width: 560px; text-align:center; font-size: 13px; color:#6b7280; line-height: 1.35; } .abp-rev-grid{ margin-top: 22px; display:grid; grid-template-columns: 240px 1fr; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; } .abp-rev-left{ padding: 14px 14px; border-right: 1px solid #e5e7eb; } .abp-rev-left-title{ font-weight: 900; font-size: 12px; color:#111827; margin-bottom: 10px; } .abp-rev-row{ display:flex; align-items:center; gap: 10px; margin: 7px 0; } .abp-rev-star{ width: 18px; font-size: 12px; color:#111827; font-weight: 900; } .abp-rev-track{ height: 4px; background:#e5e7eb; border-radius: 999px; flex: 1 1 auto; overflow:hidden; } .abp-rev-fill{ height: 100%; background:#111827; } .abp-rev-cats{ display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } .abp-rev-cat{ padding: 14px 14px; border-left: 1px solid #e5e7eb; min-width: 0; } .abp-rev-cat-title{ font-size: 12px; color:#6b7280; font-weight: 800; } .abp-rev-cat-score{ margin-top: 6px; font-size: 16px; font-weight: 900; color:#111827; } .abp-rev-icon{ margin-top: 12px; font-size: 18px; opacity: .9; } @media (max-width: 1100px){ .abp-rev-grid{ grid-template-columns: 1fr; } .abp-rev-left{ border-right: 0; border-bottom: 1px solid #e5e7eb; } .abp-rev-cats{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .abp-rev-cat{ border-left: 0; border-top: 1px solid #e5e7eb; } } /* Individual review cards (Airbnb-like) */ .abp-rev-list{ margin-top: 22px; } .abp-rev-cards{ margin-top: 18px; display:grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; } .abp-rcard{ display:flex; flex-direction:column; gap: 10px; height:100%; min-height: 210px; } .abp-rcard-head{ display:flex; align-items:center; gap: 12px; } .abp-ravatar{ width:44px; height:44px; border-radius: 999px; overflow:hidden; background:#111827; color:#fff; font-weight: 900; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .abp-ravatar img{ width:100%; height:100%; object-fit: cover; display:block; } .abp-rname{ font-weight: 900; color:#111827; } .abp-rsub{ margin-top: 2px; font-size: 12px; color:#6b7280; } .abp-rmeta{ display:flex; align-items:center; gap: 8px; font-size: 12px; } .abp-rstars{ letter-spacing: 1px; color:#111827; } .abp-rdot{ color:#9ca3af; } .abp-rmeta-txt{ color:#6b7280; } .abp-rtext{ margin: 0; color:#111827; font-size: 14px; line-height: 1.5; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow:hidden; } .abp-rcard.is-open .abp-rtext{ display:block; -webkit-line-clamp: unset; } /* Keep "Show more" aligned to bottom of each card */ .abp-rmore{ margin-top:auto; align-self:flex-start; border:0; background:transparent; padding:0; cursor:pointer; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; color:#111827; } .abp-rmore:hover{ opacity:.85; } .abp-rev-allbtn{ margin-top: 18px; border:1px solid #111827; background:#fff; color:#111827; font-weight: 900; padding: 12px 18px; border-radius: 999px; cursor:pointer; } .abp-rev-allbtn:hover{ background: rgba(17,24,39,.04); } /* Review highlight chips (under the rating summary) */ .abp-hchips{ margin-top: 16px; display:flex; align-items:center; gap: 10px; } .abp-hchips-nav{ width: 36px; height: 36px; border-radius: 999px; border: 1px solid #e5e7eb; background:#fff; cursor:pointer; font-size: 18px; line-height: 1; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 18px rgba(17,24,39,.08); } .abp-hchips-nav:disabled{ opacity: .4; cursor: default; box-shadow: none; } .abp-hchips-track{ flex: 1 1 auto; display:flex; gap: 10px; overflow:auto; scroll-behavior:smooth; padding: 2px 2px; -ms-overflow-style: none; scrollbar-width: none; } .abp-hchips-track::-webkit-scrollbar{ display:none; } .abp-chip{ flex: 0 0 auto; display:inline-flex; align-items:center; gap: 10px; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 999px; background:#fff; color:#111827; font-weight: 900; font-size: 13px; box-shadow: 0 6px 18px rgba(17,24,39,.06); cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .abp-chip:hover{ border-color: #d1d5db; box-shadow: 0 10px 24px rgba(17,24,39,.10); transform: translateY(-1px); } .abp-chip:focus{ outline: 2px solid rgba(17,24,39,.25); outline-offset: 2px; } .abp-chip:active{ transform: translateY(0px); } .abp-chip-ic{ width: 18px; height: 18px; display:inline-flex; align-items:center; justify-content:center; } .abp-chip-num{ color:#6b7280; font-weight: 900; } @media (max-width: 560px){ .abp-hchips-nav{ display:none; } .abp-chip{ padding: 10px 12px; } } /* Reviews modal overrides */ .abp-modal-card.abp-revmodal-card{ width: min(920px, 96vw); } .abp-revmodal-list{ display:grid; grid-template-columns: 1fr; gap: 18px; } .abp-revmodal-list .abp-rcard{ min-height: unset; } .abp-revmodal-list .abp-rmore{ display:none !important; } .abp-revmodal-list .abp-rtext{ display:block; -webkit-line-clamp: unset; overflow:visible; } /* Chip modal helper line */ .abp-chipmeta{ color:#6b7280; font-size: 13px; margin: 2px 0 14px; } .abp-chipempty{ padding: 18px; border: 1px solid #e5e7eb; border-radius: 14px; background:#fff; color:#111827; } @media (max-width: 920px){ .abp-rev-cards{ grid-template-columns: 1fr; gap: 18px; } .abp-rcard{ min-height: unset; } } /* Location / Map (Airbnb-like) */ .abp-location{ padding: 22px 0 8px; } .abp-loc-sub{ margin-top: 8px; color:#374151; font-size: 14px; } .abp-map{ margin-top: 14px; border-radius: 16px; overflow: hidden; background: #f3f4f6; border: 1px solid #e5e7eb; } .abp-map iframe{ width: 100%; height: 420px; border: 0; display: block; } @media (max-width: 920px){ .abp-map iframe{ height: 320px; } } /* Meet your host (Airbnb-like) */ .abp-meet{ padding: 22px 0 8px; } .abp-meet-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items:start; } .abp-hostcard{ border: 1px solid #e5e7eb; border-radius: 18px; background:#fff; box-shadow: 0 12px 30px rgba(0,0,0,.10); } .abp-hostcard-inner{ padding: 34px 22px; display:flex; flex-direction:column; align-items:center; text-align:center; } .abp-hostcard-photo{ position:relative; width: 92px; height: 92px; border-radius: 999px; overflow:hidden; background:#e5e7eb; } .abp-hostcard-photo img{ width:100%; height:100%; object-fit: cover; display:block; } .abp-hostcard-badge{ position:absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 999px; background: #e11d48; /* Airbnb-ish pink */ color:#fff; border: 3px solid #fff; display:flex; align-items:center; justify-content:center; font-weight: 900; font-size: 14px; line-height: 1; } .abp-hostcard-name{ margin-top: 14px; font-size: 38px; font-weight: 900; letter-spacing:-.6px; color:#111827; } .abp-hostcard-sub{ margin-top: 6px; font-size: 13px; color:#6b7280; } .abp-meet-side{ padding-top: 8px; } .abp-cohosts-title{ font-weight: 900; font-size: 16px; color:#111827; margin-bottom: 12px; } .abp-cohost-row{ display:flex; align-items:center; gap: 12px; } .abp-cohost-avatar{ width: 38px; height: 38px; border-radius: 999px; overflow:hidden; background:#e5e7eb; flex:0 0 auto; } .abp-cohost-avatar img{ width:100%; height:100%; object-fit: cover; display:block; } .abp-cohost-name{ font-weight: 800; color:#111827; } .abp-msgbtn{ margin-top: 16px; display:inline-flex; align-items:center; justify-content:center; padding: 12px 18px; border-radius: 12px; background: #f3f4f6; border: 1px solid #e5e7eb; color:#111827; font-weight: 900; text-decoration:none; width: max-content; } .abp-msgbtn:hover{ background: rgba(17,24,39,.06); } .abp-cohostsvc{ margin-top: 18px; border: 1px solid #e5e7eb; border-radius: 16px; background:#fff; padding: 16px 16px; } .abp-cohostsvc-title{ font-weight: 900; color:#111827; } .abp-cohostsvc-sub{ margin-top: 6px; color:#6b7280; font-size: 13px; line-height: 1.45; } .abp-cohostsvc-btn{ margin-top: 12px; display:inline-flex; align-items:center; justify-content:center; padding: 10px 14px; border-radius: 999px; border: 1px solid #111827; background:#fff; color:#111827; font-weight: 900; text-decoration:none; } .abp-cohostsvc-btn:hover{ background: rgba(17,24,39,.04); } .abp-paynote{ margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5e7eb; display:flex; gap: 12px; align-items:flex-start; color:#374151; font-size: 13px; line-height: 1.45; } .abp-paynote-ico{ width: 18px; height: 18px; display:flex; align-items:center; justify-content:center; } /* Things to know (Airbnb-like) */ .abp-ttk{ padding: 22px 0 10px; } .abp-ttk-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 44px; align-items:start; } .abp-ttk-item{ display:flex; gap: 14px; align-items:flex-start; } .abp-ttk-ico{ width: 22px; height: 22px; color:#111827; flex:0 0 auto; margin-top: 2px; } .abp-ttk-title{ font-weight: 900; color:#111827; } .abp-ttk-body{ margin-top: 6px; color:#6b7280; font-size: 13px; line-height: 1.45; } .abp-ttk-link{ display:inline-flex; margin-top: 8px; color:#111827; font-weight: 900; font-size: 13px; text-decoration: underline; } .abp-ttk-link:hover{ opacity: .8; } .abp-ttk-modal{ white-space: pre-line; color:#374151; font-size: 14px; line-height: 1.5; } @media (max-width: 920px){ .abp-ttk-grid{ grid-template-columns: 1fr; gap: 18px; } } @media (max-width: 920px){ .abp-meet-grid{ grid-template-columns: 1fr; gap: 18px; } .abp-hostcard-name{ font-size: 32px; } } /* --- Airbnb property cards --- */ .ab-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; align-items:start; } .ab-card{ display:block; text-decoration:none; color:inherit; } .ab-media{ position:relative; border-radius:18px; overflow:hidden; background:#0b0f14; aspect-ratio: 1 / 1; } .ab-media img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; transform:translateZ(0); transition: transform .25s ease; } .ab-card:hover .ab-media img{ transform: scale(1.03); } .ab-badge{ position:absolute; left:12px; top:12px; background:#fff; color:#111827; font-weight:800; font-size:12px; border-radius:999px; padding:6px 10px; box-shadow:0 4px 14px rgba(0,0,0,.12); } .ab-heart{ position:absolute; right:10px; top:10px; width:38px; height:38px; border-radius:999px; border:0; background: rgba(0,0,0,.10); backdrop-filter: blur(6px); display:grid; place-items:center; cursor:pointer; } .ab-heart svg{ width:20px; height:20px; fill: transparent; stroke:#fff; stroke-width:2; } .ab-heart:hover{ background: rgba(0,0,0,.18); } .ab-heart.is-on svg{ fill:#ff385c; stroke:#ff385c; } .ab-body{ padding-top:10px; } .ab-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .ab-loc{ font-weight:700; font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ab-rating{ font-weight:700; font-size:14px; line-height:1.2; white-space:nowrap; } .ab-star{ margin-right:4px; } .ab-sub{ margin-top:4px; font-size:13px; color:#6b7280; line-height:1.25; } @media (max-width: 520px){ .ab-grid{ grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:14px; } .ab-media{ border-radius:16px; } } /* Ensure marketing/content links are always visible (avoid 'too light' links) */ .richtext a{ color:#0b5ed7; text-decoration:underline; font-weight:700; } .richtext a:hover{ text-decoration:underline; } .coh2-alert{border:1px solid rgba(15,23,42,.18);background:#fff;padding:10px 12px;border-radius:12px;font-weight:700} .coh2-alert.ok{border-color:rgba(34,197,94,.35)} .coh2-alert.bad{border-color:rgba(239,68,68,.35)} /* ------------------------------------------------------ Booking calendar modal hard-fix - Prevents "distorted" overlays when other UI has high z-index - Ensures the modal always sits above nav/hero/floating widgets - Makes the backdrop a bit more opaque + optional blur ------------------------------------------------------ */ .abp-datepop{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(15,23,42,.68); z-index: 2147483647; isolation: isolate; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .abp-datepop.is-open{ display:flex; } .abp-datepop-card{ width: min(900px, calc(100vw - 36px)); max-height: calc(100vh - 36px); overflow: auto; -webkit-overflow-scrolling: touch; } /* On narrower screens, stack months so nothing overflows */ @media (max-width: 980px){ .abp-datepop .cal-months{ grid-template-columns: 1fr; } }