/* =========================================================== Poseidon — Dark Theme Enabled by adding [data-theme="dark"] on element. =========================================================== */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"] body { background: radial-gradient(circle at top left, rgba(239, 51, 64, .14), transparent 32rem), linear-gradient(180deg, #0b1020 0%, #0c1124 42%, #0a0f1f 100%) !important; color: #e6e8ef !important; } /* ---------- Typography ---------- */ html[data-theme="dark"] .pf-title, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #f5f7fb !important; } html[data-theme="dark"] .pf-muted, html[data-theme="dark"] body:not(footer) .text-gray-600, html[data-theme="dark"] body:not(footer) .text-gray-500, html[data-theme="dark"] body:not(footer) .text-gray-400, html[data-theme="dark"] .bg-white .text-gray-600, html[data-theme="dark"] .bg-white .text-gray-500, html[data-theme="dark"] .bg-white .text-gray-400, html[data-theme="dark"] .bg-gray-50 .text-gray-600, html[data-theme="dark"] .bg-gray-50 .text-gray-500, html[data-theme="dark"] .bg-gray-100 .text-gray-600 { color: #b6bccb !important; } html[data-theme="dark"] .text-gray-950, html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-slate-950, html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-slate-800, html[data-theme="dark"] .text-slate-700, html[data-theme="dark"] .text-black { color: #e8ebf3 !important; } /* When the page applies an explicit dark-on-dark text, make it readable. */ html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400 { color: #b6bccb !important; } /* Keep dark hero sections readable (they already have white text). */ html[data-theme="dark"] [class*="bg-[#080b14]"], html[data-theme="dark"] [class*="bg-[#28125f]"], html[data-theme="dark"] [class*="from-slate-900"], html[data-theme="dark"] [class*="via-blue-900"], html[data-theme="dark"] [class*="to-slate-800"] { color: #ffffff !important; } html[data-theme="dark"] a { color: inherit; } /* ---------- Surfaces ---------- */ html[data-theme="dark"] .pf-card, html[data-theme="dark"] .card-shadow, html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-white\/95, html[data-theme="dark"] .bg-white\/90, html[data-theme="dark"] .bg-white\/80, html[data-theme="dark"] .bg-white.rounded-xl, html[data-theme="dark"] .bg-white.rounded-2xl, html[data-theme="dark"] .bg-white.rounded-3xl { background: rgba(20, 26, 45, .88) !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: 0 18px 45px rgba(0, 0, 0, .45) !important; color: #e6e8ef !important; } /* Force child text colors inside re-themed light surfaces */ html[data-theme="dark"] .bg-white .text-gray-700, html[data-theme="dark"] .bg-white .text-gray-800, html[data-theme="dark"] .bg-white .text-gray-900, html[data-theme="dark"] .bg-white .text-gray-950, html[data-theme="dark"] .bg-gray-50 .text-gray-700, html[data-theme="dark"] .bg-gray-50 .text-gray-800, html[data-theme="dark"] .bg-gray-50 .text-gray-900, html[data-theme="dark"] .bg-gray-50 .text-gray-950 { color: #f1f3fa !important; } /* Tiny semantic colour accents (emerald, amber, red) need a brighter shade on dark */ html[data-theme="dark"] .text-emerald-600 { color: #4ade80 !important; } html[data-theme="dark"] .text-emerald-700 { color: #86efac !important; } html[data-theme="dark"] .text-amber-600 { color: #fbbf24 !important; } html[data-theme="dark"] .text-red-500 { color: #ff6b73 !important; } html[data-theme="dark"] .text-red-600 { color: #ff7a82 !important; } html[data-theme="dark"] .text-indigo-600 { color: #a5b4fc !important; } html[data-theme="dark"] .pf-surface { background: rgba(20, 26, 45, .85) !important; border: 1px solid rgba(255, 255, 255, .08) !important; color: #e6e8ef !important; } html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-slate-100 { background: rgba(16, 22, 38, .9) !important; color: #e6e8ef !important; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-300, html[data-theme="dark"] .border-slate-100, html[data-theme="dark"] .border-slate-200 { border-color: rgba(255, 255, 255, .1) !important; } /* ---------- Navigation ---------- */ html[data-theme="dark"] nav.site-nav { background: rgba(11, 15, 30, .88) !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, .4) !important; } html[data-theme="dark"] .nav-link { color: #cdd3e1 !important; } html[data-theme="dark"] .nav-link:hover { color: #ff5b66 !important; } html[data-theme="dark"] #mobile-menu { background: rgba(11, 15, 30, .96) !important; border-top: 1px solid rgba(255, 255, 255, .08) !important; } html[data-theme="dark"] #mobile-menu a { color: #d6dbe8 !important; } html[data-theme="dark"] #mobile-menu a:hover { background: rgba(255, 255, 255, .06) !important; } html[data-theme="dark"] #mobile-menu-btn, html[data-theme="dark"] #theme-toggle, html[data-theme="dark"] #theme-toggle-mobile { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .14) !important; color: #f1f3f9 !important; } /* ---------- Buttons ---------- */ html[data-theme="dark"] .pf-btn-light { background: rgba(255, 255, 255, .08) !important; color: #f1f3f9 !important; border: 1px solid rgba(255, 255, 255, .14) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .35) !important; } html[data-theme="dark"] .pf-btn-light:hover { background: rgba(255, 255, 255, .12) !important; } /* ---------- Inputs / Forms ---------- */ html[data-theme="dark"] .pf-input, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="file"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: rgba(15, 21, 38, .9) !important; border-color: rgba(255, 255, 255, .12) !important; color: #ecf0f8 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #8a93a8 !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: rgba(239, 51, 64, .55) !important; box-shadow: 0 0 0 5px rgba(239, 51, 64, .16) !important; } /* ---------- Tables ---------- */ html[data-theme="dark"] table { background: rgba(20, 26, 45, .88) !important; color: #e6e8ef !important; } html[data-theme="dark"] thead, html[data-theme="dark"] thead tr, html[data-theme="dark"] thead th { background: rgba(255, 255, 255, .04) !important; color: #cdd3e1 !important; border-color: rgba(255, 255, 255, .08) !important; } html[data-theme="dark"] tbody tr { border-color: rgba(255, 255, 255, .06) !important; } html[data-theme="dark"] tbody tr:hover { background: rgba(255, 255, 255, .03) !important; } /* ---------- Chips / Pills ---------- */ html[data-theme="dark"] .pf-chip { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .12) !important; color: #dde1ec !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .3) !important; } html[data-theme="dark"] .pf-chip:hover, html[data-theme="dark"] .pf-chip.active { background: rgba(255, 91, 102, .18) !important; border-color: rgba(255, 91, 102, .45) !important; color: #ffd9dc !important; } /* ---------- Flash messages ---------- */ html[data-theme="dark"] .fixed.top-24 > .bg-white, html[data-theme="dark"] .fixed.top-24.bg-white, html[data-theme="dark"] .fixed.top-24 { background: rgba(20, 26, 45, .96) !important; border-color: rgba(255, 255, 255, .1) !important; } /* ---------- Property cards stay dark, just tweak shadows ---------- */ html[data-theme="dark"] .pf-property-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .5) !important; } /* ---------- Footer stays the same dark style ---------- */ html[data-theme="dark"] footer { background: #06080f !important; } /* ---------- Theme toggle button ---------- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; width: 44px; border-radius: 999px; border: 1px solid var(--line, #e6e8ef); background: #fff; color: #344054; box-shadow: 0 5px 16px rgba(15, 23, 42, .06); transition: transform .2s ease, background .2s ease, color .2s ease; } .theme-toggle-btn:hover { transform: translateY(-1px); } .theme-toggle-btn .icon-sun { display: none; } .theme-toggle-btn .icon-moon { display: inline-block; } html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: inline-block; } html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; } .theme-toggle-mobile { display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .75rem 1rem; border-radius: 1rem; border: 1px solid var(--line, #e6e8ef); background: #fff; color: #344054; font-weight: 800; } html[data-theme="dark"] .theme-toggle-mobile { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .14) !important; color: #f1f3f9 !important; } .theme-toggle-mobile .icon-sun { display: none; } .theme-toggle-mobile .icon-moon { display: inline-block; } html[data-theme="dark"] .theme-toggle-mobile .icon-sun { display: inline-block; } html[data-theme="dark"] .theme-toggle-mobile .icon-moon { display: none; } .theme-toggle-mobile .label-light { display: none; } .theme-toggle-mobile .label-dark { display: inline; } html[data-theme="dark"] .theme-toggle-mobile .label-light { display: inline; } html[data-theme="dark"] .theme-toggle-mobile .label-dark { display: none; }