/* ===================================================== AGENTLOCKER — Dark Mode Applied only when is set. Zero changes to light-mode styles. ===================================================== */ /* ── Base ───────────────────────────────────────────── */ html.dark body { background-color: #0f172a; color: #e2e8f0; } html.dark main { background-color: #0f172a; } /* ── White / light surface overrides ───────────────── */ /* Cards slightly lighter than page bg */ html.dark .bg-white { background-color: #1f2f47 !important; } html.dark .bg-gray-50 { background-color: #162032 !important; } html.dark .bg-gray-100 { background-color: #1a2638 !important; } html.dark .bg-gray-200 { background-color: #243448 !important; } html.dark .bg-gray-800 { background-color: #0f172a !important; } html.dark .bg-gray-900 { background-color: #080d18 !important; } /* ── Gradient sections ──────────────────────────────── */ /* Featured Agents top section (from-white to-gray-50) */ html.dark .bg-gradient-to-b { background: #0f172a !important; } html.dark .from-white { --tw-gradient-from: #0f172a !important; } html.dark .to-gray-50 { --tw-gradient-to: #162032 !important; } /* Decorative via-white divider strip — kill the gradient entirely */ html.dark .via-white { --tw-gradient-stops: transparent, transparent, transparent !important; background-image: none !important; } /* Any horizontal gradient that starts/ends transparent with a white mid-stop */ html.dark .bg-gradient-to-r.from-transparent { background-image: none !important; background-color: transparent !important; } /* The whole Featured Agents outer wrapper gradient */ html.dark .bg-gradient-to-b.from-white, html.dark .bg-gradient-to-b { background-image: none !important; background-color: #0f172a !important; } /* Sidebar header bar: from-gray-50 to-gray-100 */ html.dark .from-gray-50 { --tw-gradient-from: #162032 !important; } html.dark .to-gray-100 { --tw-gradient-to: #1a2638 !important; } /* Partners section: from-blue-50 to-indigo-50 */ html.dark .from-blue-50 { --tw-gradient-from: #0f1e35 !important; } html.dark .to-indigo-50 { --tw-gradient-to: #111a35 !important; } /* Blue/indigo/green/purple tinted flat backgrounds */ html.dark .bg-blue-50 { background-color: #0f1e35 !important; } html.dark .bg-indigo-50 { background-color: #111a35 !important; } html.dark .bg-blue-100 { background-color: #1a2d4a !important; } html.dark .bg-indigo-100 { background-color: #1a2040 !important; } html.dark .bg-green-50 { background-color: #0e2218 !important; } html.dark .bg-green-100 { background-color: #0f2a1a !important; } html.dark .bg-purple-50 { background-color: #1a1030 !important; } html.dark .bg-purple-100 { background-color: #1f1238 !important; } html.dark .bg-pink-50 { background-color: #2a0f1e !important; } html.dark .bg-yellow-50 { background-color: #1f1a0a !important; } html.dark .bg-red-50 { background-color: #2a0f0f !important; } /* ── Text overrides — lighter for readability ───────── */ html.dark .text-gray-900 { color: #f1f5f9 !important; } html.dark .text-gray-800 { color: #e2e8f0 !important; } html.dark .text-gray-700 { color: #cbd5e1 !important; } html.dark .text-gray-600 { color: #b0c4d8 !important; } /* card body text */ html.dark .text-gray-500 { color: #8fa5be !important; } /* muted / meta text */ html.dark .text-gray-400 { color: #637d98 !important; } /* ── Border overrides — more visible dividers ───────── */ html.dark .border-gray-100 { border-color: #243448 !important; } html.dark .border-gray-200 { border-color: #5a7898 !important; } /* darker dividers */ html.dark .border-gray-300 { border-color: #4a6080 !important; } html.dark .divide-gray-200 > * + * { border-color: #3d5472 !important; } /* ── Shadows (darker bg needs softer glow) ──────────── */ html.dark .shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,0.55) !important; } html.dark .shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.55) !important; } html.dark .shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.60) !important; } html.dark .shadow-xl { box-shadow: 0 12px 40px rgba(0,0,0,0.65) !important; } /* Featured agent card border (shadow-xl cards on the featured row) */ html.dark .shadow-xl, html.dark .hover\:shadow-2xl:hover { outline: 2px solid #6b8db0; } /* ── Form controls ──────────────────────────────────── */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.dark textarea, html.dark select { background-color: #1f2f47 !important; border-color: #3d5472 !important; color: #e2e8f0 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #637d98 !important; } html.dark .form-input, html.dark .form-textarea, html.dark .form-select { background-color: #1f2f47; border-color: #3d5472; color: #e2e8f0; } /* ── Upvote buttons ─────────────────────────────────── */ /* Unauthenticated or normal upvote button */ html.dark form[hx-post] button, html.dark a[href*="login"][class*="inline-flex"][class*="border-gray"] { background-color: #243550 !important; border-color: #4a6282 !important; color: #9ab8d4 !important; } html.dark form[hx-post] button i, html.dark a[href*="login"][class*="inline-flex"] i { color: #7a9dbf !important; } /* Voted (purple) state — keep purple, just lighten bg slightly */ html.dark form[hx-post] button.bg-purple-50 { background-color: rgba(139,92,246,0.15) !important; border-color: rgba(139,92,246,0.35) !important; color: #c4b5fd !important; } /* ── Dropdowns / menus ──────────────────────────────── */ html.dark #auth-menu-dropdown, html.dark #user-menu-dropdown, html.dark [id$="-dropdown"] { background-color: #1f2f47 !important; border-color: #3d5472 !important; } html.dark .ring-black { --tw-ring-color: rgba(255,255,255,0.06) !important; } html.dark .menu-item { background-color: transparent !important; color: #cbd5e1 !important; } html.dark .menu-item:hover { background-color: #2a3f5f !important; color: #e2e8f0 !important; } /* ── Cards ──────────────────────────────────────────── */ html.dark .agent-card, html.dark .category-card, html.dark .review-card, html.dark .pricing-card { background-color: #1f2f47 !important; } /* ── News excerpt text ──────────────────────────────── */ /* .text-gray-600 already covered above; extra specificity for paragraphs */ html.dark p.text-gray-600, html.dark .text-gray-600.line-clamp-2, html.dark .text-gray-600.line-clamp-3, html.dark .mt-3.text-gray-600 { color: #b0c4d8 !important; } /* ── Article content ────────────────────────────────── */ html.dark .article-content { color: #cbd5e1; } html.dark .article-content h1, html.dark .article-content h2, html.dark .article-content h3, html.dark .article-content h4 { color: #f1f5f9; } html.dark .article-content a { color: #60a5fa; } html.dark .article-content blockquote { background: #1f2f47; border-left-color: #6366f1; color: #94a3b8; } html.dark .article-content code { background: #243448; color: #93c5fd; } html.dark .article-content pre { background: #0f172a; } html.dark .article-content th, html.dark .article-content td { border-color: #3d5472; } /* ── Tables ─────────────────────────────────────────── */ html.dark table { color: #e2e8f0; } html.dark thead { background-color: #1f2f47 !important; } html.dark tbody tr:hover { background-color: #243550 !important; } html.dark td, html.dark th { border-color: #3d5472 !important; } /* ── Badges / pills ─────────────────────────────────── */ html.dark .badge-blue { background-color: rgba(59,130,246,0.2) !important; color: #93c5fd !important; } html.dark .badge-green { background-color: rgba(16,185,129,0.2) !important; color: #6ee7b7 !important; } html.dark .badge-red { background-color: rgba(239,68,68,0.2) !important; color: #fca5a5 !important; } /* ── Alert overrides ────────────────────────────────── */ html.dark .alert-success { background-color: rgba(16,185,129,0.15) !important; color: #6ee7b7 !important; } html.dark .alert-error { background-color: rgba(239,68,68,0.15) !important; color: #fca5a5 !important; } html.dark .alert-warning { background-color: rgba(245,158,11,0.15) !important; color: #fcd34d !important; } html.dark .alert-info { background-color: rgba(59,130,246,0.15) !important; color: #93c5fd !important; } /* ── Hover backgrounds ──────────────────────────────── */ html.dark .hover\:bg-gray-50:hover { background-color: #243550 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #2a3f5f !important; } /* ── Miscellaneous ──────────────────────────────────── */ html.dark hr { border-color: #3d5472 !important; } html.dark .loading, html.dark .loading-text, html.dark .loading-circle { background-color: #243448 !important; } /* Search bar */ html.dark .bg-gray-100.rounded-full { background-color: #1f2f47 !important; color: #e2e8f0 !important; } /* Agent type selector bar */ html.dark .inline-flex.rounded-lg.bg-gray-100 { background-color: #162032 !important; } /* Category filter selects */ html.dark select.appearance-none { background-color: #1f2f47 !important; border-color: #3d5472 !important; color: #e2e8f0 !important; } /* ── Quill editor ───────────────────────────────────── */ html.dark .ql-toolbar.ql-snow { background: #1f2f47 !important; border-color: #3d5472 !important; } html.dark .ql-container.ql-snow { border-color: #3d5472 !important; } html.dark .ql-editor { background: #0f172a !important; color: #e2e8f0 !important; } html.dark .ql-editor.ql-blank::before { color: #637d98 !important; } html.dark .ql-stroke { stroke: #94a3b8 !important; } html.dark .ql-fill { fill: #94a3b8 !important; } html.dark .ql-picker-label { color: #94a3b8 !important; } html.dark .ql-picker-options { background: #1f2f47 !important; border-color: #3d5472 !important; } /* ── Smooth transition ──────────────────────────────── */ html { transition: background-color 0.2s ease, color 0.2s ease; }