:root{
--icon-w: 50px; --label-w: 185px; --gap: 10px;
--radius: 0px;
--shadow: 0 8px 22px rgba(0,0,0,.28);
--c-text: #fff;
--c-black: #000;
--c-dark-grad:  linear-gradient(180deg, #191919 0%, #000 100%);
--c-primary-grad: radial-gradient(367.65% 311.1% at 6% 50%, #FFB300 11.36%, #E57A00 22.97%, #FFB300 38.75%);
--c-accent: #FFB300; } .sidefab{ display: flex;
flex-direction: column;
align-items: end;
}
.sidefab__list{
list-style: none; 
margin: 0; 
padding: 0;
display: flex;
flex-direction: column;
gap: var(--gap);
}
.sidefab__item{ position: relative; }
.sidefab__list li:last-child{
display:none !important;
} .fab-btn{
width: calc(var(--icon-w) + var(--label-w));
height: var(--icon-w);
display: flex;
align-items: stretch;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
color: var(--c-text);
text-decoration: none;
background: var(--c-dark-grad); transform: translateX(var(--label-w));
transition: transform .28s ease, background .28s ease;
} @media (min-width: 960px) and (hover: hover) and (pointer: fine){
.fab-btn:hover{
transform: translateX(0);
}
} .fab-btn__icon{
width: var(--icon-w); 
min-width: var(--icon-w);
height: var(--icon-w);
display: flex;
align-items: center;
justify-content: center;
background: var(--c-dark-grad);
} .fab-btn__label{
width: var(--label-w);
display: flex;
align-items: center;
padding-inline: 14px;
font-family: Ubuntu;
font-size: 20px;
font-style: normal;
font-weight: 700;
background: var(--c-dark-grad);
color: var(--c-text);
} .fab-icon{
width: 50px; fill: currentColor;
} .fab-btn--primary{ color: #111; }
.fab-btn--primary .fab-btn__icon{
background: var(--c-primary-grad); color: #111;
}
.fab-btn--primary .fab-btn__label{
background: linear-gradient(90deg,rgba(255, 179, 0, 1) 40%, rgba(229, 122, 0, 1) 77%, rgba(255, 179, 0, 1) 96%); color: #000;
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine){
.fab-btn--primary:hover,
.fab-btn--primary:focus-visible{
background: linear-gradient(90deg,rgba(255, 179, 0, 1) 40%, rgba(229, 122, 0, 1) 77%, rgba(255, 179, 0, 1) 96%); }
.fab-btn--primary:hover .fab-btn__icon,
.fab-btn--primary:hover .fab-btn__label,
.fab-btn--primary:focus-visible .fab-btn__icon,
.fab-btn--primary:focus-visible .fab-btn__label{
background: transparent; color: #111; }
}   .sidefab__toggle{
display: none;
width: var(--icon-w);
height: var(--icon-w); display: flex; align-items: center;
justify-content: center;
border: 0; 
border-radius: var(--radius);
background: var(--c-dark-grad);
color: var(--c-text);
box-shadow: var(--shadow);
cursor: pointer;
visibility: hidden; padding: 0;
}
.chevron{ transition: transform .22s ease; } @media (max-width: 959.98px), (hover: none) and (pointer: coarse){ .sidefab{ transform: none; }
.sidefab{ gap: var(--gap); }
.sidefab__list{ gap: 0; } .sidefab__toggle{ 
visibility: visible;
} .sidefab__item--collapsible{
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-6px);
transition: max-height .26s ease, opacity .26s ease, transform .26s ease;
pointer-events: none;
} .sidefab.is-open .sidefab__item--collapsible{
max-height: var(--icon-w);
opacity: 1;
transform: translateY(0);
pointer-events: auto;
margin-top: var(--gap);
} .fab-btn{ transform: translateX(var(--label-w)); } .sidefab.is-open .chevron{ transform: rotate(180deg); }
} .fab-btn:focus-visible, 
.sidefab__toggle:focus-visible{
outline: 2px solid #ffd36a; 
outline-offset: 2px; 
border-radius: 0px;
}
@media (prefers-reduced-motion: reduce){
.fab-btn, 
.sidefab__item--collapsible, 
.chevron{ transition: none !important; }
}  .sidefab,
.sidefab__list{
pointer-events: none;
} .fab-btn{
pointer-events: none;
} .fab-btn__icon{
pointer-events: auto;
} .sidefab__toggle{
pointer-events: auto;
} @media (min-width: 960px) and (hover: hover) and (pointer: fine){
.fab-btn:hover,
.fab-btn:focus-within{
pointer-events: auto; }
.fab-btn:hover .fab-btn__label,
.fab-btn:focus-within .fab-btn__label{
pointer-events: auto; }
} @media (max-width: 959.98px), (hover: none) and (pointer: coarse){
.sidefab.is-open .sidefab__item--collapsible{
pointer-events: auto; }
}