/* Nexus ATS - Corporate Theme Colors: navy-900 (#0f1b2d), primary-600 (#2563eb), navy-50 (#f0f4f8) */ /* ===== Animations ===== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes glow { 0%, 100% { box-shadow: 0 0 5px rgba(37, 99, 235, 0.2); } 50% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.4); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; } .animate-slide-up { animation: slideUp 0.3s ease-out forwards; } .animate-float { animation: float 3s ease-in-out infinite; } .animate-glow { animation: glow 2s ease-in-out infinite; } /* Staggered children */ .stagger > * { opacity: 0; animation: fadeInUp 0.5s ease-out forwards; } .stagger > *:nth-child(1) { animation-delay: 0.05s; } .stagger > *:nth-child(2) { animation-delay: 0.1s; } .stagger > *:nth-child(3) { animation-delay: 0.15s; } .stagger > *:nth-child(4) { animation-delay: 0.2s; } .stagger > *:nth-child(5) { animation-delay: 0.25s; } .stagger > *:nth-child(6) { animation-delay: 0.3s; } .stagger > *:nth-child(7) { animation-delay: 0.35s; } .stagger > *:nth-child(8) { animation-delay: 0.4s; } /* Smooth hover transitions */ .card-hover { transition: all 0.2s ease; } .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(15, 27, 45, 0.1), 0 4px 10px -5px rgba(15, 27, 45, 0.05); } /* ===== 3D Card Tilt Effect ===== */ .tilt-card { transition: transform 0.1s ease; transform-style: preserve-3d; perspective: 800px; } .tilt-card:hover { transform: perspective(800px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); box-shadow: 0 20px 40px -10px rgba(15, 27, 45, 0.15), 0 8px 20px -5px rgba(15, 27, 45, 0.1); } .tilt-card .card-shine { position: absolute; inset: 0; background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255,255,255,0.1) 0%, transparent 60%); pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.3s; } .tilt-card:hover .card-shine { opacity: 1; } /* ===== Card Flip Effect ===== */ .flip-card { perspective: 1000px; } .flip-card-inner { transition: transform 0.6s; transform-style: preserve-3d; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { backface-visibility: hidden; position: absolute; inset: 0; } .flip-card-back { transform: rotateY(180deg); } /* ===== Skill Tag Pop Effect ===== */ .skill-tag { transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .skill-tag:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); } /* ===== Shimmer Loading Skeleton ===== */ .shimmer { background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; } /* ===== Verified Badge Glow ===== */ .verified-glow { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); animation: pulse-glow 2s infinite; } @keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } /* ===== Scroll-triggered 3D parallax ===== */ .parallax-section { transform-style: preserve-3d; } .parallax-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform; } /* Typography */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f0f4f8; } ::-webkit-scrollbar-thumb { background: #bcccdc; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #9fb3c8; } /* Accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .card-hover:hover, .tilt-card:hover, .skill-tag:hover { transform: none; } .flip-card:hover .flip-card-inner { transform: none; } }