/* ============================================================ RainInfra — Luxury White + Gold Design System (v3) Whitespace as material · hairlines · light serif · calm motion ============================================================ */ :root { /* Ink */ --ink: #1B1B1B; --ink-85: rgba(27, 27, 27, 0.85); --ink-60: rgba(27, 27, 27, 0.6); --ink-40: rgba(27, 27, 27, 0.55); --hairline-dark: rgba(27, 27, 27, 0.09); /* Gold ramp */ --gold-deep: #8A6D1F; --gold-deep-2: #9C7A24; --gold: #C9A227; --gold-2: #D4AF37; --champagne: #E8D8A8; --champagne-2: #F0E4BC; --gold-soft: #FBF6E9; /* Base */ --white: #FFFFFF; --warm-white: #FAF8F3; --grad-gold: linear-gradient(135deg, #D4AF37 0%, #9C7A24 100%); --grad-banner: linear-gradient(140deg, #8A6D1F 0%, #C9A227 55%, #8A6D1F 100%); /* Display face. Kept under the old --font-serif name so every existing rule picks it up, but it now resolves to the same clean sans as body copy — no decorative serif anywhere. */ --font-serif: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius: 14px; --radius-lg: 18px; --radius-pill: 999px; --shadow-hover: 0 24px 56px rgba(27, 27, 27, 0.1); --shadow-gold: 0 10px 30px rgba(201, 162, 39, 0.24); --header-h: 84px; --container: 1280px; --sect: clamp(44px, 4.6vw, 64px); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Lenis owns scrolling when active — CSS smooth scroll would fight it */ html.lenis, html.lenis body { scroll-behavior: auto !important; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: var(--font-sans); color: var(--ink-85); background: var(--warm-white); line-height: 1.7; font-size: 16.5px; /* clip, NOT hidden. overflow-x:hidden on turns the body into a scroll container. ScrollTrigger then reads the window's scroll position while the page actually scrolls the body, so its cached value drifts — measured 700 when the real scrollY was 1200. Every [data-reveal] trigger therefore never fired: cards stayed at opacity 0 with a 44px offset, which is what made sections look empty and made cards bleed into the section below. overflow-x:clip suppresses sideways scroll without creating a scroll container. */ overflow-x: clip; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* An explicit display in CSS beats the UA's [hidden] rule, so a display:flex card stayed visible when hidden was set. */ [hidden] { display: none !important; } svg { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: 1rem; color: var(--ink); } h1, h2, h3, .serif { font-family: var(--font-serif); font-weight: 500; color: var(--ink); letter-spacing: -0.015em; /* sans headings need slightly tighter tracking */ } h1 { font-size: clamp(2.7rem, 6.2vw, 5.4rem); line-height: 1.07; letter-spacing: -0.015em; } h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.12; letter-spacing: -0.01em; } h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; } .gold-text { color: var(--gold-deep); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 3000; background: var(--gold-deep); color: #fff; padding: 10px 18px; } .skip-link:focus { left: 0; } .container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(22px, 4vw, 48px); } section { padding: var(--sect) 0; } .section-soft { background: var(--gold-soft); } .section-white { background: var(--white); } /* Hairline utilities */ .hairline { border: none; height: 1px; background: var(--hairline-dark); } .hairline-gold { border: none; height: 1px; background: var(--champagne); } /* ---------- Eyebrow / section head ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); } .eyebrow svg { width: 11px; height: 11px; stroke: var(--gold); } .section-head { max-width: 760px; margin-bottom: clamp(26px, 3vw, 36px); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { margin: 22px 0 18px; } .section-head p { color: var(--ink-60); font-size: 1.05rem; max-width: 620px; } .section-head.center p { margin: 0 auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 34px; border-radius: var(--radius-pill); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.04em; border: 1px solid transparent; white-space: nowrap; transition: color .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease; will-change: transform; } .btn svg { width: 16px; height: 16px; stroke-width: 1.8; transition: transform .4s ease; } .btn:hover svg { transform: translateX(3px); } .btn-primary { background: var(--grad-gold); color: #fff; box-shadow: var(--shadow-gold); } .btn-primary:hover { box-shadow: 0 14px 36px rgba(201, 162, 39, 0.34); } .btn-outline { border-color: var(--gold); color: var(--gold-deep); } .btn-outline:hover { background: var(--gold-soft); } .btn-ghost { color: var(--ink); padding-left: 18px; padding-right: 18px; } .btn-ghost:hover { color: var(--gold-deep); } .btn-lg { padding: 18px 42px; font-size: 0.96rem; } .btn-sm { padding: 11px 22px; font-size: 0.84rem; } .btn-block { width: 100%; } .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; } /* ---------- Header ---------- */ /* At the top of the page the header sits over the hero photograph, so a fully transparent bar left the nav competing with whatever was behind it. A frosted panel — light tint plus a backdrop blur — keeps the picture readable underneath while giving the dark nav text a consistent surface to sit on. It thickens on scroll. */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--header-h); display: flex; align-items: center; background: rgba(250, 248, 243, 0.34); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, 0.32); box-shadow: 0 1px 12px rgba(27, 27, 27, 0.06); transition: background .5s ease, border-color .5s ease, backdrop-filter .5s ease, box-shadow .5s ease; } .site-header.scrolled { background: rgba(250, 248, 243, 0.82); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--champagne); box-shadow: 0 2px 20px rgba(27, 27, 27, 0.08); } /* Over the photo the muted nav grey loses too much contrast, and the glass alone does not fully rescue it — a step darker plus a hairline shadow does. Both revert once the bar is opaque on scroll. */ .site-header .main-nav a { color: var(--ink-85); text-shadow: 0 1px 2px rgba(250, 248, 243, 0.55); } .site-header .logo { text-shadow: 0 1px 2px rgba(250, 248, 243, 0.55); } .site-header.scrolled .main-nav a { color: var(--ink-60); text-shadow: none; } .site-header.scrolled .logo { text-shadow: none; } /* backdrop-filter is unsupported on older Firefox/Safari — fall back to a more opaque tint so the nav never sits on bare photograph */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: rgba(250, 248, 243, 0.86); } .site-header.scrolled { background: rgba(250, 248, 243, 0.96); } } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; } /* ---------- Brand mark ---------- The supplied artwork is the whole logo: charcoal RAININFRA wordmark with the gold chevron over the N. The old circled "R" medallion and the gradient-clipped text wordmark it sat beside are both gone, so .logo-mark / .logo-type no longer exist anywhere in the markup. */ .logo { display: inline-flex; align-items: center; } .logo-img { display: block; width: auto; height: 34px; /* the source is 944x185, so the box is 5.1:1 */ max-width: 100%; transition: opacity .25s; } .logo:hover .logo-img { opacity: 0.82; } .site-header .logo-img { height: clamp(26px, 2.2vw, 34px); } .site-footer .logo-img { height: 32px; } .mm-head .logo-img { height: 28px; } .app-header .logo-img { height: 28px; } @media (max-width: 900px) { .site-header .logo-img { height: 26px; } } @media (max-width: 420px) { .site-header .logo-img, .app-header .logo-img { height: 23px; } } .main-nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 44px); } .main-nav a { font-size: 0.86rem; font-weight: 500; letter-spacing: 0.05em; color: var(--ink-60); position: relative; padding: 8px 0; transition: color .35s ease; } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 0; background: var(--gold); transition: width .45s cubic-bezier(.22,.61,.36,1); } .main-nav a:hover, .main-nav a.active { color: var(--gold-deep); } .main-nav a.active::after, .main-nav a:hover::after { width: 100%; } .header-cta { display: flex; align-items: center; gap: 10px; } .hamburger { display: none; flex-direction: column; gap: 6px; padding: 10px; } .hamburger span { width: 26px; height: 1.5px; background: var(--ink); transition: all .4s ease; } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(380px, 92vw); z-index: 1200; background: var(--warm-white); border-left: 1px solid var(--champagne); transform: translateX(105%); display: flex; flex-direction: column; padding: 34px 38px 44px; } .mobile-menu .mm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 52px; } .mm-close { padding: 8px; } .mm-close svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.6; } .mobile-menu nav { display: flex; flex-direction: column; } .mobile-menu nav a { display: block; overflow: hidden; padding: 17px 0; font-family: var(--font-serif); font-size: 1.5rem; color: var(--ink); border-bottom: 1px solid var(--hairline-dark); } .mobile-menu nav a.active { color: var(--gold-deep); } .mm-cta { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 36px; } .menu-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(27, 27, 27, 0.35); opacity: 0; pointer-events: none; transition: opacity .5s ease; } .menu-overlay.show { opacity: 1; pointer-events: auto; } /* ---------- Hero ---------- */ .hero { position: relative; display: flex; align-items: center; min-height: 100svh; /* fill the screen; svh avoids the mobile URL-bar jump */ padding: calc(var(--header-h) + clamp(20px, 2.4vw, 32px)) 0 clamp(28px, 3vw, 40px); /* No overflow clip here. The search dropdowns are absolutely positioned children and a clip on the section chops them off at its bottom edge — which also made the visible remainder impossible to scroll. The Ken Burns image is still contained, because .hero-bg clips it itself. */ } @supports not (min-height: 100svh) { .hero { min-height: 100vh; } } /* Hero typography dialled back a step so the whole block sits comfortably inside one screen. */ .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.08; } .hero p.lede { font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.65; } .hero .search-shell { max-width: 620px; margin-top: 20px; } .hero .trust-strip { margin-top: 18px; } .hero .hero-metrics { margin-top: 20px; padding-top: 0; } .hero .hero-metric .hm-num { font-size: clamp(1.35rem, 2vw, 1.85rem); } .hero .hero-metric .hm-lbl { font-size: 9.5px; letter-spacing: 0.16em; } .hero .hero-metric-sep { height: 34px; } .hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .page-hero .hero-bg img { filter: sepia(0.1) saturate(0.94) contrast(0.98) brightness(0.94); } /* Home hero shows the photograph with no overlay and no grading at all. The copy carries its own frosted panels instead. Inner pages keep their wash — see .page-hero below. */ .hero-bg::after { content: none; } /* ---- Inner-page heroes: dark ink on a light wash ---- */ .page-hero h1 { text-shadow: 0 1px 0 rgba(250, 248, 243, 0.5), 0 2px 8px rgba(27, 27, 27, 0.20); } .page-hero p.lede { text-shadow: 0 1px 4px rgba(27, 27, 27, 0.16); } .page-hero .hero-tag, .page-hero .trust-item, .page-hero .breadcrumb { text-shadow: 0 1px 3px rgba(27, 27, 27, 0.15); } .page-hero .stat-big .num { text-shadow: 0 1px 0 rgba(250, 248, 243, 0.5), 0 2px 6px rgba(27, 27, 27, 0.18); } .page-hero .stat-big .lbl { text-shadow: 0 1px 3px rgba(27, 27, 27, 0.14); } /* ---- Home hero: dark ink on the warm wash ---- */ /* Frosted chips behind the small copy. The hero wash is light, so these are light glass — a white tint over the blur with dark text. (A dark tint here measured 1.7:1; the tint has to move the backdrop the same direction as the surface it sits on, not against it.) */ .hero .trust-strip { gap: 12px; } .hero .trust-item { padding: 8px 15px; border-radius: var(--radius-pill); color: var(--ink-85); background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.7); } .hero .trust-item svg { stroke: var(--gold-deep); } .hero .hero-metrics { padding: 14px 20px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.46); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.68); } .hero .hero-metric .hm-num { color: var(--ink); } .hero .hero-metric .hm-lbl { color: var(--ink-85); } .hero .hero-metric-sep { background: var(--champagne); } .hero .seg-toggle { background: rgba(255, 255, 255, 0.58); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-color: rgba(255, 255, 255, 0.75); } .hero .seg-toggle button { color: var(--ink-85); } .hero .seg-toggle button:hover { color: var(--gold-deep); } .hero .seg-toggle button.active { color: #fff; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero .trust-item { background: rgba(255, 255, 255, 0.88); } .hero p.lede { background: rgba(255, 255, 255, 0.6); } .hero .hero-metrics { background: rgba(255, 255, 255, 0.78); } .hero .seg-toggle { background: rgba(255, 255, 255, 0.86); } } /* ---- Home hero: dark ink on the warm wash ---- */ /* Headline sits straight on the photo — no panel. Plain ink reads 6.3:1 there, but the brand gold only manages 1.8:1 against these walls, so the accent uses a deeper bronze in the hero only. */ .hero h1 { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 10px rgba(255, 255, 255, 0.5); } .hero h1 .gold-text, .hero .gold-text { color: #5C4712; } /* The lede sits directly on the picture now, so it gets its own frosted panel rather than relying on an overlay across the whole hero. */ .hero p.lede { color: var(--ink); text-shadow: none; display: inline-block; max-width: 540px; padding: 13px 18px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: 0 8px 26px rgba(27, 27, 27, 0.08); } /* ---- Hero cards ---- Floating on an image needs more separation than the same card would need on a flat section, so the search card gets a deeper ambient shadow plus a tight contact shadow to sit it on the photo. */ .hero .search-module { box-shadow: 0 28px 64px rgba(27, 27, 27, 0.22), 0 8px 18px rgba(27, 27, 27, 0.10); } .hero .search-module:focus-within, .hero .search-module.is-open { box-shadow: 0 30px 70px rgba(27, 27, 27, 0.26), 0 8px 18px rgba(27, 27, 27, 0.12); } .hero .seg-toggle { box-shadow: 0 12px 26px rgba(27, 27, 27, 0.16); } .hero .geo-list, .hero .geo-list.gl-type { box-shadow: 0 24px 54px rgba(27, 27, 27, 0.24); } .hero-content { max-width: 790px; min-width: 0; } .hero-tag svg { width: 13px; height: 13px; stroke: var(--gold-deep); } .hero h1 { margin: 0 0 14px; } .hero p.lede { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--ink-60); max-width: 540px; line-height: 1.75; } /* ---------- Hero search module ---------- Tabs sit above the card so the card itself is one uncluttered row of fields. Fields are borderless and separated by hairlines; the whole card is the input surface. */ /* GSAP animates every [data-hero] element, which leaves a transform on it — and a transform creates a stacking context at z-index 0. The trust strip (data-hero 4) and metrics (5) come after the search shell (3) in the DOM, so they were painting over any dropdown opened from the card, and swallowing its clicks. Lifting the whole shell above its later siblings fixes both the see-through look and the dead taps. */ .search-shell { position: relative; z-index: 40; margin-top: 24px; max-width: 660px; } .search-shell.panel-open { z-index: 900; } /* Tabs float above the card as their own pill. Earlier they were welded to the card's top edge, which left a visible notch where the two radii met — a gap removes the seam entirely. */ .seg-toggle { display: inline-flex; gap: 3px; padding: 4px; margin-bottom: 10px; background: var(--white); border: 1px solid var(--champagne); border-radius: var(--radius-pill); box-shadow: 0 6px 18px rgba(27, 27, 27, 0.07); } .seg-toggle button { padding: 7px 24px; border-radius: var(--radius-pill); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--ink-60); white-space: nowrap; transition: color .3s ease, background .3s ease, box-shadow .3s ease; } .seg-toggle button:hover { color: var(--gold-deep); } .seg-toggle button.active { background: var(--grad-gold); color: #fff; } /* Solid, not translucent. A blurred/alpha card creates a compositing layer that bleeds the hero photo through any dropdown opened inside it — the card must be opaque for popups to read as solid. */ /* Geometry is explicit, never stretch-derived: the row height is the fields' own height, so nothing else in the card can inflate it. */ .search-module { background: var(--white); border: 1px solid var(--champagne); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(27, 27, 27, 0.12); padding: 6px; display: grid; grid-template-columns: minmax(0, 1.35fr) 1px minmax(0, 1fr) auto; align-items: center; gap: 0; max-width: 100%; transition: box-shadow .35s ease, border-color .35s ease; } /* Opening a dropdown must not repaint the card — the list just floats above it. Only a focused text caret warrants a hint. */ .search-module:focus-within { border-color: var(--champagne-2); } .sf-divider { background: var(--champagne); width: 1px; height: 30px; align-self: center; } .search-field { position: relative; min-width: 0; min-height: 52px; padding: 6px 14px; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; gap: 0; transition: background .25s ease; } .search-field.sf-loc:focus-within { background: var(--gold-soft); } .sf-label { display: flex; align-items: center; gap: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-40); cursor: pointer; line-height: 1.4; margin-bottom: 2px; } .sf-input { display: flex; align-items: center; gap: 9px; min-height: 22px; } .sf-icon { width: 15px; height: 15px; flex: none; stroke: var(--gold-deep); fill: none; } .search-field input { width: 100%; min-width: 0; border: none; background: transparent; padding: 2px 0; font-size: 0.95rem; color: var(--ink); appearance: none; line-height: 1.5; text-overflow: ellipsis; } .search-field input::placeholder { color: var(--ink-40); } .search-field input:focus { outline: none; box-shadow: none; } /* Native on desktop with the generic 52px bordered "luxe" trigger. #ptype opts out with data-no-luxe, but if a stale cached main.js still injects one, neutralise it here so the card geometry can't blow out. */ .search-module .luxe-select { height: auto; width: auto; flex: 1; min-width: 0; } .search-module .ls-trigger { min-height: 0; height: auto; padding: 2px 0; border: none; background: transparent; font-size: 0.95rem; } .search-module .ls-trigger:hover { background: transparent; } .search-module .ls-panel { background: var(--white); } /* Trust strip + metrics */ .trust-strip { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 24px; } .trust-item { display: inline-flex; align-items: center; gap: 9px; font-size: 0.84rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink-60); } .trust-item svg { width: 16px; height: 16px; stroke: var(--gold-deep); stroke-width: 1.7; } .hero-metrics { display: flex; align-items: center; gap: clamp(26px, 4vw, 56px); margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--champagne); } .hero-metric .hm-num { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 500; color: var(--ink); line-height: 1.1; } .hero-metric .hm-num span { color: inherit; } .hero-metric .hm-lbl { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; margin-top: 6px; } .hero-metric-sep { width: 1px; height: 44px; background: var(--champagne); } /* Hero two-column grid — content and visual occupy separate tracks, so they can never overlap at any width */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 360px); gap: clamp(44px, 6vw, 96px); align-items: center; width: 100%; } .hero-visual { position: relative; z-index: 2; } .hero-visual .hv-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--champagne); box-shadow: 0 34px 80px rgba(27,27,27,0.16); position: relative; aspect-ratio: 3/3.9; background: var(--gold-soft); } .hero-visual .hv-frame img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.1) saturate(0.92) contrast(0.96); } .hero-visual .hv-card { position: absolute; left: -28px; bottom: 34px; max-width: calc(100% + 16px); background: rgba(255,255,255,0.96); border: 1px solid var(--champagne); border-radius: var(--radius); box-shadow: 0 14px 36px rgba(27,27,27,0.1); padding: 15px 20px; display: flex; gap: 13px; align-items: center; } .hero-visual .hv-card .icon-tile { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); flex: none; } .hero-visual .hv-card .icon-tile svg { width: 17px; height: 17px; stroke: var(--gold-deep); } .hero-visual .hv-card .t { font-size: 0.8rem; font-weight: 600; color: var(--ink); } .hero-visual .hv-card .s { font-size: 0.7rem; color: var(--ink-40); } .hero-visual .hv-badge { position: absolute; right: 14px; top: 14px; background: var(--grad-gold); color: #fff; border-radius: var(--radius-pill); padding: 9px 16px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; box-shadow: var(--shadow-gold); display: flex; gap: 8px; align-items: center; } .hero-visual .hv-badge svg { width: 13px; height: 13px; stroke: #fff; } @media (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-visual { display: none; } } /* ---------- Cards ---------- */ .card { background: var(--white); border: 1px solid var(--champagne); border-radius: var(--radius-lg); position: relative; } /* Pre-rendered hover shadow — animating its opacity is GPU-cheap, animating box-shadow directly forces repaints every frame. z-index:-1 only reaches behind the card while the card is NOT its own stacking context, so nothing on .card may set will-change/transform statically. A hovered card is lifted above its neighbours so the shadow falls on them rather than under them. */ .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 24px 56px rgba(27, 27, 27, 0.12); opacity: var(--shadow-o, 0); z-index: -1; } .card:hover { z-index: 2; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } /* Pillars */ .pillar { padding: clamp(34px, 3.4vw, 48px); position: relative; } .pillar .pillar-num { position: absolute; top: 30px; right: 32px; font-family: var(--font-serif); font-size: 1rem; color: var(--ink-40); letter-spacing: 0.1em; } .pillar .icon-tile { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--champagne); margin-bottom: 26px; background: var(--gold-soft); } .pillar .icon-tile svg { width: 23px; height: 23px; stroke: var(--gold-deep); stroke-width: 1.5; } .pillar h3 { margin-bottom: 14px; } .pillar p { color: var(--ink-60); font-size: 0.94rem; margin-bottom: 26px; } .pillar::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad-gold); transition: width .7s cubic-bezier(.22,.61,.36,1); } .pillar:hover::after { width: 100%; } .link-gold { color: var(--gold-deep); font-weight: 500; font-size: 0.88rem; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 8px; } .link-gold svg { width: 15px; height: 15px; stroke-width: 1.8; transition: transform .4s ease; } .link-gold:hover svg { transform: translateX(5px); } /* Property card */ .prop-card { display: flex; flex-direction: column; } .prop-media { position: relative; aspect-ratio: 4/2.9; overflow: hidden; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; } .prop-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; filter: sepia(0.1) saturate(0.92) contrast(0.96) brightness(1.01); } .badge-verified { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.94); border: 1px solid var(--champagne); color: var(--ink); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--radius-pill); } .badge-verified svg { width: 12px; height: 12px; stroke: var(--gold-deep); stroke-width: 2.2; } .badge-purpose { position: absolute; top: 16px; right: 16px; z-index: 2; background: var(--grad-gold); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--radius-pill); } .prop-body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .prop-price { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; color: var(--gold-deep); } .prop-title { font-size: 1rem; font-weight: 600; color: var(--ink); } /* Result came from the surrounding city rather than the searched locality — say so rather than letting it look like an exact hit. */ .badge-nearby { /* bottom-left: top-right is taken by .badge-purpose, top-left by .badge-verified */ position: absolute; bottom: 14px; left: 16px; z-index: 2; font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--radius-pill); background: rgba(27, 27, 27, 0.62); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .search-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 18px; margin-bottom: 16px; background: var(--gold-soft); border: 1px solid var(--champagne); border-radius: var(--radius); font-size: 0.9rem; color: var(--ink-85); } .search-hint a { color: var(--gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .search-hint a:hover { color: var(--ink); } .results-head .count-sub { display: block; font-family: var(--font-sans); font-size: 0.8rem; color: var(--ink-40); letter-spacing: 0; margin-top: 2px; } /* Full listing sentence: "2,232 acre agricultural land for sale in Nipania, Ujjain - 122222". Clamped to two lines so cards in a grid keep a common height regardless of how long the locality name is. */ .prop-headline { font-size: 0.97rem; font-weight: 500; line-height: 1.45; color: var(--ink); margin: 0; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; } a:hover .prop-headline, .prop-card:hover .prop-headline { color: var(--gold-deep); } .prop-loc { display: flex; align-items: center; gap: 7px; color: var(--ink-40); font-size: 0.84rem; } .prop-loc svg { width: 13px; height: 13px; stroke: var(--gold); stroke-width: 1.8; flex: none; } .prop-meta { display: flex; gap: 18px; font-size: 0.8rem; color: var(--ink-60); padding: 14px 0 0; border-top: 1px solid var(--hairline-dark); margin-top: 10px; } .prop-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; } .prop-actions .btn { flex: 1; } /* Feature (fallback grid) */ .feature { padding: 38px 32px; } .feature .icon-tile { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--champagne); background: var(--gold-soft); margin-bottom: 24px; } .feature .icon-tile svg { width: 23px; height: 23px; stroke: var(--gold-deep); stroke-width: 1.5; } .feature h3 { margin-bottom: 12px; } .feature p { color: var(--ink-60); font-size: 0.92rem; } /* ---------- Editorial blocks (Why RainInfra) ---------- */ .edit-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 4vw, 64px); align-items: center; } .edit-block + .edit-block { margin-top: clamp(36px, 4vw, 56px); } .edit-block.reverse .edit-media { order: 2; } .edit-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3.4; border: 1px solid var(--champagne); } .edit-media img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.1) saturate(0.92) contrast(0.96); will-change: transform; } .edit-copy .eyebrow { margin-bottom: 20px; } .edit-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 30px; line-height: 1.2; } .edit-item { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--hairline-dark); } .edit-item:last-child { border-bottom: 1px solid var(--hairline-dark); } .edit-item .icon-tile { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--champagne); background: var(--gold-soft); display: grid; place-items: center; } .edit-item .icon-tile svg { width: 19px; height: 19px; stroke: var(--gold-deep); stroke-width: 1.5; } .edit-item h4 { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .edit-item p { font-size: 0.9rem; color: var(--ink-60); } /* ---------- Split (Who we are / About) ---------- */ .split { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(36px, 4vw, 64px); align-items: center; } .split-img { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--champagne); position: relative; aspect-ratio: 4/4.4; } .split-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.1) saturate(0.92) contrast(0.96); will-change: transform; } .mini-block { padding: 24px 0; border-top: 1px solid var(--hairline-dark); } .mini-block h3 { font-size: 1.08rem; margin-bottom: 8px; } .mini-block p { color: var(--ink-60); font-size: 0.94rem; } /* ---------- CTA banner ---------- */ .cta-banner { background: var(--grad-banner); background-size: 180% 180%; border-radius: var(--radius-lg); padding: clamp(44px, 5vw, 68px) clamp(28px, 5vw, 60px); text-align: center; color: #fff; position: relative; overflow: hidden; } .cta-banner .eyebrow { color: rgba(255,255,255,0.8); } .cta-banner h2 { color: #fff; margin: 16px 0 12px; } .cta-banner p { color: rgba(255,255,255,0.88); margin-bottom: 30px; font-size: 1.02rem; } .cta-banner .btn-white { background: var(--white); color: var(--gold-deep); } .cta-banner .btn-outline-white { border: 1px solid rgba(255,255,255,0.65); color: #fff; } .cta-banner .btn-outline-white:hover { background: rgba(255,255,255,0.1); } .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---------- Testimonials (scroll-snap rail) ---------- */ .tcar-wrap { position: relative; } .tcar { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 28px; scrollbar-width: none; -ms-overflow-style: none; } .tcar::-webkit-scrollbar { display: none; } .tcar-card { flex: 0 0 min(480px, 86vw); scroll-snap-align: start; padding: clamp(34px, 3.6vw, 52px); display: flex; flex-direction: column; gap: 26px; } .stars { display: flex; gap: 5px; } .stars svg { width: 15px; height: 15px; fill: var(--gold-2); stroke: none; } .tcar-card blockquote { font-family: var(--font-serif); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink); } .testi-who { display: flex; align-items: center; gap: 14px; margin-top: auto; } .avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold-deep); font-family: var(--font-serif); font-size: 1.05rem; } .testi-who .name { font-weight: 600; font-size: 0.92rem; color: var(--ink); } .testi-who .role { font-size: 0.78rem; color: var(--ink-40); } .tcar-progress { max-width: 220px; margin: 22px auto 0; height: 1px; background: var(--champagne); position: relative; } .tcar-progress span { position: absolute; left: 0; top: -0.5px; height: 2px; width: 20%; background: var(--gold-deep); transition: none; } /* ---------- FAQ ---------- */ .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--hairline-dark); background: transparent; } .faq-item:first-child { border-top: 1px solid var(--hairline-dark); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 6px; text-align: left; font-family: var(--font-serif); font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink); transition: color .35s ease; } .faq-q:hover { color: var(--gold-deep); } .faq-q .faq-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--champagne); } .faq-q .faq-icon svg { width: 14px; height: 14px; stroke: var(--gold-deep); stroke-width: 1.8; } .faq-item.open .faq-q { color: var(--gold-deep); } .faq-a { height: 0; overflow: hidden; opacity: 0; } .faq-a-inner { padding: 0 6px 30px; color: var(--ink-60); font-size: 0.97rem; max-width: 640px; line-height: 1.75; } /* ---------- Footer ---------- */ .site-footer { background: var(--white); border-top: 1px solid var(--champagne); padding: clamp(40px, 4.4vw, 58px) 0 0; } .footer-top { padding-bottom: clamp(26px, 3vw, 38px); border-bottom: 1px solid var(--hairline-dark); margin-bottom: clamp(26px, 3vw, 38px); } .footer-cta-line { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .footer-cta-line h2 { font-size: clamp(1.8rem, 3.8vw, 3rem); max-width: 600px; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; padding-bottom: 34px; } .footer-brand p { color: var(--ink-60); font-size: 0.92rem; margin: 20px 0 26px; max-width: 320px; } .footer-col h4 { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 22px; font-weight: 600; } .footer-col ul { display: flex; flex-direction: column; gap: 13px; } .footer-col a { color: var(--ink-60); font-size: 0.92rem; transition: color .35s; } .footer-col a:hover { color: var(--gold-deep); } .footer-contact li { display: flex; align-items: center; gap: 11px; color: var(--ink-60); font-size: 0.92rem; } .footer-contact svg { width: 15px; height: 15px; stroke: var(--gold-deep); stroke-width: 1.6; flex: none; } .social-row { display: flex; gap: 10px; } .social-row a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--champagne); transition: all .4s ease; } .social-row a svg { width: 16px; height: 16px; stroke: var(--gold-deep); stroke-width: 1.6; } .social-row a:hover { background: var(--grad-gold); border-color: transparent; } .social-row a:hover svg { stroke: #fff; } .footer-bottom { border-top: 1px solid var(--hairline-dark); padding: 26px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.8rem; color: var(--ink-40); } /* ---------- Contact widget ---------- */ .contact-widget { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .cw-popup { background: var(--white); border: 1px solid var(--champagne); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(27,27,27,0.14); padding: 24px; width: 260px; opacity: 0; transform: translateY(12px) scale(.97); pointer-events: none; transform-origin: bottom right; } .cw-popup.show { pointer-events: auto; } .cw-popup h4 { font-family: var(--font-serif); font-size: 1.02rem; margin-bottom: 5px; color: var(--ink); } .cw-popup p { font-size: 0.8rem; color: var(--ink-40); margin-bottom: 16px; } .cw-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .cw-actions a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px; border: 1px solid var(--champagne); border-radius: 12px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink-60); transition: all .35s ease; } .cw-actions a svg { width: 19px; height: 19px; stroke: var(--gold-deep); stroke-width: 1.6; } .cw-actions a:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-deep); } .cw-toggle { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); box-shadow: var(--shadow-gold); transition: box-shadow .4s ease; } .cw-toggle:hover { box-shadow: 0 14px 36px rgba(201,162,39,0.36); } .cw-toggle svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 1.8; } /* ---------- Page hero (inner pages) ---------- */ .page-hero { position: relative; padding: calc(var(--header-h) + clamp(32px, 3.6vw, 46px)) 0 clamp(30px, 3.6vw, 44px); overflow: hidden; } /* Inner pages keep their wash — those photos are bright and their copy is dark ink. content/inset are restated because the base rule now sets content:none, which would otherwise suppress this element. */ .page-hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250,248,243,0.97) 0%, rgba(250,248,243,0.92) 48%, rgba(250,248,243,0.5) 100%); } .breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 26px; } .breadcrumb a:hover { color: var(--gold-deep); } .breadcrumb .sep { color: var(--gold); } /* ---------- Forms ---------- */ .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .form-group label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); } .input, .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px 18px; border: 1px solid var(--champagne); border-radius: 12px; background: var(--white); font-size: 0.95rem; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus, .input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.13); } .form-group .error-msg { font-size: 0.78rem; color: #A3541B; display: none; } .form-group.invalid input, .form-group.invalid textarea { border-color: #B0492F; } .form-group.invalid .error-msg { display: block; } .form-note { font-size: 0.8rem; color: var(--ink-40); } .checkbox-row { display: flex; align-items: flex-start; gap: 11px; font-size: 0.86rem; color: var(--ink-60); } .checkbox-row input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--gold); } .checkbox-row a { color: var(--gold-deep); font-weight: 500; } /* Auth split */ .auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .auth-panel { position: relative; overflow: hidden; display: flex; align-items: flex-end; } .auth-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.1) saturate(0.92) contrast(0.96); } .auth-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,27,27,0) 34%, rgba(27,27,27,0.68) 100%); } .auth-panel-copy { position: relative; z-index: 2; padding: clamp(40px, 5vw, 72px); color: #fff; } .auth-panel-copy .eyebrow { color: var(--champagne); } .auth-panel-copy h2 { color: #fff; margin: 16px 0 10px; font-size: clamp(1.6rem, 2.6vw, 2.3rem); } .auth-panel-copy p { color: rgba(255,255,255,0.85); max-width: 400px; } .auth-perks { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; } .auth-perks li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9rem; color: rgba(255,255,255,0.9); } .auth-perks svg { width: 16px; height: 16px; stroke: var(--gold-2); flex: none; margin-top: 3px; stroke-width: 2; } .auth-form-side { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 48px) 7% 64px; background: var(--warm-white); } .auth-card { background: var(--white); border: 1px solid var(--champagne); border-radius: var(--radius-lg); padding: clamp(32px, 3.6vw, 52px); max-width: 500px; width: 100%; margin: 0 auto; } .auth-card h1 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 18px 0 6px; } .auth-card .sub { color: var(--ink-40); font-size: 0.9rem; margin-bottom: 32px; } .auth-alt { text-align: center; margin-top: 24px; font-size: 0.88rem; color: var(--ink-40); } .auth-alt a { color: var(--gold-deep); font-weight: 500; } /* ---------- Search page ---------- */ .search-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 3.4vw, 48px); align-items: start; } .filter-panel { position: sticky; top: calc(var(--header-h) + 24px); background: var(--white); border: 1px solid var(--champagne); border-radius: var(--radius-lg); padding: 30px; /* Panel may be taller than the viewport — let it scroll internally so every filter (incl. Budget) stays reachable while pinned */ max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--champagne) transparent; } .filter-panel::-webkit-scrollbar { width: 5px; } .filter-panel::-webkit-scrollbar-thumb { background: var(--champagne); border-radius: 4px; } .filter-panel::-webkit-scrollbar-track { background: transparent; } @media (max-width: 900px) { .filter-panel { max-height: none; overflow-y: visible; } } .filter-panel h3 { font-size: 1.08rem; margin-bottom: 22px; } .filter-block { padding: 20px 0; border-top: 1px solid var(--hairline-dark); } .filter-block > label { display: block; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); margin-bottom: 14px; } .pill-row { display: flex; flex-wrap: wrap; gap: 8px; } .pill { padding: 9px 18px; border: 1px solid var(--champagne); border-radius: var(--radius-pill); font-size: 0.83rem; font-weight: 500; color: var(--ink-60); background: var(--white); transition: all .35s ease; } .pill:hover { border-color: var(--gold); color: var(--gold-deep); } .pill.active { background: var(--grad-gold); color: #fff; border-color: transparent; } .range-out { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-60); margin-top: 10px; } input[type="range"] { width: 100%; accent-color: var(--gold); } .chips-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; min-height: 8px; } .chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border: 1px solid var(--gold); border-radius: var(--radius-pill); color: var(--gold-deep); font-size: 0.8rem; font-weight: 500; background: var(--gold-soft); } .chip button { color: var(--gold-deep); font-size: 0.95rem; line-height: 1; } .results-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .results-head .count { font-family: var(--font-serif); font-size: 1.35rem; color: var(--ink); } .results-head .count em { color: var(--gold-deep); font-style: normal; } .view-sort { display: flex; align-items: center; gap: 12px; } .view-toggle { display: inline-flex; border: 1px solid var(--champagne); border-radius: 11px; overflow: hidden; } .view-toggle button { padding: 10px 13px; background: var(--white); color: var(--ink-40); transition: all .3s; } .view-toggle button.active { background: var(--gold-soft); color: var(--gold-deep); } .view-toggle svg { width: 16px; height: 16px; stroke-width: 1.8; display: block; } .results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .results-grid.list-view { grid-template-columns: minmax(0, 1fr); } .results-grid.list-view .prop-card { flex-direction: row; } .results-grid.list-view .prop-media { flex: 0 0 340px; aspect-ratio: auto; } .empty-state { text-align: center; padding: clamp(44px, 5vw, 68px) 24px; } .empty-state .icon-tile { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 26px; display: grid; place-items: center; border: 1px solid var(--champagne); background: var(--gold-soft); } .empty-state .icon-tile svg { width: 30px; height: 30px; stroke: var(--gold-deep); stroke-width: 1.4; } .empty-state h3 { margin-bottom: 10px; } .empty-state p { color: var(--ink-40); margin-bottom: 28px; } .filter-toggle-mobile { display: none; } /* ---------- Property detail ---------- */ .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(30px, 4vw, 52px); align-items: start; } .gallery-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--champagne); aspect-ratio: 16/9.4; background: var(--gold-soft); } .gallery-main img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.1) saturate(0.92) contrast(0.96); will-change: transform; } .thumb-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .thumb { border-radius: 12px; overflow: hidden; border: 1px solid var(--champagne); cursor: pointer; aspect-ratio: 4/3; padding: 0; transition: border-color .35s, opacity .35s; opacity: .6; } .thumb img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.1) saturate(0.92) contrast(0.96); } .thumb.active { border-color: var(--gold); opacity: 1; } .thumb:hover { opacity: 1; } .detail-head { margin: 36px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .detail-price { font-family: var(--font-serif); font-size: 2.1rem; color: var(--gold-deep); } .spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 34px 0; } .spec-cell { border: 1px solid var(--champagne); background: var(--white); border-radius: var(--radius); padding: 20px; } .spec-cell .k { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; } .spec-cell .v { font-weight: 600; margin-top: 6px; color: var(--ink); } .amenities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .amenities li { display: flex; align-items: center; gap: 11px; font-size: 0.9rem; color: var(--ink-60); padding: 13px 16px; background: var(--white); border: 1px solid var(--hairline-dark); border-radius: 11px; } .amenities svg { width: 16px; height: 16px; stroke: var(--gold-deep); stroke-width: 1.6; flex: none; } .contact-rail { position: sticky; top: calc(var(--header-h) + 24px); } .seller-card { padding: 32px; } .seller-card .prop-price { font-size: 1.8rem; } .seller-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; } .tag-soft { background: var(--gold-soft); border: 1px solid var(--champagne); color: var(--gold-deep); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em; padding: 6px 13px; border-radius: var(--radius-pill); } .seller-card .btn { margin-bottom: 10px; } .sticky-bar-mobile { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; background: var(--white); border-top: 1px solid var(--champagne); padding: 13px 18px; gap: 12px; align-items: center; } .sticky-bar-mobile .price { font-family: var(--font-serif); color: var(--gold-deep); font-size: 1.25rem; } /* ---------- Projects ---------- */ .tab-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; } .status-tag { position: absolute; top: 16px; left: 16px; z-index: 2; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.94); border: 1px solid var(--champagne); color: var(--gold-deep); } .proj-tags { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- Timeline (About) ---------- */ .timeline { position: relative; } .timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--champagne); } .tl-item { position: relative; padding: 0 0 40px 46px; } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: 2px; top: 7px; width: 13px; height: 13px; border-radius: 50%; background: var(--warm-white); border: 1.5px solid var(--gold); } .tl-item h3 { font-size: 1.08rem; margin-bottom: 7px; } .tl-item p { color: var(--ink-60); font-size: 0.93rem; } /* Stats band */ .stats-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; } .stats-band > * + * { border-left: 1px solid var(--champagne); } .stat-big { padding: 10px 16px; } .stat-big .num { font-family: var(--font-serif); font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 500; color: var(--ink); } .stat-big .num span { color: inherit; } .stat-big .lbl { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; margin-top: 8px; } /* ---------- Legal ---------- */ .legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; } .toc { position: sticky; top: calc(var(--header-h) + 28px); border-left: 1px solid var(--champagne); } .toc a { display: block; padding: 9px 0 9px 20px; font-size: 0.86rem; color: var(--ink-40); border-left: 1px solid transparent; margin-left: -1px; transition: all .35s; } .toc a.active, .toc a:hover { color: var(--gold-deep); border-left-color: var(--gold); } .legal-body h2 { font-size: 1.5rem; margin-bottom: 16px; } .legal-body section { padding: 34px 0; border-bottom: 1px solid var(--champagne); } .legal-body section:last-child { border-bottom: none; } .legal-body p, .legal-body li { color: var(--ink-60); font-size: 0.97rem; margin-bottom: 13px; line-height: 1.85; } .legal-body ul li { padding-left: 20px; position: relative; } .legal-body ul li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } /* ---------- 404 ---------- */ .notfound { min-height: 82vh; display: grid; place-items: center; text-align: center; padding-top: var(--header-h); } .notfound .code { font-family: var(--font-serif); font-size: clamp(6rem, 16vw, 11rem); font-weight: 500; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold); } /* ---------- Contact seller ---------- */ .contact-seller-wrap { max-width: 720px; margin: 0 auto; } .prop-summary { display: flex; gap: 20px; padding: 20px; align-items: center; margin-bottom: 32px; } .prop-summary img { width: 136px; height: 100px; object-fit: cover; border-radius: 12px; filter: sepia(0.1) saturate(0.92) contrast(0.96); flex: none; } .direct-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0; } .direct-row a { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px; border: 1px solid var(--champagne); border-radius: 12px; font-weight: 500; font-size: 0.88rem; color: var(--ink-60); transition: all .35s; } .direct-row a svg { width: 17px; height: 17px; stroke: var(--gold-deep); stroke-width: 1.6; } .direct-row a:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-deep); } .divider-label { display: flex; align-items: center; gap: 18px; color: var(--ink-40); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; margin: 30px 0; } .divider-label { justify-content: center; } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 15px 28px; border-radius: var(--radius-pill); font-size: 0.88rem; opacity: 0; pointer-events: none; z-index: 2000; display: flex; align-items: center; gap: 11px; transition: opacity .45s, transform .45s; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast svg { width: 16px; height: 16px; stroke: var(--gold-2); stroke-width: 2; } /* ---------- Page veil / preloader / progress ---------- */ .page-veil { position: fixed; inset: 0; z-index: 4000; background: var(--warm-white); pointer-events: none; opacity: 0; } .page-veil .gold-line { position: absolute; top: 0; left: 0; height: 2px; width: 0%; background: var(--grad-gold); } .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--grad-gold); z-index: 3000; pointer-events: none; } .preloader { position: fixed; inset: 0; z-index: 6000; background: var(--warm-white); display: grid; place-items: center; } .pl-inner { text-align: center; } /* Intro shows the brand artwork itself. The circled "R" (.pl-mark) and the letter-spaced text wordmark (.pl-word) it sat above are both gone. */ .pl-logo { display: block; width: auto; height: clamp(30px, 5vw, 46px); margin: 0 auto; max-width: min(72vw, 400px); } .pl-bar { width: 180px; height: 1px; background: var(--champagne); margin: 26px auto 16px; overflow: hidden; } .pl-bar span { display: block; height: 100%; width: 0; background: var(--gold-deep); } .pl-tag { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-40); } /* ---------- Cursor (subtle dot only — no ring) ---------- */ .cursor-dot { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 7000; opacity: 0; } .cursor-on .cursor-dot { opacity: 1; } .cursor-dot { width: 5px; height: 5px; background: var(--gold-deep); margin: -2.5px 0 0 -2.5px; } @media (pointer: coarse), (max-width: 1024px) { .cursor-dot { display: none; } } /* ---------- Split text masks / anti-flash ---------- */ .w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; } /* No JS, no reveal, no need to clip — and clipping would eat the hero headline's text-shadow. main.js also un-clips each mask once its line has finished animating. */ body:not(.js-anim) .w-mask { overflow: visible; } .w-mask .w { display: inline-block; will-change: transform; } .js-anim .hero h1, .js-anim .page-hero h1, .js-anim .section-head h2, .js-anim [data-split], .js-anim [data-hero] { opacity: 0; } .js-anim .split-img, .js-anim .edit-media, .js-anim [data-clip] { clip-path: inset(0 100% 0 0); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-layout { grid-template-columns: minmax(0, 1fr); } .contact-rail { position: static; } .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 900px) { .main-nav, .header-cta .btn-ghost { display: none; } .header-cta .btn-primary { display: none; } .hamburger { display: flex; } .grid-3 { grid-template-columns: minmax(0, 1fr); } .split, .edit-block { grid-template-columns: minmax(0, 1fr); gap: 40px; } .edit-block.reverse .edit-media { order: 0; } .auth-wrap { grid-template-columns: minmax(0, 1fr); } .auth-panel { min-height: 320px; order: -1; } .search-layout { grid-template-columns: minmax(0, 1fr); } .filter-panel { position: static; display: none; } .filter-panel.open-mobile { display: block; } .filter-toggle-mobile { display: inline-flex; } .legal-layout { grid-template-columns: minmax(0, 1fr); } .toc { position: static; display: flex; flex-wrap: wrap; gap: 4px; border-left: none; border-bottom: 1px solid var(--champagne); padding-bottom: 16px; margin-bottom: 14px; } .toc a { border-left: none; padding: 7px 13px; border-radius: var(--radius-pill); } .toc a.active { background: var(--gold-soft); } .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } .stats-band > *:nth-child(3) { border-left: none; } } @media (max-width: 640px) { .results-grid, .grid-4, .grid-2 { grid-template-columns: minmax(0, 1fr); } .results-grid.list-view .prop-card { flex-direction: column; } .results-grid.list-view .prop-media { flex: none; aspect-ratio: 4/2.9; } .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .thumb-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .amenities { grid-template-columns: minmax(0, 1fr); } .direct-row { grid-template-columns: minmax(0, 1fr); } .sticky-bar-mobile { display: flex; } .auth-form-side { padding: calc(var(--header-h) + 32px) 20px 52px; } .hero { min-height: auto; } .hero-metrics { flex-wrap: wrap; } .prop-summary { flex-direction: column; align-items: flex-start; } } /* ============================================================ SELECTION CONTROLS — gold-designed selects, options & choices ============================================================ */ :root { accent-color: var(--gold); } select:not(.sf-native), .form-group select, select.input { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A6D1F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-color: var(--white); padding-right: 40px; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; } @media (hover: hover) { select:not(.sf-native):hover, .form-group select:hover { border-color: var(--gold); background-color: var(--gold-soft); } } select option { background: var(--white); color: var(--ink); padding: 10px; } select option:checked { background: var(--gold-soft); color: var(--gold-deep); font-weight: 600; } select option:hover { background: var(--gold-soft); } /* ---------- Luxe select (custom gold dropdown, desktop) ---------- */ .luxe-select { position: relative; width: 100%; height: 100%; } .ls-trigger { width: 100%; min-height: 52px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; text-align: left; border: 1px solid var(--champagne); border-radius: 12px; background: var(--white); font-size: 0.94rem; color: var(--ink); cursor: pointer; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; } .ls-trigger:hover { border-color: var(--gold); background: var(--gold-soft); } .ls-trigger:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.14); } .ls-trigger svg { width: 12px; height: 12px; stroke: var(--gold-deep); stroke-width: 2; flex: none; transition: transform .35s ease; } .luxe-select.open .ls-trigger { border-color: var(--gold); } .luxe-select.open .ls-trigger svg { transform: rotate(180deg); } .ls-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 800; background: var(--white); border: 1px solid var(--champagne); border-radius: 14px; box-shadow: 0 22px 54px rgba(27, 27, 27, 0.14); padding: 8px; max-height: 280px; overflow-y: auto; display: none; scrollbar-width: thin; scrollbar-color: var(--champagne) transparent; } .ls-panel::-webkit-scrollbar { width: 5px; } .ls-panel::-webkit-scrollbar-thumb { background: var(--champagne); border-radius: 4px; } .luxe-select.open .ls-panel { display: block; } .ls-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 9px; text-align: left; font-size: 0.92rem; color: var(--ink-85); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .ls-option:hover, .ls-option.focused { background: var(--gold-soft); color: var(--gold-deep); } .ls-option.selected { color: var(--gold-deep); font-weight: 600; background: var(--gold-soft); } .ls-option svg { width: 14px; height: 14px; stroke: var(--gold-deep); stroke-width: 2.2; flex: none; opacity: 0; } .ls-option.selected svg { opacity: 1; } .view-sort .luxe-select { width: auto; min-width: 200px; height: auto; } .view-sort .ls-trigger { min-height: 44px; padding: 9px 14px; font-size: 0.88rem; } /* Pills & segmented toggles — richer states */ .pill:active, .seg-toggle button:active { transform: scale(0.97); } .pill.active { box-shadow: 0 6px 18px rgba(201, 162, 39, 0.28); } .seg-toggle button.active { box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3); } .view-toggle button:hover { color: var(--gold-deep); } input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); cursor: pointer; } input[type="range"]::-webkit-slider-thumb { cursor: grab; } /* ============================================================ RESPONSIVE REFINEMENT — compact controls on tablet & mobile ============================================================ */ @media (max-width: 1024px) { :root { --header-h: 70px; } body { font-size: 15.5px; } .btn { padding: 12px 24px; font-size: 0.88rem; } .btn-lg { padding: 14px 30px; font-size: 0.9rem; } .btn-sm { padding: 10px 18px; font-size: 0.82rem; } .seg-toggle button { padding: 9px 20px; font-size: 0.85rem; } .pill { padding: 8px 15px; font-size: 0.8rem; } .cw-toggle { width: 52px; height: 52px; } .cw-toggle svg { width: 21px; height: 21px; } .contact-widget { right: 18px; bottom: 18px; } .pillar, .feature { padding: 30px 26px; } .prop-body { padding: 20px 22px 22px; } .seller-card { padding: 26px; } .filter-panel { padding: 24px; } } @media (max-width: 640px) { :root { --header-h: 64px; } .container { padding: 0 18px; } section { padding: 40px 0; } .section-head { margin-bottom: 24px; } h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); } h2 { font-size: clamp(1.55rem, 6.4vw, 2rem); } .hero h1 { margin: 22px 0 16px; } .hero { padding: calc(var(--header-h) + 24px) 0 36px; } .hero-tag { font-size: 9.5px; padding: 7px 14px; letter-spacing: 0.16em; } .hero p.lede { font-size: 0.95rem; } .hero-metrics { gap: 18px; margin-top: 36px; padding-top: 24px; } .hero-metric .hm-num { font-size: 1.4rem; } .hero-metric .hm-lbl { font-size: 9px; letter-spacing: 0.14em; } .hero-metric-sep { height: 34px; } .trust-strip { gap: 16px; margin-top: 22px; } .trust-item { font-size: 0.78rem; } .btn { padding: 11px 20px; font-size: 0.84rem; } .btn-lg { padding: 13px 24px; font-size: 0.86rem; } .btn-sm { padding: 9px 14px; font-size: 0.78rem; } .cta-actions { flex-direction: column; align-items: stretch; } .cta-actions .btn { width: 100%; } .cta-banner { padding: 40px 20px; } .cta-banner p { margin-bottom: 30px; font-size: 0.94rem; } .search-field input, .sf-trigger { font-size: 0.92rem; } .seg-toggle button { padding: 8px 18px; } .logo { font-size: 1.25rem; gap: 9px; } .header-cta { gap: 6px; } .prop-price { font-size: 1.25rem; } .prop-body { padding: 18px 18px 20px; gap: 7px; } .prop-actions { gap: 8px; padding-top: 12px; } .badge-verified, .badge-purpose { font-size: 9px; padding: 6px 10px; top: 12px; } .badge-verified { left: 12px; } .badge-purpose { right: 12px; } .edit-copy h3 { font-size: 1.35rem; margin-bottom: 20px; } .edit-item { padding: 18px 0; gap: 14px; } .edit-item .icon-tile { width: 40px; height: 40px; } .mini-block { padding: 18px 0; } .faq-q { padding: 20px 2px; font-size: 0.98rem; } .faq-q .faq-icon { width: 30px; height: 30px; } .faq-a-inner { font-size: 0.9rem; padding-bottom: 24px; } .tcar-card { flex-basis: min(320px, 86vw); padding: 26px 24px; gap: 18px; } .tcar-card blockquote { font-size: 1rem; } .avatar { width: 40px; height: 40px; font-size: 0.9rem; } .detail-price { font-size: 1.6rem; } .spec-grid { gap: 10px; margin: 24px 0; } .spec-cell { padding: 14px; } .seller-card { padding: 22px; } .seller-card .prop-price { font-size: 1.45rem; } .thumb-strip { gap: 8px; margin-top: 10px; } .form-group input, .form-group select, .form-group textarea, .input { padding: 12px 14px; font-size: 0.92rem; } .form-group { margin-bottom: 16px; } .auth-card h1 { font-size: 1.45rem; } .auth-panel { min-height: 260px; } .auth-panel-copy { padding: 28px 22px; } .auth-perks { margin-top: 18px; gap: 10px; } .footer-top { padding-bottom: 28px; margin-bottom: 28px; } .footer-cta-line h2 { font-size: 1.5rem; } .footer-cta-line .btn { width: 100%; } .site-footer { padding-top: 42px; } .footer-grid { padding-bottom: 30px; } .social-row a { width: 38px; height: 38px; } .cw-popup { width: min(240px, calc(100vw - 40px)); padding: 18px; } .cw-toggle { width: 48px; height: 48px; } .toast { width: max-content; max-width: calc(100vw - 32px); font-size: 0.82rem; padding: 12px 20px; bottom: 84px; } .breadcrumb { font-size: 10px; margin-bottom: 18px; } .results-head .count { font-size: 1.1rem; } .empty-state { padding: 56px 18px; } .stat-big .num { font-size: 2rem; } .tl-item { padding: 0 0 28px 38px; } .legal-body h2 { font-size: 1.25rem; } .legal-body p, .legal-body li { font-size: 0.92rem; } } /* Very small phones */ @media (max-width: 380px) { .btn { padding: 10px 16px; font-size: 0.8rem; } .hero-metrics { flex-wrap: wrap; row-gap: 14px; } .hero-metric-sep { display: none; } .prop-actions { flex-direction: column; } .seg-toggle { width: 100%; } .seg-toggle button { flex: 1; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js-anim .hero h1, .js-anim .page-hero h1, .js-anim .section-head h2, .js-anim [data-split], .js-anim [data-hero] { opacity: 1; } .js-anim .split-img, .js-anim .edit-media, .js-anim [data-clip] { clip-path: none; } } /* ---------- File inputs (gold control instead of OS default) ---------- */ input[type="file"] { cursor: pointer; font-size: 0.88rem; color: var(--ink-60); padding: 9px 12px; } /* Base look (both spellings first, so neither overrides the hover rules) */ input[type="file"]::-webkit-file-upload-button, input[type="file"]::file-selector-button { margin-right: 14px; padding: 9px 22px; border-radius: var(--radius-pill); border: 1px solid var(--gold); background: var(--gold-soft); color: var(--gold-deep); font-family: var(--font-sans); font-size: 0.83rem; font-weight: 500; letter-spacing: 0.03em; cursor: pointer; box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .25s ease; } /* Hover: fills gold, lifts slightly, soft glow. Triggered from the whole field so it reacts as the cursor approaches. */ input[type="file"]:hover::-webkit-file-upload-button, input[type="file"]:hover::file-selector-button, input[type="file"]::-webkit-file-upload-button:hover, input[type="file"]::file-selector-button:hover { background: linear-gradient(135deg, #D4AF37 0%, #9C7A24 100%); border-color: transparent; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201, 162, 39, 0.32); } input[type="file"]:active::-webkit-file-upload-button, input[type="file"]:active::file-selector-button { transform: translateY(0); box-shadow: 0 4px 10px rgba(201, 162, 39, 0.24); } /* The field itself warms up on hover so the whole control feels alive */ input[type="file"]:hover { border-color: var(--gold); background: var(--gold-soft); } /* ============================================================ POLISH PASS — findings from the rendered audit ============================================================ */ /* 1. Unify form-control radius (was drifting 10/11/12px across files) */ :root { --radius-input: 12px; } .input, .form-group input, .form-group select, .form-group textarea, .search-field input, .field input, .field select, .field textarea, .form-grid input, .form-grid select, .form-grid textarea, .grid-12 input, .grid-12 select, .grid-12 textarea, #typeFieldsContainer input, #typeFieldsContainer select, #typeFieldsContainer textarea, .form-control, .form-select { border-radius: var(--radius-input); } /* 2. Footer links were only ~18px tall on mobile: below a comfortable tap target. Give them real height without changing desktop rhythm. */ @media (max-width: 900px) { .footer-col ul { gap: 2px; } .footer-col a, .footer-contact a { display: inline-block; padding: 9px 0; min-height: 40px; } .footer-contact li { padding: 2px 0; } .social-row a { width: 44px; height: 44px; } .breadcrumb a { display: inline-block; padding: 4px 0; } } /* 3. Maps: clip tiles to the rounded container and stop Leaflet's default fonts leaking into the page's type system. */ #map, #propMap, .leaflet-container { overflow: hidden; font-family: var(--font-sans) !important; } .leaflet-container a, .leaflet-control, .leaflet-popup-content { font-family: var(--font-sans) !important; } .leaflet-control-zoom a { color: var(--gold-deep) !important; border-color: var(--champagne) !important; font-family: var(--font-sans) !important; } .leaflet-popup-content-wrapper { border-radius: var(--radius) !important; } /* 4. Consistent focus ring for every interactive control */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } /* 5. Long unbroken strings (addresses, emails) must not force overflow */ .bp-loc, .prop-loc, .footer-contact li, .dl-row dd, .legal-body p, .auth-card p { overflow-wrap: anywhere; } /* 6. Media placeholders keep card geometry when an image is missing */ .no-media, .bp-media .no-media { min-height: 120px; } /* 7. Footer/nav logo needs a comfortable tap area on touch screens */ @media (max-width: 900px) { .site-footer .logo, .app-header .logo { padding: 6px 0; } .mm-close, .ri-modal-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; } } /* 8. Testimonial rail: hint that it scrolls, and keep snap tidy */ .tcar { scroll-padding-left: 4px; } .tcar-wrap { position: relative; } /* 9. Disabled/aria-busy states read consistently */ [disabled], .is-disabled { opacity: .55; cursor: not-allowed; } /* 10. Selection colour matches the brand instead of browser blue */ ::selection { background: var(--champagne); color: var(--ink); } /* 11. Touch floor: every button-like control keeps a comfortable hit area on small screens (WCAG 2.2 target size). */ @media (max-width: 900px) { .btn, .pill, .tab-bar a, .view-toggle button, .app-burger, .hamburger, .cw-toggle, .mm-close, .btn-ghost, .seg-toggle button, .pagination a, .pagination span { min-height: 42px; } .btn { display: inline-flex; align-items: center; justify-content: center; } .btn-sm { min-height: 40px; } /* icon-only controls become square */ .btn:has(> svg:only-child), .app-actions .btn-ghost { min-width: 42px; } .link-gold { display: inline-flex; align-items: center; padding: 8px 0; min-height: 40px; } } /* Leaflet control polish + breadcrumb touch area (public pages) */ .leaflet-control-zoom a { width: 34px !important; height: 34px !important; line-height: 34px !important; background: var(--white) !important; } .leaflet-control-zoom a:hover { background: var(--gold-soft) !important; } .leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.85) !important; } @media (max-width: 900px) { .leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; } .breadcrumb a { padding: 9px 0; min-height: 38px; display: inline-flex; align-items: center; } } /* ============================================================ Hero search: location detection + locality autocomplete ============================================================ */ .geo-field { position: relative; } /* "Use my location" control lives inside the location field */ .geo-btn { flex: none; width: 30px; height: 30px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: transparent; border: 1px solid transparent; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, transform .3s ease; } .geo-btn svg { width: 15px; height: 15px; stroke: var(--gold-deep); fill: none; stroke-width: 1.7; } .geo-btn:hover { background: var(--gold-soft); border-color: var(--champagne); } .geo-btn:active { transform: scale(0.92); } .geo-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .geo-btn.is-busy { pointer-events: none; } .geo-btn.is-busy svg { animation: geo-spin 1.1s linear infinite; } .geo-btn.is-on svg { stroke: #fff; } .geo-btn.is-on { background: var(--grad-gold); border-color: transparent; } @keyframes geo-spin { to { transform: rotate(360deg); } } /* Status line under the label — replaces the old invisible note */ .geo-note { display: none; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); } .geo-note.show { display: inline-flex; } .geo-note.is-warn { color: var(--ink-40); } .geo-note .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .geo-note.is-busy .dot { animation: geo-pulse 1.1s ease-in-out infinite; } @keyframes geo-pulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } } /* Suggestion listbox — also used by the property-type field. isolation:isolate + opaque background keep it solid over the hero photo. */ .geo-list { position: absolute; top: calc(100% + 4px); left: -5px; right: -5px; z-index: 60; isolation: isolate; backdrop-filter: none; opacity: 1; background-color: #FFFFFF; background-image: none; border: 1px solid var(--champagne); border-radius: var(--radius); box-shadow: 0 20px 46px rgba(27, 27, 27, 0.16); padding: 4px; margin: 0; list-style: none; max-height: 264px; overflow-y: auto; display: none; line-height: 1.35; scrollbar-width: thin; scrollbar-color: var(--champagne) transparent; } .geo-list::-webkit-scrollbar { width: 5px; } .geo-list::-webkit-scrollbar-thumb { background: var(--champagne); border-radius: 4px; } .geo-list.show { display: block; } .geo-list.gl-type { min-width: 190px; } .geo-list.gl-type li[role="option"] { justify-content: flex-start; } .geo-list .gl-check { width: 14px; height: 14px; flex: none; stroke: var(--gold-deep); stroke-width: 2.2; opacity: 0; margin-left: auto; } .geo-list li.is-picked .gl-check { opacity: 1; } .geo-list li.is-picked .gl-name { color: var(--gold-deep); font-weight: 600; } .geo-list .gl-head { padding: 7px 11px 4px; font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-40); line-height: 1.4; } /* Rows were inheriting body's 1.7 line-height on a 16.5px strut, which inflated every row to ~46px. Pinning the line-height halves it. */ .geo-list li[role="option"] { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 9px; cursor: pointer; line-height: 1.35; transition: background .18s ease; } .geo-list .gl-text { line-height: 1.35; } .geo-list li[role="option"]:hover, .geo-list li[data-active], .geo-list:not(.gl-type) li[role="option"][aria-selected="true"] { background: var(--gold-soft); } .geo-list .gl-pin { width: 14px; height: 14px; flex: none; stroke: var(--gold-deep); fill: none; stroke-width: 1.7; } .geo-list .gl-text { min-width: 0; flex: 1; } .geo-list .gl-name { display: block; font-size: 0.9rem; color: var(--ink); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .geo-list .gl-name b { font-weight: 600; color: var(--gold-deep); } .geo-list .gl-sub { display: block; font-size: 0.73rem; color: var(--ink-40); line-height: 1.35; } .geo-list .gl-meta { font-size: 0.72rem; color: var(--ink-40); white-space: nowrap; flex: none; } .geo-list .gl-empty { padding: 14px 12px; font-size: 0.86rem; color: var(--ink-40); } /* ---------- Search module: responsive ---------- */ @media (max-width: 720px) { .search-shell { margin-top: 22px; } .search-module { grid-template-columns: minmax(0, 1fr); padding: 6px; gap: 0; border-radius: var(--radius); } .sf-divider { height: 1px; width: auto; margin: 0 14px; align-self: stretch; } .search-field { min-height: 50px; padding: 8px 12px; } .search-go { width: 100%; margin: 6px 0 0; justify-content: center; } .geo-list { left: 0; right: 0; } .geo-list.gl-type { min-width: 0; } } @media (max-width: 400px) { .seg-toggle { display: flex; width: 100%; } .seg-toggle button { flex: 1; padding: 9px 12px; } } @media (prefers-reduced-motion: reduce) { .geo-btn.is-busy svg, .geo-note.is-busy .dot { animation: none; } } /* ============================================================ MOBILE PASS Measured at a 390px viewport with the mobile cascade applied. Layout already fits (no horizontal overflow) — what failed was touch ergonomics: several controls sat well under the 44px target size, and in the search card the tappable area was the 26px input rather than the 60px field around it. ============================================================ */ @media (max-width: 720px) { /* The whole field is the target, not just the text node inside it. */ .search-field { position: relative; } .sf-loc input, .sf-trigger { min-height: 34px; } .sf-input { min-height: 34px; } /* 30px -> 40px, and pulled clear of the input's text */ .geo-btn { width: 40px; height: 40px; } .geo-btn svg { width: 17px; height: 17px; } /* three pills now (All / Buy / Rent) — give them a real height */ .seg-toggle button { min-height: 44px; padding: 10px 14px; } .search-go { min-height: 52px; } /* suggestion rows are a touch list on mobile */ .geo-list li[role="option"] { padding: 11px 12px; } .geo-list { max-height: 46vh; } } @media (max-width: 900px) { .site-header .logo { min-height: 44px; display: inline-flex; align-items: center; } .hamburger { min-width: 44px; min-height: 44px; } .mm-close { min-width: 44px; min-height: 44px; } } /* Metrics: three columns plus two rules will not sit on a phone row. Wrap earlier than 380px and drop the separators when they do. */ @media (max-width: 560px) { .hero .hero-metrics { flex-wrap: wrap; row-gap: 14px; column-gap: 22px; padding: 14px 16px; } .hero .hero-metric-sep { display: none; } .hero .hero-metric { flex: 1 1 90px; } .hero .trust-strip { gap: 8px; } .hero .trust-item { padding: 7px 12px; font-size: 0.76rem; } .hero .hero-tag { padding: 7px 13px; } } /* Nothing should be able to push the page sideways on a phone. */ @media (max-width: 900px) { .hero, .page-hero { overflow-x: clip; } .hero-content, .search-shell, .search-module, .search-field { min-width: 0; } } /* ============================================================ AUTH PAGES — login / signup ============================================================ */ /* The auth card used to be revealed purely by a GSAP tween with a 0.4s delay. gsap.fromTo applies its from-state immediately, so the form was opacity:0 from first paint and only became visible once the tween ran. If GSAP was slow, blocked, or the tab was backgrounded (which freezes requestAnimationFrame), the login form stayed invisible with no way to recover. The reveal is now opt-in: JS adds .auth-anim only once it has confirmed GSAP is live, and a failsafe strips it again. Default state is visible. */ .auth-card.auth-anim > * { opacity: 0; } /* Password field with a show/hide toggle */ .pw-wrap { position: relative; display: flex; } .pw-wrap input { flex: 1; padding-right: 46px; } .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 8px; color: var(--ink-40); transition: color .25s, background .25s; } .pw-toggle:hover { color: var(--gold-deep); background: var(--gold-soft); } .pw-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } .pw-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; fill: none; } .pw-toggle .icon-off { display: none; } .pw-toggle[aria-pressed="true"] .icon-on { display: none; } .pw-toggle[aria-pressed="true"] .icon-off { display: block; } /* Buttons that are mid-request: locked, dimmed, with a spinner */ .btn.is-busy { pointer-events: none; opacity: 0.72; position: relative; color: transparent !important; } .btn.is-busy::after { content: ""; position: absolute; top: 50%; left: 50%; width: 17px; height: 17px; margin: -9px 0 0 -9px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--white); animation: ri-spin .62s linear infinite; } .btn-outline.is-busy::after, .btn-ghost.is-busy::after { color: var(--gold-deep); } @keyframes ri-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation-duration: 2s; } } /* OTP entry — one obvious target, digits only */ .otp-field input { font-family: var(--font-serif); font-size: 1.5rem; text-align: center; letter-spacing: 0.42em; text-indent: 0.42em; padding: 14px 12px; } .otp-field input::placeholder { font-family: var(--font-sans); font-size: 0.86rem; letter-spacing: 0.04em; text-indent: 0; } .resend-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 0.85rem; color: var(--ink-40); } .resend-row button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--gold-deep); font-weight: 500; font-size: 0.85rem; font-family: inherit; } .resend-row button:disabled { color: var(--ink-40); cursor: default; text-decoration: none; } .resend-row button:not(:disabled):hover { text-decoration: underline; } /* Verified confirmation strip, replaces the OTP box once the code checks out */ .verified-note { display: flex; align-items: center; gap: 10px; margin: 22px 0 4px; padding: 13px 16px; border-radius: var(--radius); background: var(--gold-soft); border: 1px solid var(--champagne); font-size: 0.87rem; color: var(--gold-deep); font-weight: 500; } .verified-note svg { width: 16px; height: 16px; stroke: var(--gold-deep); stroke-width: 2; flex: none; } /* A field flagged invalid should say so to screen readers too */ .form-group input[aria-invalid="true"] { border-color: #B0492F; } /* ============================================================ GRID / FLEX SHRINK SAFETY Why the property cards kept spilling out of their column: `repeat(3, 1fr)` is shorthand for `repeat(3, minmax(auto, 1fr))`, and an `auto` minimum resolves to min-content. A track therefore refuses to go below the widest thing inside it. Measured on the live search page, one .prop-card could not shrink below 265px, driven by .prop-actions (220px) — the "View Details" (119px) and "Contact" (91px) buttons are flex:1 with the default min-width:auto, so neither would give ground. That put a hard floor of 848px under a 3-column grid and 557px under a 2-column one. The 3->2 breakpoint is at 1100px viewport, but on the search page the results column is only ~675px at that width because the 300px filter rail takes its share. Between roughly 1101px and 1274px the grid was 173px wider than the space it had, so the right-hand cards ran off the edge. Every track is now minmax(0, 1fr); the rules below let the contents follow. ============================================================ */ /* A grid or flex child may shrink past its min-content. Without this the track shrinks and the content overflows it instead — same bug, moved. */ .results-grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .spec-grid > *, .amenities > *, .detail-layout > *, .search-layout > *, .footer-grid > *, .stats-band > *, .direct-row > *, .bp-grid > *, .detail-cols > *, .form-grid > * { min-width: 0; } .prop-card, .prop-body, .prop-media { min-width: 0; } /* The two buttons were the actual floor. flex:1 without min-width:0 means "grow, but never below your own text width". */ .prop-actions { min-width: 0; } .prop-actions .btn { flex: 1 1 0; min-width: 0; } /* Long localities and headlines break rather than force the card wider. */ .prop-headline, .prop-title, .prop-loc, .prop-meta, .prop-price, .spec-cell .v, .dl-row dd { overflow-wrap: anywhere; } /* List view pins the thumbnail at 340px; below ~560px of column that alone is wider than the space available. */ @media (max-width: 900px) { .results-grid.list-view .prop-media { flex: 0 1 clamp(140px, 38%, 340px); } } /* Last line of defence: a card can never paint outside its own track. */ .results-grid > .prop-card, .grid-3 > .prop-card, .grid-4 > .prop-card { max-width: 100%; } /* A card's width depends on its container, not on the viewport — which is exactly why viewport breakpoints kept missing this. The filter rail eats 300px, so a "desktop" 1150px viewport can leave a card narrower than a phone does. Ask the card itself instead. */ .prop-card { container-type: inline-size; } @container (max-width: 250px) { .prop-actions { flex-direction: column; } .prop-actions .btn { width: 100%; } } @container (max-width: 150px) { .prop-media .badge-verified, .prop-media .badge-purpose, .prop-media .status-tag { font-size: 8.5px; padding: 4px 7px; letter-spacing: 0.06em; } } /* ============================================================ AUTH PAGES v2 — visual pass Same palette and hairline language as the rest of the site, just given more care than a plain stacked form. ============================================================ */ .auth-wrap { min-height: 100svh; } @supports not (min-height: 100svh) { .auth-wrap { min-height: 100vh; } } /* ---- Image panel ---------------------------------------- */ .auth-panel img { filter: sepia(0.12) saturate(0.9) contrast(0.95) brightness(0.92); transform: scale(1.03); } /* Two washes: a warm gold cast over the whole frame, then a deep foot so the copy always has something solid under it regardless of the photo. */ .auth-panel::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(150deg, rgba(138,109,31,0.30) 0%, rgba(27,27,27,0.05) 48%, rgba(27,27,27,0.10) 100%); } .auth-panel::after { background: linear-gradient(180deg, rgba(27,27,27,0) 26%, rgba(27,27,27,0.55) 66%, rgba(20,20,20,0.86) 100%); } .auth-panel-copy { z-index: 3; max-width: 520px; } .auth-panel-copy .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--champagne-2); } .auth-panel-copy .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold-2); flex: none; } .auth-panel-copy h2 { line-height: 1.14; letter-spacing: -0.015em; text-shadow: 0 2px 20px rgba(0,0,0,0.35); } .auth-panel-copy p { text-shadow: 0 1px 12px rgba(0,0,0,0.4); } /* Perks read as a checklist, not a bullet list */ .auth-perks li { gap: 13px; align-items: center; } .auth-perks li svg, .auth-perks li i { margin-top: 0; } .auth-perks li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(212,175,55,0.16); border: 1px solid rgba(212,175,55,0.55); background-image: url("data:image/svg+xml;utf8,"); background-size: 13px; background-repeat: no-repeat; background-position: center; } .auth-perks li i[data-icon], .auth-perks li svg { display: none; } /* Floating proof card over the photo */ .auth-proof { position: relative; z-index: 3; margin-top: 30px; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--radius); background: rgba(255,255,255,0.11); border: 1px solid rgba(255,255,255,0.20); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); } .auth-proof .n { font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1; letter-spacing: -0.02em; } .auth-proof .l { font-size: 0.78rem; color: rgba(255,255,255,0.78); line-height: 1.4; } .auth-proof .rule { width: 1px; align-self: stretch; background: rgba(255,255,255,0.22); } /* ---- Form side ------------------------------------------- */ .auth-form-side { background: radial-gradient(90% 60% at 50% 0%, var(--gold-soft) 0%, rgba(251,246,233,0) 62%), var(--warm-white); } .auth-card { position: relative; box-shadow: 0 1px 2px rgba(27,27,27,0.03), 0 12px 34px rgba(27,27,27,0.06); max-width: 520px; } /* Hairline of gold along the top edge, echoing the section rules elsewhere */ .auth-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--grad-gold); opacity: 0.85; } .auth-card h1 { letter-spacing: -0.02em; line-height: 1.18; } .auth-card .sub { margin-bottom: 8px; } /* rule between the intro and the fields */ .auth-rule { height: 1px; background: var(--hairline-dark); margin: 24px 0 28px; } /* ---- Inputs with a leading icon -------------------------- */ .field { position: relative; display: flex; align-items: center; } .field > svg { position: absolute; left: 15px; width: 17px; height: 17px; pointer-events: none; stroke: var(--ink-40); stroke-width: 1.7; fill: none; transition: stroke .25s; } .field > input { flex: 1; min-width: 0; padding-left: 43px !important; } .field:focus-within > svg { stroke: var(--gold-deep); } .form-group.invalid .field > svg { stroke: #B0492F; } /* password toggle sits inside the same shell */ .field .pw-toggle { right: 6px; } .field > input[type="password"], .field > input.has-toggle { padding-right: 46px !important; } .form-group input:focus, .form-group select:focus, .input:focus, .field:focus-within > input { box-shadow: 0 0 0 3px rgba(201,162,39,0.16); } /* ---- Role chosen with pills, not a dropdown --------------- */ .seg-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .seg-pills input { position: absolute; opacity: 0; pointer-events: none; } .seg-pills label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 13px 8px; text-align: center; cursor: pointer; border: 1px solid var(--champagne); border-radius: var(--radius); background: var(--white); transition: border-color .25s, background .25s, box-shadow .25s; font-size: 0.86rem; font-weight: 500; color: var(--ink-60); text-transform: none; letter-spacing: 0; } .seg-pills label svg { width: 18px; height: 18px; stroke: var(--ink-40); stroke-width: 1.6; fill: none; transition: stroke .25s; } .seg-pills label:hover { border-color: var(--gold); background: var(--gold-soft); } .seg-pills input:checked + label { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(201,162,39,0.14); } .seg-pills input:checked + label svg { stroke: var(--gold-deep); } .seg-pills input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; } /* ---- Step indicator for the signup flow ------------------- */ .auth-steps { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; } .auth-steps .st { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--ink-40); white-space: nowrap; } .auth-steps .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--champagne); background: var(--white); font-size: 0.7rem; font-weight: 600; color: var(--ink-40); transition: background .3s, border-color .3s, color .3s; } .auth-steps .st.on .dot { background: var(--grad-gold); border-color: transparent; color: #fff; } .auth-steps .st.on { color: var(--gold-deep); font-weight: 600; } .auth-steps .st.done .dot { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-deep); } .auth-steps .bar { flex: 1; height: 1px; background: var(--hairline-dark); min-width: 12px; } /* ---- Trust row under the form ----------------------------- */ .auth-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline-dark); } .auth-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.76rem; color: var(--ink-40); } .auth-trust svg { width: 13px; height: 13px; stroke: var(--gold-deep); stroke-width: 2; fill: none; flex: none; } /* ---- Back link -------------------------------------------- */ .auth-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; font-size: 0.82rem; color: var(--ink-40); transition: color .25s; } .auth-back:hover { color: var(--gold-deep); } .auth-back svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; } /* ---- Primary button gets a touch more presence ------------ */ .auth-card .btn-primary.btn-block { box-shadow: var(--shadow-gold); } .auth-card .btn-primary.btn-block:hover { transform: translateY(-1px); } /* ---- Small screens ---------------------------------------- */ @media (max-width: 900px) { .auth-panel { min-height: 260px; } .auth-proof { display: none; } .auth-panel-copy .auth-perks { display: none; } } @media (max-width: 520px) { .auth-steps .st span { display: none; } .auth-steps .st.on span { display: inline; } .seg-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .seg-pills label { font-size: 0.78rem; padding: 11px 4px; } } /* ============================================================ AUTH — long forms must not drag the image panel with them The signup card is ~1200px tall. Both columns are grid items in the same row, so the panel was being stretched to match it (1432px) while its copy stayed bottom-aligned — the headline started 858px down the page, 178px below the fold, with 858px of empty photo above it. You had to scroll past a blank image to read the pitch. The panel is now pinned to the viewport and scrolls nothing: one screen of photo, copy always in view, form scrolls beside it. ============================================================ */ @media (min-width: 901px) { .auth-wrap { align-items: start; } .auth-panel { position: sticky; top: 0; align-self: start; height: 100svh; min-height: 520px; } } @supports not (height: 100svh) { @media (min-width: 901px) { .auth-panel { height: 100vh; } } } /* On a short laptop screen the panel copy is taller than the panel. Shed the optional parts rather than let it overflow. */ @media (min-width: 901px) and (max-height: 860px) { .auth-proof { display: none; } .auth-panel-copy { padding-top: 0; padding-bottom: clamp(30px, 5vh, 54px); } .auth-panel-copy h2 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); } } @media (min-width: 901px) and (max-height: 660px) { .auth-perks { display: none; } .auth-panel-copy p { display: none; } } /* ---- Tighter form rhythm so the card is shorter to begin with ---- */ .auth-card .form-group { margin-bottom: 15px; } .auth-card .form-group label { margin-bottom: -2px; } .auth-card { padding: clamp(28px, 3vw, 40px) clamp(28px, 3.2vw, 46px) clamp(30px, 3vw, 40px); } .auth-card h1 { margin: 12px 0 5px; } .auth-card .sub { font-size: 0.875rem; margin-bottom: 0; } .auth-rule { margin: 18px 0 20px; } .auth-steps { margin-bottom: 22px; } .auth-back { margin-bottom: 14px; } .auth-trust { margin-top: 20px; padding-top: 18px; } .auth-alt { margin-top: 18px; } /* Two fields sharing a row */ .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } @media (max-width: 420px) { .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; } } /* ============================================================ MEDIA FRAMES — fit the whole photo, never crop or stretch Listings arrive at every shape: phone portraits, wide DSLR shots, square crops. A fixed 4:2.9 frame with object-fit:cover threw away most of a portrait photo; object-fit:fill would stretch it. Each frame now paints the same image twice — a blurred copy scaled to COVER the frame as a backdrop, and the untouched image CONTAINed on top. Nothing is cropped, nothing is distorted, and the frame is always completely filled. JS supplies --frame-bg from the image's own src. ============================================================ */ .prop-media, .gallery-main, .g-main, .bp-media { background: var(--gold-soft); } .prop-media::before, .gallery-main::before, .g-main::before, .bp-media::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--frame-bg, none); background-size: cover; background-position: center; /* scaled up so the blur's soft edge never shows a seam at the border. A smaller radius needs less overscan to hide that seam. */ transform: scale(1.06); filter: blur(5px) saturate(1.1) brightness(0.92); opacity: 0; transition: opacity .35s ease; } .prop-media.has-bg::before, .gallery-main.has-bg::before, .g-main.has-bg::before, .bp-media.has-bg::before { opacity: 1; } .prop-media > img, .gallery-main > img, .g-main > img, .g-main > video, .bp-media > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; /* the whole photo, undistorted */ object-position: center; } /* A photo already close to the frame's shape should still fill it edge to edge — contain would letterbox it by a hair for no reason. JS adds this when the aspect difference is under ~12%. */ .prop-media > img.fits, .gallery-main > img.fits, .g-main > img.fits, .bp-media > img.fits { object-fit: cover; } /* Badges sit above both layers */ .prop-media > .badge-verified, .prop-media > .badge-purpose, .prop-media > .badge-nearby, .prop-media > .status-tag, .gallery-main > .badge-verified, .gallery-main > .badge-purpose { z-index: 3; } /* Blur is a compositing cost and a results page can hold 80+ cards. Drop the backdrop on small screens, where cards are near full-width and the letterboxing is negligible anyway. */ @media (max-width: 640px) { .prop-media::before, .bp-media::before { display: none; } .prop-media > img, .bp-media > img { object-fit: cover; } } /* ============================================================ PAGINATION (public search) The dashboard rules live in broker.css, which base.html does not load. ============================================================ */ .pagination { display: flex; justify-content: center; align-items: center; gap: clamp(10px, 2vw, 20px); flex-wrap: wrap; margin-top: clamp(34px, 4vw, 52px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--hairline-dark); } .pagination .pg-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-pill); border: 1px solid var(--champagne); background: var(--white); font-size: 0.86rem; font-weight: 500; color: var(--ink-85); transition: border-color .3s, color .3s, background .3s, transform .3s; } .pagination a.pg-link:hover { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft); transform: translateY(-1px); } .pagination .pg-link.disabled { opacity: 0.38; pointer-events: none; } .pagination .pg-link svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; } /* the chevron icon points down, so rotate it into left / right arrows */ .pagination .pg-link[rel="prev"] svg { transform: rotate(90deg); } .pagination .pg-link[rel="next"] svg { transform: rotate(-90deg); } .pagination .pg-link.disabled:first-child svg { transform: rotate(90deg); } .pagination .pg-link.disabled:last-child svg { transform: rotate(-90deg); } .pagination .pg-status { font-size: 0.86rem; color: var(--ink-60); text-align: center; } .pagination .pg-status strong { color: var(--ink); font-weight: 600; } .pagination .pg-of { color: var(--ink-40); } @media (max-width: 480px) { .pagination { gap: 10px; } .pagination .pg-link { padding: 10px 15px; font-size: 0.8rem; } .pagination .pg-of { display: none; } } /* Numbered steps inside an FAQ answer */ .faq-steps { margin: 10px 0 12px; padding-left: 20px; display: grid; gap: 5px; } .faq-steps li { color: var(--ink-60); font-size: 0.93rem; } .faq-steps li::marker { color: var(--gold-deep); font-weight: 600; } /* ============================================================ BUDGET FILTER — preset ranges instead of typing numbers Asking a buyer to type "4500000" is a poor way to express a budget and invites typos that silently return nothing. This is a Min/Max pair of preset steps; the real min_price / max_price inputs stay in the form as hidden fields so the view and the pagination links are unchanged. ============================================================ */ .budget-field { position: relative; } .budget-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--radius); cursor: pointer; text-align: left; border: 1px solid var(--champagne); background: var(--white); font: inherit; font-size: 0.92rem; color: var(--ink); transition: border-color .25s, box-shadow .25s; } .budget-trigger:hover { border-color: var(--gold); } .budget-trigger[aria-expanded="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.16); } .budget-trigger .bt-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .budget-trigger .bt-value.placeholder { color: var(--ink-40); } .budget-trigger svg { width: 15px; height: 15px; flex: none; stroke: var(--ink-40); stroke-width: 1.8; fill: none; transition: transform .25s; } .budget-trigger[aria-expanded="true"] svg { transform: rotate(180deg); stroke: var(--gold-deep); } .budget-panel { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px); background: var(--white); border: 1px solid var(--champagne); border-radius: var(--radius-lg); padding: 16px; box-shadow: 0 1px 2px rgba(27,27,27,.04), 0 20px 44px rgba(27,27,27,.12); } .budget-panel[hidden] { display: none; } .budget-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; } .budget-cols .to { align-self: center; font-size: 0.8rem; color: var(--ink-40); padding-top: 20px; } .budget-col > span { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; margin-bottom: 7px; } .budget-list { max-height: 210px; overflow-y: auto; border: 1px solid var(--hairline-dark); border-radius: 10px; padding: 4px; } .budget-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 0.86rem; color: var(--ink-85); line-height: 1.35; } .budget-list button:hover { background: var(--gold-soft); color: var(--gold-deep); } .budget-list button[aria-selected="true"] { background: var(--gold-soft); color: var(--gold-deep); font-weight: 600; } .budget-list button:disabled { opacity: .35; cursor: default; background: none; color: var(--ink-40); } .budget-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; } .budget-foot .clear { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.84rem; color: var(--ink-40); } .budget-foot .clear:hover { color: var(--gold-deep); text-decoration: underline; } /* ============================================================ HEADER: enquiry + "Post Property Free" ============================================================ */ /* "Free" reads as a badge on the button rather than more button text */ .btn em { font-style: normal; font-weight: 600; font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; margin-left: 7px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.22); } .btn-outline em, .btn-ghost em { background: var(--gold-soft); color: var(--gold-deep); } @media (max-width: 1100px) { .btn-enquiry { display: none; } } /* ============================================================ BLOG ============================================================ */ .blog-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .blog-media { display: block; position: relative; aspect-ratio: 4/2.7; overflow: hidden; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; background: var(--gold-soft); } .blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); } .blog-card:hover .blog-media img { transform: scale(1.04); } .blog-media-fallback { position: absolute; inset: 0; display: grid; place-items: center; } .blog-media-fallback svg { width: 30px; height: 30px; stroke: var(--gold); stroke-width: 1.4; fill: none; } .blog-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; } .blog-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-40); } .blog-meta .sep { color: var(--gold); } .blog-title { font-size: 1.12rem; line-height: 1.32; margin: 0; } .blog-title a { color: var(--ink); transition: color .25s; } .blog-title a:hover { color: var(--gold-deep); } .blog-excerpt { font-size: 0.9rem; color: var(--ink-60); margin: 0; } .blog-body .link-gold { margin-top: auto; padding-top: 8px; } /* ---- Article ---- */ .post-head { max-width: 760px; margin: 0 auto clamp(24px, 3vw, 34px); text-align: center; } .post-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.16; margin: 14px 0 16px; letter-spacing: -0.02em; } .post-head .blog-meta { justify-content: center; } .post-lede { font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--ink-60); max-width: 620px; margin: 0 auto; } .post-cover { max-width: 980px; margin: 0 auto clamp(28px, 4vw, 44px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--champagne); aspect-ratio: 16/9; } .post-cover img { width: 100%; height: 100%; object-fit: cover; } .post-body { max-width: 720px; margin: 0 auto; font-size: 1.02rem; line-height: 1.85; color: var(--ink-85); } .post-body > p { margin-bottom: 1.15em; } .post-body h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 1.7em 0 .6em; line-height: 1.25; } .post-body h3 { font-size: clamp(1.12rem, 1.7vw, 1.32rem); margin: 1.5em 0 .5em; } .post-body ul, .post-body ol { margin: 0 0 1.15em 1.3em; display: grid; gap: 7px; } .post-body li { color: var(--ink-60); } .post-body li::marker { color: var(--gold-deep); } .post-body a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; } .post-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.4em 0; } .post-body blockquote { margin: 1.5em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--gold); color: var(--ink-60); font-size: 1.06rem; } /* Bottom margin matters as much as the top one: with no related posts the article ends here and the site-wide CTA band follows immediately, so the two panels ran straight into each other. */ .post-cta { max-width: 760px; margin: clamp(40px, 5vw, 64px) auto clamp(52px, 6vw, 84px); display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--gold-soft); border: 1px solid var(--champagne); } .post-cta h3 { font-size: 1.2rem; margin-bottom: 5px; } .post-cta p { font-size: 0.9rem; color: var(--ink-60); margin: 0; } .post-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 600px) { .post-cta { flex-direction: column; align-items: flex-start; } .post-cta-actions { width: 100%; } .post-cta-actions .btn { flex: 1; } } /* "Post a Blog" on the blog index. Django admin handles the login gate. */ .blog-admin-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; } .blog-admin-cta .btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; fill: none; }