/* Metric-matched fallbacks: Georgia/Arial (Windows, Mac) and Noto Serif/Roboto (Android)
scaled to Newsreader/Hanken Grotesk widths (measured in Chromium, 2026-09-30), so the
async web-font swap doesn't reflow headings and shift the page (CLS). */
@font-face{font-family:"Newsreader Fallback G";src:local("Georgia");font-weight:400;size-adjust:101.3%;ascent-override:0.73%;descent-override:0.27%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback G";src:local("Georgia");font-weight:500;size-adjust:104.24%;ascent-override:0.71%;descent-override:0.26%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback G";src:local("Georgia Bold"),local("Georgia-Bold");font-weight:600;size-adjust:92.42%;ascent-override:0.80%;descent-override:0.29%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback N";src:local("Noto Serif"),local("NotoSerif-Regular");font-weight:400;size-adjust:95.27%;ascent-override:0.78%;descent-override:0.28%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback N";src:local("Noto Serif Medium"),local("NotoSerif-Medium"),local("Noto Serif"),local("NotoSerif-Regular");font-weight:500;size-adjust:98.03%;ascent-override:0.75%;descent-override:0.28%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback N";src:local("Noto Serif SemiBold"),local("NotoSerif-SemiBold"),local("Noto Serif Bold"),local("NotoSerif-Bold");font-weight:600;size-adjust:95.34%;ascent-override:0.78%;descent-override:0.28%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback A";src:local("Arial"),local("ArialMT");font-weight:400;size-adjust:99.71%;ascent-override:1.00%;descent-override:0.30%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback A";src:local("Arial"),local("ArialMT");font-weight:500;size-adjust:99.7%;ascent-override:1.00%;descent-override:0.30%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback A";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600;size-adjust:94.66%;ascent-override:1.06%;descent-override:0.32%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback A";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700;size-adjust:95.18%;ascent-override:1.05%;descent-override:0.32%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback R";src:local("Roboto"),local("Roboto-Regular");font-weight:400;size-adjust:101.0%;ascent-override:0.99%;descent-override:0.30%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback R";src:local("Roboto Medium"),local("Roboto-Medium");font-weight:500;size-adjust:100.06%;ascent-override:1.00%;descent-override:0.30%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback R";src:local("Roboto Medium"),local("Roboto-Medium");font-weight:600;size-adjust:99.95%;ascent-override:1.00%;descent-override:0.30%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback R";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:700;size-adjust:100.5%;ascent-override:1.00%;descent-override:0.30%;line-gap-override:0%}
:root {
--coral: #ff5a5f;
--coral-dark: #d6353a;
--coral-soft: #ff8a8d;
--ink: #1d2327;
--ink-2: #14181b;
--paper: #fbfaf8;
--sand: #f1ece4;
--card: #ffffff;
--muted: #6e6a64;
--line: #e7e3dc;
--radius: 14px;
--wrap: 1120px;
--font-serif: "Newsreader", "Newsreader Fallback G", "Newsreader Fallback N", Georgia, "Times New Roman", serif;
--font-sans: "Hanken Grotesk", "Hanken Grotesk Fallback A", "Hanken Grotesk Fallback R", -apple-system, system-ui, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
/* clip, not hidden: stops sideways scroll without making a
scroll container (which silently breaks position:sticky on the
header — badly so under the logged-in admin bar). !important because
the Homeo parent theme still sets `body{overflow-x:hidden}` on pages
this theme doesn't fully own (regular pages, Elementor pages), and
its stylesheet loads after this one — without !important that hidden
wins and the header renders 32px low on those pages only. */
overflow-x: clip !important;
max-width: 100%;
}
body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: var(--coral-dark);
}
h1,
h2,
h3,
h4 {
font-family: var(--font-serif);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
color: var(--ink);
}
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
max-width: 100%;
display: block;
}
svg {
display: block;
}
/* ---------- layout ---------- */
.wrap,
.container {
max-width: var(--wrap);
margin: 0 auto;
padding: 0 40px;
}
.section {
padding-top: 68px;
padding-bottom: 68px;
}
.section-tight {
padding-top: 44px;
padding-bottom: 44px;
}
.band-dark {
background: var(--ink);
color: #fff;
}
.band-dark h1,
.band-dark h2,
.band-dark h3,
.band-dark h4 {
color: #fff;
}
.band-sand {
background: var(--sand);
}
.grid {
display: grid;
gap: 24px;
}
/* bare .grid (used by the properties list) flows into responsive columns */
.grid:not([class*="grid-"]) {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-6 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
@media (max-width: 900px) {
.wrap,
.container {
padding: 0 20px;
}
.grid-3,
.grid-4,
.grid-6 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split {
grid-template-columns: 1fr;
gap: 32px;
}
.section {
padding-top: 48px;
padding-bottom: 48px;
}
}
@media (max-width: 700px) {
/* .grid-2 (e.g. homepage "Two ways to work with us") had no responsive
rule — cards stayed 50/50 and crushed on phones. */
.grid-2 {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.grid-3,
.grid-4,
.grid-6 {
grid-template-columns: 1fr;
}
}
/* ---------- home hero ---------- */
.hero {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 56px;
align-items: center;
padding-top: 72px;
padding-bottom: 80px;
}
/* Hero heading hierarchy — H1 (.h-hero) -> tagline -> lead body ->
closing line. 2026-09-12. */
.hero-tagline {
font-size: clamp(17px, 1.7vw, 20px);
font-weight: 700;
color: var(--ink);
line-height: 1.35;
max-width: 34rem;
}
.hero-close {
color: var(--ink);
font-weight: 500;
}
.hero-trust span {
line-height: 1.3;
}
.hero-art {
position: relative;
background: var(--sand);
border-radius: 18px;
height: 460px;
overflow: hidden;
}
.hero-art-bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* soft scrim so the floating listing card stays readable on the photo */
.hero-art::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(29, 35, 39, 0) 45%, rgba(29, 35, 39, 0.3) 100%);
pointer-events: none;
}
.hero-art .card {
z-index: 2;
}
/* ---------- smart search bar ---------- */
.smartsearch.ss-hero {
margin-top: 32px;
}
.ss-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 0 8px 0 16px;
min-height: 58px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 12px 36px rgba(29, 35, 39, 0.07);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ss-bar:focus-within {
border-color: var(--coral);
box-shadow: 0 12px 36px rgba(255, 90, 95, 0.14);
}
.ss-bar input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 15px;
color: var(--ink);
appearance: none;
}
.ss-bar input::placeholder {
color: var(--muted);
}
.ss-bar .ss-go {
min-height: 44px;
padding: 0 20px;
flex-shrink: 0;
gap: 7px;
}
.ss-page .ss-bar {
box-shadow: none;
}
.ss-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 14px;
}
.ss-chips-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
/* Force its own line in the wrapping flex row — otherwise, once the
.ss-chip links wrap past the first row, later rows start indented
under "Try" instead of flush-left like the first. 2026-09-12. */
flex-basis: 100%;
margin-bottom: 2px;
}
.ss-chip {
font: inherit;
font-size: 12.5px;
color: var(--ink);
background: var(--sand);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 12px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.ss-chip:hover {
background: #fff;
border-color: var(--coral);
}
/* understood-filter pills on /properties */
.fpills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 18px 0 6px;
}
.fpills-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.fpill {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
color: var(--ink);
background: #fff5f5;
border: 1px solid #f4d9d9;
border-radius: 999px;
padding: 5px 12px;
}
.fpill:hover {
border-color: var(--coral);
}
.fpill span {
color: var(--coral-dark);
font-weight: 700;
}
.fpills-clear {
font-size: 13px;
}
.filters-manual {
margin-top: 14px;
}
.filters-manual > summary {
font-size: 13px;
font-weight: 600;
color: var(--coral-dark);
cursor: pointer;
list-style: none;
padding: 4px 0;
}
.filters-manual > summary::-webkit-details-marker {
display: none;
}
.filters-manual > summary::before {
content: "+ ";
}
.filters-manual[open] > summary::before {
content: "− ";
}
.filters-manual .filters {
margin-top: 12px;
}
@media (max-width: 980px) {
.hero {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 44px;
padding-bottom: 52px;
}
.hero-art {
height: 280px;
}
}
@media (max-width: 620px) {
.hero-art {
display: none;
}
.ss-bar .ss-go span {
display: none;
}
.ss-bar .ss-go {
padding: 0 14px;
}
}
/* ---------- type ---------- */
.eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--coral-dark);
}
.band-dark .eyebrow {
color: var(--coral-soft);
}
.muted {
color: var(--muted);
}
.band-dark .muted {
color: rgba(255, 255, 255, 0.66);
}
.h-hero {
font-size: clamp(34px, 5vw, 56px);
}
.h-1 {
font-size: clamp(28px, 3.4vw, 38px);
}
.h-2 {
font-size: clamp(24px, 2.6vw, 30px);
}
.lead {
font-size: 17.5px;
color: var(--muted);
max-width: 34rem;
text-wrap: pretty;
}
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 0 22px;
border-radius: 999px;
font-weight: 600;
font-size: 14.5px;
font-family: inherit;
border: 1px solid transparent;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.btn-coral,
.btn:not(.btn-ink):not(.btn-coral):not(.btn-wa):not(.btn-outline):not(.btn-light) {
background: var(--coral);
color: #fff;
}
.btn-outline {
background: #fff;
color: var(--ink);
border-color: var(--line);
}
.btn-outline:hover {
border-color: var(--coral);
color: var(--coral-dark);
}
.btn-coral:hover {
background: var(--coral-dark);
color: #fff;
}
.btn-ink {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.btn-ink:hover {
background: var(--ink);
color: #fff;
}
.btn-full {
width: 100%;
}
.lnk {
font-weight: 600;
font-size: 14px;
color: var(--coral-dark);
display: inline-flex;
gap: 6px;
align-items: center;
}
/* Toggle buttons ("Read full description", "+N more amenities", "Show all
nearby places") use .lnk but kept the browser's grey button box. */
button.lnk {
background: none;
border: 0;
padding: 4px 0;
font-family: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Land sections below the sticky header + section tabs when scrolled to. */
.detail-grid .psection {
scroll-margin-top: 118px;
}
/* ---------- card ---------- */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.card-pad {
padding: 22px;
}
/* ---------- property card ---------- */
.pcard {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
display: block;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pcard:hover {
box-shadow: 0 12px 30px rgba(29, 35, 39, 0.08);
transform: translateY(-2px);
}
.pcard .thumb {
position: relative;
aspect-ratio: 3 / 2;
background: #ece6db;
}
.pcard .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pcard .badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--coral);
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 4px 9px;
border-radius: 6px;
}
.pcard .body {
padding: 16px 18px 20px;
}
.pcard .price {
font-weight: 700;
color: var(--coral-dark);
font-size: 18px;
}
.pcard .title {
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
margin: 4px 0 2px;
letter-spacing: 0;
}
.pcard .loc,
.pcard .meta {
color: var(--muted);
font-size: 13px;
}
.pcard .meta {
margin-top: 10px;
font-size: 12.5px;
}
/* ---------- header ---------- */
.site-header {
border-bottom: 1px solid var(--line);
background: var(--paper);
position: sticky;
top: 0;
z-index: 30;
transition: transform 0.25s ease;
}
/* Auto-hide on scroll down, reveal on scroll up — mobile only, toggled by
theme.js adding/removing body.hdr-hidden. Reclaims the 74px header band
for content on small screens instead of permanently occupying it. */
body.hdr-hidden .site-header {
transform: translateY(var(--hdr-hide-y, -100%));
}
.site-header .bar {
display: flex;
align-items: center;
gap: 28px;
height: 74px;
/* Wider than the 1120px content column: logo + full 7-item nav + the
search box + Log in / Register / CTA genuinely need more room, and by
a bit more on the Elementor/Homeo templates where the nav renders
wider. A slightly full-width header band keeps everything visible and
identical on every page instead of clipping the CTA inconsistently. */
max-width: 1300px;
}
.brand {
display: flex;
align-items: center;
flex-shrink: 0;
}
.brand img {
display: block;
height: 40px;
width: auto;
}
@media (max-width: 560px) {
.brand img {
height: 34px;
}
}
.site-header .bar > nav {
display: flex;
gap: 20px;
font-size: 14.5px;
font-weight: 500;
flex-shrink: 0; /* nav keeps its width or hides at <=1180 — never squished */
}
.site-header .bar > nav a {
white-space: nowrap;
}
.nav-item {
position: relative;
}
.nav-item > a {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--ink);
}
.nav-caret {
font-size: 10px;
color: var(--muted);
transition: transform 0.15s ease;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret {
transform: rotate(180deg);
}
.nav-sub {
position: absolute;
top: 100%;
left: 0;
padding-top: 14px;
min-width: 190px;
display: none;
flex-direction: column;
z-index: 40;
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub {
display: flex;
}
.nav-sub::before {
content: "";
position: absolute;
top: 14px;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 16px 40px rgba(29, 35, 39, 0.12);
z-index: -1;
}
.nav-sub a {
padding: 9px 12px;
margin: 4px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
color: var(--ink);
white-space: nowrap;
}
.nav-sub a:hover {
background: var(--sand);
color: var(--coral-dark);
}
.nav-cta-post {
color: var(--coral-dark) !important;
font-weight: 700 !important;
transition: color 0.15s ease;
}
.nav-cta-post:hover {
color: var(--coral) !important;
}
.site-header .right {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
flex: 0 1 auto;
min-width: 0;
}
/* Everything in .right holds its size EXCEPT the search box, which
absorbs the slack so the row (logo + full nav + actions) always fits
inside the wrap and "Talk to an advisor" stays put on every template. */
.site-header .right > .login-link,
.site-header .right > .register-link,
.site-header .right > .btn,
.site-header .right > .asraa-mic {
flex-shrink: 0;
}
.site-header .right .btn {
white-space: nowrap;
}
.site-header .right > .searchbox {
flex: 0 1 190px;
min-width: 132px; /* stays a real search field; only gives back slack on tight laptops */
}
.site-header .right > .searchbox input {
flex: 1 1 0;
min-width: 0;
width: auto;
}
.login-link,
.register-link {
white-space: nowrap;
flex-shrink: 0;
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
}
.login-link:hover,
.register-link:hover {
color: var(--coral-dark);
}
.register-link {
padding-left: 14px;
border-left: 1px solid var(--line);
}
.acct-chip {
flex-shrink: 0;
}
.acct-chip > a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
white-space: nowrap;
}
.acct-chip-avatar {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 999px;
background: var(--coral);
color: #fff;
font-weight: 700;
font-size: 12px;
flex: none;
}
.acct-chip .nav-sub {
left: auto;
right: 0;
}
.site-header .phone {
color: var(--muted);
font-size: 14px;
font-weight: 500;
}
.searchbox {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
background: #fff;
}
.searchbox:focus-within {
border-color: var(--coral);
}
.searchbox input {
border: none;
outline: none;
font: inherit;
font-size: 14px;
width: 110px;
background: transparent;
}
/* ---------- voice search mic ---------- */
.micbtn {
position: relative;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
}
.micbtn:hover {
color: var(--ink);
background: rgba(29, 35, 39, 0.06);
}
.micbtn.is-live {
color: #fff;
background: var(--coral);
}
.micbtn-dot {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.micbtn.is-live .micbtn-dot {
box-shadow: 0 0 0 0 rgba(255, 90, 95, 0.5);
animation: micpulse 1.4s ease-out infinite;
}
@keyframes micpulse {
to {
box-shadow: 0 0 0 12px rgba(255, 90, 95, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.micbtn.is-live .micbtn-dot {
animation: none;
}
}
.hero-search .field .micbtn {
margin-right: -6px;
}
/* ---------- mobile nav ---------- */
.hamburger {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-right: -8px;
border: none;
background: transparent;
cursor: pointer;
color: var(--ink);
flex-shrink: 0;
}
.hb {
position: relative;
width: 22px;
height: 16px;
display: block;
}
.hb i {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.hb i:nth-child(1) {
top: 0;
}
.hb i:nth-child(2) {
top: 7px;
}
.hb i:nth-child(3) {
top: 14px;
}
.hb-open i:nth-child(1) {
top: 7px;
transform: rotate(45deg);
}
.hb-open i:nth-child(2) {
opacity: 0;
}
.hb-open i:nth-child(3) {
top: 7px;
transform: rotate(-45deg);
}
.mobile-scrim {
position: fixed;
inset: 0;
top: 74px;
background: rgba(20, 24, 27, 0.4);
z-index: 40;
animation: scrim-in 0.15s ease;
}
@keyframes scrim-in {
from {
opacity: 0;
}
}
.mobile-panel {
background: var(--paper);
border-bottom: 1px solid var(--line);
padding: 18px 20px 24px;
display: flex;
flex-direction: column;
gap: 6px;
max-height: calc(100vh - 74px);
overflow-y: auto;
}
.mp-search {
margin-bottom: 8px;
}
.mp-search .searchbox {
width: 100%;
}
.mp-search .searchbox input {
width: 100%;
}
.mp-links {
display: flex;
flex-direction: column;
}
.mp-links a {
display: block;
padding: 13px 2px;
font-size: 16px;
font-weight: 500;
border-bottom: 1px solid var(--line);
}
.mp-highlight a {
color: var(--coral-dark);
font-weight: 700;
}
.mp-group summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 2px;
font-size: 16px;
font-weight: 500;
border-bottom: 1px solid var(--line);
cursor: pointer;
list-style: none;
}
.mp-group summary::-webkit-details-marker {
display: none;
}
.mp-group summary::after {
content: "+";
font-size: 18px;
color: var(--muted);
}
.mp-group[open] summary::after {
content: "\2212";
}
.mp-group[open] summary {
border-bottom-color: transparent;
}
.mp-group a {
padding-left: 16px;
font-size: 15px;
color: var(--muted);
}
.mp-account {
display: flex;
flex-wrap: wrap;
gap: 18px;
padding: 16px 2px 20px;
font-size: 14px;
font-weight: 500;
color: var(--muted);
}
.mp-account-name {
flex-basis: 100%;
color: var(--ink);
font-weight: 700;
}
@media (max-width: 1180px) {
.site-header .bar > nav,
.site-header .phone {
display: none;
}
.site-header .bar {
gap: 16px;
}
.hamburger {
display: inline-flex;
}
}
@media (max-width: 860px) {
.site-header .bar {
gap: 12px;
}
.site-header .bar > .right > .searchbox,
.site-header .bar > .right > .login-link,
.site-header .bar > .right > .register-link,
.site-header .bar > .right > .btn {
display: none;
}
}
/* ---------- footer ---------- */
.site-footer {
background: var(--ink-2);
color: rgba(255, 255, 255, 0.62);
}
.site-footer a {
color: rgba(255, 255, 255, 0.62);
}
.site-footer a:hover {
color: #fff;
}
.site-footer .cols {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 28px;
padding-top: 56px;
}
.site-footer h4 {
color: #fff;
font-family: var(--font-sans);
font-weight: 600;
font-size: 13px;
margin-bottom: 12px;
letter-spacing: 0;
}
.site-footer ul {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13.5px;
}
.site-footer .foot-disclaimer {
margin-top: 44px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
width: 100%;
font-size: 12px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.5);
text-align: justify;
}
.site-footer .foot-disclaimer a {
color: rgba(255, 255, 255, 0.72);
text-decoration: underline;
}
.site-footer .base {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
padding: 22px 0 40px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 12.5px;
}
@media (max-width: 860px) {
.site-footer .cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer .base {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
}
/* ---------- pillars / steps ---------- */
.steps {
display: grid;
gap: 28px;
margin-top: 40px;
}
.step .n {
color: var(--coral-soft);
font-weight: 700;
font-size: 14px;
}
.band-sand .step .n,
.section .step .n {
color: var(--coral-dark);
}
.step h3 {
font-family: var(--font-sans);
font-size: 17px;
margin-top: 8px;
letter-spacing: 0;
}
.step p {
font-size: 14px;
margin-top: 8px;
}
/* ---------- page head (sub-hero band) ---------- */
.page-head {
background: var(--sand);
border-bottom: 1px solid var(--line);
}
.page-head .inner {
padding: 48px 0 40px;
}
/* ---------- breadcrumb ---------- */
.crumb {
font-size: 13px;
color: var(--muted);
padding: 20px 0 0;
}
.crumb a:hover {
color: var(--coral-dark);
}
/* ---------- property detail ---------- */
.detail-head {
padding: 24px 0 4px;
}
.detail-head .ref {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--coral-dark);
}
.detail-head h1 {
font-size: clamp(26px, 4vw, 40px);
margin-top: 10px;
}
.detail-head .price {
font-size: 24px;
font-weight: 700;
color: var(--coral-dark);
}
.spec {
display: flex;
flex-wrap: wrap;
gap: 8px 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
margin: 22px 0;
overflow: hidden;
}
.spec > div {
flex: 1 1 120px;
padding: 16px 20px;
border-right: 1px solid var(--line);
font-size: 13px;
color: var(--muted);
}
.spec > div:last-child {
border-right: none;
}
.spec b {
display: block;
font-size: 18px;
color: var(--ink);
font-weight: 700;
}
.spec b.sm {
font-size: 14px;
}
.detail-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 40px;
align-items: start;
margin-top: 8px;
}
/* grid children default to min-width:auto — without this, wide tables and
grids inside .main push the whole column past the viewport on mobile. */
.detail-grid .main,
.detail-grid .side {
min-width: 0;
}
.detail-grid .side {
position: sticky;
top: 96px;
}
@media (max-width: 900px) {
.detail-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.detail-grid .side {
position: static;
}
}
.gallery {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
margin: 16px 0 8px;
}
.gallery img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 10px;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0;
}
.chip {
border: 1px solid var(--line);
padding: 5px 12px;
border-radius: 999px;
font-size: 13px;
color: var(--ink);
}
.sec-h {
font-size: 20px;
margin: 32px 0 4px;
}
/* ---------- property head: media + summary ---------- */
.phead {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.82fr);
gap: 24px;
margin-top: 14px;
align-items: start;
}
@media (max-width: 980px) {
.phead {
grid-template-columns: 1fr;
gap: 18px;
}
}
/* media block — fixed frame, identical for every property */
.media {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: 8px;
width: 100%;
height: 452px;
border-radius: 14px;
overflow: hidden;
}
.media.single {
grid-template-columns: 1fr;
}
.media-big,
.media-tile {
margin: 0;
position: relative;
background: #ece6db;
overflow: hidden;
cursor: pointer;
}
.media-big img,
.media-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.media-big:hover img,
.media-tile:hover img {
transform: scale(1.04);
}
.media-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
}
.media-tile.empty {
background: repeating-linear-gradient(45deg, #ece6db, #ece6db 10px, #e5ded1 10px, #e5ded1 20px);
cursor: default;
}
.media-more,
.media-counter,
.media-tag {
position: absolute;
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(20, 24, 27, 0.82);
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
border-radius: 999px;
backdrop-filter: blur(2px);
z-index: 2;
}
.media-more {
inset: 0;
border-radius: 0;
justify-content: center;
background: rgba(20, 24, 27, 0.55);
font-size: 14px;
}
.media-counter {
right: 12px;
bottom: 12px;
}
.media-tag {
left: 12px;
top: 12px;
}
.media-big.is-video::before {
content: "";
position: absolute;
inset: 0;
background: rgba(15, 18, 20, 0.26);
z-index: 1;
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 999px;
background: rgba(255, 90, 95, 0.94);
color: #fff;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
z-index: 2;
}
.play-btn svg {
width: 24px;
height: 24px;
}
.play-btn.sm {
width: 30px;
height: 30px;
}
.play-btn.sm svg {
width: 13px;
height: 13px;
}
/* mobile / tablet media strip */
.media-strip {
display: none;
gap: 8px;
margin-top: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.media-strip::-webkit-scrollbar {
display: none;
}
.media-thumb {
flex: 0 0 auto;
width: 96px;
height: 66px;
padding: 0;
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
background: #ece6db;
cursor: pointer;
position: relative;
}
.media-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 980px) {
.media {
grid-template-columns: 1fr;
height: auto;
}
.media-big {
/* 16:10 at every width, phone through tablet. The ![]()
is pulled out of
normal flow (position:absolute) so it can't feed its own height back
and collapse aspect-ratio the way a height:100% grid-item child does —
that bug made every property page a different height. */
aspect-ratio: 16 / 10;
height: auto;
}
.media-big img {
position: absolute;
inset: 0;
}
.media-big.pvideo {
aspect-ratio: 16 / 9;
height: auto;
}
.media-grid {
display: none;
}
.media-strip {
display: flex;
}
}
/* summary column */
.phead-summary > * {
margin-bottom: 10px;
}
.phead-summary > *:last-child {
margin-bottom: 0;
}
.phead-summary > .saveshare {
margin-top: 12px;
}
/* slight breathing room above the price */
.phead-summary > .phead-price {
margin-top: 8px;
}
.rera-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: #0a7d33;
background: #f2fbf4;
border: 1px solid #bfe4c9;
border-radius: 999px;
padding: 4px 11px;
}
.phead-summary .ref {
font-size: 12px;
letter-spacing: 0.06em;
color: var(--muted);
}
.phead-summary h1 {
font-size: clamp(21px, 2.3vw, 26px);
line-height: 1.22;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.phead-addr {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 13.5px;
color: var(--muted);
}
.phead-addr svg {
flex: none;
margin-top: 2px;
}
.spec-rows {
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
margin: 2px 0;
}
.spec-rows li {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 14px;
border-top: 1px solid var(--line);
font-size: 13px;
}
.spec-rows li:first-child {
border-top: none;
}
.spec-ic {
color: var(--coral-dark);
display: inline-flex;
flex: none;
align-self: center;
}
.spec-label {
color: var(--muted);
flex: none;
}
.spec-val {
font-weight: 700;
text-align: right;
margin-left: auto;
min-width: 0;
overflow-wrap: anywhere;
}
.phead-price {
font-size: 24px;
font-weight: 700;
color: var(--coral-dark);
}
.phead-price small {
font-size: 12px;
font-weight: 500;
color: var(--muted);
}
.contact-card {
background: #fff6f6;
border: 1px solid #f4d9d9;
border-radius: 12px;
padding: 14px;
text-align: center;
}
.contact-card > .btn {
margin-bottom: 8px;
}
.contact-tel {
display: block;
font-size: 12.5px;
color: var(--muted);
margin-top: 2px;
}
.contact-tel:hover {
color: var(--coral-dark);
}
/* feature strip + about teaser — fill the space beside the summary */
.phead-media {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
/* video tour — click-to-play facade. Standalone it's a 16:9 block;
as the hero media tile (.media-big.pvideo) it fills the media cell. */
.pvideo {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
background: var(--ink);
}
@media (min-width: 981px) {
.media-big.pvideo {
aspect-ratio: auto;
border-radius: 0;
height: 100%;
}
}
.pvideo img,
.pvideo iframe {
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
display: block;
}
.pvideo-play {
position: absolute;
inset: 0;
margin: auto;
width: 64px;
height: 64px;
border: 0;
border-radius: 999px;
background: rgba(255, 90, 95, 0.95);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease, background 0.15s ease;
}
.pvideo-play:hover {
background: var(--coral-dark);
transform: scale(1.06);
}
.pvideo-play span {
width: 0;
height: 0;
border-style: solid;
border-width: 11px 0 11px 18px;
border-color: transparent transparent transparent #fff;
margin-left: 4px;
}
.pvideo-label {
position: absolute;
left: 12px;
bottom: 12px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
backdrop-filter: blur(4px);
}
.pvideo-link {
align-self: flex-start;
}
.featstrip {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 14px 0;
margin-top: 2px;
}
.featstrip span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 13px 7px 11px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.featstrip span:first-child {
color: var(--coral-dark);
background: rgba(255, 90, 95, 0.06);
border-color: rgba(255, 90, 95, 0.3);
}
.featstrip span:hover {
border-color: #d9d3c8;
box-shadow: 0 4px 12px rgba(29, 35, 39, 0.06);
}
.featstrip svg {
color: var(--coral-dark);
flex: none;
}
/* Tablets too: a wrapping strip is 2 rows in the fallback font and 1 row once
Hanken Grotesk loads, shifting the summary below it (CLS ~0.21 at 800px). */
@media (max-width: 980px) {
.featstrip {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
padding: 12px 0;
}
.featstrip::-webkit-scrollbar {
display: none;
}
.featstrip span {
flex: none;
}
}
.phead-about {
font-size: 14px;
line-height: 1.6;
color: var(--muted);
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ask asraa ai card (dark) */
.ai-card {
background: var(--ink);
color: #fff;
border-radius: 14px;
padding: 20px;
}
.ai-card-head {
display: flex;
gap: 12px;
align-items: center;
}
.ai-bot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
color: var(--coral-soft);
flex: none;
}
.ai-card-head b {
font-family: var(--font-serif);
font-weight: 500;
font-size: 17px;
}
.ai-card-head p {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.6);
}
.ai-card-rows {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 14px;
}
.ai-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font: inherit;
font-size: 13px;
font-weight: 600;
text-align: left;
color: #fff;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 9px;
padding: 10px 12px;
cursor: pointer;
overflow-wrap: anywhere;
}
.ai-row > span {
flex: none;
}
.ai-row:hover {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.ai-row.more {
background: var(--coral);
border-color: var(--coral);
}
.ai-row:disabled {
opacity: 0.55;
cursor: default;
}
.ai-answer {
margin-top: 12px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
padding: 12px 14px;
font-size: 13.5px;
line-height: 1.55;
}
.ai-answer-q {
font-weight: 700;
color: var(--coral-soft);
margin-bottom: 6px;
}
.ai-answer-cta {
display: inline-block;
margin-top: 8px;
font-weight: 600;
color: #fff;
text-decoration: underline;
}
.ai-answer-err {
margin-top: 10px;
font-size: 12.5px;
color: var(--coral-soft);
}
.ai-answer-err a {
color: #fff;
text-decoration: underline;
}
.ai-note {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
margin-top: 12px;
}
/* ---------- property title row + chips ---------- */
.ptitle {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding: 18px 0 4px;
}
.ptitle .price {
font-size: 26px;
font-weight: 700;
color: var(--coral-dark);
white-space: nowrap;
}
.ptitle .price small {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--muted);
text-align: right;
}
@media (max-width: 700px) {
.ptitle {
flex-direction: column;
gap: 8px;
}
.ptitle .price,
.ptitle .price small {
text-align: left;
}
}
.pchips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 4px;
}
.pchips .c {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
font-weight: 600;
border: 1px solid var(--line);
border-radius: 999px;
padding: 5px 11px;
background: #fff;
}
.pchips .c.ok {
color: #0a7d33;
border-color: #bfe4c9;
background: #f2fbf4;
}
/* ---------- config & pricing table ---------- */
.config {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
font-size: 14px;
margin-top: 2px;
}
.config th {
background: var(--sand);
text-align: left;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
}
.config th,
.config td {
padding: 12px 16px;
border-bottom: 1px solid var(--line);
overflow-wrap: anywhere;
}
.config tr:last-child td {
border-bottom: none;
}
@media (max-width: 600px) {
.config th,
.config td {
padding: 10px 12px;
}
}
.config td .p {
font-weight: 700;
color: var(--coral-dark);
}
/* Phones: each row becomes a small card (labels come from data-label, set by
property.js from the table head). Stops "CONFIGURAT/ION"-style mid-word breaks. */
@media (max-width: 600px) {
.config {
border: 0;
border-radius: 0;
overflow: visible;
}
.config thead {
display: none;
}
.config tbody,
.config tr {
display: block;
width: 100%;
}
.config tr {
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 4px 14px;
margin-bottom: 10px;
}
.config tbody tr td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
padding: 9px 0;
text-align: right;
/* Wraps at spaces first; only a string with no break point at all
(a long unspaced code) is split, so nothing spills off the card. */
overflow-wrap: anywhere;
min-width: 0;
border-bottom: 1px solid var(--line);
}
.config tbody tr td:last-child {
border-bottom: none;
}
.config td[data-label]::before {
content: attr(data-label);
flex-shrink: 0;
text-align: left;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
}
.config tbody tr td:first-child {
display: block;
text-align: left;
font-weight: 700;
font-size: 15px;
}
.config tbody tr td:first-child::before {
content: none;
}
.config td.p {
font-weight: 700;
color: var(--coral-dark);
}
}
/* ---------- lightbox ---------- */
.lightbox {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(15, 18, 20, 0.94);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 60px;
}
.lb-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 6px;
}
.lb-close,
.lb-nav {
position: absolute;
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: none;
cursor: pointer;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
}
.lb-close {
top: 18px;
right: 18px;
width: 40px;
height: 40px;
font-size: 16px;
}
.lb-nav {
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
font-size: 28px;
line-height: 1;
}
.lb-nav.prev {
left: 14px;
}
.lb-nav.next {
right: 14px;
}
.lb-close:hover,
.lb-nav:hover {
background: rgba(255, 255, 255, 0.25);
}
.lb-count {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
}
@media (max-width: 600px) {
.lightbox {
padding: 56px 8px;
}
}
/* mosaic figures become clickable */
.gmosaic figure {
cursor: pointer;
}
.gmosaic .count {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ---------- floor-plan carousel ---------- */
.fp-wrap {
position: relative;
}
.fp-track {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 6px;
scrollbar-width: thin;
}
.fp-card {
flex: 0 0 300px;
scroll-snap-align: start;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: #fff;
padding: 0;
cursor: pointer;
text-align: left;
font: inherit;
}
.fp-card img {
width: 100%;
height: 200px;
object-fit: contain;
background: #f7f4ef;
display: block;
}
.fp-cap {
display: block;
padding: 10px 14px;
font-size: 12.5px;
font-weight: 600;
border-top: 1px solid var(--line);
}
.fp-arrow {
position: absolute;
top: 90px;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--line);
background: #fff;
cursor: pointer;
font-size: 20px;
line-height: 1;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.fp-arrow.left {
left: -14px;
}
.fp-arrow.right {
right: -14px;
}
@media (max-width: 600px) {
.fp-card {
flex-basis: 78vw;
}
.fp-arrow {
display: none;
}
}
/* ---------- read-more fade ---------- */
.prose-fade {
height: 60px;
margin-top: -60px;
position: relative;
background: linear-gradient(to bottom, rgba(251, 250, 248, 0), var(--paper));
pointer-events: none;
}
/* ---------- form field ---------- */
.fld {
padding: 11px 14px;
border: 1px solid var(--line);
border-radius: 10px;
font: inherit;
font-size: 16px; /* 16px min — <16px makes iOS zoom the page on focus */
background: #fff;
}
.fld:focus {
outline: 2px solid var(--coral);
outline-offset: -1px;
}
.lead-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.lead-ok {
margin-top: 16px;
font-size: 14px;
font-weight: 600;
color: var(--coral-dark);
}
.band-dark .lead-ok {
color: var(--coral-soft);
}
.lead-err {
font-size: 13px;
color: var(--coral-dark);
margin: -2px 0 2px;
}
.band-dark .lead-err {
color: var(--coral-soft);
}
/* intent radio group inside a lead form */
.lead-intent {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
margin: 2px 0;
font-size: 13px;
color: var(--muted);
}
.lead-intent-label {
font-weight: 600;
margin-right: 2px;
}
.lead-intent label {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.lead-intent input {
accent-color: var(--coral);
margin: 0;
}
/* ---------- "List your property" page (pg 11050) ---------- */
.lyp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: start;
margin-top: 1.6em;
}
.lyp-grid .lyp-points > h2:first-child {
margin-top: 0;
}
.lyp-grid .lyp-form {
position: sticky;
top: 96px;
}
@media (max-width: 860px) {
.lyp-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.lyp-grid .lyp-form {
position: static;
}
}
.lyp-grid .lyp-points p {
color: var(--muted);
}
.lyp-grid .lyp-form p {
margin-bottom: 0;
}
.lyp-grid .lyp-form .lead-form {
margin-top: 4px;
}
/* rent-after-possession capture band */
.rentcta {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 32px;
align-items: center;
background: var(--sand);
border-radius: 16px;
padding: 28px 32px;
}
.rentcta-form {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
}
@media (max-width: 820px) {
.rentcta {
grid-template-columns: 1fr;
gap: 18px;
padding: 22px;
}
}
/* ---------- emi calculator ---------- */
.emi-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px 8px;
font-size: 13px;
}
.emi-row span {
color: var(--muted);
}
.emi-row b {
text-align: right;
}
.emi-row input[type="range"] {
grid-column: 1 / -1;
width: 100%;
accent-color: var(--coral);
}
/* ---------- highlights widget ---------- */
.hl {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.hl > div {
background: var(--card);
padding: 14px 16px;
}
.hl .k {
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.hl .v {
font-size: 15px;
font-weight: 700;
margin-top: 2px;
}
@media (max-width: 600px) {
.hl {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---------- mobile sticky CTA ---------- */
.mcta {
display: none;
}
@media (max-width: 900px) {
.mcta {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
background: #fff;
border-top: 1px solid var(--line);
padding: 10px 14px;
align-items: center;
gap: 10px;
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
}
.mcta .btn {
flex: 1;
min-height: 44px;
}
main {
padding-bottom: 74px;
}
}
.btn-wa {
background: #25d366;
color: #fff;
}
.btn-wa:hover {
background: #1fb959;
color: #fff;
}
/* ---------- property content sections ---------- */
.psection {
border-top: 1px solid var(--line);
padding-top: 34px;
margin-top: 34px;
}
.psection:first-child {
border-top: none;
padding-top: 4px;
margin-top: 8px;
}
.psection > h2 {
font-size: 21px;
margin-bottom: 10px;
}
/* photos grid (dedicated) */
.pgallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.pgallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 10px;
}
@media (max-width: 600px) {
.pgallery {
grid-template-columns: 1fr;
}
}
/* floor plans (dedicated, not cropped) */
.fplans {
display: grid;
gap: 16px;
}
.fplans figure {
margin: 0;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.fplans img {
width: 100%;
height: auto;
display: block;
}
.fplans figcaption {
padding: 10px 14px;
font-size: 13px;
font-weight: 600;
border-top: 1px solid var(--line);
}
/* ---------- structured content boxes ---------- */
.specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 32px;
}
.specs h4 {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.specs ul {
display: flex;
flex-direction: column;
gap: 4px;
}
.specs li {
font-size: 13.5px;
display: flex;
gap: 8px;
line-height: 1.45;
}
/* property.js "Show all specifications" hides extra rows with [hidden];
display:flex above would otherwise override it. */
.specs li[hidden],
.config tbody tr[hidden],
.doccheck li[hidden] {
display: none !important;
}
@media (max-width: 600px) {
.specs {
gap: 16px;
}
.specs li {
font-size: 13px;
}
}
.specs li::before {
content: "";
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--coral);
margin-top: 7px;
}
@media (max-width: 600px) {
.specs {
grid-template-columns: 1fr;
}
}
.locadv {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.locadv > div {
background: var(--card);
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.locadv .place {
font-size: 13.5px;
}
.locadv .cat {
display: block;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 1px;
}
.locadv .dist {
font-weight: 700;
white-space: nowrap;
color: var(--coral-dark);
font-size: 13px;
}
@media (max-width: 600px) {
.locadv {
grid-template-columns: 1fr;
}
.locadv > div {
padding: 9px 14px;
}
.locadv .place {
font-size: 13px;
}
}
/* Phones show the first few nearby places; property.js adds "Show all". */
.locadv > [hidden] {
display: none !important;
}
.status-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
.status-row {
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 16px;
font-size: 13.5px;
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
align-items: baseline;
}
.status-row b {
font-size: 14px;
}
.status-row .tag {
font-size: 12px;
font-weight: 600;
background: #f2fbf4;
color: #0a7d33;
border: 1px solid #bfe4c9;
border-radius: 999px;
padding: 2px 8px;
}
.lead-para {
font-size: 15.5px;
line-height: 1.6;
color: #34383c;
margin-bottom: 16px;
}
.missing {
font-size: 13.5px;
color: var(--muted);
background: var(--sand);
border: 1px dashed var(--line);
border-radius: 10px;
padding: 14px 16px;
}
.missing a {
color: var(--coral-dark);
font-weight: 600;
white-space: nowrap;
}
/* ---------- amenities grid ---------- */
.amengrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 20px;
margin-top: 6px;
}
.amengrid span {
font-size: 14px;
display: flex;
gap: 8px;
align-items: center;
}
.amengrid svg {
flex-shrink: 0;
color: var(--coral);
}
/* "+N more amenities" toggle hides items with [hidden]; display:flex above overrode it. */
.amengrid > [hidden] {
display: none !important;
}
@media (max-width: 700px) {
.amengrid {
grid-template-columns: 1fr 1fr;
}
}
/* ---------- detail sidebar ---------- */
.side .card + .card,
.side > * + * {
/* #emi is a plain wrapper around its cards, so .card + .card never matched
between the advisor form and the cost box — they touched. */
margin-top: 16px;
}
.side .mini li {
display: flex;
gap: 8px;
font-size: 13px;
margin-top: 8px;
}
.side .mini li svg {
flex-shrink: 0;
color: var(--coral);
margin-top: 2px;
}
.dev-line {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
line-height: 1.5;
}
.map-embed {
width: 100%;
aspect-ratio: 16 / 9;
border: 1px solid var(--line);
border-radius: 12px;
}
/* ---------- prose (rendered WP HTML) ---------- */
.prose {
font-size: 16px;
line-height: 1.72;
color: #34383c;
}
.prose > * + * {
margin-top: 1.1em;
}
.prose h2,
.prose h3,
.prose h4 {
color: var(--ink);
margin-top: 1.7em;
margin-bottom: 0.2em;
}
.prose h2 {
font-size: 26px;
letter-spacing: -0.01em;
margin-top: 2em;
}
/* The short red accent line above every prose H2 (and the rate pages'
.arp-accent-bar, styled inline in their content) was removed at the
owner's request, 2026-09-24. */
.prose h2::before {
content: none;
}
.arp-accent-bar {
display: none !important;
}
/* Listing "About this property": 101/106 descriptions open with an H2 that
repeats the project name right under the section heading — with the 2em
gap and accent bar it read as a second title. Make that opener a compact
lead-in, and tighten headings on phones so more text shows above the fold. */
#about .prose > h2:first-child {
margin-top: 0;
font-size: 18px;
font-family: var(--font-sans);
font-weight: 600;
color: var(--coral-dark);
}
#about .prose > h2:first-child::before {
content: none;
}
@media (max-width: 600px) {
#about .prose h2 {
font-size: 21px;
margin-top: 1.4em;
}
#about .prose h2::before {
margin-bottom: 8px;
}
#about .prose h3 {
font-size: 17px;
margin-top: 1.2em;
}
#about .prose > h2:first-child {
font-size: 16px;
margin-top: 0;
}
}
.prose h3 {
font-size: 20px;
}
.prose h4 {
font-size: 16px;
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: 0;
}
.prose a {
color: var(--coral-dark);
text-decoration: underline;
text-underline-offset: 2px;
}
.prose ul,
.prose ol {
padding-left: 1.3em;
}
.prose li {
list-style: disc;
margin: 0.4em 0;
}
.prose ol li {
list-style: decimal;
}
.prose img {
border-radius: 10px;
margin: 1.4em 0;
height: auto;
}
.prose-caption {
display: block;
font-size: 13px;
color: var(--muted);
font-style: italic;
text-align: center;
}
.prose > .prose-caption {
margin-top: 6px;
}
.prose blockquote {
border-left: none;
padding: 2px 0 2px 30px;
margin: 1.6em 0;
color: var(--ink);
font-style: normal;
font-family: var(--font-serif);
font-size: 21px;
line-height: 1.5;
position: relative;
}
.prose blockquote::before {
content: "\201C";
position: absolute;
left: -2px;
top: -4px;
font-size: 44px;
color: var(--coral);
font-family: var(--font-serif);
line-height: 1;
}
.prose blockquote p {
margin: 0;
}
.prose-stat {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
background: var(--sand);
border-radius: 12px;
padding: 16px 20px;
margin: 1.6em 0;
}
.prose-stat-num {
font-size: 30px;
font-weight: 800;
color: var(--coral-dark);
line-height: 1;
}
.prose-stat-label {
font-size: 13px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.prose-eyebrow {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--coral-dark);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.prose-eyebrow + h2,
.prose-eyebrow + h3 {
margin-top: 6px !important;
}
.prose-eyebrow + h2::before {
display: none;
}
/* two-column feature spread (template-parts/split-feature.php) */
.split-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin: 2em 0 !important;
padding: 32px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.split-feature-left h3 {
font-family: var(--font-sans);
font-weight: 800;
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 14px;
}
.split-feature-left p,
.split-feature-right p {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
margin: 0 0 16px;
}
.split-feature-photo {
display: block;
aspect-ratio: 16 / 10;
border-radius: 10px;
overflow: hidden;
background: var(--sand);
margin-bottom: 14px;
}
.split-feature-photo:last-child {
margin-bottom: 0;
}
.split-feature-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0;
border-radius: 0;
}
@media (max-width: 700px) {
.split-feature {
grid-template-columns: 1fr;
gap: 20px;
}
}
.prose table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
display: block;
overflow-x: auto;
}
.prose th,
.prose td {
border: 1px solid var(--line);
padding: 8px 12px;
text-align: left;
}
.prose th {
background: var(--sand);
}
.prose details {
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 16px;
}
.prose summary {
cursor: pointer;
font-weight: 600;
}
.prose hr {
border: none;
border-top: 1px solid var(--line);
}
/* ---------- generic WP page (catch-all route) ---------- */
/* Pages that bring their own complete