dsrptlab/hr_promo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update HR flow UI

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-14 12:38:46 +07:00
parent 5e7ef93c12
commit 9bf3b87f36
4 changed files with 725 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/assets/css/main.css
View File

@@ -43,31 +43,35 @@ body,
body {
font-family: "IBM Plex Sans", sans-serif;
background:
radial-gradient(1200px 600px at 10% 10%, rgba(219, 39, 119, 0.16), transparent 60%),
radial-gradient(900px 500px at 90% 15%, rgba(250, 204, 21, 0.2), transparent 55%),
radial-gradient(900px 700px at 50% 100%, rgba(74, 222, 128, 0.12), transparent 60%),
oklch(98% 0 0);
background: #f9f6ef;
}
.glass-card {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
backdrop-filter: blur(18px);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow:
0 24px 40px rgba(27, 32, 58, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
backdrop-filter: blur(24px) saturate(140%);
}
.glass-pane {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(18px);
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow:
0 16px 28px rgba(27, 32, 58, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px) saturate(130%);
}
.section-title {
font-family: "Space Grotesk", sans-serif;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.01em;
font-size: 2.1rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
color: rgb(15 23 42);
text-shadow: 0 6px 20px rgba(99, 102, 241, 0.18);
}
.radar-label {
@@ -76,3 +80,61 @@ body {
text-transform: uppercase;
color: rgb(100 116 139);
}
.voice-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 96px;
}
.voice-bar {
width: 6px;
height: 32px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(56, 189, 248, 0.9), rgba(14, 165, 233, 0.3));
animation: voice-wave 1.6s ease-in-out infinite;
}
.voice-bar:nth-child(2) { animation-delay: -1.4s; height: 26px; }
.voice-bar:nth-child(3) { animation-delay: -1.2s; height: 40px; }
.voice-bar:nth-child(4) { animation-delay: -1.0s; height: 54px; }
.voice-bar:nth-child(5) { animation-delay: -0.8s; height: 68px; }
.voice-bar:nth-child(6) { animation-delay: -0.6s; height: 52px; }
.voice-bar:nth-child(7) { animation-delay: -0.4s; height: 38px; }
.voice-bar:nth-child(8) { animation-delay: -0.2s; height: 28px; }
.voice-bar:nth-child(9) { animation-delay: -0.1s; height: 44px; }
.voice-bar:nth-child(10) { animation-delay: -0.05s; height: 34px; }
@keyframes voice-wave {
0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
50% { transform: scaleY(1.2); opacity: 1; }
}
.bg-mesh {
background-image:
radial-gradient(1200px 600px at 10% -10%, rgba(67, 56, 118, 0.2), transparent 60%),
radial-gradient(900px 500px at 90% 10%, rgba(230, 184, 92, 0.18), transparent 60%),
linear-gradient(180deg, #f9f6ef 0%, #f2efe7 55%, #ebe8df 100%);
}
.reorder-move {
transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.reorder-enter-active,
.reorder-leave-active {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.reorder-enter-from {
opacity: 0;
transform: translateY(14px) scale(0.98);
}
.reorder-leave-to {
opacity: 0;
transform: translateY(-10px) scale(0.98);
}