176 lines
3.2 KiB
CSS
176 lines
3.2 KiB
CSS
/* Hero Section */
|
|
.hero {
|
|
position: relative;
|
|
min-height: 80vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: var(--space-2xl) 0;
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--bg-primary) 0%,
|
|
rgba(21, 52, 209, 0.1) 100%
|
|
);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Stars Background */
|
|
.stars {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: var(--z-negative);
|
|
}
|
|
|
|
.star {
|
|
position: absolute;
|
|
background: white;
|
|
border-radius: 50%;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.shooting-star {
|
|
position: absolute;
|
|
top: 20%;
|
|
left: -100px;
|
|
width: 100px;
|
|
height: 2px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(255, 255, 255, 0.8),
|
|
transparent
|
|
);
|
|
transform: rotate(-45deg);
|
|
z-index: var(--z-negative);
|
|
}
|
|
|
|
/* Hero Content */
|
|
.hero .container {
|
|
position: relative;
|
|
z-index: var(--z-elevate);
|
|
max-width: 800px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2rem, 5vw, var(--font-size-4xl));
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-lg);
|
|
line-height: 1.2;
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--text-color) 0%,
|
|
var(--accent-color) 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: clamp(1.125rem, 2.5vw, var(--font-size-xl));
|
|
color: var(--text-color);
|
|
opacity: 0.9;
|
|
margin-bottom: var(--space-xl);
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* CTA Container */
|
|
.cta-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
/* Animated Elements */
|
|
.hero .animate-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
.hero .animate-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Gradient Overlay */
|
|
.hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 150px;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent,
|
|
var(--bg-primary)
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.hero {
|
|
min-height: 70vh;
|
|
padding: var(--space-xl) 0;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
.hero p {
|
|
font-size: var(--font-size-lg);
|
|
padding: 0 var(--space-md);
|
|
}
|
|
|
|
.cta-container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0 var(--space-md);
|
|
}
|
|
}
|
|
|
|
/* Dark Theme Specific */
|
|
.dark-theme .hero {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--dark-main) 0%,
|
|
rgba(21, 52, 209, 0.15) 100%
|
|
);
|
|
}
|
|
|
|
/* Light Theme Specific */
|
|
.light-theme .hero {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--light-main) 0%,
|
|
rgba(21, 52, 209, 0.1) 100%
|
|
);
|
|
}
|
|
|
|
/* High Contrast Mode */
|
|
@media (forced-colors: active) {
|
|
.hero h1 {
|
|
background: none;
|
|
color: CanvasText;
|
|
}
|
|
}
|
|
|
|
/* Reduced Motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero .animate-in {
|
|
transition: none;
|
|
}
|
|
|
|
.shooting-star {
|
|
display: none;
|
|
}
|
|
}
|