/* Dark Theme Variables */ [data-theme="dark"] { /* Brand Colors */ --primary-blue: #4A7FC8; --primary-teal: #20CFCE; --gradient-primary: linear-gradient(135deg, #4A7FC8 0%, #20CFCE 100%); /* Neutral Colors - inverted */ --gray-50: #18181b; --gray-100: #27272a; --gray-200: #3f3f46; --gray-300: #52525b; --gray-400: #71717a; --gray-500: #a1a1aa; --gray-600: #d4d4d8; --gray-700: #e4e4e7; --gray-800: #f4f4f5; --gray-900: #fafafa; /* Semantic Colors */ --background: #18181b; --surface: #27272a; --text-primary: #fafafa; --text-secondary: #d4d4d8; --text-tertiary: #a1a1aa; --border: #3f3f46; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5); } /* Dark mode component adjustments */ [data-theme="dark"] .navbar { background: rgba(24, 24, 27, 0.8); backdrop-filter: blur(10px); } [data-theme="dark"] .feature-card { background: var(--surface); } [data-theme="dark"] .feature-icon-item { background: var(--surface); } [data-theme="dark"] .feature-icon-item .label { color: var(--text-primary); } [data-theme="dark"] .testimonial-card { background: var(--surface); } [data-theme="dark"] .testimonial-card::before { color: var(--gray-200); } [data-theme="dark"] .supported-apps { background: var(--surface); } [data-theme="dark"] .crypto-card { background: var(--surface); } [data-theme="dark"] .crypto-card:hover { border-color: var(--primary-blue); } [data-theme="dark"] .social-link { background: var(--gray-200); } [data-theme="dark"] .social-link:hover { background: var(--gray-300); } [data-theme="dark"] .social-link img { filter: brightness(0) invert(1); opacity: 0.9; transition: opacity var(--transition-base); } [data-theme="dark"] .social-link:hover img { opacity: 1; } [data-theme="dark"] .carousel-button { background: var(--surface); border-color: var(--border); color: var(--text-secondary); } [data-theme="dark"] .how-it-works { background: var(--gray-100); } [data-theme="dark"] .donate { background: var(--gray-100); } [data-theme="dark"] .faq { background: var(--gray-100); } [data-theme="dark"] .faq-answer p { color: var(--text-secondary); } [data-theme="dark"] .faq-text { color: var(--text-primary); } [data-theme="dark"] .faq-question:hover { color: var(--primary-blue); } [data-theme="dark"] .faq-question:hover .faq-text { color: var(--primary-blue); } /* Changelogs */ [data-theme="dark"] .changelog { background: var(--gray-100); } [data-theme="dark"] .changelog-filters { background: var(--surface); } [data-theme="dark"] .filter-buttons { background: var(--gray-200); } [data-theme="dark"] .filter-btn.active { background: var(--gray-100); } [data-theme="dark"] .toggle-slider { background: var(--gray-600); } [data-theme="dark"] .version-card { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .version-card[data-type="manager"] { border-left-color: #1E5AA8; } [data-theme="dark"] .version-card[data-type="patches"] { border-left-color: #00AFAE; } [data-theme="dark"] .version-header { border-bottom-color: var(--border); } [data-theme="dark"] .change-list li code { background: var(--gray-200); color: var(--primary-teal); } [data-theme="dark"] .show-more-section { background: var(--surface); border-color: var(--border); } /* Footer */ [data-theme="dark"] .footer { background: var(--gray-50); } [data-theme="dark"] .footer-column h4 { color: var(--text-primary); } [data-theme="dark"] .footer-column a { color: var(--gray-400); } [data-theme="dark"] .footer-column a:hover { color: var(--text-primary); } [data-theme="dark"] .footer-bottom { border-top: 1px solid var(--border); color: var(--gray-500); } [data-theme="dark"] .footer-brand p, [data-theme="dark"] .footer-bottom { color: var(--gray-500); } /* Logos */ [data-theme="dark"] .nav-logo-wordmark, [data-theme="dark"] .footer-logo { filter: none; } /* Scroll to Top Button */ [data-theme="dark"] .scroll-to-top { background: var(--gradient-primary); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .scroll-to-top:hover { box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .scroll-to-top svg { color: white; } /* Smooth transitions */ body, .navbar, .hero, .feature-card, .testimonial-card, .crypto-card, .social-link, .carousel-button, .how-it-works, .donate, .faq, .footer { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base); } /* Mobile dark mode adjustments */ @media (max-width: 768px) { [data-theme="dark"] .carousel-button { background: rgba(39, 39, 42, 0.8); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .carousel-button:hover { background: rgba(39, 39, 42, 0.9); } [data-theme="dark"] .carousel-button:active { background: var(--primary-blue); } [data-theme="dark"] .feature-icon-item { background: rgba(39, 39, 42, 0.98); } } /* Logo toggling */ [data-theme="dark"] .logo-light { opacity: 0; z-index: 1; } [data-theme="dark"] .logo-dark { opacity: 1; z-index: 2; } [data-theme="dark"] .language-selector { background-color: var(--gray-200); color: var(--text-secondary); border-color: var(--border); } [data-theme="dark"] .language-selector:hover { background-color: var(--gray-300); border-color: var(--gray-400); color: var(--text-primary); } [data-theme="dark"] .language-selector option { background-color: var(--gray-200); color: var(--text-secondary); }