best shot

website-7sys/css/hero.css

@@ -1,37 +1,175 @@
 /* Hero Section */
 .hero {
     position: relative;
-    height: 100vh;
+    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;
-    padding-top: 60px;
 }
 
+/* Stars Background */
 .stars {
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    background: radial-gradient(circle at center, var(--accent-color) 0.1px, transparent 1px);
-    background-size: 50px 50px;
-    animation: stars 20s linear infinite;
-    opacity: 0.3;
+    pointer-events: none;
+    z-index: var(--z-negative);
 }
 
-@keyframes stars {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(-50px); }
+.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, 3rem);
-    margin-bottom: 1rem;
-    animation: fadeIn 1s ease-out;
+    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.2rem, 3vw, 1.5rem);
-    margin-bottom: 2rem;
+    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;
+    }
 }