@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');* {margin: 0;padding: 0;box-sizing: border-box;} :root {/* Enhanced Color Palette */ --primary: #d946ef;--secondary: #f43f5e;--accent: #0ea5e9;--tertiary: #8b5cf6;/* Gradient System */ --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #d946ef 60%, #f43f5e 100%);--gradient-primary: linear-gradient(135deg, #d946ef 0%, #f43f5e 100%);--gradient-secondary: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);--gradient-accent: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);--gradient-card: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);--gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);/* Typography */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;--font-display: 'Playfair Display', Georgia, serif;/* Colors */ --text-primary: #0f172a;--text-secondary: #475569;--text-muted: #64748b;--text-light: rgba(255, 255, 255, 0.9);--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-dark: #0f172a;/* Glass Effects */ --glass: rgba(255, 255, 255, 0.1);--glass-border: rgba(255, 255, 255, 0.2);--glass-strong: rgba(255, 255, 255, 0.15);/* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);--shadow-colored: 0 25px 50px -12px rgba(217, 70, 239, 0.25);/* Border Radius */ --radius-sm: 0.5rem;--radius-md: 0.75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;--radius-full: 9999px;/* Animations */ --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);} html {scroll-behavior: smooth;} body {font-family: var(--font-primary);line-height: 1.6;color: var(--text-primary);overflow-x: hidden;background: var(--bg-primary);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /* Custom Cursor */ .cursor {width: 24px;height: 24px;border: 2px solid var(--primary);border-radius: 50%;position: fixed;pointer-events: none;z-index: 10000;transition: all 0.15s ease;transform: translate(-50%, -50%);mix-blend-mode: difference;} .cursor-follower {width: 8px;height: 8px;background: var(--primary);border-radius: 50%;position: fixed;pointer-events: none;z-index: 10000;transition: all 0.3s ease;transform: translate(-50%, -50%);} .cursor.hover {transform: translate(-50%, -50%) scale(1.5);background: rgba(217, 70, 239, 0.1);backdrop-filter: blur(10px);} /* Enhanced Loading Screen */ .loading-screen {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: var(--gradient-hero);display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 10001;transition: opacity 0.8s ease;} .loading-content {text-align: center;color: white;display: flex;flex-direction: column;align-items: center;justify-content: center;} .loading-logo {font-family: var(--font-display);font-size: 3rem;font-weight: 800;margin-bottom: 1rem;animation: logoGlow 2s ease-in-out infinite;} .loading-text {font-size: 1.2rem;font-weight: 500;opacity: 0.8;margin-bottom: 2rem;} .loading-progress {width: 200px;height: 4px;background: rgba(255, 255, 255, 0.2);border-radius: 2px;overflow: hidden;margin: 0 auto;} .loading-bar {height: 100%;background: rgba(255, 255, 255, 0.8);border-radius: 2px;width: 0%;animation: loadingProgress 2s ease-in-out;} @keyframes logoGlow {0%, 100% {opacity: 1;text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);} 50% {opacity: 0.7;text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);} } @keyframes loadingProgress {0% {width: 0%;} 100% {width: 100%;} } /* Enhanced Navigation */ .nav {position: fixed;top: 2rem;left: 50%;transform: translateX(-50%);background: var(--glass-strong);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--radius-full);padding: 0.75rem 2rem;z-index: 1000;transition: all 0.3s var(--ease-smooth);box-shadow: var(--shadow-lg);} /* Fallback for browsers without backdrop-filter support */ @supports not (backdrop-filter: blur(20px)) {.nav {background: rgba(255, 255, 255, 0.9);} .nav.scrolled {background: rgba(255, 255, 255, 0.95);} } .nav.scrolled {background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(30px);border-color: rgba(0, 0, 0, 0.1);} .nav-container {display: flex;align-items: center;gap: 2rem;} .logo {font-family: var(--font-display);font-size: 1.25rem;font-weight: 800;color: white;transition: color 0.3s ease;} .nav.scrolled .logo {color: var(--text-primary);} .nav-links {display: flex;gap: 1.5rem;list-style: none;align-items: center;} .nav-links a {color: white;text-decoration: none;font-weight: 500;font-size: 0.9rem;transition: all 0.3s var(--ease-smooth);position: relative;padding: 0.5rem 1rem;border-radius: var(--radius-full);} .nav.scrolled .nav-links a {color: var(--text-secondary);} .nav-links a:hover, .nav-links a.active {background: var(--glass-strong);transform: translateY(-2px);color: white;} .nav.scrolled .nav-links a:hover, .nav.scrolled .nav-links a.active {background: var(--gradient-primary);color: white;} /* Back to Portfolio styling */ .back-to-main {background: var(--gradient-primary) !important;color: white !important;font-weight: 600 !important;} .nav.scrolled .back-to-main {background: var(--gradient-primary) !important;color: white !important;} /* Breadcrumb Navigation */ .breadcrumb-container {position: fixed;top: 6rem;left: 50%;transform: translateX(-50%);z-index: 999;background: var(--glass-strong);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--radius-full);padding: 0.5rem 1.5rem;box-shadow: var(--shadow-md);transition: all 0.3s var(--ease-smooth);} .breadcrumb {display: flex;align-items: center;gap: 0.75rem;font-size: 0.9rem;color: white;} .breadcrumb-link {color: rgba(255, 255, 255, 0.8);text-decoration: none;font-weight: 500;transition: color 0.3s ease;} .breadcrumb-link:hover {color: white;} .breadcrumb-separator {color: rgba(255, 255, 255, 0.6);font-weight: 400;} .breadcrumb-current {color: white;font-weight: 600;} /* Mobile Menu */ .mobile-menu-btn {display: none;background: none;border: none;color: white;font-size: 1.5rem;cursor: pointer;} /* Enhanced Hero Section */ .hero {min-height: 100vh;background: var(--gradient-hero);display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;padding-top: 8rem;/* Ensure clearance from fixed navigation */ } /* Additional Chrome-specific padding for navigation clearance */ @media screen and (-webkit-min-device-pixel-ratio: 1) {.hero {padding-top: 10rem;} } /* MacBook Pro 13-inch specific adjustments */ @media screen and (min-width: 1024px) and (max-width: 1440px) {.hero {padding-top: 12rem;} } .hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;animation: patternFloat 25s infinite linear;} @keyframes patternFloat {0% {transform: translateY(0px) rotate(0deg);} 50% {transform: translateY(-20px) rotate(180deg);} 100% {transform: translateY(0px) rotate(360deg);} } .hero-content {text-align: center;color: white;max-width: 900px;padding: 0 2rem;position: relative;z-index: 2;} .hero-badge {display: inline-flex;align-items: center;gap: 0.5rem;background: var(--glass);backdrop-filter: blur(10px);border: 1px solid var(--glass-border);border-radius: var(--radius-full);padding: 0.5rem 1.5rem;font-size: 0.9rem;font-weight: 500;margin-bottom: 2rem;animation: slideDown 1s ease 0.5s both;} /* Fallback for hero badge glass effect */ @supports not (backdrop-filter: blur(10px)) {.hero-badge {background: rgba(255, 255, 255, 0.2);} .breadcrumb-container {background: rgba(255, 255, 255, 0.2);} .hero-nav-btn {background: rgba(255, 255, 255, 0.2);} } .status-dot {width: 8px;height: 8px;background: #22c55e;border-radius: 50%;animation: statusPulse 2s infinite;} @keyframes statusPulse {0%, 100% {opacity: 1;box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);} 50% {opacity: 0.7;box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);} } .hero-title {font-family: var(--font-display);font-size: clamp(3rem, 8vw, 5rem);font-weight: 900;line-height: 1.1;margin-bottom: 1.5rem;background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 50%, #e6f3ff 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;animation: slideUp 1s ease 0.7s both;} .hero-subtitle {font-size: 1.25rem;font-weight: 400;margin-bottom: 2rem;opacity: 0.9;line-height: 1.7;animation: slideUp 1s ease 0.9s both;} .hero-nav {display: flex;justify-content: center;flex-wrap: wrap;gap: 1rem;margin-bottom: 3rem;animation: slideUp 1s ease 1.1s both;} .hero-nav-btn {background: var(--glass-strong);color: white;text-decoration: none;padding: 0.75rem 2rem;border-radius: var(--radius-full);font-weight: 600;border: 1px solid var(--glass-border);backdrop-filter: blur(10px);transition: all 0.3s var(--ease-smooth);box-shadow: var(--shadow-md);} .hero-nav-btn:hover {background: var(--glass);transform: translateY(-3px);box-shadow: var(--shadow-xl);} /* Sections */ .section {padding: 6rem 2rem;position: relative;} .section-large {padding: 8rem 2rem;} .container {max-width: 1200px;margin: 0 auto;} /* Passion Section Cards */ .passion-section {margin-bottom: 6rem;opacity: 0;transform: translateY(50px);transition: all 0.8s var(--ease-smooth);} .passion-section.visible {opacity: 1;transform: translateY(0);} .passion-card {background: var(--gradient-card);border-radius: var(--radius-2xl);overflow: hidden;box-shadow: var(--shadow-lg);transition: all 0.4s var(--ease-smooth);position: relative;border: 1px solid rgba(255, 255, 255, 0.1);} .passion-card:hover {transform: translateY(-15px) scale(1.02);box-shadow: var(--shadow-2xl);} .passion-content {display: grid;grid-template-columns: 1fr 1fr;gap: 3rem;align-items: center;padding: 3rem;} .passion-content.reverse {grid-template-columns: 1fr 1fr;} .passion-text h2 {font-family: var(--font-display);font-size: 2.5rem;font-weight: 800;margin-bottom: 1.5rem;background: var(--gradient-primary);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;line-height: 1.2;} .passion-text p {font-size: 1.125rem;color: var(--text-secondary);line-height: 1.8;margin-bottom: 2rem;} /* Carousel Container */ .carousel-container {position: relative;border-radius: var(--radius-xl);overflow: hidden;box-shadow: var(--shadow-xl);transition: transform 0.3s var(--ease-smooth);} .carousel-container:hover {transform: scale(1.05);} .carousel-image {width: 100%;height: 400px;object-fit: cover;object-position: center;transition: transform 0.6s var(--ease-smooth);border-radius: var(--radius-lg);} .carousel-btn {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(255, 255, 255, 0.9);border: none;width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.3s var(--ease-smooth);box-shadow: var(--shadow-md);color: var(--text-primary);} .carousel-btn:hover {background: white;transform: translateY(-50%) scale(1.1);box-shadow: var(--shadow-lg);} .carousel-btn-prev {left: 1rem;} .carousel-btn-next {right: 1rem;} /* Enhanced Buttons */ .btn {padding: 1rem 2.5rem;border: none;border-radius: var(--radius-full);font-weight: 600;text-decoration: none;display: inline-flex;align-items: center;gap: 0.75rem;transition: all 0.4s var(--ease-smooth);cursor: pointer;position: relative;overflow: hidden;font-size: 1rem;} .btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);transition: left 0.6s var(--ease-smooth);} .btn:hover::before {left: 100%;} .btn-primary {background: var(--gradient-primary);color: white;box-shadow: var(--shadow-colored);} .btn-primary:hover {transform: translateY(-3px);box-shadow: var(--shadow-2xl), var(--shadow-colored);} /* Footer */ .footer {background: var(--bg-dark);color: white;padding: 3rem 2rem 2rem;text-align: center;} .footer p {opacity: 0.6;font-size: 0.9rem;} /* Animations */ @keyframes slideUp {from {opacity: 0;transform: translateY(50px);} to {opacity: 1;transform: translateY(0);} } @keyframes slideDown {from {opacity: 0;transform: translateY(-30px);} to {opacity: 1;transform: translateY(0);} } /* Enhanced Mobile Responsiveness */ @media (max-width: 1024px) {.passion-content, .passion-content.reverse {grid-template-columns: 1fr;gap: 2rem;text-align: center;} } @media (max-width: 768px) {.nav {top: 1rem;padding: 0.5rem 1rem;left: 1rem;right: 1rem;transform: none;} .breadcrumb-container {top: 4.5rem;left: 1rem;right: 1rem;transform: none;padding: 0.4rem 1rem;} .breadcrumb {font-size: 0.8rem;gap: 0.5rem;} .nav-container {justify-content: space-between;} .nav-links {display: none;} .mobile-menu-btn {display: block;} .hero {padding: 8rem 1rem 2rem;min-height: 100vh;} .hero-title {font-size: 2.5rem;} .hero-nav {flex-direction: column;align-items: center;} .passion-content {padding: 2rem;} .passion-text h2 {font-size: 2rem;} .carousel-image {height: 300px;} .section {padding: 4rem 1rem;} } @media (max-width: 480px) {.hero {padding: 9rem 1rem 2rem;} .hero-title {font-size: 2rem;} .hero-nav-btn {width: 100%;justify-content: center;} .passion-card {padding: 1.5rem;} } /* Hide cursor on mobile/touch devices */ @media (hover: none) and (pointer: coarse) {.cursor, .cursor-follower {display: none !important;} }