@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root { --brand-navy: #000046; --brand-navy-700: #0a0a5c; --brand-navy-600: #14146e; --brand-navy-100: rgba(255, 255, 255, 0.08); --brand-navy-050: rgba(255, 255, 255, 0.04); --brand-accent: #3d5afe; --brand-accent-hover: #2f46d6; /* Darkened brand shades for the reversed-out footer; the layout overrides these from the admin theme colour. */ --brand-footer: #00002b; --brand-footer-dark: #000016; /* Gold was the previous brand's accent. Anything sitting on a coloured background is now explicitly white; these two variables carry the remaining uses — links, phone numbers, icons and highlights on light backgrounds — where white would be invisible, so they follow the brand colour instead. Kept as variables because ~25 rules reference them. */ --accent-gold: var(--brand-accent); --accent-gold-600: var(--brand-accent-hover); --accent-teal: #1f8a8c; --accent-teal-600: #166b6d; --ink-900: #14152b; --ink-700: #3b3d5c; --ink-500: #6b6d8a; --ink-300: #a6a8c2; --surface-0: #ffffff; --surface-100: #f5f6fb; --surface-200: #ececf6; --border-subtle: #e3e4f0; --radius-md: 10px; --radius-lg: 14px; --shadow-card: 0 1px 2px rgba(20, 21, 43, 0.04), 0 8px 24px rgba(20, 21, 43, 0.06); /* The site is single-typeface (Plus Jakarta Sans). This variable is kept because ~30 rules reference it; pointing it at the same stack switches every one of them rather than leaving stray Georgia behind. */ --font-serif: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Keeps anchor targets from landing underneath the sticky header. */ html { scroll-padding-top: 130px; } body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: #fff; color: var(--ink-900); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Contains the full-bleed 100vw sections. `clip` rather than `hidden`: `hidden` would make a scroll container and stop the sticky header from sticking to the viewport. `hidden` is the fallback for browsers without `clip` support. */ overflow-x: hidden; overflow-x: clip; } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; color: var(--ink-900); } h1 { font-size: 1.5rem; } h5 { font-size: 1rem; font-weight: 600; } a { color: var(--brand-accent); text-decoration: none; } a:hover { color: var(--brand-accent-hover); } code { font-size: 0.85em; background: var(--surface-200); color: var(--ink-700); padding: 0.15em 0.45em; border-radius: 6px; } /* ---------- Admin top bar ---------- */ .app-topbar { position: sticky; top: 0; z-index: 200; height: 60px; display: grid; /* minmax(0, 1fr), not plain 1fr: a bare 1fr track won't shrink below its content's natural width, so on a narrow screen the title and the centered "Respacio" brand mark would overlap instead of the title's own text-overflow:ellipsis kicking in. */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0 1.25rem; background: var(--surface-0); border-bottom: 1px solid var(--border-subtle); } .topbar-start { display: flex; align-items: center; gap: 0.9rem; justify-self: start; min-width: 0; } .sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: none; background: transparent; color: var(--ink-700); flex-shrink: 0; } .sidebar-toggle svg { width: 20px; height: 20px; } .sidebar-toggle:hover { background: var(--surface-100); } .topbar-title { font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-brand { justify-self: center; } .brand-mark-navy { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--brand-navy); } .topbar-end { justify-self: end; display: flex; align-items: center; gap: 0.4rem; } .topbar-lang-btn { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border-subtle); background: #fff; color: var(--ink-700); border-radius: 999px; padding: 0.32rem 0.7rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; } .topbar-lang-btn:hover { background: var(--surface-100); color: var(--ink-900); } .topbar-lang-code { letter-spacing: 0.02em; } .topbar-lang .dropdown-item.active { background: var(--brand-navy); color: #fff; } @media (max-width: 575.98px) { /* Redundant next to the page title once space is this tight, and the first thing to collide with it (see the minmax fix above, which stops overlap but still leaves both fighting for a sliver of room). */ .topbar-brand { display: none; } /* The grid still reserves its middle "auto" track for .topbar-brand even while that item is hidden, which left a dead gap between the title and the user menu instead of pushing the user menu to the true right edge. Collapsing to the 2 columns that actually have content fixes that. */ .app-topbar { grid-template-columns: minmax(0, 1fr) auto; } } .topbar-user { display: flex; align-items: center; gap: 0.6rem; border: none; background: transparent; padding: 0.3rem 0.6rem 0.3rem 0.3rem; border-radius: 999px; color: var(--ink-700); } .topbar-user:hover { background: var(--surface-100); } .avatar-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .topbar-username { font-size: 0.85rem; font-weight: 600; } /* ---------- Admin shell / sidebar ---------- */ .app-shell { min-height: calc(100vh - 60px); align-items: stretch; } .app-sidebar { width: 64px; background: var(--brand-navy); color: #fff; display: flex; flex-direction: column; flex-shrink: 0; overflow-x: hidden; transition: width 0.15s ease; } .app-sidebar.expanded { width: 230px; } .app-sidebar nav { flex: 1; padding: 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 2px; } .app-sidebar .nav-section-label { display: none; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255, 255, 255, 0.35); padding: 1rem 0.75rem 0.35rem; white-space: nowrap; } .app-sidebar.expanded .nav-section-label { display: block; } .app-sidebar .nav-link { display: flex; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.65rem; border-radius: var(--radius-md); color: rgba(255, 255, 255, 0.72); font-size: 0.885rem; font-weight: 500; transition: background-color 0.12s ease, color 0.12s ease; } .app-sidebar.expanded .nav-link { justify-content: flex-start; padding: 0.65rem 0.75rem; } .app-sidebar .nav-link svg { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.85; } .app-sidebar .nav-label { display: none; white-space: nowrap; } .app-sidebar.expanded .nav-label { display: inline; } .app-sidebar .nav-link:hover { background: var(--brand-navy-100); color: #fff; } .app-sidebar .nav-link.active { background: var(--brand-navy-600); color: #fff; box-shadow: inset 3px 0 0 var(--brand-accent); } .app-sidebar .sidebar-footer { padding: 0.6rem 0.5rem 1rem; border-top: 1px solid var(--brand-navy-100); } .app-sidebar .sidebar-footer .nav-link { color: rgba(255, 255, 255, 0.55); } .app-main { flex: 1; min-width: 0; padding: 2.25rem 2.5rem; } .sidebar-backdrop { display: none; position: fixed; inset: 60px 0 0 0; background: rgba(0, 0, 0, 0.4); z-index: 240; } @media (max-width: 767.98px) { /* Below this width the icon sidebar has nowhere to shrink to — it just eats a permanent chunk of an already-small screen. Instead it's hidden off-canvas by default and slides in as an overlay (using the same "expanded" class the existing JS toggle already sets/clears) rather than sharing space with the page content. */ .app-sidebar { position: fixed; top: 60px; left: 0; height: calc(100vh - 60px); z-index: 250; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25); } .app-sidebar.expanded { transform: translateX(0); } .app-sidebar.expanded ~ .sidebar-backdrop, .sidebar-backdrop.show { display: block; } .app-main { padding: 1.25rem 1rem; } } .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; } .page-header h1 { margin-bottom: 0.15rem; } .page-header .subtitle { color: var(--ink-500); font-size: 0.9rem; } /* ---------- Filter bar ---------- */ .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; background: var(--surface-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 0.85rem 1.25rem; margin-bottom: 1.1rem; } .filter-bar-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; flex: 1; } .filter-field { flex: 1 1 180px; min-width: 160px; } .filter-field .form-label { margin-bottom: 0.25rem; } .filter-actions { flex: 0 0 auto; display: flex; gap: 0.5rem; } /* ---------- Cards, tables, badges ---------- */ .card { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .card .text-muted { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .card h2 { font-size: 1.75rem; margin-top: 0.25rem; } .table { background: var(--surface-0); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle); } .table thead th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); background: var(--surface-100); border-bottom: 1px solid var(--border-subtle); padding: 0.75rem 1rem; } .table td { padding: 0.8rem 1rem; vertical-align: middle; border-color: var(--border-subtle); color: var(--ink-700); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--surface-100); } .badge { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.02em; padding: 0.35em 0.65em; border-radius: 999px; } /* ---------- Buttons & forms ---------- */ .btn { font-weight: 600; font-size: 0.875rem; border-radius: var(--radius-md); padding: 0.5rem 1rem; } .btn-primary { background: var(--brand-navy); border-color: var(--brand-navy); } .btn-primary:hover, .btn-primary:focus { background: var(--brand-navy-700); border-color: var(--brand-navy-700); } .btn-outline-secondary { color: var(--ink-700); border-color: var(--border-subtle); } .btn-outline-secondary:hover { background: var(--surface-200); border-color: var(--border-subtle); color: var(--ink-900); } /* Bootstrap's .btn-sm has the same specificity as our .btn override above, and since it loads first, our .btn rule was clobbering its smaller padding/font-size — every "small" button rendered at full size. */ .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; border-radius: 8px; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; } .btn-icon svg { width: 15px; height: 15px; } .form-control, .form-select { border-radius: var(--radius-md); border-color: var(--border-subtle); padding: 0.55rem 0.8rem; font-size: 0.9rem; } .form-control:focus, .form-select:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 0.2rem rgba(61, 90, 254, 0.15); } .form-label { font-weight: 600; font-size: 0.83rem; color: var(--ink-700); margin-bottom: 0.35rem; } .alert { border-radius: var(--radius-md); border: none; font-size: 0.88rem; } /* ---------- Pagination ---------- */ .pager-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } .pager-summary { font-size: 0.85rem; color: var(--ink-500); } .pager-list { display: flex; align-items: center; gap: 0.3rem; list-style: none; margin: 0; padding: 0; } .pager-btn, .pager-page { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.6rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--ink-700); background: var(--surface-0); border: 1px solid var(--border-subtle); transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .pager-btn:hover, .pager-page:hover { background: var(--surface-200); color: var(--ink-900); } .pager-page.active { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; } .pager-btn.disabled { opacity: 0.4; pointer-events: none; } /* ---------- Lightbox ---------- */ .js-lightbox { cursor: zoom-in; } .lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(10, 10, 30, 0.88); align-items: center; justify-content: center; padding: 3rem; } .lightbox-overlay.show { display: flex; } .lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .lightbox-close { position: absolute; top: 1.25rem; right: 1.5rem; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.22); } /* ---------- Property detail ---------- */ .property-hero { display: flex; gap: 1.5rem; margin-bottom: 1.75rem; } .property-hero img { width: 340px; height: 240px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); flex-shrink: 0; } .property-hero-body { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; } .property-price { font-size: 1.6rem; font-weight: 800; color: var(--brand-navy); } .property-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .property-fact { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--surface-100); border: 1px solid var(--border-subtle); font-size: 0.82rem; font-weight: 600; color: var(--ink-700); } .nav-tabs { border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.5rem; gap: 0.25rem; } .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--ink-500); font-weight: 600; font-size: 0.88rem; padding: 0.6rem 0.2rem; margin-right: 1.5rem; border-radius: 0; } .nav-tabs .nav-link:hover { color: var(--ink-900); } .nav-tabs .nav-link.active { color: var(--brand-navy); border-bottom-color: var(--brand-navy); background: none; } .detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem 2rem; } .detail-grid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); font-weight: 700; } .detail-grid dd { margin: 0.15rem 0 0; color: var(--ink-900); font-weight: 500; } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.85rem; } .photo-grid img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-card); } /* ---------- Page builder (admin) ---------- */ .pb-add-section-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; background: var(--surface-0); border: 1px dashed var(--border-subtle); border-radius: var(--radius-lg); padding: 1rem 1.25rem; } .pb-add-section-label { font-size: 0.82rem; font-weight: 600; color: var(--ink-500); margin-right: 0.25rem; } .pb-section { background: var(--surface-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 0.9rem 1.1rem 1.1rem; margin-bottom: 1.1rem; } /* Collection editor: 80% main + 20% publish sidebar */ .ce-grid { display: flex; flex-wrap: wrap; gap: 1.5%; align-items: flex-start; } .ce-main { flex: 0 0 78.5%; min-width: 0; } .ce-side { flex: 0 0 20%; } .ce-side .ce-publish { position: sticky; top: 1rem; } @media (max-width: 991.98px) { .ce-grid { gap: 0; } .ce-main, .ce-side { flex: 0 0 100%; } .ce-side .ce-publish { position: static; } } /* Collections page tile builder (Admin > Pages) */ .tile-list { display: flex; flex-direction: column; gap: 0.6rem; } .tile-row { display: flex; align-items: center; gap: 0.65rem; background: var(--surface-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0.5rem 0.6rem; } .tile-row .tile-drag { cursor: grab; color: var(--ink-300); flex: none; padding: 0 0.2rem; } .tile-row .tile-thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 4px; flex: none; background: var(--surface-200); } .tile-row .tile-fields { display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr; gap: 0.4rem; flex: 1; } .tile-row.sortable-ghost { opacity: 0.4; } @media (max-width: 767.98px) { .tile-row .tile-fields { grid-template-columns: 1fr; } .tile-row .tile-thumb { display: none; } } .pb-section-toolbar, .pb-block-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; } .pb-section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); } .pb-block-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-accent); } .pb-toolbar-actions { display: flex; gap: 0.25rem; } .pb-icon-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border-subtle); background: var(--surface-0); color: var(--ink-500); font-size: 0.8rem; line-height: 1; cursor: pointer; } .pb-icon-btn:hover { background: var(--surface-200); color: var(--ink-900); } .pb-icon-btn-danger:hover { background: #fdecea; color: #c0392b; border-color: #f3c9c4; } .pb-columns { margin: 0 -0.5rem; } .pb-columns > div { padding: 0 0.5rem; } .pb-column { background: var(--surface-100); border: 1px dashed var(--border-subtle); border-radius: var(--radius-md); padding: 0.75rem; min-height: 90px; display: flex; flex-direction: column; gap: 0.75rem; } .pb-block { background: var(--surface-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0.6rem 0.75rem 0.75rem; } .pb-add-block { margin-top: auto; } .pb-image-preview { max-width: 100%; max-height: 140px; border-radius: 6px; display: block; } /* ---------- Property edit repeaters (admin) ---------- */ .pr-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .pr-row { display: flex; align-items: center; gap: 0.5rem; } .pr-row input { flex: 1; } .pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; } .pr-tile { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-200); aspect-ratio: 4 / 3; } .pr-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .pr-tile-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s ease; } .pr-tile:hover .pr-tile-actions { opacity: 1; } .pr-tile-actions button { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; line-height: 1; } .pr-tile-actions button:hover { background: rgba(0, 0, 0, 0.75); } /* ---------- Home page builder (admin) ---------- */ .hb-palette { position: sticky; top: 76px; } .hb-drag-handle { cursor: grab; color: var(--ink-300); font-size: 0.95rem; margin-right: 0.5rem; } .hb-drag-handle:hover { color: var(--ink-500); } /* Collapse/expand a home-builder section */ .hb-head { display: inline-flex; align-items: center; gap: 0.15rem; } .hb-head .pb-section-label { cursor: pointer; } .hb-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin-right: 0.35rem; background: none; border: none; color: var(--ink-400, #9a9db0); cursor: pointer; border-radius: 5px; } .hb-toggle:hover { background: var(--surface-100, #f4f5fb); color: var(--ink-700); } .hb-toggle svg { transition: transform 0.15s ease; transform: rotate(90deg); } /* expanded = pointing down */ .hb-card.hb-collapsed .hb-toggle svg { transform: rotate(0deg); } /* collapsed = pointing right */ .hb-card.hb-collapsed .pb-block-body { display: none; } .hb-card.hb-collapsed { padding-bottom: 0; } .hb-card.sortable-ghost { opacity: 0.4; } .hb-card.sortable-chosen { box-shadow: 0 8px 24px rgba(20, 21, 43, 0.12); } /* Image picker (upload + preview) used by the Home builder's image fields */ .hb-image-preview { flex: none; width: 88px; height: 66px; border-radius: 6px; border: 1px solid var(--border-subtle, #e3e4f0); background-color: var(--surface-100, #f4f5fb); background-size: cover; background-position: center; } /* Empty slot reads as a placeholder rather than a broken thumbnail. */ .hb-image-preview.is-empty { background-image: linear-gradient(45deg, transparent 46%, var(--border-subtle, #e3e4f0) 46%, var(--border-subtle, #e3e4f0) 54%, transparent 54%); } .pb-star-btn { border: none; background: none; font-size: 1.3rem; line-height: 1; color: #d4a437; cursor: pointer; padding: 0; } .pb-star-btn:hover { opacity: 0.75; } /* ---------- Header menu builder (admin) ---------- */ .mb-drag-handle-inline { display: inline-block; transform: rotate(90deg); font-weight: 700; color: var(--ink-300); } .mb-menu-list, .mb-submenu-list { display: flex; flex-direction: column; gap: 0.5rem; } .mb-submenu-list { margin: 0.5rem 0 0.75rem 2rem; padding-left: 0.75rem; border-left: 2px solid var(--border-subtle); min-height: 4px; } .mb-menu-item.sortable-ghost { opacity: 0.4; } .mb-menu-item.sortable-chosen .mb-menu-row { box-shadow: 0 8px 20px rgba(20, 21, 43, 0.12); } .mb-menu-row { display: flex; align-items: center; gap: 0.5rem; background: var(--surface-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0.4rem 0.6rem; } .mb-drag-handle { cursor: grab; color: var(--ink-300); font-weight: 700; letter-spacing: -2px; transform: rotate(90deg); flex-shrink: 0; padding: 0 0.2rem; } .mb-drag-handle:hover { color: var(--ink-500); } .mb-label { flex: 1 1 35%; } .mb-url { flex: 1 1 45%; } /* ---------- Public site header ---------- */ /* Sticks the whole header (utility bar + nav) to the top on scroll. Needs to use overflow-x: clip rather than hidden — see the body rule. */ .site-header { position: sticky; top: 0; z-index: 1030; } .site-header .main-header { box-shadow: 0 2px 12px rgba(20, 21, 43, 0.08); } /* Utility (top) bar */ .topbar { background: var(--brand-navy); color: rgba(255, 255, 255, 0.82); font-size: 0.82rem; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; min-height: 42px; flex-wrap: wrap; padding-top: 0.35rem; padding-bottom: 0.35rem; } .topbar a { color: rgba(255, 255, 255, 0.85); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .topbar a:hover { color: #fff; } .topbar-contact { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .topbar-contact svg { width: 15px; height: 15px; color: #fff; flex: none; } .topbar-social { display: flex; align-items: center; gap: 0.9rem; } .topbar-social a { color: rgba(255, 255, 255, 0.9); } .topbar-social a svg { width: 16px; height: 16px; display: block; } .topbar-flag svg { width: 26px; height: 17px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); } .topbar-lang { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; border-radius: 4px; font-size: 0.78rem; padding: 2px 6px; cursor: pointer; } .topbar-lang option { color: var(--ink-900); } /* Language switcher: flags of the OTHER languages (click to switch) */ .topbar-langs { display: flex; align-items: center; gap: 0.5rem; } .topbar-lang-flag { display: inline-flex; line-height: 0; } .topbar-lang-flag svg { width: 24px; height: 16px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); transition: transform 0.15s ease; } .topbar-lang-flag:hover svg { transform: scale(1.12); } /* Main header */ .main-header { background: #fff; border-bottom: 1px solid var(--border-subtle, #e6e6ef); box-shadow: 0 1px 10px rgba(20, 21, 43, 0.05); padding-top: 0.55rem; padding-bottom: 0.55rem; } .main-header .navbar-brand { padding: 0; margin-right: 1.5rem; } .main-header .navbar-brand img { height: 52px; width: auto; display: block; } .main-header .navbar-brand-text { color: var(--brand-navy); font-weight: 800; font-size: 1.15rem; } .main-header .nav-link { color: var(--brand-navy) !important; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.5rem 0.9rem !important; transition: color 0.15s ease; } .main-header .nav-link:hover, .main-header .nav-item.dropdown.show .nav-link { color: var(--brand-accent) !important; } .main-header .dropdown-menu { border: none; box-shadow: 0 12px 32px rgba(20, 21, 43, 0.14); border-radius: var(--radius-md); padding: 0.4rem; } .main-header .navbar-toggler { border-color: var(--border-subtle); } /* ---------- Mega-menu (nested dropdowns) ---------- */ .main-header .mega-menu { min-width: 250px; padding: 0.5rem 0; border: none; border-radius: var(--radius-md); box-shadow: 0 14px 36px rgba(20, 21, 43, 0.16); margin-top: 0.35rem; } /* On desktop the dropdown is absolutely positioned below the nav, so an expanded group (e.g. "By Department") can grow taller than the viewport and hide its lower items with no way to reach them. Cap it to the visible area and let it scroll internally instead. Mobile (below) is an in-flow accordion that scrolls with the page, so this must not apply there. */ @media (min-width: 992px) { .main-header .mega-menu { max-height: calc(100vh - 8rem); overflow-y: auto; overscroll-behavior: contain; } .main-header .mega-menu::-webkit-scrollbar { width: 8px; } .main-header .mega-menu::-webkit-scrollbar-thumb { background: var(--border-subtle, #d7d8e2); border-radius: 8px; } .main-header .mega-menu { scrollbar-width: thin; } } /* Leaf links and group headers share the same row metrics. */ .mega-link, .mega-group-toggle { display: flex; align-items: center; width: 100%; padding: 0.5rem 1.25rem; color: var(--brand-navy); font-size: 0.92rem; font-weight: 600; text-align: left; background: none; border: none; text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .mega-link:hover, .mega-group-toggle:hover { background: var(--surface-100, #f4f5fb); color: var(--brand-accent); } /* Group header row: label + chevron pushed to the edges, subtle divider. */ .mega-group { border-top: 1px solid var(--border-subtle, #e9e9f1); margin-top: 0.35rem; padding-top: 0.35rem; } .mega-group:first-child { border-top: none; margin-top: 0; padding-top: 0; } .mega-group-toggle { justify-content: space-between; cursor: pointer; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; } .mega-chevron { width: 15px; height: 15px; flex: none; transition: transform 0.15s ease; } .mega-group.open > .mega-group-toggle { color: var(--brand-accent); } .mega-group.open > .mega-group-toggle .mega-chevron { transform: rotate(180deg); } /* Nested panel: collapsed by default, revealed when the group is open. */ .mega-group-panel { display: none; padding-left: 0.5rem; } .mega-group.open > .mega-group-panel { display: block; } .mega-group-panel .mega-link, .mega-group-panel .mega-group-toggle { font-weight: 500; font-size: 0.88rem; } .mega-group-panel .mega-link { padding-left: 1.75rem; } @media (max-width: 991.98px) { .main-header .navbar-nav { padding-top: 0.5rem; gap: 0.1rem; } .main-header .nav-link { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; } .main-header .mega-menu { box-shadow: none; min-width: 0; padding-left: 0.5rem; } .topbar-inner { justify-content: center; } .topbar-contact { gap: 1rem; justify-content: center; } } /* ---------- Home page ---------- */ /* Full-bleed hero: breaks out of the layout's .container so the image spans the whole viewport width, with the search card floated near the bottom. */ .home-hero { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); margin-bottom: 3rem; min-height: 580px; display: flex; align-items: flex-end; justify-content: center; background-color: var(--brand-navy); background-image: url('../img/hero.webp'); background-size: cover; background-position: center; color: #fff; padding: 4rem 1rem 3.25rem; } /* Subtle darkening so white text/card stay legible over any photo. */ .home-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 30, 0.15) 0%, rgba(0, 0, 30, 0.10) 55%, rgba(0, 0, 40, 0.45) 100%); pointer-events: none; } .home-hero-overlay { position: relative; z-index: 1; width: 100%; max-width: 1160px; } .home-hero-card { border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 24px 60px rgba(0, 0, 20, 0.4); /* No overflow:hidden — it would clip the open search dropdowns. The head/body round their own outer corners instead. */ } /* Dark translucent strip carrying the title */ .home-hero-card-head { background: rgba(28, 33, 60, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 1.1rem 1.5rem; text-align: center; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .home-hero-title { font-family: var(--font-serif); color: #fff; font-size: 2rem; font-weight: 700; margin: 0; letter-spacing: 0.01em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } /* White body holding the fields + buttons */ .home-hero-card-body { background: #fff; padding: 1.6rem 1.75rem 1.75rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .home-hero-search { margin: 0; } /* Underline-style fields (no pills), evenly spread with faint dividers */ .home-hero-fields { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; } .home-hero-fields .pd-field { flex: 1 1 150px; min-width: 140px; max-width: none; padding: 0 1rem; border-right: 1px solid var(--border-subtle); } .home-hero-fields .pd-field:last-child { border-right: none; } .home-hero-fields .pd-toggle, .home-hero .pd-ref-input { width: 100%; background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--ink-300); padding: 0.55rem 0.1rem; font-family: var(--font-serif); font-size: 1rem; font-weight: 400; color: var(--ink-900); box-shadow: none; } .home-hero-fields .pd-toggle:hover, .home-hero-fields .pd-dropdown.pd-open .pd-toggle, .home-hero .pd-ref-input:hover, .home-hero .pd-ref-input:focus { border-bottom-color: var(--brand-navy); box-shadow: none; outline: none; } .home-hero-fields .pd-chevron { color: var(--ink-500); } .home-hero .pd-ref-input::placeholder { color: var(--ink-500); font-family: var(--font-serif); } .home-hero-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; } /* Navy buttons with gold serif text, lightly-rounded rectangles */ .btn-hero { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 2rem; border-radius: 4px; font-family: var(--font-serif); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; background: var(--brand-navy); color: #fff; border: 1px solid var(--brand-navy); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .btn-hero:hover { background: var(--brand-navy-700); color: #fff; } @media (max-width: 767.98px) { .home-hero-fields .pd-field { flex: 1 1 45%; border-right: none; padding: 0.25rem 0.5rem; } } @media (max-width: 575.98px) { .home-hero { min-height: 460px; } .home-hero-title { font-size: 1.5rem; } .home-hero-fields .pd-field { flex: 1 1 100%; } } .home-section { margin-bottom: 3rem; } .home-section h2 { font-size: 1.6rem; } /* ---------- Home "Exclusive properties" section ---------- */ .home-exclusive { margin: 2.75rem 0 3.5rem; text-align: center; } .he-heading { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 700; color: var(--ink-900); letter-spacing: 0; margin: 0 0 2rem; } .he-count-wrap { margin-bottom: 2.25rem; } .he-count { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700; color: var(--ink-900); margin: 0 0 0.65rem; } .he-intro { max-width: 760px; margin: 0 auto; color: var(--ink-700); font-size: 0.95rem; } .he-subheading { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--ink-900); margin: 0 0 0.65rem; } .he-subtitle { max-width: 760px; margin: 0 auto 2.25rem; color: var(--ink-700); font-size: 0.95rem; } .he-grid { text-align: left; } /* Exclusive carousel: arrows in the side gutters, square dots below */ .he-carousel { position: relative; padding: 0 2.75rem; } .he-nav { width: 42px; height: 42px; top: 38%; bottom: auto; opacity: 1; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border-subtle); border-radius: 50%; color: var(--brand-navy); box-shadow: 0 4px 14px rgba(20, 21, 43, 0.12); } .he-nav svg { width: 20px; height: 20px; } .he-nav-prev { left: 0; } .he-nav-next { right: 0; } .he-nav:hover { background: var(--brand-navy); color: #fff; } .he-dots { position: static; margin: 0.85rem 0 0; justify-content: center; gap: 0.55rem; } /* Selector is deliberately specific (.he-carousel .he-dots [data-bs-target]) so it beats Bootstrap's default .carousel-indicators [data-bs-target] rule, which otherwise renders the dots as faint 30x3px bars. */ .he-carousel .he-dots [data-bs-target] { width: 12px; height: 12px; margin: 0; border: none; border-radius: 2px; background: var(--ink-300); opacity: 1; box-sizing: border-box; text-indent: 0; transition: background 0.15s ease, transform 0.15s ease; } .he-carousel .he-dots [data-bs-target]:hover { background: var(--ink-500); } .he-carousel .he-dots [data-bs-target].active { background: var(--brand-navy); transform: scale(1.1); } @media (max-width: 575.98px) { .he-carousel { padding: 0; } .he-nav { display: none; } } /* ---------- French property alerts CTA ---------- */ .home-alerts { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); background: rgba(0, 0, 0, 0.2); padding: 3rem 1rem; margin: 3.5rem 0; } .home-alerts-card { max-width: 1040px; margin: 0 auto; background: rgba(240, 235, 235, 0.44); border-radius: var(--radius-md); padding: 2.75rem 2rem; text-align: center; } .ha-heading { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; text-transform: uppercase; color: var(--ink-900); margin: 0 0 0.5rem; } .ha-tagline { font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; color: var(--ink-900); margin-bottom: 1.25rem; } .ha-body { max-width: 860px; margin: 0 auto 1.5rem; color: var(--ink-700); font-size: 0.95rem; line-height: 1.7; } .ha-highlight { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: var(--ink-900); max-width: 860px; margin: 0 auto 1.75rem; line-height: 1.4; } .ha-btn { display: inline-block; background: #fff; color: var(--brand-navy); border: 1px solid var(--ink-900); border-radius: 4px; padding: 0.7rem 1.9rem; font-family: var(--font-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .ha-btn:hover { background: var(--brand-navy); color: #fff; } /* ---------- Find Property in France (departments) ---------- */ .home-departments { margin: 3.5rem 0; text-align: center; } .dept-inner { position: relative; max-width: 900px; margin: 0 auto; padding: 2rem 1rem 3rem; } .dept-map { position: absolute; inset: 0; background: url('../img/france.svg') center/contain no-repeat; opacity: 0.55; z-index: 0; pointer-events: none; } .dept-content { position: relative; z-index: 1; } .dept-heading { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; text-transform: uppercase; color: var(--ink-900); margin: 0 0 0.5rem; } .dept-subtitle { color: var(--ink-700); margin-bottom: 1.5rem; font-size: 0.95rem; } .dept-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 1.1rem; max-width: 720px; margin: 0 auto 1.75rem; } .dept-tag { font-family: var(--font-serif); color: var(--ink-900); text-decoration: none; line-height: 1.2; transition: color 0.15s ease; } .dept-tag:hover { color: var(--brand-accent); } .dept-btn { margin-top: 0.5rem; } @media (max-width: 575.98px) { .ha-heading, .dept-heading { font-size: 1.4rem; } .ha-highlight { font-size: 1.15rem; } } /* ---------- Full-bleed page banner (Collections, etc.) ---------- */ .page-banner { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); min-height: 420px; display: flex; align-items: center; justify-content: center; background: var(--brand-navy) center/cover no-repeat; margin-bottom: 3rem; } .page-banner::before { content: ""; position: absolute; inset: 0; background: rgba(20, 22, 45, 0.45); } .page-banner-title { position: relative; z-index: 1; margin: 0; padding: 0 1rem; color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 3rem; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); } @media (max-width: 767.98px) { .page-banner { min-height: 260px; } .page-banner-title { font-size: 1.8rem; } } /* ---------- Collection landing page ---------- */ /* These render in the layout's `bleed` section — OUTSIDE the centred .container — so plain width:100% is already edge-to-edge. Do NOT reintroduce a `width: 100vw` break-out: vw includes the vertical scrollbar, which makes the element ~15px wider than the viewport and scrolls the whole page sideways. */ .collection-banner, .collection-band { width: 100%; } .collection-banner { height: 430px; background: var(--brand-navy) center/cover no-repeat; } .collection-band { background: var(--brand-navy); padding: 1.35rem 1rem; text-align: center; margin-bottom: 2.5rem; } .collection-band h1 { margin: 0; color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 2.1rem; line-height: 1.2; letter-spacing: 0; } .collection-intro { margin: 0 0 2rem; } .ci-heading { font-family: var(--font-serif); font-weight: 700; font-size: 2rem; text-align: center; color: var(--ink-900); margin: 0 0 1.25rem; } .ci-body { font-family: var(--font-serif); color: var(--ink-700); line-height: 1.75; } .ci-body p { margin: 0 0 1rem; } .ci-body ul, .ci-body ol { margin: 0 0 1.25rem 1.75rem; } .ci-body a { color: var(--accent-gold-600); } /* Comparison tables in rich content (e.g. Gîte vs Maison d'Amis). Wraps its own horizontal scroll so a wide table never pushes the page sideways. */ .ci-body table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; display: block; overflow-x: auto; } .ci-body th, .ci-body td { border: 1px solid #d6d9de; padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; } .ci-body thead th, .ci-body tr > th:first-child { font-weight: 700; } .ci-body thead th { background: #f4f6f9; } .ci-body h2, .ci-body h3, .ci-body h4 { font-family: var(--font-serif); font-weight: 700; color: var(--ink-900); line-height: 1.25; margin: 1.75rem 0 0.5rem; } .ci-body h2 { font-size: 1.9rem; } .ci-body h3 { font-size: 1.55rem; } .ci-body h4 { font-size: 1.15rem; } /* Rich-text formatting produced by the admin editor (Quill), rendered on the public site across every rich-content container. Font size / colour / alignment come through as inline styles and need no CSS; these rules style the block formats (blockquote, code, images, sub/sup) and Quill's class-based indentation so they display correctly on the front end. */ .ci-body img, .home-content-body img, .pdp-description img, .location-content img { max-width: 100%; height: auto; border-radius: 6px; } .ci-body blockquote, .home-content-body blockquote, .pdp-description blockquote, .location-content blockquote { margin: 0 0 1.25rem; padding: 0.5rem 0 0.5rem 1.1rem; border-left: 4px solid var(--accent-gold-600, #c8a45c); color: var(--ink-700, #444); font-style: italic; } .ci-body pre, .home-content-body pre, .pdp-description pre, .location-content pre { background: #f4f6f9; padding: 0.9rem 1.1rem; border-radius: 6px; overflow-x: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; margin: 0 0 1.25rem; } .ci-body code, .home-content-body code, .pdp-description code, .location-content code { font-family: ui-monospace, Menlo, Consolas, monospace; } .ci-body sub, .ci-body sup, .home-content-body sub, .home-content-body sup { line-height: 0; } /* Quill indent is class-based (ql-indent-N); these selectors are unique to editor content, so mapping them to margin globally is safe. */ .ql-indent-1 { margin-left: 3em; } .ql-indent-2 { margin-left: 6em; } .ql-indent-3 { margin-left: 9em; } .ql-indent-4 { margin-left: 12em; } .ql-indent-5 { margin-left: 15em; } .ql-indent-6 { margin-left: 18em; } .ql-indent-7 { margin-left: 21em; } .ql-indent-8 { margin-left: 24em; } .ci-browse { font-family: var(--font-serif); color: var(--ink-900); margin: 1.75rem 0 0; } /* Dark filter bar */ .cf-bar { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 0.6rem; margin-bottom: 1.75rem; } .cf-bar .pd-field { flex: 0 1 auto; min-width: 130px; max-width: none; } .cf-bar .pd-field:first-child { flex: 1 1 260px; } .cf-bar .pd-toggle { height: 100%; background: var(--brand-navy); border: none; border-radius: 3px; color: #fff; font-family: var(--font-serif); font-weight: 400; font-size: 0.92rem; padding: 0.7rem 1rem; } .cf-bar .pd-toggle:hover, .cf-bar .pd-dropdown.pd-open .pd-toggle { background: var(--brand-navy-700); box-shadow: none; } .cf-bar .pd-chevron { color: #fff; } .cf-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.3rem; border: none; border-radius: 3px; background: var(--brand-navy); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 0.92rem; text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .cf-btn:hover { background: var(--brand-navy-700); color: #fff; } /* Selected-count badge on the multi-select pills */ .pd-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 0.4rem; border-radius: 999px; background: #22a447; color: #fff; font-family: var(--font-serif); font-size: 0.72rem; font-weight: 700; flex: none; } .pd-count[hidden] { display: none; } .collection-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .collection-results-head h2 { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 1.8rem; color: var(--ink-900); } .cr-count { color: var(--ink-700); font-size: 0.9rem; } .collection-pager { display: flex; justify-content: center; margin-bottom: 2.5rem; } /* Dim the grid while an AJAX page/filter swap is in flight. `overflow-anchor` off so the browser doesn't re-anchor scroll after the swap and undo our scroll-to-results jump. */ .js-collection-results { transition: opacity 0.15s ease; overflow-anchor: none; } .js-collection-results.is-loading { opacity: 0.45; pointer-events: none; } /* Body copy under the listing flows straight on — no divider rule. */ .collection-content { border-top: none; padding-top: 0; margin-top: 1rem; } @media (max-width: 767.98px) { .collection-banner { height: 240px; } .collection-band h1 { font-size: 1.5rem; } .ci-heading { font-size: 1.5rem; } .cf-bar .pd-field, .cf-bar .pd-field:first-child { flex: 1 1 100%; } .cf-btn { flex: 1 1 45%; } } /* ---------- Town & Country Properties quick-link tiles ---------- */ .home-quicklinks { margin: 3.5rem 0; text-align: center; } .ql-heading { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700; text-transform: uppercase; color: var(--ink-900); margin: 0 0 0.25rem; } .ql-subheading { font-family: var(--font-serif); font-size: 1.15rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-700); margin-bottom: 2rem; } .ql-tile { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--brand-navy) center/cover no-repeat; overflow: hidden; text-decoration: none; border-radius: 2px; } .ql-tile::before { content: ""; position: absolute; inset: 0; background: rgba(18, 20, 45, 0.4); transition: background 0.2s ease; } .ql-tile:hover::before { background: rgba(18, 20, 45, 0.55); } .ql-tile-inner { position: absolute; inset: 16px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; border: 1px solid transparent; transition: border-color 0.2s ease; } .ql-tile:hover .ql-tile-inner { border-color: rgba(255, 255, 255, 0.85); } .ql-tile-title { color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; line-height: 1.25; text-transform: uppercase; text-align: center; padding: 0 1rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } .ql-tile-search { display: inline-block; opacity: 0; transform: translateY(8px); background: var(--brand-navy); color: #fff; padding: 0.45rem 1.5rem; border-radius: 4px; font-family: var(--font-serif); font-weight: 700; font-size: 0.85rem; transition: opacity 0.2s ease, transform 0.2s ease; } .ql-tile:hover .ql-tile-search { opacity: 1; transform: translateY(0); } @media (max-width: 575.98px) { .ql-heading { font-size: 1.5rem; } .ql-tile-title { font-size: 1.2rem; } } /* ---------- Long-form content section ---------- */ .home-content { margin: 2.5rem 0 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border-subtle); } .home-content-body { font-family: var(--font-serif); color: var(--ink-700); font-size: 1rem; line-height: 1.75; } .home-content-body h1, .home-content-body h2 { font-family: var(--font-serif); font-weight: 700; color: var(--ink-900); font-size: 1.9rem; line-height: 1.25; letter-spacing: 0; margin: 2rem 0 0.75rem; } .home-content-body h1:first-child, .home-content-body h2:first-child { margin-top: 0; } .home-content-body h3 { font-family: var(--font-serif); font-weight: 700; color: var(--ink-900); font-size: 1.55rem; margin: 1.5rem 0 0.5rem; } .home-content-body h4 { font-weight: 700; color: var(--ink-900); font-size: 1.02rem; margin: 1.4rem 0 0.3rem; } .home-content-body p { margin: 0 0 1rem; } .home-content-body ul, .home-content-body ol { margin: 0 0 1.25rem 1.75rem; } .home-content-body li { margin-bottom: 0.45rem; } .home-content-body a { color: var(--accent-gold); } .home-content-body a:hover { color: var(--accent-gold-600); } .home-content-body strong { color: var(--ink-900); } @media (max-width: 575.98px) { .home-content-body h1, .home-content-body h2 { font-size: 1.5rem; } } /* ---------- Client reviews (What Our Clients Say) ---------- */ .home-reviews { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); background: #f5f5f5; padding: 3rem 0 3.5rem; margin: 3.5rem 0; } .hr-heading { text-align: center; font-family: var(--font-serif); font-weight: 700; font-size: 2rem; color: var(--ink-900); margin: 0 0 2rem; } .hr-carousel { padding: 0 2.75rem; } .hr-card { position: relative; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.75rem 1.5rem 1.5rem; } .hr-quote { position: absolute; top: 0.5rem; right: 1.3rem; font-family: var(--font-serif); font-size: 4rem; line-height: 1; font-weight: 700; color: var(--brand-navy); } .hr-body { font-family: var(--font-serif); color: var(--ink-900); font-weight: 700; font-size: 0.95rem; line-height: 1.6; margin: 0.75rem 0 1.5rem; display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; } .hr-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; } .hr-author { font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; color: var(--ink-900); } .hr-google svg { display: block; } .hr-stars { display: flex; align-items: center; gap: 2px; margin-top: 0.65rem; } .hr-star { width: 20px; height: 20px; fill: #d9dbe6; } .hr-star.on { fill: #f4b400; } .hr-verified { width: 18px; height: 18px; margin-left: 5px; } @media (max-width: 575.98px) { .hr-carousel { padding: 0; } .hr-heading { font-size: 1.5rem; } } /* ---------- Get in Touch form ---------- */ .home-getintouch { margin: 2.5rem 0 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border-subtle); } .git-card { max-width: 760px; background: var(--surface-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem 2rem 2.25rem; } .git-heading { font-family: var(--font-serif); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; color: var(--ink-900); margin: 0 0 1.25rem; } .git-intro { color: var(--ink-700); margin-bottom: 1.25rem; } .git-form .form-control { border-radius: var(--radius-sm, 6px); padding: 0.7rem 0.9rem; } .git-check .form-check-label { font-size: 0.82rem; color: var(--ink-700); line-height: 1.5; } .git-submit { width: 100%; margin-top: 0.5rem; padding: 0.85rem 1rem; border: none; border-radius: var(--radius-sm, 6px); background: var(--brand-navy); color: #fff; font-family: var(--font-serif); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9rem; cursor: pointer; transition: background 0.15s ease; } .git-submit:hover { background: var(--brand-navy-700); } @media (max-width: 767.98px) { .he-heading { font-size: 1.9rem; } .he-count, .he-subheading { font-size: 1.5rem; } } .home-location-card { transition: box-shadow 0.15s ease, transform 0.15s ease; overflow: hidden; } .home-location-card-img { width: 100%; height: 160px; object-fit: cover; } .location-hero-img { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius-lg); } .home-location-card:hover { box-shadow: 0 12px 30px rgba(20, 21, 43, 0.12); transform: translateY(-2px); } .home-agent-photo { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; } /* ---------- Site-wide footer ---------- */ .site-footer { background: var(--brand-footer); color: rgba(255, 255, 255, 0.9); padding: 2.75rem 0 0; margin-top: 2rem; font-size: 0.9rem; } .site-footer a { color: #fff; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } /* Column headings with a rule under them */ .ft-heading { color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; padding-bottom: 0.6rem; margin-bottom: 1rem; border-bottom: 2px solid rgba(255, 255, 255, 0.35); } .ft-links { list-style: none; padding: 0; margin: 0; } .ft-links li { margin-bottom: 0.55rem; } .ft-links a { font-size: 0.88rem; line-height: 1.45; display: inline-block; } /* Contact column */ .ft-company { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; margin-bottom: 1rem; } .ft-company svg { width: 22px; height: 22px; flex: none; } .ft-line { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.8rem; color: rgba(255, 255, 255, 0.9); font-size: 0.88rem; } .ft-line svg { width: 17px; height: 17px; flex: none; margin-top: 2px; } .ft-follow { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.25rem; color: rgba(255, 255, 255, 0.9); font-size: 0.88rem; } .ft-follow a { display: inline-flex; } .ft-follow svg { width: 17px; height: 17px; display: block; } /* Footer contact form */ .ft-form .form-control { background: #fff; border: none; border-radius: 3px; padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; font-size: 0.9rem; } .ft-form .form-control:focus { box-shadow: 0 0 0 3px rgba(201, 163, 93, 0.35); } .ft-check { margin-bottom: 0.6rem; } .ft-check .form-check-label { color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; line-height: 1.5; } .ft-submit { display: block; min-width: 180px; margin: 0.75rem auto 0; padding: 0.65rem 2rem; border: none; border-radius: 3px; background: #f1f2f4; color: var(--ink-900); font-family: var(--font-serif); font-size: 0.95rem; cursor: pointer; transition: background 0.15s ease; } .ft-submit:hover { background: #fff; } .ft-privacy { margin: 1.25rem 0 0; text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 0.82rem; line-height: 1.6; } .ft-privacy a { text-decoration: underline; } /* Darker brand strip: copyright left, legal links right */ .site-footer-bottom { background: var(--brand-footer-dark); color: #fff; margin-top: 2.5rem; padding: 0.9rem 0; font-size: 0.85rem; } .ft-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; flex-wrap: wrap; } .ft-copy { color: var(--brand-navy); } .ft-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 0; padding: 0; } .site-footer-bottom a { color: #fff; text-decoration: none; } .site-footer-bottom a:hover { color: #fff; text-decoration: underline; } @media (max-width: 767.98px) { .ft-bottom-inner { justify-content: center; text-align: center; } .ft-legal { justify-content: center; } } /* ---------- Login ---------- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy) 260px, var(--surface-100) 260px); } .auth-card { width: 100%; max-width: 380px; background: var(--surface-0); border-radius: var(--radius-lg); box-shadow: 0 20px 45px rgba(0, 0, 70, 0.18); padding: 2.25rem 2.25rem 2rem; } .auth-card .brand-mark { color: var(--brand-navy); font-weight: 800; font-size: 1.3rem; text-align: center; display: block; margin-bottom: 0.35rem; } .auth-card .brand-sub { text-align: center; color: var(--ink-500); font-size: 0.85rem; margin-bottom: 1.75rem; display: block; } /* ---------- Property detail page (public) ---------- */ /* ---------- Photo mosaic ---------- */ .pdp-mosaic { display: grid; gap: 10px; margin-bottom: 1.25rem; } .pdp-mosaic--hero { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 520px; } .pdp-mosaic--hero .pdp-m-tile:first-child { grid-row: span 2; } .pdp-mosaic--grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: 250px; } .pdp-m-tile { position: relative; padding: 0; border: none; background: var(--surface-200); cursor: pointer; border-radius: var(--radius-md); overflow: hidden; display: block; } .pdp-m-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; } .pdp-m-tile:hover img { transform: scale(1.05); } .pdp-m-count { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(20, 21, 43, 0.82); color: #fff; font-size: 0.82rem; font-weight: 600; padding: 0.5rem 0.85rem; border-radius: 8px; } .pdp-m-count svg { width: 16px; height: 16px; } .pdp-hero-placeholder { width: 100%; height: 420px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.35); background: var(--brand-navy); border-radius: var(--radius-lg); margin-bottom: 1.25rem; } .pdp-hero-placeholder svg { width: 64px; height: 64px; } @media (max-width: 768px) { .pdp-mosaic { grid-template-columns: 1fr !important; grid-template-rows: none !important; height: auto; } .pdp-mosaic .pdp-m-tile:not(:first-child) { display: none; } .pdp-mosaic .pdp-m-tile:first-child { height: 280px; } } /* ---------- Breadcrumb + title ---------- */ .pdp-crumb { font-size: 0.9rem; color: var(--accent-gold-600); margin-bottom: 0.75rem; } .pdp-crumb a { color: var(--accent-gold-600); text-decoration: none; } .pdp-crumb a:hover { text-decoration: underline; } .pdp-crumb-sep { color: var(--ink-300); margin: 0 0.35rem; } .pdp-h1 { font-family: var(--font-serif); font-weight: 700; font-size: 2.5rem; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink-900); margin-bottom: 1.5rem; } /* ---------- Facts strip + price ---------- */ .pdp-facts { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--border-subtle); } .pdp-facts-list { display: flex; flex-wrap: wrap; gap: 2rem; } .pdp-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; min-width: 56px; } .pdp-stat > svg { width: 26px; height: 26px; color: var(--ink-700); } .pdp-stat-val { font-weight: 700; font-size: 0.92rem; color: var(--ink-900); } .pdp-stat-sub { font-size: 0.75rem; color: var(--ink-500); } .pdp-price-box { text-align: right; margin-left: auto; } .pdp-ref { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink-700); margin-bottom: 0.2rem; } .pdp-price { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--ink-900); } /* Lighter than the amount so the figure still reads first. */ .pdp-price-period { font-size: 1.05rem; font-weight: 500; color: var(--ink-500); } /* ---------- Main column ---------- */ .pdp-headline { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; line-height: 1.3; color: var(--brand-navy); padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-subtle); } .pdp-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; } .pdp-tag { font-size: 0.82rem; color: var(--ink-700); background: var(--surface-100); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 0.28rem 0.8rem; } .pdp-block { margin-bottom: 2.5rem; } .pdp-block-title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; color: var(--ink-900); padding-bottom: 0.5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--brand-navy); display: inline-block; } /* Match the site's content body (.ci-body) — serif, same size & colour. */ .pdp-description { font-family: var(--font-serif); line-height: 1.75; color: var(--ink-700); } .pdp-description p { margin-bottom: 1rem; } .pdp-description h2, .pdp-description h3, .pdp-description h4 { font-family: var(--font-serif); margin: 1.4rem 0 0.6rem; } .pdp-map-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--brand-navy); font-weight: 600; text-decoration: none; } .pdp-map-link svg { width: 18px; height: 18px; } .pdp-map-link:hover { color: var(--accent-gold-600); } .pdp-energy-list { margin: 1.5rem 0 0; padding-left: 1.1rem; color: var(--ink-700); font-size: 0.92rem; line-height: 1.9; } /* Statutory notices under the DPE (Local Hazards / clearing obligations). */ .pdp-statutory { margin: 1.5rem 0 0; color: var(--ink-700, #4a4d5e); font-size: 0.92rem; line-height: 1.6; } .pdp-statutory p { margin: 0 0 1rem; } .pdp-statutory strong { color: var(--ink-900, #1c1e2a); } .pdp-statutory a { color: var(--accent-gold-600, #b7873c); word-break: break-word; } /* ---------- Sticky enquiry sidebar ---------- */ .pdp-aside { position: sticky; top: 96px; background: var(--surface-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.1rem; } .pdp-save { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.55rem; background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 0.8rem; font-weight: 700; color: var(--ink-900); cursor: pointer; transition: border-color 0.15s ease; } .pdp-save svg { width: 20px; height: 20px; color: #e0245e; } .pdp-save:hover { border-color: var(--ink-300); } .pdp-save.is-saved { border-color: #e0245e; } .pdp-save.is-saved svg { fill: #e0245e; } .pdp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.7rem 0 1rem; } .pdp-act { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.65rem 0.4rem; border-radius: 8px; font-size: 0.88rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; background: #fff; } .pdp-act svg { width: 18px; height: 18px; } .pdp-act-gold { background: var(--accent-gold); color: #fff; } .pdp-act-gold:hover { background: var(--accent-gold-600); color: #fff; } .pdp-act-wa { border-color: #25d366; color: #1a9e4b; } .pdp-act-wa:hover { background: #25d366; color: #fff; } .pdp-act-view { border-color: #e0245e; color: #e0245e; } .pdp-act-view:hover { background: #e0245e; color: #fff; } .pdp-act-share { border-color: var(--border-subtle); color: var(--ink-700); } .pdp-act-share:hover { background: var(--surface-200); } .pdp-enquiry .form-control { font-size: 0.9rem; border-color: var(--border-subtle); } .pdp-enquiry .form-control:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 0.2rem rgba(242, 177, 69, 0.2); } .pdp-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78rem; color: var(--ink-700); margin-top: 0.7rem; line-height: 1.4; } .pdp-check input { margin-top: 0.15rem; flex-shrink: 0; } .pdp-submit { background: var(--brand-navy); color: #fff; font-weight: 700; padding: 0.7rem; border: none; } .pdp-submit:hover { background: var(--brand-navy-700); color: #fff; } /* ---------- Sales-person card (main column) ---------- */ .pdp-seller { display: flex; gap: 1.5rem; align-items: stretch; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .pdp-seller-photo { flex: 0 0 40%; max-width: 342px; background: var(--surface-100); } .pdp-seller-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp-seller-info { padding: 1.25rem 1.5rem 1.25rem 0; display: flex; flex-direction: column; } .pdp-seller-intro { font-size: 0.95rem; color: var(--ink-700); margin-bottom: 0.9rem; } .pdp-seller-name { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: var(--ink-900); } .pdp-seller-role { color: var(--ink-700); margin: 0.6rem 0; } .pdp-seller-rsac { font-size: 0.9rem; color: var(--ink-700); margin-bottom: 0.6rem; } .pdp-seller-phone { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-900); text-decoration: none; font-weight: 600; } .pdp-seller-phone svg { width: 16px; height: 16px; color: var(--accent-gold-600); } .pdp-seller-phone:hover { color: var(--accent-gold-600); } .pdp-seller-btn { align-self: flex-start; margin-top: 1.1rem; background: var(--brand-navy); color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9rem; padding: 0.55rem 1.1rem; border-radius: 8px; } .pdp-seller-btn:hover { background: var(--brand-navy-700); color: #fff; } @media (max-width: 575px) { .pdp-seller { flex-direction: column; } .pdp-seller-photo { flex-basis: auto; max-width: none; height: 240px; } .pdp-seller-info { padding: 1.25rem; } } /* ---------- Location map ---------- */ .pdp-map { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); margin-bottom: 0.75rem; } .pdp-map iframe { width: 100%; height: 360px; border: 0; display: block; } @media (max-width: 991px) { .pdp-aside { position: static; margin-top: 2rem; } .pdp-h1 { font-size: 1.9rem; } } .pdp-similar { margin-top: 3rem; } /* ---------- Property card (public) ---------- */ .rp-card { display: flex; flex-direction: column; height: 100%; background: var(--surface-0); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); transition: box-shadow 0.2s ease, transform 0.2s ease; } .rp-card:hover { box-shadow: 0 16px 36px rgba(20, 21, 43, 0.14); transform: translateY(-3px); } .rp-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--brand-navy); } .rp-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .rp-card:hover .rp-card-media img { transform: scale(1.06); } .rp-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.35); } .rp-card-placeholder svg { width: 48px; height: 48px; } /* Favourite heart, top-left over the photo */ .rp-heart { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); z-index: 3; /* Button resets — it sits inside the card's , so it must look identical to the old decorative span while being independently clickable. */ padding: 0; background: none; border: 0; cursor: pointer; transition: transform 0.15s ease, color 0.15s ease; } .rp-heart svg { width: 22px; height: 22px; } .rp-heart:hover { transform: scale(1.12); } /* Saved: fill the outline in the brand red so it reads at a glance. */ .rp-heart.is-saved { color: #e2483d; } .rp-heart.is-saved svg { fill: currentColor; } /* Brief pop when the visitor saves it. */ .rp-heart.is-pulse { animation: rp-heart-pop 0.35s ease; } @keyframes rp-heart-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } } /* Marketing-tag diagonal corner ribbon (Exclusive / New / Price-change …), navy band with gold serif text. */ .rp-ribbon { position: absolute; /* Fixed-width band with centred text so every label ("NEW", "PRICE-CHANGE") renders the same size. Sizing by padding instead made the band only as long as its text, so short labels left a stub that didn't reach across the corner. Geometry: the band is centred on the 45° diagonal 45px in from the top-right corner — right = -(width/2 - 45), top = 45 - height/2 — so it spans the full corner and is clipped by .rp-card-media's overflow:hidden. Keep the three in step if any one changes. */ top: 32px; right: -65px; width: 220px; padding: 0.3rem 0; line-height: 1.4; text-align: center; transform: rotate(45deg); background: var(--brand-navy); color: #fff; font-family: var(--font-serif); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); z-index: 2; } .rp-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.25rem 1.2rem; font-family: var(--font-serif); } .rp-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .rp-card-type { font-size: 1.15rem; font-weight: 700; color: var(--ink-900); line-height: 1.25; } .rp-card-price { font-size: 1.12rem; font-weight: 700; color: var(--ink-900); white-space: nowrap; flex-shrink: 0; } .rp-card-location { font-size: 0.98rem; font-weight: 700; color: var(--ink-900); margin-top: 0.25rem; } .rp-card-features { font-size: 0.85rem; color: var(--ink-500); margin-top: 0.5rem; line-height: 1.55; } .rp-card-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.1rem; margin: 0.9rem 0 0; padding: 0.85rem 0; border-top: 1px solid var(--border-subtle); } .rp-card-fact { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-700); } .rp-card-fact svg { width: 18px; height: 18px; color: var(--ink-500); flex-shrink: 0; } .rp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; } .rp-card-ref { font-size: 0.9rem; color: var(--ink-700); } .rp-card-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.4rem; border-radius: 4px; background: var(--brand-navy); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 0.9rem; text-decoration: none; border: 1px solid var(--brand-navy); transition: background 0.15s ease, color 0.15s ease; } .rp-card-cta:hover { background: var(--brand-navy-700); color: #fff; } /* Transparent modal shell so the dimmed page shows through the viewer */ #pdpGalleryModal .modal-content { background: transparent; } .pdp-lightbox { position: relative; display: flex; flex-direction: column; height: 100vh; background: rgba(8, 8, 12, 0.62); } /* Top toolbar: photo counter (left) + tools (right) */ .pdp-lb-top { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 12; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: rgba(0, 0, 0, 0.72); pointer-events: none; } .pdp-lb-counter { color: #fff; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; } .pdp-lb-tools { display: flex; gap: 0.3rem; pointer-events: auto; } .pdp-lb-tool { width: 38px; height: 38px; border: none; background: transparent; color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease; } .pdp-lb-tool:hover { background: rgba(255, 255, 255, 0.18); } .pdp-lb-tool svg { width: 20px; height: 20px; } .pdp-lb-zoom.is-on { background: rgba(255, 255, 255, 0.25); } .pdp-lb-play .pdp-ico-pause { display: none; } .pdp-lb-play.is-playing .pdp-ico-play { display: none; } .pdp-lb-play.is-playing .pdp-ico-pause { display: block; } .pdp-lb-body { flex: 1; display: flex; min-height: 0; } .pdp-lb-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; padding: 72px 44px 44px; } .pdp-lightbox-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); transition: transform 0.2s ease; cursor: zoom-in; } .pdp-lightbox.is-zoomed .pdp-lightbox-image { transform: scale(2); cursor: zoom-out; } .pdp-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; } .pdp-lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); } .pdp-lightbox-nav svg { width: 22px; height: 22px; } .pdp-lightbox-prev { left: 20px; } .pdp-lightbox-next { right: 20px; } .pdp-lightbox-caption { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); color: #fff; padding: 0.5rem 1.1rem; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; text-align: center; white-space: nowrap; } /* Vertical thumbnail rail with the grey backdrop */ .pdp-lightbox-thumbs { width: 240px; flex-shrink: 0; background: #cfd2d8; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 60px 12px 12px; align-content: start; } .pdp-lightbox-thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: none; line-height: 0; } .pdp-lightbox-thumb img { width: 100%; height: 72px; object-fit: cover; display: block; opacity: 0.9; transition: opacity 0.15s ease; } .pdp-lightbox-thumb:hover img { opacity: 1; } .pdp-lightbox-thumb.active { border-color: var(--accent-gold); } .pdp-lightbox-thumb.active img { opacity: 1; } /* "All photos" grid overlay */ .pdp-lb-gridview { display: none; position: absolute; inset: 0; z-index: 10; background: #0b0b0d; overflow-y: auto; padding: 64px 24px 28px; } .pdp-lightbox.is-gridview .pdp-lb-gridview { display: block; } .pdp-lb-gridview-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; max-width: 1200px; margin: 0 auto; } .pdp-lb-gridimg { padding: 0; border: none; border-radius: 8px; overflow: hidden; cursor: pointer; background: #222; line-height: 0; } .pdp-lb-gridimg img { width: 100%; height: 150px; object-fit: cover; display: block; transition: transform 0.2s ease; } .pdp-lb-gridimg:hover img { transform: scale(1.05); } @media (max-width: 768px) { .pdp-lb-body { flex-direction: column; } .pdp-lightbox-thumbs { width: 100%; height: 96px; padding: 8px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84px; } .pdp-lightbox-thumb img { height: 100%; } } /* ---------- Search filter dropdowns (public) ---------- */ .pd-filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; } .pd-field { flex: 1 1 108px; min-width: 100px; max-width: 170px; } .pd-dropdown { position: relative; width: 100%; } .pd-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--surface-0); color: var(--ink-900); font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .pd-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-toggle:hover { border-color: var(--accent-teal); } .pd-dropdown.pd-open .pd-toggle { border-color: var(--accent-teal); box-shadow: 0 0 0 3px rgba(31, 138, 140, 0.12); } .pd-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-500); transition: transform 0.15s ease; } .pd-dropdown.pd-open .pd-chevron { transform: rotate(180deg); } .pd-panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 45; width: 280px; max-width: 90vw; background: var(--surface-0); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(20, 21, 43, 0.18); border: 1px solid var(--border-subtle); padding: 0.9rem; text-align: left; } .pd-panel.show { display: block; } /* On narrow screens a panel anchored to its own pill can overflow off the right edge of the viewport (e.g. the 3rd pill in a row). Centering it as a fixed overlay avoids that regardless of which pill triggered it. */ @media (max-width: 575.98px) { .pd-panel { position: fixed; left: 12px; right: 12px; top: 50%; transform: translateY(-50%); width: auto; max-width: none; max-height: 80vh; overflow-y: auto; } } .pd-search { width: 100%; padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid var(--border-subtle); font-size: 0.85rem; margin-bottom: 0.7rem; color: var(--ink-900); } .pd-search:focus { outline: none; border-color: var(--accent-teal); } .pd-actions { display: flex; justify-content: space-between; margin-bottom: 0.6rem; } .pd-actions button { border: none; background: none; color: var(--accent-teal-600); font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 0; } .pd-actions button:hover { text-decoration: underline; } .pd-options { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.15rem; } .pd-option { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 6px; font-size: 0.86rem; color: var(--ink-700); cursor: pointer; margin: 0; text-align: left; } .pd-option:hover { background: var(--surface-100); } .pd-option input[type="checkbox"] { accent-color: var(--accent-teal); width: 16px; height: 16px; flex-shrink: 0; } /* Section header inside the Areas dropdown ("Departments" / "Towns & Cities"). */ .pd-group-label { padding: 0.5rem 0.6rem 0.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500, #8a8ea3); } .pd-group-label:first-child { padding-top: 0.15rem; } /* Hierarchical Areas dropdown: department (parent) with its towns (children). */ .pd-parent-row { display: flex; align-items: center; gap: 0; } .pd-branch-toggle { flex: none; width: 26px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; color: var(--ink-500, #8a8ea3); cursor: pointer; border-radius: 6px; } .pd-branch-toggle:hover { background: var(--surface-100); color: var(--ink-700); } .pd-branch-toggle svg { width: 13px; height: 13px; transition: transform 0.15s ease; } .pd-branch.pd-open > .pd-parent-row .pd-branch-toggle svg { transform: rotate(90deg); } .pd-parent-row .pd-option-parent { flex: 1 1 auto; min-width: 0; font-weight: 600; } .pd-children { display: none; } .pd-branch.pd-open > .pd-children { display: block; } .pd-option-child { padding-left: 2.35rem; font-weight: 400; } .pd-option-child span { color: var(--ink-600, #5a5e73); } .pd-option-single { width: 100%; border: none; background: none; justify-content: flex-start; } .pd-option-single.pd-option-selected { background: rgba(31, 138, 140, 0.1); color: var(--accent-teal-600); font-weight: 700; } .pd-search-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem; border: none; border-radius: 999px; padding: 0.65rem 1.9rem; background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-600)); color: #fff; font-weight: 700; font-size: 0.88rem; white-space: nowrap; box-shadow: 0 4px 14px rgba(179, 135, 58, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; } .pd-search-spinner { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff; border-radius: 50%; animation: pd-spin 0.6s linear infinite; } @keyframes pd-spin { to { transform: rotate(360deg); } } .pd-search-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(179, 135, 58, 0.45); color: #fff; } @media (max-width: 767px) { .pd-filter-bar { justify-content: flex-start; } } /* Site Settings sub-navigation (Branding / Header Menu) */ .settings-subnav { gap: 0.35rem; border-bottom: 1px solid #e6e6ef; padding-bottom: 0.75rem; } .settings-subnav .nav-link { color: var(--brand-navy); font-weight: 600; padding: 0.4rem 0.95rem; border-radius: 999px; } .settings-subnav .nav-link:hover { background: rgba(0, 0, 70, 0.06); } .settings-subnav .nav-link.active { background: var(--brand-navy); color: #fff; } /* ============================================================ Contact page (/contact) — "Converse with us" ============================================================ */ /* Full-bleed banner. Neutral grey by default (matching the design); an admin-set banner_image layers over it via an inline background-image. */ .contact-banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; padding: 3rem 1rem; background: #b0b0b0 center/cover no-repeat; text-align: center; } /* Dark overlay so the white title stays readable over any banner image. */ .contact-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); pointer-events: none; } .contact-banner-title { position: relative; z-index: 1; margin: 0; color: #fff; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 4.5vw, 3.25rem); letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); } .contact-wrap { max-width: 1120px; padding-top: 3rem; padding-bottom: 4rem; } .contact-body { font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.75; color: #1f2430; } .contact-body h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.15rem); margin: 0 0 1.1rem; } .contact-body p { margin: 0 0 1.1rem; } .contact-body a { color: var(--accent-gold, #b8892b); } /* The typing clip sits inline in the article, full content width. */ .contact-video { margin: 1.75rem 0; border-radius: 4px; overflow: hidden; background: #000; line-height: 0; } .contact-video video { width: 100%; height: auto; display: block; } .contact-form-wrap { max-width: 660px; margin: 2.5rem auto 0; } /* ---- Where in France? directory ---- */ .geo-dept-grid { list-style: none; padding: 0; margin: 1.5rem auto 2rem; max-width: 720px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem 2.5rem; } .geo-dept-grid li { border-bottom: 1px solid #eceef4; } .geo-dept-grid a { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.25rem; color: var(--ink-800, #2a2d3a); text-decoration: none; font-size: 1.02rem; } .geo-dept-grid a:hover { color: var(--accent-gold-600, #b7873c); } .geo-dept-flag { width: 22px; height: 26px; flex: none; object-fit: contain; } .geo-dept-flag--none { display: inline-block; } /* keeps names aligned when a flag is missing */ .geo-town-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.9rem; margin: 1.25rem 0 2rem; line-height: 1.9; } .geo-town-cloud a { color: var(--brand-navy, #2b3a55); text-decoration: none; font-size: 0.98rem; white-space: nowrap; } .geo-town-cloud a:hover { color: var(--accent-gold-600, #b7873c); text-decoration: underline; } @media (max-width: 560px) { .geo-dept-grid { grid-template-columns: 1fr; } } /* ---- Meet the Team ---- */ .team-intro { max-width: 780px; margin: 0 auto 2rem; text-align: center; } .team-grid { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.5rem 0 3rem; } .team-card { display: grid; grid-template-columns: 340px 1fr; border: 1px solid var(--border-subtle, #e6e8f0); border-radius: 12px; overflow: hidden; background: #fff; } .team-card-photo { background: var(--surface-200, #eef0f6); min-height: 340px; } .team-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-card-body { padding: 1.75rem 2rem; display: flex; flex-direction: column; } .team-card-name { font-family: var(--font-serif); font-weight: 700; color: var(--ink-900, #1c1e2a); font-size: 1.9rem; line-height: 1.15; margin: 0 0 0.9rem; } .team-card-bio { color: var(--ink-700, #4a4d5e); line-height: 1.6; margin: 0 0 1rem; } .team-card-role { font-weight: 600; color: var(--ink-800, #2a2d3a); margin: 0 0 0.35rem; } .team-card-line { color: var(--ink-600, #5a5e73); margin: 0 0 0.3rem; } .team-card-phone { display: flex; align-items: center; gap: 0.45rem; color: var(--accent-gold-600, #b7873c); margin: 0.4rem 0 0; } .team-card-phone a { color: inherit; text-decoration: none; } .team-card-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: auto; padding-top: 1.5rem; } .team-btn { background: var(--brand-navy, #2b3a55); color: #fff; text-decoration: none; padding: 0.6rem 1.4rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; transition: background 0.12s ease; } .team-btn:hover { background: var(--brand-navy-700, #1f2c44); color: #fff; } @media (max-width: 700px) { .team-card { grid-template-columns: 1fr; } .team-card-photo { min-height: 260px; } } /* ---- Agent profile + portfolio ---- */ .agent-profile { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; margin: 2rem 0 2.5rem; } .agent-profile-photo img { width: 100%; border-radius: 12px; display: block; } .agent-profile-name { font-family: var(--font-serif); font-weight: 700; color: var(--ink-900, #1c1e2a); font-size: 2.2rem; margin: 0 0 1rem; } .agent-profile-bio { color: var(--ink-700, #4a4d5e); line-height: 1.65; margin: 0 0 1rem; } .agent-profile-role { font-weight: 600; color: var(--ink-800, #2a2d3a); margin: 0 0 0.35rem; } .agent-profile-rsac { color: var(--ink-600, #5a5e73); margin: 0 0 0.35rem; } .agent-profile-phone { color: var(--accent-gold-600, #b7873c); margin: 0.4rem 0 0; font-weight: 600; } .agent-profile-phone a { color: inherit; text-decoration: none; } .agent-portfolio { margin-bottom: 3rem; } @media (max-width: 700px) { .agent-profile { grid-template-columns: 1fr; } } /* ---- About page ---- */ .about-title { text-align: center; font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem); color: var(--ink-900, #1c1e2a); margin: 1.5rem 0 1.75rem; } /* ---- Sell page ---- */ .sell-form-wrap { max-width: 660px; margin: 1.5rem auto 2.5rem; } .sell-cta { display: inline-block; background: var(--brand-navy, #2b3a55); color: #fff; padding: 0.7rem 1.5rem; border-radius: 999px; font-weight: 700; text-decoration: none; } .sell-cta:hover { background: var(--brand-navy-700, #1f2c44); color: #fff; } .sell-portals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; } .sell-portal { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 0.9rem; background: #fff; border: 1px solid #e6e8f0; border-radius: 10px; } .sell-portal img { max-width: 100%; max-height: 46px; object-fit: contain; } .sell-portal span { font-weight: 700; color: var(--brand-navy, #2b3a55); text-align: center; font-size: 0.95rem; } .contact-form-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; margin-bottom: 1.5rem; } /* Tall, airy inputs with generous spacing, as in the reference. */ .contact-form .form-control, .contact-form .form-select { border: 1px solid #d6d9de; border-radius: 3px; padding: 0.85rem 1rem; font-family: var(--font-serif); font-size: 0.98rem; margin-bottom: 1.4rem; } .contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--brand-navy); box-shadow: none; } .contact-form textarea.form-control { min-height: 150px; resize: vertical; } /* Country code + number sit on one row, the code kept narrow. */ .contact-phone { display: flex; gap: 0.5rem; } .contact-phone .form-select { flex: 0 0 42%; max-width: 210px; } .contact-phone .form-control { flex: 1 1 auto; } .contact-radios { border: 0; padding: 0; margin: 0 0 1.4rem; } .contact-radios legend { float: none; width: auto; font-family: var(--font-serif); font-weight: 700; font-size: 0.98rem; margin-bottom: 0.6rem; } .contact-radios .form-check { margin-bottom: 0.35rem; } .contact-radios .form-check-label, .contact-check .form-check-label { font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.5; } .contact-check { margin-bottom: 1.1rem; } .contact-submit-row { display: flex; justify-content: flex-end; margin: 1.5rem 0 1rem; } .contact-submit { background: var(--brand-navy); color: #fff; border: 0; border-radius: 4px; padding: 0.75rem 2.1rem; font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease; } .contact-submit:hover { background: var(--brand-navy-700, #000046); } .contact-privacy { font-family: var(--font-serif); font-size: 0.86rem; line-height: 1.6; color: #5c6470; margin: 0; } @media (max-width: 575.98px) { .contact-banner { min-height: 320px; } .contact-phone { flex-direction: column; } .contact-phone .form-select { flex: 1 1 auto; max-width: none; } .contact-submit-row { justify-content: stretch; } .contact-submit { width: 100%; } } /* Form builder (admin → Forms) */ .fb-row .fb-handle { cursor: default; font-size: 1.1rem; } .fb-row .form-label-sm { font-size: 0.78rem; margin-bottom: 0.15rem; color: #5c6470; } /* The CRM mapping panel is tinted so the "where does this go" column reads as a distinct concern from the field's own settings. */ .fb-crm { background: #f4f7fb; border: 1px solid #e2e8f2; } /* ============================ Enquiry chatbot ============================ */ .chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 1090; font-family: var(--font-sans, system-ui, sans-serif); } .chat-launcher { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--brand-navy, #2b3a55); color: #fff; border: none; border-radius: 999px; padding: 0.7rem 1.15rem; font-size: 0.92rem; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(20, 21, 43, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; } .chat-launcher:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(20, 21, 43, 0.34); } .chat-launcher-icon { width: 20px; height: 20px; } .chat-widget.chat-open .chat-launcher { display: none; } .chat-panel { position: absolute; right: 0; bottom: 0; width: 370px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(20, 21, 43, 0.32); } .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; background: var(--brand-navy, #2b3a55); color: #fff; } .chat-header-text { display: flex; flex-direction: column; line-height: 1.2; } .chat-header-text strong { font-size: 0.98rem; } .chat-header-text span { font-size: 0.76rem; opacity: 0.8; } .chat-close { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; opacity: 0.85; } .chat-close:hover { opacity: 1; } .chat-close svg { width: 18px; height: 18px; } .chat-body { flex: 1; overflow-y: auto; padding: 1rem; background: #f6f7fb; display: flex; flex-direction: column; gap: 0.5rem; } .chat-msg { display: flex; } .chat-msg-bot { justify-content: flex-start; } .chat-msg-user { justify-content: flex-end; } .chat-bubble { max-width: 82%; padding: 0.6rem 0.85rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.45; word-wrap: break-word; } .chat-msg-bot .chat-bubble { background: #fff; color: var(--ink-800, #2a2d3a); border: 1px solid #e6e8f0; border-bottom-left-radius: 4px; } .chat-msg-user .chat-bubble { background: var(--accent-gold-600, #c8a45c); color: #fff; border-bottom-right-radius: 4px; } .chat-control { display: flex; flex-direction: column; margin: 0.15rem 0 0.35rem; } .chat-choices { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chat-choice { background: #fff; border: 1px solid var(--brand-navy, #2b3a55); color: var(--brand-navy, #2b3a55); border-radius: 999px; padding: 0.45rem 0.85rem; font-size: 0.83rem; font-weight: 600; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .chat-choice:hover { background: var(--brand-navy, #2b3a55); color: #fff; } .chat-inline { display: flex; gap: 0.4rem; align-items: stretch; } .chat-inline-col { display: flex; flex-direction: column; gap: 0.5rem; } .chat-select, .chat-input { flex: 1; min-width: 0; border: 1px solid #cdd2e0; border-radius: 9px; padding: 0.5rem 0.6rem; font-size: 0.86rem; background: #fff; color: var(--ink-800, #2a2d3a); } .chat-select:focus, .chat-input:focus { outline: none; border-color: var(--accent-gold-600, #c8a45c); } .chat-send { background: var(--brand-navy, #2b3a55); color: #fff; border: none; border-radius: 9px; padding: 0.5rem 0.9rem; font-size: 0.84rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .chat-send:hover { background: var(--brand-navy-700, #1f2c44); } .chat-link { align-self: flex-start; background: none; border: none; color: var(--accent-gold-600, #b7873c); font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0.2rem 0; text-decoration: underline; } .chat-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 190px; overflow-y: auto; padding: 2px; } .chat-chip { display: inline-flex; align-items: center; } .chat-chip input { position: absolute; opacity: 0; pointer-events: none; } .chat-chip span { display: inline-block; border: 1px solid #cdd2e0; border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.8rem; color: var(--ink-700, #4a4d5e); cursor: pointer; background: #fff; } .chat-chip input:checked + span { background: var(--brand-navy, #2b3a55); color: #fff; border-color: var(--brand-navy, #2b3a55); } .chat-error { color: #c0392b; font-size: 0.8rem; } .chat-typing { display: inline-flex; gap: 4px; padding: 0.55rem 0.7rem; background: #fff; border: 1px solid #e6e8f0; border-radius: 14px; width: fit-content; } .chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #b9bed0; animation: chatBlink 1.2s infinite ease-in-out both; } .chat-typing span:nth-child(2) { animation-delay: 0.2s; } .chat-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes chatBlink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } } @media (max-width: 480px) { .chat-widget { right: 12px; bottom: 12px; } .chat-panel { width: calc(100vw - 24px); height: calc(100vh - 24px); } } /* ===================================================================== Focus Letting home page The lettings home page is built from the section types below. Shared heading furniture (.hs-*) sits first, then one block per section type. ===================================================================== */ /* ---------- Shared section headings ---------- */ .hs-eyebrow { text-align: center; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.75rem; font-weight: 600; color: var(--brand-accent); margin: 0 0 0.75rem; } .hs-heading { text-align: center; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 1rem; } .hs-intro { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; color: var(--ink-700); font-size: 1.05rem; } /* ---------- Hero: full-bleed photo, centred headline, floating search ---------- */ .home-hero { align-items: center; margin-bottom: 0; min-height: 660px; background-image: none; padding: 5rem 1rem; } /* Until a hero photo is uploaded the brand colour shows through rather than a missing-image gap. */ .home-hero::before { background: linear-gradient(180deg, rgba(0, 20, 40, 0.30) 0%, rgba(0, 20, 40, 0.20) 50%, rgba(0, 20, 40, 0.40) 100%); } .home-hero-card { border: none; box-shadow: none; } .home-hero-card-head { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 0 2rem; } .home-hero-title { font-family: inherit; font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.03em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); } .home-hero-eyebrow { margin: 0.85rem 0 0; text-transform: uppercase; letter-spacing: 0.35em; font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } /* Dark translucent tray holding the white pill fields */ .home-hero-card-body { background: rgba(20, 45, 55, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 26px; max-width: 860px; margin: 0 auto; padding: 1.1rem; } .home-hero-fields { gap: 0.75rem; } .home-hero-fields .pd-field { flex: 1 1 calc(25% - 0.75rem); min-width: 150px; padding: 0; border-right: none; } .home-hero-fields .pd-toggle { background: #fff; border: none; border-radius: 999px; padding: 0.7rem 1.15rem; font-family: inherit; font-size: 0.95rem; color: var(--ink-700); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .home-hero-fields .pd-toggle:hover, .home-hero-fields .pd-dropdown.pd-open .pd-toggle { border: none; box-shadow: 0 0 0 2px var(--brand-accent); } .home-hero-submit { flex: 1 1 calc(50% - 0.75rem); min-width: 200px; border-radius: 999px; background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; font-family: inherit; text-transform: none; letter-spacing: 0.01em; font-size: 1rem; } .home-hero-submit:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: #fff; } @media (max-width: 767.98px) { .home-hero-fields .pd-field { flex: 1 1 calc(50% - 0.75rem); padding: 0; } .home-hero-submit { flex: 1 1 100%; } } /* ---------- Town tabs over a property grid ---------- */ .home-citytabs { padding: 4rem 0 1rem; } .ct-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 2.5rem; } .ct-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.85rem 1.35rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .ct-tab:hover { color: var(--ink-900); } .ct-tab.active { color: var(--ink-900); border-bottom-color: var(--brand-accent); } .ct-panel { display: none; } .ct-panel.active { display: block; } .ct-more { text-align: center; margin-top: 0.5rem; } /* ---------- Three illustrated selling-point columns ---------- */ .home-features { padding: 4rem 0; } .hf-grid { margin-top: 1rem; } .hf-col { text-align: center; margin-bottom: 2rem; } .hf-icon { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 1.5rem; } /* Keeps the three columns aligned before the artwork is uploaded. */ .hf-icon-placeholder { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--surface-100); } .hf-title { font-size: 1.25rem; margin: 0 0 0.6rem; } .hf-text { color: var(--ink-700); margin: 0; } /* ---------- Split call-to-action card ---------- */ .home-cta { padding: 2.5rem 0 4rem; } .hc-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-0); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); min-height: 380px; } /* Photo on the left instead of the right */ .hc-flip .hc-body { order: 2; } .hc-body { padding: 3rem; display: flex; flex-direction: column; justify-content: center; } .hc-heading { font-size: 1.75rem; margin: 0 0 1rem; } .hc-text { color: var(--ink-700); margin: 0 0 1.75rem; max-width: 42ch; } .hc-btn { align-self: flex-start; display: inline-block; padding: 0.85rem 2rem; border-radius: 999px; background: var(--brand-accent); color: #fff; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; } .hc-btn:hover { background: var(--brand-accent-hover); color: #fff; } .hc-media { background-color: var(--surface-100); background-size: cover; background-position: center; min-height: 320px; } @media (max-width: 767.98px) { .hc-card { grid-template-columns: 1fr; } .hc-flip .hc-body { order: 0; } .hc-body { padding: 2rem; } } /* ---------- Area tiles, staggered around inline copy panels ---------- */ .home-areagrid { padding: 3rem 0 4rem; } .hg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; grid-auto-rows: 278px; } /* The reference layout: copy panels hold the left column at the top and the midpoint, and the first tile runs double-height beside the opening panel. Applied only for the 2-panel / 6-tile shape it was drawn for; other counts keep the plain auto-placed grid above. */ .hg-staggered { grid-template-areas: "panel1 tall upper" "side tall lower" "panel2 rest1 rest2"; } .hg-staggered > :nth-child(1) { grid-area: panel1; } .hg-staggered > :nth-child(2) { grid-area: tall; } .hg-staggered > :nth-child(3) { grid-area: upper; } .hg-staggered > :nth-child(4) { grid-area: side; } .hg-staggered > :nth-child(5) { grid-area: lower; } .hg-staggered > :nth-child(6) { grid-area: panel2; } .hg-staggered > :nth-child(7) { grid-area: rest1; } .hg-staggered > :nth-child(8) { grid-area: rest2; } /* Copy panel sits in the grid but reads as plain text, not a card. */ .hg-panel { display: flex; flex-direction: column; justify-content: center; padding-right: 1.5rem; } .hg-panel-heading { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 0.75rem; } .hg-panel-text { color: var(--ink-500); margin: 0 0 2rem; } .hg-rule { display: block; width: 80px; height: 1px; background: var(--ink-300); } .hg-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 1.35rem 1.5rem; border-radius: 4px; overflow: hidden; background-color: var(--ink-700); background-size: cover; background-position: center; color: #fff; isolation: isolate; } /* Scrim so the count and town name stay readable over any photo. */ .hg-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.55) 100%); } .hg-tile:hover { color: #fff; } .hg-tile-count { font-size: 0.8rem; opacity: 0.92; } .hg-tile-name { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; } /* Always visible (as in the reference), nudged on hover rather than revealed. */ .hg-tile-more { margin-top: auto; display: inline-flex; align-items: center; gap: 0.6rem; width: 100%; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.92; } .hg-tile-more svg { width: 18px; height: 18px; margin-left: auto; transition: transform 0.15s ease; } .hg-tile:hover .hg-tile-more svg { transform: translateX(3px); } /* Below the staggered breakpoint the named areas are dropped and cells flow normally. Rows go auto-height so a copy panel takes only the space its text needs, with the tiles holding their own minimum instead. */ @media (max-width: 991.98px) { .hg-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } .hg-staggered { grid-template-areas: none; } /* Matches the specificity of the .hg-staggered > :nth-child(n) placements above, otherwise the named areas survive as implicit columns. */ .hg-grid.hg-staggered > :nth-child(n) { grid-area: auto; } .hg-tile { min-height: 240px; } /* Same specificity as the reset above, declared after it so the copy panels still run the full width of the grid. */ .hg-grid.hg-staggered > .hg-panel, .hg-grid > .hg-panel { grid-column: 1 / -1; padding: 0.5rem 0 1rem; } } @media (max-width: 575.98px) { .hg-grid { grid-template-columns: 1fr; } .hg-tile { min-height: 220px; } } /* ---------- Enquire: pitch panel + lead form over a photo ---------- */ .home-enquire { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); padding: 4.5rem 1rem; background-color: var(--brand-navy); background-size: cover; background-position: center; } .hq-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; max-width: 1160px; margin: 0 auto; } .hq-badge { display: inline-block; background: var(--brand-accent); color: #fff; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.7rem 2rem; margin-bottom: 1.5rem; } .hq-pitch-body { background: rgba(20, 45, 55, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 2rem; color: #fff; font-size: 1.4rem; line-height: 1.6; text-align: center; } .hq-pitch-body p:last-child { margin-bottom: 0; } .hq-form-card { background: #fff; border-radius: 4px; padding: 1.75rem; box-shadow: 0 20px 50px rgba(0, 0, 30, 0.25); } .hq-check { font-size: 0.8rem; color: var(--ink-700); } .hq-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-700); margin: 0.35rem 0 0.25rem; } .hq-hint { font-weight: 400; color: var(--ink-500); } .hq-req { color: #c0392b; margin-left: 2px; } .hq-radios { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.35rem 0; font-size: 0.88rem; } /* Multi-select sized so several towns are visible without scrolling. */ .hq-form-card select[multiple] { padding: 0.35rem; font-size: 0.9rem; } .hq-submit { width: 100%; border: none; border-radius: 4px; background: var(--brand-accent); color: #fff; font-weight: 600; padding: 0.8rem 1rem; margin-top: 0.5rem; } .hq-submit:hover { background: var(--brand-accent-hover); } @media (max-width: 767.98px) { .hq-layout { grid-template-columns: 1fr; } .hq-pitch-body { font-size: 1.1rem; padding: 1.5rem; } } /* ===================================================================== Editorial location page (/location/{slug}) ===================================================================== */ .loc-hero { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); min-height: 460px; display: flex; align-items: center; justify-content: center; padding: 5rem 1rem; background-color: var(--brand-footer); background-size: cover; /* Biased above centre: hero photos are a mix of portrait and landscape, and the upper band is where skylines and facades usually sit, so a tall photo crops to something recognisable rather than a blank middle. */ background-position: center 38%; color: #fff; text-align: center; isolation: isolate; } /* Scrim so the title holds up over any photograph. */ .loc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 20, 40, 0.35) 0%, rgba(0, 20, 40, 0.25) 50%, rgba(0, 20, 40, 0.55) 100%); } .loc-hero-inner { max-width: 760px; } .loc-eyebrow { text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.78rem; font-weight: 600; margin: 0 0 1rem; color: rgba(255, 255, 255, 0.9); } .loc-title { color: #fff; font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.03em; margin: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); } .loc-tagline { margin: 1rem auto 0; max-width: 620px; font-size: 1.1rem; color: rgba(255, 255, 255, 0.94); } .loc-hero-actions { margin-top: 2rem; } .loc-hero-btn { border-radius: 999px; background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; text-transform: none; letter-spacing: 0.01em; font-size: 1rem; } .loc-hero-btn:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: #fff; } /* ---------- Editorial copy ---------- */ .loc-intro { padding: 4rem 0 1rem; } .loc-intro-body { max-width: 780px; margin: 0 auto; color: var(--ink-700); font-size: 1.02rem; line-height: 1.8; } .loc-intro-body h2, .loc-intro-body h3 { margin: 2rem 0 0.75rem; font-size: 1.35rem; } .loc-intro-body p { margin-bottom: 1.1rem; } .loc-intro-body ul, .loc-intro-body ol { padding-left: 1.2rem; margin-bottom: 1.1rem; } .loc-intro-body li { margin-bottom: 0.4rem; } /* ---------- Numbered highlight cards ---------- */ .loc-highlights { padding: 3rem 0; } .loc-highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .loc-highlight { position: relative; padding: 2rem 1.75rem 1.75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-0); } .loc-highlight-num { display: block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; color: var(--brand-accent); margin-bottom: 0.6rem; } .loc-highlight-title { font-size: 1.15rem; margin: 0 0 0.5rem; } .loc-highlight-text { color: var(--ink-700); margin: 0; } /* ---------- Photo strip ---------- */ .loc-gallery { padding: 2rem 0 3rem; } .loc-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .loc-gallery-item { display: block; min-height: 220px; border-radius: 6px; background-color: var(--surface-100); background-size: cover; background-position: center; } /* ---------- Listings + closing call to action ---------- */ .loc-listings { padding: 3rem 0 4rem; } .loc-cta { padding: 0 0 4.5rem; } .loc-cta-inner { border-radius: var(--radius-lg); background: var(--brand-footer); color: #fff; padding: 3rem 2rem; text-align: center; } .loc-cta-heading { color: #fff; font-size: 1.75rem; margin: 0 0 0.75rem; } .loc-cta-text { color: rgba(255, 255, 255, 0.9); max-width: 560px; margin: 0 auto 1.75rem; } @media (max-width: 575.98px) { .loc-hero { min-height: 380px; padding: 3.5rem 1rem; } .loc-cta-inner { padding: 2rem 1.25rem; } } /* Location shortcuts above the property search results */ .loc-switcher { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .loc-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.95rem; border: 1px solid var(--border-subtle); border-radius: 999px; font-size: 0.88rem; color: var(--ink-700); background: var(--surface-0); transition: border-color 0.15s ease, color 0.15s ease; } .loc-pill:hover { border-color: var(--brand-accent); color: var(--brand-accent); } .loc-pill.is-active { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; } .loc-pill-count { font-size: 0.75rem; opacity: 0.75; } /* ===================================================================== Chat widget — restyle Overrides the base rules above: a rounder panel with a gradient header, a live dot on the launcher, and the proactive invitation card. ===================================================================== */ /* ---------- Launcher ---------- A 58px circle by default so it stays out of the page's way, widening on hover/focus to reveal the label. The label is laid out at full size and clipped by the button's width rather than toggled, so the reveal animates and the accessible name is always present for screen readers. */ .chat-launcher { position: relative; width: 58px; height: 58px; padding: 0; gap: 0; justify-content: center; overflow: hidden; background: var(--brand-accent); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); transition: width 0.22s ease, background 0.15s ease, box-shadow 0.15s ease; } /* 58 circle + label (83px at this size) + gap, with even breathing room. */ .chat-launcher:hover, .chat-launcher:focus-visible { width: 172px; background: var(--brand-accent-hover); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); transform: none; } .chat-launcher-icon { width: 24px; height: 24px; flex: none; } .chat-launcher-text { max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden; transition: max-width 0.22s ease, opacity 0.18s ease, margin 0.22s ease; } .chat-launcher:hover .chat-launcher-text, .chat-launcher:focus-visible .chat-launcher-text { max-width: 130px; opacity: 1; margin-left: 0.55rem; } /* Pulsing "we're here" dot, pinned to the circle's edge so it reads as a notification badge rather than part of the label. */ .chat-launcher-dot { position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--brand-accent); animation: chatPulse 2.4s ease-in-out infinite; } .chat-launcher:hover .chat-launcher-dot, .chat-launcher:focus-visible .chat-launcher-dot { opacity: 0; } @media (prefers-reduced-motion: reduce) { .chat-launcher, .chat-launcher-text { transition: none; } } @keyframes chatPulse { 0%, 100% { opacity: 0.45; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .chat-launcher-dot { animation: none; opacity: 1; } } /* ---------- Panel ---------- */ .chat-panel { width: 384px; border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.06); } .chat-header { gap: 0.75rem; padding: 1rem 1.1rem; background: linear-gradient(135deg, var(--brand-accent), var(--brand-footer)); } .chat-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18); color: #fff; } .chat-avatar svg { width: 20px; height: 20px; } /* Header text takes the middle, pushing the close button to the edge. */ .chat-header-text { flex: 1; } .chat-header-text strong { font-size: 1rem; letter-spacing: -0.01em; } .chat-header-text span { font-size: 0.75rem; opacity: 0.85; } .chat-body { background: var(--surface-100); padding: 1.1rem; gap: 0.6rem; } .chat-bubble { font-size: 0.9rem; line-height: 1.5; box-shadow: 0 1px 2px rgba(20, 21, 43, 0.06); } .chat-msg-bot .chat-bubble { border-radius: 14px 14px 14px 4px; } .chat-msg-user .chat-bubble { background: var(--brand-accent); color: #fff; border-radius: 14px 14px 4px 14px; } .chat-choice { border-radius: 999px; border-color: #d8dbe6; font-size: 0.85rem; } .chat-choice:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; } .chat-send { background: var(--brand-accent); border-radius: 999px; padding-inline: 1.1rem; } .chat-send:hover { background: var(--brand-accent-hover); } .chat-select, .chat-input { border-radius: 10px; } .chat-select:focus, .chat-input:focus { border-color: var(--brand-accent); } .chat-chip input:checked + span { background: var(--brand-accent); border-color: var(--brand-accent); } /* ---------- Proactive invitation ---------- */ .chat-teaser { position: absolute; right: 0; bottom: 62px; width: 280px; max-width: calc(100vw - 40px); padding: 1.1rem 1.2rem 1.2rem; border-radius: 16px 16px 4px 16px; background: #fff; border: 1px solid var(--border-subtle); box-shadow: 0 18px 44px rgba(20, 21, 43, 0.22); animation: chatTeaserIn 0.28s ease-out; } @keyframes chatTeaserIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .chat-teaser { animation: none; } } .chat-teaser-close { position: absolute; top: 6px; right: 6px; background: none; border: none; padding: 4px; line-height: 0; color: var(--ink-300); cursor: pointer; } .chat-teaser-close:hover { color: var(--ink-700); } .chat-teaser-close svg { width: 15px; height: 15px; } .chat-teaser-title { font-weight: 700; font-size: 0.95rem; color: var(--ink-900); margin-bottom: 0.35rem; padding-right: 1rem; } .chat-teaser-body { font-size: 0.83rem; line-height: 1.5; color: var(--ink-700); margin: 0 0 0.9rem; } .chat-teaser-cta { width: 100%; border: none; border-radius: 999px; background: var(--brand-accent); color: #fff; font-size: 0.85rem; font-weight: 600; padding: 0.55rem 1rem; cursor: pointer; } .chat-teaser-cta:hover { background: var(--brand-accent-hover); } /* The invitation belongs to the launcher, so it goes when the chat opens. */ .chat-widget.chat-open .chat-teaser { display: none; } @media (max-width: 480px) { .chat-teaser { width: calc(100vw - 24px); } } /* ===================================================================== Property page enquiry sidebar Agent card, WhatsApp, then the enquiry / viewing forms behind tabs. ===================================================================== */ .pdp-agent { display: flex; align-items: center; gap: 0.9rem; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-0); margin-bottom: 0.75rem; } .pdp-agent-photo { flex: none; width: 62px; height: 62px; border-radius: 50%; object-fit: cover; background: var(--surface-100); } /* Shown until an agent photo is uploaded. */ .pdp-agent-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--brand-accent); color: #fff; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; } .pdp-agent-info { display: flex; flex-direction: column; min-width: 0; } .pdp-agent-eyebrow { font-size: 0.72rem; color: var(--ink-500); line-height: 1.3; } .pdp-agent-name { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); } .pdp-agent-role { font-size: 0.82rem; color: var(--ink-500); } .pdp-agent-phone { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; font-size: 0.88rem; font-weight: 600; color: var(--brand-accent); } .pdp-agent-phone svg { width: 15px; height: 15px; } /* ---------- WhatsApp ---------- */ .pdp-wa-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1rem; border-radius: 999px; background: #25d366; color: #fff; font-weight: 600; font-size: 0.92rem; margin-bottom: 1rem; } .pdp-wa-btn:hover { background: #1da851; color: #fff; } .pdp-wa-btn svg { width: 19px; height: 19px; } /* ---------- Tabs ---------- */ .pdp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--surface-100); margin-bottom: 1rem; } .pdp-tab { border: none; background: none; border-radius: 999px; padding: 0.55rem 0.5rem; font-size: 0.86rem; font-weight: 600; color: var(--ink-500); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .pdp-tab:hover { color: var(--ink-900); } .pdp-tab.is-active { background: var(--brand-accent); color: #fff; } .pdp-panel[hidden] { display: none; } .pdp-field-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-700); margin-bottom: 0.2rem; } /* ---------- Save / share row ---------- */ .pdp-aside-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.9rem; } .pdp-tool { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 0.6rem; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-0); color: var(--ink-700); font-size: 0.82rem; font-weight: 600; cursor: pointer; } .pdp-tool:hover { border-color: var(--brand-accent); color: var(--brand-accent); } .pdp-tool svg { width: 16px; height: 16px; } .pdp-tool.is-saved { color: var(--brand-accent); border-color: var(--brand-accent); } .pdp-tool.is-saved svg { fill: currentColor; } /* ===================================================================== Phone fields (intl-tel-input) The plugin wraps the input in an inline-block, which collapses a Bootstrap .form-control's width — force the wrapper to fill its column and dress the country button to match the site's inputs. ===================================================================== */ .iti { width: 100%; display: block; } .iti__tel-input, .iti input[type="tel"] { width: 100%; } /* The library zeroes the input's own margin (with !important) so its wrapper controls layout — which means the wrapper has to carry whatever spacing the bare input used to have, or the field collides with the one below it. Only forms that margin .form-control directly need this; the rest space their fields with grid gutters or a wrapping element, which still applies. */ .ft-form .iti { margin-bottom: 0.9rem; } .contact-form .iti { margin-bottom: 1.4rem; } .iti__selected-country { border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px); background: transparent; } .iti__selected-country:hover, .iti__selected-country:focus { background: rgba(0, 0, 0, 0.04); } /* Dropdown sits above the sticky enquiry sidebar and the chat widget. */ .iti__dropdown-content { z-index: 1100; } .iti__country-list { max-height: 240px; } /* On the dark footer form the picker needs light text. */ .site-footer .iti__selected-country { color: var(--ink-900); } /* ===================================================================== Contact page ===================================================================== */ .contact-crumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--ink-500); padding-top: 1.5rem; } .contact-crumb a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--brand-accent); } .contact-crumb a:hover { text-decoration: underline; } .contact-crumb svg { width: 15px; height: 15px; } .contact-crumb-sep { color: var(--ink-300); } .contact-h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.03em; margin: 0.4rem 0 2rem; } /* ---------- Photo band ---------- */ .contact-hero { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); min-height: 380px; display: flex; align-items: center; justify-content: center; padding: 4rem 1rem; background-color: var(--brand-footer); background-size: cover; background-position: center 45%; text-align: center; color: #fff; isolation: isolate; } /* Scrim so the title holds up over any photograph. */ .contact-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 20, 40, 0.30) 0%, rgba(0, 20, 40, 0.20) 55%, rgba(0, 20, 40, 0.45) 100%); } .contact-hero-title { color: #fff; font-size: clamp(1.9rem, 4.5vw, 2.85rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); } .contact-hero-areas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin: 1rem 0 0; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.94); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .contact-hero-dot { opacity: 0.7; } /* ---------- Three ways to reach us ---------- */ .contact-ways { padding: 4rem 0 1rem; } .contact-ways-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; max-width: 950px; margin: 0 auto; text-align: center; } .contact-way { display: flex; flex-direction: column; align-items: center; } .contact-way-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 1rem; color: var(--ink-900); } .contact-way-icon svg { width: 100%; height: 100%; } .contact-way-icon--whatsapp { color: var(--brand-accent); } .contact-way-title { font-size: 1.3rem; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; } a.contact-way-title:hover { color: var(--brand-accent); } .contact-way-text { margin: 0.6rem 0 0; color: var(--ink-700); max-width: 24ch; } /* ---------- Enquiry card ---------- */ .contact-card-wrap { padding: 3rem 0 5rem; } .contact-card { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 3rem; align-items: start; max-width: 900px; margin: 0 auto; padding: 3rem; background: var(--surface-0); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); /* Brand hairline along the foot, as in the reference. */ border-bottom: 3px solid var(--brand-accent); } .contact-card-title { font-size: 1.7rem; letter-spacing: -0.02em; margin: 0 0 1rem; } .contact-card-intro { color: var(--ink-500); margin: 0 0 1.75rem; } .contact-card-phone, .contact-card-email { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--brand-accent); word-break: break-word; } .contact-card-phone { margin-bottom: 0.6rem; } .contact-card-phone svg { width: 18px; height: 18px; flex: none; } .contact-card-phone:hover, .contact-card-email:hover { text-decoration: underline; } .contact-card-address { margin: 1rem 0 0; font-size: 0.9rem; color: var(--ink-500); } /* Each row is the input plus its required asterisk, hence the flex. */ .contact-field { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; } .contact-field .form-control, .contact-field .iti { flex: 1; } .contact-field .form-control { padding: 0.7rem 0.9rem; border-radius: 6px; } .contact-req { color: #d63031; font-weight: 700; line-height: 1; } .contact-check { margin-bottom: 0.35rem; font-size: 0.92rem; } .contact-check-privacy { margin: 1.25rem 0 1.5rem; } .contact-check-privacy a { color: var(--brand-accent); font-weight: 600; } .contact-submit { width: 100%; border: none; border-radius: 6px; background: var(--brand-accent); color: #fff; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.85rem 1rem; cursor: pointer; transition: background 0.15s ease; } .contact-submit:hover { background: var(--brand-accent-hover); } @media (max-width: 767.98px) { .contact-card { grid-template-columns: 1fr; gap: 2rem; padding: 1.75rem; } .contact-hero { min-height: 300px; padding: 3rem 1rem; } .contact-hero-areas { letter-spacing: 0.12em; gap: 0.5rem; } } /* Crisper flags on scaled displays. Two problems with the library defaults: it only swaps to its 2x sprite at exactly min-resolution: 2x, so Windows scaling at 125–150% (dpr 1.25/1.5) upscales the 1x sprite and blurs it; and its sprite paths are relative, so reusing them from this stylesheet would resolve against /assets/css/ and 404. Both paths are therefore restated absolutely here. Keep the version in step with the CDN tags in layouts/public.php. */ .iti { --iti-path-flags-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@21.2.8/build/img/flags.png"); --iti-path-flags-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@21.2.8/build/img/flags@2x.png"); } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25x), (min-resolution: 120dpi) { .iti__flag { background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@21.2.8/build/img/flags@2x.png"); } }