/* ==========================================================================
ZedHome — Component Library
========================================================================== */
/* ---------------------------------------------------------------------- */
/* Buttons */
/* One height (--control-h), one radius, one weight. Variants only change */
/* colour. --btn-fg feeds both the label and the loading spinner. */
/* primary the single main action on a surface (orange) */
/* dark strong secondary action (Call, Log in) */
/* outline tertiary / neutral */
/* danger destructive */
/* ghost text-only action */
/* -light outline on dark/photo surfaces */
/* sm / lg / block / icon size + layout modifiers */
/* ---------------------------------------------------------------------- */
.btn {
--btn-fg: var(--color-ink);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
position: relative;
min-height: var(--control-h);
padding: 0 var(--space-6);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-base);
line-height: 1.2;
color: var(--btn-fg);
border: 1.5px solid transparent;
white-space: nowrap;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }
.btn--primary {
--btn-fg: var(--color-on-brand);
background: var(--color-brand);
box-shadow: 0 1px 2px rgba(30, 27, 26, 0.14);
}
.btn--primary:hover { background: var(--color-brand-hover); box-shadow: 0 4px 12px rgba(217, 109, 15, 0.28); }
.btn--dark {
--btn-fg: #fff;
background: var(--color-ink);
}
.btn--dark:hover { background: var(--color-ink-soft); }
.btn--outline {
background: transparent;
border-color: var(--color-border-strong);
}
.btn--outline:hover { border-color: var(--color-ink); background: var(--color-surface); }
.btn--outline-light {
--btn-fg: #fff;
background: transparent;
border-color: rgba(255,255,255,0.5);
}
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.12); }
.btn--danger {
--btn-fg: #fff;
background: var(--color-danger);
}
.btn--danger:hover { background: #A5301F; }
.btn--ghost {
--btn-fg: var(--color-brand-dark);
background: transparent;
padding-inline: var(--space-1);
}
.btn--ghost:hover { --btn-fg: var(--color-ink); }
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--fs-md); }
.btn--lg { min-height: 54px; padding: 0 var(--space-8); font-size: var(--fs-body); }
.btn--block { width: 100%; }
.btn--icon { width: var(--control-h); padding: 0; border-radius: var(--radius-pill); }
.btn--icon.btn--sm { width: var(--control-h-sm); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; pointer-events: none; }
/* Loading: label hides, spinner takes its place; width never changes so the
layout doesn't jump. Set by js/components.js on POST form submit and
cleared on pageshow (bfcache back/forward). */
.btn.is-loading { color: transparent; pointer-events: none; cursor: progress; }
.btn.is-loading svg { opacity: 0; }
.btn.is-loading::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 18px; height: 18px;
margin: -9px 0 0 -9px;
border-radius: 50%;
border: 2px solid var(--btn-fg);
border-right-color: transparent;
animation: zh-spin 0.7s linear infinite;
}
@keyframes zh-spin { to { transform: rotate(360deg); } }
/* ---------------------------------------------------------------------- */
/* Notch badge — the signature verification device */
/* ---------------------------------------------------------------------- */
.notch-tag {
clip-path: polygon(9px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 9px);
}
.badge-verified {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--color-verified);
color: #fff;
font-size: var(--fs-2xs);
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 6px 11px 6px 8px;
line-height: 1;
}
.badge-verified svg { width: 12px; height: 12px; stroke-width: 3; }
.badge-verified--outline {
background: var(--color-verified-light);
color: var(--color-verified);
}
.status-tag {
display: inline-flex;
align-items: center;
padding: 7px 13px;
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
background: var(--color-ink);
color: #fff;
}
.status-tag--sale { background: var(--color-brand); color: var(--color-on-brand); }
.status-tag--rent { background: var(--color-rent); }
.status-tag--land { background: var(--color-ink); }
/* Generic status pill (application/job status on public pages) -- same
palette as the dashboard's .status-pill but without its --dash-font
dependency, since public pages never load pages/dashboard.css. */
.status-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
}
.status-pill--pending { background: rgba(217, 119, 6, 0.1); color: #B45309; }
.status-pill--accepted, .status-pill--confirmed, .status-pill--published, .status-pill--approved { background: rgba(25, 122, 66, 0.1); color: var(--color-verified); }
.status-pill--rejected, .status-pill--declined { background: rgba(192, 57, 43, 0.1); color: var(--color-danger); }
/* ---------------------------------------------------------------------- */
/* Top contact bar */
/* ---------------------------------------------------------------------- */
/* Orange brand bar with white text and icons. */
.topbar {
background: var(--color-brand);
color: #fff;
--color-focus: #fff;
}
.topbar .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
min-height: 38px;
font-size: var(--fs-xs);
font-weight: 600;
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: var(--space-6); }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; transition: color var(--dur-fast); }
a.topbar__item:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__item svg { width: 14px; height: 14px; color: currentColor; }
.topbar__socials { display: flex; align-items: center; gap: var(--space-1); }
.topbar__socials a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); color: #fff; transition: background var(--dur-fast); }
.topbar__socials a svg { width: 16px; height: 16px; }
.topbar__socials a:hover { background: rgba(255, 255, 255, 0.2); }
@media (max-width: 860px) {
.topbar__item--hide-sm { display: none; }
}
/* Phones: phone number left, social icons right, all on one line (email and
address are already hidden below 860px). */
@media (max-width: 640px) {
.topbar .container { gap: var(--space-2); }
.topbar__left { gap: var(--space-3); min-width: 0; }
.topbar__right { flex-shrink: 0; }
}
@media (max-width: 380px) {
.topbar__socials { gap: 0; }
.topbar__socials a { width: 30px; height: 30px; }
}
/* ---------------------------------------------------------------------- */
/* Navbar */
/* ---------------------------------------------------------------------- */
.navbar {
background: var(--color-surface);
position: sticky;
top: 0;
z-index: var(--z-nav);
border-bottom: 1px solid var(--color-border);
transition: box-shadow var(--dur-base) var(--ease-standard);
}
.navbar.is-scrolled { box-shadow: var(--shadow-soft); }
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
min-height: 80px;
}
/* The logo file carries generous transparent padding, so it needs 72px to read
at the same visual size as the previous 79px header mark. */
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { height: 72px; width: auto; }
.brand__logo--light { display: none; }
.nav-menu {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
justify-content: center;
}
.nav-menu > li { position: relative; }
.nav-link {
display: flex;
align-items: center;
gap: 5px;
min-height: 44px;
padding: 0 var(--space-4);
border-radius: var(--radius-sm);
font-weight: 600;
font-size: var(--fs-base);
color: var(--color-ink);
white-space: nowrap;
transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { background: var(--color-brand-50); color: var(--color-brand-dark); }
.nav-link svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-standard); }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-link.is-active { color: var(--color-brand-dark); position: relative; }
.nav-link.is-active::after {
content: "";
position: absolute;
left: var(--space-4); right: var(--space-4); bottom: 4px;
height: 2px;
border-radius: 2px;
background: var(--color-brand);
}
.nav-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 240px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lift);
padding: var(--space-2);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}
.nav-item.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.9rem;
color: var(--color-ink);
}
.nav-dropdown a:hover { background: var(--color-brand-50); color: var(--color-brand-dark); }
.nav-dropdown a svg { width: 18px; height: 18px; color: var(--color-brand); flex-shrink: 0; }
.nav-dropdown small { display: block; color: var(--color-text-soft); font-weight: 500; font-size: var(--fs-xs); }
/* Right-hand dropdowns (Get Started, account) anchor to their trigger edge so
they never run past the viewport. */
.nav-actions .nav-dropdown { left: auto; right: 0; min-width: 272px; }
/* ---- Mega menu (Properties: Buy/Rent/Land/Commercial + Popular Locations) ---- */
/* Same .nav-dropdown open/close mechanics (nav.js is unaware of the extra
column — it only toggles .nav-item.is-open) — just wider, with a second
column instead of one flat link list. */
.nav-dropdown--mega { min-width: 480px; display: flex; gap: 4px; }
.nav-dropdown__col { flex: 1; min-width: 0; }
.nav-dropdown__col + .nav-dropdown__col { border-left: 1px solid var(--color-border); padding-left: 10px; margin-left: 6px; }
.nav-dropdown__col-label { display: block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-soft); padding: 6px 12px 8px; }
.nav-dropdown__location {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: var(--radius-sm);
font-weight: 600; font-size: 0.875rem; color: var(--color-ink);
}
.nav-dropdown__location:hover { background: var(--color-brand-50); color: var(--color-brand-dark); }
.nav-dropdown__location svg { width: 15px; height: 15px; color: var(--color-brand); flex-shrink: 0; }
.nav-dropdown__location small { color: var(--color-text-soft); font-weight: 500; }
@media (max-width: 1280px) {
.nav-dropdown--mega { min-width: 400px; }
}
/* ---- Account menu (public header) — one compact entry point instead of */
/* several inline links, mirroring the dashboard's own account dropdown. */
.nav-account { position: relative; }
.nav-account__trigger {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
padding: 0;
border-radius: var(--radius-pill);
transition: background var(--dur-fast) var(--ease-standard);
}
.nav-account__trigger:hover, .nav-account__trigger[aria-expanded="true"] { background: var(--color-brand-50); }
.nav-account__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-border); }
.nav-account .nav-dropdown { left: auto; right: 0; min-width: 220px; }
.nav-account__id { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--color-border); }
.nav-account__avatar--lg { width: 38px; height: 38px; }
.nav-account__id-name { display: block; font-weight: 700; font-size: 0.875rem; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-account__id-text small { display: block; color: var(--color-text-soft); font-size: 0.75rem; margin-top: 1px; }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.nav-menu--inline { flex: 0; }
.nav-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: var(--radius-pill);
color: var(--color-ink);
transition: background var(--dur-fast) var(--ease-standard);
}
.nav-icon-btn:hover { background: var(--color-brand-50); }
.nav-icon-btn svg { width: 20px; height: 20px; }
/* Guest entry: Log in (text) + Get Started (the one primary action). */
.nav-auth { display: flex; align-items: center; }
.nav-auth a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-3); font-weight: 700; font-size: var(--fs-md); color: var(--color-ink); border-radius: var(--radius-sm); }
.nav-auth a svg { width: 15px; height: 15px; }
.nav-auth a:hover { background: var(--color-brand-50); color: var(--color-brand-dark); }
.nav-cta { gap: 6px; }
.nav-cta svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-standard); }
.nav-cta[aria-expanded="true"] svg { transform: rotate(180deg); }
.hamburger {
display: none;
width: 44px; height: 44px;
border-radius: var(--radius-pill);
align-items: center;
justify-content: center;
}
.hamburger svg { width: 22px; height: 22px; }
@media (max-width: 1180px) {
.nav-menu { display: none; }
.nav-cta-group { display: none; }
}
@media (max-width: 1180px) {
.hamburger { display: inline-flex; }
}
@media (max-width: 480px) {
.nav-auth { display: none; }
}
/* ---- Mobile drawer ---- */
.nav-drawer-overlay {
position: fixed; inset: 0;
background: rgba(30,27,26,0.5);
z-index: var(--z-drawer);
opacity: 0; visibility: hidden;
transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}
.nav-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.nav-drawer {
position: fixed;
top: 0; right: 0;
height: 100%;
width: min(360px, 88vw);
background: var(--color-surface);
z-index: calc(var(--z-drawer) + 1);
transform: translateX(100%);
/* visibility keeps the closed drawer out of the tab order and the a11y tree */
visibility: hidden;
transition: transform var(--dur-slow) var(--ease-standard), visibility 0s linear var(--dur-slow);
display: flex;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
}
.nav-drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.nav-drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--color-border);
}
.nav-drawer__close { width: 44px; height: 44px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; }
.nav-drawer__close svg { width: 20px; height: 20px; }
.nav-drawer__logo { height: 56px; width: auto; }
.nav-drawer__body { padding: 12px 12px 24px; flex: 1; }
.nav-drawer__link {
display: flex; align-items: center; justify-content: space-between;
width: 100%;
min-height: 52px;
padding: 12px;
text-align: left;
font-weight: 700;
font-size: var(--fs-lead);
color: var(--color-ink);
border-bottom: 1px solid var(--color-border);
}
.nav-drawer__link.is-active { color: var(--color-brand-dark); }
.nav-drawer__link svg { width: 18px; height: 18px; color: var(--color-text-soft); transition: transform var(--dur-fast) var(--ease-standard); }
.nav-drawer__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drawer__submenu { padding: 0 0 8px 14px; display: none; }
.nav-drawer__submenu.is-open { display: block; }
.nav-drawer__submenu a {
display: flex; align-items: center; min-height: 44px; padding: 0 10px; font-weight: 600; font-size: var(--fs-base); color: var(--color-text);
}
.nav-drawer__foot { padding: 16px 20px 28px; border-top: 1px solid var(--color-border); display: grid; gap: 10px; }
/* "More ways to join" — one filled primary CTA stays prominent in the
drawer footer; the other four guest entry points sit behind this low-
weight disclosure instead of five equally-loud stacked buttons. */
.nav-drawer__more {
display: flex; align-items: center; justify-content: center; gap: 6px;
min-height: 44px; padding: 0 10px; font-weight: 700; font-size: var(--fs-md); color: var(--color-text-soft);
}
.nav-drawer__more svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-standard); }
.nav-drawer__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drawer__submenu--foot { padding: 0; text-align: center; }
.nav-drawer__submenu--foot a { justify-content: center; font-weight: 600; font-size: var(--fs-md); color: var(--color-text); }
.nav-drawer__auth { display: flex; gap: 10px; margin-bottom: 4px; }
.nav-drawer__auth a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; padding: 12px; border-radius: var(--radius-sm); font-weight: 700; border: 1.5px solid var(--color-border-strong); }
.nav-drawer__auth a svg { width: 16px; height: 16px; }
body.drawer-open { overflow: hidden; }
/* ---------------------------------------------------------------------- */
/* Search overlay (navbar quick search) */
/* ---------------------------------------------------------------------- */
.search-overlay {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
display: flex;
justify-content: center;
padding: 84px 20px 40px;
overflow-y: auto;
}
.search-overlay[hidden] { display: none; }
.search-overlay__backdrop {
position: fixed;
inset: 0;
background: rgba(20,17,16,0.55);
backdrop-filter: blur(3px);
animation: searchFade var(--dur-base) var(--ease-standard);
}
.search-overlay__panel {
position: relative;
width: 100%;
max-width: 640px;
height: fit-content;
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lift);
overflow: hidden;
animation: searchPop var(--dur-base) var(--ease-standard);
}
@keyframes searchFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes searchPop { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.search-overlay__bar {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
border-bottom: 1px solid var(--color-border);
}
.search-overlay__bar > svg { width: 20px; height: 20px; color: var(--color-text-soft); flex-shrink: 0; }
.search-overlay__bar input[type="text"] {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-ink);
font-family: var(--font-body);
}
.search-overlay__bar input::placeholder { color: var(--color-text-soft); font-weight: 500; }
.search-overlay__clear, .search-overlay__close {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: var(--radius-pill);
color: var(--color-text-soft);
flex-shrink: 0;
transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.search-overlay__clear:hover, .search-overlay__close:hover { background: var(--color-brand-50); color: var(--color-brand-dark); }
.search-overlay__clear svg, .search-overlay__close svg { width: 16px; height: 16px; }
.search-overlay__toggle {
display: flex;
gap: 6px;
padding: 12px 20px 0;
}
.search-overlay__toggle button {
display: flex; align-items: center; gap: 6px;
padding: 7px 14px;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 0.8125rem;
color: var(--color-text-soft);
background: var(--color-paper);
border: 1px solid var(--color-border);
transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.search-overlay__toggle button svg { width: 14px; height: 14px; }
.search-overlay__toggle button.is-active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.search-overlay__body {
padding: 8px 12px 12px;
max-height: min(58vh, 520px);
overflow-y: auto;
}
.search-overlay__label {
padding: 12px 10px 6px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-soft);
}
.search-overlay__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 10px 10px; }
.search-overlay__chips button {
padding: 8px 14px;
border-radius: var(--radius-pill);
border: 1px solid var(--color-border);
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.search-overlay__chips button:hover { border-color: var(--color-brand); color: var(--color-brand-dark); background: var(--color-brand-50); }
.search-overlay__loading {
display: flex; align-items: center; gap: 10px;
padding: 40px 10px;
justify-content: center;
color: var(--color-text-soft);
font-weight: 600;
font-size: 0.9rem;
}
.search-overlay__loading[hidden] { display: none; }
.search-overlay__spinner {
width: 16px; height: 16px;
border: 2px solid var(--color-border-strong);
border-top-color: var(--color-brand);
border-radius: 50%;
animation: searchSpin 0.7s linear infinite;
}
@keyframes searchSpin { to { transform: rotate(360deg); } }
.search-overlay__group-label {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 10px 6px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-soft);
}
.search-overlay__item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 9px 10px;
border-radius: var(--radius-sm);
text-align: left;
}
.search-overlay__item:hover, .search-overlay__item.is-active { background: var(--color-brand-50); }
.search-overlay__item-media {
width: 44px; height: 44px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-paper);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--color-text-soft);
}
.search-overlay__item-media img { width: 100%; height: 100%; object-fit: cover; }
.search-overlay__item-media svg { width: 18px; height: 18px; }
.search-overlay__item.is-pro .search-overlay__item-media { border-radius: var(--radius-pill); }
.search-overlay__item-body { flex: 1; min-width: 0; }
.search-overlay__item-title {
display: flex; align-items: center; gap: 6px;
font-weight: 700; font-size: 0.9rem; color: var(--color-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-overlay__item-title svg { width: 13px; height: 13px; color: var(--color-verified); flex-shrink: 0; }
.search-overlay__item-meta { font-size: 0.8rem; color: var(--color-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-overlay__item-value { display: flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 700; color: var(--color-brand-dark); flex-shrink: 0; white-space: nowrap; }
.search-overlay__item-value svg { width: 12px; height: 12px; color: var(--color-brand); }
.search-overlay__empty { text-align: center; padding: 44px 20px; color: var(--color-text-soft); }
.search-overlay__empty-icon {
width: 52px; height: 52px; margin: 0 auto 14px;
border-radius: 50%;
background: var(--color-brand-50);
color: var(--color-brand-dark);
display: flex; align-items: center; justify-content: center;
}
.search-overlay__empty-icon svg { width: 22px; height: 22px; }
.search-overlay__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 20px;
border-top: 1px solid var(--color-border);
background: var(--color-paper);
}
.search-overlay__hints { display: flex; gap: 14px; }
.search-overlay__hints span { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--color-text-soft); font-weight: 600; }
.search-overlay__hints kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 4px;
border-radius: 4px;
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
font-size: 0.6875rem;
font-family: var(--font-body);
color: var(--color-text-soft);
}
.search-overlay__viewall {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 700; font-size: 0.8125rem;
color: var(--color-brand-dark);
flex-shrink: 0;
}
.search-overlay__viewall svg { width: 14px; height: 14px; }
.search-overlay__viewall:hover { text-decoration: underline; }
body.search-open { overflow: hidden; }
@media (max-width: 640px) {
.search-overlay { padding: 0; }
.search-overlay__panel { max-width: none; height: 100%; border-radius: 0; display: flex; flex-direction: column; }
.search-overlay__body { flex: 1; max-height: none; }
.search-overlay__hints { display: none; }
.search-overlay__footer { justify-content: flex-end; }
}
/* ---------------------------------------------------------------------- */
/* Hero — see frontend/css/pages/home.css for the homepage hero carousel */
/* ---------------------------------------------------------------------- */
.hero{
height: 80svh;
}
@media (max-width: 640px) {
.hero{
height: 60svh;
}
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.field {
position: relative;
display: flex;
align-items: center;
min-height: var(--control-h);
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.field:hover { border-color: var(--color-text-soft); }
.field:focus-within { border-color: var(--color-brand-dark); box-shadow: 0 0 0 3px rgba(233, 122, 26, 0.22); }
/* Validation states: set aria-invalid="true" on the input (or .has-error on the
wrapper) and the field, its message and its icon follow. */
.field:has(:is(input, select)[aria-invalid="true"]), .field.has-error { border-color: var(--color-danger); }
.field:has(:is(input, select)[aria-invalid="true"]):focus-within, .field.has-error:focus-within { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2); }
.field.is-valid { border-color: var(--color-verified); }
.form-hint { font-size: var(--fs-xs); color: var(--color-text-soft); }
.form-error { font-size: var(--fs-sm); font-weight: 600; color: var(--color-danger); }
.field:has(:disabled), .field.is-disabled { background: var(--color-paper); }
.field :disabled { cursor: not-allowed; color: var(--color-text-soft); }
.field svg {
width: 18px; height: 18px;
color: var(--color-text-soft);
margin-left: 14px;
flex-shrink: 0;
}
.field input, .field select {
width: 100%;
border: none;
background: transparent;
padding: 12px;
font-size: var(--fs-base);
font-family: var(--font-body);
color: var(--color-ink);
appearance: none;
}
.field input, .field select { align-self: stretch; }
.field input::placeholder { color: var(--color-text-soft); }
.field input:focus, .field select:focus { outline: none; }
.field--select::after {
content: "";
position: absolute; right: 14px; top: 50%;
width: 9px; height: 9px;
border-right: 2px solid var(--color-text-soft);
border-bottom: 2px solid var(--color-text-soft);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* ---------------------------------------------------------------------- */
/* Cards — shared base */
/* One quiet surface for every listing card (property, vehicle, */
/* professional, employer, job): a hairline border instead of a floating */
/* shadow, photos without stacked coloured badges, neutral grey icons, */
/* and one clear hierarchy — price or name first, then what it is, where */
/* it is, and the key facts. Hover only deepens the border and adds a */
/* soft shadow; nothing moves or zooms. The whole card is the link (the */
/* title's stretched ::after). */
/* ---------------------------------------------------------------------- */
.card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.card:hover {
border-color: var(--color-border-strong);
box-shadow: 0 1px 2px rgba(30, 27, 26, 0.04), 0 8px 24px rgba(30, 27, 26, 0.08);
}
/* Cards sit in grid rows (align-items: stretch); the flex body plus
margin-top:auto on the trailing row keeps every footer on one baseline. */
.card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-paper); flex-shrink: 0; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* One small label on the photo (For sale / For rent / Used / New). */
.card__label {
position: absolute;
top: 12px; left: 12px;
z-index: 2;
display: inline-flex; align-items: center;
height: 24px;
padding: 0 8px;
border-radius: var(--radius-xs);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 1px 2px rgba(30, 27, 26, 0.16);
font-size: var(--fs-xs);
font-weight: 700;
color: var(--color-ink);
pointer-events: none;
}
.card__label--rent { color: var(--color-rent); }
.card__label--sale { color: var(--color-brand-dark); }
/* Legacy badge row (kept for any markup that still uses it). */
.card__tags {
position: absolute;
top: 12px; left: 12px; right: 56px;
display: flex; flex-wrap: wrap; gap: 6px;
z-index: 2;
}
.fav-btn {
position: absolute;
top: 10px; right: 10px;
z-index: 3;
width: 36px; height: 36px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 1px 2px rgba(30, 27, 26, 0.16);
display: flex; align-items: center; justify-content: center;
color: var(--color-ink);
transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.fav-btn svg { width: 17px; height: 17px; stroke-width: 2; }
.fav-btn:hover { background: #fff; color: #C62F2F; }
.fav-btn.is-active { color: #C62F2F; }
.fav-btn.is-active svg { fill: #C62F2F; }
.fav-btn:disabled { opacity: 0.55; cursor: wait; }
.card__body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 16px 18px 18px; }
/* ---- Media placeholder (no real photo yet — never fakes a photo) ---- */
.media-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--color-paper);
color: var(--color-text-soft);
}
.media-placeholder svg { width: 30px; height: 30px; color: var(--color-border-strong); stroke-width: 1.4; }
.media-placeholder span { font-size: var(--fs-xs); font-weight: 600; }
.media-placeholder--lg svg { width: 44px; height: 44px; }
.media-placeholder--lg span { font-size: var(--fs-sm); }
.avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-brand-50);
color: var(--color-brand-dark);
flex-shrink: 0;
}
.avatar-placeholder svg { width: 46%; height: 46%; stroke-width: 1.75; }
/* ---- Shared text rows ---- */
.card-property__price, .card__price {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1875rem;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-ink);
margin-bottom: 4px;
font-variant-numeric: tabular-nums;
}
.card-property__price span, .card__price span { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; color: var(--color-text-soft); font-variant-numeric: normal; }
.card-property__title, .card__title {
margin: 0 0 4px;
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0;
color: var(--color-ink);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.card-property__title a, .card__title a { color: inherit; }
.card:hover .card-property__title a, .card:hover .card__title a { text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.card-property__title a::after, .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-property__title a:focus-visible, .card__title a:focus-visible { outline: none; }
.card-property__title a:focus-visible::after, .card__title a:focus-visible::after { outline: 2.5px solid var(--color-focus); outline-offset: -2px; border-radius: var(--radius-md); }
.card-property, .card-vehicle { width: 100%; max-width: 380px; margin-inline: auto; }
.card-property__loc, .card__loc {
display: flex; align-items: center; gap: 5px;
min-width: 0;
font-size: var(--fs-sm); color: var(--color-text-soft);
margin-bottom: var(--space-4);
}
.card-property__loc span, .card__loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-property__loc svg, .card__loc svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-text-soft); }
.card-property__meta, .card__meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--color-border);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--color-ink-soft);
}
.card-property__meta span, .card__meta span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.card-property__meta svg, .card__meta svg { width: 15px; height: 15px; color: var(--color-text-soft); stroke-width: 1.8; }
/* Footer line: who / status on the left, action or figure on the right. */
.card__foot {
display: flex; align-items: center; justify-content: space-between; gap: 8px 12px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--color-border);
font-size: var(--fs-sm);
color: var(--color-text-soft);
min-width: 0;
}
.card__meta + .card__foot { margin-top: 12px; }
.card__foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__go { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-weight: 700; color: var(--color-brand-dark); }
.card__go svg { width: 15px; height: 15px; }
.card__strong { font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.card__verified { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--color-verified); }
.card__verified svg { width: 13px; height: 13px; stroke-width: 2.8; }
.card__dealer { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.card__dealer svg { width: 14px; height: 14px; flex-shrink: 0; }
.card__dealer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- Person / company card (professional, employer): no photo slab ---- */
.card-professional, .card-employer { padding: 18px; }
.card-person__head { display: flex; align-items: center; gap: 14px; min-width: 0; margin-bottom: 14px; }
.card-person__avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--color-paper); border: 1px solid var(--color-border); }
.card-person__avatar.avatar-placeholder { background: var(--color-paper); color: var(--color-text-soft); }
.card-person__avatar--tile { border-radius: var(--radius-sm); }
.card-person__logo { object-fit: cover; background: var(--color-surface); }
.card-person__initials { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--color-ink-soft); }
.card-person__id { min-width: 0; }
.card-person__id .card__title { margin: 0; -webkit-line-clamp: 1; line-clamp: 1; }
.card-person__role { display: block; margin-top: 1px; font-size: var(--fs-sm); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-person__rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: var(--fs-sm); color: var(--color-text-soft); }
.card-person__rating strong { color: var(--color-ink); }
.card-person__rating svg { width: 14px; height: 14px; fill: var(--color-brand); stroke: none; }
.card-person__facts { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--color-text); }
.card-person__facts li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.card-person__facts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-person__facts svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-text-soft); }
/* Old professional-card class names kept for any remaining markup. */
.card-professional__body { display: flex; flex-direction: column; flex: 1; padding: 20px; text-align: left; }
.card-professional__body > .btn { margin-top: auto; }
.card-professional__name { font-size: var(--fs-lead); }
.card-professional__trade { color: var(--color-text); font-weight: 600; font-size: var(--fs-md); margin-bottom: 10px; }
.card-professional__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.8125rem; color: var(--color-text-soft); margin-bottom: 16px; }
.card-professional__meta span { display: flex; align-items: center; gap: 5px; }
.card-professional__meta svg { width: 14px; height: 14px; }
.rating { display: flex; align-items: center; gap: 4px; color: var(--color-ink); font-weight: 800; font-size: var(--fs-sm); }
.rating svg { width: 14px; height: 14px; fill: var(--color-brand); stroke: none; }
/* ---- Job card: text only (jobs have no photos) ---- */
.card-job { padding: 18px; }
.card-job__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 12px; }
.card-job__type { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: var(--color-paper); font-size: var(--fs-xs); font-weight: 700; color: var(--color-ink-soft); }
.card-job__deadline { font-size: var(--fs-xs); color: var(--color-text-soft); }
.card-job .card__title { font-family: var(--font-display); font-size: 1.0625rem; }
.card-job__company { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.card-job__logo { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-xs); border: 1px solid var(--color-border); object-fit: cover; background: var(--color-surface); }
.card-job__logo--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--color-paper); font-size: 0.625rem; font-weight: 700; color: var(--color-ink-soft); }
.card-job__company { gap: 8px; }
.card-job__company a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.card-job__company a:hover { color: var(--color-brand-dark); text-decoration: underline; }
.card-job .card__loc { margin-bottom: 16px; }
.card-job__salary { font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.card-job__salary.is-none { font-weight: 500; color: var(--color-text-soft); }
/* Old job-card class names kept for any remaining markup. */
.card-job__body { display: flex; flex-direction: column; flex: 1; padding: 20px; text-align: left; }
.card-job__title { display: block; font-size: 1.0625rem; margin-bottom: 4px; }
.card-job__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 0.8125rem; color: var(--color-text-soft); margin-bottom: 10px; }
.card-job__meta span { display: flex; align-items: center; gap: 5px; }
.card-job__meta svg { width: 14px; height: 14px; }
.card-job__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border); }
.card-job__foot small { color: var(--color-text-soft); font-size: 0.75rem; }
/* ---- Property card body: price (+ verified) / facts / title / address / type + age ---- */
.card-property__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.card-property__top .card-property__price { margin: 0; min-width: 0; }
.card-property__top .card__verified { margin: 0; }
.card-property__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 10px; font-size: var(--fs-md); color: var(--color-text); }
.card-property__facts strong { font-weight: 700; color: var(--color-ink); }
.card-property__facts > .card-property__sep { color: var(--color-border-strong); }
.card-property .card-property__title { margin: 0 0 2px; -webkit-line-clamp: 1; line-clamp: 1; }
.card-property__addr { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--color-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-property__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: var(--fs-sm); color: var(--color-text-soft); }
.card-property__foot > span:first-child { font-weight: 600; color: var(--color-ink-soft); }
/* Verified mark sits at the end of the location line. */
.card-property__meta .card__verified, .card__loc .card__verified { margin-left: auto; }
.card-person__facts .card__verified { font-size: var(--fs-sm); }
/* ---------------------------------------------------------------------- */
/* Grids / rails */
/* ---------------------------------------------------------------------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.grid-4, .grid-3, .grid-2, .grid-6 { grid-template-columns: 1fr; }
.grid-6 { grid-template-columns: repeat(2, 1fr); }
}
/* ---------------------------------------------------------------------- */
/* Category chips */
/* ---------------------------------------------------------------------- */
.chip {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 30px 18px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.chip:hover { border-color: var(--color-brand); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.chip__icon {
width: 58px; height: 58px;
border-radius: var(--radius-md);
background: var(--color-brand-50);
color: var(--color-brand-dark);
display: flex; align-items: center; justify-content: center;
transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.chip:hover .chip__icon { background: var(--color-brand); color: var(--color-on-brand); transform: scale(1.06); }
.chip__icon svg { width: 26px; height: 26px; }
.chip strong { font-size: 0.9375rem; font-weight: 700; color: var(--color-ink); }
.chip span { font-size: 0.75rem; color: var(--color-text-soft); font-weight: 600; }
/* ---------------------------------------------------------------------- */
/* Service card */
/* ---------------------------------------------------------------------- */
.service-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 26px 22px;
transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.service-card__icon {
width: 48px; height: 48px;
border-radius: var(--radius-sm);
background: var(--color-ink);
color: var(--color-brand);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.service-card__icon svg { width: 23px; height: 23px; }
.service-card h3 { margin-bottom: 8px; font-size: var(--fs-lead); }
.service-card p { font-size: var(--fs-md); margin-bottom: 14px; }
/* ---- Services section — full-bleed photo background ---- */
.services-band { position: relative; overflow: hidden; }
/* The photo lives as a real CSS background (not an ![]()
) because
background-attachment: fixed only has an effect on background-image —
it does nothing on an ![]()
element. */
.services-band__media {
position: absolute; inset: 0; z-index: 0;
background-image:
linear-gradient(180deg, rgba(20,17,16,0.80) 0%, rgba(20,17,16,0.85) 100%),
url("../assets/images/img_6.jpg");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-attachment: scroll, scroll;
}
.services-band > .container { position: relative; z-index: 1; }
.services-band .eyebrow { color: #fff; opacity: 0.85; }
.services-band .eyebrow::before { background: #fff; }
.services-band .section-head__copy h2 { color: #fff; }
.services-band .section-head__copy p { color: rgba(255,255,255,0.78); }
.services-band .service-card {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.services-band .service-card:hover { background: rgba(255,255,255,0.12); }
.services-band .service-card__icon { background: var(--color-brand); color: #fff; }
.services-band .service-card h3 { color: #fff; }
.services-band .service-card p { color: rgba(255,255,255,0.75); }
.services-band .service-card .link-more { color: var(--color-brand); }
/* ---- Trade card (specialized professional services) ---- */
.trade-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.trade-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: transparent; }
.trade-card__icon {
width: 50px; height: 50px;
background: var(--color-brand);
color: var(--color-on-brand);
display: flex; align-items: center; justify-content: center;
}
.trade-card__icon svg { width: 24px; height: 24px; }
.trade-card h3 { font-size: 1rem; }
.trade-card p { font-size: 0.8125rem; }
/* .about-intro (about.php + index.php "Why Choose ZedHome") now lives in
css/pages/about.css. */
/* ---------------------------------------------------------------------- */
/* Locations */
/* ---------------------------------------------------------------------- */
.location-tile {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 3/3.6;
}
.location-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); }
.location-tile:hover img { transform: scale(1.08); }
.location-tile::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(30,27,26,0) 30%, rgba(30,27,26,0.82) 100%);
}
.location-tile__body {
position: absolute; left: 0; right: 0; bottom: 0;
z-index: 2;
padding: 18px;
color: #fff;
}
.location-tile__body strong { font-family: var(--font-display); font-size: 1.0625rem; display: block; }
.location-tile__body span { font-size: 0.8125rem; color: rgba(255,255,255,0.78); font-weight: 600; }
/* ---------------------------------------------------------------------- */
/* Testimonials */
/* ---------------------------------------------------------------------- */
.testimonial-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 28px 26px;
position: relative;
}
.testimonial-card__quote { color: var(--color-brand); opacity: 0.5; width: 34px; height: 34px; margin-bottom: 10px; }
.testimonial-card p.quote-text { font-size: 0.9375rem; color: var(--color-ink); margin-bottom: 20px; line-height: 1.7; }
.testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.testimonial-card__author img, .testimonial-card__author .avatar-placeholder { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial-card__author strong { display: block; font-size: 0.9375rem; }
.testimonial-card__author span { font-size: 0.8125rem; color: var(--color-text-soft); }
.testimonial-card .rating { margin-top: 8px; }
/* Auto-sliding testimonial carousel (frontend/js/testimonial-slider.js).
Cards ride a flex track inside a clipped viewport; JS translates the
track and builds the dots to match however many slides currently fit
per view (recomputed on resize, so this file only needs to size one
slide — the step-count math lives in JS). */
.testimonial-slider__viewport { overflow: hidden; }
.testimonial-slider__track {
display: flex;
gap: 22px;
will-change: transform;
transition: transform var(--dur-slow) var(--ease-standard);
}
.testimonial-slider__track.is-dragging { transition: none; }
.testimonial-slider__slide { flex: 0 0 380px; max-width: 380px; }
.testimonial-slider__slide .testimonial-card { height: 100%; display: flex; flex-direction: column; }
.testimonial-slider__slide .testimonial-card__author { margin-top: auto; }
.testimonial-slider__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; }
.testimonial-slider__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: 50%;
border: 1.5px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
flex-shrink: 0;
transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.testimonial-slider__arrow:hover { border-color: var(--color-brand); color: var(--color-brand-dark); }
.testimonial-slider__arrow:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.testimonial-slider__arrow svg { width: 18px; height: 18px; }
.testimonial-slider__arrow--prev svg { transform: scaleX(-1); }
.testimonial-slider__arrow:disabled { opacity: 0.35; pointer-events: none; }
.testimonial-slider__dots { display: flex; align-items: center; gap: 8px; }
.testimonial-slider__dots button {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--color-border-strong);
transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.testimonial-slider__dots button:hover { background: var(--color-brand-light); }
.testimonial-slider__dots button.is-active { background: var(--color-brand); transform: scale(1.2); }
.testimonial-slider__dots button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
@media (max-width: 640px) {
.testimonial-slider__slide { flex-basis: 86vw; max-width: 86vw; }
}
/* ---------------------------------------------------------------------- */
/* News — .recent-news/.news-* (index.php + news/index.php + news/detail.php)*/
/* now lives in css/pages/news.css. */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* Partners */
/* ---------------------------------------------------------------------- */
.partner-strip {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px 40px;
padding: 36px clamp(20px, 4vw, 48px);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.partner-mark {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
color: var(--color-text-soft);
opacity: 0.75;
transition: opacity var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.partner-mark:hover { opacity: 1; color: var(--color-ink); }
.partner-mark svg { width: 26px; height: 26px; color: var(--color-brand); }
/* ---------------------------------------------------------------------- */
/* CTA bands */
/* ---------------------------------------------------------------------- */
.sectionn {
background-image:
linear-gradient(
90deg,
rgba(233, 122, 26, 0.92) 0%,
rgba(199, 101, 15, 0.75) 28%,
rgba(30, 27, 26, 0.30) 55%,
rgba(30, 27, 26, 0.58) 75%,
rgba(30, 27, 26, 0.50) 100%
),
url("../assets/images/hero/pexels-artbovich-8134750.jpg");
background-position: center;
background-size: cover;
background-attachment: fixed,fixed;
}
.cta-band {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
color: #fff;
padding: clamp(40px, 6vw, 64px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
-webkit-border-radius: var(--radius-lg);
-moz-border-radius: var(--radius-lg);
-ms-border-radius: var(--radius-lg);
-o-border-radius: var(--radius-lg);
}
.cta-band__media { position: absolute; inset: 0; z-index: 0; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
/* Full-screen treatment: breaks out of the .container it's nested in to
run edge-to-edge and fills the viewport height, like a hero moment. */
/* Dark ink band with an orange edge: white text is 17:1, and the orange stays
an accent instead of a full-bleed fill that fails contrast. */
.cta-band--brand {
background: linear-gradient(120deg, #141110 0%, var(--color-ink) 60%, #3B2412 100%);
border-top: 3px solid var(--color-brand);
--color-focus: #fff;
}
.cta-band--dark .cta-band__media::after { content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(20,17,16,0.95) 0%, rgba(30,27,26,0.88) 55%, rgba(30,27,26,0.45) 100%);
}
.cta-band__content { position: relative; z-index: 1; max-width: 560px; }
.cta-band__content .eyebrow { color: var(--color-brand); }
.cta-band__content .eyebrow::before { background: var(--color-brand); }
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,0.86); font-size: var(--fs-lead); margin-bottom: 0; }
.cta-band__actions { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; }
/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */
.site-footer {
background: var(--color-ink);
color: rgba(255,255,255,0.72);
position: relative;
overflow: hidden;
--color-focus: #fff;
}
.site-footer__texture {
position: absolute; inset: 0;
opacity: 0.14;
mix-blend-mode: luminosity;
}
.site-footer__texture img { width: 100%; height: 100%; object-fit: cover; }
.site-footer__texture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-ink) 15%, rgba(30,27,26,0.2) 75%); }
.site-footer__top {
position: relative;
z-index: 1;
padding-block: clamp(56px, 7vw, 84px) 48px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
gap: var(--space-8);
}
/* .brand img is 56px site-wide; the footer mark is smaller and knocked out to white. */
.footer-brand .brand img { height: 64px; filter: brightness(0) invert(1); }
.footer-brand p { margin: var(--space-4) 0 var(--space-5); font-size: var(--fs-base); line-height: 1.7; max-width: 34ch; color: rgba(255,255,255,0.72); }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
width: 44px; height: 44px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255,255,255,0.18);
display: flex; align-items: center; justify-content: center;
transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.footer-socials a svg { width: 16px; height: 16px; }
.footer-socials a:hover { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
/* Column headings: small, uppercase, quiet. Links carry a 36px hit area (44px
on phones) without visually loosening the list. */
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); }
.footer-col ul { display: grid; gap: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-md); transition: color var(--dur-fast) var(--ease-standard); }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-col ul + ul { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.12); }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-md); }
.footer-contact li > span, .footer-contact li > a { min-height: 32px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.footer-contact svg { width: 16px; height: 16px; color: var(--color-brand); flex-shrink: 0; margin-top: 8px; }
.site-footer__bottom {
position: relative;
z-index: 1;
border-top: 1px solid rgba(255,255,255,0.12);
padding-block: 22px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: var(--fs-sm);
color: rgba(255,255,255,0.68);
}
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-footer__bottom nav a { display: inline-flex; align-items: center; min-height: 36px; }
.site-footer__bottom nav a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 1080px) {
.site-footer__top { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-4); }
.footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
.footer-col a { min-height: 44px; }
}
/* ---------------------------------------------------------------------- */
/* Footer newsletter (partials/footer.php, public/js/newsletter.js) */
/* ---------------------------------------------------------------------- */
.footer-news {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
align-items: center;
gap: var(--space-6) var(--space-10);
padding-block: clamp(40px, 5vw, 56px);
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-news__title { margin: 0; color: #fff; font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.footer-news__copy p { margin: var(--space-2) 0 0; max-width: 52ch; font-size: var(--fs-base); line-height: 1.6; color: rgba(255,255,255,0.72); }
.footer-news__form { position: relative; }
.footer-news__row { display: flex; gap: var(--space-2); }
.footer-news__input {
flex: 1; min-width: 0; height: 48px; padding: 0 14px;
border: 1px solid rgba(255,255,255,0.24); border-radius: var(--radius-sm);
background: rgba(255,255,255,0.06); color: #fff; font: inherit; font-size: var(--fs-body);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.footer-news__input::placeholder { color: rgba(255,255,255,0.5); }
.footer-news__input:hover { border-color: rgba(255,255,255,0.4); }
.footer-news__input:focus { outline: none; border-color: var(--color-brand); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(233,122,26,0.28); }
.footer-news__input[aria-invalid="true"] { border-color: #ff9b8a; }
.footer-news__btn {
flex-shrink: 0; height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius-sm);
background: var(--color-brand); color: var(--color-on-brand); font: inherit; font-size: var(--fs-base); font-weight: 700; cursor: pointer;
transition: background var(--dur-fast);
}
.footer-news__btn:hover { background: var(--color-brand-hover); }
.footer-news__btn:disabled { opacity: 0.75; cursor: progress; }
.footer-news__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.footer-news__msg { margin: 10px 0 0; font-size: var(--fs-sm); line-height: 1.5; }
.footer-news__msg:empty { display: none; }
.footer-news__msg.is-ok { color: #8fdcad; }
.footer-news__msg.is-error { color: #ffa898; }
.footer-news__note { margin: 8px 0 0; font-size: var(--fs-xs); color: rgba(255,255,255,0.55); }
.footer-news__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) {
.footer-news { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
.footer-news__row { flex-direction: column; }
.footer-news__btn { width: 100%; }
}
/* ---------------------------------------------------------------------- */
/* Website announcement overlay (partials/announcement.php) */
/* ---------------------------------------------------------------------- */
html.zh-ann-lock { overflow: hidden; }
.zh-ann { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 3vh 3vw; }
.zh-ann[hidden] { display: none; }
.zh-ann__backdrop { position: absolute; inset: 0; background: rgba(30,27,26,0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 220ms var(--ease-standard); }
/* Photo on top, words underneath. With an image the panel takes most of the screen. */
.zh-ann__panel {
position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: 94dvh; overflow: hidden;
background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(30,27,26,0.3);
opacity: 0; transform: translateY(14px) scale(0.985);
transition: opacity 240ms var(--ease-standard), transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.zh-ann__panel:focus { outline: none; }
/* With a photo the panel is sized by announcement.js to the photo's own shape (never cropped). */
.zh-ann__panel.has-image { width: min(1120px, 100%); }
.zh-ann.is-open .zh-ann__backdrop { opacity: 1; }
.zh-ann.is-open .zh-ann__panel { opacity: 1; transform: none; }
.zh-ann__media { position: relative; flex: 0 1 auto; min-height: 0; background: var(--color-paper); }
.zh-ann__media a { display: block; }
.zh-ann__media img { display: block; width: 100%; height: auto; max-height: var(--zh-ann-img-max, 70dvh); object-fit: contain; }
.zh-ann__body { flex: 0 0 auto; padding: 26px 32px 28px; overflow: auto; max-height: 46dvh; }
.zh-ann__panel:not(.has-image) .zh-ann__body { padding: 40px 36px 34px; max-height: none; }
.zh-ann__panel.has-image:not(.is-narrow) .zh-ann__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 32px; }
.zh-ann__panel.has-image .zh-ann__title, .zh-ann__panel.has-image .zh-ann__text { grid-column: 1; }
.zh-ann__panel.has-image .zh-ann__actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; flex-wrap: nowrap; }
/* Image only: the panel is the picture, shown whole (a designed flyer must not be cropped). */
.zh-ann__panel.has-image.is-image-only { width: auto; height: auto; max-width: 100%; background: transparent; box-shadow: 0 24px 64px rgba(0,0,0,0.4); }
.zh-ann__panel.is-image-only .zh-ann__media { flex: none; background: transparent; }
.zh-ann__panel.is-image-only .zh-ann__media img { width: auto; height: auto; max-width: 94vw; max-height: 94dvh; object-fit: contain; border-radius: var(--radius-lg); }
.zh-ann__preview-note { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.94); font-size: var(--fs-sm); font-weight: 600; color: var(--color-brand-dark); }
.zh-ann__title { margin: 0 0 8px; padding-right: 40px; font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.875rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-ink); }
.zh-ann__panel.has-image .zh-ann__title { padding-right: 0; }
.zh-ann__text { margin: 0 0 22px; font-size: var(--fs-body); line-height: 1.6; color: var(--color-text); }
.zh-ann__panel.has-image .zh-ann__text { margin: 0; }
.zh-ann__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.zh-ann__cta { display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: var(--radius-sm); background: var(--color-brand); color: var(--color-on-brand); font-size: var(--fs-base); font-weight: 700; white-space: nowrap; transition: background var(--dur-fast); }
.zh-ann__cta:hover { background: var(--color-brand-hover); }
.zh-ann__later { height: 46px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: var(--fs-md); font-weight: 600; color: var(--color-text); white-space: nowrap; cursor: pointer; }
.zh-ann__later:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.zh-ann__close { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: 50%; background: rgba(255,255,255,0.94); color: var(--color-ink); cursor: pointer; transition: border-color var(--dur-fast); }
.zh-ann__close svg { width: 16px; height: 16px; }
.zh-ann__close:hover { border-color: var(--color-ink); }
.zh-ann__cta:focus-visible, .zh-ann__later:focus-visible, .zh-ann__close:focus-visible, .zh-ann__media a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 760px) {
.zh-ann__panel.has-image .zh-ann__body { display: block; }
.zh-ann__panel.has-image .zh-ann__text { margin-bottom: 20px; }
}
@media (max-width: 640px) {
.zh-ann { place-items: end center; padding: 0; }
.zh-ann__panel, .zh-ann__panel.has-image { width: 100%; height: auto; max-height: 94dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(24px); }
.zh-ann__body, .zh-ann__panel:not(.has-image) .zh-ann__body { padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: none; }
.zh-ann__cta { flex: 1; justify-content: center; }
/* image only: centred picture rather than a sheet */
.zh-ann:has(.is-image-only) { place-items: center; padding: 12px; }
.zh-ann__panel.has-image.is-image-only { width: auto; border-radius: var(--radius-lg); }
.zh-ann__panel.is-image-only .zh-ann__media { height: auto; }
.zh-ann__panel.is-image-only .zh-ann__media img { max-width: calc(100vw - 24px); max-height: 88dvh; }
}
@media (prefers-reduced-motion: reduce) {
.zh-ann__panel, .zh-ann__backdrop { transition: none; transform: none; }
}
/* Email preferences page (public/newsletter/unsubscribe.php) */
.nl-page { display: flex; justify-content: center; padding: clamp(40px, 8vw, 96px) 16px; background: var(--color-paper); }
.nl-page__inner { width: 100%; max-width: 480px; }
.nl-page .login__submit { margin-top: 0; }
.nl-page__again { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--color-text); }
.nl-page__link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--color-brand-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* ---------------------------------------------------------------------- */
/* Responsive grid collapses (shared) */
/* ---------------------------------------------------------------------- */
@media (max-width: 980px) {
.feature-split { grid-template-columns: 1fr; }
.feature-split__visual { order: -1; }
.partner-strip { justify-content: space-around; }
}
@media (max-width: 480px) {
.feature-split__badge { padding: 10px 14px; gap: 8px; }
.feature-split__badge .num { font-size: 1.15rem; }
}
@media (max-width: 720px) {
.cta-band { padding: 32px 24px; }
.cta-band__content, .cta-band__actions { width: 100%; }
}
/* ---------------------------------------------------------------------- */
/* Page header (interior pages) */
/* ---------------------------------------------------------------------- */
.page-header {
position: relative;
color: #fff;
padding-block: var(--space-10) var(--space-12);
overflow: hidden;
--color-focus: #fff;
}
.page-header + .section, .page-header + .section--tight { padding-top: var(--space-10); }
/* Pages with no fitting photo (Cars) get a plain brand-ink header instead of a mismatched image. */
.page-header--plain { background: linear-gradient(100deg, #141110 0%, var(--color-ink) 58%, #3B2412 100%); }
.page-header__media { position: absolute; inset: 0; z-index: 0; }
.page-header__media img { width: 100%; height: 100%; object-fit: cover; }
.page-header__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(100deg, rgba(20,17,16,0.92) 0%, rgba(30,27,26,0.8) 55%, rgba(233,122,26,0.35) 100%);
}
.page-header__inner { position: relative; z-index: 1; }
.page-header h1 { color: #fff; margin-bottom: 6px; font-size: clamp(1.9rem, 1.6rem + 1.4vw, 2.75rem); letter-spacing: -0.02em; text-wrap: balance; }
.page-header p { color: rgba(255,255,255,0.88); max-width: 60ch; margin-top: 10px; text-wrap: pretty; }
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: var(--fs-sm);
font-weight: 700;
color: rgba(255,255,255,0.78);
margin-bottom: 16px;
--color-focus: #fff;
}
.breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; color: rgba(255,255,255,0.92); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb svg { width: 13px; height: 13px; opacity: 0.6; }
.breadcrumb--light { color: var(--color-text-soft); }
.breadcrumb--light a { color: var(--color-text); }
.breadcrumb--light a:hover { color: var(--color-brand-dark); text-decoration: underline; }
/* ---------------------------------------------------------------------- */
/* Listing layout: filter sidebar + toolbar + grid + pagination */
/* ---------------------------------------------------------------------- */
.listing-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: start;
}
/* ---------------------------------------------------------------------- */
/* Filter panel (every directory) */
/* Desktop: a sticky card whose body scrolls while "Show results" stays in */
/* view. Phones: a bottom sheet over a dimmed page (nav.js). Long option */
/* lists collapse and show what is selected; short ones are chips or a */
/* segmented control. */
/* ---------------------------------------------------------------------- */
.filter-panel {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 124px);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.filter-panel__head {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.filter-panel__head h2, .filter-panel__head h3 { margin: 0 auto 0 0; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; letter-spacing: 0; }
.filter-panel__reset { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-soft); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.filter-panel__reset:hover { color: var(--color-ink); }
.filter-panel__close { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px; border-radius: var(--radius-pill); color: var(--color-ink); }
.filter-panel__close:hover { background: var(--color-paper); }
.filter-panel__close svg { width: 20px; height: 20px; }
/* The form is the scroll region; the action bar sticks to its bottom edge. */
.filter-panel form {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 0 var(--space-5);
overflow-y: auto;
overscroll-behavior: contain;
}
.filter-panel__actions {
position: sticky;
bottom: 0;
z-index: 1;
margin: auto calc(var(--space-5) * -1) 0;
padding: var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.filter-group { padding-block: var(--space-4); }
.filter-group ~ .filter-group { border-top: 1px solid var(--color-border); }
fieldset.filter-group { margin: 0; min-width: 0; padding-inline: 0; border: 0; }
fieldset.filter-group::after { content: ""; display: table; clear: both; }
legend.filter-group__label { padding: 0; float: left; width: 100%; }
legend.filter-group__label + * { clear: both; }
.filter-group__label { display: block; margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); color: var(--color-ink); }
/* Collapsible groups (built by nav.js): title, what is selected, Clear, chevron.
The toggle button covers the whole row; Clear sits above it. */
.filter-group__head { position: relative; display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 32px; padding-right: 28px; }
.filter-group__title { flex-shrink: 0; font-weight: 700; color: var(--color-ink); }
.filter-group__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.filter-group:not(.is-collapsed) .filter-group__value { display: none; }
.filter-group__toggle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; width: 100%; border-radius: var(--radius-xs); cursor: pointer; }
.filter-group__toggle svg { width: 16px; height: 16px; color: var(--color-text-soft); transition: transform var(--dur-fast) var(--ease-standard); }
.filter-group.is-collapsed .filter-group__toggle svg { transform: rotate(-90deg); }
.filter-group__toggle:focus-visible { outline: 2.5px solid var(--color-focus); outline-offset: 2px; }
.filter-group__clear { position: relative; z-index: 1; flex-shrink: 0; min-height: 32px; padding: 0 var(--space-1); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-soft); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.filter-group__clear:hover { color: var(--color-ink); }
.filter-group__clear[hidden] { display: none; }
.filter-group:not(.is-collapsed) .filter-group__clear { margin-right: auto; }
fieldset.is-collapsed > :not(legend) { display: none; }
fieldset.is-collapsed > legend.filter-group__label { margin-bottom: 0; }
.check-row {
display: flex;
align-items: center;
gap: 11px;
min-height: 40px;
padding: 6px 0;
font-size: var(--fs-md);
font-weight: 600;
color: var(--color-text);
cursor: pointer;
}
.check-row input[type="radio"], .check-row input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
width: 18px; height: 18px;
border: 1.5px solid var(--color-border-strong);
background: var(--color-surface);
flex-shrink: 0;
position: relative;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.check-row input[type="radio"] { border-radius: 50%; }
.check-row input[type="checkbox"] { border-radius: 5px; }
.check-row input[type="radio"]::after {
content: ""; position: absolute; inset: 4px; border-radius: 50%;
background: var(--color-brand); transform: scale(0);
transition: transform var(--dur-fast) var(--ease-standard);
}
.check-row input[type="radio"]:checked::after { transform: scale(1); }
.check-row input[type="radio"]:checked, .check-row input[type="checkbox"]:checked { border-color: var(--color-brand); }
.check-row input[type="checkbox"]:checked { background: var(--color-brand); }
.check-row input[type="checkbox"]::after {
content: ""; position: absolute; left: 5px; top: 1px;
width: 5px; height: 9px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform var(--dur-fast) var(--ease-standard);
}
.check-row input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.check-row input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.check-row span.count { margin-left: auto; color: var(--color-text-soft); font-weight: 600; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.price-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field--prefix::before { content: attr(data-prefix); padding-left: 12px; font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-soft); }
.field--prefix input { padding-left: 6px; }
/* Short option lists: chips (many) or a segmented control (exactly three).
The radio stays in the DOM (visually hidden) so it posts and is keyboardable. */
.filter-group--chips .check-row,
.filter-group--segmented .check-row {
position: relative;
float: left;
min-height: 34px;
margin: 0 6px 6px 0;
padding: 0 12px;
gap: 6px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-xs);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--color-text);
transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.filter-group--chips .check-row:hover,
.filter-group--segmented .check-row:hover { border-color: var(--color-text-soft); color: var(--color-ink); }
.filter-group--chips .check-row input,
.filter-group--segmented .check-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; opacity: 0; cursor: pointer; }
.filter-group--chips .check-row input::after,
.filter-group--segmented .check-row input::after { display: none; }
.filter-group--chips .check-row:has(input:checked) { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.filter-group--chips .check-row:has(input:focus-visible),
.filter-group--segmented .check-row:has(input:focus-visible) { outline: 2.5px solid var(--color-focus); outline-offset: 2px; z-index: 2; }
.filter-group--chips .check-row small { font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-soft); }
.filter-group--chips .check-row:has(input:checked) small { color: rgba(255, 255, 255, 0.7); }
/* Segmented: one joined control, the selected option filled. */
.filter-group--segmented .check-row { justify-content: center; width: calc(100% / 3); margin: 0 0 0 -1px; border-radius: 0; }
.filter-group--segmented .check-row:first-of-type { margin-left: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.filter-group--segmented .check-row:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.filter-group--segmented .check-row:hover { z-index: 1; }
.filter-group--segmented .check-row:has(input:checked) { z-index: 1; background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
/* On/off switch (Verified only) */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; font-size: var(--fs-md); font-weight: 700; color: var(--color-ink); cursor: pointer; }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--color-border-strong); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(30, 27, 26, 0.35); transition: transform var(--dur-fast) var(--ease-standard); }
.switch:checked { background: var(--color-brand); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2.5px solid var(--color-focus); outline-offset: 2px; }
/* Dimmed page behind the phone bottom sheet */
.filter-overlay { display: none; }
body.filters-open { overflow: hidden; }
/* ---- Active filter chips (Frontend Phase C item 5) — reuses the same
pill shape/hover treatment as .search-overlay__chips rather than a new
visual pattern. Each chip removes just its own filter(s); the trailing
link resets everything. ---- */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.active-filter-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 10px 7px 14px;
border-radius: var(--radius-xs);
min-height: 34px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
color: var(--color-ink);
font-weight: 600; font-size: var(--fs-sm);
transition: border-color var(--dur-fast) var(--ease-standard);
}
.active-filter-chip:hover { border-color: var(--color-ink); }
.active-filter-chip svg { width: 13px; height: 13px; }
.active-filters__clear { font-size: 0.8125rem; font-weight: 700; color: var(--color-text-soft); text-decoration: underline; text-underline-offset: 3px; }
.active-filters__clear:hover { color: var(--color-brand-dark); }
.listing-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 16px;
margin-bottom: 28px;
border-bottom: 1px solid var(--color-border);
}
.listing-toolbar__count { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 700; letter-spacing: -0.01em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.listing-toolbar__count span { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: normal; color: var(--color-text-soft); margin-left: 2px; }
.listing-toolbar__right { display: flex; align-items: center; gap: 12px; }
.listing-toolbar .field--select { min-width: 200px; }
.listing-toolbar .field--select select { padding: 0 36px 0 14px; font-weight: 600; }
.mobile-filter-toggle { display: none; }
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 48px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
.pagination__pages { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.pagination > a, .pagination > span:not(.pagination__pages), .pagination__pages > a, .pagination__pages > span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 40px; height: 40px;
padding: 0 12px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-md);
color: var(--color-ink);
font-variant-numeric: tabular-nums;
transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.pagination a:hover { border-color: var(--color-ink); }
.pagination .is-active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.pagination .pagination__gap { min-width: 24px; padding: 0; border: 0; background: none; color: var(--color-text-soft); }
.pagination .is-disabled { color: var(--color-text-soft); background: transparent; border-color: var(--color-border); opacity: 0.6; pointer-events: none; }
.pagination svg { width: 16px; height: 16px; flex-shrink: 0; }
.pagination__step:not(.pagination__step--next) svg { transform: scaleX(-1); }
/* Pages still rendering the older flat markup (admin News): centred, square buttons. */
.pagination:not(:has(.pagination__pages)) { justify-content: center; }
.pagination > a:not(.pagination__step), .pagination > span:not(.pagination__step):not(.pagination__pages) { padding: 0; }
@media (max-width: 560px) {
.pagination { gap: 8px; }
.pagination__step span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pagination__step { padding: 0; }
}
/* One empty-state pattern for the whole product: icon, heading, one sentence, one next action. */
.empty-state {
text-align: center;
padding: 56px var(--space-5);
background: var(--color-surface);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
}
.empty-state--compact { padding: 32px var(--space-5); }
.empty-state .btn { margin-top: var(--space-5); }
.empty-state__icon {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--color-brand-50);
color: var(--color-brand-dark);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
}
.empty-state__icon svg { width: 28px; height: 28px; }
.empty-state h3 { margin-bottom: 8px; font-size: var(--fs-lead); }
.empty-state p { max-width: 44ch; margin-inline: auto; font-size: var(--fs-md); }
@media (max-width: 980px) {
.listing-layout { grid-template-columns: 1fr; }
.mobile-filter-toggle { display: inline-flex; }
/* Bottom sheet: hidden (and out of the tab order) until opened. */
.filter-panel {
position: fixed;
inset: auto 0 0 0;
z-index: var(--z-drawer);
max-height: 88vh;
max-height: 88dvh;
border-width: 1px 0 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: 0 -16px 48px rgba(15, 13, 12, 0.28);
transform: translateY(104%);
visibility: hidden;
transition: transform var(--dur-slow) var(--ease-standard), visibility 0s linear var(--dur-slow);
}
.filter-panel.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.filter-panel__close { display: inline-flex; }
.filter-overlay {
display: block;
position: fixed;
inset: 0;
z-index: calc(var(--z-drawer) - 1);
background: rgba(30, 27, 26, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}
.filter-overlay.is-open { opacity: 1; visibility: visible; }
}
/* ---------------------------------------------------------------------- */
/* Detail layout (property detail / professional profile) */
/* ---------------------------------------------------------------------- */
.detail-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 40px;
align-items: start;
}
.detail-main > * + * { margin-top: 52px; }
.detail-side { position: sticky; top: 100px; display: grid; gap: 20px; }
@media (max-width: 980px) {
.detail-layout { grid-template-columns: 1fr; }
.detail-side { position: static; }
}
/* ---- Gallery: hero + side-tile mosaic, opens a lightbox ---- */
.gallery--mosaic {
position: relative;
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 8px;
height: clamp(320px, 42vw, 480px);
}
.gallery--mosaic.gallery--single { grid-template-columns: 1fr; }
/* No photos yet: a compact banner, not a 700px-tall empty box. */
.gallery--mosaic.gallery--single:has(.media-placeholder) { height: clamp(200px, 24vw, 300px); }
.gallery__hero { position: relative; height: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--color-border); box-shadow: var(--shadow-card); }
.gallery__hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-standard); }
.gallery__hero-trigger { position: absolute; inset: 0; z-index: 1; cursor: zoom-in; }
.gallery__hero:has(.gallery__hero-trigger:hover) img { transform: scale(1.035); }
.gallery__badges { z-index: 2; }
.gallery__actions { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 8px; }
.gallery__actions .fav-btn { position: static; }
/* Two action buttons here (favorite + share) vs one on a regular card, so
the badge row needs more reserved clearance than .card__tags's default
60px -- verified at 390px width, where the combined status+verified
badge width previously overlapped these buttons. */
.gallery__badges { right: 112px; }
[data-share] { position: relative; }
[data-share].is-copied::after {
content: 'Link copied';
position: absolute;
bottom: calc(100% + 8px);
right: 0;
background: var(--color-ink);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 6px 10px;
border-radius: var(--radius-sm);
white-space: nowrap;
box-shadow: var(--shadow-lift);
}
.gallery__side { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.gallery__tile { position: relative; flex: 1 1 0; min-height: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-border); cursor: zoom-in; }
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-standard); }
.gallery__tile:hover img { transform: scale(1.06); }
.gallery__more { position: absolute; inset: 0; background: rgba(30, 27, 26, 0.58); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.gallery__viewall {
position: absolute;
right: 14px; bottom: 14px;
z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(4px);
color: var(--color-ink);
font-size: var(--fs-sm);
font-weight: 700;
min-height: 44px;
padding: 0 16px 0 13px;
border-radius: var(--radius-pill);
box-shadow: var(--shadow-lift);
transition: transform var(--dur-fast) var(--ease-standard);
}
.gallery__viewall svg { width: 16px; height: 16px; }
.gallery__viewall:hover { transform: translateY(-2px); }
@media (max-width: 760px) {
.gallery--mosaic, .gallery--mosaic.gallery--single, .gallery--mosaic.gallery--single:has(.media-placeholder) { grid-template-columns: 1fr; height: auto; }
/* width:100% + auto height: with a definite height:100% the aspect-ratio
was resolving the width instead (263px inside a 350px column). */
.gallery__hero { width: 100%; height: auto; aspect-ratio: 4/3; }
.gallery--single:has(.media-placeholder) .gallery__hero { aspect-ratio: 16/9; }
.gallery__side { flex-direction: row; overflow-x: auto; height: auto; padding-bottom: 2px; }
.gallery__tile { flex: 0 0 92px; height: 92px; }
.gallery__viewall { position: static; margin-top: 10px; align-self: flex-start; background: var(--color-surface); }
}
/* ---- Lightbox: full-screen photo viewer for the gallery above ---- */
.lightbox { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(20, 17, 16, 0.94); }
.lightbox__stage { position: relative; z-index: 1; width: min(1100px, 90vw); height: min(80vh, 800px); display: flex; align-items: center; justify-content: center; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); }
.lightbox__close, .lightbox__nav {
position: absolute;
z-index: 2;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
transition: background-color var(--dur-fast) var(--ease-standard);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__close { top: 20px; right: 20px; width: 44px; height: 44px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--prev svg { transform: scaleX(-1); }
.lightbox__nav--next { right: 20px; }
.lightbox__count {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
z-index: 2;
color: #fff; font-size: 0.8125rem; font-weight: 700;
background: rgba(255, 255, 255, 0.14);
padding: 7px 16px;
border-radius: var(--radius-pill);
}
@media (max-width: 640px) {
.lightbox__close { top: 12px; right: 12px; width: 38px; height: 38px; }
.lightbox__nav { width: 38px; height: 38px; }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
}
/* ---- Detail heading block ---- */
/* Title+location sit beside the price on wider screens; below 641px
(and whenever a long title doesn't fit, thanks to flex-wrap) it drops
to the same stacked layout as before. */
.detail-head { display: block; }
@media (min-width: 641px) {
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.detail-head__price { margin-top: 0 !important; text-align: right; flex-shrink: 0; }
}
.detail-head__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--color-text-soft); }
.detail-head__meta-dot { color: var(--color-border-strong); }
/* Every other page's h1 has its own scoped size (.page-header h1,
.profile-header__body h1) — this one was missed and was inheriting the
bare site-wide h1 (clamp up to 3.75rem/60px, meant for marketing hero
headlines), badly overpowering a plain listing title. Sized to sit
just above the price beside it rather than dwarf it. */
.detail-head h1 {
font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem);
margin-bottom: 8px;
text-wrap: balance;
font-weight: 700;
}
.detail-head__loc {
display: flex;
align-items: center;
gap: 6px; color: var(--color-text-soft);
font-weight: 600; }
.detail-head__loc svg { width: 17px;
height: 17px;
color: var(--color-brand); }
.detail-head__price {
display: block;
margin-top: 16px;
font-family: var(--font-display);
font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
font-weight: 800;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--color-ink); }
.detail-head__price span {
display: block;
font-family: var(--font-body);
font-size: var(--fs-sm); font-weight: 700;
color: var(--color-text-soft); }
.key-facts {
display: flex;
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
padding: 18px 6px;
}
.key-facts__item { flex: 1; padding: 0 12px; text-align: center; }
.key-facts__item + .key-facts__item { border-left: 1px solid var(--color-border); }
.key-facts__item svg { width: 22px; height: 22px; color: var(--color-brand); margin: 0 auto 8px; }
.key-facts__item strong { display: block; font-family: var(--font-display); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); color: var(--color-ink); }
.key-facts__item span { font-size: 0.75rem; color: var(--color-text-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
@media (max-width: 560px) {
.key-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 14px;
}
.key-facts__item {
flex: none;
background: var(--color-paper);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 14px 8px;
border-left: none !important;
}
}
.prose h2, .detail-main h2 { font-size: clamp(1.3125rem, 1.2rem + 0.6vw, 1.625rem); margin-bottom: 14px; letter-spacing: -0.01em; }
.prose p { font-size: 1.0625rem; line-height: 1.75; max-width: 65ch; text-wrap: pretty; }
/* jobs/detail.php only: .prose h2 above was already scoped down to a
compact 21-26px for this sparse-content layout, but .prose h1 (the job
title) never got a matching override -- it was still inheriting the
global 36-60px h1 meant for longer property/professional titles, which
read as oversized next to a one- or two-word job title like "Driver". */
.job-detail__title { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); margin-bottom: 8px; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.feature-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--color-paper);
border: 1px solid var(--color-border);
border-radius: 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-ink);
transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.feature-tag svg { width: 16px; height: 16px; color: var(--color-brand-dark); flex-shrink: 0; }
.feature-tag:hover { border-color: var(--color-brand); background: var(--color-brand-50); }
.map-placeholder {
border-radius: var(--radius-md);
border: 1px dashed var(--color-border-strong);
background:
linear-gradient(var(--color-paper), var(--color-paper)),
repeating-linear-gradient(45deg, var(--color-border) 0 1px, transparent 1px 14px);
background-blend-mode: normal;
aspect-ratio: 16/7;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--color-text-soft);
text-align: center;
padding: 20px;
}
.map-placeholder svg { width: 30px; height: 30px; color: var(--color-brand); }
.map-placeholder strong { color: var(--color-ink); font-size: 0.9375rem; }
.map-placeholder span { font-size: 0.8125rem; }
a.map-placeholder { transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); }
a.map-placeholder:hover { border-color: var(--color-brand); background-color: var(--color-brand-50); }
a.map-placeholder .link-more { margin-top: 2px; }
/* Real embedded map (property detail "Location") — .map-placeholder above
is the decorative dashed box other pages (e.g. contact.php) still use;
this one actually shows the map instead of just linking away to it. */
.map-embed { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/7; border: 1px solid var(--color-border); background: var(--color-paper); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-embed__link {
position: absolute; left: 14px; bottom: 14px;
display: inline-flex; align-items: center; gap: 7px;
background: var(--color-surface);
border-radius: var(--radius-pill);
padding: 9px 16px 9px 12px;
box-shadow: var(--shadow-lift);
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-ink);
transition: transform var(--dur-fast) var(--ease-standard);
}
.map-embed__link svg { width: 16px; height: 16px; color: var(--color-brand); flex-shrink: 0; }
.map-embed__link:hover { transform: translateY(-2px); }
/* ---- Contact / agent card ---- */
.contact-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-6);
box-shadow: var(--shadow-card);
}
.contact-card__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.contact-card__price { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 700; color: var(--color-ink); text-align: right; }
.contact-card__price span { display: block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; color: var(--color-text-soft); }
.contact-card__person { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.contact-card__person img, .contact-card__person .avatar-placeholder { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.contact-card__person strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--color-ink); }
.contact-card__person span { display: block; margin-top: 2px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-soft); }
.contact-card__actions { display: grid; gap: 10px; margin-bottom: 18px; }
.contact-card__form-label { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; color: var(--color-ink); padding-top: 18px; border-top: 1px solid var(--color-border); margin: 0 0 -2px; }
.contact-card__form { display: grid; gap: var(--space-3); padding-top: var(--space-4); }
.contact-card__form .form-group { margin-bottom: 0; }
.contact-card .alert { margin: var(--space-4) 0 0; }
.contact-card__badge { margin-left: auto; flex-shrink: 0; }
.detail-crumbs { padding-top: var(--space-5); }
.gallery ~ .detail-layout { margin-top: var(--space-10); }
.detail-head__meta--spaced { margin-bottom: var(--space-4); }
.form-optional { font-weight: 500; color: var(--color-text-soft); }
/* Segmented control: two mutually exclusive options that look like one switch
(radio inputs underneath, so it posts the same field and works without JS). */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.segmented__opt { position: relative; display: block; cursor: pointer; }
.segmented__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented__opt span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-xs); font-weight: 700; font-size: var(--fs-md); color: var(--color-text); text-align: center; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.segmented__opt input:checked + span { background: var(--color-ink); color: #fff; }
.segmented__opt input:focus-visible + span { outline: 2.5px solid var(--color-focus); outline-offset: 2px; }
[data-test-drive-only][hidden] { display: none; }
.contact-card__note { display: flex; gap: 8px; align-items: flex-start; font-size: 0.75rem; color: var(--color-text-soft); margin-top: 12px; }
.contact-card__note svg { width: 14px; height: 14px; color: var(--color-verified); flex-shrink: 0; margin-top: 1px; }
textarea.field-textarea {
width: 100%;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
padding: 12px 14px;
font-family: var(--font-body);
font-size: 0.9375rem;
color: var(--color-ink);
resize: vertical;
min-height: 96px;
transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
textarea.field-textarea:hover { border-color: var(--color-text-soft); }
textarea.field-textarea:focus { outline: none; border-color: var(--color-brand-dark); box-shadow: 0 0 0 3px rgba(233, 122, 26, 0.22); }
textarea.field-textarea[aria-invalid="true"] { border-color: var(--color-danger); }
/* ---------------------------------------------------------------------- */
/* Profile header (professional profile) */
/* ---------------------------------------------------------------------- */
.profile-header {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 26px;
margin-top: -64px;
position: relative;
z-index: 2;
box-shadow: var(--shadow-lift);
}
.profile-header__avatar { position: relative; flex-shrink: 0; }
.profile-header__avatar img, .profile-header__avatar .avatar-placeholder { width: 104px; height: 104px; border-radius: var(--radius-md); object-fit: cover; }
.profile-header__avatar .badge-verified { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.profile-header__body { flex: 1; min-width: 220px; }
.profile-header__body h1 { font-size: 1.5rem; margin-bottom: 4px; }
.profile-header__trade { color: var(--color-brand-dark); font-weight: 700; margin-bottom: 10px; }
.profile-header__meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.875rem; color: var(--color-text-soft); font-weight: 600; }
.profile-header__meta span { display: flex; align-items: center; gap: 6px; }
.profile-header__meta svg { width: 16px; height: 16px; }
.profile-header__actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 640px) {
.profile-header { margin-top: -40px; padding: 20px; }
.profile-header__actions { width: 100%; }
.profile-header__actions .btn { flex: 1; }
}
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.portfolio-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); display: block; }
/* Frontend Phase D: each photo is now a lightbox trigger (see components.js)
instead of a plain ![]()
— reset the wrapping