/* ==========================================================================
Ardhi Yangu — Tanzania Land & Plots Marketplace
Palette: Deep emerald, forest green, muted gold, warm white, charcoal
Pure hand-written CSS — no frameworks, no external libraries.
========================================================================== */
:root {
--emerald-900: #0b3d2e;
--emerald-800: #0f4c3a;
--emerald-700: #146c4f;
--emerald-600: #1a8a63;
--emerald-500: #22a377;
--forest: #123c2c;
--gold: #c9a227;
--gold-light: #e0bf4f;
--gold-dark: #a3841c;
--charcoal: #1f2321;
--charcoal-soft: #33372f;
--warm-white: #faf8f3;
--off-white: #f3f1ea;
--line: #e4e0d4;
--text-main: #24261f;
--text-muted: #676b5f;
--danger: #a3372b;
--danger-bg: #fbeae7;
--success: #1a8a63;
--success-bg: #e7f5ee;
--warn: #b07a12;
--warn-bg: #fbf1dd;
--radius: 8px;
--radius-lg: 14px;
--shadow: 0 2px 10px rgba(15, 30, 22, 0.07);
--shadow-md: 0 8px 24px rgba(15, 30, 22, 0.10);
--shadow-lg: 0 20px 48px rgba(15, 30, 22, 0.16);
--shadow-gold: 0 10px 30px rgba(201, 162, 39, 0.28);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 0.18s;
--dur: 0.35s;
--dur-slow: 0.6s;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
margin: 0;
padding: 0;
background: var(--warm-white);
color: var(--text-main);
font-size: 16px;
line-height: 1.55;
}
body {
font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: "Georgia", "Iowan Old Style", serif;
color: var(--charcoal);
font-weight: 600;
line-height: 1.2;
margin: 0 0 0.5em;
}
a {
color: var(--emerald-700);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--emerald-800); }
img { max-width: 100%; display: block; }
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
/* ==========================================================================
KEYFRAMES — the animation vocabulary used everywhere below
========================================================================== */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-24px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes floatSlow {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-14px, -22px); }
}
@keyframes floatSlower {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(18px, 14px) scale(1.05); }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(26, 138, 99, 0.35); }
50% { box-shadow: 0 0 0 8px rgba(26, 138, 99, 0); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes drawLine {
from { width: 0; }
to { width: 44px; }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes ripple {
to { transform: scale(3.5); opacity: 0; }
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.7); }
60% { opacity: 1; transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes badgePop {
0% { transform: scale(0.6); opacity: 0; }
70% { transform: scale(1.12); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes kenBurnsZoom {
0% { transform: scale(1); }
100% { transform: scale(1.18); }
}
/* ==========================================================================
CARD PHOTO — listing photos shown as animated background images (not ![]()
tags) on property/rental/project cards, slowly zooming from afar to close
(Ken Burns effect) so the marketplace feels alive even on a static grid.
Used by properties/_property_card.html, rentals/_rental_card.html, and
seller_projects.html.
========================================================================== */
.card-photo {
position: relative;
width: 100%;
height: 170px;
overflow: hidden;
background-color: #efece3;
}
.card-photo-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1);
opacity: 0;
z-index: 0;
transition: opacity 1.1s ease;
animation: kenBurnsZoom 9s ease-in-out infinite alternate;
animation-play-state: paused;
will-change: transform, opacity;
}
.card-photo-bg.is-active {
opacity: 1;
z-index: 1;
animation-play-state: running;
}
.card-photo-empty {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: #999; font-size: 13px;
}
.card-photo--sm { height: 140px; }
@media (prefers-reduced-motion: reduce) {
.card-photo-bg { animation: none; }
}
/* ==========================================================================
CARD PHOTO — just the listing's own photo(s), cycling via .card-photo-bg
crossfades (see the script in base.html). No caption/overlay on top any
more — descriptive images only, nothing written over them. Used by
properties/_property_card.html, rentals/_rental_card.html and
seller_projects.html.
========================================================================== */
.card-photo-anim {
position: relative;
width: 100%;
height: 170px;
overflow: hidden;
background: linear-gradient(150deg, #0c2019 0%, #162c21 55%, #1c1a12 100%);
}
.card-photo-anim--sm { height: 140px; }
/* ==========================================================================
SCROLL-REVEAL ENGINE
Elements with .reveal start hidden/offset; main.js adds .in-view via
IntersectionObserver. --d sets a per-element stagger delay (set inline
or via nth-child rules below).
========================================================================== */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
transition-delay: var(--d, 0s);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: var(--d, 0s); }
.reveal-left.in-view { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(28px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: var(--d, 0s); }
.reveal-right.in-view { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: var(--d, 0s); }
.reveal-scale.in-view { opacity: 1; transform: scale(1); }
/* Auto-stagger direct children of a .reveal-group once revealed */
.reveal-group > * { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal-group.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-group.in-view > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-group.in-view > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-group.in-view > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-group.in-view > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-group.in-view > *:nth-child(5) { transition-delay: 0.27s; }
.reveal-group.in-view > *:nth-child(6) { transition-delay: 0.33s; }
.reveal-group.in-view > *:nth-child(7) { transition-delay: 0.39s; }
.reveal-group.in-view > *:nth-child(8) { transition-delay: 0.45s; }
.reveal-group.in-view > *:nth-child(n+9) { transition-delay: 0.5s; }
/* Page-load entrance (no scroll needed — fires immediately) */
.enter-up { animation: fadeInUp var(--dur-slow) var(--ease) both; }
.enter-down { animation: fadeInDown var(--dur-slow) var(--ease) both; }
.enter-fade { animation: fadeIn var(--dur-slow) var(--ease-soft) both; }
.enter-scale { animation: scaleIn var(--dur) var(--ease) both; }
/* ==========================================================================
NAVBAR
========================================================================== */
/* Apple-style navbar: thin, light, minimal — white/translucent bar, small
dark-gray text links, no heavy brand color. The nav's own structure
(hamburger, dropdowns, search-fab) is unchanged; this is a reskin. */
.navbar {
background: rgba(255,255,255,0.92);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid rgba(0,0,0,0.08);
position: sticky;
top: 0;
z-index: 100;
padding-top: env(safe-area-inset-top, 0px);
animation: fadeInDown var(--dur-slow) var(--ease) both;
transition: box-shadow var(--dur) var(--ease-soft);
}
.navbar.is-scrolled { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.brand {
display: flex;
align-items: center;
gap: 8px;
color: #1d1d1f;
font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.1px;
transition: opacity var(--dur-fast) var(--ease-soft);
}
.brand:hover { color: #1d1d1f; opacity: 0.7; }
.brand .brand-mark {
color: var(--gold-dark);
display: inline-block;
animation: floatSlow 4s var(--ease-soft) infinite;
}
.brand-mark-img {
width: 30px;
height: 30px;
display: inline-block;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
flex: none;
}
.footer-brand {
display: flex;
align-items: center;
gap: 11px;
}
.footer-brand-img {
width: 42px;
height: 42px;
display: inline-block;
border-radius: 50%;
flex: none;
}
.nav-menu {
display: flex;
align-items: center;
gap: 18px;
flex: 1;
justify-content: flex-end;
min-width: 0;
}
.nav-links {
display: flex;
align-items: center;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: nowrap;
min-width: 0;
}
.nav-links li { flex: none; }
.nav-links a {
position: relative;
color: #424245;
font-size: 12.5px;
font-weight: 400;
padding-bottom: 4px;
white-space: nowrap;
}
/* Between the mobile breakpoint and ~1180px, six nav links plus the
language switcher and two CTA buttons get tight — step the type size
and gaps down a notch rather than letting labels wrap onto two lines. */
@media (min-width: 861px) and (max-width: 1180px) {
.nav-menu { gap: 12px; }
.nav-links { gap: 11px; }
.nav-links a { font-size: 13px; }
.nav-cta .btn { padding: 9px 14px; font-size: 13px; }
}
@media (min-width: 861px) and (max-width: 1040px) {
.nav-links a { font-size: 12.5px; }
.brand { font-size: 19px; }
.brand-mark-img { width: 46px; height: 46px; }
}
.nav-links a::after {
content: "";
position: absolute;
left: 0; bottom: -2px;
width: 0;
height: 1.5px;
background: var(--gold-dark);
transition: width var(--dur) var(--ease);
}
.nav-links a:hover { color: #000; }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; gap: 10px; align-items: center; }
/* Nav CTA buttons get a smaller, quieter treatment than the bold pill
buttons used elsewhere on the page — scoped to .navbar only, so
.btn-outline/.btn-gold everywhere else on the site are untouched. */
.navbar .btn.btn-sm { padding: 6px 14px; font-size: 12.5px; border-radius: 999px; }
.navbar .btn-outline { border-color: rgba(0,0,0,0.18); color: #1d1d1f; }
.navbar .btn-outline:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.3); }
.navbar .btn-gold { background: #1d1d1f; color: #fff; }
.navbar .btn-gold:hover { background: #000; }
.navbar .lang-switch-select {
background: transparent;
color: #424245;
border: 1px solid rgba(0,0,0,0.14);
}
.navbar .nav-toggle {
border-color: rgba(0,0,0,0.18);
color: #1d1d1f;
}
.navbar .nav-toggle:hover { background: rgba(0,0,0,0.05); }
/* Account dropdown — collapses "My Land / My Rentals / My Rider
Dashboard / Saved / Messages / Profile / Log out" behind one trigger
button, so the main nav row stays at a fixed four links regardless of
how many roles (seller/landlord/driver) an account carries. */
.account-menu { position: relative; }
.account-trigger { display: inline-flex; align-items: center; gap: 7px; }
.account-trigger .caret {
font-size: 10px;
transition: transform var(--dur-fast) var(--ease-soft);
}
.account-menu.is-open .account-trigger .caret { transform: rotate(180deg); }
.account-trigger .unread-dot { margin-left: 0; }
.account-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 120;
min-width: 210px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 8px;
display: flex;
flex-direction: column;
gap: 1px;
animation: fadeInDown var(--dur-fast) var(--ease-soft) both;
}
.account-dropdown[hidden] { display: none; }
.account-dropdown a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 600;
color: var(--text-main);
white-space: nowrap;
border-bottom: 1px solid var(--off-white);
}
.account-dropdown a:last-of-type { border-bottom: none; }
/* Logout stands out as the final, clearly-visible action */
.account-dropdown a[href*="logout"] { color: #b02a2a; font-weight: 700; }
.account-dropdown a[href*="logout"]:hover { background: #fdeaea; color: #8f1f1f; }
.account-dropdown a:hover { background: var(--off-white); color: var(--emerald-700); }
.account-dropdown hr { border: none; border-top: 1px solid var(--line); margin: 6px 4px; }
.nav-toggle {
display: none;
background: none;
border: 1.5px solid rgba(255,255,255,0.4);
color: #fff;
border-radius: var(--radius);
width: 40px; height: 40px;
font-size: 18px;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-soft);
}
.nav-toggle:hover { background: rgba(255,255,255,0.1); }
/* Sitewide search toggle — a standalone floating button pinned to the
top-right corner of the page (NOT part of the navbar row), so it stays
put regardless of navbar layout and is always reachable on scroll. */
.search-fab {
position: fixed;
top: 14px;
right: 16px;
z-index: 2000;
width: 42px; height: 42px;
border-radius: 50%;
background: rgba(15,61,46,0.92);
border: 1.5px solid rgba(255,255,255,0.45);
color: #fff;
font-size: 17px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0,0,0,0.3);
transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.search-fab:hover { background: rgba(212, 175, 55, 0.25); }
.search-fab[aria-expanded="true"] { background: var(--gold); color: #1a1505; border-color: var(--gold); }
@media (max-width: 860px) {
/* Below 860px the hamburger (.nav-toggle) also lives at the right edge
of the navbar row, right where this fixed button sits — the two were
landing on top of each other, with the search button (higher
z-index) completely covering and intercepting taps meant for the
hamburger. Pull it off that corner and into the middle of the bar
instead, clear of both the brand on the left and the hamburger on
the right. */
.search-fab { left: 50%; right: auto; transform: translateX(-50%); }
}
@media (max-width: 520px) {
.search-fab { top: 10px; width: 38px; height: 38px; font-size: 15px; }
}
/* The 🔍 glyph's own ink sits slightly low-and-right of its character box,
which reads as "off-centre" inside the round button even though flex
centers the box itself. .search-fab-icon is a span wrapping the emoji
(see base.html) so it can be nudged precisely without touching layout. */
.search-fab-icon {
display: inline-block;
transform: translate(-1px, -1px);
}
@media (max-width: 520px) {
.search-fab-icon { transform: translate(-1px, -0.5px); }
}
/* Sitewide search bar — a single box that searches land, rentals and
riders together (core/search_results.html). Collapsed behind the 🔍
icon in the navbar rather than sitting permanently in the row, so the
main nav stays at its fixed four-link width regardless of screen size. */
.nav-search-bar {
background: var(--emerald-900);
border-bottom: 3px solid var(--gold);
box-shadow: 0 16px 32px rgba(0,0,0,0.22);
overflow: hidden;
max-height: 0;
transition: max-height var(--dur) var(--ease);
}
.nav-search-bar.is-open { max-height: 110px; }
.nav-search-form {
max-width: 720px;
margin: 0 auto;
padding: 16px 24px;
display: flex;
gap: 10px;
}
.nav-search-form input[type="text"] {
flex: 1;
padding: 12px 16px;
border-radius: var(--radius-lg);
border: 1px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.08);
color: #fff;
font-size: 15px;
outline: none;
}
.nav-search-form input[type="text"]::placeholder { color: rgba(255,255,255,0.6); }
.nav-search-form input[type="text"]:focus { border-color: var(--gold); background: rgba(255,255,255,0.14); }
.nav-search-form button {
flex: none;
padding: 12px 20px;
border: none;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #d4af37, #f4d875);
color: #1a1505;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 520px) {
.nav-search-form { flex-direction: column; padding: 14px 16px; }
}
/* ==========================================================================
BUTTONS — lift, shine sweep, ripple
========================================================================== */
.btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 22px;
border-radius: var(--radius);
font-size: 14.5px;
font-weight: 600;
border: 1.5px solid transparent;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
line-height: 1;
}
.btn:active { transform: scale(0.97); }
.btn .btn-ripple {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.55);
transform: scale(0);
pointer-events: none;
animation: ripple 0.55s var(--ease-soft) forwards;
}
.btn-primary { background: var(--emerald-700); color: #fff; }
.btn-primary:hover { background: var(--emerald-800); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-gold {
background: linear-gradient(100deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
background-size: 220% 100%;
color: var(--charcoal);
}
.btn-gold:hover {
color: var(--charcoal);
transform: translateY(-2px);
box-shadow: var(--shadow-gold);
animation: gradientShift 1.6s ease infinite;
}
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline:hover { border-color: #fff; color: #fff; transform: translateY(-2px); background: rgba(255,255,255,0.08); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text-main); }
.btn-ghost:hover { border-color: var(--emerald-700); color: var(--emerald-700); background: var(--off-white); transform: translateY(-1px); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #8a2c22; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(163,55,43,0.28); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
/* ==========================================================================
HERO
========================================================================== */
.hero {
position: relative;
/* Very light, mostly-transparent tint, not a solid/dark gradient — lets
the sitewide fixed .site-bg photo slideshow (base.html) show through,
already whitened by .site-bg__overlay's near-white blur. Hero text
below is now dark (var(--charcoal) etc.), matching the rest of the
site, since the backdrop it sits on is light, not dark. */
background: linear-gradient(160deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.12) 55%, rgba(255,255,255,0.28) 100%);
background-size: 220% 220%;
animation: gradientShift 14s ease-in-out infinite;
color: var(--charcoal);
min-height: 100vh;
display: flex;
align-items: center;
padding: 76px 0 96px;
overflow: hidden;
}
.hero::before, .hero::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(2px);
opacity: 0.14;
pointer-events: none;
}
.hero::before {
width: 420px; height: 420px;
background: radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
top: -140px; right: -80px;
animation: floatSlow 9s var(--ease-soft) infinite;
}
.hero::after {
width: 320px; height: 320px;
background: radial-gradient(circle, var(--emerald-500) 0%, transparent 70%);
bottom: -120px; left: -60px;
animation: floatSlower 11s var(--ease-soft) infinite;
}
.hero .container { position: relative; z-index: 1; }
/* Topographic-contour texture — concentric survey-map rings instead of the
generic blurred-blob hero look. Purely decorative, own layer so it never
fights the gradient / blob glow underneath. */
.pattern-topo { position: relative; }
.pattern-topo::before {
content: "";
position: absolute; inset: 0;
background-image:
repeating-radial-gradient(circle at 82% 8%, rgba(255,255,255,0.09) 0px, rgba(255,255,255,0.09) 1px, transparent 1px, transparent 30px),
repeating-radial-gradient(circle at 6% 92%, rgba(201,162,39,0.14) 0px, rgba(201,162,39,0.14) 1px, transparent 1px, transparent 34px);
opacity: 0.55;
pointer-events: none;
}
/* Faint parcel/survey grid — used on darker sections for the same
land-marketplace visual signature. */
.pattern-grid { position: relative; }
.pattern-grid::after {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 42px 42px;
pointer-events: none;
}
.hero-stamp {
position: absolute; top: 34px; right: 34px; z-index: 2;
width: 84px; height: 84px; border-radius: 50%;
border: 1.5px dashed rgba(163,132,28,0.55);
color: var(--gold-dark);
display: flex; align-items: center; justify-content: center;
text-align: center; font-size: 10.5px; font-weight: 700;
letter-spacing: 0.4px; line-height: 1.35; text-transform: uppercase;
transform: rotate(8deg);
animation: floatSlow 7s var(--ease-soft) infinite, fadeIn var(--dur-slow) var(--ease) 0.4s both;
}
@media (max-width: 720px) { .hero-stamp { display: none; } }
.hero-divider {
position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 64px;
fill: var(--warm-white);
z-index: 1;
}
.hero-eyebrow {
display: inline-block;
color: var(--gold-dark);
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 14px;
animation: fadeInUp var(--dur-slow) var(--ease) both;
}
.hero h1 {
color: var(--charcoal);
font-size: 44px;
max-width: 720px;
margin-bottom: 18px;
animation: fadeInUp var(--dur-slow) var(--ease) 0.08s both;
}
.hero-h1-accent {
background: linear-gradient(100deg, var(--gold-dark), var(--emerald-700) 90%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead {
color: rgba(31,35,33,0.82);
font-size: 17.5px;
max-width: 620px;
margin-bottom: 34px;
animation: fadeInUp var(--dur-slow) var(--ease) 0.16s both;
}
.hero-actions {
display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px;
animation: fadeInUp var(--dur-slow) var(--ease) 0.32s both;
}
.hero-pill-row {
display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 22px;
animation: fadeInUp var(--dur-slow) var(--ease) 0.14s both;
}
.hero-pill {
background: rgba(31,35,33,0.06);
border: 1px solid rgba(31,35,33,0.16);
color: var(--charcoal);
padding: 7px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
}
/* .btn-outline's global white-on-dark styling assumes a dark backdrop
(section-dark, etc.) — the hero's backdrop is now light, so its one
outline button (the "Start Searching" CTA) needs its own dark-on-light
variant instead of changing the shared .btn-outline rule everywhere. */
.hero .btn-outline { border-color: rgba(31,35,33,0.35); color: var(--charcoal); }
.hero .btn-outline:hover { border-color: var(--charcoal); color: var(--charcoal); background: rgba(31,35,33,0.06); }
/* ==========================================================================
SITE BACKGROUND — a fixed, full-viewport slideshow of real listing photos
behind the ENTIRE site (base.html, right after ), not just the
hero. Every normal section still paints its own opaque background on top
of it as always (zero visual change on dashboards, forms, detail pages,
footer, etc.) — it only shows through where a section is deliberately
made transparent with .section-floating, or in the hero. See
marketplace/context_processors.py::_get_site_bg_images for the photo
pool (cached, sitewide, not just home.html).
========================================================================== */
.site-bg {
position: fixed;
inset: 0;
/* Positive, not negative — see the .site-shell wrapper in base.html.
A fixed element at negative z-index relies on it always painting
above the page's own canvas background, which isn't dependable
enough: it was the reason these photos stopped showing behind every
page. The rest of the page now lives in an explicit z-index:2
sibling wrapper instead, so stacking order here is unambiguous. */
z-index: 0;
overflow: hidden;
background: linear-gradient(160deg, var(--emerald-900) 0%, var(--forest) 55%, var(--charcoal) 100%);
pointer-events: none;
}
.site-bg__slide {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.06);
/* A gentle vividness boost on the photo itself — independent of the
overlay below — so the slideshow reads as "bright, alive photos"
rather than flat/dull, whatever the overlay ends up doing on top. */
filter: saturate(1.2) brightness(1.06) contrast(1.03);
transition: opacity 2.2s ease;
animation: kenBurnsZoom 26s ease-in-out infinite alternate;
animation-play-state: paused;
}
.site-bg__slide.is-active { opacity: 1; animation-play-state: running; }
.site-bg__overlay {
position: fixed; inset: 0; z-index: 1;
/* Near-white frosted wash, not a dark tint: the photos stay visible as a
soft, blurred backdrop, while every normal dark heading/body text
color the rest of the site already uses (var(--charcoal) etc.) stays
clearly readable on top of it — no separate light/dark text scheme
needed for most of the site.
Lighter than before (0.82 -> 0.58) and less blur (6px -> 4px) so the
photos actually show through brightly instead of being washed almost
all the way to white — text contrast was re-checked and still reads
cleanly at this level against the site's existing dark text colors. */
background: rgba(255,255,255,0.58);
-webkit-backdrop-filter: blur(4px) saturate(130%);
backdrop-filter: blur(4px) saturate(130%);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.site-bg__slide { animation: none; }
}
/* A section whose own background is removed so the fixed .site-bg photo
slideshow shows through behind it — used only on sections that list
properties/rentals (home.html's listing sections, property_list.html,
rental_list.html, search_results.html, seller_projects.html) so those
listings visually "float" over the moving photo backdrop. Every other
section (.section-alt, .section-dark, dashboards, forms, footer) is
untouched and stays fully opaque. */
/* No forced text-color overrides here any more: the site-wide background
is now a near-white frosted wash (.site-bg__overlay), so the normal
dark heading/body/muted-text colors the rest of the site already uses
stay clearly readable on it without a separate light-on-dark palette. */
.section-floating { background: transparent; position: relative; z-index: 1; }
.section-floating .empty-state {
background: rgba(255,255,255,0.92);
border-radius: var(--radius-lg);
}
/* Frosted-glass variant of .floating-tile for cards sitting on a
.section-floating photo backdrop — translucent instead of solid white, so
the moving background is visible behind the card edges, giving the
"floating over the photos" effect the plain white tile doesn't. */
.floating-tile--glass {
background: rgba(255,255,255,0.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(8,26,19,0.35), 0 1px 2px rgba(8,26,19,0.08);
}
/* ==========================================================================
HERO TWO-COLUMN LAYOUT — the hero's own .container becomes a left/right
split: .hero__left keeps the eyebrow/h1/lead/CTAs it always had,
.hero__right holds the live-listings ticker panel beside it (not
stacked below it). Stacks back to one column on narrower screens.
========================================================================== */
.hero__grid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.hero__left { flex: 1 1 560px; min-width: 0; }
.hero__right { flex: 0 1 460px; min-width: 360px; }
@media (max-width: 960px) {
.hero__grid { flex-direction: column; align-items: stretch; }
.hero__right { width: 100%; }
}
/* ==========================================================================
HERO TICKER PANEL — a frosted-glass card of live listing titles, one
showing at a time, built from the same site_bg_images pool used for the
sitewide background. Auto-advances; hovering pauses it (JS) so the title
you want is easy to click through to its listing — each item is a real
the whole time, hover just stops it moving under the cursor.
========================================================================== */
.hero-ticker-panel {
background: rgba(255,255,255,0.55);
border: 1px solid rgba(31,35,33,0.1);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border-radius: 18px;
padding: 32px;
box-shadow: 0 24px 60px rgba(31,35,33,0.18);
animation: fadeInUp var(--dur-slow) var(--ease) 0.22s both;
}
.hero-ticker-panel__head {
font-size: 13px;
font-weight: 700;
color: var(--gold-dark);
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 18px;
}
.hero-ticker__viewport {
position: relative;
/* Tall enough for a full, wrapped, large title (up to ~3 lines) plus
the location line below it — the title is never clipped/truncated. */
height: 160px;
overflow: hidden;
}
.hero-ticker__item {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: center; gap: 10px;
text-decoration: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-ticker__item.is-active { opacity: 1; transform: translateY(0); }
.hero-ticker__title {
color: var(--charcoal);
font-family: "Arial Black", "Arial Bold", "Helvetica Neue", Arial, sans-serif;
font-size: 30px;
font-weight: 900;
line-height: 1.25;
/* Full text, never clipped — wraps onto as many lines as it needs
instead of being cut off at one line. */
white-space: normal;
overflow-wrap: break-word;
}
.hero-ticker__item:hover .hero-ticker__title { color: var(--gold-dark); text-decoration: underline; }
.hero-ticker__loc { color: var(--text-muted); font-weight: 400; font-size: 14px; }
.hero-ticker-panel__dots { display: flex; gap: 6px; margin-top: 18px; }
.hero-ticker-panel__dots span {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(31,35,33,0.18);
transition: background var(--dur) var(--ease-soft);
}
.hero-ticker-panel__dots span.is-active { background: var(--gold-dark); }
@media (max-width: 960px) {
.hero-ticker-panel { max-width: 100%; }
}
/* Simplified single-field hero search (replaces the old multi-dropdown
search-grid on the home page): text input + submit only. */
.search-grid--simple { grid-template-columns: 1fr auto; }
@media (max-width: 720px) {
.search-grid--simple { grid-template-columns: 1fr; }
.search-grid--simple button { width: 100%; }
}
@media (max-width: 480px) {
.hero-actions { flex-direction: column; }
.hero-actions .btn { width: 100%; text-align: center; }
}
/* ==========================================================================
HERO SHOWCASE — landing-page photo slideshow built from real listings
(core/_hero_showcase.html). A separate component from .hero above so it
can be dropped in without disturbing the existing hero's own CSS; swap
one for the other in core/home.html rather than running both at once.
========================================================================== */
.hero-showcase {
position: relative;
height: 560px;
overflow: hidden;
background: linear-gradient(160deg, var(--emerald-900) 0%, var(--forest) 55%, var(--charcoal) 100%);
}
.hero-showcase__slide {
position: absolute;
inset: 0;
display: block;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.08);
transition: opacity 1.4s ease, transform 6s ease;
z-index: 0;
}
.hero-showcase__slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.hero-showcase__slide--fallback {
background: linear-gradient(160deg, var(--emerald-900) 0%, var(--forest) 55%, var(--charcoal) 100%);
}
.hero-showcase__overlay {
position: absolute; inset: 0; z-index: 2;
background: linear-gradient(180deg, rgba(10,30,20,0.45) 0%, rgba(10,30,20,0.72) 100%);
}
.hero-showcase__content {
position: relative; z-index: 3;
height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
padding: 24px;
color: #fff;
}
.hero-showcase__content h1 {
font-size: 40px;
max-width: 760px;
margin-bottom: 14px;
color: #fff;
animation: fadeInUp var(--dur-slow) var(--ease) both;
}
.hero-showcase__content p {
max-width: 600px;
color: rgba(255,255,255,0.86);
font-size: 16.5px;
margin-bottom: 26px;
animation: fadeInUp var(--dur-slow) var(--ease) 0.1s both;
}
.hero-showcase__search {
display: flex;
gap: 10px;
width: 100%;
max-width: 560px;
margin-bottom: 18px;
animation: fadeInUp var(--dur-slow) var(--ease) 0.2s both;
}
.hero-showcase__search input {
flex: 1;
padding: 14px 18px;
border-radius: var(--radius-lg);
border: 1px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.12);
color: #fff;
font-size: 15px;
outline: none;
}
.hero-showcase__search input::placeholder { color: rgba(255,255,255,0.65); }
.hero-showcase__search input:focus { border-color: var(--gold); background: rgba(255,255,255,0.18); }
.hero-showcase__search button {
flex: none;
padding: 14px 22px;
border: none;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #d4af37, #f4d875);
color: #1a1505;
font-weight: 700;
cursor: pointer;
}
.hero-showcase__links {
display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
animation: fadeInUp var(--dur-slow) var(--ease) 0.3s both;
}
.hero-showcase__links a {
color: var(--gold-light);
font-weight: 700;
font-size: 14.5px;
text-decoration: none;
}
.hero-showcase__links a:hover { text-decoration: underline; }
@media (max-width: 720px) {
.hero-showcase { height: 480px; }
.hero-showcase__content h1 { font-size: 28px; }
.hero-showcase__search { flex-direction: column; }
}
.search-toggle {
display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
animation: fadeInUp var(--dur-slow) var(--ease) 0.18s both;
}
.search-toggle-btn {
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.32);
color: #fff;
padding: 8px 16px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}
.search-toggle-btn.is-active {
background: #fff;
color: var(--charcoal, #1a1a1a);
}
.search-card {
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 22px;
max-width: 920px;
animation: scaleIn var(--dur-slow) var(--ease) 0.24s both;
transition: box-shadow var(--dur) var(--ease-soft);
}
.search-card:hover { box-shadow: 0 26px 56px rgba(15,30,22,0.22); }
.search-grid {
display: grid;
grid-template-columns: 2fr 1.3fr 1.3fr auto;
gap: 12px;
}
@media (max-width: 860px) {
.search-grid { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
Live search "highlights" dropdown (regions + matching listings), used by
both the homepage hero search and the Browse Properties search bar.
-------------------------------------------------------------------------- */
.search-field-wrap { position: relative; }
.search-suggest-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 60;
background: #fff;
border-radius: var(--radius-md, 10px);
box-shadow: 0 18px 40px rgba(15,30,22,0.18);
border: 1px solid rgba(15,30,22,0.08);
max-height: 380px;
overflow-y: auto;
padding: 6px;
}
.search-suggest-group-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted, #6b7a70);
padding: 8px 10px 4px;
}
.search-suggest-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.search-suggest-item:hover,
.search-suggest-item.is-active { background: rgba(15,61,46,0.07); }
.search-suggest-icon { font-size: 16px; }
.search-suggest-thumb {
width: 40px;
height: 40px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
background: #eef1ee;
}
.search-suggest-thumb--placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.search-suggest-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-suggest-item__title { font-weight: 600; font-size: 14px; }
.search-suggest-item__meta { font-size: 12px; color: var(--text-muted, #6b7a70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggest-verified { color: var(--emerald-800, #0f3d2e); font-size: 12px; font-weight: 600; }
.search-suggest-empty { padding: 12px 10px; font-size: 13px; color: var(--text-muted, #6b7a70); }
/* ==========================================================================
SECTIONS
========================================================================== */
.section { padding: 64px 0; }
.section-alt { background: var(--off-white); }
.section-dark {
background: linear-gradient(160deg, var(--charcoal) 0%, var(--forest) 100%);
color: rgba(255,255,255,0.88);
overflow: hidden;
}
.section-dark .section-head h2 { color: #fff; }
.section-dark .section-head p { color: rgba(255,255,255,0.65); }
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 10px;
}
.section-head h2 { font-size: 28px; margin-bottom: 6px; position: relative; }
.section-head p { color: var(--text-muted); margin: 0; }
.eyebrow {
color: var(--emerald-700);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.eyebrow-gold { color: var(--gold-light); }
/* underline draw-in when the section header enters view */
.section-head.reveal.in-view h2::after,
.reveal.in-view .section-head h2::after {
content: "";
display: block;
height: 3px;
background: var(--gold);
margin-top: 8px;
animation: drawLine 0.6s var(--ease) 0.15s both;
}
/* ==========================================================================
PROPERTY GRID & CARDS
========================================================================== */
.property-grid {
display: grid;
/* auto-fit (not auto-fill) collapses unused tracks, and a fixed upper
bound (not 1fr) stops a sparse row from stretching its one or two
cards to fill the whole width — a short row just ends after the
real cards instead of reserving phantom empty columns. */
/* Now auto-fill + 1fr: full rows stretch edge-to-edge so the grid fits
the whole page on desktop, while a sparse row keeps normal-width
cards (auto-fill keeps the empty tracks, so nothing balloons). */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
.property-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
display: flex;
flex-direction: column;
height: 100%;
}
.property-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
border-color: transparent;
}
.property-card .thumb {
position: relative;
aspect-ratio: 4 / 3;
background: var(--off-white) center/cover no-repeat;
display: flex; align-items: center; justify-content: center;
color: var(--text-muted);
overflow: hidden;
}
.property-card .thumb::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.28) 100%);
opacity: 0;
transition: opacity var(--dur) var(--ease-soft);
}
.property-card:hover .thumb::after { opacity: 1; }
.property-card .thumb-placeholder { font-size: 13px; color: var(--text-muted); }
.property-card:hover .thumb { transform: scale(1.045); }
.property-card .thumb { transition: transform var(--dur-slow) var(--ease-soft); }
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 100px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
animation: badgePop 0.4s var(--ease) both;
}
.badge-verified { background: var(--success-bg); color: var(--success); }
.badge-pending { background: var(--warn-bg); color: var(--warn); }
.badge-unverified { background: #eee; color: var(--text-muted); }
.badge-rejected { background: var(--danger-bg); color: var(--danger); }
.badge-gold { background: var(--gold); color: var(--charcoal); }
.thumb .badge { position: absolute; top: 12px; left: 12px; right: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.15); z-index: 1; }
/* .badge-type carries both .badge and .badge-type — it must explicitly
cancel .badge's `left: 12px` (an unset property still wins the cascade,
it doesn't reset itself), otherwise both the verified/unverified pill
and the type pill anchor to the same top-left corner and overlap. */
.thumb .badge-type { position: absolute; top: 12px; left: auto; right: 12px; background: rgba(31,35,33,0.75); color: #fff; z-index: 1; }
.thumb .status-ribbon { position: absolute; left: 12px; right: auto; bottom: 12px; top: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.2); z-index: 1; }
.property-card .body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.property-card .price { font-size: 20px; font-weight: 700; color: var(--emerald-800); margin-bottom: 4px; }
.property-card .price .unit { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.property-card h3 { font-size: 17px; margin-bottom: 6px; transition: color var(--dur-fast) var(--ease-soft); }
.property-card:hover h3 { color: var(--emerald-700); }
.property-card .loc { color: var(--text-muted); font-size: 13.5px; margin-bottom: 10px; display: flex; gap: 6px; align-items: center; }
.property-card .meta-row {
margin-top: auto;
display: flex;
gap: 14px;
font-size: 12.5px;
color: var(--text-muted);
border-top: 1px solid var(--line);
padding-top: 12px;
}
/* ==========================================================================
FORMS
========================================================================== */
.form-input, select.form-input, textarea.form-input {
width: 100%;
padding: 11px 13px;
border: 1.5px solid var(--line);
border-radius: var(--radius);
font-size: 14.5px;
font-family: inherit;
color: var(--text-main);
background: #fff;
transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.form-input:focus {
outline: none;
border-color: var(--emerald-600);
box-shadow: 0 0 0 4px rgba(26, 138, 99, 0.12);
}
.form-file { width: 100%; padding: 10px 0; font-size: 14px; }
.form-checkbox {
width: 17px; height: 17px;
accent-color: var(--emerald-700);
margin-right: 8px;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-soft);
}
.form-checkbox:hover { transform: scale(1.1); }
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--charcoal); }
.form-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.form-error { color: var(--danger); font-size: 12.5px; margin-top: 4px; animation: fadeInDown var(--dur-fast) var(--ease-soft) both; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; cursor: pointer; }
.checkbox-row label { font-size: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
/* ==========================================================================
SIMPLE SEARCH FORM (property list) — primary row + native "More filters"
========================================================================== */
.search-form { padding: 20px 24px; }
.search-form__primary {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 14px;
}
.search-form__primary .form-group { min-width: 160px; }
.search-form__primary .form-group--grow { flex: 1 1 260px; }
.search-form__primary .btn { height: 44px; white-space: nowrap; }
.more-filters {
margin-top: 16px;
border-top: 1px solid var(--line);
padding-top: 4px;
}
.more-filters summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 0 4px;
font-size: 13.5px;
font-weight: 600;
color: var(--emerald-700);
user-select: none;
transition: color var(--dur-fast) var(--ease-soft);
}
.more-filters summary::-webkit-details-marker { display: none; }
.more-filters summary::before {
content: "";
width: 7px; height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform var(--dur-fast) var(--ease-soft);
}
.more-filters[open] summary::before { transform: rotate(45deg); }
.more-filters summary:hover { color: var(--gold-600, var(--emerald-800)); }
.more-filters__body {
padding-top: 14px;
animation: fadeInDown var(--dur) var(--ease-soft) both;
}
.more-filters__actions { display: flex; justify-content: flex-end; margin-top: 4px; }
@media (max-width: 640px) {
.search-form__primary { flex-direction: column; align-items: stretch; }
.search-form__primary .form-group { min-width: 0; }
.search-form__primary .form-group--grow { flex: 1 1 auto; }
.search-form__primary .btn { width: 100%; }
}
.card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
transition: box-shadow var(--dur) var(--ease-soft);
}
.card-narrow { max-width: 480px; margin: 0 auto; }
/* ==========================================================================
STEP GUIDE (listing wizard — plain-English helper per step)
========================================================================== */
.step-guide {
text-align: left;
background: var(--off-white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 20px 26px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.step-guide::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--gold), var(--emerald-500));
}
.step-guide-eyebrow {
display: flex;
align-items: center;
gap: 8px;
color: var(--gold-dark);
font-family: "Segoe UI", system-ui, sans-serif;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 6px;
}
.step-guide-eyebrow .step-guide-icon { font-size: 14px; }
.step-guide-text h4 {
margin: 0 0 8px;
font-family: "Georgia", "Iowan Old Style", serif;
font-weight: 700;
font-size: 19px;
line-height: 1.3;
color: var(--emerald-900);
text-align: left;
}
.step-guide-text p {
margin: 0;
max-width: 62ch;
font-size: 15px;
color: var(--charcoal);
line-height: 1.7;
text-align: left;
}
@media (max-width: 560px) {
.step-guide { padding: 16px 18px; }
.step-guide-text h4 { font-size: 17px; }
.step-guide-text p { font-size: 14px; }
}
/* ==========================================================================
ALERTS / MESSAGES
========================================================================== */
.alert {
padding: 13px 16px;
border-radius: var(--radius);
font-size: 14px;
margin-bottom: 16px;
border: 1px solid transparent;
animation: fadeInDown var(--dur) var(--ease) both;
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: #bfe3d1; }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: #edc7c1; }
.alert-info { background: #eaf1fb; color: #2b5490; border-color: #cfe0f5; }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: #edd9a8; }
/* ==========================================================================
FOOTER
========================================================================== */
.footer {
background: linear-gradient(180deg, var(--charcoal) 0%, #14120d 100%);
color: rgba(255,255,255,0.75);
padding: 56px 0 24px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.footer::before {
content: "";
position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--gold-dark), var(--gold-light) 35%, var(--emerald-500) 75%, var(--emerald-700));
}
.footer h4 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.footer a { color: rgba(255,255,255,0.68); font-size: 13.5px; }
.footer a:hover { color: var(--gold-light); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 18px; margin-bottom: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* footer "slide" panels — same floating-card language as the rest of the site,
tuned for the dark footer background */
.footer-slide {
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.09);
border-radius: var(--radius-lg);
padding: 22px 20px;
position: relative;
overflow: hidden;
transition: transform var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
.footer-slide::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--gold-light), var(--emerald-500));
opacity: 0.85;
}
.footer-slide:hover {
transform: translateY(-4px);
border-color: rgba(201,162,39,0.4);
background: rgba(255,255,255,0.055);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 20px;
font-size: 12.5px;
color: rgba(255,255,255,0.5);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.footer-credit {
font-size: 12.5px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.2px;
}
.footer-credit strong {
background: linear-gradient(100deg, var(--gold-light), var(--emerald-500));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
/* ==========================================================================
HOW IT WORKS / STEPS
========================================================================== */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.step-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 24px;
transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: transparent;
}
.step-num {
width: 34px; height: 34px; border-radius: 50%;
background: var(--emerald-700); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px; margin-bottom: 14px;
transition: transform var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
position: relative; z-index: 1;
}
.step-card:hover .step-num { transform: rotate(-8deg) scale(1.08); background: var(--gold); color: var(--charcoal); }
/* "Survey path" connector — a dashed line strung between the step
markers on desktop, like waypoints on a boundary walk. */
.steps-path { position: relative; }
@media (min-width: 861px) {
.steps-path::before {
content: "";
position: absolute; top: 41px; left: 12%; right: 12%; height: 0;
border-top: 2px dashed var(--line);
z-index: 0;
}
}
/* Dark variant used on the "Why Ardhi Yangu" band */
.step-card-dark {
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(2px);
}
.step-card-dark h4 { color: #fff; }
.step-card-dark p { color: rgba(255,255,255,0.68); margin: 0; }
.step-card-dark:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(0,0,0,0.35); }
/* "How It Works" — black-gold-to-green slide treatment (home page only) */
.hiw-gold.steps-path::before { border-top-color: rgba(201,162,39,0.35); }
.hiw-gold .step-card {
background: linear-gradient(160deg, #14120d 0%, #1f2321 45%, #123b2c 100%);
border: 1px solid rgba(201,162,39,0.22);
position: relative;
overflow: hidden;
padding: 26px 22px;
}
.hiw-gold .step-card::before {
content: "";
position: absolute; left: 0; top: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold-dark), var(--gold-light) 45%, var(--emerald-500) 85%);
}
.hiw-gold .step-card:hover {
border-color: var(--emerald-500);
box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.hiw-gold .step-num {
width: 38px; height: 38px; border-radius: 10px;
background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
color: #1f1a0d;
font-weight: 800;
box-shadow: var(--shadow);
}
.hiw-gold .step-card:hover .step-num {
transform: none;
background: linear-gradient(135deg, var(--emerald-500), var(--gold-light));
color: #0b2a1f;
}
.hiw-gold .step-card h4 { color: #fff; margin-bottom: 8px; }
.hiw-gold .step-card p { color: rgba(255,255,255,0.66); margin: 0; }
/* ==========================================================================
HOW IT WORKS — track tabs (Land / Rentals / Materials / Cargo)
Four tracks now instead of two, so this wraps on tablet and scrolls
horizontally on narrow phones instead of squeezing every pill onto one
cramped row.
========================================================================== */
.hiw-tabs {
display: flex;
gap: 10px;
margin: 4px 0 32px;
flex-wrap: wrap;
}
.hiw-tab-btn {
background: #fff;
border: 1.5px solid var(--line);
color: var(--charcoal, #1a1a1a);
padding: 10px 18px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
box-shadow: var(--shadow);
transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}
.hiw-tab-btn:hover { transform: translateY(-2px); border-color: var(--gold); }
.hiw-tab-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hiw-tab-btn.is-active {
background: linear-gradient(120deg, var(--emerald-700), var(--emerald-500));
color: #fff;
border-color: transparent;
box-shadow: 0 6px 18px rgba(16, 109, 73, 0.28);
}
.hiw-panel[hidden] { display: none; }
.hiw-panel { animation: hiw-panel-in 0.3s ease; }
@keyframes hiw-panel-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Phones: let the tab row scroll sideways instead of wrapping to 2+ lines,
which keeps the page height predictable once there are 4 tracks. */
@media (max-width: 560px) {
.hiw-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
margin-bottom: 24px;
scrollbar-width: thin;
}
.hiw-tab-btn { flex: none; font-size: 12.5px; padding: 9px 14px; }
}
/* ==========================================================================
JOURNEY TIMELINE — "How It Works" page: an animated, vertical
walk-through of each flow (buyer / seller / renter / landlord). Every
step alternates its slide-in direction for a livelier "slideshow" feel,
and the connecting line draws itself in as the group scrolls into view.
Pure CSS: the draw-in and stagger animations ride on the existing
.reveal-group IntersectionObserver (main.js adds .in-view), and the
track-tab switch (also in main.js) removes + re-adds .in-view so the
animation replays every time a visitor changes track.
========================================================================== */
.journey-intro { display: flex; align-items: center; gap: 12px; margin: 6px 0 24px; flex-wrap: wrap; }
.journey-title { margin: 0; }
.journey-count {
font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
color: #fff;
background: linear-gradient(120deg, var(--emerald-700), var(--emerald-500));
padding: 4px 13px;
border-radius: 100px;
}
/* Always a vertical timeline — a centred spine with steps stacked top to
bottom, alternating left/right on wide screens like a proper timeline. */
.journey { position: relative; display: flex; flex-direction: column; gap: 28px; padding: 6px 0 6px 4px; }
/* the connecting "path" — draws itself in once the group scrolls into view */
.journey::before {
content: "";
position: absolute; left: 27px; top: 4px; bottom: 4px; width: 3px;
background: linear-gradient(180deg, var(--gold-light), var(--emerald-500) 55%, var(--emerald-700));
border-radius: 3px;
transform: scaleY(0);
transform-origin: top;
transition: transform 1.3s var(--ease-soft);
z-index: 0;
}
.journey.in-view::before { transform: scaleY(1); }
.journey > .journey-step {
position: relative; z-index: 1;
display: flex; align-items: flex-start; gap: 18px;
opacity: 0;
transform: translateX(-24px);
transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
/* alternate the slide-in direction, step by step, for a livelier reveal */
.journey > .journey-step:nth-child(even) { transform: translateX(24px); }
.journey.in-view > .journey-step { opacity: 1; transform: translateX(0); }
.journey.in-view > .journey-step:nth-child(1) { transition-delay: 0.08s; }
.journey.in-view > .journey-step:nth-child(2) { transition-delay: 0.20s; }
.journey.in-view > .journey-step:nth-child(3) { transition-delay: 0.32s; }
.journey.in-view > .journey-step:nth-child(4) { transition-delay: 0.44s; }
.journey.in-view > .journey-step:nth-child(5) { transition-delay: 0.56s; }
.journey.in-view > .journey-step:nth-child(6) { transition-delay: 0.68s; }
.journey.in-view > .journey-step:nth-child(7) { transition-delay: 0.80s; }
.journey-marker {
position: relative; flex: none;
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, var(--emerald-700), var(--emerald-500));
display: flex; align-items: center; justify-content: center;
font-size: 23px;
box-shadow: 0 0 0 6px var(--warm-white), var(--shadow);
transform: scale(0.5);
opacity: 0;
transition: transform 0.5s var(--ease-soft), opacity 0.5s var(--ease-soft);
transition-delay: 0.18s;
}
.journey.in-view > .journey-step .journey-marker { transform: scale(1); opacity: 1; }
.journey-icon { line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); }
.journey-badge {
position: absolute; bottom: -3px; right: -3px;
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
color: #1f1a0d; font-size: 11px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 2px var(--warm-white);
animation: badgePop 0.5s var(--ease-soft) 0.45s both;
}
.journey.in-view > .journey-step .journey-badge { animation-play-state: running; }
.journey-content {
flex: 1;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 15px 20px;
box-shadow: var(--shadow);
transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.journey-content h4 { margin: 0 0 4px; font-size: 15px; }
.journey-content p { margin: 0; font-size: 13px; color: var(--text-muted, #6b6b6b); line-height: 1.5; }
.journey-step:hover .journey-content { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.journey-step:hover .journey-marker { animation: journeyPulse 1.1s var(--ease-soft); }
@keyframes journeyPulse {
0% { box-shadow: 0 0 0 6px var(--warm-white), 0 0 0 6px rgba(201,162,39,0), var(--shadow); }
50% { box-shadow: 0 0 0 6px var(--warm-white), 0 0 0 12px rgba(201,162,39,0.28), var(--shadow); }
100% { box-shadow: 0 0 0 6px var(--warm-white), 0 0 0 6px rgba(201,162,39,0), var(--shadow); }
}
/* Wider screens — keep the timeline vertical, but give it room to breathe
and centre the spine so steps can alternate either side of it. */
@media (min-width: 900px) {
.journey { max-width: 760px; margin: 0 auto; padding-left: 0; }
.journey::before { left: 50%; margin-left: -1.5px; }
.journey > .journey-step { width: calc(50% - 30px); }
/* left column: content on the outside, marker on the inside edge next to the spine */
.journey > .journey-step:nth-child(odd) { margin-right: auto; flex-direction: row-reverse; }
/* right column: marker on the inside edge next to the spine, content on the outside */
.journey > .journey-step:nth-child(even) { margin-left: auto; flex-direction: row; }
}
/* ==========================================================================
DASHBOARD LAYOUT
========================================================================== */
.dash-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .dash-layout { grid-template-columns: 1fr; } }
.dash-nav {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 10px;
position: sticky;
top: 88px;
animation: slideInLeft var(--dur-slow) var(--ease) both;
}
.dash-nav a {
display: block; padding: 10px 14px; border-radius: var(--radius);
color: var(--text-main); font-size: 14px; font-weight: 500; margin-bottom: 2px;
transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), padding-left var(--dur-fast) var(--ease-soft);
}
.dash-nav a:hover { background: var(--off-white); padding-left: 18px; }
.dash-nav a.active { background: var(--emerald-700); color: #fff; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-box {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 18px 20px;
animation: fadeInUp var(--dur) var(--ease) both;
transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.stat-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-grid .stat-box:nth-child(1) { animation-delay: 0.02s; }
.stat-grid .stat-box:nth-child(2) { animation-delay: 0.08s; }
.stat-grid .stat-box:nth-child(3) { animation-delay: 0.14s; }
.stat-grid .stat-box:nth-child(4) { animation-delay: 0.20s; }
.stat-grid .stat-box:nth-child(5) { animation-delay: 0.26s; }
.stat-grid .stat-box:nth-child(6) { animation-delay: 0.32s; }
.stat-box .num { font-size: 26px; font-weight: 700; color: var(--emerald-800); }
.stat-box .label { font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
table.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
table.data-table th, table.data-table td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--line); }
table.data-table th { background: var(--off-white); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tbody tr { transition: background var(--dur-fast) var(--ease-soft); }
table.data-table tbody tr:hover { background: var(--off-white); }
/* ==========================================================================
PROPERTY DETAIL
========================================================================== */
.detail-header { margin-bottom: 22px; animation: fadeInUp var(--dur-slow) var(--ease) both; }
.detail-header .badges { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.detail-header h1 { font-size: 30px; margin-bottom: 8px; }
.detail-header .loc-line { color: var(--text-muted); font-size: 15px; display: flex; gap: 6px; align-items: center; }
.detail-price-block { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.detail-price-block .price { font-size: 32px; font-weight: 700; color: var(--emerald-800); }
.gallery-main {
aspect-ratio: 4/3;
background: var(--off-white);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 10px;
animation: scaleIn var(--dur-slow) var(--ease) 0.1s both;
box-shadow: var(--shadow-md);
position: relative;
cursor: zoom-in;
}
.gallery-main img, .gallery-main video { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-soft); }
.gallery-main:hover img { transform: scale(1.035); }
.gallery-zoom-hint {
position: absolute; right: 12px; bottom: 12px;
background: rgba(31,35,33,0.72); color: #fff;
font-size: 12px; padding: 6px 11px; border-radius: 100px;
opacity: 0; transform: translateY(6px);
transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
pointer-events: none;
}
.gallery-main:hover .gallery-zoom-hint { opacity: 1; transform: translateY(0); }
.gallery-count {
position: absolute; left: 12px; bottom: 12px;
background: rgba(31,35,33,0.72); color: #fff;
font-size: 12px; padding: 5px 10px; border-radius: 100px;
}
.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumbs img, .gallery-thumbs div[data-gallery-thumb] {
width: 84px; height: 64px; object-fit: cover; border-radius: 6px; cursor: pointer;
border: 2px solid transparent; flex: none;
transition: border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
opacity: 0.75;
}
.gallery-thumbs img:hover, .gallery-thumbs div[data-gallery-thumb]:hover { transform: translateY(-3px); opacity: 1; }
.gallery-thumbs img.active { border-color: var(--gold); opacity: 1; }
/* Left media column / right details column */
.detail-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: start; margin-top: 8px; }
.detail-media { position: sticky; top: 88px; }
@media (max-width: 900px) {
.detail-layout { grid-template-columns: 1fr; }
.detail-media { position: static; }
}
.detail-actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 28px; }
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 36px; margin-top: 34px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.info-block { margin-bottom: 32px; }
.info-block h3 {
font-size: 18px; margin-bottom: 14px; padding-bottom: 10px;
border-bottom: 2px solid var(--line); position: relative;
}
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.kv-grid .kv-label { font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.kv-grid .kv-value { font-size: 14.5px; font-weight: 500; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
background: var(--success-bg); color: var(--success); padding: 5px 12px;
border-radius: 100px; font-size: 12.5px; font-weight: 600;
transition: transform var(--dur-fast) var(--ease-soft);
animation: badgePop 0.35s var(--ease) both;
}
.tag:hover { transform: translateY(-2px); }
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-list li {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px;
transition: padding-left var(--dur-fast) var(--ease-soft);
}
.doc-list li:hover { padding-left: 6px; }
.doc-list li:last-child { border-bottom: none; }
.sidebar-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 22px; margin-bottom: 20px;
animation: slideInRight var(--dur-slow) var(--ease) both;
}
.seller-card { background: var(--off-white); border-radius: var(--radius-lg); padding: 18px 20px; }
.seller-card-top { display: flex; gap: 14px; align-items: center; }
.seller-avatar {
width: 52px; height: 52px; border-radius: 50%; flex: none;
background: linear-gradient(135deg, var(--emerald-700), var(--emerald-500));
color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 18px;
}
/* ==========================================================================
LIGHTBOX — fullscreen image preview (vanilla, no library)
========================================================================== */
.lightbox {
position: fixed; inset: 0; z-index: 200;
background: rgba(15,17,16,0.94);
display: flex; align-items: center; justify-content: center;
animation: fadeIn var(--dur-fast) var(--ease-soft) both;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
max-width: 88vw; max-height: 84vh;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 10px 50px rgba(0,0,0,0.5);
animation: scaleIn var(--dur-fast) var(--ease) both;
}
.lightbox-close, .lightbox-nav {
position: absolute;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.25);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-close {
top: 20px; right: 24px; width: 42px; height: 42px;
border-radius: 50%; font-size: 18px;
}
.lightbox-nav {
top: 50%; transform: translateY(-50%);
width: 48px; height: 48px; border-radius: 50%; font-size: 26px;
}
.lightbox-nav:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter {
position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
color: #fff; font-size: 13px; background: rgba(255,255,255,0.1);
padding: 5px 14px; border-radius: 100px;
}
@media (max-width: 640px) {
.lightbox-nav { width: 40px; height: 40px; font-size: 22px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
}
.disclaimer-box {
background: var(--warn-bg);
border: 1px solid #edd9a8;
border-radius: var(--radius);
padding: 14px 16px;
font-size: 13px;
color: #6b4d0f;
margin-top: 14px;
}
/* ==========================================================================
EMPTY STATES
========================================================================== */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); animation: fadeIn var(--dur-slow) var(--ease) both; }
.empty-state h3 { color: var(--charcoal); margin-bottom: 8px; }
.empty-state::before {
content: "🗺";
display: block;
font-size: 40px;
margin-bottom: 14px;
animation: floatSlow 3.4s var(--ease-soft) infinite;
}
/* ==========================================================================
CHAT
========================================================================== */
.chat-layout {
display: grid; grid-template-columns: 320px 1fr; gap: 0;
border: 1px solid var(--line); border-radius: var(--radius-lg);
overflow: hidden; min-height: 560px; background: #fff;
animation: fadeIn var(--dur-slow) var(--ease) both;
}
@media (max-width: 800px) { .chat-layout { grid-template-columns: 1fr; } }
.chat-list { border-right: 1px solid var(--line); overflow-y: auto; max-height: 640px; }
.chat-list-item {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--line);
transition: background var(--dur-fast) var(--ease-soft), padding-left var(--dur-fast) var(--ease-soft);
}
.chat-list-item:hover { background: var(--off-white); padding-left: 22px; }
.chat-list-item.unread { background: var(--success-bg); }
.chat-list-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.chat-list-item-body { min-width: 0; flex: 1; }
.chat-list-item .name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.chat-list-item .prop { font-size: 12.5px; color: var(--text-muted); margin: 2px 0; }
.chat-list-item .snippet { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread { display: flex; flex-direction: column; height: 640px; }
.chat-thread-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.chat-bubble {
max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: 14px;
animation: fadeInUp var(--dur) var(--ease) both;
}
.chat-bubble.mine { align-self: flex-end; background: var(--emerald-700); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.theirs { align-self: flex-start; background: var(--off-white); color: var(--text-main); border-bottom-left-radius: 4px; }
.chat-bubble .time { display: block; font-size: 10.5px; opacity: 0.7; margin-top: 4px; }
/* Property-snapshot bubble — the first message of every thread, so a
seller with many listings instantly knows which plot is being asked
about, image included. */
.chat-property-card {
display: flex; gap: 12px; align-items: center;
padding: 10px; text-decoration: none; max-width: 320px;
border: 1px solid rgba(0,0,0,0.06);
}
.chat-property-card.theirs { background: #fff; box-shadow: var(--shadow); }
.chat-property-card.mine { background: rgba(255,255,255,0.12); }
.chat-property-card img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; }
.chat-property-card-noimg {
width: 64px; height: 64px; border-radius: 8px; flex: none;
background: var(--off-white); color: var(--text-muted);
display: flex; align-items: center; justify-content: center; font-size: 10.5px; text-align: center;
}
.chat-property-card-body { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; min-width: 0; }
.chat-property-card-body strong { font-size: 13.5px; }
.chat-property-card.mine .chat-property-card-body { color: #fff; }
.chat-property-card.mine .chat-property-card-body .text-muted { color: rgba(255,255,255,0.75); }
.chat-property-card:hover { transform: translateY(-2px); transition: transform var(--dur-fast) var(--ease-soft); }
/* Photo / video message bubbles */
.chat-media-bubble { padding: 8px; }
.chat-attachment-img, .chat-attachment-video {
max-width: 240px; max-height: 240px; border-radius: 10px; display: block; cursor: pointer;
}
.chat-media-caption { font-size: 13px; margin-top: 6px; padding: 0 2px; }
.chat-input-row { display: flex; align-items: center; gap: 10px; padding: 16px; border-top: 1px solid var(--line); }
.chat-input-row input[type="text"] { flex: 1; }
.chat-attach-btn {
position: relative;
flex: none; width: 42px; height: 42px; border-radius: 50%;
background: var(--off-white); border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
font-size: 18px; cursor: pointer;
transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.chat-attach-btn:hover { background: var(--success-bg); transform: scale(1.06); }
.chat-attach-btn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.chat-attach-filename {
font-size: 11.5px; color: var(--emerald-700); max-width: 90px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none;
}
/* Unread badges — nav pill + per-conversation count */
.nav-link-badge { display: inline-flex; align-items: center; gap: 6px; }
.chat-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px;
background: var(--gold); color: var(--charcoal); font-size: 11px; font-weight: 700;
animation: pulseGlow 1.8s ease infinite;
}
/* Author CSS always wins over the browser's built-in [hidden]{display:none}
rule, so without this, a badge marked hidden (zero unread) still shows —
that's why a "0" was appearing on the dropdown's Messages link. */
.chat-badge[hidden] { display: none; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); display: inline-block; margin-left: 6px; animation: pulseGlow 1.8s ease infinite; }
/* ==========================================================================
WIZARD STEPS
========================================================================== */
.wizard-steps { display: flex; gap: 6px; margin-bottom: 30px; flex-wrap: wrap; }
.wizard-step {
font-size: 12px; padding: 6px 12px; border-radius: 100px;
background: var(--off-white); color: var(--text-muted); font-weight: 600;
transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
animation: fadeInUp var(--dur) var(--ease) both;
}
.wizard-step.active { background: var(--emerald-700); color: #fff; transform: scale(1.06); }
.wizard-step.done { background: var(--success-bg); color: var(--success); }
/* ==========================================================================
PAGINATION
========================================================================== */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.pagination a, .pagination span {
padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--line);
font-size: 14px; color: var(--text-main);
transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.pagination a:hover { background: var(--off-white); border-color: var(--emerald-600); transform: translateY(-2px); }
.pagination .current { background: var(--emerald-700); color: #fff; border-color: var(--emerald-700); }
/* ==========================================================================
UTILITY
========================================================================== */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
/* Skeleton loading shimmer, available for future async content */
.skeleton {
background: linear-gradient(90deg, var(--off-white) 25%, #eae6d9 37%, var(--off-white) 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
border-radius: var(--radius);
}
/* Spinner, available for future async actions */
.spinner {
width: 18px; height: 18px;
border: 2.5px solid rgba(255,255,255,0.4);
border-top-color: #fff;
border-radius: 50%;
display: inline-block;
animation: spin 0.7s linear infinite;
}
@media (max-width: 860px) {
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.nav-menu {
display: none;
position: fixed;
top: calc(64px + env(safe-area-inset-top, 0px));
left: 0; right: 0;
/* Stop ABOVE the fixed bottom app bar (~64px) so the last items in the
menu — Logout especially — are never hidden underneath it. */
max-height: calc(100vh - 64px - 68px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
max-height: calc(100dvh - 64px - 68px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: var(--emerald-900);
flex-direction: column;
align-items: stretch;
padding: 18px 24px 24px;
border-bottom: 3px solid var(--gold);
gap: 4px;
box-shadow: 0 16px 32px rgba(0,0,0,0.28);
z-index: 150;
}
.nav-menu.nav-menu-open { display: flex; animation: fadeInDown var(--dur) var(--ease) both; }
.nav-links { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
/* .nav-links a's base color (#424245, a dark gray) is tuned for the
white Apple-style desktop navbar — on this dark .nav-menu background
it was nearly invisible. Override to a light color here so the open
mobile menu is actually readable. */
.nav-links a {
display: block;
padding: 12px 2px;
width: 100%;
font-size: 16px;
color: rgba(255,255,255,0.92);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-links a:hover { color: var(--gold-light, #f4d875); }
.nav-links a::after { background: var(--gold-light, #f4d875); }
.nav-cta {
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.14);
}
.nav-cta .btn { width: 100%; justify-content: center; padding: 13px 22px; }
.hero h1 { font-size: 32px; }
.footer-grid { grid-template-columns: 1fr; }
/* Inside the mobile hamburger overlay, let the account dropdown sit
inline as an indented list rather than a floating absolute box. Kept
as a solid white card (same as desktop) rather than a translucent
overlay — white text on the dark navbar background read far too
faint to use comfortably. */
.account-menu { width: 100%; }
.account-trigger { width: 100%; justify-content: center; }
.account-dropdown {
position: static;
width: 100%;
margin-top: 10px;
box-shadow: var(--shadow-md);
border: 1px solid var(--line);
background: #fff;
}
.account-dropdown a {
color: var(--text-main);
font-size: 15px;
padding: 12px 14px;
}
.account-dropdown a:hover { background: var(--off-white); color: var(--emerald-700); }
.account-dropdown hr { border-top-color: var(--line); }
}
@media (max-width: 480px) {
.navbar .container { height: 66px; }
.brand { font-size: 18px; gap: 8px; white-space: nowrap; }
.brand-mark-img { width: 40px; height: 40px; }
.nav-menu {
top: calc(66px + env(safe-area-inset-top, 0px));
max-height: calc(100vh - 66px - 68px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
max-height: calc(100dvh - 66px - 68px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
}
/* ==========================================================================
MOBILE APP BAR — fixed bottom tab bar, mobile-only, gives the site an
"app-like" primary navigation (Home / Browse / Sell / Messages / Account).
Hidden entirely on tablet/desktop; body gets bottom padding so it never
covers page content or the footer.
========================================================================== */
.app-bar { display: none; }
@media (max-width: 860px) {
body.has-app-bar { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.app-bar {
display: flex;
align-items: stretch;
justify-content: space-between;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 200;
background: var(--emerald-900);
border-top: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 -6px 20px rgba(0,0,0,0.22);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-bar-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 2px 7px;
color: rgba(255,255,255,0.6);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.2px;
min-height: 56px;
transition: color var(--dur-fast) var(--ease-soft);
}
.app-bar-item .app-bar-icon { font-size: 20px; line-height: 1; position: relative; }
.app-bar-item.is-active { color: var(--gold-light); }
.app-bar-item:active { color: #fff; }
.app-bar-item-cta .app-bar-icon {
background: var(--gold);
color: var(--charcoal);
width: 30px; height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: 0 3px 10px rgba(212,175,55,0.4);
}
.app-bar-item-cta.is-active .app-bar-icon,
.app-bar-item-cta .app-bar-icon { color: var(--charcoal); }
.chat-badge-dot {
position: absolute;
top: -2px; right: -4px;
width: 9px; height: 9px;
padding: 0;
border-radius: 50%;
background: var(--danger, #c0392b);
border: 1.5px solid var(--emerald-900);
font-size: 0;
}
}
@media (min-width: 861px) {
.app-bar { display: none !important; }
body.has-app-bar { padding-bottom: 0; }
}
/* ==========================================================================
FLOATING LAYERS — a reusable elevated-card language (used across the
profile page; available anywhere a "card floating above the page" look
is wanted).
========================================================================== */
.floating-tile {
position: relative;
background: #fff;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
padding: 26px;
box-shadow: 0 1px 2px rgba(15,30,22,0.04), 0 18px 40px -14px rgba(15,30,22,0.16);
transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.floating-tile:hover {
transform: translateY(-4px);
box-shadow: 0 1px 2px rgba(15,30,22,0.05), 0 26px 50px -14px rgba(15,30,22,0.22);
}
.floating-tile::before {
content: "";
position: absolute; top: 0; left: 22px; right: 22px; height: 3px;
border-radius: 0 0 4px 4px;
background: linear-gradient(90deg, var(--gold), var(--emerald-500));
opacity: 0.85;
}
/* ==========================================================================
PROFILE PAGE
========================================================================== */
.profile-page { display: flex; flex-direction: column; gap: 22px; }
.profile-cover {
position: relative;
height: 130px;
border-radius: var(--radius-lg);
background: linear-gradient(150deg, var(--emerald-900) 0%, var(--forest) 60%, var(--charcoal) 100%);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.profile-cover::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle at 85% -10%, rgba(224,191,79,0.35), transparent 55%);
}
.profile-edit-btn {
position: absolute; top: 16px; right: 16px; z-index: 2;
}
.profile-header-card {
display: flex; align-items: flex-end; gap: 20px;
margin-top: -64px;
padding-top: 16px;
}
.profile-avatar-lg {
flex: none;
width: 104px; height: 104px; border-radius: 50%;
background: linear-gradient(135deg, var(--emerald-700), var(--emerald-500));
border: 5px solid #fff;
box-shadow: 0 10px 24px rgba(15,30,22,0.25);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
color: #fff; font-size: 34px; font-weight: 700;
font-family: "Georgia", serif;
}
.profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.profile-header-body { padding-bottom: 6px; }
.profile-header-body h2 { margin-bottom: 8px; }
.profile-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.profile-since { font-size: 12.5px; margin: 0; }
.profile-back-link { display: inline-block; font-size: 13px; margin-bottom: 14px; }
/* "Slides" — a reusable, wide, table-styled card component: one entity
per card, stacked so each reads like its own slide rather than a
cramped grid of tiles. Used by the profile page (.profile-slide*) and
the property detail page (.info-slide*) — same visual language, two
names so each context reads clearly in its own markup. */
.profile-slides, .info-slides { display: flex; flex-direction: column; gap: 18px; }
.profile-slide, .info-slide { padding: 0; overflow: hidden; }
.profile-slide-head, .info-slide-head {
display: flex; align-items: center; gap: 12px;
padding: 18px 26px;
background: var(--off-white);
border-bottom: 1px solid var(--line);
}
.profile-slide-num, .info-slide-num {
flex: none;
width: 30px; height: 30px; border-radius: 8px;
background: linear-gradient(135deg, var(--emerald-700), var(--emerald-500));
color: #fff; font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
font-family: "Segoe UI", system-ui, sans-serif;
}
.profile-slide-head h4, .info-slide-head h3 { margin: 0; font-size: 15.5px; flex: 1; }
.profile-slide-note, .info-slide-note {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
background: var(--warn-bg); color: var(--warn);
padding: 4px 10px; border-radius: 100px; font-weight: 700;
}
.profile-table, .info-table { width: 100%; border-collapse: collapse; }
.profile-table tr, .info-table tr { transition: background var(--dur-fast) var(--ease-soft); }
.profile-table tr:nth-child(odd), .info-table tr:nth-child(odd) { background: rgba(20,108,79,0.03); }
.profile-table tr:hover, .info-table tr:hover { background: var(--success-bg); }
.profile-table th, .profile-table td, .info-table th, .info-table td {
text-align: left;
padding: 12px 26px;
font-size: 13.5px;
border-bottom: 1px solid var(--line);
}
.profile-table tr:last-child th, .profile-table tr:last-child td,
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: none; }
.profile-table th, .info-table th {
color: var(--text-muted); font-weight: 500;
width: 42%;
}
.profile-table td, .info-table td { font-weight: 600; }
.profile-slide-private .profile-slide-head,
.info-slide-private .info-slide-head { background: var(--warn-bg); }
.profile-slide-private .profile-table tr:nth-child(odd),
.info-slide-private .info-table tr:nth-child(odd) { background: rgba(176,122,18,0.05); }
.profile-slide-private .profile-table tr:hover,
.info-slide-private .info-table tr:hover { background: rgba(176,122,18,0.09); }
.profile-slide-bio, .info-slide-body { padding: 18px 26px; margin: 0; font-size: 14px; line-height: 1.6; }
.info-slide-body + .info-table, .info-table + .info-slide-body { border-top: 1px solid var(--line); }
.info-slide-body .tag-list { margin-top: 4px; }
.info-slide-body .doc-list { margin: 0; }
.info-slide-body .disclaimer-box { margin: 0; }
.info-slide-body h4 { font-size: 13.5px; margin-bottom: 10px; }
.info-slide-body form .form-group:last-of-type { margin-bottom: 14px; }
@media (max-width: 560px) {
.profile-header-card { flex-direction: column; align-items: flex-start; gap: 12px; }
.profile-avatar-lg { width: 84px; height: 84px; font-size: 28px; }
.profile-slide-head, .info-slide-head { padding: 14px 18px; flex-wrap: wrap; }
.profile-table th, .profile-table td, .info-table th, .info-table td { padding: 10px 18px; }
.profile-slide-note, .info-slide-note { order: 1; width: 100%; }
.info-slide-body { padding: 14px 18px; }
}
/* ===== Category tabs — For Sale / For Rent–Living / For Rent–Business ===== */
.category-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.category-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--line);
background: #fff;
color: var(--text-main);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.category-tab:hover { border-color: var(--emerald-700); color: var(--emerald-700); }
.category-tab.active { background: var(--emerald-700); color: #fff; border-color: var(--emerald-700); }
.category-tab__count {
font-size: 11.5px;
font-weight: 700;
background: rgba(0,0,0,0.08);
border-radius: 999px;
padding: 1px 7px;
}
.category-tab.active .category-tab__count { background: rgba(255,255,255,0.25); }
@media (max-width: 640px) {
/* Category tabs: 2 x 2 grid that fits the screen instead of running off it */
.category-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.category-tab { justify-content: space-between; white-space: normal; padding: 9px 10px; font-size: 12.5px; line-height: 1.25; min-width: 0; }
.category-tab__count { flex: none; }
}
/* ===== Material detail — buy box ===== */
.buybox { padding: 20px; margin: 18px 0 24px; border: 1px solid var(--line); }
.buybox-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.buybox-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #6b7280); margin-bottom: 4px; }
.buybox-price { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--emerald-800); }
.buybox-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.buybox-chip { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--off-white, #f6f4ee); border: 1px solid var(--line); color: var(--text-main); }
.buybox-chip--ok { background: #e8f5ee; border-color: #b9e0c9; color: #146c43; }
.buybox-chip--out { background: #fdecec; border-color: #f3c0c0; color: #b02a2a; }
.buybox-form { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px dashed var(--line); }
.buybox-qty { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; max-width: 200px; }
.buybox-qty input { flex: 1; min-width: 0; width: 100%; text-align: center; border: 0; font-size: 16px; font-weight: 700; padding: 10px 4px; background: transparent; -moz-appearance: textfield; }
.buybox-qty input::-webkit-outer-spin-button, .buybox-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buybox-qty-btn { width: 44px; border: 0; background: var(--off-white, #f6f4ee); font-size: 20px; font-weight: 700; cursor: pointer; color: var(--text-main); }
.buybox-qty-btn:hover { background: var(--emerald-700); color: #fff; }
.buybox-cta { padding: 14px 18px; font-size: 16px; font-weight: 700; margin-top: 4px; }
.buybox-cartlink { display: block; text-align: center; margin-top: 12px; font-size: 13.5px; font-weight: 600; }
@media (max-width: 640px) {
.buybox { padding: 16px; }
.buybox-price { font-size: 26px; }
.buybox-qty { max-width: none; }
}
/* ---- Seller dashboard: exact mobile fit, no sideways scrolling ---- */
@media (max-width: 860px) {
html, body { overflow-x: hidden; max-width: 100%; }
.dash-layout { display: block !important; }
.dash-layout > * { min-width: 0; max-width: 100%; }
.dash-nav { position: static; top: auto; animation: none; display: flex !important; flex-wrap: wrap !important; overflow: visible !important; gap: 8px; margin-bottom: 16px; }
.dash-nav a { flex: 1 1 calc(50% - 8px) !important; text-align: center; white-space: normal !important; padding: 10px 8px !important; }
.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.stat-box { min-width: 0; padding: 14px !important; }
.stat-box .num { font-size: 20px !important; overflow-wrap: anywhere; }
.dash-layout .data-table, .dash-layout .data-table tbody, .dash-layout .data-table tr, .dash-layout .data-table td { display: block; width: 100%; box-sizing: border-box; }
.dash-layout .data-table thead { display: none; }
.dash-layout .data-table tr { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; margin-bottom: 12px; }
.dash-layout .data-table td { display: flex; justify-content: space-between; gap: 12px; text-align: right; padding: 8px 0 !important; border: 0 !important; border-bottom: 1px dashed var(--line) !important; }
.dash-layout .data-table td:last-child { border-bottom: 0 !important; }
.dash-layout .data-table td::before { content: attr(data-label); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; text-align: left; flex: none; }
.dash-layout .data-table td:not([data-label])::before, .dash-layout .data-table td[data-label=""]::before { content: none; }
.table-scroll { overflow-x: visible !important; }
.dash-layout .card, .dash-layout form { max-width: 100%; }
}
/* Hero services row + footer partners */
.hero-services { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-services a { padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; background: #fff; color: #14532d; border: 1px solid #d8d2bd; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.hero-services a:hover { background: #14532d; color: #fff; border-color: #14532d; }
.footer-partners { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0 6px; margin-bottom: 18px; }
.footer-partners h4 { margin: 0 0 12px; }
.partner-row { display: flex; flex-wrap: wrap; gap: 10px; }
.partner-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.88) !important; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.partner-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #fff; }
.partner-chip:hover { background: rgba(244,216,117,.18); border-color: #f4d875; color: #f4d875 !important; }