diff --git a/css/style.css b/css/style.css index 7594174..079258b 100755 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,6 @@ /* ═══════════════════════════════════════════════ - Noveria Landing – Galaxy Theme + Aya Design - Dark Premium Style: Monochrome + Violett-Akzent + Noveria Operation Landing – Galaxy + Aya Design + Dark Premium: Monochrome + Violett-Akzent ═══════════════════════════════════════════════ */ :root { @@ -37,7 +37,7 @@ html, body { var(--bg); } -/* Aya: Holographic premium gradient layer */ +/* Holographic premium gradient */ .holographic { position: absolute; inset: 0; @@ -95,7 +95,35 @@ html, body { 100% { opacity: 1; } } -/* ═══ Aya: Floating Ambient Orbs ═══ */ +/* ═══ Shooting Stars ═══ */ +.shooting-star { + position: absolute; + top: -10%; + left: 60%; + width: 2px; + height: 100px; + background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(139,92,246,.4)); + transform: rotate(-30deg); + animation: shoot 4s ease-in infinite; + opacity: 0; + border-radius: 1px; + filter: blur(.5px); +} +.shooting-star:nth-child(5) { + top: -5%; + left: 25%; + animation-delay: 2.5s; + animation-duration: 5s; + height: 70px; +} +@keyframes shoot { + 0% { opacity: 0; transform: rotate(-30deg) translate(0, 0); } + 2% { opacity: .9; } + 8% { opacity: 0; transform: rotate(-30deg) translate(-300px, 600px); } + 100% { opacity: 0; transform: rotate(-30deg) translate(-300px, 600px); } +} + +/* ═══ Floating Ambient Orbs ═══ */ .orb { position: fixed; border-radius: 50%; @@ -142,7 +170,7 @@ html, body { to { opacity: 1; transform: translateY(0); } } -/* Aya: Branding-Element (Monogram) */ +/* Monogram */ .avatar { width: 72px; height: 72px; border-radius: 50%; @@ -164,7 +192,7 @@ html, body { 50% { box-shadow: 0 0 56px rgba(139, 92, 246, .20); } } -/* Aya: EXTREM GROSS für Headline */ +/* Headline — EXTREM GROSS */ .hero-title { font-size: clamp(2.8rem, 9vw, 5.5rem); font-weight: 700; @@ -178,7 +206,7 @@ html, body { line-height: 1.1; } -/* Aya: WINZIG für Subtext (3-4x kleiner als Title) */ +/* Subtext — WINZIG */ .hero-subtitle { font-size: clamp(.85rem, 2vw, 1.1rem); color: var(--tx-2); @@ -187,7 +215,7 @@ html, body { margin-bottom: 2rem; } -/* Aya: Status-Badge mit starkem Glow */ +/* Status-Badge */ .status-badge { display: inline-block; padding: .55rem 1.6rem; @@ -211,67 +239,6 @@ html, body { 50% { box-shadow: 0 0 48px rgba(139, 92, 246, .22); } } -/* ═══ Aya: CTA-Gruppe (Primär + Sekundär) ═══ */ -.cta-group { - display: flex; - align-items: center; - justify-content: center; - gap: .75rem; - flex-wrap: wrap; -} - -.cta { - display: inline-flex; - align-items: center; - gap: .5rem; - padding: .65rem 1.4rem; - border-radius: .65rem; - font-size: .9rem; - font-weight: 500; - text-decoration: none; - letter-spacing: .02em; - transition: all .25s ease; - cursor: pointer; - white-space: nowrap; -} - -/* Primärer CTA: Ausgefüllt in Akzentfarbe */ -.cta-primary { - background: var(--accent); - color: #fff; - box-shadow: 0 0 28px rgba(139, 92, 246, .25); -} -.cta-primary:hover { - background: #9b6dff; - box-shadow: 0 0 40px rgba(139, 92, 246, .40); - transform: translateY(-1px); -} -.cta-primary svg { - transition: transform .25s ease; -} -.cta-primary:hover svg { - transform: translateX(2px); -} - -/* Sekundärer CTA: Ghost */ -.cta-ghost { - background: transparent; - color: var(--tx-2); - border: 1px solid rgba(255,255,255,.08); -} -.cta-ghost:hover { - color: var(--tx); - background: rgba(255,255,255,.04); - border-color: rgba(139, 92, 246, .20); - transform: translateY(-1px); -} -.cta-ghost svg { - transition: transform .25s ease; -} -.cta-ghost:hover svg { - transform: translate(1px, -1px); -} - /* ═══ Footer ═══ */ .footer { position: fixed; @@ -291,8 +258,7 @@ html, body { .hero { padding: 1rem; } .hero-title { font-size: clamp(2rem, 14vw, 3.5rem); } .hero-subtitle { font-size: .8rem; } - .cta-group { flex-direction: column; gap: .5rem; } - .cta { width: 100%; justify-content: center; } .avatar { width: 56px; height: 56px; font-size: 1.35rem; } .orb { display: none; } -} + .shooting-star { display: none; } +} \ No newline at end of file