// Dark mode initialization before page loads primary: { // Dynamic primary colors from appearance settings secondary: { // Dynamic secondary colors from appearance settings accent: { // Dynamic accent colors from appearance settings // Specific colors from original design for gradients/highlights 'mobile-header-bg': '#1e293b', // Dark slate for mobile top section 'mobile-header-text': '#f1f5f9', // Light text for mobile top section '0%, 100%': { transform: 'scale(1)', boxShadow: '0 0 0 0 rgba(14, 165, 233, 0.4)' }, // primary color ::-webkit-scrollbar-track { background: #e2e8f0; } /* slate-200 */ ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; } /* slate-400 */ ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* slate-500 */ .dark ::-webkit-scrollbar-track { background: #374151; } /* gray-700 */ .dark ::-webkit-scrollbar-thumb { background: #6b7280; } /* gray-500 */ .dark ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* gray-400 */ .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } /* slate-300 */ .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* slate-400 */ .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #6b7280; } /* gray-500 */ .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* gray-400 */ /* Floating elements animation */ /* Interactive elements */ /* Dark mode toggle button styling */ /* Floating particles background */ /* Outer orbital rings */ /* Inner spinning circles */ /* Glowing core with morphing effect */ /* Enhanced text with multiple effects */ /* Subtitle with fade effect */ /* Progress indicator */ /* Keyframe animations */ // Add a slight delay to make loading animation more noticeable // Enhanced form interactions // Add floating label effect // Add ripple effect to buttons