/* Custom styles and animations */ :root { --amber-primary: #f59e0b; --amber-secondary: #fbbf24; --yellow-primary: #eab308; --yellow-secondary: #fde047; --dark-bg: #111827; --dark-surface: #1f2937; --dark-border: #374151; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--dark-bg); } ::-webkit-scrollbar-thumb { background: var(--amber-primary); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--amber-secondary); } /* Gradient animation */ @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animate-gradient { background-size: 200% 200%; animation: gradient 3s ease infinite; } /* Paper card hover effect */ .paper-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .paper-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15); } /* Loading shimmer */ .shimmer { background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Floating animation for hero elements */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .float-animation { animation: float 3s ease-in-out infinite; } /* Custom button styles */ .btn-primary { @apply bg-amber-500 hover:bg-amber-400 text-gray-900 font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105; } .btn-secondary { @apply border border-amber-500 text-amber-400 hover:bg-amber-500 hover:text-gray-900 font-semibold py-3 px-6 rounded-lg transition-all duration-200; } /* Glass morphism effect */ .glass { background: rgba(31, 41, 55, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(245, 158, 11, 0.2); } /* Fade-in animation */ .fade-in { opacity: 0; transform: translateY(20px); animation: fadeIn 0.6s ease-out forwards; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } /* Staggered animation delays */ .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } /* Responsive typography */ @media (max-width: 640px) { .text-responsive-h1 { font-size: 2.5rem; line-height: 1.1; } .text-responsive-h2 { font-size: 2rem; line-height: 1.2; } } /* Custom selection color */ ::selection { background: rgba(245, 158, 11, 0.3); color: var(--amber-primary); } /* Focus styles */ .focus\:ring-amber-500:focus { --tw-ring-color: var(--amber-primary); } /* Custom form styles */ input[type="text"], input[type="email"], textarea, select { background-color: var(--dark-surface); border-color: var(--dark-border); color: #f3f4f6; } input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus { border-color: var(--amber-primary); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); } /* Tag styles */ .tag { @apply inline-block px-3 py-1 text-xs font-medium rounded-full; } .tag-ml { background: rgba(245, 158, 11, 0.15); color: var(--amber-primary); border: 1px solid rgba(245, 158, 11, 0.3); } .tag-cv { background: rgba(234, 179, 8, 0.15); color: var(--yellow-primary); border: 1px solid rgba(234, 179, 8, 0.3); } .tag-nlp { background: rgba(251, 191, 36, 0.15); color: var(--amber-secondary); border: 1px solid rgba(251, 191, 36, 0.3); } .tag-robotics { background: rgba(253, 224, 71, 0.15); color: var(--yellow-secondary); border: 1px solid rgba(253, 224, 71, 0.3); } .tag-ds { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); } /* Mobile menu animation */ .mobile-menu-enter { opacity: 0; transform: translateY(-10px); } .mobile-menu-enter-active { opacity: 1; transform: translateY(0); transition: opacity 0.2s, transform 0.2s; } /* Paper preview modal */ .modal-backdrop { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); } .modal-content { background: var(--dark-surface); border: 1px solid var(--dark-border); max-height: 90vh; overflow-y: auto; } /* Empty state */ .empty-state { @apply text-center py-16; } .empty-state-icon { @apply w-16 h-16 mx-auto text-gray-600 mb-4; } /* Success message */ .success-message { @apply bg-green-500/10 border border-green-500/30 text-green-400 px-4 py-3 rounded-lg; }