/* Base */ :root{--bg:#0b0f1a;--panel:#0f1629;--card:#121a31;--text:#e6eaf2;--muted:#96a0b5;--primary:#5b8cff;--primary-600:#3d6df0;--ring:#2746a6;--ok:#1db954;--warn:#ffb020;--err:#ff5b5b;--bg-light:#0f1629;--bg-lighter:#121a31;--border-color:#1b2544; /* Accent hues for animated background */ --bg-accent-1:#1f2a6b; /* indigo */ --bg-accent-2:#0ea5e9; /* cyan */ --bg-accent-3:#312e81; /* deep indigo */ /* Tunables */ --bg-anim-duration: 28s; --bg-spot-1: 40%; --bg-spot-2: 30%; --bg-spot-3: 35%; --text-anim-duration: 12s; } /* Animation speed presets via data attributes */ body[data-bg-speed="slow"]{ --bg-anim-duration: 50s; --text-anim-duration: 18s; } body[data-bg-speed="normal"]{ --bg-anim-duration: 28s; --text-anim-duration: 12s; } body[data-bg-speed="fast"]{ --bg-anim-duration: 14s; --text-anim-duration: 8s; } /* Intensity presets control color mix percentages */ body[data-bg-intensity="low"]{ --bg-spot-1: 18%; --bg-spot-2: 14%; --bg-spot-3: 16%; } body[data-bg-intensity="medium"]{ --bg-spot-1: 30%; --bg-spot-2: 24%; --bg-spot-3: 26%; } body[data-bg-intensity="high"]{ --bg-spot-1: 45%; --bg-spot-2: 38%; --bg-spot-3: 42%; } /* Optional theme palettes (apply on or ) */ .theme-ocean{--bg:#07131a;--panel:#0b1a22;--card:#0d1f29;--primary:#08b5ff;--primary-600:#0698d6;--ring:#096c99} .theme-sunset{--bg:#140c1c;--panel:#1b0f2b;--card:#221336;--primary:#ff6ad5;--primary-600:#f948b5;--ring:#a61e7e} /* Light sky theme: apply on or via class="theme-sky" */ html.theme-sky, body.theme-sky{ color-scheme: light; } .theme-sky{ /* Light palette */ --bg:#f0f9ff; /* sky-50 */ --panel:#ffffff; --card:#ffffff; --text:#0f172a; /* slate-900 */ --muted:#475569; /* slate-600 */ --primary:#0ea5e9; /* sky-500 */ --primary-600:#0284c7; /* sky-600 */ --ring:#7dd3fc; /* sky-300 */ --border-color:#e2e8f0; /* slate-200 */ /* Background accents (very subtle) */ --bg-accent-1:#bae6fd; /* sky-200 */ --bg-accent-2:#e0f2fe; /* sky-100 */ --bg-accent-3:#7dd3fc; /* sky-300 */ /* Card palette (Sky Mint) */ --card-bg:#ebfff6; /* minty light */ --card-border:#a7f3d0; /* refined mint (emerald-200) */ --card-thumb-bg:#e8fff4; /* gallery thumb bg */ --card-title:#0f172a; /* title text */ --card-price:#0b7a66; /* teal/green price */ --card-badge-bg:#e6fdf3; /* badge chip */ --card-badge-border:#a7f3d0; /* align with card border */ --card-shadow-a: rgba(16,185,129,.14); /* emerald-ish */ --card-shadow-b: rgba(5,150,105,.10); } /* Light theme background gradient and animation tuning */ html.theme-sky, body.theme-sky{ background: radial-gradient(1200px 800px at 10% 10%, color-mix(in oklab, var(--bg-accent-1) var(--bg-spot-1,18%), transparent) 0%, transparent 60%), radial-gradient(1000px 700px at 90% 30%, color-mix(in oklab, var(--bg-accent-2) var(--bg-spot-2,14%), transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg), white 8%) 100%); background-attachment: fixed,fixed,fixed; background-size: 160% 160%, 140% 140%, 100% 100%; } /* Component overrides for light theme to replace hard-coded dark surfaces */ .theme-sky .site-header{ background:#F5F3FF; border-bottom:1px solid #D9D6FE; } .theme-sky .nav a{ color: #334155; } .theme-sky .nav a:hover{ color: var(--primary); } /* Make sure all buttons render solid text in light theme */ .theme-sky .btn, .theme-sky .btn *{ -webkit-text-fill-color: currentColor !important; color: inherit !important; } /* Header buttons (light theme) */ .theme-sky .nav a.btn, .theme-sky .nav button.btn{ background:#f8fafc; border:1px solid var(--border-color); color:#312e81 !important; /* dark lavender for better visibility */ border-radius:8px; } .theme-sky .nav a.btn:hover, .theme-sky .nav button.btn:hover{ background:#eef2ff; border-color:#c7d2fe; color:#1e1b4b !important; /* deeper indigo on hover */ } /* Post button: outlined lavender with readable text */ .theme-sky .nav a.btn.btn-primary, .theme-sky .nav button.btn.btn-primary{ background:#EEF2FF; border:1px solid #C7D2FE; color:#312e81 !important; } .theme-sky .nav a.btn.btn-primary:hover, .theme-sky .nav button.btn.btn-primary:hover{ background:#E0E7FF; border-color:#A5B4FC; color:#1e1b4b !important; } /* Desktop header (nav-desktop) parity */ .theme-sky .nav-desktop a.btn{ background:#f8fafc; border:1px solid var(--border-color); color:#312e81 !important; border-radius:8px; } .theme-sky .nav-desktop a.btn:hover{ background:#eef2ff; border-color:#c7d2fe; color:#1e1b4b !important; } .theme-sky .nav-desktop a.btn.btn-primary{ background:#EEF2FF; border:1px solid #C7D2FE; color:#312e81 !important; } .theme-sky .nav-desktop a.btn.btn-primary:hover{ background:#E0E7FF; border-color:#A5B4FC; color:#1e1b4b !important; } /* Sign In button on home (index.html) */ .theme-sky #authOpenBtn.btn{ background:#f8fafc; border:1px solid var(--border-color); color:#312e81 !important; } .theme-sky #authOpenBtn.btn:hover{ background:#eef2ff; border-color:#c7d2fe; color: var(--primary); } /* Mobile drawer button (ensure same palette) */ .theme-sky #mobileNav a.btn{ background:#f8fafc; border:1px solid var(--border-color); color:#312e81 !important; } .theme-sky #mobileNav a.btn:hover{ background:#eef2ff; border-color:#c7d2fe; color:#1e1b4b !important; } .theme-sky #mobileNav a.btn.btn-primary{ background:#EEF2FF; border:1px solid #C7D2FE; color:#312e81 !important; } .theme-sky #mobileNav a.btn.btn-primary:hover{ background:#E0E7FF; border-color:#A5B4FC; color:#1e1b4b !important; } .theme-sky .hero{ background: radial-gradient(800px 400px at 20% 0%, rgba(124,58,237,.08), transparent 60%), radial-gradient(800px 400px at 80% 100%, rgba(14,165,233,.10), transparent 60%), linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 100%); border-bottom:1px solid var(--border-color); min-height: 360px; padding: 3rem 0; } /* Home hero: animated decorative blobs and subtle motion */ .theme-sky .hero{ position: relative; overflow: hidden; } .theme-sky .hero::before, .theme-sky .hero::after{ content: ""; position:absolute; inset:auto; width:520px; height:520px; border-radius:999px; filter: blur(38px); opacity:.70; pointer-events:none; z-index:0; } .theme-sky .hero::before{ top:-140px; left:-140px; background: radial-gradient(closest-side, #E0E7FF, transparent 70%), conic-gradient(from 0deg at 50% 50%, rgba(14,165,233,.18), rgba(14,165,233,0) 40%, rgba(124,58,237,.16) 60%, rgba(124,58,237,0) 85%, rgba(14,165,233,.18)); animation: blob-float-a 18s ease-in-out infinite, hero-rotate 28s linear infinite; } .theme-sky .hero::after{ bottom:-160px; right:-160px; background: radial-gradient(closest-side, #BAE6FD, transparent 70%), /* drifting sparkles using tiny dots grid */ radial-gradient(circle at 10% 20%, rgba(255,255,255,.45) 1px, transparent 2px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.35) 1px, transparent 2px), radial-gradient(circle at 40% 80%, rgba(255,255,255,.30) 1px, transparent 2px); background-size: auto, 140px 140px, 180px 180px, 220px 220px; background-position: center, 0 0, 40px 20px, 80px 60px; animation: blob-float-b 22s ease-in-out infinite, dots-pan 30s linear infinite; } @keyframes blob-float-a{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(40px,30px) scale(1.08);} } @keyframes blob-float-b{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-36px,-28px) scale(1.06);} } @keyframes hero-rotate{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} } @keyframes dots-pan{ 0%{ background-position: center, 0 0, 40px 20px, 80px 60px;} 100%{ background-position: center, -140px -140px, -100px -120px, -60px -80px;} } /* Keep hero content above blobs */ .theme-sky .hero .hero-inner{ position:relative; z-index:1; } /* Subtle heading emphasis */ .theme-sky .hero .hero-inner h1{ letter-spacing:-0.01em; line-height:1.15; } /* Search button: gentle lift and glow on hover */ .theme-sky .hero .search-bar button{ box-shadow: 0 8px 20px rgba(14,165,233,.18); transform: translateY(0); transition: transform .18s ease, box-shadow .18s ease; } .theme-sky .hero .search-bar button:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(14,165,233,.22); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .theme-sky .hero::before, .theme-sky .hero::after{ animation: none; } } .theme-sky .search-bar{ background:#F5F3FF; border:1px solid #D9D6FE; } .theme-sky .search-bar input, .theme-sky .search-bar select{ background:#ffffff; border:1px solid #cbd5e1; color:var(--text); } .theme-sky .search-bar input:focus, .theme-sky .search-bar select:focus{ outline:none; border-color:#C7D2FE; box-shadow:0 0 0 2px rgba(199,210,254,.35); } .theme-sky .search-bar button{ background: var(--primary); border:1px solid var(--ring); color:#ffffff; border-radius:8px; } .theme-sky .search-bar button:hover{ background: var(--primary-600); } .theme-sky .card{ background:#E1F8FC; border:1px solid #D9D6FE; } .theme-sky .card:hover{ transform:translateY(-4px) scale(1.01); box-shadow: 0 8px 22px rgba(124,58,237,.16); border-color:#C7D2FE; } .theme-sky .card .thumb{ background:#E1F8FC; } .theme-sky .card h3{ color:#291C1C; } .theme-sky .price{ color: #291C1C; } .theme-sky .badge{ background:#F5F3FF; border-color:#D9D6FE; color:#312E81 } /* Property card status badges (light theme) */ .theme-sky .card .thumb .badge-status{ background:#ffffff; border:1px solid var(--border-color); color:#0f172a; } .theme-sky .card .thumb .badge-status.sale{ background:#DCFCE7; /* green-100 */ border-color:#efce86; /* green-200 */ color:#064d5f; /* green-900 */ } .theme-sky .card .thumb .badge-status.rent{ background:#DBEAFE; /* blue-100 */ border-color:#93C5FD; /* blue-300 */ color:#1E3A8A; /* indigo-900 */ } .theme-sky .prop-panel{ background: var(--panel); border:1px solid var(--border-color); } .theme-sky .form-grid{ background: var(--panel); border:1px solid var(--border-color); } .theme-sky .form-grid input, .theme-sky .form-grid select, .theme-sky .form-grid textarea{ background: #ffffff; border:1px solid #cbd5e1; color: var(--text); } .theme-sky .input-with-symbol{ background:#ffffff; border:1px solid var(--border-color); } .theme-sky .input-with-symbol input{ color: var(--text); } .theme-sky .input-with-unit{ background:#ffffff; border:1px solid var(--border-color); } .theme-sky .input-with-unit input{ background:transparent; color:var(--text); } .theme-sky .input-with-unit select{ background:#f8fafc; border-left:1px solid var(--border-color); color:var(--text); } .theme-sky .input-with-unit .unit{ background:#f8fafc; border-left:1px solid var(--border-color); color:#475569; } .theme-sky .image-preview{ background:#f8fafc; border-color:#cbd5e1; } .theme-sky .filters{ background:#F5F3FF; border:1px solid #D9D6FE; } .theme-sky .filters input, .theme-sky .filters select{ background:#ffffff; border:1px solid #cbd5e1; color:var(--text); } .theme-sky .filters input:focus, .theme-sky .filters select:focus{ outline:none; border-color:#C7D2FE; box-shadow:0 0 0 2px rgba(199,210,254,.35); } .theme-sky .filters button{ background: var(--primary); color:#fff; border:1px solid var(--ring); border-radius:8px; } .theme-sky .filters button:hover{ background: var(--primary-600); } /* Listings page: Save this search button */ .theme-sky #saveSearchBtn{ background:#EEF2FF; border:1px solid #C7D2FE; color:#312e81; border-radius:8px; } .theme-sky #saveSearchBtn:hover{ background:#E0E7FF; border-color:#A5B4FC; color:#1e1b4b; } .theme-sky .promo-bar{ backdrop-filter: blur(6px); background:#F5F3FF; border-bottom:1px solid #D9D6FE; } .theme-sky .promo-bar .promo-text{ color:#1e1b4b; } .theme-sky .promo-bar .promo-text strong{ color:#312E81; } .theme-sky .promo-bar .btn{ background:#f8fafc; border:1px solid var(--border-color); color:#312e81; border-radius:8px; } .theme-sky .promo-bar .btn:hover{ background:#eef2ff; border-color:#c7d2fe; color:#1e1b4b; } .theme-sky .promo-bar .btn.btn-primary{ background:#EEF2FF; border:1px solid #C7D2FE; color:#312e81; } .theme-sky .promo-bar .btn.btn-primary:hover{ background:#E0E7FF; border-color:#A5B4FC; color:#1e1b4b; } /* Cookie consent banner */ .theme-sky #cookie-consent{ background:#F5F3FF !important; color:#0f172a !important; border-top:1px solid #D9D6FE; } .theme-sky #cookie-consent a{ color:#312e81 !important; } .theme-sky #cookie-consent a:hover{ color:#1e1b4b !important; } .theme-sky #cookie-consent .btn{ background:#f8fafc; border:1px solid var(--border-color); color:#312e81; border-radius:8px; } .theme-sky #cookie-consent .btn:hover{ background:#eef2ff; border-color:#c7d2fe; color:#1e1b4b; } .theme-sky #cookie-consent .btn.btn-primary{ background:#EEF2FF; border:1px solid #C7D2FE; color:#312e81; } .theme-sky #cookie-consent .btn.btn-primary:hover{ background:#E0E7FF; border-color:#A5B4FC; color:#1e1b4b; } .theme-sky .news-item{ --news-bg:#ffffff; --news-border:#e2e8f0; --news-bg-hover:#f8fafc; --news-border-hover:#cbd5e1; --news-title:#0f172a; --news-meta:#64748b; } .theme-sky .mobile-drawer{ background: var(--bg); border-left:1px solid var(--border-color); } .theme-sky .mobile-nav a{ background: transparent; border-color: transparent; } .theme-sky .mobile-nav a:hover, .theme-sky .mobile-nav a.active{ background:#eef2ff; border-color:#c7d2fe; color: var(--primary); } /* Chips: Popular Locations, Categories, City/Locality (light theme) */ .theme-sky .chips{ gap:.6rem } .theme-sky .chip{ background:#ffffff; border:1px solid var(--border-color); color:#0f172a; border-radius:999px; padding:.4rem .8rem; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .theme-sky a.chip{ text-decoration:none; } .theme-sky .chip:hover{ background:#f0f9ff; border-color:#c7d2fe; color:var(--primary); box-shadow:0 2px 8px rgba(14,165,233,.12); } .theme-sky .chip:focus{ outline:none; box-shadow:0 0 0 3px rgba(14,165,233,.25); } /* Our Services (light theme) */ .theme-sky .service-card{ background:#F5F3FF; border:1px solid #D9D6FE; box-shadow: 0 2px 8px rgba(124,58,237,.08); } .theme-sky .service-card:hover{ background:#EEF2FF; border-color:#C7D2FE; box-shadow: 0 8px 22px rgba(124,58,237,.16); } .theme-sky .service-card h3{ color: #312e81; } .theme-sky .service-icon{ color: #7C3AED; } /* Loan/Mortgage calculator (footer) */ .theme-sky #loanCalc{ background: #ffffff; border:1px solid var(--border-color); border-radius:12px; padding:1rem; box-shadow: 0 2px 8px rgba(2,132,199,.06); } .theme-sky #loanCalc label{ color: var(--text); } .theme-sky #loanCalc input{ background:#ffffff; border:1px solid #cbd5e1; color: var(--text); border-radius:8px; padding:.6rem .8rem; } .theme-sky #loanCalc input:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(14,165,233,.20); } .theme-sky #loanCalc .loan-calc-actions{ display:flex; gap:.5rem; margin-top:.5rem; } .theme-sky #lcCalcBtn{ background: var(--primary); color:#fff; border:1px solid var(--ring); border-radius:8px; } .theme-sky #lcCalcBtn:hover{ background: var(--primary-600); } .theme-sky #lcClearBtn{ background:#f8fafc; color: var(--text); border:1px solid var(--border-color); border-radius:8px; } .theme-sky #lcClearBtn:hover{ background:#eef2ff; border-color:#c7d2fe; } .theme-sky #lcResult{ background:#f8fafc; border:1px solid var(--border-color); border-radius:10px; padding:.6rem .8rem; margin-top:.6rem; } .theme-sky #lcResult strong{ color:#0f172a; } /* Property details: fix remaining dark surfaces in light theme */ .theme-sky .gallery img{ background:#f1f5f9; border-color: var(--border-color); } .theme-sky .keyvals div{ background:#ffffff; border:1px solid var(--border-color); } .theme-sky .prop-panel #inquiry-form input, .theme-sky .prop-panel #inquiry-form textarea{ background:#ffffff; border:1px solid #cbd5e1; color: var(--text); } .theme-sky .prop-panel #inquiry-form input:focus, .theme-sky .prop-panel #inquiry-form textarea:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(14,165,233,.20); } /* Footer (light theme, Soft Lavender to match header/services) */ .theme-sky footer.site-footer{ background:#F5F3FF; border-top:1px solid #D9D6FE; } .theme-sky footer.site-footer .footer-grid{ gap: 1.2rem; } .theme-sky footer.site-footer .footer-col{ color:#0f172a; } .theme-sky footer.site-footer .footer-links a{ color:#312e81; } .theme-sky footer.site-footer .footer-links a:hover{ color:#1e1b4b; text-decoration: underline; } .theme-sky footer.site-footer .footer-legal{ border-top:1px solid #E0E7FF; color:#475569; } .theme-sky footer.site-footer .footer-legal p{ color:#475569; } .theme-sky footer.site-footer .footer-legal a{ color:#312e81; } .theme-sky footer.site-footer .footer-legal a:hover{ color:#1e1b4b; } /* Property details (palette): Soft Lavender for panel and gallery */ .theme-sky .prop-panel{ background:#F5F3FF; border:1px solid #D9D6FE; } .theme-sky .gallery{ background:#EEF2FF; border:1px solid #D9D6FE; border-radius:.8rem; padding:.5rem; } /* Login/Sign In page (.auth-page) light theme overrides */ .theme-sky body.auth-page .hero.hero-sm{ background: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 100%); border-bottom:1px solid #D9D6FE; } .theme-sky .auth-page .card{ background:#F5F3FF !important; border:1px solid #D9D6FE !important; } .theme-sky .auth-page .card-header{ background:#EEF2FF !important; border-bottom:1px solid #D9D6FE !important; } .theme-sky .auth-page .card-header h3, .theme-sky .auth-page .card-header strong{ color:#312E81; } .theme-sky .auth-page .card-body form label{ color: var(--text); } .theme-sky .auth-page .card-body form input, .theme-sky .auth-page .card-body form select, .theme-sky .auth-page .card-body form textarea{ background:#ffffff !important; border:1px solid #cbd5e1 !important; color: var(--text) !important; } .theme-sky .auth-page .card-body form input:focus, .theme-sky .auth-page .card-body form select:focus, .theme-sky .auth-page .card-body form textarea:focus{ outline:none !important; border-color:#C7D2FE !important; box-shadow:0 0 0 2px rgba(199,210,254,.35) !important; } /* Password toggle button */ .theme-sky .auth-page .pw-toggle{ background:#EEF2FF !important; border:1px solid #C7D2FE !important; color:#312e81 !important; -webkit-text-fill-color:#312e81 !important; text-shadow:none !important; } .theme-sky .auth-page .pw-toggle:hover{ background:#E0E7FF !important; border-color:#A5B4FC !important; color:#1e1b4b !important; -webkit-text-fill-color:#1e1b4b !important; } .theme-sky .auth-page .pw-toggle[aria-pressed="true"]{ background: var(--primary) !important; border-color: var(--ring) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } /* Form primary/secondary buttons */ .theme-sky .auth-page .btn{ border-radius:8px; } .theme-sky .auth-page .btn.btn-primary{ background: var(--primary); border:1px solid var(--ring); color:#ffffff; } .theme-sky .auth-page .btn.btn-primary:hover{ background: var(--primary-600); } .theme-sky .auth-page .btn.btn-secondary, .theme-sky .auth-page .btn:not(.btn-primary){ background:#EEF2FF; border:1px solid #C7D2FE; color:#312e81; } .theme-sky .auth-page .btn.btn-secondary:hover, .theme-sky .auth-page .btn:not(.btn-primary):hover{ background:#E0E7FF; border-color:#A5B4FC; color:#1e1b4b; } /* Post page (.post-page) light theme overrides */ .theme-sky .post-page .form-grid{ background:#F5F3FF; border:1px solid #D9D6FE; } .theme-sky .post-page .form-grid input, .theme-sky .post-page .form-grid select, .theme-sky .post-page .form-grid textarea{ background:#ffffff; border:1px solid #cbd5e1; color: var(--text); } .theme-sky .post-page .form-grid input:focus, .theme-sky .post-page .form-grid select:focus, .theme-sky .post-page .form-grid textarea:focus{ outline:none; border-color:#C7D2FE; box-shadow:0 0 0 2px rgba(199,210,254,.35); } .theme-sky .post-page .upload-prompt{ background:#EEF2FF !important; border:1px dashed #C7D2FE; color:#312E81; border-radius:10px; } .theme-sky .post-page #imagePreview{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; } .theme-sky .post-page .image-preview{ background:#f8fafc; border-color:#cbd5e1; } /* Buttons on post page */ .theme-sky .post-page .btn{ border-radius:8px; } .theme-sky .post-page .btn.btn-primary{ background: var(--primary); border:1px solid var(--ring); color:#ffffff; } .theme-sky .post-page .btn.btn-primary:hover{ background: var(--primary-600); } .theme-sky .post-page .btn.btn-secondary, .theme-sky .post-page .btn:not(.btn-primary){ background:#EEF2FF; border:1px solid #C7D2FE; color:#312e81; } .theme-sky .post-page .btn.btn-secondary:hover, .theme-sky .post-page .btn:not(.btn-primary):hover{ background:#E0E7FF; border-color:#A5B4FC; color:#1e1b4b; } /* Post page headings and links (Soft Lavender) */ .theme-sky .post-page .section-title, .theme-sky .post-page h1, .theme-sky .post-page h2, .theme-sky .post-page h3{ color:#312E81; } .theme-sky .post-page a{ color:#312e81; } .theme-sky .post-page a:hover{ color:#1e1b4b; } /* User Dashboard (user/dashboard.html) – Soft Lavender */ /* Profile form */ .theme-sky #profileForm.form-grid{ background:#F5F3FF !important; border:1px solid #D9D6FE !important; } .theme-sky #profileForm input, .theme-sky #profileForm select, .theme-sky #profileForm textarea{ background:#ffffff !important; border:1px solid #cbd5e1 !important; color: var(--text) !important; } .theme-sky #profileForm input:focus, .theme-sky #profileForm select:focus, .theme-sky #profileForm textarea:focus{ outline:none !important; border-color:#C7D2FE !important; box-shadow:0 0 0 2px rgba(199,210,254,.35) !important; } .theme-sky .section-title{ color:#312E81; } /* Dashboard actions row */ .theme-sky .dash-header{ border-bottom:1px solid #D9D6FE !important; padding-bottom:.5rem; margin-bottom:.75rem; } .theme-sky .dash-actions input, .theme-sky .dash-actions select{ background:#ffffff !important; border:1px solid #cbd5e1 !important; color: var(--text) !important; border-radius:8px; padding:.5rem .7rem; } .theme-sky .dash-actions input:focus, .theme-sky .dash-actions select:focus{ outline:none !important; border-color:#C7D2FE !important; box-shadow:0 0 0 2px rgba(199,210,254,.35) !important; } .theme-sky .dash-actions .btn{ background:#EEF2FF !important; border:1px solid #C7D2FE !important; color:#312e81 !important; border-radius:8px; } .theme-sky .dash-actions .btn:hover{ background:#E0E7FF !important; border-color:#A5B4FC !important; color:#1e1b4b !important; } /* Data tables */ .theme-sky table.table{ width:100%; border-collapse:collapse; background:#ffffff !important; border:1px solid #E2E8F0 !important; } .theme-sky table.table thead th{ background:#EEF2FF !important; color:#312E81 !important; border-bottom:1px solid #D9D6FE !important; text-align:left; padding:.6rem .7rem; } .theme-sky table.table tbody td{ border-top:1px solid #E2E8F0 !important; padding:.55rem .7rem; color:#0f172a !important; } .theme-sky table.table tbody tr:hover{ background:#F8FAFF !important; } /* Pager */ .theme-sky .pager{ border-top:1px solid #E2E8F0 !important; padding:.6rem 0; } .theme-sky .pager .btn{ background:#EEF2FF !important; border:1px solid #C7D2FE !important; color:#312e81 !important; border-radius:8px; } .theme-sky .pager .btn:hover{ background:#E0E7FF !important; border-color:#A5B4FC !important; color:#1e1b4b !important; } /* Modals */ .theme-sky .modal header{ background:#EEF2FF !important; border-bottom:1px solid #D9D6FE !important; color:#312E81 !important; } .theme-sky .modal .content .form-grid{ background:#F5F3FF !important; border:1px solid #D9D6FE !important; } .theme-sky .modal .content .form-grid input, .theme-sky .modal .content .form-grid select, .theme-sky .modal .content .form-grid textarea{ background:#ffffff !important; border:1px solid #cbd5e1 !important; color: var(--text) !important; } .theme-sky .modal .content .form-grid input:focus, .theme-sky .modal .content .form-grid select:focus, .theme-sky .modal .content .form-grid textarea:focus{ outline:none !important; border-color:#C7D2FE !important; box-shadow:0 0 0 2px rgba(199,210,254,.35) !important; } .theme-sky .modal footer .btn{ border-radius:8px; } .theme-sky .modal footer .btn.btn-primary{ background: var(--primary) !important; border:1px solid var(--ring) !important; color:#ffffff !important; } .theme-sky .modal footer .btn.btn-primary:hover{ background: var(--primary-600); } .theme-sky .modal footer .btn:not(.btn-primary){ background:#EEF2FF !important; border:1px solid #C7D2FE !important; color:#312e81 !important; } .theme-sky .modal footer .btn:not(.btn-primary):hover{ background:#E0E7FF !important; border-color:#A5B4FC !important; color:#1e1b4b !important; } /* Contact page (contact.html) light theme overrides */ .theme-sky .contact-info{ background:#F5F3FF !important; border:1px solid #D9D6FE !important; } .theme-sky .contact-section h2, .theme-sky .contact-section h3{ color:#312E81 !important; } .theme-sky .contact-section a{ color:#312e81 !important; } .theme-sky .contact-section a:hover{ color:#1e1b4b !important; } .theme-sky .contact-form .form-grid{ background:#F5F3FF !important; border:1px solid #D9D6FE !important; } .theme-sky .contact-form .form-grid input, .theme-sky .contact-form .form-grid select, .theme-sky .contact-form .form-grid textarea{ background:#ffffff !important; border:1px solid #cbd5e1 !important; color: var(--text) !important; } .theme-sky .contact-form .form-grid input:focus, .theme-sky .contact-form .form-grid select:focus, .theme-sky .contact-form .form-grid textarea:focus{ outline:none !important; border-color:#C7D2FE !important; box-shadow:0 0 0 2px rgba(199,210,254,.35) !important; } /* Contact page: Remember my contact details (checkbox row) */ .theme-sky .contact-form label.checkbox-label.full{ background:#F5F3FF; border:1px solid #D9D6FE; border-radius:8px; padding:.6rem .8rem; } .theme-sky .contact-form #rememberContact{ accent-color: var(--primary); } .theme-sky .contact-form #rememberContact + span{ color:#312e81; } /* Ensure checkbox label text is visible on Contact page despite global white text rules */ .theme-sky .contact-form .checkbox-label, .theme-sky .contact-form .checkbox-label span{ color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; } .theme-sky body.colorful-text .contact-form .checkbox-label, .theme-sky body.colorful-text .contact-form .checkbox-label span{ -webkit-text-fill-color:#0f172a !important; } /* Post page: Browse File button */ .theme-sky .post-page #browseBtn{ background:#EEF2FF; border:1px solid #C7D2FE; color:#312e81; border-radius:8px; } .theme-sky .post-page #browseBtn:hover{ background:#E0E7FF; border-color:#A5B4FC; color:#1e1b4b; } /* Post page: Remember my contact details (checkbox row) */ .theme-sky .post-page label.checkbox-label.full{ background:#F5F3FF; border:1px solid #D9D6FE; border-radius:8px; padding:.6rem .8rem; } .theme-sky .post-page #rememberContact{ accent-color: var(--primary); } .theme-sky .post-page #rememberContact + span{ color:#312e81; } /* Ensure checkbox label text is visible on Post page despite global white text rules */ .theme-sky .post-page .checkbox-label, .theme-sky .post-page .checkbox-label span{ color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; } /* Also override colorful-text mode making labels transparent */ .theme-sky body.colorful-text .post-page .checkbox-label, .theme-sky body.colorful-text .post-page .checkbox-label span{ -webkit-text-fill-color:#0f172a !important; } *{box-sizing:border-box} html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);overflow-x:hidden; /* Animated multi-layer gradient background */ background: radial-gradient(1200px 800px at 10% 10%, color-mix(in oklab, var(--bg-accent-1) var(--bg-spot-1), transparent) 0%, transparent 60%), radial-gradient(1000px 700px at 90% 30%, color-mix(in oklab, var(--bg-accent-2) var(--bg-spot-2), transparent) 0%, transparent 60%), radial-gradient(900px 600px at 50% 100%, color-mix(in oklab, var(--bg-accent-3) var(--bg-spot-3), transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg), black 6%) 100%); background-attachment: fixed,fixed,fixed,fixed; background-size: 160% 160%, 140% 140%, 120% 120%, 100% 100%; animation: bg-pan var(--bg-anim-duration) ease-in-out infinite; } /* Smooth scrolling across all pages */ html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } @keyframes bg-pan{ 0%{ background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; } 50%{ background-position: 100% 50%, 0% 50%, 50% 60%, 0 0; } 100%{ background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; } } @media (prefers-reduced-motion: reduce){ html,body{ animation: none; background-size: auto; } } a{color:var(--text);text-decoration:none} img{max-width:100%;display:block} .container{width:min(1100px,92%);margin-inline:auto} .pad{padding:2rem 0} .muted{color:var(--muted)} .hidden{display:none} mark{background:#273a6b;color:#fff;border-radius:3px;padding:0 .15em} /* Preserve line breaks in description */ #prop p.muted{white-space:pre-wrap} /* Colorful text mode */ :root{--text-gradient: linear-gradient(90deg,#60a5fa,#22d3ee,#a78bfa,#f472b6,#f59e0b,#34d399,#60a5fa)} @keyframes text-shift{0%{background-position:0% 50%}100%{background-position:200% 50%}} /* Safe default: keep normal color when unsupported */ body.colorful-text :where(h1,h2,h4,h5,h6,.logo span,.nav a,.btn,.section-title,label,b){ color: inherit; } /* Exclude property prices from colorful animation */ body.colorful-text .property-meta strong, body.colorful-text .price { background: none !important; color: #291C1C !important; -webkit-text-fill-color: #291C1C !important; animation: none !important; } /* Only apply gradient text when supported */ @supports ((-webkit-background-clip: text) or (background-clip: text)){ body.colorful-text :where(h1,h2,h4,h5,h6,.logo span,.nav a,.btn,.section-title,label,b){ background: var(--text-gradient); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: text-shift var(--text-anim-duration) linear infinite; } /* Exclude property prices even in gradient mode */ body.colorful-text .property-meta strong, body.colorful-text .price { background: none !important; color: #291C1C !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: #291C1C !important; animation: none !important; } /* Exclude placeholders and form inputs from gradient text */ body.colorful-text :where(input,textarea,select)::placeholder{ -webkit-text-fill-color: var(--muted); color: var(--muted); background: none; } body.colorful-text :where(input,textarea,select){ -webkit-text-fill-color: var(--text); color: var(--text); background: none; } /* Fix for autofill background color */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: var(--text) !important; -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important; box-shadow: 0 0 0 1000px var(--card) inset !important; transition: background-color 5000s ease-in-out 0s; background-color: var(--card) !important; color: var(--text) !important; caret-color: var(--text) !important; } /* For modern browsers */ input:autofill, input:autofill:hover, input:autofill:focus, input:autofill:active { -webkit-text-fill-color: var(--text) !important; -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important; box-shadow: 0 0 0 1000px var(--card) inset !important; transition: background-color 5000s ease-in-out 0s; background-color: var(--card) !important; background-clip: content-box !important; color: var(--text) !important; caret-color: var(--text) !important; } @media (prefers-reduced-motion: reduce){ body.colorful-text :where(h1,h2,h4,h5,h6,.logo span,.nav a,.btn,.section-title,label,b){ animation: none; } } } /* Share buttons */ .share-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0; } .share-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; color: white; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer; } .share-button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .share-button svg { width: 18px; height: 18px; fill: currentColor; } /* Specific share button styles */ .share-whatsapp { background-color: #25D366; } .share-facebook { background-color: #1877F2; } .share-twitter { background-color: #1DA1F2; } .share-linkedin { background-color: #0A66C2; } .share-telegram { background-color: #0088CC; } .share-email { background-color: #EA4335; } .share-copy { background-color: var(--primary); } /* Ensure button text remains solid (not gradient/transparent) in colorful-text mode */ body.colorful-text :where(.btn, .btn *, .nav-desktop a.btn, .mobile-nav a.btn, .area-unit, .area-unit-label){ background-image: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; animation: none !important; } /* ---- Post page: remove any unintended white backgrounds ---- */ .post-page, .post-page main{ background: transparent !important; } .post-page .form-grid{ background: var(--panel) !important; } .post-page .image-preview{ background: #0c1326 !important; } .post-page .upload-prompt{ background: transparent !important; } /* Header */ /* Make header fixed so it stays visible on scroll across all devices/browsers */ .site-header{position:fixed;top:0;left:0;right:0;width:100%;background:rgba(15,23,42,.95)!important;backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.1);z-index:1200} .header-v2{z-index:1200} /* Prevent content from going under the fixed header */ body{padding-top:var(--header-h, 64px)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;position:relative} .logo{display:flex;align-items:center;gap:.6rem;font-weight:700;text-decoration:none;color:var(--text);transition:opacity 0.2s} .logo:hover{opacity:0.9} .logo-img{height:24px;width:24px;flex-shrink:0} .logo span{font-size:1.1rem;font-weight:600;letter-spacing:-0.01em} .nav{display:flex;align-items:center;gap:1.5rem;transition:all 0.3s ease} .nav a{opacity:.9;color:var(--muted);text-decoration:none;position:relative;transition:opacity .2s,color .2s} .nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(90deg,var(--primary),#22d3ee);border-radius:2px;transition:width .25s ease} .nav a:hover{opacity:1;color:#c7d2fe} .nav a:hover::after{width:100%} .nav a.active,.nav a:hover{opacity:1;color:var(--primary)} .nav a.btn{opacity:1;color:white} /* --- New Header v2 --- */ .nav-desktop{display:flex;align-items:center;gap:1rem} .nav-desktop a{color:var(--muted);opacity:.9;display:inline-flex;align-items:center;gap:.45rem;position:relative;padding:.35rem .5rem;border-radius:8px} .nav-desktop a:hover,.nav-desktop a.active{color:var(--primary);opacity:1} /* Hover pill background (Option A: Sky) */ .theme-sky .nav-desktop a:hover{background:rgba(14,165,233,.10)} /* Menu icons */ .nav-ico{display:inline-block;font-size:1rem;line-height:1;transform:translateY(0) scale(1);transition:transform .22s ease, color .22s ease;opacity:.95} .nav-desktop a:hover .nav-ico,.nav-desktop a.active .nav-ico{transform:translateY(-2px) scale(1.06)} .nav-ico svg{width:20px;height:20px;fill:currentColor;stroke:none;transition:transform .22s ease, color .22s ease} .nav-desktop a:hover .nav-ico svg,.nav-desktop a.active .nav-ico svg{transform:translateY(-2px) scale(1.06)} .nav-desktop a.btn{color:#ffffff !important} .hamburger{display:none;background:none;border:0;cursor:pointer;width:36px;height:28px;position:relative} .hamburger .bar{position:absolute;left:0;right:0;height:2px;background:var(--text);transition:transform .3s ease, opacity .2s ease, top .3s ease} .hamburger .bar:nth-child(1){top:6px} .hamburger .bar:nth-child(2){top:13px} .hamburger .bar:nth-child(3){top:20px} .hamburger[aria-expanded="true"] .bar:nth-child(1){top:13px;transform:rotate(45deg)} .hamburger[aria-expanded="true"] .bar:nth-child(2){opacity:0} .hamburger[aria-expanded="true"] .bar:nth-child(3){top:13px;transform:rotate(-45deg)} /* Backdrop and Drawer */ .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:1290} .backdrop.show{opacity:1;pointer-events:auto} .mobile-drawer{position:fixed;top:0;right:0;width:min(88vw,380px);height:100vh;background:var(--bg);border-left:1px solid var(--border-color);box-shadow:-10px 0 30px rgba(0,0,0,.35);transform:translateX(100%);transition:transform .3s ease;z-index:1300;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .mobile-drawer.open{transform:translateX(0)} .mobile-nav{display:flex;flex-direction:column;gap:.25rem;padding:5rem 1.5rem 1.5rem} .mobile-nav a{padding:.85rem 1rem;border-radius:8px;color:var(--text);text-align:left;background:transparent;border:1px solid transparent;display:flex;align-items:center;gap:.6rem} .mobile-nav a:hover,.mobile-nav a.active{background:#0c1326;border-color:#1d2a52;color:var(--primary)} /* Mobile: animate icon on hover/active */ .mobile-nav a:hover .nav-ico,.mobile-nav a.active .nav-ico{transform:translateY(-1px) scale(1.04)} .mobile-nav .nav-ico svg{width:20px;height:20px;fill:currentColor;stroke:none;transition:transform .22s ease, color .22s ease} .mobile-nav a:hover .nav-ico svg,.mobile-nav a.active .nav-ico svg{transform:translateY(-1px) scale(1.04)} /* Ensure CTA buttons are visible in dark mobile drawer */ .mobile-nav a.btn{background:#182246;border-color:#223260;color:#ffffff !important} .mobile-nav a.btn:hover{background:#223260;border-color:#2b3b6e;color:#ffffff !important} .mobile-nav a.btn.btn-primary{background:var(--primary);border-color:var(--ring);color:#ffffff !important} /* Mobile drawer header with close button */ .mobile-drawer-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1rem;background:var(--panel);border-bottom:1px solid var(--border-color);z-index:1} .mobile-drawer-title{font-weight:600;color:var(--text)} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--border-color);background:transparent;color:var(--text);cursor:pointer} .icon-btn:hover{background:#162044;border-color:#223260} @media (max-width: 900px){ .nav-desktop{display:none} .hamburger{display:block} } /* Mobile Menu Toggle */ .mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:0.5rem;flex-direction:column;justify-content:space-between;width:30px;height:24px;z-index:110} .mobile-menu-toggle span{display:block;width:100%;height:2px;background:var(--text);transition:all 0.3s ease} /* Mobile Menu Styles */ @media (max-width:768px){ .mobile-menu-toggle{display:flex} /* Keep the toggle above the drawer; when active, pin it at top-right */ .mobile-menu-toggle{z-index:1101} .mobile-menu-toggle.active{position:fixed;top:14px;right:16px} /* Off-canvas nav: ensure it's fully off-screen and overlays content */ .nav{position:fixed;top:0;right:-100vw;width:85vw;max-width:360px;height:100vh;background:var(--bg);flex-direction:column;padding:5rem 2rem 2rem;box-shadow:-5px 0 15px rgba(0,0,0,0.35);z-index:1000;transition:right .3s ease;overflow-y:auto;pointer-events:none} .nav.active{right:0;pointer-events:auto} /* Dim the rest of the page when drawer is open */ .mobile-menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:990} .mobile-menu-backdrop.active{opacity:1;pointer-events:auto} .nav a{width:100%;padding:0.75rem 0;text-align:center} .nav a.btn{margin-top:1rem} .mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .mobile-menu-toggle.active span:nth-child(2){opacity:0} .mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } /* Hero */ .hero{background:linear-gradient(180deg,#0b0f1a 0%,#0f1629 100%);padding:4rem 0 3rem;border-bottom:1px solid #1b2544} .hero-inner h1{font-size:2.2rem;margin:.2rem 0 0} .hero-inner p{margin:.5rem 0 1.5rem} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem .9rem;border-radius:8px;border:1px solid var(--border-color);background:transparent;color:var(--text);cursor:pointer} .btn{transition:transform .2s ease, box-shadow .2s ease, background .2s ease} .btn:hover{background:#162044;transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,211,238,.08)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--primary);border-color:var(--ring);color:white} .btn-primary:hover{background:var(--primary-600)} /* Search bar */ .search-bar{display:grid;grid-template-columns:1.2fr 160px 140px 160px 160px auto;gap:.6rem;background:var(--panel);padding:.6rem;border:1px solid #1b2544;border-radius:.8rem} .search-bar input,.search-bar select{background:#0c1326;border:1px solid #1d2a52;color:var(--text);padding:.6rem;border-radius:.6rem} .search-bar button{width:auto;white-space:nowrap;justify-self:start} @media (max-width: 900px){ .search-bar{ grid-template-columns: 1fr 1fr; } .search-bar button{ grid-column: 1 / -1; width:100%; justify-self:stretch; } } /* Cards grid */ .grid{display:grid;gap:1rem} .cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .property-slider .card{ min-width:280px } @media (min-width: 640px){ .cards{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) } .property-slider .card{ min-width:300px } } @media (min-width: 1024px){ .cards{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) } .property-slider .card{ min-width:240px } } @media (min-width: 1280px){ .cards{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) } .property-slider .card{ min-width:280px } } @media (min-width: 1600px){ .cards{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) } .property-slider .card{ min-width:300px } } .card{background:var(--card);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;display:block} .card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0)} .card:hover{transform:translateY(-4px) scale(1.01) translate3d(0,0,0);box-shadow:0 12px 40px rgba(34,211,238,.08),0 6px 20px rgba(59,130,246,.08);border-color:color-mix(in oklab, var(--primary) 40%, var(--border-color))} .card .thumb{aspect-ratio:4/3;background:transparent;position:relative;overflow:hidden} .card .thumb img{width:100%;height:100%;object-fit:cover;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0)} .card .thumb.thumb-slideshow{ position: relative; overflow:hidden; } .card .thumb.thumb-slideshow img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; backface-visibility:hidden;-webkit-backface-visibility:hidden } .card .thumb.thumb-slideshow img.img-a{ opacity:1;z-index:2 } .card .thumb.thumb-slideshow img.img-b{ opacity:0;z-index:1 } .card .thumb.thumb-slideshow img.img-a.slide-out-left{ opacity:0;z-index:1 } .card .thumb.thumb-slideshow img.img-b.slide-in-from-right{ opacity:1;z-index:2 } .card .thumb.thumb-slideshow video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:0; cursor:pointer; transition:opacity .3s ease } .card .thumb .slide-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.25);background:rgba(17,24,39,.88);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)} .card .thumb .slide-nav.prev{left:8px} .card .thumb .slide-nav.next{right:8px} .card .thumb .slide-nav:hover{background:rgba(17,24,39,.95)} .card .thumb .badge-status{position:absolute;left:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:12px;padding:.18rem .5rem;border-radius:999px;color:#fff;border:1px solid rgba(0,0,0,.25);box-shadow:0 4px 12px rgba(0,0,0,.25)} .card .thumb .badge-status.sale{background:linear-gradient(180deg, rgba(16,185,129,0.95), rgba(5,150,105,0.95))} .card .thumb .badge-status.rent{background:linear-gradient(180deg, rgba(59,130,246,0.95), rgba(37,99,235,0.95))} .card .thumb[data-placeholder="1"] .badge-status{background:rgba(17,24,39,.9)} .card .thumb .badge-count{position:absolute;left:8px;right:auto;bottom:8px;z-index:2;display:inline-flex;background:rgba(17,24,39,.88);color:#fff;border:1px solid rgba(0,0,0,.25);box-shadow:0 4px 12px rgba(0,0,0,.25);font-size:12px;padding:.15rem .4rem;border-radius:6px;pointer-events:none} .card .body{padding:.8rem} .card h3{margin:.2rem 0;font-size:1.05rem;color:#291C1C} .card .meta{display:flex;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-size:.9rem} .price{color:#291C1C;font-weight:600} .badge{display:inline-flex;align-items:center;padding:.2rem .5rem;background:#1b2544;border:1px solid #26335d;border-radius:.5rem;font-size:.8rem;color:#c8d3ff} /* Generic unit selector button (used on property details too) */ .area-unit{ background:transparent; border:0; padding:0; margin:0; cursor:pointer; font:inherit; -webkit-appearance:none; appearance:none; color:inherit; } .area-unit:focus{ outline:none; } .area-unit-label{ background:transparent; color:var(--muted); } /* Area unit selector button inside card meta */ .card .meta .area-unit{background:transparent;border:0;color:var(--muted);padding:0;margin:0;cursor:pointer;font:inherit} .card .meta .area-unit:hover{text-decoration:underline;color:#c7d2fe} .card .meta .area-unit:focus{outline:none} /* Filters */ .filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .sort-options { display: flex; align-items: center; gap: 0.5rem; } /* Save Search button in listings header */ #saveSearchBtn{ padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--border-color); background: #162044; color: var(--text); } #saveSearchBtn:hover{ background:#1b274f; border-color:#233565 } .sort-select { padding: 0.5rem 1rem; border-radius: 4px; border: 1px solid #2d3748; background-color: #1a202c; color: #e2e8f0; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; } /* ---- Promo banner (Register + Post Free) ---- */ .promo-bar{ position:sticky; top:0; z-index:1400; backdrop-filter: blur(6px); border-bottom:1px solid var(--border-color); background: linear-gradient(180deg, rgba(16,24,48,.78), rgba(16,24,48,.78)); } .promo-bar-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .9rem; } .promo-text{ color:#e9f0ff; font-size:.98rem } .promo-ctas{ display:flex; align-items:center; gap:.5rem; } .promo-ctas .btn{ padding:.45rem .8rem; border-radius:8px } .promo-ctas .btn.btn-sm{ padding:.35rem .6rem } .promo-ctas .promo-close{ background:#0f172a; border:1px solid var(--border-color); } .promo-ctas .promo-close:hover{ background:#152143 } @media (max-width: 640px){ .promo-bar-inner{ flex-direction:column; align-items:flex-start } } .sort-select:hover, .sort-select:focus { border-color: #4a5568; outline: none; } .sort-options label { color: #a0aec0; font-size: 0.9rem; } /* Filters */ .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; background: var(--panel); border: 1px solid #1b2544; border-radius: 0.8rem; padding: 1rem; margin-bottom: 1.5rem; align-items: end; } .filters input, .filters select, .filters button { min-height: 44px; background: #0c1326; border: 1px solid #1d2a52; color: var(--text); padding: 0.6rem 0.8rem; border-radius: 0.6rem; font-size: 0.95rem; width: 100%; } .filters input:focus, .filters select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(91, 140, 255, 0.2); } .filters input::placeholder { color: var(--muted); opacity: 0.7; } .filters select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2396a0b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; padding-right: 2rem; } .price-range, .area-range { display: grid; grid-template-columns: 3fr auto 3fr; /* further widen inputs for placeholder visibility */ gap: 0.5rem; align-items: center; } /* On desktop, make price range span all columns for maximum width */ .filters .price-range { grid-column: 1 / -1; } .price-range span, .area-range span { color: var(--muted); text-align: center; font-size: 0.9rem; } .filters button { background: var(--primary); color: white; font-weight: 500; border: none; cursor: pointer; transition: background 0.2s; } /* Make filters submit button fit to text on desktop */ .filters button { width: auto; white-space: nowrap; justify-self: start; } .filters button:hover { background: var(--primary-600); } /* Responsive adjustments */ @media (max-width: 900px) { .filters { grid-template-columns: repeat(2, 1fr); } /* On mobile, keep button full-width for usability */ .filters button { width: 100%; justify-self: stretch; grid-column: auto; } .price-range, .area-range { grid-column: span 2; } } @media (max-width: 480px) { .filters { grid-template-columns: 1fr; } .price-range, .area-range { grid-column: auto; } } /* Image Upload */ .image-upload-container { margin-top: 0.5rem; } .image-preview { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; min-height: 120px; border: 2px dashed #2d3748; border-radius: 0.6rem; padding: 1.5rem; background: #0c1326; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .image-preview:hover { border-color: var(--primary); background: rgba(91, 140, 255, 0.05); } .image-preview.dragover { border-color: var(--primary); background: rgba(91, 140, 255, 0.1); } .upload-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; color: var(--muted); transition: all 0.3s ease; } .image-preview:not(.has-images) .upload-prompt { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; } .image-preview.has-images { min-height: auto; padding: 1rem; border-style: solid; } .preview-images { display: flex; flex-wrap: wrap; gap: 0.8rem; width: 100%; } .preview-image { position: relative; width: 120px; aspect-ratio: 4/3; height: auto; border-radius: 0.5rem; overflow: hidden; border: 1px solid #1d2a52; background: #0a0f1f; } .preview-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .remove-image { position: absolute; top: 0.25rem; right: 0.25rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(0, 0, 0, 0.7); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; padding: 0; font-size: 0.9rem; line-height: 1; transition: all 0.2s ease; } .remove-image:hover { background: #ef4444; transform: scale(1.1); } #browseBtn { margin-top: 0.5rem; background: #1d2a52; border: 1px solid #2d3a6e; } #browseBtn:hover { background: #2d3a6e; } /* Property page */ .property{display:grid;grid-template-columns:1.4fr .9fr;gap:1.2rem} .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem} .gallery img{ width: 100%; aspect-ratio: 4/3; /* fixed thumbnail shape */ height: auto; object-fit: cover; /* crop oversized images to fit the box */ border-radius:.5rem; border:1px solid #1b2544; background:#0c1326; /* avoid layout shift before load */ } .prop-panel{background:var(--panel);border:1px solid #1b2544;border-radius:.8rem;padding:1rem} .keyvals{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:.6rem 0} .keyvals div{background:#0c1326;border:1px solid #1d2a52;border-radius:.6rem;padding:.6rem} /* Property Inquiry (dark form inputs) */ .prop-panel #inquiry-form{ display:grid; gap:.6rem; } .prop-panel #inquiry-form input, .prop-panel #inquiry-form textarea{ width:100%; background:#0c1326; border:1px solid #1d2a52; color:var(--text); padding:.6rem .8rem; border-radius:.6rem; font-size:.95rem; } .prop-panel #inquiry-form input::placeholder, .prop-panel #inquiry-form textarea::placeholder{ color:var(--muted); opacity:.8; } .prop-panel #inquiry-form input:focus, .prop-panel #inquiry-form textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(91,140,255,.2); } .prop-panel #inquiry-form button[type="submit"]{ width:100%; } /* Forms */ /* Scope generic form styling to an opt-in class to avoid overriding .form-grid layouts */ form.styled { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 900px; margin: 0 auto; padding: 2.5rem; background: var(--bg-light); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; background: var(--panel); border: 1px solid #1b2544; border-radius: 0.8rem; padding: 1.5rem; } .form-grid label { display: grid; gap: 0.5rem; font-size: 0.95rem; color: var(--text); } .form-grid label span { font-weight: 500; color: var(--text); } .form-grid input, .form-grid select, .form-grid textarea { width: 100%; background: #0c1326; border: 1px solid #1d2a52; color: var(--text); padding: 0.75rem 1rem; border-radius: 0.6rem; font-size: 1rem; transition: all 0.2s ease; } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(91, 140, 255, 0.2); } .form-grid input::placeholder, .form-grid textarea::placeholder { color: var(--muted); opacity: 0.7; } .form-grid .full { grid-column: 1 / -1; } /* Standardize inner form groups */ .form-group{ display:grid; gap:.6rem; margin-bottom: 1rem; } /* Input with currency or prefix symbol */ .input-with-symbol{ position: relative; display: flex; align-items: center; width: 100%; height: 2.75rem; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-color); background: var(--panel); } .input-with-symbol span:first-child{ display:inline-flex; align-items:center; justify-content:center; width: 2.2rem; color: var(--muted); } .input-with-symbol input{ flex:1; border:none; height: 100%; background: transparent; color: var(--text); padding: 0 1rem; font-size: .95rem; } .input-with-symbol input:focus{outline:none} .input-with-unit { position: relative; display: flex; align-items: center; flex-wrap: nowrap; width: 100%; height: 3rem; /* increased for better touch target */ border-radius: 6px; overflow: hidden; transition: all 0.2s ease; border: 1px solid var(--border-color); background: var(--panel); } .input-with-unit:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); } .input-with-unit input { flex: 1; min-width: 0; padding: 0 1rem; border: none; background: transparent; color: var(--text); font-size: 0.95rem; transition: all 0.2s ease; } .input-with-unit input:focus { outline: none; background: var(--bg); } .input-with-unit select { background: var(--bg-lighter); border: none; border-left: 1px solid var(--border-color); padding: 0 2.25rem 0 1rem; color: var(--text); font-size: 0.92rem; font-weight: 500; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1em; transition: all 0.2s ease; min-width: 7.5rem; /* widened for readability */ height: 100%; margin: 0; flex: 0 0 auto; text-align: left; } .input-with-unit .unit{ display:flex; align-items:center; justify-content:center; height:100%; padding: 0 1rem; background: var(--bg-lighter); border-left: 1px solid var(--border-color); color: var(--muted); font-weight: 500; min-width: 6rem; } .input-with-unit .unit-select:hover { background-color: var(--bg-light); } .input-with-unit .unit-select:focus { outline: none; background-color: var(--bg-light); box-shadow: none; } .contact-fields { display: grid; gap: 0.8rem; margin-top: 0.5rem; } .hint { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; font-style: italic; line-height: 1.4; } /* Checkbox and Radio Styles */ .checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.25rem 1rem 0.25rem 0; cursor: pointer; font-size: 0.95rem; color: #ffffff; /* force white for visibility */ padding: 0.4rem 0.5rem; border-radius: 4px; transition: background-color 0.2s; font-weight: 500; } .checkbox-label:hover { background-color: var(--bg-lighter); } .checkbox-label input[type="checkbox"], .checkbox-label input[type="radio"] { width: 1.1em; height: 1.1em; margin: 0; accent-color: var(--primary); cursor: pointer; } /* Disable colorful-text gradient for checkbox labels globally */ body.colorful-text .checkbox-label, body.colorful-text .checkbox-label span{ -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; background: none !important; animation: none !important; } .checkbox-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; background: var(--bg-light); padding: 0.75rem; border-radius: 6px; border: 1px solid var(--border-color); } /* Industrial Specific Fields */ #industrialFields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; background: var(--bg-light); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color); margin: .5rem 0 1rem 0; } #industrialFields .form-group { margin-bottom: 0; } /* Make specific fields full width */ #industrialFields .form-group:has(.checkbox-group), #industrialFields .form-group:has(textarea) { grid-column: 1 / -1; } /* Required field indicator */ .form-group .required { color: #ef4444; margin-left: 0.25em; font-weight: bold; line-height: 1; } /* Responsive adjustments */ @media (max-width: 768px) { #industrialFields { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; } .checkbox-group { flex-direction: column; gap: 0.5rem; } .form-group { margin-bottom: 1rem; } } /* Form Section Headers */ .form-section-header { grid-column: 1 / -1; font-size: 1.05rem; font-weight: 700; color: var(--text-strong, #111827); margin: 1.25rem 0 .5rem; } /* Contact fields inline layout */ .contact-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } @media (max-width: 768px) { .contact-fields { grid-template-columns: 1fr; } } /* Form validation */ .form-grid input:invalid, .form-grid select:invalid, .form-grid textarea:invalid { border-color: var(--err); } .form-grid input:focus:invalid, .form-grid select:focus:invalid, .form-grid textarea:focus:invalid { box-shadow: 0 0 0 2px rgba(255, 91, 91, 0.2); } /* Notices */ .notice { margin-top: 1.5rem; padding: 1rem; border-radius: 0.6rem; border: 1px solid transparent; } .success { background: rgba(29, 185, 84, 0.1); border-color: rgba(29, 185, 84, 0.2); color: #4ade80; } /* Responsive adjustments */ @media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; padding: 1rem; } .input-with-symbol span:first-child { left: 0.8rem; } .input-with-symbol input { padding-left: 2rem !important; } } /* Chips */ .chips{display:flex;flex-wrap:wrap;gap:.5rem} .chip{padding:.35rem .7rem;border-radius:999px;background:#0c1326;border:1px solid #1d2a52;color:#c8d3ff} /* Higher contrast for Features & Amenities chips */ ul.features .chip{ display: inline-flex; align-items: center; gap: .35rem; background: #0f1a36; /* slightly brighter for contrast */ border-color: #2a3a70; color: #e9f0ff; /* brighter text for readability */ font-weight: 500; } ul.features .chip svg{ width: 14px; height: 14px; stroke: currentColor; } /* Property sliders */ .property-section{margin:1rem 0 2rem} .section-subtitle{margin:.2rem 0 .6rem 0;color:var(--muted);font-size:1.05rem} .property-slider-container{position:relative;display:flex;align-items:center} .property-slider{display:flex;gap:1rem;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;flex:1;min-height: 220px} .property-slider .card{min-width:280px;max-width:280px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0);transition:none} .property-slider .card:hover{transform:translate3d(0,0,0);box-shadow:0 8px 24px rgba(34,211,238,.06),0 4px 12px rgba(59,130,246,.06)} .slider-nav{position:absolute;top:50%;transform:translateY(-50%);background:#1b2544;color:#dbe4ff;border:1px solid #26335d;border-radius:999px;width:48px;height:48px;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:10;opacity:.95;box-shadow:0 4px 12px rgba(0,0,0,.3)} .slider-nav{transition:transform .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease} .slider-nav:hover{background:#223260;transform:translateY(-50%) scale(1.1);box-shadow:0 8px 24px rgba(34,211,238,.2);opacity:1} .slider-nav.prev{left:12px} .slider-nav.next{right:12px} @media (max-width: 1024px){ /* Hide nav arrows on mobile and tablets */ .slider-nav{display:none !important} /* Manual scroll on mobile and tablets */ .property-slider{overflow-x:auto; overflow-y:hidden; scroll-padding: 0 1rem; touch-action: auto} .property-slider .card{scroll-snap-align:start} /* Hide scrollbars where supported */ .property-slider{scrollbar-width:none} .property-slider::-webkit-scrollbar{display:none} /* Allow natural vertical scroll to bubble to page */ .property-slider{ overscroll-behavior: auto } } @media (max-width: 640px){ .property-slider .card{min-width:240px;max-width:240px} } /* Desktop only: Show arrows with icons */ @media (min-width: 1025px){ .slider-nav{display:flex !important} /* Add arrow icons using content */ .slider-nav.prev::before{content:'‹';font-weight:bold;font-size:32px;line-height:1} .slider-nav.next::before{content:'›';font-weight:bold;font-size:32px;line-height:1} } /* Amenities (post.html) */ .amenities-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.5rem 1rem; } /* Ensure amenity labels are clearly visible (white text) */ .amenities-grid .checkbox-label, .amenities-grid .checkbox-label span, .checkbox-group .checkbox-label, .checkbox-group .checkbox-label span{ color: #ffffff !important; font-weight: 500; } /* Override colorful-text gradient for amenity labels */ body.colorful-text .amenities-grid .checkbox-label, body.colorful-text .amenities-grid .checkbox-label span, body.colorful-text .checkbox-group .checkbox-label, body.colorful-text .checkbox-group .checkbox-label span{ -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; background: none !important; animation: none !important; } /* Light theme override: use dark text so it shows on light backgrounds */ .theme-sky .amenities-grid .checkbox-label, .theme-sky .amenities-grid .checkbox-label span, .theme-sky .checkbox-group .checkbox-label, .theme-sky .checkbox-group .checkbox-label span{ color:#0f172a !important; /* slate-900 */ -webkit-text-fill-color:#0f172a !important; } /* Ensure colorful-text mode does not make them transparent in light theme */ .theme-sky body.colorful-text .amenities-grid .checkbox-label, .theme-sky body.colorful-text .amenities-grid .checkbox-label span, .theme-sky body.colorful-text .checkbox-group .checkbox-label, .theme-sky body.colorful-text .checkbox-group .checkbox-label span{ -webkit-text-fill-color:#0f172a !important; } .checkbox-label.amenity{ display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; border:1px solid var(--border-color); border-radius:.6rem; background:#0c1326; line-height:1.2; } .checkbox-label.amenity:hover{ border-color:#2d3a6b; background:#0f1629; } .checkbox-label.amenity input{ margin-right:.1rem; } .amenity-icon{ width:18px;height:18px; display:inline-flex; align-items:center; justify-content:center; } .amenity-icon svg{ width:18px;height:18px; stroke:#9db2ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:transparent; } .checkbox-label.amenity input:checked + .amenity-icon svg{ stroke:#4ade80; } /* (Removed stacking on <=1024px to keep horizontal manual slider) */ /* Slider pagination dots */ .slider-dots{display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:.5rem} .slider-dots .dot{width:.5rem;height:.5rem;border-radius:999px;border:1px solid var(--border, #2a3353);background:transparent;opacity:.8;cursor:pointer;transition:all .2s ease} .slider-dots .dot:hover{opacity:1;border-color:var(--primary, #2563eb)} .slider-dots .dot.active{background:var(--primary, #2563eb);border-color:var(--primary, #2563eb);opacity:1} /* Footer */ .site-footer{border-top:1px solid #1b2544;margin-top:2rem} .footer-inner{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 0;color:var(--muted)} .footer-main{padding:2rem 0; border-top:1px solid var(--border-color)} .footer-grid{ display:flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items:flex-start; } .footer-grid > .footer-col{ flex: 1 1 280px; /* min width per column */ max-width: 100%; } .site-footer--columns .footer-col .footer-links{display:flex;flex-direction:column;gap:.45rem} .site-footer--columns .footer-col .footer-links a{display:block;line-height:1.6} .footer-col{min-width:0} .footer-links a{opacity:.9} .footer-links a:hover{opacity:1; color:#c7d2fe} .footer-bottom{ padding:1rem 0; border-top:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap: wrap; } /* Enforce column counts per breakpoint */ @media (min-width: 1200px){ .site-footer--columns .footer-grid{gap:0 3rem} .site-footer--columns .footer-grid > .footer-col{flex:1 1 0; box-sizing:border-box; padding-left:0} .site-footer--columns .footer-grid > .footer-col.footer-about{flex:1.5 1 0} } @media (min-width: 640px) and (max-width: 1199.98px){ .site-footer--columns .footer-grid{gap:1.25rem 2rem} .site-footer--columns .footer-grid > .footer-col{flex: 0 0 calc((100% - 2rem) / 2);} /* 2 columns */ } @media (max-width: 639.98px){ .site-footer--columns .footer-grid > .footer-col{flex: 1 1 100%;} /* 1 column */ } /* About column tweaks */ .footer-about p{color:var(--text);} .footer-about .muted{color:var(--muted)} .footer-highlights{margin:.5rem 0 0 0; padding:0; list-style:none; display:grid; gap:.35rem} .footer-highlights li{color:var(--muted)} @media (max-width: 640px){ .footer-bottom{flex-direction:column; align-items:flex-start} } /* New simplified footer variant */ .site-footer--simple{border-top:1px solid var(--border-color);} .footer-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 0} .footer-brand{display:inline-flex; align-items:center; gap:.5rem; font-weight:700} .footer-logo{font-size:1.05rem} .footer-name{letter-spacing:.2px} .footer-nav{display:flex; align-items:center; gap:1rem; flex-wrap:wrap} .footer-nav a{color:var(--muted); opacity:.9} .footer-nav a:hover{opacity:1; color:#c7d2fe} .footer-ctas{display:flex; align-items:center; gap:.6rem} .btn.btn-outline{padding:.45rem .8rem; border-radius:8px; border:1px solid var(--border-color); background:transparent; color:var(--text)} .btn.btn-outline:hover{background:#162044; border-color:#223260} .footer-legal{border-top:1px solid var(--border-color); color:var(--muted); padding:.9rem 0; font-size:.95rem} .footer-legal a{color:var(--muted)} .footer-legal a:hover{color:#c7d2fe} @media (max-width: 760px){ .footer-bar{flex-direction:column; align-items:flex-start; gap:.75rem} .footer-ctas{align-self:stretch} } /* Vertical variant */ .site-footer--vertical .footer-bar{flex-direction:column; align-items:flex-start; gap:1.5rem} .site-footer--vertical .footer-nav{flex-direction:column; align-items:flex-start; gap:1rem} .site-footer--vertical .footer-ctas{align-self:stretch; margin-top:1rem} .site-footer--vertical .footer-legal{margin-top:1rem} /* Vertical footer content blocks */ .site-footer--vertical .footer-about h4, .site-footer--vertical .footer-contact h4{margin:.25rem 0 .5rem 0; font-size:1.05rem} .site-footer--vertical .footer-about p{margin:.35rem 0; color:var(--text)} .site-footer--vertical .footer-about .muted{color:var(--muted)} .site-footer--vertical .footer-contact p{margin:.25rem 0; color:var(--muted)} .site-footer--vertical .footer-contact a{color:var(--text)} .site-footer--vertical .footer-contact a:hover{color:#c7d2fe} .footer-highlights{list-style:none; margin:.25rem 0 0 0; padding:0} .footer-highlights li{margin:.25rem 0; color:var(--muted)} /* Footer brand spacing to mirror header logo rhythm */ .footer-about .footer-logo{display:inline-flex; align-items:center; gap:.6rem; margin: .1rem 0 .4rem;} /* Sections */ .section-title{margin:0 0 .8rem 0;font-size:1.4rem} /* Emphasis for special section headings */ .section-title.highlight{font-size:1.6rem;position:relative} .section-title.highlight::after{content:"";display:block;width:80px;height:3px;margin-top:.35rem;border-radius:999px;background:var(--text-gradient);background-size:200% auto;animation:text-shift 8s linear infinite} /* Our Services */ .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .service-card{background:#0b1124;border:1px solid #18234a;border-radius:12px;padding:1rem;transition:transform .15s ease, box-shadow .15s ease} .service-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)} .service-card h3{margin:.2rem 0 .4rem 0} .service-icon{font-size:1.6rem;line-height:1} @media (max-width: 900px){.services-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width: 520px){.services-grid{grid-template-columns:1fr}} /* Floating CTAs */ .fab-cta{position:fixed;right:18px;display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;border-radius:999px;padding:.7rem 1rem;border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 30px rgba(0,0,0,.35);z-index:999} .fab-cta .fab-icon{font-size:1.1rem;line-height:1} .fab-cta .fab-text{font-weight:600} .fab-cta.whatsapp{background:#25D366;bottom:18px} .fab-cta.whatsapp:hover{background:#22c05b} .fab-cta.call{background:#2563eb;bottom:74px} .fab-cta.call:hover{background:#1d4ed8} @media (max-width: 520px){.fab-cta .fab-text{display:none};.fab-cta{padding:.75rem}.fab-cta.call{bottom:70px}} /* Responsive */ @media (max-width: 900px){ .search-bar{grid-template-columns:1fr 1fr 1fr auto} .filters{grid-template-columns:1fr 1fr 1fr 1fr 1fr auto} .property{grid-template-columns:1fr} .gallery{grid-template-columns:repeat(2,1fr)} } @media (max-width: 640px){ .search-bar{grid-template-columns:1fr;} .filters{grid-template-columns:1fr 1fr;} } /* Ensure Quick Links stack vertically in columns */ .site-footer--columns .footer-col .footer-links{display:flex;flex-direction:column;gap:.45rem} .site-footer--columns .footer-col .footer-links a{display:block;line-height:1.6} /* Stronger scoped fallback so links are vertical in any footer variant */ .site-footer .footer-links{display:flex !important;flex-direction:column !important;align-items:flex-start;gap:.5rem} .site-footer .footer-links a{display:block !important;white-space:normal} /* Placeholder styling for property cards */ .card .thumb[data-placeholder]{ position: relative; display: flex; align-items: center; justify-content: center; background: var(--panel, #0f172a); } .card .thumb[data-placeholder] img{ width: 72px; height: 72px; object-fit: contain; opacity: 0.95; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); } .card .thumb[data-placeholder]::after{ content: 'Photos requested'; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: .85rem; color: var(--muted, #94a3b8); text-shadow: 0 1px 2px rgba(0,0,0,.35); } /* Placeholder styling for property detail gallery */ .gallery.gallery--placeholder{ position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; background: var(--panel, #0b1224); border: 1px solid var(--border-color, #1f2a44); border-radius: 8px; } .gallery.gallery--placeholder img{ width: 96px; height: 96px; object-fit: contain; } .gallery.gallery--placeholder::after{ content: 'Photos requested'; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: .95rem; color: var(--muted, #94a3b8); text-shadow: 0 1px 2px rgba(0,0,0,.35); } /* Disable fixed background on small screens to avoid iOS scroll lock */ @media (max-width: 900px){ html,body{ background-attachment: scroll,scroll,scroll,scroll; } } /* Footer: Mortgage/Loan Calculator */ .footer-mortgage{background:#ebfff6;border:1px solid #a7f3d0;border-radius:.8rem;padding:1rem;max-width:420px;margin:0 auto;box-shadow:0 2px 8px rgba(16,185,129,.08)} .footer-mortgage h4{margin:.2rem 0 0.6rem 0;color:#0f172a} .footer-mortgage .loan-calc{display:grid;gap:.6rem;grid-template-columns:1fr} @media (min-width: 720px){ .footer-mortgage .loan-calc{grid-template-columns:1fr 1fr;align-items:end} .footer-mortgage .loan-calc > label:nth-of-type(1){grid-column:1 / -1} .footer-mortgage .loan-calc-actions{grid-column:1 / -1} } .footer-mortgage label{display:grid;gap:.35rem;font-size:.95rem;color:#334155} .footer-mortgage .input-with-symbol{height:2.6rem} .footer-mortgage .input-with-symbol span:first-child{width:2.2rem} .footer-mortgage input{background:#ffffff;border:1px solid #a7f3d0;color:#0f172a;padding:.55rem .7rem;border-radius:.5rem} .footer-mortgage input::placeholder{color:#64748b;opacity:.7} .footer-mortgage .loan-calc-actions{display:flex;gap:.6rem;margin-top:.25rem;flex-wrap:wrap;justify-content:center} .footer-mortgage .loan-calc-actions .btn{min-width:120px} .footer-mortgage .loan-calc-result{margin-top:.7rem;display:grid;gap:.3rem;background:#e6fdf3;border:1px solid #a7f3d0;border-radius:.6rem;padding:.6rem} .footer-mortgage .loan-calc-result strong{color:#0b7a66} /* ---------- Generic Modal Styles (used by alerts & auth) ---------- */ /* Scope to non-