.cta {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
opacity: 0;
visibility: hidden;
animation: show 250ms 3000ms forwards;
}
.cta__contact {
position: relative;
}
.contact {
display: flex;
align-items: center;
padding: 6px 8px 6px 15px;
box-shadow: var(--box-shadow-warm);
border-radius: 6px;
background-color: #fff;
z-index: 1;
}
.contact > span {
display: flex;
align-items: center;
color: var(--neutral-900);
}
.contact > span::after {
content: '';
display: block;
width: 1px;
height: 32px;
background-color: var(--neutral-200);
margin-left: 16px;
margin-right: 8px;
}
.contact > svg {
color: var(--neutral-600);
transition: 250ms;
}
.contact.focus > svg {
rotate: 180deg;
transition: 125ms;
}
.contact__btns {
position: absolute;
right: 0;
bottom: 48px;
display: flex;
flex-wrap: wrap;
justify-content: end;
gap: 8px;
visibility: hidden;
z-index: 1;
}
.contact__btn {
visibility: hidden;
opacity: 0;
transform: translateY(0);
transition: 250ms;
width: max-content;
}
.contact__btn_inner {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
box-shadow: var(--box-shadow-warm);
background-color: #fff;
border-radius: 6px;
color: var(--neutral-900);
transition: 250ms;
}
.contact__btn_inner svg {
flex-shrink: 0;
}
@media(hover: hover) {
.contact__btn:hover .contact__btn_inner {
transform: translateY(-4px);
transition: 125ms;
}
}
.contact.focus + .contact__btns > * {
visibility: visible;
opacity: 1;
transform: translateY(-4px);
transition: 125ms;
}
.contact__btns > *:nth-child(1), .contact.focus + .contact__btns > *:nth-child(1) {
transition-delay: 50ms;
}
.contact__btns > *:nth-child(2), .contact.focus + .contact__btns > *:nth-child(2) {
transition-delay: 100ms;
}
.contact__btns > *:nth-child(3), .contact.focus + .contact__btns > *:nth-child(3) {
transition-delay: 150ms;
}
.contact__btns > *:nth-child(4), .contact.focus + .contact__btns > *:nth-child(4) {
transition-delay: 200ms;
}
.contact__btns > *:nth-child(5), .contact.focus + .contact__btns > *:nth-child(5) {
transition-delay: 250ms;
}
.contact__btns > *:nth-child(6), .contact.focus + .contact__btns > *:nth-child(6) {
transition-delay: 300ms;
}
.contact__btn > svg {
color: var(--neutral-600);
}
.cta__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: end;
}