diff --git a/website/style.legacy.css b/website/style.legacy.css index ad55856..0e8633d 100644 --- a/website/style.legacy.css +++ b/website/style.legacy.css @@ -5623,10 +5623,6 @@ html.theme-light .hero-demo-scene .demo-video::after { .hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; } .hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; } -/* By day the birds read as silhouettes, not chalk marks */ -html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); } -html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { stroke: oklch(0.32 0.06 145 / 0.75); } - /* Stars: staggered twinkle so the sky feels alive */ .film-star { transform-box: fill-box; @@ -5690,24 +5686,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s .film-fore-scroll { transform: translateX(var(--scroll-fore, 0px)); } -/* A single gliding bird carries the scene: the outer group rides the - JS-driven drift vars, the inner group flaps its wings via scaleY. */ -.film-hero-bird-drift { - transform: translate(var(--lantern-x, 0px), var(--bounce-y, 0px)); -} - -.film-hero-bird { - transform-box: fill-box; - transform-origin: center; - animation: filmWingFlap 0.85s ease-in-out infinite alternate; - animation-play-state: paused; -} - -@keyframes filmWingFlap { - from { transform: scaleY(1); } - to { transform: scaleY(0.5); } -} - /* Twinkle & Glow play state bindings */ .film-star { transform-box: fill-box; @@ -5715,7 +5693,7 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s animation: filmTwinkle 2.8s ease-in-out infinite; animation-play-state: paused; } -.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds, .film-hero-bird) { +.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star) { animation-play-state: running; } @@ -5749,19 +5727,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s 95%, 100% { opacity: 0; transform: translate(-46px, 20px); } } -/* A distant flock crosses the valley, fading out mid-flight */ -.film-birds { - animation: filmBirds 16s linear infinite; - animation-play-state: paused; -} - -@keyframes filmBirds { - 0% { transform: translate(0, 0); opacity: 0; } - 4% { opacity: 0.75; } - 42% { opacity: 0.75; } - 48%, 100% { transform: translate(185px, -12px); opacity: 0; } -} - /* Valley mist rides the slow background parallax between tree layers */ .film-mist-scroll { transform: translateX(var(--scroll-back, 0px)); @@ -6119,10 +6084,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s .step-illustration-3 .film-fore-scroll { animation: scrollFore 3s linear infinite !important; } -.step-illustration-3 .film-hero-bird { - animation: filmWingFlap 0.85s ease-in-out infinite !important; - animation-direction: alternate !important; -} @keyframes scrollBack { 0% { transform: translateX(0); } diff --git a/website/styles/demo.css b/website/styles/demo.css index 8081c5c..2b652ef 100644 --- a/website/styles/demo.css +++ b/website/styles/demo.css @@ -699,10 +699,6 @@ html.theme-light .hero-demo-scene .demo-video::after { .hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; } .hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; } -/* By day the birds read as silhouettes, not chalk marks */ -html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); } -html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { color: oklch(0.32 0.06 145 / 0.86); } - /* Stars: staggered twinkle so the sky feels alive */ .film-star { transform-box: fill-box; @@ -766,54 +762,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { c .film-fore-scroll { transform: translateX(var(--scroll-fore, 0px)); } -/* The foreground bird stays alive even while the fake video is paused. */ -.film-hero-bird-drift { - animation: filmBirdGlide 6.5s ease-in-out infinite alternate; -} - -.film-hero-bird { - color: #dbd7cd; - filter: drop-shadow(0 1px 1px oklch(0.08 0.02 145 / 0.55)); -} - -.film-bird-wing { - fill: none; - stroke: currentColor; - stroke-width: 1.15; - stroke-linecap: round; - stroke-linejoin: round; - transform-box: fill-box; - animation: filmWingFlap 0.72s ease-in-out infinite alternate; -} - -.film-bird-wing-left { - transform-origin: right bottom; -} - -.film-bird-wing-right { - transform-origin: left bottom; - animation-direction: alternate-reverse; -} - -.film-bird-body, -.film-bird-beak { - fill: currentColor; -} - -.film-bird-eye { - fill: oklch(0.12 0.025 145); -} - -@keyframes filmBirdGlide { - from { transform: translate(calc(var(--lantern-x, 0px) - 3px), calc(var(--bounce-y, 0px) + 1px)) rotate(-1.5deg); } - to { transform: translate(calc(var(--lantern-x, 0px) + 4px), calc(var(--bounce-y, 0px) - 2px)) rotate(1.5deg); } -} - -@keyframes filmWingFlap { - from { transform: rotate(8deg) translateY(0); } - to { transform: rotate(-13deg) translateY(1.2px); } -} - /* Twinkle & Glow play state bindings */ .film-star { transform-box: fill-box; @@ -821,17 +769,10 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { c animation: filmTwinkle 2.8s ease-in-out infinite; animation-play-state: paused; } -.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds) { +.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star) { animation-play-state: running; } -@media (prefers-reduced-motion: reduce) { - .film-hero-bird-drift, - .film-bird-wing { - animation: none !important; - } -} - /* Drifting clouds: gentle back-and-forth so there is no wrap pop */ .film-cloud { transform-box: fill-box; @@ -862,19 +803,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { c 95%, 100% { opacity: 0; transform: translate(-46px, 20px); } } -/* A distant flock crosses the valley, fading out mid-flight */ -.film-birds { - animation: filmBirds 16s linear infinite; - animation-play-state: paused; -} - -@keyframes filmBirds { - 0% { transform: translate(0, 0); opacity: 0; } - 4% { opacity: 0.75; } - 42% { opacity: 0.75; } - 48%, 100% { transform: translate(185px, -12px); opacity: 0; } -} - /* Valley mist rides the slow background parallax between tree layers */ .film-mist-scroll { transform: translateX(var(--scroll-back, 0px)); @@ -1232,10 +1160,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { c .step-illustration-3 .film-fore-scroll { animation: scrollFore 3s linear infinite !important; } -.step-illustration-3 .film-hero-bird { - animation: filmWingFlap 0.85s ease-in-out infinite !important; - animation-direction: alternate !important; -} @keyframes scrollBack { 0% { transform: translateX(0); } diff --git a/website/styles/landing-controls.css b/website/styles/landing-controls.css index 253104f..13f5ef7 100644 --- a/website/styles/landing-controls.css +++ b/website/styles/landing-controls.css @@ -17,7 +17,11 @@ html:not(.lang-de) [lang="de"] { -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9999px; - padding: 6px 14px; + /* No own padding: the