/* * Propzora — Dark Mode Theme (production-complete) * Applied via data-theme="dark" on */ /* ── 1. CSS Variable overrides ─────────────────────────────── */ [data-theme="dark"] { --pz-white: #0d1117; --pz-surface: #161b27; --pz-surface-2: #1c2333; --pz-ink: #ffffff; --pz-ink-secondary: #f1f5f9; --pz-muted: #a8b3c4; --pz-faint: #64748b; --pz-line: #1e293b; --pz-line-soft: #131c2e; --pz-blue: #3b82f6; --pz-blue-hover: #60a5fa; --pz-blue-soft: #1e3a5f; --pz-blue-mist: #0f2040; --pz-blue-panel: linear-gradient(165deg,#0f2040 0%,#1e3a5f 48%,#0f2040 100%); --pz-green: #10b981; --pz-green-soft: #052e16; --pz-gold: #fbbf24; --pz-gold-soft: #1a1000; --pz-danger: #f87171; --pz-danger-soft: #1f0808; --pz-shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --pz-shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --pz-shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55); --pz-shadow-lg: 0 24px 48px -16px rgba(0,0,0,0.65); } /* ── 2. Page base ───────────────────────────────────────────── */ [data-theme="dark"] html, [data-theme="dark"] body, [data-theme="dark"] body.pz-ds-app { background: #0d1117 !important; color: #e2e8f0 !important; } /* ── 3. Top nav ─────────────────────────────────────────────── */ [data-theme="dark"] .top-nav { background: rgba(13,17,23,0.97) !important; border-bottom-color: #1e293b !important; } /* ── 4. Bottom nav ──────────────────────────────────────────── */ [data-theme="dark"] .pz-bottom-nav { background: rgba(13,17,23,0.97) !important; border-top-color: #1e293b !important; } [data-theme="dark"] .bottom-nav-item { color: #475569 !important; } [data-theme="dark"] .bottom-nav-item.active { color: #3b82f6 !important; } [data-theme="dark"] .bottom-nav-item.active::after { background: #3b82f6 !important; } /* ── 5. Modal sheets & centers ──────────────────────────────── */ [data-theme="dark"] .modal-sheet, [data-theme="dark"] .modal-center { background: #161b27 !important; color: #e2e8f0 !important; } [data-theme="dark"] .modal-drag-handle { background: #1e293b !important; } [data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.7) !important; } /* ── 6. All cards / panels / glass ─────────────────────────── */ [data-theme="dark"] .glass, [data-theme="dark"] .pz-panel, [data-theme="dark"] .pz-stat, [data-theme="dark"] .pz-deal-card, [data-theme="dark"] .pz-quick-btn, [data-theme="dark"] .pz-overview-panel, [data-theme="dark"] .pz-acct-profile-card, [data-theme="dark"] .pz-acct-section-card, [data-theme="dark"] .pz-acct-menu { background: #161b27 !important; border-color: #1e293b !important; } [data-theme="dark"] .glass-gold { background: #1a1000 !important; border-color: #2a1f00 !important; } [data-theme="dark"] .glass-emerald { background: #052e16 !important; border-color: #064e25 !important; } [data-theme="dark"] .glass-red { background: #1f0808 !important; border-color: #3b0f0f !important; } /* ── 7. Menu items / rows ───────────────────────────────────── */ [data-theme="dark"] .pz-acct-menu-item { border-color: #1e293b !important; } [data-theme="dark"] .pz-acct-menu-item:active { background: #1c2333 !important; } [data-theme="dark"] .pz-acct-menu-label { color: #e2e8f0 !important; } [data-theme="dark"] .pz-acct-menu-sub { color: #94a3b8 !important; } [data-theme="dark"] .pz-acct-menu-icon { background: rgba(59,130,246,0.12) !important; color: #3b82f6 !important; } [data-theme="dark"] .pz-acct-menu-chevron { color: #1e293b !important; } /* ── 8. Notification panel ──────────────────────────────────── */ [data-theme="dark"] #notificationPanel { background: #161b27 !important; border-left-color: #1e293b !important; } [data-theme="dark"] .notif-item { background: #1c2333 !important; border-color: #1e293b !important; } [data-theme="dark"] .notif-item:hover { background: #242d40 !important; } [data-theme="dark"] .notif-title { color: #e2e8f0 !important; } [data-theme="dark"] .notif-body { color: #94a3b8 !important; } [data-theme="dark"] .notif-time { color: #475569 !important; } /* ── 9. Splash / loading screen ────────────────────────────── */ [data-theme="dark"] #splash { background: #0d1117 !important; } /* ── 10. Form fields ────────────────────────────────────────── */ [data-theme="dark"] .field, [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background: #1c2333 !important; border-color: #1e293b !important; color: #e2e8f0 !important; } [data-theme="dark"] select.field option, [data-theme="dark"] select.field optgroup { background: #1c2333 !important; color: #e2e8f0 !important; } [data-theme="dark"] .field::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #475569 !important; } [data-theme="dark"] .field-label { color: #94a3b8 !important; } [data-theme="dark"] .pz-bank-picker-panel { background: #161b27 !important; border-color: #1e293b !important; } [data-theme="dark"] .pz-bank-picker-search { border-bottom-color: #1e293b !important; } [data-theme="dark"] .pz-bank-picker-option { color: #e2e8f0 !important; } [data-theme="dark"] .pz-bank-picker-option:hover, [data-theme="dark"] .pz-bank-picker-option:active { background: #1c2333 !important; color: #3b82f6 !important; } /* ── 11. Buttons ────────────────────────────────────────────── */ [data-theme="dark"] .btn-ghost { background: #1c2333 !important; border-color: #1e293b !important; color: #e2e8f0 !important; } [data-theme="dark"] .btn-ghost:hover { background: #242d40 !important; } /* ── 12. AI Chat ────────────────────────────────────────────── */ [data-theme="dark"] #aiChat { background: #161b27 !important; color: var(--pz-ink) !important; } [data-theme="dark"] #aiChat .ai-reply { background: #1c2333 !important; color: var(--pz-ink) !important; } [data-theme="dark"] #aiChat .ai-reply strong { color: var(--pz-ink) !important; } [data-theme="dark"] .ai-user-msg { background: #0f2040 !important; border-color: #1e3a5f !important; color: #e2e8f0 !important; } /* ── 13. Fee calculator ─────────────────────────────────────── */ [data-theme="dark"] .pz-left { background: #161b27 !important; box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .pz-banner { background: #0f2040 !important; } [data-theme="dark"] .pz-irow { background: #1c2333 !important; border-color: #1e293b !important; } [data-theme="dark"] .pz-irow input { color: #e2e8f0 !important; } [data-theme="dark"] .pz-pfx { background: #0f172a !important; border-color: #1e293b !important; color: #3b82f6 !important; } [data-theme="dark"] .pz-plain { background: #1c2333 !important; border-color: #1e293b !important; color: #e2e8f0 !important; } [data-theme="dark"] .pz-trow { background: #1c2333 !important; border-color: #1e293b !important; } [data-theme="dark"] .pz-swlbl { color: #e2e8f0 !important; } [data-theme="dark"] .pz-lbl { color: #94a3b8 !important; } [data-theme="dark"] .pz-radio { border-color: #1e293b !important; color: #e2e8f0 !important; } [data-theme="dark"] .pz-radio.on { background: #0f2040 !important; border-color: #3b82f6 !important; } /* ── 14. Verify document widget ─────────────────────────────── */ [data-theme="dark"] .verify-demo { background: #161b27 !important; } [data-theme="dark"] .verify-demo-icon { background: #0f2040 !important; } [data-theme="dark"] .verify-demo-title { color: #e2e8f0 !important; } [data-theme="dark"] .verify-demo-sub { color: #94a3b8 !important; } [data-theme="dark"] .verify-input-label { color: #94a3b8 !important; } [data-theme="dark"] #verifyDocModal .verify-input { background: #1c2333 !important; border-color: #1e293b !important; color: #e2e8f0 !important; } /* ── 15. Verify result card (vr-*) ──────────────────────────── */ [data-theme="dark"] .vr-card { background: #161b27 !important; border-color: #1e293b !important; } [data-theme="dark"] .vr-header, [data-theme="dark"] .vr-foot { border-color: #1e293b !important; } [data-theme="dark"] .vr-logo-text { color: #e2e8f0 !important; } [data-theme="dark"] .vr-meta-k { color: #94a3b8 !important; } [data-theme="dark"] .vr-meta-v { color: #e2e8f0 !important; } [data-theme="dark"] .vr-foot-left, [data-theme="dark"] .vr-foot-right { color: #475569 !important; } [data-theme="dark"] .vr-id-tag { background: #1c2333 !important; color: #94a3b8 !important; } /* ── 16. Badges ─────────────────────────────────────────────── */ [data-theme="dark"] .badge-blue { background: #0f2040 !important; color: #93c5fd !important; } [data-theme="dark"] .badge-emerald { background: #052e16 !important; color: #6ee7b7 !important; } [data-theme="dark"] .badge-amber { background: #1a1000 !important; color: #fcd34d !important; } [data-theme="dark"] .badge-red { background: #1f0808 !important; color: #fca5a5 !important; } [data-theme="dark"] .badge-cyan { background: #0c2338 !important; color: #67e8f9 !important; } [data-theme="dark"] .badge-amber { background: #1c1000 !important; color: #fbbf24 !important; } [data-theme="dark"] .badge-gold { background: #1a1000 !important; color: #fbbf24 !important; } /* ── 17. Filter / tab bars ──────────────────────────────────── */ [data-theme="dark"] .pz-filter-bar { background: #161b27 !important; border-color: #1e293b !important; } [data-theme="dark"] .pz-filter-btn { color: #94a3b8 !important; } [data-theme="dark"] .pz-filter-btn.active { background: #0f2040 !important; color: #3b82f6 !important; } /* ── 18. Section titles & body text ────────────────────────── */ [data-theme="dark"] .title, [data-theme="dark"] h1,[data-theme="dark"] h2, [data-theme="dark"] h3,[data-theme="dark"] h4 { color: #e2e8f0 !important; } [data-theme="dark"] p { color: #cbd5e1; } [data-theme="dark"] .pz-text-ink { color: #e2e8f0 !important; } [data-theme="dark"] .pz-text-muted { color: #94a3b8 !important; } /* ── 19. Dividers ───────────────────────────────────────────── */ [data-theme="dark"] .pz-overview-sep, [data-theme="dark"] .pz-balance-card__divider { background: rgba(255,255,255,0.1) !important; } /* ── 20. Toggle switches ────────────────────────────────────── */ [data-theme="dark"] .pz-toggle-track { background: #1e293b !important; } /* ── 21. Notification rows in the modal ────────────────────── */ [data-theme="dark"] .pz-notif-row { border-color: #1e293b !important; } [data-theme="dark"] .pz-notif-row:active { background: #1c2333 !important; } /* ── 22. Profile / account page ────────────────────────────── */ [data-theme="dark"] .pz-acct-avatar { background: #0f2040 !important; } [data-theme="dark"] .pz-acct-profile-name { color: #e2e8f0 !important; } [data-theme="dark"] .pz-acct-profile-meta { color: #94a3b8 !important; } [data-theme="dark"] .pz-acct-status-icon-wrap { background: rgba(59,130,246,0.1) !important; color: #94a3b8 !important; } [data-theme="dark"] .pz-acct-status-icon-wrap.pz-acct-status-verified { background: rgba(16,185,129,0.12) !important; color: #10b981 !important; } [data-theme="dark"] .pz-acct-section-title { color: #e2e8f0 !important; } [data-theme="dark"] .pz-acct-status-label { color: #e2e8f0 !important; } [data-theme="dark"] .pz-acct-status-state { color: #94a3b8 !important; } /* ── 23. Deal cards text ────────────────────────────────────── */ [data-theme="dark"] .pz-deal-card__title { color: #e2e8f0 !important; } [data-theme="dark"] .pz-deal-card__meta { color: #94a3b8 !important; } /* ── 24. Wallet tab cards ───────────────────────────────────── */ [data-theme="dark"] #wallet .pz-panel, [data-theme="dark"] #wallet .glass { background: #161b27 !important; } /* ── 25. Escrow section cards ───────────────────────────────── */ [data-theme="dark"] #escrows .pz-panel, [data-theme="dark"] #escrows .glass { background: #161b27 !important; } /* ── 26. Empty states ───────────────────────────────────────── */ [data-theme="dark"] .pz-empty { background: #161b27 !important; color: #94a3b8 !important; } /* ── 27. Scrollbar ──────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #0d1117; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; } /* ── 28. Smooth theme transition ────────────────────────────── */ *, *::before, *::after { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease; } /* But don't animate things that shouldn't transition */ [data-theme="dark"] .modal-sheet, [data-theme="dark"] .modal-center, [data-theme="dark"] .pz-balance-card { transition: none; } /* ── 28b. AI Property Search hero + results ── */ [data-theme="dark"] .pz-ai-search-hero { background: linear-gradient(160deg, #0f2040 0%, #161b27 55%, #0d1117 100%); box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3); } [data-theme="dark"] .pz-ai-search-hero__glow { background: radial-gradient(circle, rgba(59,130,246,0.16) 0%, transparent 70%); } [data-theme="dark"] .pz-ai-search-hero__field, [data-theme="dark"] .pz-ai-result-card { box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 2px 10px rgba(0,0,0,0.35); } [data-theme="dark"] .pz-ai-chip:hover { background: rgba(59,130,246,0.14); } [data-theme="dark"] .pz-ai-active-chip { background: rgba(59,130,246,0.14); } [data-theme="dark"] .pz-ai-active-chip button { background: rgba(59,130,246,0.22); } [data-theme="dark"] .pz-ai-result-card__btn--ghost { background: var(--pz-surface-2); color: var(--pz-ink); } /* ── 29. Deal Room (deal-room.js uses CSS vars via --dr-*) ── */ [data-theme="dark"] { --dr-bg: #161b27; --dr-line: #1e293b; --dr-title: #e2e8f0; --dr-text: #e2e8f0; --dr-muted: #94a3b8; --dr-btn-bg: #1c2333; --dr-btn-color: #94a3b8; --dr-btn-hover: #242d40; --dr-tab-bar: #1c2333; --dr-input-bg: #1c2333; --dr-bubble-other:#1c2333; } /* ── 30. Notification cards ─────────────────────────────────── */ [data-theme="dark"] .pz-notif-card--unread { background: #1c2333 !important; border-color: #1e293b !important; border-left-color: #3b82f6 !important; opacity: 1 !important; } [data-theme="dark"] .pz-notif-card--read { background: #161b27 !important; border-color: #1e293b !important; } [data-theme="dark"] .pz-text-faint { color: #475569 !important; } /* ── 31. Linked bank rows ───────────────────────────────────── */ [data-theme="dark"] .pz-bank-row { background: #1c2333 !important; border-color: #1e293b !important; } /* ── 32. Create Listing page ─────────────────────────────────── */ /* Page header */ [data-theme="dark"] .create-listing-page header, [data-theme="dark"] header[style*="background:#fff"] { background: #161b27 !important; border-bottom-color: #1e293b !important; } /* Back button */ [data-theme="dark"] .create-listing-page header a[style*="background:#f1f5f9"] { background: #1c2333 !important; color: #94a3b8 !important; } /* Header title */ [data-theme="dark"] .create-listing-page header span[style*="color:#0f172a"] { color: #e2e8f0 !important; } /* Facility chips — unselected */ [data-theme="dark"] .facility-chip { background: #1c2333 !important; border-color: #1e293b !important; color: #94a3b8 !important; } /* Facility chips — selected */ [data-theme="dark"] .facility-chip.active { background: #1e3a8a !important; border-color: #3b82f6 !important; color: #ffffff !important; } /* Section cards */ [data-theme="dark"] .cl-section, [data-theme="dark"] .cl-card { background: #161b27 !important; border-color: #1e293b !important; } /* Labels */ [data-theme="dark"] .cl-label { color: #94a3b8 !important; } [data-theme="dark"] .cl-label span[style*="color:#94a3b8"] { color: #475569 !important; } /* Subtle / faint text */ [data-theme="dark"] [style*="color:#94a3b8"], [data-theme="dark"] [style*="color:#64748b"], [data-theme="dark"] [style*="color:#475569"] { color: #94a3b8 !important; } /* Body text / ink text that stays dark */ [data-theme="dark"] [style*="color:#0f172a"], [data-theme="dark"] [style*="color:#1e293b"], [data-theme="dark"] [style*="color:#0a0a1a"] { color: #e2e8f0 !important; } /* "Listed by" card on the listing detail page keeps a light background in both themes (like the Premium Properties card), so its text must stay pinned to light-mode-safe colors — otherwise the broad catch-alls above (meant for text sitting directly on the dark page) wash it out. */ [data-theme="dark"] .pz-listed-by-name { color: #0f172a !important; } [data-theme="dark"] .pz-listed-by-role { color: #64748b !important; } [data-theme="dark"] .pz-listed-by-meta { color: #94a3b8 !important; } /* ── 33. Global subtle text fix (dashboard labels, hints) ───── */ /* Any element using pz-muted variable — ensure it's readable in dark */ [data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-slate-400, [data-theme="dark"] .text-slate-500 { color: #94a3b8 !important; } /* Input labels and helper text */ [data-theme="dark"] label, [data-theme="dark"] .field-label { color: #94a3b8 !important; } /* Section subtitles and descriptions */ [data-theme="dark"] .pz-acct-menu-sub, [data-theme="dark"] .pz-stat__label, [data-theme="dark"] .pz-deal-card__meta { color: #94a3b8 !important; } /* Any remaining hardcoded dark text in inline styles */ [data-theme="dark"] [style*="color:var(--pz-muted)"] { color: #94a3b8 !important; } [data-theme="dark"] [style*="color:var(--pz-ink)"] { color: #e2e8f0 !important; } /* ═══════════════════════════════════════════════════════════════ CRITICAL: Re-override CSS variables at body level (body.pz-ds-app sets --pz-muted:#475569 which beats :root) ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] body, [data-theme="dark"] body.pz-ds-app, [data-theme="dark"] body.pz-ds-light, [data-theme="dark"] .pz-ds-light, [data-theme="dark"] .pz-ds-app { --pz-ink: #e2e8f0 !important; --pz-ink-secondary: #cbd5e1 !important; --pz-muted: #94a3b8 !important; --pz-faint: #475569 !important; --pz-white: #0d1117 !important; --pz-surface: #161b27 !important; --pz-surface-2: #1c2333 !important; --pz-line: #1e293b !important; --pz-line-soft: #131c2e !important; --pz-blue: #3b82f6 !important; --pz-blue-mist: #0f2040 !important; --pz-green: #10b981 !important; --pz-gold: #fbbf24 !important; --pz-danger: #f87171 !important; } /* ── Placeholder text — all contexts ────────────────────────── */ [data-theme="dark"] ::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder, [data-theme="dark"] .pz-ds-light input::placeholder, [data-theme="dark"] .pz-ds-light textarea::placeholder, [data-theme="dark"] .cl-input::placeholder, [data-theme="dark"] .cl-textarea::placeholder, [data-theme="dark"] .pz-input::placeholder, [data-theme="dark"] .field::placeholder, [data-theme="dark"] .verify-input::placeholder, [data-theme="dark"] #verifyInputModal::placeholder { color: #475569 !important; opacity: 1 !important; } /* ── detail-label (escrow-detail.html left-side labels) ─────── */ [data-theme="dark"] .detail-label { color: #94a3b8 !important; } [data-theme="dark"] .detail-value { color: #e2e8f0 !important; } [data-theme="dark"] .detail-row { border-bottom-color: #1e293b !important; } /* ── vr-meta-k (verify result left labels) ──────────────────── */ [data-theme="dark"] .vr-meta-k { color: #94a3b8 !important; } [data-theme="dark"] .vr-meta-v { color: #e2e8f0 !important; } /* ── Section card borders in escrow-detail ──────────────────── */ [data-theme="dark"] .ed-card, [data-theme="dark"] .detail-card, [data-theme="dark"] [class*="detail-card"], [data-theme="dark"] [class*="fee-card"], [data-theme="dark"] [class*="desc-card"] { background: #161b27 !important; border-color: #1e293b !important; } /* ── pz-stat labels in wallet/escrow tabs ───────────────────── */ [data-theme="dark"] .pz-stat__label, [data-theme="dark"] .pz-stat__value { color: #e2e8f0 !important; } [data-theme="dark"] .pz-stat__label { color: #94a3b8 !important; } /* ── cl-label in create-listing ─────────────────────────────── */ [data-theme="dark"] .cl-label { color: #94a3b8 !important; } [data-theme="dark"] .cl-section-title { color: #e2e8f0 !important; } /* ── 34. Listing detail page (listing.html) ───────────────────── This page has its own self-contained