mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
Timo
af0da75d38
Feedback round (calmer, less "template/AI"): - Dial back animated background motion globally (sway/leaf-drift halved, fewer falling leaves, gentler godrays/fireflies/light-sweep). - Fire leaf confetti on click of real controls only (was pointerdown everywhere, which showered mobile users on every scroll). - Remove hover lift/scale from non-interactive cards, screenshots and mascots so they no longer read as clickable. - Fix mobile nav menu colours in the light theme (was a hard-coded dark panel with low-contrast links). - Calm how-it-works steps 1-2 (no button pulse/shine/cursor bob); step 3 keeps its lively sync animation. Remove the now-static "copied" toast from step 1 since it only made sense mid-animation. UX audit follow-ups: - Unify vertical rhythm with one section-padding scale; vertically centre the hero so space is balanced instead of pooling under the CTAs. - Split the mixed "Why KoalaSync?" grid into use-case scenarios and a labelled "Features" subsection, and move the #features nav anchor there. - Demote the hero GitHub CTA to a quiet text link (Chrome > Firefox > GitHub hierarchy); scale down oversized section mascots and give them a shared soft shadow. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
137 lines
3.0 KiB
CSS
137 lines
3.0 KiB
CSS
/* --- Join & Invitation Page Visuals --- */
|
|
.join-status-visual {
|
|
margin-bottom: 2rem;
|
|
position: relative;
|
|
height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.join-status-mascot {
|
|
display: block;
|
|
width: 140px;
|
|
height: auto;
|
|
z-index: 2;
|
|
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
|
|
}
|
|
|
|
.join-status-mascot.searching-mascot {
|
|
width: 175px; /* Slightly wider due to antenna to keep main body scale identical */
|
|
}
|
|
|
|
.join-status-pulse {
|
|
animation: mascot-gentle-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes mascot-gentle-pulse {
|
|
0% {
|
|
transform: scale(0.96);
|
|
filter: drop-shadow(0 4px 10px oklch(0.68 0.13 150 / 0.15));
|
|
}
|
|
50% {
|
|
transform: scale(1.04);
|
|
filter: drop-shadow(0 8px 20px oklch(0.68 0.13 150 / 0.35));
|
|
}
|
|
100% {
|
|
transform: scale(0.96);
|
|
filter: drop-shadow(0 4px 10px oklch(0.68 0.13 150 / 0.15));
|
|
}
|
|
}
|
|
|
|
.legal-mascot {
|
|
display: block;
|
|
width: 180px;
|
|
height: auto;
|
|
margin: -0.75rem auto 0.4rem auto;
|
|
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.legal-mascot:hover {
|
|
transform: scale(1.06) translateY(-4px) rotate(1.5deg);
|
|
}
|
|
|
|
.selfhost-mascot {
|
|
display: block;
|
|
width: 220px;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
filter: drop-shadow(0 6px 14px oklch(0.15 0.02 145 / 0.22));
|
|
}
|
|
|
|
.status-ring {
|
|
position: absolute;
|
|
width: 90px;
|
|
height: 90px;
|
|
border-radius: 50%;
|
|
background: oklch(0.68 0.13 150 / 0.05);
|
|
border: 2px dashed oklch(0.68 0.13 150 / 0.25);
|
|
z-index: 1;
|
|
}
|
|
|
|
.status-ring.active-pulse {
|
|
animation: radar-pulse 3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
|
|
}
|
|
|
|
@keyframes radar-pulse {
|
|
0% {
|
|
transform: scale(0.85);
|
|
opacity: 0.9;
|
|
border-color: oklch(0.68 0.13 150 / 0.3);
|
|
box-shadow: 0 0 0 0px oklch(0.68 0.13 150 / 0.15);
|
|
}
|
|
50% {
|
|
transform: scale(1.18);
|
|
opacity: 0.35;
|
|
border-color: oklch(0.75 0.10 150 / 0.2);
|
|
box-shadow: 0 0 0 15px oklch(0.75 0.10 150 / 0);
|
|
}
|
|
100% {
|
|
transform: scale(0.85);
|
|
opacity: 0.9;
|
|
border-color: oklch(0.68 0.13 150 / 0.3);
|
|
box-shadow: 0 0 0 0px oklch(0.68 0.13 150 / 0.15);
|
|
}
|
|
}
|
|
|
|
.join-card-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.join-card-actions .btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
padding: 1.1rem;
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.join-card-actions .btn svg {
|
|
margin-right: 0.3rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.join-card-actions .btn img {
|
|
margin-right: 0.3rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn-success {
|
|
background: var(--accent-green);
|
|
color: var(--text-on-green) !important;
|
|
box-shadow: 0 10px 15px -3px oklch(0.68 0.13 150 / 0.3);
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background: oklch(0.60 0.12 150);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 20px 25px -5px oklch(0.68 0.13 150 / 0.4);
|
|
}
|
|
|