/* Smooth scrolling is handled by scroll-smooth class on */ /* Line clamp utility for project descriptions */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Subtle card hover glow */ .group:hover .card-glow { box-shadow: 0 0 20px rgba(0, 255, 148, 0.15); } /* Smooth transitions for all interactive elements */ a, button { transition-property: transform, box-shadow, background-color, color, border-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* Lazy loaded images fade in */ img[loading="lazy"] { opacity: 0; transition: opacity 0.5s ease-in-out; } img[loading="lazy"].loaded, img[loading="lazy"]:not([src=""]) { opacity: 1; } /* Override for images that have already loaded */ img { opacity: 1; } /* Hero Section Layout Fixes */ .hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .hero-top-right { display: flex; flex-direction: column; align-items: flex-end; max-width: 50%; min-width: 0; /* prevents overflow issues */ } .hero-role { white-space: normal; word-break: break-word; text-align: right; font-size: clamp(12px, 1vw, 16px); max-width: 200px; } @media (max-width: 1024px) { .hero-top { flex-direction: column; align-items: flex-start; } .hero-top-right { align-items: flex-start; max-width: 100%; } .hero-role { text-align: left; } } /* Hero Visual Hierarchy */ .hero-title { position: relative; z-index: 3; } .hero-strip { position: relative; margin-top: 5px; /* Sits between STACK and DEVELOPER */ margin-left: -10px; z-index: 2; width: 105%; transform: rotate(-1.5deg); box-shadow: 0 4px 0 black; padding: 16px 0; } .hero-strip-text { transform: rotate(1.5deg); /* Cancels parent rotation */ } .hero-outline { position: relative; margin-top: 15px; /* Gives breathing space */ z-index: 1; opacity: 0.2; } @media (max-width: 768px) { .hero-strip { transform: rotate(-1deg); width: 105%; margin-top: -5px; margin-left: -5px; } .hero-outline { margin-top: 5px; } } /* Footer Compact Style */ .footer { padding: 50px 40px 25px; position: relative; background: black; } .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 80px; margin-bottom: 40px; } .footer-left { max-width: 380px; } .footer-logo { font-size: 32px; transition: 0.3s ease; } .footer-logo:hover { letter-spacing: 2px; } .footer-heading { font-size: 11px; letter-spacing: 2px; opacity: 0.6; text-transform: uppercase; margin-bottom: 20px; font-weight: 700; } .footer-links a { font-size: 15px; opacity: 0.85; display: block; margin-bottom: 10px; color: white; text-decoration: none; transition: 0.3s; } .footer-links a:hover { opacity: 1; color: #00ffb2; } .footer-video-link { margin-top: 8px; font-size: 13px; color: #ff2e88 !important; font-weight: 600; display: block; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .footer-bg-text { position: absolute; font-size: 180px; opacity: 0.01; font-weight: 900; pointer-events: none; bottom: -20px; left: 20px; line-height: 0.8; white-space: nowrap; z-index: 0; letter-spacing: 10px; } .back-to-top { border: 1px solid #333; padding: 8px 16px; transition: 0.3s; background: transparent; color: white; font-size: 11px; font-family: monospace; } .back-to-top:hover { background: white; color: black; } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 40px; } .footer-bottom { flex-direction: column; gap: 20px; align-items: flex-start; } }