@import url(https://api.fontshare.com/v2/css?f[]=clash-display@600,700&display=swap);
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
overflow-x: hidden;
}
.font-display {
font-family: 'Clash Display', sans-serif;
}
.cursor-glow {
position: fixed;
width: 20px;
height: 20px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
mix-blend-mode: screen;
}
.animate-on-scroll {
opacity: 0;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.bg-subtle-grid {
background-size: 40px 40px;
background-image: linear-gradient(to right, rgba(16, 185, 129, 0.03) 1px, transparent 1px), 
linear-gradient(to bottom, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
}
.text-gradient {
background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #10b981 100%);
background-size: 200% 200%;
animation: gradient-shift 3s ease infinite;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.bg-gradient {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.border-gradient {
position: relative;
border-radius: 12px;
padding: 2px;
background: linear-gradient(135deg, #10b981, #34d399, #10b981);
background-size: 200% 200%;
animation: gradient-shift 3s ease infinite;
}
.border-gradient > div {
background: #0a0a0a;
border-radius: 10px;
height: 100%;
}
.glass {
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(16, 185, 129, 0.1);
}
.glass-strong {
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.cursor::after {
content: "|";
animation: blink 1s step-end infinite;
color: #10b981;
}
@keyframes blink {
from, to { opacity: 1; }
50% { opacity: 0; }
}
.stagger-item:nth-child(1) { transition-delay: 0.1s; }
.stagger-item:nth-child(2) { transition-delay: 0.2s; }
.stagger-item:nth-child(3) { transition-delay: 0.3s; }
.stagger-item:nth-child(4) { transition-delay: 0.4s; }
.stagger-item:nth-child(5) { transition-delay: 0.5s; }
.stagger-item:nth-child(6) { transition-delay: 0.6s; }
.stagger-item:nth-child(7) { transition-delay: 0.7s; }
.stagger-item:nth-child(8) { transition-delay: 0.8s; }
.hover-lift {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.3);
}
.hover-glow:hover {
box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
border-color: rgba(16, 185, 129, 0.6);
}
.animated-underline {
position: relative;
}
.animated-underline::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background: linear-gradient(90deg, #10b981, #34d399);
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.animated-underline:hover::after {
width: 100%;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.animate-marquee {
animation: marquee 40s linear infinite;
}
.brand-logo {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(16, 185, 129, 0.1);
min-width: 140px;
width: auto;
padding: 0 16px;
}
.brand-logo:hover {
background: rgba(16, 185, 129, 0.1);
transform: translateY(-5px);
border-color: rgba(16, 185, 129, 0.3);
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2);
}
.floating-shape {
position: absolute;
border-radius: 50%;
background: rgba(16, 185, 129, 0.1);
filter: blur(1px);
}
.floating-shape:nth-child(1) {
width: 80px;
height: 80px;
top: 20%;
left: 10%;
animation: float 8s ease-in-out infinite;
}
.floating-shape:nth-child(2) {
width: 60px;
height: 60px;
top: 60%;
right: 15%;
animation: float 6s ease-in-out infinite reverse;
}
.floating-shape:nth-child(3) {
width: 40px;
height: 40px;
bottom: 30%;
left: 20%;
animation: float 10s ease-in-out infinite;
}
.tech-icon {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tech-icon:hover {
transform: translateY(-8px) rotate(5deg) scale(1.1);
filter: drop-shadow(0 10px 20px rgba(16, 185, 129, 0.3));
}
.project-card {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(16, 185, 129, 0.1);
}
.project-card:hover {
transform: translateY(-15px) rotateX(5deg);
border-color: rgba(16, 185, 129, 0.4);
box-shadow: 0 25px 50px rgba(16, 185, 129, 0.2);
}
.skill-bar {
position: relative;
overflow: hidden;
}
.skill-bar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.4), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
.testimonial-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15);
}
.testimonial-carousel {
position: relative;
}
.testimonial-slide {
display: none;
}
.testimonial-slide.active {
display: block;
}
.testimonial-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(16, 185, 129, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.testimonial-dot.active {
background: #10b981;
transform: scale(1.2);
}
@media (max-width: 768px) {
.brand-logo {
min-width: 120px;
height: 60px;
padding: 0 12px;
}
.floating-shape {
display: none;
}
} ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #10b981, #34d399);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #059669, #10b981);
}