/* ================================================ EASIFYME — DARK MODE OVERRIDES Applied when [data-theme="dark"] is set on ================================================ */ [data-theme="dark"] { color-scheme: dark; } /* Header in dark mode */ [data-theme="dark"] .site-header { background: rgba(15, 23, 42, 0.85); border-bottom-color: var(--color-border); } [data-theme="dark"] .site-header.scrolled { background: rgba(15, 23, 42, 0.97); } /* Logo */ [data-theme="dark"] .logo-text { color: var(--color-text); } /* Nav links */ [data-theme="dark"] .nav-link { color: var(--color-text-muted); } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: var(--color-accent); background: rgba(59, 130, 246, 0.12); } /* Search */ [data-theme="dark"] .header-search-input { background: rgba(255,255,255,0.05); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .header-search-input:focus { background: rgba(59,130,246,0.08); border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); } /* Category cards */ [data-theme="dark"] .category-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; } [data-theme="dark"] .category-card:hover { border-color: transparent; } [data-theme="dark"] .category-card-footer { border-color: var(--color-border); } /* Tool cards */ [data-theme="dark"] .tool-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; } [data-theme="dark"] .tool-card:hover { border-color: rgba(59,130,246,0.3); } [data-theme="dark"] .tool-card-cta { border-color: var(--color-border); } /* Feature cards */ [data-theme="dark"] .feature-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; } /* Tool interface */ [data-theme="dark"] .tool-interface-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; } [data-theme="dark"] .tool-interface-header { background: var(--color-surface-alt); border-color: var(--color-border); } /* Sidebar */ [data-theme="dark"] .sidebar-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; } [data-theme="dark"] .sidebar-card-header { background: var(--color-surface-alt); border-color: var(--color-border); } [data-theme="dark"] .sidebar-tool-item:hover { background: var(--color-surface-raised); } [data-theme="dark"] .sidebar-ad-placeholder { background: var(--color-surface-alt); border-color: var(--color-border); } /* FAQ */ [data-theme="dark"] .faq-item { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; } [data-theme="dark"] .faq-question { background: var(--color-surface); } [data-theme="dark"] .faq-question:hover { background: var(--color-surface-alt); } [data-theme="dark"] .faq-answer { background: var(--color-surface); } [data-theme="dark"] .faq-item.open { border-color: var(--color-accent); } /* About tool */ [data-theme="dark"] .about-tool-section { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; } [data-theme="dark"] .about-tool-header:hover { background: var(--color-surface-alt); } /* Step cards */ [data-theme="dark"] .step-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; } /* Forms */ [data-theme="dark"] .form-control { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .form-control:focus { background: var(--color-surface); border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); } /* Hero search */ [data-theme="dark"] .hero-search-input { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); box-shadow: var(--shadow-lg); } [data-theme="dark"] .hero-search-input:focus { border-color: var(--color-accent); box-shadow: var(--shadow-lg), 0 0 0 4px rgba(59,130,246,0.2); } /* Hero pills */ [data-theme="dark"] .hero-pill { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-secondary); } [data-theme="dark"] .hero-pill:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* Mega menu */ [data-theme="dark"] .mega-menu { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6); } [data-theme="dark"] .mega-menu-header { border-color: var(--color-border); } [data-theme="dark"] .mega-menu-item:hover { background: var(--color-surface-raised); border-color: var(--color-border); } /* Mobile menu */ [data-theme="dark"] .mobile-menu-overlay { background: var(--color-bg); } /* Toasts */ [data-theme="dark"] .toast { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 20px 40px rgba(0,0,0,0.5); } /* Search results */ [data-theme="dark"] .search-results-dropdown { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 20px 40px rgba(0,0,0,0.5); } [data-theme="dark"] .search-result-item { border-color: var(--color-border); } [data-theme="dark"] .search-result-item:hover { background: var(--color-surface-raised); } /* Filter buttons */ [data-theme="dark"] .filter-btn { border-color: var(--color-border); color: var(--color-text-secondary); } /* Code */ [data-theme="dark"] code { background: var(--color-surface-raised); } [data-theme="dark"] pre { background: var(--color-surface-alt); border-color: var(--color-border); } /* Scrollbar */ [data-theme="dark"] { scrollbar-color: var(--color-border) transparent; } /* Category page */ [data-theme="dark"] .category-page-header { background: var(--color-surface-alt); border-color: var(--color-border); box-shadow: none; } /* ---- WORD COUNTER TOOL ---- */ [data-theme="dark"] .wc-textarea { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .wc-textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); } [data-theme="dark"] .wc-textarea::placeholder { color: var(--color-text-subtle); } [data-theme="dark"] .wc-stat-card { background: var(--color-surface-alt); border-color: var(--color-border); } [data-theme="dark"] .wc-stat-card:hover { border-color: var(--color-accent); } [data-theme="dark"] .wc-toolbar { border-color: var(--color-border); } [data-theme="dark"] .wc-limit-number-input { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .wc-limit-number-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.2); } [data-theme="dark"] .wc-limit-section { background: var(--color-surface-alt); border-color: var(--color-border); } [data-theme="dark"] .wc-preset-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-secondary); } [data-theme="dark"] .wc-preset-btn:hover { border-color: var(--color-accent); color: var(--color-accent); } [data-theme="dark"] .wc-preset-btn.active { background: var(--color-accent); border-color: var(--color-accent); } [data-theme="dark"] .wc-limit-bar-track { background: var(--color-surface-raised); } [data-theme="dark"] .wc-secondary-item { background: var(--color-surface-alt); border-color: var(--color-border); } [data-theme="dark"] .wc-keyword-table { border-color: var(--color-border); } [data-theme="dark"] .wc-keyword-table thead th { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-muted); } [data-theme="dark"] .wc-keyword-table tbody td { border-color: var(--color-border); color: var(--color-text-secondary); } [data-theme="dark"] .wc-keyword-table tbody tr:hover td { background: var(--color-surface-raised); } [data-theme="dark"] .wc-kw-bar-track { background: var(--color-surface-raised); } /* ---- COMING SOON (GENERIC TOOL) ---- */ [data-theme="dark"] .cs-feature-chip { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-secondary); } [data-theme="dark"] .cs-notify-input { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .cs-tool-card { background: var(--color-surface-alt); border-color: var(--color-border); } [data-theme="dark"] .cs-tool-card:hover { border-color: var(--color-accent); } /* ---- BREADCRUMB ---- */ [data-theme="dark"] .breadcrumb-nav { border-color: var(--color-border); } /* ---- HOW TO USE STEPS ---- */ [data-theme="dark"] .step-card { background: var(--color-surface); border-color: var(--color-border); } /* ---- RELATED TOOLS CAROUSEL ---- */ [data-theme="dark"] .tool-card-cta { border-color: var(--color-border); } /* ---- FILTER BAR ---- */ [data-theme="dark"] .category-filter-bar { border-color: var(--color-border); } [data-theme="dark"] .filter-btn { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .filter-btn.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* ---- BADGES ---- */ [data-theme="dark"] .badge-new { background: rgba(16, 185, 129, 0.22); color: #34D399; } [data-theme="dark"] .badge-popular { background: rgba(245, 158, 11, 0.22); color: #FBBF24; } /* ---- HERO ENHANCEMENTS ---- */ [data-theme="dark"] .hero-dot-grid { opacity: 0.3; } [data-theme="dark"] .hero-orb-1 { opacity: 0.3; } [data-theme="dark"] .hero-orb-2 { opacity: 0.28; } [data-theme="dark"] .hero-orb-3 { opacity: 0.2; } [data-theme="dark"] .hero-fi { opacity: 0.25; } /* Dark mode toggle ring animation */ .dark-mode-toggle .fa-sun, .dark-mode-toggle .fa-moon { transition: transform var(--transition-spring), opacity var(--transition-base); } [data-theme="dark"] .dark-mode-toggle { border-color: var(--color-border); color: var(--color-text-muted); } [data-theme="dark"] .dark-mode-toggle:hover { background: var(--color-surface-raised); color: var(--color-warning); } /* Step cards — stronger accent border in dark mode */ [data-theme="dark"] .step-card { border-top-color: #60A5FA; }