Spaces:
Sleeping
Sleeping
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| position: relative; | |
| overflow: hidden; | |
| padding-top: 72px; | |
| } | |
| .particle-canvas { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| } | |
| .hero-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| align-items: center; | |
| gap: 60px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .hero-content { | |
| max-width: 100%; | |
| } | |
| .hero-name { | |
| font-size: clamp(2.5rem, 6vw, 4.5rem); | |
| font-weight: 900; | |
| line-height: 1.1; | |
| margin-bottom: 16px; | |
| color: var(--text-heading); | |
| } | |
| .hero-title { | |
| font-size: clamp(1.2rem, 3vw, 2rem); | |
| font-weight: 600; | |
| margin-bottom: 24px; | |
| color: var(--text-primary); | |
| } | |
| .hero-description { | |
| font-size: 1.15rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 40px; | |
| max-width: 540px; | |
| line-height: 1.8; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .scroll-indicator { | |
| position: absolute; | |
| bottom: 40px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| animation: bounce 2s infinite; | |
| cursor: pointer; | |
| z-index: 2; | |
| } | |
| .scroll-indicator svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| @media (max-width: 768px) { | |
| .hero-buttons { | |
| flex-direction: row; | |
| justify-content: center; | |
| gap: 12px; | |
| } | |
| .btn { | |
| padding: 10px 18px; | |
| font-size: 0.85rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero-name { | |
| font-size: 2.2rem; | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(-10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Hero Image Circle */ | |
| .hero-image-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .hero-image-circle { | |
| position: relative; | |
| width: 350px; | |
| height: 350px; | |
| border-radius: 50%; | |
| padding: 10px; | |
| background: var(--accent-gradient); | |
| box-shadow: 0 0 30px rgba(139, 92, 246, 0.3); | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .hero-image-circle img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| border-radius: 50%; | |
| border: 4px solid var(--bg-primary); | |
| } | |
| .circle-glow { | |
| position: absolute; | |
| inset: -20px; | |
| background: var(--accent-gradient); | |
| filter: blur(40px); | |
| opacity: 0.15; | |
| z-index: -1; | |
| border-radius: 50%; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @media (max-width: 992px) { | |
| .hero-grid { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| gap: 40px; | |
| } | |
| .hero-content { | |
| order: 2; | |
| } | |
| .hero-image-container { | |
| order: 1; | |
| } | |
| .hero-image-circle { | |
| width: 280px; | |
| height: 280px; | |
| } | |
| .hero-buttons { | |
| justify-content: center; | |
| } | |
| } |