gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-26 12:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove film birds; fix language pill highlight

Browse Source 
Strip every bird from the demo mockups: both hero video tabs and both
step-3 player scenes lose the background flock (.film-birds) and the
foreground flapping bird (.film-hero-bird), plus all related CSS in
styles/demo.css and the dead style.legacy.css.

Language selector: the <select> was 30px narrower than its pill, so in
appearance:base-select the click/focus highlight covered only the inner
~110px ("half the box"). Move the padding from the container onto the
control so it fills the pill edge-to-edge; mirror the fix in the mobile
legal.css override.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-12 03:57:18 +02:00
parent 17c9da292c
commit 16cb138eeb
5 changed files with 14 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.legacy.css
+1 -40
View File
@@ -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); }
website/styles/demo.css
+1 -77
View File
@@ -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); }
website/styles/landing-controls.css
+8 -2
View File
@@ -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 <select> carries it, so the button (and its
focus/hover highlight in appearance:base-select) fills the whole pill
instead of only the inner ~110px. */
padding: 0;
overflow: hidden;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text-muted);
}
@@ -69,11 +73,13 @@ html:not(.lang-de) [lang="de"] {
font-weight: 600;
color: currentColor;
cursor: pointer;
padding: 0 28px 0 0;
/* Padding moved here from the container so the control fills the pill. */
padding: 6px 32px 6px 14px;
margin: 0;
width: auto;
min-width: 110px;
overflow: hidden;
border-radius: inherit;
}
@supports (appearance: base-select) {
website/styles/legal.css
+4 -2
View File
@@ -120,7 +120,7 @@
margin: 0;
}
.lang-select-container {
padding: 4px 10px;
padding: 0;
gap: 4px;
}
.lang-select-container .globe-icon {
@@ -129,7 +129,9 @@
}
.lang-dropdown {
font-size: 0.7rem;
padding: 0 6px 0 0;
/* Padding on the control (not the container) so the highlight fills
the whole pill — matches the desktop rule in landing-controls.css. */
padding: 4px 24px 4px 10px;
}
.lang-select-container .chevron-icon {
width: 10px;
website/template.html
-42
View File
@@ -451,11 +451,6 @@
<circle cx="123" cy="22.4" r="0.8"/>
</g>
</g>
<g class="film-birds" stroke="#dbd7cd" stroke-width="0.55" fill="none" stroke-linecap="round">
<path d="M-4,32 q1.5,-1.5 3,0 q1.5,-1.5 3,0"/>
<path d="M-11,28 q1.2,-1.2 2.4,0 q1.2,-1.2 2.4,0"/>
<path d="M-8,36 q1,-1 2,0 q1,-1 2,0"/>
</g>
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
<g class="film-mist-scroll" fill="#dbd7cd">
<ellipse cx="40" cy="63" rx="46" ry="4" opacity="0.055"/>
@@ -481,15 +476,6 @@
<polygon points="275,84 288,42 301,84" fill="#040903"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
</g>
<g class="film-hero-bird-drift">
<g class="film-hero-bird" aria-hidden="true">
<path class="film-bird-wing film-bird-wing-left" d="M74.5,34.5 C70.5,29 66,27.8 61.5,30 C66.2,30.1 70.2,32.5 75,36"/>
<path class="film-bird-wing film-bird-wing-right" d="M76.5,34.5 C80.8,29.2 85.2,28.5 89.5,31 C84.9,30.9 81.2,33 76,36"/>
<path class="film-bird-body" d="M71.5,34.2 C72.8,31.8 75.1,30.8 77.5,31.4 C79.5,31.9 80.8,33.5 81.1,35.4 C78.2,37 74.3,36.9 71.5,34.2 Z"/>
<circle class="film-bird-eye" cx="78.8" cy="33" r="0.55"/>
<path class="film-bird-beak" d="M80.2,33.2 L83,34 L80.3,34.7 Z"/>
</g>
</g>
</svg>
<div class="demo-play-overlay" aria-hidden="true">
<span class="demo-icon-wrap">
@@ -553,11 +539,6 @@
<circle cx="123" cy="22.4" r="0.8"/>
</g>
</g>
<g class="film-birds" stroke="#dbd7cd" stroke-width="0.55" fill="none" stroke-linecap="round">
<path d="M-4,32 q1.5,-1.5 3,0 q1.5,-1.5 3,0"/>
<path d="M-11,28 q1.2,-1.2 2.4,0 q1.2,-1.2 2.4,0"/>
<path d="M-8,36 q1,-1 2,0 q1,-1 2,0"/>
</g>
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
<g class="film-mist-scroll" fill="#dbd7cd">
<ellipse cx="40" cy="63" rx="46" ry="4" opacity="0.055"/>
@@ -583,15 +564,6 @@
<polygon points="275,84 288,42 301,84" fill="#040903"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
</g>
<g class="film-hero-bird-drift">
<g class="film-hero-bird" aria-hidden="true">
<path class="film-bird-wing film-bird-wing-left" d="M74.5,34.5 C70.5,29 66,27.8 61.5,30 C66.2,30.1 70.2,32.5 75,36"/>
<path class="film-bird-wing film-bird-wing-right" d="M76.5,34.5 C80.8,29.2 85.2,28.5 89.5,31 C84.9,30.9 81.2,33 76,36"/>
<path class="film-bird-body" d="M71.5,34.2 C72.8,31.8 75.1,30.8 77.5,31.4 C79.5,31.9 80.8,33.5 81.1,35.4 C78.2,37 74.3,36.9 71.5,34.2 Z"/>
<circle class="film-bird-eye" cx="78.8" cy="33" r="0.55"/>
<path class="film-bird-beak" d="M80.2,33.2 L83,34 L80.3,34.7 Z"/>
</g>
</g>
</svg>
<div class="demo-play-overlay" aria-hidden="true">
<span class="demo-icon-wrap">
@@ -1286,13 +1258,6 @@
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
</g>
<g class="film-hero-bird" aria-hidden="true">
<path class="film-bird-wing film-bird-wing-left" d="M74.5,34.5 C70.5,29 66,27.8 61.5,30 C66.2,30.1 70.2,32.5 75,36"/>
<path class="film-bird-wing film-bird-wing-right" d="M76.5,34.5 C80.8,29.2 85.2,28.5 89.5,31 C84.9,30.9 81.2,33 76,36"/>
<path class="film-bird-body" d="M71.5,34.2 C72.8,31.8 75.1,30.8 77.5,31.4 C79.5,31.9 80.8,33.5 81.1,35.4 C78.2,37 74.3,36.9 71.5,34.2 Z"/>
<circle class="film-bird-eye" cx="78.8" cy="33" r="0.55"/>
<path class="film-bird-beak" d="M80.2,33.2 L83,34 L80.3,34.7 Z"/>
</g>
</svg>
</div>
<div class="player-controls">
@@ -1345,13 +1310,6 @@
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
</g>
<g class="film-hero-bird" aria-hidden="true">
<path class="film-bird-wing film-bird-wing-left" d="M74.5,34.5 C70.5,29 66,27.8 61.5,30 C66.2,30.1 70.2,32.5 75,36"/>
<path class="film-bird-wing film-bird-wing-right" d="M76.5,34.5 C80.8,29.2 85.2,28.5 89.5,31 C84.9,30.9 81.2,33 76,36"/>
<path class="film-bird-body" d="M71.5,34.2 C72.8,31.8 75.1,30.8 77.5,31.4 C79.5,31.9 80.8,33.5 81.1,35.4 C78.2,37 74.3,36.9 71.5,34.2 Z"/>
<circle class="film-bird-eye" cx="78.8" cy="33" r="0.55"/>
<path class="film-bird-beak" d="M80.2,33.2 L83,34 L80.3,34.7 Z"/>
</g>
</svg>
</div>
<div class="player-controls">