@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); } /* 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; } /* 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 ---------- */ .collection-banner, .collection-band { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); } .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); } .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; } .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; } /* 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; } /* ---------- 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: 2; } .rp-heart svg { width: 22px; height: 22px; } /* Marketing-tag diagonal corner ribbon (Exclusive / New / Price-change …), navy band with gold serif text. */ .rp-ribbon { position: absolute; top: 40px; right: -40px; 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; padding: 0.3rem 3.2rem; 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; } .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; }