body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: white; color: black; } /* Dark mode overrides when is active */ .dark body { background-color: #1a202c; /* dark background */ color: #cbd5e0; /* light text */ } /* Fade-in animation for sections */ .fade-in { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Ensure canvas charts are responsive */ canvas { max-width: 100%; height: auto; } /* Hero background gradient */ .hero-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .dark .hero-bg { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); } /* Custom shadow for cards and images */ .shadow-lg-custom { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .dark .shadow-lg-custom { box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05); } /* Scrollbar styling for gene suggestions dropdown */ #gene-suggestions::-webkit-scrollbar { width: 6px; } #gene-suggestions::-webkit-scrollbar-thumb { background-color: rgba(99, 102, 241, 0.7); /* Indigo-500 */ border-radius: 3px; } #gene-suggestions::-webkit-scrollbar-track { background: transparent; } /* Dark mode scrollbar */ .dark #gene-suggestions::-webkit-scrollbar-thumb { background-color: rgba(203, 213, 225, 0.7); /* Slate-300 */ }