/* ========================================================================== Dark Mode — URBot.net Toggled via data-theme="dark" on element. Uses CSS custom properties for seamless theming. Smooth 300ms transition between light and dark. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TRANSITION — smooth mode switch -------------------------------------------------------------------------- */ html.urbot-theme-transitioning, html.urbot-theme-transitioning *, html.urbot-theme-transitioning *::before, html.urbot-theme-transitioning *::after { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, fill 300ms ease, stroke 300ms ease !important; } /* -------------------------------------------------------------------------- 2. DARK MODE CUSTOM PROPERTIES -------------------------------------------------------------------------- */ html[data-theme="dark"] { --bg-primary: #0f0f1a; --bg-secondary: #161625; --bg-card: #1a1a2e; --bg-card-hover: #22223a; --bg-input: #1e1e32; --bg-overlay: rgba(0, 0, 0, 0.6); --border: rgba(255, 255, 255, 0.08); --border-bright: rgba(99, 102, 241, 0.4); --border-subtle: rgba(255, 255, 255, 0.04); --text: #e2e8f0; --text-dim: #94a3b8; --text-muted: #64748b; --text-heading: #f1f5f9; --text-inverse: #0f0f1a; --accent: #818cf8; --accent-hover: #6366f1; --accent-glow: rgba(99, 102, 241, 0.2); --accent-rgb: 129, 140, 248; --success: #34d399; --warning: #fbbf24; --error: #f87171; --info: #60a5fa; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* -------------------------------------------------------------------------- 3. GLOBAL ELEMENT OVERRIDES -------------------------------------------------------------------------- */ html[data-theme="dark"] body { background: var(--bg-primary); color: var(--text); } html[data-theme="dark"] body { background-image: none; background: linear-gradient(180deg, #0f0f1a 0%, #12122a 50%, #0f0f1a 100%); } /* Headings */ 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: var(--text-heading); } /* Links */ html[data-theme="dark"] a { color: var(--accent); } html[data-theme="dark"] a:hover { color: var(--accent-hover); } /* -------------------------------------------------------------------------- 4. CARDS & CONTAINERS -------------------------------------------------------------------------- */ html[data-theme="dark"] .card, html[data-theme="dark"] .tier-card, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .bot-card, html[data-theme="dark"] .category-card, html[data-theme="dark"] .pricing-card, html[data-theme="dark"] .info-card, html[data-theme="dark"] .review-card, html[data-theme="dark"] .testimonial-card { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-sm); } html[data-theme="dark"] .card:hover, html[data-theme="dark"] .tier-card:hover, html[data-theme="dark"] .bot-card:hover { background: var(--bg-card-hover); border-color: var(--border-bright); } html[data-theme="dark"] section, html[data-theme="dark"] .section { background: transparent; } /* -------------------------------------------------------------------------- 5. FORM ELEMENTS -------------------------------------------------------------------------- */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--bg-input); color: var(--text); border-color: var(--border); } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-muted); } /* -------------------------------------------------------------------------- 6. BUTTONS -------------------------------------------------------------------------- */ html[data-theme="dark"] .btn, html[data-theme="dark"] .cta-btn, html[data-theme="dark"] button:not(.urbot-dark-toggle) { color: var(--text); } html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .cta-btn-primary { background: var(--accent); color: #fff; } html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .cta-btn-secondary { background: var(--bg-card); border-color: var(--border); color: var(--text); } /* -------------------------------------------------------------------------- 7. NAVIGATION & HEADER -------------------------------------------------------------------------- */ html[data-theme="dark"] header, html[data-theme="dark"] .site-header, html[data-theme="dark"] nav, html[data-theme="dark"] .navbar { background: rgba(15, 15, 26, 0.92); border-color: var(--border); backdrop-filter: blur(12px); } html[data-theme="dark"] .nav-link, html[data-theme="dark"] .nav-item a { color: var(--text-dim); } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-item a:hover { color: var(--text); } /* -------------------------------------------------------------------------- 8. FOOTER -------------------------------------------------------------------------- */ html[data-theme="dark"] footer, html[data-theme="dark"] .site-footer { background: #0a0a14; color: var(--text-dim); border-top-color: var(--border); } /* -------------------------------------------------------------------------- 9. CHAT INTERFACE -------------------------------------------------------------------------- */ html[data-theme="dark"] .chat-input-bar, html[data-theme="dark"] .urbot-chat-input-bar, html[data-theme="dark"] .ulp-input-bar { background: var(--bg-secondary); border-color: var(--border); } html[data-theme="dark"] .chat-message.bot, html[data-theme="dark"] .ulp-message.bot, html[data-theme="dark"] .message-bubble.bot { background: var(--bg-card); color: var(--text); } html[data-theme="dark"] .chat-message.user, html[data-theme="dark"] .ulp-message.user, html[data-theme="dark"] .message-bubble.user { background: var(--accent); color: #fff; } /* -------------------------------------------------------------------------- 10. MODALS & POPUPS -------------------------------------------------------------------------- */ html[data-theme="dark"] .modal, html[data-theme="dark"] .popup, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .tooltip { background: var(--bg-card); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-lg); } /* -------------------------------------------------------------------------- 11. TABLES -------------------------------------------------------------------------- */ html[data-theme="dark"] table { border-color: var(--border); } html[data-theme="dark"] th { background: var(--bg-secondary); color: var(--text-heading); border-color: var(--border); } html[data-theme="dark"] td { border-color: var(--border); color: var(--text); } html[data-theme="dark"] tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } /* -------------------------------------------------------------------------- 12. CODE BLOCKS -------------------------------------------------------------------------- */ html[data-theme="dark"] code, html[data-theme="dark"] pre { background: #12122a; color: #a5b4fc; border-color: var(--border); } /* -------------------------------------------------------------------------- 13. SCROLLBAR -------------------------------------------------------------------------- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* -------------------------------------------------------------------------- 14. IMAGES & SVG — reduce brightness slightly -------------------------------------------------------------------------- */ html[data-theme="dark"] img:not([src*=".svg"]):not(.no-dark-filter) { filter: brightness(0.9); } /* -------------------------------------------------------------------------- 15. SPECIFIC LANDING PAGE OVERRIDES -------------------------------------------------------------------------- */ html[data-theme="dark"] .hero-section, html[data-theme="dark"] .hero { background: linear-gradient(180deg, #0f0f1a 0%, #161630 100%); } html[data-theme="dark"] .stats-bar, html[data-theme="dark"] .trust-bar { background: var(--bg-secondary); border-color: var(--border); } html[data-theme="dark"] .badge, html[data-theme="dark"] .tag, html[data-theme="dark"] .chip, html[data-theme="dark"] .filter-chip { background: var(--bg-card); color: var(--text-dim); border-color: var(--border); } html[data-theme="dark"] .badge.active, html[data-theme="dark"] .filter-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* -------------------------------------------------------------------------- 16. DARK TOGGLE BUTTON STYLES -------------------------------------------------------------------------- */ .urbot-dark-toggle { position: fixed; bottom: 20px; left: 20px; z-index: 99990; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, border-color 0.3s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .urbot-dark-toggle:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .urbot-dark-toggle:active { transform: scale(0.95); } /* Dark mode variant of the toggle button */ html[data-theme="dark"] .urbot-dark-toggle { background: rgba(26, 26, 46, 0.9); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .urbot-dark-toggle:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* Icons inside toggle */ .urbot-dark-toggle .icon-moon, .urbot-dark-toggle .icon-sun { width: 20px; height: 20px; transition: opacity 0.3s ease, transform 0.3s ease; position: absolute; } .urbot-dark-toggle .icon-moon { opacity: 1; transform: rotate(0deg); } .urbot-dark-toggle .icon-sun { opacity: 0; transform: rotate(-90deg); } html[data-theme="dark"] .urbot-dark-toggle .icon-moon { opacity: 0; transform: rotate(90deg); } html[data-theme="dark"] .urbot-dark-toggle .icon-sun { opacity: 1; transform: rotate(0deg); } /* Mobile: shift above bottom nav if present */ @media (max-width: 767px) { .urbot-dark-toggle { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); left: 14px; width: 38px; height: 38px; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { html.urbot-theme-transitioning, html.urbot-theme-transitioning *, .urbot-dark-toggle, .urbot-dark-toggle .icon-moon, .urbot-dark-toggle .icon-sun { transition: none !important; } }