119 lines
2.7 KiB
CSS
119 lines
2.7 KiB
CSS
/*
|
|
* Hero Styles
|
|
*/
|
|
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
position: relative;
|
|
padding: 8rem 2rem 6rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 90% 65% at 50% -5%, var(--hero-glow-1) 0%, transparent 55%),
|
|
radial-gradient(ellipse 50% 40% at 85% 85%, var(--hero-glow-2) 0%, transparent 55%),
|
|
radial-gradient(ellipse 40% 35% at 10% 80%, var(--hero-glow-2) 0%, transparent 55%),
|
|
var(--bg);
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: radial-gradient(circle, var(--accent-glow-sm) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
opacity: 0;
|
|
animation: gridFadeIn 2s ease 0.4s forwards, gridDrift 40s ease-in-out 2.4s infinite;
|
|
pointer-events: none;
|
|
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
|
|
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 820px;
|
|
animation: heroEntrance 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
}
|
|
|
|
.hero-tag {
|
|
display: inline-block;
|
|
padding: 0.4rem 1.1rem;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 100px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 2rem;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 5.5rem;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
letter-spacing: -3px;
|
|
color: var(--text);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.hero h1 span {
|
|
color: var(--accent);
|
|
filter: drop-shadow(0 0 28px var(--accent-glow));
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.2rem;
|
|
color: var(--text-muted);
|
|
max-width: 520px;
|
|
margin: 0 auto 2.75rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Hero animation keyframes */
|
|
@keyframes gridFadeIn {
|
|
to { opacity: 0.35; }
|
|
}
|
|
|
|
@keyframes gridDrift {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
33% { transform: translate(6px, -8px); }
|
|
66% { transform: translate(-6px, 4px); }
|
|
}
|
|
|
|
@keyframes heroEntrance {
|
|
from { opacity: 0; transform: translateY(24px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Reduced motion - hero */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-grid {
|
|
animation: none;
|
|
opacity: 0.2;
|
|
}
|
|
.hero-content {
|
|
animation: none;
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|