.kb-topbar {
--kb-topbar-bg: #26233d;
background-color: var(--kb-topbar-bg);
color: #fff;
}
.kb-topbar__marquee {
position: relative;
overflow: hidden;
line-height: 1;
}
.kb-topbar__inner {
display: inline-flex;
align-items: center;
min-width: max-content;
white-space: nowrap;
will-change: transform;
animation: kb-topbar-scroll var(--speed,22s) linear infinite;
}
.kb-topbar__text {
display: inline-block;
padding: .35rem 2rem .4rem;
font-size: .78rem;
font-weight: 400;
letter-spacing: .01em;
}
.kb-topbar__inner::after {
content: attr(data-text);
display: inline-block;
padding: .35rem 2rem .4rem;
font-size: .78rem;
font-weight: 400;
letter-spacing: .01em;
}
.kb-topbar__marquee::before,
.kb-topbar__marquee::after {
content: "";
position: absolute;
top: 0;
z-index: 2;
width: 28px;
height: 100%;
pointer-events: none;
}
.kb-topbar__marquee::before {
left: 0;
background: linear-gradient(to right,var(--kb-topbar-bg) 40%,rgba(38,35,61,0));
}
.kb-topbar__marquee::after {
right: 0;
background: linear-gradient(to left,var(--kb-topbar-bg) 40%,rgba(38,35,61,0));
}
@keyframes kb-topbar-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (max-width: 767.98px) {
.kb-topbar__text,
.kb-topbar__inner::after {
padding-top: .4rem;
padding-bottom: .45rem;
font-size: .72rem;
}
}