Spaces:
Running
Running
| /* ===== BASE STYLES ===== */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| ::selection { | |
| background: rgba(124, 58, 237, 0.4); | |
| color: #fff; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0a0a0f; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, #7c3aed, #06b6d4); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(180deg, #a855f7, #22d3ee); | |
| } | |
| /* ===== NAVIGATION ===== */ | |
| .nav-link { | |
| position: relative; | |
| padding: 0.5rem 1rem; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: #9ca3af; | |
| transition: color 0.3s ease; | |
| text-decoration: none; | |
| border-radius: 0.5rem; | |
| } | |
| .nav-link:hover { | |
| color: #fff; | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .nav-link.active { | |
| color: #a855f7; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 2px; | |
| left: 50%; | |
| transform: translateX(-50%) scaleX(0); | |
| width: 20px; | |
| height: 2px; | |
| background: linear-gradient(90deg, #7c3aed, #06b6d4); | |
| border-radius: 2px; | |
| transition: transform 0.3s ease; | |
| } | |
| .nav-link:hover::after, | |
| .nav-link.active::after { | |
| transform: translateX(-50%) scaleX(1); | |
| } | |
| /* Mobile nav */ | |
| .mobile-nav-link { | |
| display: block; | |
| padding: 0.75rem 1rem; | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| color: #9ca3af; | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| border-radius: 0.75rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .mobile-nav-link:hover, | |
| .mobile-nav-link.active { | |
| color: #fff; | |
| background: rgba(168, 85, 247, 0.15); | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| background: rgba(15, 15, 26, 0.95); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .mobile-menu.open { | |
| max-height: 400px; | |
| } | |
| /* Navbar scrolled */ | |
| #navbar.scrolled { | |
| background: rgba(10, 10, 15, 0.85); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| /* ===== GLASS CARD ===== */ | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| transition: all 0.4s ease; | |
| } | |
| .glass-card:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| box-shadow: 0 8px 32px rgba(124, 58, 237, 0.1); | |
| } | |
| /* ===== BUTTONS ===== */ | |
| .gradient-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1.75rem; | |
| background: linear-gradient(135deg, #7c3aed, #06b6d4); | |
| color: #fff; | |
| font-weight: 600; | |
| border-radius: 0.75rem; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| font-size: 0.95rem; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .gradient-btn::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, #06b6d4, #7c3aed); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .gradient-btn:hover::before { | |
| opacity: 1; | |
| } | |
| .gradient-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4); | |
| } | |
| .gradient-btn span, | |
| .gradient-btn i { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .gradient-btn-sm { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.6rem 1.25rem; | |
| background: linear-gradient(135deg, #7c3aed, #06b6d4); | |
| color: #fff; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| border-radius: 0.6rem; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| border: none; | |
| } | |
| .gradient-btn-sm::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, #06b6d4, #7c3aed); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .gradient-btn-sm:hover::before { | |
| opacity: 1; | |
| } | |
| .gradient-btn-sm:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35); | |
| } | |
| .gradient-btn-sm span, | |
| .gradient-btn-sm i { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .glass-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1.75rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #e5e7eb; | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| border-radius: 0.75rem; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .glass-btn:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: rgba(168, 85, 247, 0.4); | |
| color: #fff; | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(124, 58, 237, 0.2); | |
| } | |
| /* ===== SECTION TITLE ===== */ | |
| .section-title { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| margin-top: 0.5rem; | |
| background: linear-gradient(135deg, #fff 0%, #a78bfa 50%, #06b6d4 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| @media (min-width: 768px) { | |
| .section-title { | |
| font-size: 3rem; | |
| } | |
| } | |
| /* ===== ANIMATED ORBs ===== */ | |
| .orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.15; | |
| animation: float 8s ease-in-out infinite; | |
| } | |
| .orb-1 { | |
| width: 400px; | |
| height: 400px; | |
| background: #7c3aed; | |
| top: 10%; | |
| left: -10%; | |
| animation-delay: 0s; | |
| } | |
| .orb-2 { | |
| width: 350px; | |
| height: 350px; | |
| background: #06b6d4; | |
| top: 60%; | |
| right: -10%; | |
| animation-delay: -3s; | |
| } | |
| .orb-3 { | |
| width: 300px; | |
| height: 300px; | |
| background: #a855f7; | |
| bottom: 10%; | |
| left: 30%; | |
| animation-delay: -5s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| 33% { | |
| transform: translate(30px, -30px) scale(1.05); | |
| } | |
| 66% { | |
| transform: translate(-20px, 20px) scale(0.95); | |
| } | |
| } | |
| /* Grid overlay */ | |
| .grid-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%); | |
| -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%); | |
| } | |
| /* ===== SKILL BARS ===== */ | |
| .skill-bar-bg { | |
| height: 10px; | |
| background: rgba(255, 255, 255, 0.06); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .skill-bar-bg::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: repeating-linear-gradient( | |
| 90deg, | |
| transparent, | |
| transparent 10px, | |
| rgba(255, 255, 255, 0.03) 10px, | |
| rgba(255, 255, 255, 0.03) 12px | |
| ); | |
| } | |
| .skill-bar-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--bar-color)); | |
| border-radius: 10px; | |
| width: 0%; | |
| transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .skill-bar-fill.animate { | |
| width: var(--target-width); | |
| } | |
| .skill-bar-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: 30px; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3)); | |
| border-radius: 10px; | |
| } | |
| /* ===== FORM INPUTS ===== */ | |
| .form-input { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 0.75rem; | |
| color: #fff; | |
| font-size: 0.95rem; | |
| font-family: 'Inter', sans-serif; | |
| transition: all 0.3s ease; | |
| outline: none; | |
| } | |
| .form-input::placeholder { | |
| color: #6b7280; | |
| } | |
| .form-input:focus { | |
| border-color: rgba(168, 85, 247, 0.5); | |
| background: rgba(255, 255, 255, 0.06); | |
| box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15); | |
| } | |
| /* ===== SCROLL ANIMATIONS ===== */ | |
| .scroll-animate { | |
| opacity: 0; | |
| transition: opacity 0.8s ease, transform 0.8s ease; | |
| } | |
| .scroll-animate.fade-up { | |
| transform: translateY(40px); | |
| } | |
| .scroll-animate.fade-left { | |
| transform: translateX(-40px); | |
| } | |
| .scroll-animate.fade-right { | |
| transform: translateX(40px); | |
| } | |
| .scroll-animate.visible { | |
| opacity: 1; | |
| transform: translateY(0) translateX(0); | |
| } | |
| /* ===== NAME GRADIENT ANIMATION ===== */ | |
| .name-gradient { | |
| background-size: 200% auto; | |
| animation: gradientShift 4s ease-in-out infinite; | |
| } | |
| @keyframes gradientShift { | |
| 0%, 100% { | |
| background-position: 0% center; | |
| } | |
| 50% { | |
| background-position: 200% center; | |
| } | |
| } | |
| /* ===== PULSE DOTS ===== */ | |
| @keyframes pulse-glow { | |
| 0%, 100% { | |
| box-shadow: 0 0 5px rgba(168, 85, 247, 0.5); | |
| } | |
| 50% { | |
| box-shadow: 0 0 20px rgba(168, 85, 247, 0.8); | |
| } | |
| } | |
| /* ===== FILE DROP ZONE ===== */ | |
| #fileDropZone.drag-active { | |
| border-color: rgba(168, 85, 247, 0.5); | |
| background: rgba(168, 85, 247, 0.05); | |
| } | |
| /* ===== BACK TO TOP ===== */ | |
| #backToTop.visible { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0); | |
| } |