.bc-fuid-gradient__anchor{
display: block;
width: fit-content;
height: fit-content;
}
.bc-fuid-gradient{
display: block;
width: fit-content;
height: fit-content;
}
.bc-fuid-gradient__gradient{
--bg-size: 400%; --duration: 15s;
--easing: linear;
background: var(--gradients); -webkit-background-clip: text;
color: transparent;
-webkit-animation: hue var(--duration) infinite var(--easing); background-clip: text;
animation: hue var(--duration) infinite var(--easing); }
@keyframes hue {
to {
background-position: var(--bg-size) 0;
}
}.bc-arrow-button{
white-space: wrap;
text-decoration: unset !important;
color: unset !important;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse; width: fit-content;
height: fit-content;
--scale: 1.25;
--dimensions: 23px;
--transitionduration: 0.5s;
--ease: cubic-bezier(0.1, 0, 0.3, 1);
--transitiondurationswap: 0.5s;
--easeswap: cubic-bezier(0.1, 0, 0.3, 1);
--arrow-distance: 300%;
} .bc-arrow-button .bc-arrow-button_title-wrapper{
width: 100%;
padding: 15px 20px 15px 20px;
background-color: rgb(44, 43, 43); border-radius: 100px; color: white; text-align: center;
font-size: 18px;
letter-spacing: -.5px;
line-height: 1.15;
}
.bc-arrow-button .bc-arrow-button_title-wrap{
position: relative;
overflow: hidden;
}
.bc-arrow-button .bc-arrow-button__title{
all: unset;
display: block;
outline: none;
border: none;
transition: transform;
transition-duration: var(--transitiondurationswap);
transition-timing-function: var(--easeswap);
} .bc-arrow-button[data-swap='enable'] .bc-arrow-button__title::after{
display: block;
content: attr(data-content);
position: absolute;
top: 100%;
width: 100%;
}
.bc-arrow-button[data-swap='enable']:hover .bc-arrow-button__title{
transform: translateY(-100%);
}
.bc-arrow-button[data-swap='enable']:hover .bc-arrow-button__title::after{
transform: translateY(0%);
} .bc-arrow-button .bc-arrow-button__circle{
padding: 25px;
background-color: rgb(44, 43, 43); border-radius: 50%; position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
min-width: var(--dimensions) !important;
min-height: var(--dimensions) !important;
transition: scale;
transition-duration: var(--transitionduration);
transition-timing-function: var(--ease);
}
.bc-arrow-button .bc-arrow-button__arrow{
position: absolute;
transition: transform;
transition-duration: var(--transitionduration);
transition-timing-function: var(--ease);
min-width: var(--dimensions) !important;
min-height: var(--dimensions) !important;
max-width: var(--dimensions) !important;
max-height: var(--dimensions) !important;
rotate: -45deg; --fill: white;
stroke-width: 0.1;
stroke: var(--fill);
fill: var(--fill);
}
.bc-arrow-button .bc-arrow-button__arrow-right{
transform: translateX(calc(var(--arrow-distance) * -1));
}
.bc-arrow-button:hover .bc-arrow-button__circle{
scale: var(--scale); }
.bc-arrow-button:hover .bc-arrow-button__arrow-left{
transform: translateX(var(--arrow-distance));
}
.bc-arrow-button:hover .bc-arrow-button__arrow-right{
transform: translateX(0%);
}.bc-crystal-button {
display: block;
width: fit-content;
box-sizing: border-box;
white-space: wrap;
--radius: 15px; --filter: 0.7;
--border: 1px;
--padding: 1px;
border-radius: var(--radius);
border: 1px solid #d1d1d1;
position: relative;
place-items: center;
padding: 1px;
transition: transform 0.1s;
padding: 12px 36px; }
.bc-crystal-button:is(:hover, :focus-visible) {
--hover: 1;
}
.bc-crystal-button:before{
content: "";
position: absolute;
inset: 0px;
border-radius: calc(var(--radius) - var(--border));
background:
conic-gradient(
from calc(var(--rx, 0) * 180deg) at
calc(var(--x, 0) * 100%) calc(var(--y, 0) * 100%),
hsl(10 90% 70%),
hsl(140 80% 70%),
hsl(320 80% 70%),
hsl(210 80% 70%),
hsl(10 80% 70%)
);
filter: saturate(var(--filter)); opacity: var(--hover, 0);
transition: opacity 0.2s;
}
.bc-crystal-button__backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: calc(var(--radius) - var(--padding));
display: block;
grid-column: 1;
grid-row: 1;
}
.bc-crystal-button__title {
grid-row: 1;
grid-column: 1;
position: relative;
z-index: 2;
display: grid;
align-items: center;
gap: 0.5rem;
}
.bc-crystal-button--dark {
outline: none;
}
.bc-crystal-button__backdrop {
--blur: 20px;
--brightness: 1.2;
--saturate: 1;
background: hsla(0,0,0, 0.3); -webkit-backdrop-filter: blur(var(--blur)) brightness(var(--brightness)) saturate(var(--saturate)); backdrop-filter: blur(var(--blur)) brightness(var(--brightness)) saturate(var(--saturate)); }
.bc-crystal-button--dark:after {
background: hsl(0 0% 10% / calc(1 - var(--hover, 0) * 0.25));
}