.ahura-roadmap {
--ahura-roadmap-gap: 14px;
--ahura-roadmap-badge-size: 48px;
--ahura-roadmap-line-width: 2px;
--ahura-roadmap-inline-padding: 20px;
--ahura-roadmap-hover-lift: 8px;
--ahura-roadmap-hover-duration: 320ms;
position: relative;
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
}
.ahura-roadmap__item {
position: relative;
isolation: isolate;
z-index: 1;
display: flex;
align-items: center;
gap: 14px;
min-height: 82px;
padding: 18px 20px;
overflow: visible;
border-radius: 24px;
background: #fff;
box-shadow: 0 12px 35px rgba(27, 53, 91, .055);
transform: translateY(0) scale(1);
transition: transform var(--ahura-roadmap-hover-duration) cubic-bezier(.2, .75, .25, 1), box-shadow var(--ahura-roadmap-hover-duration) ease;
will-change: transform;
}
.ahura-roadmap__item:hover {
z-index: 3;
transform: translateY(calc(var(--ahura-roadmap-hover-lift) * -1)) scale(1.015);
box-shadow: 0 24px 55px rgba(27, 53, 91, .18);
}
.ahura-roadmap__connector {
display: block;
flex: 0 0 var(--ahura-roadmap-gap);
align-self: flex-start;
margin-inline-start: calc(var(--ahura-roadmap-inline-padding) + (var(--ahura-roadmap-badge-size) / 2) - (var(--ahura-roadmap-line-width) / 2));
width: var(--ahura-roadmap-line-width);
height: var(--ahura-roadmap-gap);
background: linear-gradient(to bottom, var(--ahura-step-color), color-mix(in srgb, var(--ahura-step-color) 35%, transparent));
opacity: .42;
}
.ahura-roadmap__badge {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 var(--ahura-roadmap-badge-size);
width: var(--ahura-roadmap-badge-size);
height: var(--ahura-roadmap-badge-size);
border-radius: 15px;
background: var(--ahura-step-bg);
color: var(--ahura-step-color);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
.ahura-roadmap__content {
min-width: 0;
flex: 1;
}
.ahura-roadmap__title,
.ahura-roadmap__description {
margin: 0;
text-align: start;
}
.ahura-roadmap__title {
color: #122342;
font-size: 18px;
font-weight: 800;
line-height: 1.55;
}
.ahura-roadmap__description {
margin-top: 3px;
color: #94a3bf;
font-size: 15px;
line-height: 1.7;
}
@supports not (color: color-mix(in srgb, red, blue)) {
.ahura-roadmap__connector {
background: var(--ahura-step-color);
}
}
@media (max-width: 767px) {
.ahura-roadmap__item {
min-height: 76px;
gap: 12px;
}
.ahura-roadmap__title {
font-size: 16px;
}
.ahura-roadmap__description {
font-size: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.ahura-roadmap__item {
transition: box-shadow .2s ease;
}
.ahura-roadmap__item:hover {
transform: none;
}
}