.nb-ripple-button-v4 {
position: relative;
display: flex;
width: fit-content;
align-items: center;
cursor: pointer;
--layers-radius: 9999px;
}
.nb-ripple-button-v4__bg {
background-color: var(--bg-color);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(1);
}
.nb-ripple-button-v4__inner,
.nb-ripple-button-v4__inner-hover,
.nb-ripple-button-v4__inner-static {
pointer-events: none;
display: block;
}
.nb-ripple-button-v4__inner {
position: relative;
}
.nb-ripple-button-v4__inner-hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transform: translateY(70%);
}
.nb-ripple-button-v4__bg-layers {
position: absolute;
left: 50%;
transform: translate(-50%);
top: -60%;
aspect-ratio: 1 / 1;
width: max(200%, 10em);
}
.nb-ripple-button-v4__bg-layer {
border-radius: var(--layers-radius);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(0);
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__inner-static {
opacity: 0;
transform: translateY(-70%);
transition:
transform var(--layers-transform-duration) var(--layers-transform-easing),
opacity 0.3s linear;
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__inner-hover {
opacity: 1;
transform: translateY(0);
transition:
transform var(--line-transform-duration) var(--line-transform-easing),
opacity var(--line-transform-duration) var(--line-transform-easing);
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__bg-layer {
transition:
transform var(--layers-transform-duration) var(--layers-transform-easing),
opacity 0.3s linear;
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__bg-layer--1 {
transform: scale(1);
background-color: var(--layer-1-color);
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__bg-layer--2 {
transition-delay: var(--delay-between-layers);
transform: scale(1);
background-color: var(--layer-2-color);
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__bg-layer--3 {
transition-delay: calc(var(--delay-between-layers) * 2);
transform: scale(1);
background-color: var(--bg-color);
}.bc-underlined-title__anchor{
display: flex;
width: fit-content;
height: fit-content;
}
.bc-underlined-title{
text-decoration: unset !important;
color: unset !important;
display: block;
width: fit-content;
height: fit-content;
}
.bc-underlined-title__element{
position: relative;
display: block;
width: 100%;
--width: 0px;
--height: 1px;
--bottom-distance: 0px;
--duration: 0.7s;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--background: currentColor;
} .bc-underlined-title__side-to-side:before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: var(--bottom-distance);
height: var(--height);
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
background: var(--background);
-webkit-transition: -webkit-transform var(--duration) var(--ease);
transition: -webkit-transform var(--duration) var(--ease);
-o-transition: -o-transform var(--duration) var(--ease);
-moz-transition: transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease);
transition: transform var(--duration) var(--ease);
transition: transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease), -o-transform var(--duration) var(--ease);
}
.bc-underlined-title__side-to-side:hover:before {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
transition-delay: unset;
-webkit-transition-delay: unset;
-o-transition-delay: unset;
-moz-transition-delay: unset;
} .bc-underlined-title__one-sided:after {
content: '';
position: absolute;
bottom: var(--bottom-distance);
left: 0;
width: var(--width);
border-bottom: var(--height) solid var(--background);
transition: var(--duration) var(--ease);
}
.bc-underlined-title__two-sided:after {
content: '';
display: block;
margin: auto;
bottom: var(--bottom-distance);
left: 0;
width: var(--width);
height: var(--height);
background: var(--background);
transition: width var(--duration) var(--ease);
position: relative;
border-bottom: unset;
}
.bc-underlined-title__one-sided:hover:after, .bc-underlined-title__two-sided:hover:after {
width: 100%;
}
.bc-underlined-title__one-sided:hover::after, .bc-underlined-title__two-sided:hover::after {
-webkit-transition: width var(--duration) var(--ease);
transition: width var(--duration) var(--ease);
-o-transition: width var(--duration) var(--ease);
-moz-transition: width var(--duration) var(--ease);
transition: width var(--duration) var(--ease);
transition: width var(--duration) var(--ease);
} .bc-underlined-title__full-sided::after,
.bc-underlined-title__full-sided::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: var(--bottom-distance);
height: var(--height);
background: var(--background);
-webkit-transition: -webkit-transform var(--duration) var(--ease);
transition: -webkit-transform var(--duration) var(--ease);
-o-transition: -o-transform var(--duration) var(--ease);
-moz-transition: transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease);
transition: transform var(--duration) var(--ease);
transition: transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease), -o-transform var(--duration) var(--ease);
}
.bc-underlined-title__full-sided::before {
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
.bc-underlined-title__full-sided::after {
-webkit-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
-o-transform-origin: right;
transform-origin: right;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
.bc-underlined-title__full-sided:hover::before {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
}
.bc-underlined-title__full-sided:hover::after {
width: unset;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}.bc-reel__item,
.bc-reel__item > * {
flex-shrink: 0; width: fit-content;
}
.bc-reel{
direction: ltr !important;
--rotate: 0deg;
transform: rotate(var(--rotate)); --color: #fff;
--width: 25%;
}
.bc-reel[data-blur-edges="1"]::before{
background-image: linear-gradient(to right, var(--color), rgba(0, 0, 0, 0));
content: "";
position: absolute;
z-index: 99;
top: 0;
left: 0;
pointer-events: none;
width: var(--width);
height: 100%;
}
.bc-reel[data-blur-edges="1"]::after{
background-image: linear-gradient(270deg, var(--color), rgba(0, 0, 0, 0));
content: "";
position: absolute;
z-index: 99;
top: 0;
right: 0;
pointer-events: none;
width: var(--width);
height: 100%;
}
.bc-reel__wrapper { display: flex;
}
.bc-reel__item { display: flex;
align-items: center;
justify-content: center;
}
.bc-reel__nestable{ visibility: hidden;
min-width: 1px;
}
.bc-reel__example-heading{ background: #080808;
padding: 10px 20px;
color: white;
}
.bc-reel__to-hide{
opacity: 0;
}.nb-stories__container .brxe-video{
all: unset;
}
.nb-stories, 
.nb-stories__container {
display: grid;
}
.nb-stories{
position: relative;
overflow: hidden;
}
.nb-stories[data-flickering="1"] {
opacity: 0;
}
.nb-stories__container {
grid-area: 1/1;
}
.nb-stories__container > *{
grid-area: 1/1;
opacity: 0;
visibility: none;
}
.nb-stories__container > .active {
opacity: 1;
visibility: visible;
}
.nb-stories__container img,
.nb-stories__container video {
object-fit: cover;
object-position: center center;
display: block;
outline: none;
position: absolute;
}
.nb-stories__container img {
width: 100%;
height: 100%;
filter: brightness(var(--story-brightness));
}
.nb-stories__container video {
filter: brightness(var(--story-brightness));
}
.nb-stories__container .nb-stories__story,
.nb-stories__container video {
height: 100%;
width: 100%;
}
.nb-stories__controls {
position: absolute;
width: 100%;
height: 100%;
}
.nb-stories__controls .nb-stories__controls-thumb {
width: 100%;
display: flex;
}
.nb-stories__controls div:last-child {
justify-content: space-between;
align-items: center;
}
.nb-stories__controls .nb-stories__controls-thumb > span {
display: block;
flex: 1;
overflow: hidden;
isolation: isolate;
}
.nb-stories__controls .thumb-item.active {
display: block;
height: inherit;
}
.nb-stories__controls button {
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
opacity: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
cursor: pointer;
}
.nb-stories__controls button:last-child {
right: 0;
left: unset;
}
.nb-stories__controls button:focus-visible {
opacity: 0.2;
outline: none;
}.nb-thumbnail-slider[data-flickering="1"] {
opacity: 0;
}
.nb-thumbnail-slider img{
user-select: none;
}
.nb-thumbnail-slider__preview {
position: relative;
width: 100%;
overflow: hidden;
}
.nb-thumbnail-slider__preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.nb-thumbnail-slider__thumbnails {
overflow: hidden;
position: relative;
display: flex;
}
.nb-thumbnail-slider__thumb {
min-width: var(--thumbnails-width);
min-height: var(--thumbnails-height);
width: var(--thumbnails-width);
height: var(--thumbnails-height);
max-width: var(--thumbnails-width);
max-height: var(--thumbnails-height);
object-fit: cover;
cursor: pointer;
overflow: hidden;
filter: brightness(var(--thumbnails-brightness));
transition: filter var(--thumbnail-filter-duration) var(--thumbnail-filter-ease);
}
.nb-thumbnail-slider__thumb--active {
filter: brightness(100%);
}
.nb-thumbnail-slider__selector {
position: absolute;
top: 0;
left: 0;
width: var(--thumbnails-width);
height: var(--thumbnails-height);
pointer-events: none;
}
.nb-thumbnail-slider__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--arrow-dimensions);
height: var(--arrow-dimensions);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}