gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-08-27 19:17:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: Visual polish of 3-step guide and description updates in 13 locales

Browse Source
This commit is contained in:
KoalaDev
2026-07-03 11:05:45 +02:00
parent 6b81668e16
commit 537c8f3c60
14 changed files with 95 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.css
+56 -39
View File
@@ -1042,13 +1042,13 @@ input:checked + .mock-slider:before {
.steps {
display: flex;
flex-direction: column;
gap: 6rem;
gap: 8rem;
}
.step {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 6rem;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
@@ -1057,37 +1057,43 @@ input:checked + .mock-slider:before {
}
.step-num {
font-size: 4rem;
font-weight: 800;
color: rgba(99, 102, 241, 0.15);
font-size: 5rem;
font-weight: 900;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.15));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
margin-bottom: 0.5rem;
margin-bottom: 0.75rem;
font-family: inherit;
letter-spacing: -2px;
}
.step-text h3 {
font-size: 1.85rem;
margin-bottom: 1rem;
font-weight: 800;
font-size: 2.1rem;
margin-bottom: 1.1rem;
font-weight: 850;
color: white;
letter-spacing: -0.5px;
}
.step-text p {
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.6;
color: #94a3b8;
font-size: 1.1rem;
line-height: 1.75;
}
/* Custom CSS Mockups for step illustrations */
.step-illustration-1, .step-illustration-2, .step-illustration-3 {
background: radial-gradient(circle at top left, #1e293b, #0f172a);
height: 280px; /* Slightly taller for more detail and breathing room */
background: radial-gradient(circle at 10% 10%, #1e1b4b, #030712);
height: 300px; /* Slightly taller for more detail and breathing room */
border-radius: 24px;
border: 1px solid var(--glass-border);
border: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -1103,21 +1109,23 @@ input:checked + .mock-slider:before {
.illus-browser-container {
width: 90%;
height: 80%;
background: #090d16;
border: 1px solid rgba(255, 255, 255, 0.05);
background: #050811;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
}
.illus-browser-header {
background: #131924;
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 0.6rem 0.8rem;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.illus-browser-dots {
@@ -1313,13 +1321,13 @@ input:checked + .mock-slider:before {
top: 0.6rem;
right: 0.6rem;
width: 145px;
background: rgba(30, 41, 59, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(99, 102, 241, 0.25);
border-radius: 12px;
padding: 0.6rem 0.8rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 15px rgba(99, 102, 241, 0.15);
animation: popup-float 4s ease-in-out infinite;
z-index: 5;
}
@@ -1381,17 +1389,17 @@ input:checked + .mock-slider:before {
Step 2 Illustration: Highly Realistic Extension Popup (Create Room View)
========================================================================== */
.illus-popup-card {
width: 220px; /* Scaled up 16% for a bigger, much more detailed view */
background: rgba(30, 41, 59, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
width: 220px;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
padding: 0.95rem; /* Slightly larger padding */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
padding: 0.95rem;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: 0.75rem; /* Tighter vertical layout rhythm */
gap: 0.75rem;
animation: popup-float 4s ease-in-out infinite;
animation-delay: -1s;
}
@@ -1556,11 +1564,13 @@ input:checked + .mock-slider:before {
.illus-player-card {
width: 145px;
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 6px;
box-shadow: 0 10px 25px rgba(0,0,0,0.4);
box-shadow: 0 12px 30px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
gap: 4px;
@@ -1618,7 +1628,14 @@ input:checked + .mock-slider:before {
.player-video-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: radial-gradient(circle at center, rgba(139, 92, 246, 0.1) 0%, transparent 80%);
background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.15), transparent);
background-size: 100% 200%;
animation: playerScrollScanline 3s linear infinite;
}
@keyframes playerScrollScanline {
0% { background-position: 0% 0%; }
100% { background-position: 0% 200%; }
}
.player-play-pulse {