.nb-orbit {
position: relative;
width: var(--nb-orb-size, 328px);
height: var(--nb-orb-size, 328px);
} .nb-orbit__gradients {
position: absolute;
width: 100%;
height: 100%;
animation: nb-orbit-grad calc(var(--nb-orb-grad-speed, 10) * 1s) linear infinite;
will-change: transform;
} .nb-orbit__grad-ring,
.nb-orbit__circle-ring {
--_rs: calc(var(--nb-orb-ring-start, 104px) + var(--ring-i) * var(--nb-orb-ring-gap, 32px));
position: absolute;
border-radius: 9999px;
width: var(--_rs);
height: var(--_rs);
top: calc(50% - var(--_rs) / 2);
left: calc(50% - var(--_rs) / 2);
} .nb-orbit__grad-ring {
transform: rotate(calc(-1 * var(--ring-rot)));
}
.nb-orbit__grad-ring::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: conic-gradient(
transparent 6.7%,
var(--nb-orb-ring-c1, rgba(158, 122, 255, 0.35)) 20.8%,
var(--nb-orb-ring-c2, rgba(254, 139, 187, 0.7)) 34.9%,
var(--nb-orb-ring-c3, #ffbd7a) 49.99%,
transparent 50%
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
} .nb-orbit__circle-ring::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
pointer-events: none;
background: var(--nb-orb-circle-color, rgba(235, 235, 255, 0.06));
border-radius: inherit;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
} .nb-orbit__items {
position: absolute;
inset: 0;
animation: nb-orbit-items calc(var(--nb-orb-orbit-speed, 80) * 1s) linear infinite;
will-change: transform;
} .nb-orbit__item {
position: absolute;
left: calc(50% + var(--nb-orb-orbit-d, 240px) / 2 * cos(var(--item-a)) - var(--nb-orb-item-size, 48px) / 2);
top: calc(50% + var(--nb-orb-orbit-d, 240px) / 2 * sin(var(--item-a)) - var(--nb-orb-item-size, 48px) / 2);
width: var(--nb-orb-item-size, 48px);
height: var(--nb-orb-item-size, 48px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: nb-orbit-icon calc(var(--nb-orb-orbit-speed, 80) * 1s) linear infinite;
will-change: transform;
}
.nb-orbit__item img {
width: 50%;
height: 50%;
object-fit: contain;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
} .nb-orbit__logo {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.nb-orbit__logo img {
width: calc(var(--nb-orb-size, 328px) * 0.19512);
pointer-events: none;
user-select: none;
-webkit-user-select: none;
} @keyframes nb-orbit-grad {
from {
transform: translateZ(0) rotate(0deg);
}
to {
transform: translateZ(0) rotate(360deg);
}
}
@keyframes nb-orbit-items {
from {
transform: translateZ(0) rotate(0turn);
}
to {
transform: translateZ(0) rotate(-1turn);
}
}
@keyframes nb-orbit-icon {
from {
transform: translateZ(0) rotate(0turn);
}
to {
transform: translateZ(0) rotate(1turn);
}
}