Spaces:
Running
Running
| :root { | |
| --primary: #c084fc; | |
| --secondary: #a78bfa; | |
| --accent: #fbbf24; | |
| --cyan: #67e8f9; | |
| --purple: #a78bfa; | |
| --green: #86efac; | |
| --bg-dark: #0f172a; | |
| --bg-darker: #020617; | |
| --bg-card: #1e293b; | |
| --bg-hover: #334155; | |
| --border: #334155; | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #cbd5e1; | |
| --text-muted: #94a3b8; | |
| --gradient-1: linear-gradient(135deg, #c084fc 0%, #a78bfa 50%, #67e8f9 100%); | |
| --gradient-2: linear-gradient(135deg, #67e8f9 0%, #a78bfa 50%, #fbbf24 100%); | |
| --gradient-3: linear-gradient(135deg, #86efac 0%, #67e8f9 100%); | |
| --shadow-sm: 0 2px 4px rgba(0,0,0,0.1); | |
| --shadow-md: 0 4px 6px rgba(0,0,0,0.2); | |
| --shadow-lg: 0 10px 15px rgba(0,0,0,0.3); | |
| --shadow-xl: 0 20px 25px rgba(0,0,0,0.4); | |
| --shadow-glow: 0 0 30px rgba(192,132,252,0.3); | |
| --spacing-xs: 0.5rem; | |
| --spacing-sm: 1rem; | |
| --spacing-md: 2rem; | |
| --spacing-lg: 3rem; | |
| --spacing-xl: 4rem; | |
| --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-smooth: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| --font-primary: 'Tajawal', sans-serif; | |
| --font-code: 'Fira Code', monospace; | |
| } | |
| [data-theme="light"] { | |
| --bg-dark: #ffffff; | |
| --bg-darker: #f8f9fa; | |
| --bg-card: #ffffff; | |
| --bg-hover: #f1f3f5; | |
| --border: #e5e7eb; | |
| --text-primary: #1f2937; | |
| --text-secondary: #4b5563; | |
| --text-muted: #9ca3af; | |
| } | |
| [dir="rtl"] { direction: rtl; text-align: right; } | |
| [dir="ltr"] { direction: ltr; text-align: left; } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| font-size: 16px; | |
| } | |
| body { | |
| font-family: var(--font-primary); | |
| font-weight: 500; | |
| background: var(--bg-dark); | |
| color: var(--text-primary); | |
| line-height: 1.7; | |
| overflow-x: hidden; | |
| transition: background var(--transition-fast), color var(--transition-fast); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-weight: 700; | |
| } | |
| .hero-name, | |
| .section-title, | |
| .timeline-title, | |
| .project-title, | |
| .category-title { | |
| font-weight: 800; | |
| } | |
| * { | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| .loader-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--bg-darker); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 10000; | |
| transition: opacity 0.5s, visibility 0.5s; | |
| } | |
| .loader-screen.hidden { | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| .loader-content { | |
| text-align: center; | |
| } | |
| .loader-code-text { | |
| font-family: var(--font-code); | |
| font-size: 1.2rem; | |
| color: var(--primary); | |
| margin-bottom: 2rem; | |
| } | |
| .code-line { | |
| display: block; | |
| margin: 0.5rem 0; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| animation: fadeInUp 0.5s ease forwards; | |
| } | |
| .code-line[data-line="1"] { animation-delay: 0.1s; } | |
| .code-line[data-line="2"] { animation-delay: 0.3s; } | |
| .code-line[data-line="3"] { animation-delay: 0.5s; } | |
| .code-line[data-line="4"] { animation-delay: 0.7s; } | |
| @keyframes fadeInUp { | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .loader-spinner-wrapper { | |
| margin: 2rem 0; | |
| } | |
| .loader-spinner { | |
| width: 60px; | |
| height: 60px; | |
| border: 3px solid var(--border); | |
| border-top-color: var(--primary); | |
| border-right-color: var(--cyan); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loader-progress-wrapper { | |
| width: 200px; | |
| height: 4px; | |
| background: var(--border); | |
| border-radius: 2px; | |
| margin: 2rem auto; | |
| overflow: hidden; | |
| } | |
| .loader-progress-bar { | |
| height: 100%; | |
| background: var(--gradient-1); | |
| width: 0%; | |
| animation: progress 2s ease forwards; | |
| box-shadow: 0 0 10px var(--primary); | |
| } | |
| @keyframes progress { | |
| to { width: 100%; } | |
| } | |
| .loader-percentage { | |
| font-family: var(--font-code); | |
| color: var(--primary); | |
| font-size: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .main-header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| background: rgba(10, 14, 39, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border); | |
| z-index: 1000; | |
| transition: all var(--transition); | |
| } | |
| .main-header.scrolled { | |
| background: rgba(10, 14, 39, 0.95); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .nav-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .nav-brand { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .brand-logo { | |
| font-family: var(--font-code); | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| } | |
| .logo-bracket { | |
| color: var(--purple); | |
| } | |
| .logo-text { | |
| background: var(--gradient-1); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .nav-menu { | |
| display: flex; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-weight: 700; | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| transition: all var(--transition-fast); | |
| position: relative; | |
| } | |
| .nav-link::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 0; | |
| height: 2px; | |
| background: var(--gradient-1); | |
| transition: width var(--transition); | |
| } | |
| .nav-link:hover, | |
| .nav-link.active { | |
| color: var(--primary); | |
| } | |
| .nav-link.active::before { | |
| width: 80%; | |
| } | |
| .nav-link i { | |
| font-size: 1rem; | |
| } | |
| .nav-controls { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .lang-toggle, | |
| .theme-toggle, | |
| .menu-toggle { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| color: var(--text-primary); | |
| padding: 0.6rem 1rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.9rem; | |
| } | |
| .lang-toggle:hover, | |
| .theme-toggle:hover { | |
| background: var(--bg-hover); | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| } | |
| .menu-toggle { | |
| display: none; | |
| flex-direction: column; | |
| gap: 4px; | |
| padding: 0.6rem; | |
| } | |
| .menu-toggle span { | |
| width: 24px; | |
| height: 2px; | |
| background: var(--text-primary); | |
| transition: all var(--transition); | |
| } | |
| .menu-toggle.active span:nth-child(1) { | |
| transform: rotate(45deg) translate(5px, 5px); | |
| } | |
| .menu-toggle.active span:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .menu-toggle.active span:nth-child(3) { | |
| transform: rotate(-45deg) translate(7px, -6px); | |
| } | |
| .main-content { | |
| margin-top: 80px; | |
| } | |
| .hero-section { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| position: relative; | |
| overflow: hidden; | |
| padding: 4rem 0; | |
| } | |
| .hero-background { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .code-grid-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(var(--primary) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--primary) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| opacity: 0.05; | |
| animation: gridMove 20s linear infinite; | |
| } | |
| @keyframes gridMove { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(50px, 50px); } | |
| } | |
| .floating-particles { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .particle { | |
| position: absolute; | |
| font-family: var(--font-code); | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| opacity: 0.1; | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(100vh) rotate(0deg); | |
| opacity: 0; | |
| } | |
| 10%, 90% { | |
| opacity: 0.1; | |
| } | |
| 50% { | |
| transform: translateY(-100px) rotate(180deg); | |
| opacity: 0.2; | |
| } | |
| } | |
| .hero-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-content { | |
| z-index: 1; | |
| } | |
| .hero-greeting { | |
| font-family: var(--font-code); | |
| font-size: 1.2rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .greeting-cursor { | |
| animation: blink 1s infinite; | |
| color: var(--primary); | |
| } | |
| @keyframes blink { | |
| 0%, 50% { opacity: 1; } | |
| 51%, 100% { opacity: 0; } | |
| } | |
| .hero-name { | |
| font-family: var(--font-code); | |
| font-size: 4rem; | |
| font-weight: 700; | |
| margin-bottom: 2rem; | |
| line-height: 1.2; | |
| } | |
| .name-prefix { | |
| color: var(--purple); | |
| } | |
| .name-operator { | |
| color: var(--cyan); | |
| margin: 0 0.5rem; | |
| } | |
| .name-value { | |
| background: var(--gradient-1); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .name-suffix { | |
| color: var(--primary); | |
| } | |
| .hero-title { | |
| font-family: var(--font-code); | |
| font-size: 1.5rem; | |
| color: var(--cyan); | |
| margin-bottom: 2rem; | |
| } | |
| .title-prefix { | |
| color: var(--text-muted); | |
| margin-inline-end: 0.5rem; | |
| } | |
| .hero-description { | |
| font-size: 1.1rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 3rem; | |
| line-height: 1.8; | |
| max-width: 600px; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 1rem 2rem; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all var(--transition); | |
| border: 2px solid transparent; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| .btn-primary { | |
| background: var(--gradient-1); | |
| color: white; | |
| border-color: transparent; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 20px rgba(192,132,252,0.3); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 20px rgba(192,132,252,0.3); | |
| } | |
| .hero-social { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .social-icon { | |
| width: 50px; | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| transition: all var(--transition); | |
| } | |
| .social-icon { | |
| transition: all var(--transition-fast); | |
| } | |
| .social-icon:hover { | |
| background: var(--bg-hover); | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(192,132,252,0.2); | |
| } | |
| .hero-image-wrapper { | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .hero-image-container { | |
| position: relative; | |
| width: 400px; | |
| height: 400px; | |
| } | |
| .profile-image-glow { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 120%; | |
| height: 120%; | |
| background: radial-gradient(circle, rgba(255,107,157,0.2) 0%, transparent 70%); | |
| border-radius: 50%; | |
| animation: pulse 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: translate(-50%, -50%) scale(1); | |
| opacity: 0.5; | |
| } | |
| 50% { | |
| transform: translate(-50%, -50%) scale(1.1); | |
| opacity: 0.8; | |
| } | |
| } | |
| .profile-image-frame { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| border: 4px solid var(--primary); | |
| box-shadow: | |
| 0 0 30px rgba(255,107,157,0.3), | |
| 0 0 60px rgba(255,107,157,0.1); | |
| overflow: hidden; | |
| background: var(--bg-card); | |
| } | |
| .profile-image { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-card); | |
| will-change: transform; | |
| } | |
| .profile-placeholder { | |
| font-size: 8rem; | |
| color: var(--primary); | |
| opacity: 0.3; | |
| } | |
| .floating-badge { | |
| position: absolute; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 1rem 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| box-shadow: var(--shadow-md); | |
| animation: floatBadge 3s ease-in-out infinite; | |
| min-width: 200px; | |
| transition: all var(--transition); | |
| } | |
| .floating-badge { | |
| transition: all var(--transition-smooth); | |
| } | |
| .floating-badge:hover { | |
| transform: translateY(-3px) scale(1.03); | |
| border-color: var(--primary); | |
| box-shadow: 0 5px 20px rgba(192,132,252,0.25); | |
| } | |
| .floating-badge i { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| flex-shrink: 0; | |
| } | |
| .badge-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.3rem; | |
| } | |
| .badge-title { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .badge-libs { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| font-weight: 400; | |
| line-height: 1.4; | |
| } | |
| .badge-1 { | |
| top: 10%; | |
| right: -10%; | |
| animation-delay: 0s; | |
| } | |
| .badge-2 { | |
| bottom: 20%; | |
| right: -15%; | |
| animation-delay: 1s; | |
| } | |
| .badge-3 { | |
| top: 50%; | |
| left: -15%; | |
| animation-delay: 2s; | |
| } | |
| @keyframes floatBadge { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| .scroll-indicator { | |
| position: absolute; | |
| bottom: 3rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .scroll-mouse { | |
| width: 30px; | |
| height: 50px; | |
| border: 2px solid var(--border); | |
| border-radius: 15px; | |
| display: flex; | |
| justify-content: center; | |
| padding-top: 8px; | |
| } | |
| .scroll-wheel { | |
| width: 4px; | |
| height: 10px; | |
| background: var(--primary); | |
| border-radius: 2px; | |
| animation: scrollWheel 2s infinite; | |
| } | |
| @keyframes scrollWheel { | |
| 0% { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(20px); | |
| opacity: 0; | |
| } | |
| } | |
| .section { | |
| padding: 4rem 0; | |
| position: relative; | |
| scroll-margin-top: 80px; | |
| } | |
| .section-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| margin-bottom: 4rem; | |
| } | |
| .section-number { | |
| font-family: var(--font-code); | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| font-weight: 700; | |
| } | |
| .section-title { | |
| font-family: var(--font-code); | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .title-bracket { | |
| color: var(--purple); | |
| } | |
| .title-text { | |
| background: var(--gradient-1); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .section-line { | |
| flex: 1; | |
| height: 2px; | |
| background: var(--gradient-1); | |
| margin-inline-start: 2rem; | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .about-text { | |
| font-size: 1.1rem; | |
| color: var(--text-secondary); | |
| line-height: 1.8; | |
| margin-bottom: 3rem; | |
| } | |
| .about-stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2rem; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| padding: 2rem; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| transition: all var(--transition); | |
| } | |
| .stat-item { | |
| transition: all var(--transition-fast); | |
| } | |
| .stat-item:hover { | |
| border-color: var(--primary); | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 20px rgba(0,0,0,0.2); | |
| } | |
| .stat-number { | |
| font-family: var(--font-code); | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .about-image-container { | |
| position: relative; | |
| } | |
| .code-block { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 3rem; | |
| font-family: var(--font-code); | |
| font-size: 0.9rem; | |
| line-height: 1.8; | |
| } | |
| .code-line { | |
| margin: 0.5rem 0; | |
| } | |
| .code-line.indent { | |
| padding-inline-start: 2rem; | |
| } | |
| .code-keyword { color: var(--purple); } | |
| .code-variable { color: var(--cyan); } | |
| .code-operator { color: var(--primary); } | |
| .code-brace, | |
| .code-bracket { color: var(--accent); } | |
| .code-property { color: var(--cyan); } | |
| .code-string { color: var(--accent); } | |
| .code-comma, | |
| .code-semicolon { color: var(--text-muted); } | |
| .skills-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 3rem; | |
| } | |
| .skill-category { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 3rem; | |
| } | |
| .category-title { | |
| font-family: var(--font-code); | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-bottom: 2rem; | |
| font-weight: 700; | |
| } | |
| .skill-items { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .skill-item { | |
| position: relative; | |
| } | |
| .skill-header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 0.5rem; | |
| } | |
| .skill-name { | |
| font-family: var(--font-code); | |
| color: var(--cyan); | |
| font-weight: 600; | |
| } | |
| .skill-percent { | |
| font-family: var(--font-code); | |
| color: var(--primary); | |
| font-weight: 600; | |
| } | |
| .skill-bar { | |
| height: 12px; | |
| background: var(--bg-darker); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| position: relative; | |
| } | |
| .skill-progress { | |
| height: 100%; | |
| background: var(--gradient-1); | |
| border-radius: 6px; | |
| width: 0%; | |
| position: relative; | |
| box-shadow: 0 0 10px rgba(255,107,157,0.5); | |
| } | |
| .skill-progress::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); | |
| animation: shimmer 2s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .timeline { | |
| position: relative; | |
| padding-inline-start: 2rem; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: var(--gradient-1); | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-bottom: 4rem; | |
| padding-inline-start: 3rem; | |
| } | |
| .timeline-marker { | |
| position: absolute; | |
| left: -2.5rem; | |
| top: 0; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| border: 3px solid var(--bg-dark); | |
| box-shadow: | |
| 0 0 20px var(--primary), | |
| 0 0 40px var(--primary); | |
| animation: pulse 2s infinite; | |
| } | |
| .timeline-content { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 3rem; | |
| transition: all var(--transition); | |
| } | |
| .timeline-content { | |
| transition: all var(--transition-smooth); | |
| } | |
| .timeline-content:hover { | |
| border-color: var(--primary); | |
| transform: translateX(5px); | |
| box-shadow: 0 8px 25px rgba(0,0,0,0.2); | |
| } | |
| .timeline-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .timeline-year { | |
| font-family: var(--font-code); | |
| color: var(--primary); | |
| font-weight: 700; | |
| font-size: 0.9rem; | |
| } | |
| .timeline-badge { | |
| background: var(--gradient-1); | |
| color: white; | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| font-family: var(--font-code); | |
| } | |
| .timeline-title { | |
| font-family: var(--font-code); | |
| font-size: 1.5rem; | |
| color: var(--cyan); | |
| margin-bottom: 0.5rem; | |
| font-weight: 700; | |
| } | |
| .timeline-company { | |
| color: var(--purple); | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .timeline-company i { | |
| font-size: 1rem; | |
| } | |
| .timeline-description { | |
| color: var(--text-secondary); | |
| line-height: 1.8; | |
| margin-bottom: 2rem; | |
| } | |
| .timeline-achievements { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.8rem; | |
| margin-bottom: 2rem; | |
| padding: 1.5rem; | |
| background: var(--bg-darker); | |
| border-radius: 12px; | |
| border-left: 3px solid var(--primary); | |
| } | |
| .achievement-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| } | |
| .achievement-item i { | |
| color: var(--green); | |
| font-size: 1rem; | |
| flex-shrink: 0; | |
| } | |
| .timeline-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .tag { | |
| background: var(--bg-darker); | |
| color: var(--primary); | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 6px; | |
| font-size: 0.85rem; | |
| font-family: var(--font-code); | |
| border: 1px solid var(--border); | |
| } | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); | |
| gap: 3rem; | |
| } | |
| .project-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| transition: all var(--transition); | |
| cursor: pointer; | |
| } | |
| .project-card { | |
| transition: all var(--transition-smooth); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary); | |
| box-shadow: 0 15px 35px rgba(0,0,0,0.3); | |
| } | |
| .project-image { | |
| position: relative; | |
| width: 100%; | |
| height: 250px; | |
| background: var(--bg-darker); | |
| overflow: hidden; | |
| } | |
| .project-placeholder { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 4rem; | |
| color: var(--primary); | |
| opacity: 0.3; | |
| } | |
| .project-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.8); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| visibility: hidden; /* Hides it from the browser's mouse/pointer engine */ | |
| pointer-events: none; /* Stops it from blocking clicks while invisible */ | |
| transition: opacity var(--transition), visibility var(--transition); | |
| } | |
| .project-card:hover .project-overlay { | |
| opacity: 1; | |
| visibility: visible; /* Makes it physically present again */ | |
| pointer-events: auto; /* Allows you to click the buttons inside it */ | |
| } | |
| .project-links { | |
| display: flex; | |
| gap: 2rem; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .project-link { | |
| width: 50px; | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--primary); | |
| color: white; | |
| border-radius: 50%; | |
| text-decoration: none; | |
| transition: all var(--transition-fast); /* Consolidated your two transition properties into one */ | |
| } | |
| .project-link:hover { | |
| transform: scale(1.08); | |
| box-shadow: 0 5px 15px rgba(192,132,252,0.3); | |
| } | |
| .project-content { | |
| padding: 3rem; | |
| } | |
| .project-title { | |
| font-family: var(--font-code); | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| font-weight: 700; | |
| } | |
| .project-description { | |
| color: var(--text-secondary); | |
| line-height: 1.8; | |
| margin-bottom: 2rem; | |
| } | |
| .project-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .contact-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1.5fr; | |
| gap: 4rem; | |
| } | |
| .contact-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .contact-item { | |
| display: flex; | |
| gap: 2rem; | |
| padding: 3rem; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| transition: all var(--transition); | |
| } | |
| .contact-item { | |
| transition: all var(--transition-smooth); | |
| cursor: pointer; | |
| } | |
| .contact-item:hover { | |
| border-color: var(--primary); | |
| transform: translateX(5px); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.15); | |
| } | |
| .contact-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--gradient-1); | |
| border-radius: 12px; | |
| color: white; | |
| font-size: 1.5rem; | |
| flex-shrink: 0; | |
| } | |
| .contact-details { | |
| flex: 1; | |
| } | |
| .contact-label { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| margin-bottom: 0.3rem; | |
| font-family: var(--font-code); | |
| } | |
| .contact-value { | |
| color: var(--primary); | |
| font-weight: 600; | |
| text-decoration: none; | |
| font-family: var(--font-code); | |
| display: block; | |
| } | |
| .contact-value:hover { | |
| color: var(--cyan); | |
| } | |
| .contact-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .form-group { | |
| position: relative; | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 1rem; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| color: var(--text-primary); | |
| font-family: var(--font-primary); | |
| font-size: 1rem; | |
| transition: all var(--transition); | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(255,107,157,0.1); | |
| } | |
| .form-textarea { | |
| resize: vertical; | |
| min-height: 150px; | |
| } | |
| .btn-submit { | |
| align-self: flex-start; | |
| } | |
| .main-footer { | |
| background: var(--bg-card); | |
| border-top: 1px solid var(--border); | |
| padding: 3rem 0; | |
| margin-top: 4rem; | |
| } | |
| .footer-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| .footer-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .footer-text-wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.8rem; | |
| } | |
| .footer-text { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| line-height: 1.6; | |
| } | |
| .footer-copyright { | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| .footer-divider { | |
| color: var(--text-muted); | |
| margin: 0 0.3rem; | |
| } | |
| .footer-built { | |
| color: var(--text-secondary); | |
| } | |
| .footer-author { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| } | |
| .footer-by-text { | |
| color: var(--text-muted); | |
| } | |
| .footer-author-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 700; | |
| transition: all var(--transition-fast); | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 6px; | |
| } | |
| .footer-author-link:hover { | |
| color: var(--cyan); | |
| background: rgba(192,132,252,0.1); | |
| transform: translateY(-2px); | |
| } | |
| .footer-author-link i { | |
| font-size: 0.85rem; | |
| } | |
| .footer-social { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .footer-social-link { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-darker); | |
| border: 1px solid var(--border); | |
| border-radius: 50%; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| transition: all var(--transition); | |
| } | |
| .footer-social-link { | |
| transition: all var(--transition-fast); | |
| } | |
| .footer-social-link:hover { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: opacity 0.6s ease, transform 0.6s ease; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| [dir="rtl"] .timeline { | |
| padding-inline-start: 2rem; | |
| padding-inline-end: 0; | |
| } | |
| [dir="rtl"] .timeline::before { | |
| left: auto; | |
| right: 0; | |
| } | |
| [dir="rtl"] .timeline-marker { | |
| left: auto; | |
| right: -2.5rem; | |
| } | |
| [dir="rtl"] .timeline-content:hover { | |
| transform: translateX(-10px); | |
| } | |
| [dir="rtl"] .contact-item:hover { | |
| transform: translateX(-10px); | |
| } | |
| @media (max-width: 1024px) { | |
| .hero-container { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| gap: 2rem; | |
| } | |
| .hero-image-wrapper { | |
| order: -1; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .contact-content { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .skills-grid { | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-container { | |
| padding: 0.8rem 1rem; | |
| } | |
| .nav-brand { | |
| flex: 1; | |
| } | |
| .nav-controls { | |
| gap: 0.5rem; | |
| } | |
| .nav-menu { | |
| position: fixed; | |
| top: 60px; | |
| left: -100%; | |
| width: 100%; | |
| background: var(--bg-card); | |
| flex-direction: column; | |
| padding: 2rem 1rem; | |
| border-top: 1px solid var(--border); | |
| transition: left var(--transition); | |
| z-index: 999; | |
| max-height: calc(100vh - 60px); | |
| overflow-y: auto; | |
| } | |
| .nav-menu.active { | |
| left: 0; | |
| } | |
| .nav-link { | |
| width: 100%; | |
| justify-content: flex-start; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| margin-bottom: 0.5rem; | |
| } | |
| .menu-toggle { | |
| display: flex; | |
| } | |
| .main-content { | |
| margin-top: 60px; | |
| } | |
| .hero-section { | |
| min-height: auto; | |
| padding: 2rem 0; | |
| } | |
| .hero-container { | |
| padding: 0 1rem; | |
| gap: 2rem; | |
| } | |
| .hero-name { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .hero-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .hero-description { | |
| font-size: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .hero-buttons { | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .btn { | |
| width: 100%; | |
| justify-content: center; | |
| padding: 0.9rem 1.5rem; | |
| } | |
| .hero-social { | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .social-icon { | |
| width: 45px; | |
| height: 45px; | |
| } | |
| .section { | |
| padding: 2rem 0; | |
| } | |
| .section-container { | |
| padding: 0 1rem; | |
| } | |
| .section-header { | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .section-number { | |
| font-size: 1.2rem; | |
| } | |
| .section-title { | |
| font-size: 1.8rem; | |
| flex-wrap: wrap; | |
| } | |
| .section-line { | |
| width: 100%; | |
| margin-inline-start: 0; | |
| margin-top: 0.5rem; | |
| } | |
| .about-stats { | |
| grid-template-columns: 1fr; | |
| gap: 1rem; | |
| } | |
| .stat-item { | |
| padding: 1.5rem; | |
| } | |
| .stat-number { | |
| font-size: 2rem; | |
| } | |
| .code-block { | |
| padding: 1.5rem; | |
| font-size: 0.8rem; | |
| } | |
| .skills-grid { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .skill-category { | |
| padding: 2rem; | |
| } | |
| .category-title { | |
| font-size: 1.3rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .timeline { | |
| padding-inline-start: 1.5rem; | |
| } | |
| .timeline-item { | |
| padding-inline-start: 2rem; | |
| padding-bottom: 3rem; | |
| } | |
| .timeline-marker { | |
| left: -1.75rem; | |
| width: 14px; | |
| height: 14px; | |
| } | |
| .timeline-content { | |
| padding: 1.5rem; | |
| } | |
| .timeline-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 0.5rem; | |
| } | |
| .timeline-title { | |
| font-size: 1.3rem; | |
| } | |
| .timeline-achievements { | |
| padding: 1rem; | |
| gap: 0.6rem; | |
| } | |
| .achievement-item { | |
| font-size: 0.9rem; | |
| } | |
| .projects-grid { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .project-content { | |
| padding: 2rem; | |
| } | |
| .project-title { | |
| font-size: 1.3rem; | |
| } | |
| .contact-content { | |
| gap: 2rem; | |
| } | |
| .contact-item { | |
| padding: 1.5rem; | |
| flex-direction: column; | |
| text-align: center; | |
| gap: 1rem; | |
| } | |
| .contact-icon { | |
| width: 50px; | |
| height: 50px; | |
| font-size: 1.2rem; | |
| margin: 0 auto; | |
| } | |
| .contact-form { | |
| gap: 1.5rem; | |
| } | |
| .form-input { | |
| padding: 0.9rem; | |
| font-size: 0.95rem; | |
| } | |
| .footer-container { | |
| padding: 0 1rem; | |
| } | |
| .footer-content { | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| text-align: center; | |
| } | |
| .footer-text-wrapper { | |
| text-align: center; | |
| } | |
| .footer-text { | |
| justify-content: center; | |
| font-size: 0.85rem; | |
| } | |
| .footer-author { | |
| justify-content: center; | |
| font-size: 0.85rem; | |
| } | |
| .footer-social { | |
| justify-content: center; | |
| gap: 1rem; | |
| } | |
| .hero-image-container { | |
| width: 280px; | |
| height: 280px; | |
| } | |
| .floating-badge { | |
| display: none; | |
| } | |
| .scroll-indicator { | |
| bottom: 1rem; | |
| } | |
| .badge-content { | |
| display: none; | |
| } | |
| .floating-badge { | |
| min-width: auto; | |
| padding: 0.8rem 1rem; | |
| } | |
| .floating-badge i { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| html { | |
| font-size: 14px; | |
| } | |
| .nav-container { | |
| padding: 0.7rem 0.8rem; | |
| } | |
| .brand-logo { | |
| font-size: 1.2rem; | |
| } | |
| .nav-controls { | |
| gap: 0.5rem; | |
| } | |
| .lang-toggle, | |
| .theme-toggle { | |
| padding: 0.5rem 0.8rem; | |
| font-size: 0.8rem; | |
| } | |
| .hero-container { | |
| padding: 0 0.8rem; | |
| } | |
| .hero-name { | |
| font-size: 1.8rem; | |
| line-height: 1.2; | |
| } | |
| .name-prefix, | |
| .name-operator, | |
| .name-suffix { | |
| font-size: 0.9em; | |
| } | |
| .hero-title { | |
| font-size: 1rem; | |
| } | |
| .hero-description { | |
| font-size: 0.95rem; | |
| } | |
| .section-container { | |
| padding: 0 0.8rem; | |
| } | |
| .section-title { | |
| font-size: 1.5rem; | |
| } | |
| .section-number { | |
| font-size: 1rem; | |
| } | |
| .hero-image-container { | |
| width: 220px; | |
| height: 220px; | |
| } | |
| .profile-image-glow { | |
| width: 110%; | |
| height: 110%; | |
| } | |
| .about-stats { | |
| gap: 0.8rem; | |
| } | |
| .stat-item { | |
| padding: 1.2rem; | |
| } | |
| .stat-number { | |
| font-size: 1.8rem; | |
| } | |
| .stat-label { | |
| font-size: 0.85rem; | |
| } | |
| .code-block { | |
| padding: 1rem; | |
| font-size: 0.75rem; | |
| } | |
| .skill-category { | |
| padding: 1.5rem; | |
| } | |
| .category-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .skill-items { | |
| gap: 1.5rem; | |
| } | |
| .skill-name, | |
| .skill-percent { | |
| font-size: 0.9rem; | |
| } | |
| .timeline { | |
| padding-inline-start: 1rem; | |
| } | |
| .timeline-item { | |
| padding-inline-start: 1.5rem; | |
| padding-bottom: 2.5rem; | |
| } | |
| .timeline-marker { | |
| left: -1.25rem; | |
| width: 12px; | |
| height: 12px; | |
| } | |
| .timeline-content { | |
| padding: 1.2rem; | |
| } | |
| .timeline-title { | |
| font-size: 1.2rem; | |
| } | |
| .timeline-company { | |
| font-size: 0.95rem; | |
| } | |
| .timeline-description { | |
| font-size: 0.9rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .timeline-achievements { | |
| padding: 0.8rem; | |
| gap: 0.5rem; | |
| } | |
| .achievement-item { | |
| font-size: 0.85rem; | |
| } | |
| .tag { | |
| font-size: 0.75rem; | |
| padding: 0.25rem 0.6rem; | |
| } | |
| .project-content { | |
| padding: 1.5rem; | |
| } | |
| .project-title { | |
| font-size: 1.2rem; | |
| } | |
| .project-description { | |
| font-size: 0.9rem; | |
| } | |
| .contact-item { | |
| padding: 1.2rem; | |
| } | |
| .contact-icon { | |
| width: 45px; | |
| height: 45px; | |
| font-size: 1.1rem; | |
| } | |
| .contact-label { | |
| font-size: 0.85rem; | |
| } | |
| .contact-value { | |
| font-size: 0.95rem; | |
| } | |
| .form-input { | |
| padding: 0.8rem; | |
| font-size: 0.9rem; | |
| } | |
| .btn { | |
| padding: 0.8rem 1.2rem; | |
| font-size: 0.9rem; | |
| } | |
| .footer-text { | |
| font-size: 0.8rem; | |
| flex-direction: column; | |
| gap: 0.3rem; | |
| } | |
| .footer-divider { | |
| display: none; | |
| } | |
| .footer-author { | |
| font-size: 0.75rem; | |
| flex-direction: column; | |
| gap: 0.3rem; | |
| } | |
| .footer-author-link { | |
| padding: 0.3rem 0.8rem; | |
| } | |
| .footer-social-link { | |
| width: 35px; | |
| height: 35px; | |
| font-size: 0.9rem; | |
| } | |
| .loader-code-text { | |
| font-size: 1rem; | |
| } | |
| .loader-spinner { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .loader-progress-wrapper { | |
| width: 180px; | |
| } | |
| } | |
| @media (max-width: 360px) { | |
| html { | |
| font-size: 13px; | |
| } | |
| .hero-name { | |
| font-size: 1.5rem; | |
| } | |
| .section-title { | |
| font-size: 1.3rem; | |
| } | |
| .hero-image-container { | |
| width: 180px; | |
| height: 180px; | |
| } | |
| .stat-number { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| .contact-hero{ | |
| text-align:center; | |
| margin-bottom:70px; | |
| } | |
| .contact-subtitle{ | |
| color:var(--text-secondary); | |
| font-family:monospace; | |
| font-size:1rem; | |
| margin-bottom:20px; | |
| } | |
| .contact-heading{ | |
| font-size:clamp(2.8rem,5vw,4.5rem); | |
| font-weight:800; | |
| margin-bottom:25px; | |
| } | |
| .contact-heading span{ | |
| background:linear-gradient(90deg,#35d6c7,#8d7dff); | |
| -webkit-background-clip:text; | |
| -webkit-text-fill-color:transparent; | |
| } | |
| .contact-description{ | |
| max-width:700px; | |
| margin:auto; | |
| color:var(--text-secondary); | |
| font-size:1.15rem; | |
| line-height:1.8; | |
| } | |
| .contact-cards{ | |
| display:flex; | |
| justify-content:center; | |
| flex-wrap:wrap; | |
| gap:25px; | |
| } | |
| .contact-card{ | |
| display:flex; | |
| align-items:center; | |
| gap:16px; | |
| padding:22px 32px; | |
| border:1px solid rgba(255,255,255,.08); | |
| border-radius:18px; | |
| text-decoration:none; | |
| color:white; | |
| transition:.3s ease; | |
| background:rgba(255,255,255,.03); | |
| font-size:1.15rem; | |
| font-weight:600; | |
| } | |
| .contact-card i{ | |
| font-size:1.5rem; | |
| } | |
| .contact-card:hover{ | |
| transform:translateY(-6px); | |
| border-color:#45d6c7; | |
| box-shadow:0 15px 35px rgba(0,0,0,.35); | |
| } | |
| .contact-card.featured{ | |
| background:linear-gradient(90deg,#34d5c5,#8b7dff); | |
| color:#111; | |
| } | |
| .contact-card.featured:hover{ | |
| transform:translateY(-8px) scale(1.02); | |
| } | |