@import url('https://fonts.googleapis.com/css2?family=Inter: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; --accent-gold: #f2b145; --accent-gold-600: #d9932b; --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); --font-serif: Georgia, 'Times New Roman', Times, serif; } /* Keeps anchor targets from landing underneath the sticky header. */ html { scroll-padding-top: 130px; } body { font-family: 'Inter', -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); } .hb-card.sortable-ghost { opacity: 0.4; } .hb-card.sortable-chosen { box-shadow: 0 8px 24px rgba(20, 21, 43, 0.12); } .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: var(--accent-gold); 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: var(--accent-gold); 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: var(--accent-gold); } .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: var(--accent-gold); 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-navy); color: rgba(255, 255, 255, 0.8); padding: 2.75rem 0 0; margin-top: 2rem; font-size: 0.9rem; } .site-footer a { color: var(--accent-gold); text-decoration: none; } .site-footer a:hover { color: #fff; } /* Gold column headings with a rule under them */ .ft-heading { color: var(--accent-gold); 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 var(--accent-gold); } .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: var(--accent-gold); 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: var(--accent-gold); 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: var(--accent-gold); 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: var(--accent-gold); 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: var(--accent-gold); font-size: 0.82rem; line-height: 1.6; } .ft-privacy a { text-decoration: underline; } /* Gold bottom bar: copyright left, legal links right */ .site-footer-bottom { background: var(--accent-gold); color: var(--brand-navy); 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: var(--brand-navy); 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); } .pdp-price-hai { font-size: 1.1rem; font-weight: 600; } /* ---------- 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); } /* ---------- DPE / GES energy label (arrow bands) ---------- */ .dpe { max-width: 340px; } .dpe-cap { font-size: 0.85rem; font-weight: 600; color: var(--ink-700); margin-bottom: 0.5rem; } .dpe-cap span { color: var(--ink-500); font-weight: 400; } .dpe-top, .dpe-bot { font-size: 0.66rem; line-height: 1.2; } .dpe-top { margin-bottom: 0.3rem; } .dpe-bot { margin-top: 0.3rem; } .dpe-good { color: #2e9c3f; font-weight: 600; } .dpe-bad { color: #d81f26; font-weight: 600; } .dpe-bars { display: flex; flex-direction: column; gap: 4px; } .dpe-bar { display: flex; align-items: center; } .dpe-bar-shape { position: relative; width: var(--w); min-width: 2.4rem; height: 20px; background: var(--c); /* Right-pointing arrow band, like the official French étiquette. */ clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); display: flex; align-items: center; padding-left: 0.5rem; color: #fff; font-weight: 700; font-size: 0.72rem; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); flex-shrink: 0; } .dpe-bar.is-active .dpe-bar-shape { height: 30px; box-shadow: inset 0 0 0 2px #111; z-index: 2; } .dpe-bar.is-active .dpe-bar-letter { font-size: 1.05rem; } /* Value sits OUTSIDE the clipped arrow so it isn't clipped away. */ .dpe-bar-val { position: relative; display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; color: var(--ink-900); font-weight: 800; font-size: 0.95rem; text-shadow: none; padding-left: 1.2rem; } .dpe-bar-val::before { content: "—"; position: absolute; left: 0.2rem; top: 50%; transform: translateY(-50%); color: var(--ink-300); } .dpe-bar-val small { font-weight: 500; font-size: 0.62rem; color: var(--ink-500); } .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: var(--accent-gold); 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(--brand-navy); 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: var(--accent-gold); 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: var(--accent-gold, #e0b155); 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); } }