* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(to bottom, rgba(235, 87, 130, 0.12), rgba(79, 109, 245, 0.08), #F4F6FB);
position: relative;
min-height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
margin: 0px;
gap: 1.5rem;
padding: 15px;
}
.stepper-wrapper {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0.6rem 1rem;
background: #FFFFFF;
border: 1px solid #E8E6F0;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(107, 92, 231, .08);
transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.stepper-horizontal {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
width: 100%;
padding: 0.25rem 0;
}
.step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
min-height: 3rem;
cursor: pointer;
}
.step-circle {
cursor: pointer;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .75rem;
font-weight: 700;
transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-label {
cursor: pointer;
position: absolute;
top: calc(1.75rem + 0.4rem);
left: 50%;
transform: translateX(-50%);
font-size: 0.75rem;
font-weight: 600;
color: #7E7E9A;
white-space: nowrap;
transition: color 0.5s ease;
}
.step-done .step-circle {
background: #4F6DF5;
color: white;
}
.step-active .step-circle {
background: linear-gradient(315deg, #E8457C, #4F6DF5);
color: #FFFFFF;
box-shadow: 0 0 0 4px rgba(124, 106, 255, 0.12), 0 0 16px rgba(124, 106, 255, 0.3);
animation: gentle-pulse 2.5s ease-in-out infinite;
}
.step-active .step-label {
color: #1A1A2E;
;
}
.step-upcoming .step-circle {
background: rgba(107, 92, 231, .06);
color: #7E7E9A;
border: 1.5px solid #E8E6F0;
}
.step-connector {
flex: 1;
height: 2px;
background: #E8E6F0;
margin-top: 0.875rem;
min-width: 5rem;
border-radius: 1px;
transition: background 0.5s ease;
position: relative;
overflow: hidden;
}
.step-connector-done {
background: #4F6DF5;
}
.step-connector-done::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: shimmer 2s ease-in-out infinite;
}
/* ====ANIMATIONS==== */
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
h1 {
color: var(--text);
font-size: 2.25rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
transition: color 0.4s ease;
}
.emph {
background: linear-gradient(315deg, #E8457C, #4F6DF5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
