/* ================================================================ DARK MODE — html.dark overrides Covers: body, nav, footer, buttons, modals, forms, blog, tool sections, alerts, toasts, cards, dropdowns. All selectors prefixed with html.dark for specificity. Uses !important to override Tailwind arbitrary-value classes. ================================================================ */ /* ================================================================ HOW TO READ THIS FILE All rules are prefixed html.dark so they only apply when the element carries the .dark class (toggled by JS). !important is required to beat Tailwind arbitrary-value classes. ================================================================ */ /* ── Dark palette variables ─────────────────────────────────── */ html.dark { --dk-bg: #0e0c1a; --dk-surface: #19172a; --dk-surface-2: #231f38; --dk-surface-3: #2d2848; --dk-border: #352f55; --dk-border-light:#2a2442; --dk-text: #e9e5f8; --dk-text-muted: #a89fd4; --dk-text-dim: #6b6393; --dk-accent: #8b7ef8; --dk-accent-light:#b8aeff; --dk-accent-bg: #1e1a36; --dk-red: #ff6b70; } /* ── Base ───────────────────────────────────────────────────── */ html.dark body { background-color: var(--dk-bg) !important; color: #ffffff !important; } html.dark ::selection { background: var(--dk-accent); color: #fff; } /* ── Scrollbar ─────────────────────────────────────────────── */ html.dark ::-webkit-scrollbar-track { background: var(--dk-surface); } html.dark ::-webkit-scrollbar-thumb { background-color: #4a4080; } html.dark ::-webkit-scrollbar-thumb:hover { background-color: var(--dk-accent); } /* ================================================================ NAVIGATION / HEADER ================================================================ */ html.dark #mainNav { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important; } /* Logo text */ html.dark #mainNav .font-semibold { color: #ffffff !important; } /* Nav links */ html.dark #mainNav a, html.dark #mainNav button { color: var(--dk-text-muted) !important; } html.dark #mainNav a:hover, html.dark #mainNav button:hover { color: var(--dk-accent-light) !important; } /* Profile button */ html.dark #mainNav .user-profile > button { color: #ffffff !important; } /* Account text */ html.dark #mainNav span.text-\[\#0D0560\] { color: #ffffff !important; } /* Profile dropdown */ html.dark #profileDropdown { background-color: var(--dk-surface) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; border: 1px solid var(--dk-border) !important; } html.dark #profileDropdown .px-3.pt-3\.5 { background: linear-gradient(135deg, var(--dk-surface-2), var(--dk-surface)) !important; } html.dark #profileDropdown p { color: #ffffff !important; } html.dark #profileDropdown .text-\[\#8E93A6\] { color: var(--dk-text-dim) !important; } html.dark #profileDropdown .text-\[\#0D0560\] { color: #ffffff !important; } html.dark #profileDropdown span.text-\[\#3B3389\] { color: var(--dk-text-muted) !important; } html.dark #profileDropdown a:hover { background-color: rgba(139,126,248,0.1) !important; } html.dark #profileDropdown span.text-\[\#FF383C\] { color: var(--dk-red) !important; } /* Mobile menu */ html.dark #mobileMenuContent { background-color: var(--dk-surface) !important; } html.dark #mobileMenuContent .bg-linear-to-br { background: var(--dk-surface-2) !important; } html.dark #mobileMenuContent .h-px { background: var(--dk-border) !important; } html.dark #mobileMenuContent p { color: #ffffff !important; } /* Burger dots */ html.dark #mobileMenuBtn span { background-color: #ffffff !important; } /* Dark mode toggle button in nav */ #darkModeToggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #CECCE0; background: linear-gradient(180deg, #ffffff 0%, #f4f1ff 100%); cursor: pointer; transition: all 0.3s ease; flex-shrink: 0; } #darkModeToggle:hover { border-color: #6b5ee0; background: linear-gradient(180deg, #f0eeff 0%, #e8e2ff 100%); } html.dark #darkModeToggle { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html.dark #darkModeToggle:hover { background: var(--dk-surface-3) !important; border-color: var(--dk-accent) !important; } /* Sun icon shown in dark, Moon icon shown in light */ #darkModeToggle .icon-moon { display: block; } #darkModeToggle .icon-sun { display: none; } html.dark #darkModeToggle .icon-moon { display: none; } html.dark #darkModeToggle .icon-sun { display: block; } /* ================================================================ FOOTER ================================================================ */ html.dark footer > div { background: linear-gradient(to top, #0b0916 0%, #13102280%) !important; } html.dark footer .bg-linear-to-t { background: linear-gradient(to top, #0b0916 0%, #131022 100%) !important; } /* CTA banner inside footer */ html.dark footer .bg-linear-to-t.from-\[\#2E2165\] { background: linear-gradient(to top, #1a1535 0%, #0d0b1e 100%) !important; } /* Footer borders */ html.dark footer .border-\[\#CECCE0\], html.dark footer .bg-\[\#CECCE0\] { /* border-color: var(--dk-border) !important; background-color: var(--dk-border) !important; */ } /* Footer links */ html.dark footer a, html.dark footer .text-\[\#998FB6\] { color: var(--dk-text-muted) !important; } html.dark footer a:hover { color: var(--dk-accent-light) !important; } /* Footer logo text */ html.dark footer .text-\[\#0A0449\] { color: #ffffff !important; } /* Copyright */ html.dark footer .p-small { color: var(--dk-text-dim) !important; } /* Social icon circles */ html.dark footer li.bg-white { background-color: var(--dk-surface-2) !important; } /* TrustPilot popup */ html.dark .trustpilot-popup { background-color: var(--dk-surface) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important; } html.dark .trust_pilot_text { color: #ffffff !important; } html.dark .trust_pilot_link { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text-muted) !important; } /* ================================================================ GLOBAL ELEMENTS ================================================================ */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: #ffffff !important; } html.dark p { color: var(--dk-text-muted) !important; } html.dark a { color: var(--dk-accent) !important; } html.dark a:hover { color: var(--dk-accent-light) !important; } html.dark input, html.dark textarea, html.dark select { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: #ffffff !important; } html.dark input:hover, html.dark input:focus, html.dark textarea:hover, html.dark textarea:focus { border-color: var(--dk-accent) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--dk-text-dim) !important; } /* ================================================================ BUTTONS ================================================================ */ html.dark .lg-light-btn, html.dark .base-light-btn, html.dark .small-light-btn { background: linear-gradient(180deg, var(--dk-surface-2) 0%, var(--dk-surface-3) 100%) !important; border-color: var(--dk-border) !important; color: #ffffff !important; } html.dark .lg-light-btn:hover, html.dark .base-light-btn:hover, html.dark .small-light-btn:hover { border-color: var(--dk-accent) !important; } html.dark .lg-light-btn::before, html.dark .base-light-btn::before, html.dark .small-light-btn::before { background: linear-gradient(180deg, var(--dk-surface-3) 0%, var(--dk-surface-2) 100%) !important; } html.dark .outline-btn { /* background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; */ color: #ffffff !important; } html.dark .outline-btn img, html.dark .outline-btn svg { filter: none !important; } html.dark .outline-btn:hover { border-color: var(--dk-accent) !important; color: var(--dk-accent-light) !important; } /* Google auth button */ html.dark .google-auth-btn { color: #ffffff !important; } /* ================================================================ TOOL / UPLOAD SECTION ================================================================ */ html.dark .home-tool { background: radial-gradient(65.83% 88.69% at 50% 88.69%, #1a1535 0%, #0e0c1a 100%) !important; } html.dark .home-tool .main-tool { box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; } html.dark .home-tool .main-tool #uploadSection, html.dark .home-tool .main-tool .inner-tool { background: linear-gradient(180deg, #1c1832 0%, #191627 14.92%) !important; border-color: var(--dk-border) !important; } html.dark .home-tool .main-tool #uploadSection::before, html.dark .home-tool .main-tool .inner-tool::before { background: linear-gradient(180deg, #221e3a 0%, #1e1a35 14.92%) !important; } html.dark .home-tool .main-tool #uploadSection.drag-over, html.dark .home-tool .main-tool #uploadSection:hover, html.dark .home-tool .main-tool .inner-tool.drag-over, html.dark .home-tool .main-tool .inner-tool:hover { border-color: var(--dk-accent) !important; } /* URL switch button */ html.dark .url-switch, html.dark .browse-camera-option { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } /* OCR selector labels */ html.dark .ocr-selector .ocr-label { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text-muted) !important; } html.dark .ocr-selector .ocr-label:hover { border-color: var(--dk-accent) !important; color: var(--dk-accent-light) !important; } /* Mobile upload */ html.dark .upload-m-icon-ring { background: linear-gradient(135deg, #1e1a36 0%, #231f3a 100%) !important; border-color: var(--dk-border) !important; } html.dark .upload-m-title { color: #ffffff !important; } html.dark .upload-m-formats { color: var(--dk-text-dim) !important; } /* Result / text area */ html.dark #resultSection, html.dark #resultText, html.dark .result-area { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: #ffffff !important; } /* Copy/action buttons row */ html.dark .text-\[\#998FB6\] { color: var(--dk-text-dim) !important; } /* ================================================================ CROP MODAL ================================================================ */ html.dark .crop-modal-content { background-color: var(--dk-surface) !important; color: #ffffff !important; } html.dark .crop-container { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html.dark .zoom-btn { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: #ffffff !important; } html.dark .zoom-btn:hover { background-color: var(--dk-surface-3) !important; border-color: var(--dk-accent) !important; color: var(--dk-accent) !important; } html.dark .zoom-level { color: var(--dk-text-muted) !important; } html.dark .close-crop { color: var(--dk-text-muted) !important; } html.dark .close-crop:hover { color: #ffffff !important; } /* ================================================================ ALERT / FEEDBACK MODAL ================================================================ */ html.dark .alert-overlay { background-color: rgba(0,0,0,0.7) !important; } html.dark .alert-modal, html.dark [class*="alert-modal"] { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: #ffffff !important; } html.dark #alertOverlay #alertTitle { color: #ffffff !important; } html.dark #alertOverlay #alertMessage { color: #e9e5f8 !important; } html.dark #alertOverlay #alertMessage, html.dark #alertOverlay #alertMessage * { color: #e9e5f8 !important; } html.dark #alertOverlay #alertCancelBtn { color: #e9e5f8 !important; } html.dark #alertOverlay #alertCancelBtn:hover { color: #ffffff !important; } html.dark #alertOverlay #alertCloseBtn img { filter: brightness(0) invert(1) !important; } /* Feedback modal */ html.dark .feedback-container, html.dark [class*="feedback"] { background-color: var(--dk-surface) !important; } /* ================================================================ ACCORDION / FAQ ================================================================ */ html.dark .accordion-button { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: #ffffff !important; } html.dark .accordion-button:hover { background-color: var(--dk-surface-2) !important; } html.dark .accordion-content { background-color: var(--dk-surface) !important; color: var(--dk-text-muted) !important; } /* ================================================================ TABS ================================================================ */ html.dark .who-can-use .tab-button { color: var(--dk-text-dim) !important; border-color: var(--dk-border) !important; background-color: transparent !important; } html.dark .who-can-use .tab-button.active { background: linear-gradient(180deg, var(--dk-surface-2) 0%, var(--dk-surface-3) 100%) !important; border-color: var(--dk-accent) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; } html.dark .my-account .tab-button { color: var(--dk-text-dim) !important; } html.dark .my-account .tab-button.active { background: linear-gradient(180deg, var(--dk-surface-2) 0%, var(--dk-surface-3) 100%) !important; border-color: var(--dk-border) !important; color: #ffffff !important; } /* ================================================================ CARDS & SECTIONS (inline Tailwind) ================================================================ */ /* bg-white cards */ html.dark .bg-white { background-color: var(--dk-surface) !important; } /* Light purple backgrounds */ html.dark .bg-\[\#F7F6FD\], html.dark .bg-\[\#F0EFF7\], html.dark .bg-\[\#EDE9FF\], html.dark .bg-\[\#F6F3FE\], html.dark .bg-\[\#fbfaff\], html.dark .bg-\[\#FBFAFF\] { background-color: var(--dk-surface-2) !important; } /* Light gradient backgrounds */ html.dark .bg-linear-to-t.from-\[\#F7E7FE\], html.dark .bg-linear-to-br.from-\[\#F7F6FD\] { background: var(--dk-surface-2) !important; } /* White rounded sections */ html.dark [class*="rounded"][class*="bg-white"], html.dark [class*="bg-white"][class*="rounded"] { background-color: var(--dk-surface) !important; } /* Borders */ html.dark .border-\[\#CECCE0\] { border-color: var(--dk-border) !important; } html.dark .border-\[\#f0eff7\], html.dark .border-\[\#F0EFF7\] { border-color: var(--dk-border-light) !important; } /* Text colors */ html.dark .text-\[\#0A0449\], html.dark .text-\[\#0D0560\], html.dark .text-\[\#160d74\], html.dark .text-\[\#1f2937\] { color: #ffffff !important; } html.dark .text-\[\#6d6782\], html.dark .text-\[\#3B3389\], html.dark .text-\[\#453c9a\], html.dark .text-\[\#49607D\] { color: var(--dk-text-muted) !important; } html.dark .text-\[\#998FB6\], html.dark .text-\[\#8E93A6\] { color: var(--dk-text-dim) !important; } /* Dividers */ html.dark .bg-\[\#CECCE0\] { background-color: var(--dk-border) !important; } /* ================================================================ POPUP / GOOGLE LOGIN POPUP ================================================================ */ html.dark #googleLoginPopup, html.dark .popup-container, html.dark [id*="popup"], html.dark [class*="popup"] { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html.dark [class*="popup"] h2, html.dark [class*="popup"] h3, html.dark [class*="popup"] p { color: #ffffff !important; } html.dark [class*="popup"] .bg-white { background-color: var(--dk-surface-2) !important; } /* popup overlay backdrop */ html.dark [id="popup-container"] { background-color: transparent; } /* ================================================================ BLOG LIST PAGE ================================================================ */ html.dark .blog-card, html.dark [class*="blog-card"] { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html.dark .blog-card h2, html.dark .blog-card h3, html.dark .blog-card p { color: inherit; } /* ================================================================ SINGLE BLOG PAGE ================================================================ */ html.dark .sb-hero { background: radial-gradient(42.1% 56.72% at 50% 0%, #1e1535 0%, var(--dk-bg) 100%) !important; } /* Breadcrumb */ html.dark .sb-breadcrumb { color: var(--dk-text-dim) !important; } html.dark .sb-breadcrumb a { color: var(--dk-accent) !important; } html.dark .sb-breadcrumb-sep { color: var(--dk-border) !important; } /* Article card */ html.dark .sb-article { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; box-shadow: 0 2px 24px rgba(0,0,0,0.4) !important; } /* Sidebar cards */ html.dark .sb-sidebar > div { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.3) !important; } /* TOC */ html.dark #blog-toc { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html.dark #blog-toc-list a { color: var(--dk-text-muted) !important; } html.dark #blog-toc-list a:hover { color: #ffffff !important; } /* ── Blog content (blog.css) ───────────────────────────────── */ html.dark .blog-content { color: var(--dk-text-muted) !important; } html.dark .blog-content h1, html.dark .blog-content h2, html.dark .blog-content h3, html.dark .blog-content h4, html.dark .blog-content h5, html.dark .blog-content h6 { color: #ffffff !important; border-color: var(--dk-border) !important; } html.dark .blog-content p { color: var(--dk-text-muted) !important; } html.dark .blog-content > p:first-of-type { color: var(--dk-accent-light) !important; } html.dark .blog-content a { color: var(--dk-accent) !important; } html.dark .blog-content a:hover { color: var(--dk-accent-light) !important; } html.dark .blog-content strong, html.dark .blog-content b { color: #ffffff !important; } html.dark .blog-content em, html.dark .blog-content i { color: var(--dk-text-muted) !important; } html.dark .blog-content mark { background: linear-gradient(135deg, #1e1a36, #2a2448) !important; color: var(--dk-accent-light) !important; } html.dark .blog-content hr { background: linear-gradient(90deg, var(--dk-border-light), var(--dk-border) 50%, var(--dk-border-light)) !important; } html.dark .blog-content blockquote { background: linear-gradient(135deg, #1a1730 0%, #1f1c35 100%) !important; border-color: var(--dk-accent) !important; color: var(--dk-text-muted) !important; } html.dark .blog-content blockquote::before { color: var(--dk-border) !important; } html.dark .blog-content blockquote p { color: var(--dk-text-muted) !important; } html.dark .blog-content blockquote cite { color: var(--dk-accent) !important; } html.dark .blog-content img { box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important; border-radius: 8px !important; opacity: 0.92; } html.dark .blog-content figure, html.dark .blog-content .wp-block-image, html.dark .blog-content [class*="image"] { background: transparent !important; } html.dark .blog-content p > img, html.dark .blog-content div > img { display: block; max-width: 100%; } html.dark .blog-content ul li { color: var(--dk-text-muted) !important; } html.dark .blog-content ol li { color: var(--dk-text-muted) !important; } html.dark .blog-content ul li::before { background: linear-gradient(135deg, var(--dk-accent), var(--dk-border)) !important; } html.dark .blog-content ol li::marker { color: var(--dk-accent) !important; } html.dark .blog-content code { background: var(--dk-surface-2) !important; color: var(--dk-accent-light) !important; border-color: var(--dk-border) !important; } html.dark .blog-content pre { background: #080616 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } html.dark .blog-content pre code { color: #b8aeff !important; } /* Table dark */ html.dark .blog-content .table-wrap { border-color: var(--dk-border) !important; box-shadow: 0 6px 32px rgba(0,0,0,0.4) !important; } html.dark .blog-content table tr:first-child { background: linear-gradient(135deg, #090062 0%, #1e1555 100%) !important; } html.dark .blog-content table tr:not(:first-child) td { background: var(--dk-surface) !important; color: #ffffff !important; border-color: var(--dk-border-light) !important; } html.dark .blog-content table tr:not(:first-child):nth-child(even) td { background: var(--dk-surface-2) !important; } html.dark .blog-content table tr:not(:first-child):hover td { background: var(--dk-surface-3) !important; } html.dark .blog-content table td strong, html.dark .blog-content table td b { color: #ffffff !important; } html.dark .blog-content kbd { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-accent-light) !important; } html.dark .blog-content details { border-color: var(--dk-border) !important; } html.dark .blog-content summary { background: linear-gradient(135deg, var(--dk-surface-2), var(--dk-surface-3)) !important; color: #ffffff !important; } html.dark .blog-content summary::after { color: var(--dk-accent) !important; } /* ================================================================ CUSTOM PAGES (login, signup, about, contact, account etc.) ================================================================ */ html.dark .auth-card, html.dark [class*="auth-"], html.dark .contact-card, html.dark [class*="contact-"] { /* background-color: var(--dk-surface) !important; */ border-color: var(--dk-border) !important; } /* Password eye toggle */ html.dark .custom-password-group button { color: var(--dk-text-dim) !important; } /* ================================================================ MY ACCOUNT PAGE ================================================================ */ html.dark .my-account { background-color: var(--dk-bg) !important; } /* White cards (profile + password form) */ html.dark .my-account .account-card { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } /* Read-only display fields (name / email boxes) */ html.dark .my-account .account-field { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: #ffffff !important; } html.dark .my-account .account-field span { color: #ffffff !important; } /* Google badge inside email field */ html.dark .my-account .account-field [class*="from-red-50"] { background: var(--dk-surface-3) !important; color: var(--dk-text-muted) !important; } /* Form labels */ html.dark .my-account label { color: var(--dk-text-muted) !important; } /* Dashed divider inside password form */ html.dark .my-account .border-dashed { border-color: var(--dk-border) !important; } /* Edit / Cancel buttons */ html.dark .my-account .profile-edit { border-color: var(--dk-accent) !important; color: var(--dk-accent-light) !important; background: transparent !important; } html.dark .my-account .profile-cancel, html.dark .my-account .password-cancel { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text-muted) !important; } /* Google Account connected box */ html.dark .my-account .account-google-box { background-color: var(--dk-accent-bg) !important; border-color: var(--dk-border) !important; } html.dark .my-account .account-google-box h3 { color: var(--dk-accent-light) !important; } html.dark .my-account .account-google-box p { color: var(--dk-text-muted) !important; } /* Delete Account box */ html.dark .my-account .account-delete-box { background-color: var(--dk-surface) !important; border-color: rgba(255, 107, 112, 0.3) !important; } html.dark .my-account .account-delete-box > p { color: var(--dk-text-muted) !important; } html.dark .my-account .account-delete-box span { color: var(--dk-text-muted) !important; } html.dark .my-account .account-delete-box li { color: var(--dk-red) !important; } /* Cancel delete button */ html.dark .my-account .cancel-delete-account { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text-muted) !important; } /* Verified badge */ html.dark .my-account .bg-green-100 { background-color: rgba(52, 211, 153, 0.15) !important; } html.dark .my-account .text-green-800 { color: #34d399 !important; } /* Not Verified badge */ html.dark .my-account .bg-amber-100 { background-color: rgba(251, 191, 36, 0.15) !important; } html.dark .my-account .text-amber-800 { color: #fbbf24 !important; } /* ================================================================ COMPONENTS ================================================================ */ /* Dropdown (lang-dropdown etc.) */ html.dark .dropdown-menu, html.dark [class*="dropdown"] > div, html.dark [id*="Dropdown"] { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } /* Pricing cards */ html.dark [class*="pricing"], html.dark [class*="plan-card"] { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } /* Feature cards */ html.dark [class*="feature-card"], html.dark [class*="features"] .rounded-2xl, html.dark [class*="features"] .rounded-3xl { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } /* Why choose badges */ html.dark [class*="badge"], html.dark [class*="why-choose"] div { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } /* Use cases tabs / how-does sections */ html.dark [class*="how-does"], html.dark [class*="use-case"] { background-color: var(--dk-surface) !important; } /* Extract/convert points */ html.dark [class*="extract"], html.dark [class*="convert"] { /* background-color: var(--dk-surface) !important; */ } /* ================================================================ TOAST MESSAGES ================================================================ */ /* Toast already has colored backgrounds (green/red) — keep them. Only style the text/icon contrast if needed */ html.dark .toast-message { box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important; } /* ================================================================ CUSTOM PAGES (privacy, terms, about etc.) ================================================================ */ html.dark .custom-page p { color: var(--dk-text-muted) !important; } html.dark .custom-page h2, html.dark .custom-page h3 { color: #ffffff !important; } html.dark .custom-page ul, html.dark .custom-page ol { color: var(--dk-text-muted) !important; } html.dark .custom-page a { color: var(--dk-accent) !important; } /* ================================================================ ADMIN NAVBAR OVERLAY (edit tool/blog bar) ================================================================ */ html.dark .admin-navbar a { background: #2a2448 !important; color: #ffffff !important; } /* ================================================================ 404 ERROR PAGE ================================================================ */ html.dark .error-page, html.dark [class*="error"] { background-color: var(--dk-bg) !important; } /* ================================================================ POPUP CONTAINER (google login, etc.) ================================================================ */ html.dark #googleLoginPopup .bg-white, html.dark [class*="google-login"] .bg-white { background-color: var(--dk-surface) !important; } /* ================================================================ AUTH PAGES (login, signup, forget-password, reset-password) ================================================================ */ /* Page background */ html.dark .bg-\[radial-gradient\(74\.23\%_100\%_at_50\%_0\%\,\#F7E7FE_0\%\,\#FFFFFF_100\%\)\], html.dark .bg-\[radial-gradient\(42\.1\%_56\.72\%_at_50\%_0\%\,\#F7E7FE_0\%\,\#ffffff_100\%\)\] { background: radial-gradient(74.23% 100% at 50% 0%, #1e1535 0%, var(--dk-bg) 100%) !important; } /* Card wrapper */ html.dark .max-w-100.bg-white, html.dark .max-w-md.bg-white, html.dark [class*="max-w"].bg-white { background-color: var(--dk-surface) !important; } /* Label text */ html.dark .text-\[\#0D0560\] { color: #ffffff !important; } html.dark .text-\[\#C9C2DD\] { color: var(--dk-text-dim) !important; } /* Input fields in auth */ html.dark input.bg-\[\#fbfaff\], html.dark input.bg-\[\#FBFAFF\] { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: #ffffff !important; } /* Divider "or" line */ html.dark .bg-\[\#F0EFF7\] { background-color: var(--dk-border) !important; } /* ================================================================ MISC UTILITY OVERRIDES ================================================================ */ /* Divider lines */ html.dark .w-px, html.dark .h-px { background-color: var(--dk-border) !important; } /* Shadows on white cards */ html.dark .shadow-\[0_4px_4px_0_rgba\(38\2c 27\2c 132\2c 0\.08\)\] { box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; } /* Tailwind ring/shadow utilities */ html.dark [class*="shadow"] { --tw-shadow-color: rgba(0,0,0,0.4); } /* ================================================================ FEATURES SECTION ================================================================ */ /* Section background radial gradient (light purple) */ html.dark .bg-\[radial-gradient\(65\.83\%_88\.69\%_at_50\%_88\.69\%\,\#F4ECFF_0\%\,\#F7F6FD_100\%\)\] { background: radial-gradient(65.83% 88.69% at 50% 88.69%, #1a1535 0%, #0e0c1a 100%) !important; } /* Feature cards — bg-[#FAF9FF] */ html.dark .bg-\[\#FAF9FF\] { background-color: var(--dk-surface) !important; } /* Feature card icon box */ html.dark .bg-\[\#FAF9FF\] .bg-white { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } /* Feature card border */ html.dark .border-\[\#CECCE0\].rounded-\[20px\] { border-color: var(--dk-border) !important; background-color: var(--dk-surface) !important; } /* Feature card text */ html.dark .text-\[\#453C9A\] { color: var(--dk-text-muted) !important; } html.dark .text-\[\#453c9a\] { color: var(--dk-text-muted) !important; } /* ================================================================ WHY CHOOSE BADGES ================================================================ */ html.dark .rounded-full.bg-\[\#FAF9FF\], html.dark [class*="rounded-full"].bg-\[\#FAF9FF\] { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html.dark .hover\:bg-\[\#f3f0ff\]:hover { background-color: var(--dk-surface-3) !important; } /* ================================================================ MAIN TOOL CARD (white rounded box wrapping upload section) ================================================================ */ html.dark #mainTool { background-color: var(--dk-surface) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important; } /* All tooltips — JStooltip() generated + component */ html.dark .tooltip-box, html.dark .js-tooltip .rounded-lg.bg-white, html.dark .group .rounded-lg.bg-white.shadow-lg { background-color: var(--dk-surface-2) !important; color: #ffffff !important; border: 1px solid var(--dk-border) !important; } html.dark .tooltip-arrow, html.dark .js-tooltip .rotate-45.bg-white, html.dark .group .rotate-45.bg-white { background-color: var(--dk-surface-2) !important; border-right: 1px solid var(--dk-border) !important; border-top: 1px solid var(--dk-border) !important; box-shadow: none !important; } /* URL tooltip popup */ html.dark #urlTooltip .bg-white, html.dark #urlTooltip > div { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html.dark #urlTooltip .absolute.-top-2 { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html.dark #fileUrlInput { background-color: var(--dk-surface-2) !important; color: #ffffff !important; } /* ================================================================ UPLOAD SECTION — MOBILE BUTTONS ================================================================ */ html.dark .upload-m-sec-btn { background: linear-gradient(180deg, var(--dk-surface-2) 0%, var(--dk-surface-3) 100%) !important; border-color: var(--dk-border) !important; color: #ffffff !important; } html.dark .upload-m-sec-btn:hover, html.dark .upload-m-sec-btn.active { border-color: var(--dk-accent) !important; background: linear-gradient(180deg, #1e1a38 0%, #261f42 100%) !important; } html.dark .upload-m-url-row { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html.dark .upload-m-url-input { color: #ffffff !important; } /* Register badge */ html.dark .register-badge { background: linear-gradient(135deg, #1e1a36 0%, #1a1630 100%) !important; border-color: var(--dk-border) !important; } html.dark .register-badge-text { color: #ffffff !important; } /* ================================================================ RESULT CARDS ================================================================ */ html.dark .result-card { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html.dark .result-card-header { background: linear-gradient(135deg, var(--dk-surface-2) 0%, var(--dk-surface) 100%) !important; border-color: var(--dk-border) !important; } html.dark .result-card-body { background: var(--dk-surface) !important; } html.dark .result-filename { color: #ffffff !important; } html.dark .result-text-content { color: var(--dk-text-muted) !important; } html.dark .result-action-btn { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html.dark .result-action-btn:hover { background: var(--dk-surface-3) !important; border-color: var(--dk-accent) !important; } html.dark .result-action-btn .rc-label { color: var(--dk-text-muted) !important; } html.dark .result-action-btn img, html.dark .result-action-btn svg { filter: brightness(0) invert(1) !important; } html.dark .zoom-btn img, html.dark .zoom-btn svg { filter: brightness(0) invert(1) !important; } html.dark .upload-m-sec-btn img, html.dark .upload-m-sec-btn svg { filter: brightness(0) invert(1) !important; } html.dark #startOverBtn img { filter: brightness(0) invert(1) !important; } html.dark .result-thumb { border-color: var(--dk-border) !important; } html.dark .result-thumb-placeholder { background: linear-gradient(135deg, var(--dk-surface-2) 0%, var(--dk-surface-3) 100%) !important; border-color: var(--dk-border) !important; } /* Skeleton loading shimmer */ html.dark .skeleton-line { background: linear-gradient(90deg, var(--dk-surface-2) 20%, var(--dk-surface-3) 50%, var(--dk-surface-2) 80%) !important; } /* Error box */ html.dark .result-error-box { background: linear-gradient(135deg, #2a1520 0%, #221220 100%) !important; border-color: #4a1c1c !important; } /* Results count text */ html.dark #resultsCount, html.dark #filesCount { color: #ffffff !important; } /* ================================================================ EXTRACT POINTS / CONVERT POINTS SECTION ================================================================ */ html.dark .extract-points p, html.dark .extract-points ul li, html.dark .extract-points h3 { color: var(--dk-text-muted) !important; } html.dark .extract-points h4, html.dark .extract-points strong { color: #ffffff !important; } /* Convert steps — border lines between cards */ html.dark .border-r, html.dark .border-l, html.dark .border-b, html.dark .border-t { border-color: transparent !important; } /* ================================================================ FOOTER CTA BANNER — LIGHT BUTTON FIX The footer "Upload Image" button is lg-light-btn on dark purple bg. Make it visible without inverting the whole button style. ================================================================ */ html.dark footer .bg-linear-to-t.from-\[\#2E2165\] .lg-light-btn, html.dark footer .lg-light-btn { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.25) !important; color: #fff !important; } html.dark footer .lg-light-btn:hover { background: rgba(255,255,255,0.2) !important; border-color: rgba(255,255,255,0.4) !important; } /* ================================================================ CONVERT STEPS COMPONENT ================================================================ */ html.dark .convert-points, html.dark [class*="convert-image"] { color: var(--dk-text-muted) !important; } /* ================================================================ USE CASE CARDS ================================================================ */ html.dark .use-case-card, html.dark [class*="use-case"] .border-r, html.dark [class*="use-case"] .border-l { border-color: var(--dk-border) !important; } html.dark .use-case-card h3 { color: #ffffff !important; } html.dark .use-case-card p { color: var(--dk-text-muted) !important; } /* ================================================================ FEEDBACK / RATING CONTAINER (at bottom of results) ================================================================ */ html.dark [class*="feedback-container"], html.dark #feedback-container, html.dark #feedback-container-mobile { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } /* Feedback modal popup card */ html.dark .feedback-modal { background-color: var(--dk-surface-2) !important; border: 1px solid var(--dk-border) !important; } html.dark .feedback-modal #feedbackMessage { background-color: var(--dk-surface-3) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } /* ================================================================ QUOTA-STYLE MODAL SYSTEM — dark mode ================================================================ */ html.dark .qm-overlay { background: rgba(0,0,0,0.78) !important; } html.dark .qm-card { background-color: var(--dk-surface-2) !important; box-shadow: 0 34px 80px -22px rgba(0,0,0,0.7), 0 0 0 1px var(--dk-border) !important; } html.dark .qm-eyebrow { background: var(--dk-accent-bg) !important; color: var(--dk-accent-light) !important; } html.dark .qm-close { background: var(--dk-surface-3) !important; color: var(--dk-text-muted) !important; } html.dark .qm-close:hover { background: var(--dk-accent-bg) !important; color: #ffffff !important; } html.dark .qm-title { color: #ffffff !important; } html.dark .qm-msg, html.dark .qm-msg * { color: var(--dk-text-muted) !important; } html.dark .qm-msg strong { color: var(--dk-accent-light) !important; } html.dark .qm-meter-track { background: var(--dk-surface-3) !important; } html.dark .qm-meter-row { color: var(--dk-text-muted) !important; } html.dark .qm-meter-count { color: var(--dk-accent-light) !important; } html.dark .qm-icon-tile { background: var(--dk-accent-bg) !important; color: var(--dk-accent-light) !important; } html.dark .qm-textarea { background-color: var(--dk-surface-3) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html.dark .qm-textarea::placeholder { color: var(--dk-text-dim) !important; } html.dark .qm-textarea:focus { border-color: var(--dk-accent) !important; box-shadow: 0 0 0 4px rgba(139,126,248,0.18) !important; } html.dark .qm-btn-primary { box-shadow: 0 12px 26px rgba(0,0,0,0.55) !important; } html.dark .qm-btn-ghost { color: var(--dk-text-muted) !important; } html.dark .qm-btn-ghost:hover { color: #ffffff !important; } /* nature variants — dark */ html.dark .qm-card.type-error .qm-eyebrow, html.dark .qm-card.type-error .qm-icon-tile { background: rgba(226,75,74,0.16) !important; color: #ff8785 !important; } html.dark .qm-card.type-info .qm-eyebrow, html.dark .qm-card.type-info .qm-icon-tile { background: rgba(55,138,221,0.16) !important; color: #7cb8f0 !important; } html.dark .qm-card.type-warning .qm-eyebrow, html.dark .qm-card.type-warning .qm-icon-tile { background: rgba(186,117,23,0.18) !important; color: #e0a85a !important; } html.dark .qm-card.type-success .qm-eyebrow, html.dark .qm-card.type-success .qm-icon-tile { background: rgba(26,128,64,0.18) !important; color: #5fd699 !important; } /* ================================================================ FILE LIST SECTION (uploaded files list) ================================================================ */ html.dark #filesContainer > div { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html.dark #clearAllBtn { color: var(--dk-text-dim) !important; } html.dark #clearAllBtn:hover { color: #ff6b6b !important; } /* ================================================================ PRIVACY TEXT & SMALL TEXT ================================================================ */ html.dark .upload-m-privacy { color: var(--dk-text-dim) !important; } html.dark .p-small { color: var(--dk-text-dim) !important; } html.dark .p-bold { color: #ffffff !important; } /* ================================================================ UPLOAD SECTION — invisible text fixes ================================================================ */ /* "Drop, Upload or Paste Image" heading */ html.dark #uploadSection .text-\[\#0D0560\]\!, html.dark #uploadSection p, html.dark #uploadSection span, html.dark .inner-tool p, html.dark .inner-tool span { color: #ffffff !important; } /* p-bold inside tool (dark purple by default) */ html.dark .home-tool .p-bold { color: #ffffff !important; } /* p-small inside tool (muted purple) */ html.dark .home-tool .p-small { color: var(--dk-text-muted) !important; } /* "Your privacy is protected" row */ html.dark #uploadSection .p-small, html.dark #uploadSection + div .p-small, html.dark .upload-m-privacy span { color: var(--dk-text-dim) !important; } /* Global dark-text overrides that appear invisible on dark bg */ /* Both .text-[#0D0560] and .text-[#0D0560]! (Tailwind !important modifier) */ html.dark .text-\[\#0D0560\]\!, html.dark .\!text-\[\#0D0560\], html.dark .text-\[\#0D0560\] { color: #ffffff !important; } html.dark .text-\[\#0A0449\] { color: #ffffff !important; } html.dark .text-\[\#160d74\]\!, html.dark .\!text-\[\#160d74\], html.dark .text-\[\#160d74\] { color: #ffffff !important; } html.dark .text-\[\#160D74\]\!, html.dark .\!text-\[\#160D74\], html.dark .text-\[\#160D74\] { color: #ffffff !important; } html.dark .text-\[\#1f2937\] { color: #ffffff !important; } html.dark .text-\[\#3D3490\] { color: var(--dk-text-muted) !important; } html.dark .text-\[\#3b3560\] { color: var(--dk-text-muted) !important; } html.dark .text-\[\#453c9a\]\!, html.dark .\!text-\[\#453c9a\], html.dark .text-\[\#453c9a\] { color: var(--dk-text-muted) !important; } html.dark .text-\[\#453C9A\]\!, html.dark .\!text-\[\#453C9A\], html.dark .text-\[\#453C9A\] { color: var(--dk-text-muted) !important; } html.dark .text-\[\#6d6782\]\!, html.dark .\!text-\[\#6d6782\], html.dark .text-\[\#6d6782\] { color: var(--dk-text-muted) !important; } html.dark .text-\[\#615b74\] { color: var(--dk-text-muted) !important; } html.dark .text-\[\#998FB6\]\!, html.dark .\!text-\[\#998FB6\], html.dark .text-\[\#998FB6\] { color: var(--dk-text-dim) !important; } html.dark .text-\[\#998fb6\]\!, html.dark .\!text-\[\#998fb6\], html.dark .text-\[\#998fb6\] { color: var(--dk-text-dim) !important; } html.dark .text-\[\#8E93A6\]\!, html.dark .\!text-\[\#8E93A6\], html.dark .text-\[\#8E93A6\] { color: var(--dk-text-dim) !important; } html.dark .text-\[\#C9C2DD\] { color: var(--dk-text-dim) !important; } html.dark .text-\[\#ababab\]\!, html.dark .\!text-\[\#ababab\] { color: var(--dk-text-dim) !important; } html.dark .text-\[\#3B3389\]\!, html.dark .\!text-\[\#3B3389\], html.dark .text-\[\#3B3389\] { color: var(--dk-text-muted) !important; } /* CSS variable-driven text — override variables themselves in dark mode */ html.dark { --color-heading: var(--dk-text); --color-text: var(--dk-text); --color-paragraph: var(--dk-text-muted); --color-muted: var(--dk-text-dim); --color-disabled: var(--dk-text-dim); --color-bg: var(--dk-bg); --border-outline: var(--dk-border); } /* ================================================================ WHY CHOOSE SECTION — bg-[#FAF9FF] full section ================================================================ */ html.dark section.bg-\[\#FAF9FF\] { background-color: var(--dk-surface-2) !important; } html.dark .text-\[\#ababab\]\! { color: var(--dk-text-dim) !important; } /* ================================================================ WHO CAN USE — tab strip background ================================================================ */ html.dark .bg-\[\#F0EFF7\].rounded-full { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html.dark #sliderLeft.bg-white, html.dark #sliderRight.bg-white { background-color: var(--dk-surface-3) !important; } /* ================================================================ CONVERT STEPS — step number circle ================================================================ */ html.dark .bg-linear-to-t.from-\[\#E2E0F9\].to-\[\#CFCCF5\] { background: linear-gradient(to top, #2a2448 0%, #231d3f 100%) !important; } /* ================================================================ USE CASE CARDS — hover gradient overlay ================================================================ */ html.dark .card-bg-gradient { background: linear-gradient(to top, var(--dk-surface-3) 0%, transparent 100%) !important; } html.dark .use-case-card { border-color: var(--dk-border) !important; } html.dark .use-case-card:hover { background-color: var(--dk-surface) !important; } /* ================================================================ BLOG LIST PAGE ================================================================ */ /* Page hero strip */ html.dark .bg-\[radial-gradient\(42\.1\%_56\.72\%_at_50\%_0\%\,\#F7E7FE_0\%\,\#FFFFFF_100\%\)\] { background: radial-gradient(42.1% 56.72% at 50% 0%, #1e1535 0%, var(--dk-bg) 100%) !important; } /* Blog cards */ html.dark .border-\[\#F0EFF7\].rounded-3xl { border-color: var(--dk-border) !important; background-color: var(--dk-surface) !important; } html.dark .border-\[\#F0EFF7\].rounded-3xl .p-bold { color: #ffffff !important; } html.dark .border-\[\#F0EFF7\].rounded-3xl .p-small { color: var(--dk-text-dim) !important; } html.dark .text-\[\#6d6782\]\! { color: var(--dk-text-dim) !important; } /* ================================================================ GLOBAL — any section/div using these light bg classes ================================================================ */ html.dark .bg-\[\#F7F6FD\] { background-color: var(--dk-surface-2) !important; } html.dark .bg-\[\#F0EFF7\] { background-color: var(--dk-surface-2) !important; } html.dark .bg-\[\#EDE9FF\] { background-color: var(--dk-accent-bg) !important; } html.dark .bg-\[\#fbfaff\] { background-color: var(--dk-surface-2) !important; } html.dark .bg-\[\#FBFAFF\] { background-color: var(--dk-surface-2) !important; } html.dark .bg-\[\#FAF9FF\] { background-color: var(--dk-surface) !important; } /* ================================================================ NUCLEAR OVERRIDES — attribute selectors beat escaped class selectors Catches ALL elements with these color values regardless of escaping ================================================================ */ html.dark [class*="0D0560"], html.dark [class*="0d0560"], html.dark [class*="0A0449"], html.dark [class*="0a0449"], html.dark [class*="160D74"], html.dark [class*="160d74"] { color: #ffffff !important; } html.dark [class*="453C9A"], html.dark [class*="453c9a"], html.dark [class*="6d6782"], html.dark [class*="6D6782"], html.dark [class*="49607D"], html.dark [class*="49607d"], html.dark [class*="3B3389"], html.dark [class*="3b3389"] { color: #c8c3e8 !important; } html.dark [class*="998FB6"], html.dark [class*="998fb6"], html.dark [class*="8E93A6"], html.dark [class*="8e93a6"], html.dark [class*="C9C2DD"], html.dark [class*="c9c2dd"], html.dark [class*="ababab"] { color: #9b94c4 !important; } /* ================================================================ HOME PAGE — inline style classes and ID overrides (these elements set color via