.nmh-hero {
position: relative;
width: 100%;
overflow: hidden; --nmh-overlay-color: transparent;
--nmh-overlay-opacity: 0;
--nmh-content-max-width: 800px;
--nmh-content-gap: 0.75rem;
--nmh-title-spacing: 0px;
--nmh-subtitle-spacing: 0px; --nmh-arrow-size: 10px;
--nmh-arrow-button-size: 44px;
--nmh-arrow-offset: 16px;
--nmh-arrow-bg: rgba(255, 255, 255, 0.3);
--nmh-arrow-color: #1d2327;
--nmh-arrow-bg-hover: rgba(255, 255, 255, 0.6);
--nmh-arrow-color-hover: var(--nmh-arrow-color);
--nmh-arrow-radius: 50%;
--nmh-arrow-opacity: 1; --nmh-dot-size: 10px;
--nmh-dot-active-size: var(--nmh-dot-size);
--nmh-dot-gap: 8px;
--nmh-dot-offset: 16px;
--nmh-dot-color: rgba(255, 255, 255, 0.5);
--nmh-dot-active-color: #fff;
--nmh-dot-opacity: 1;
--nmh-dot-active-opacity: 1;
--nmh-dot-radius: 50%; --nmh-sound-size: 44px;
--nmh-sound-icon-size: 22px;
--nmh-sound-offset-x: 24px;
--nmh-sound-offset-y: 24px;
--nmh-sound-bg: rgba(0, 0, 0, 0.55);
--nmh-sound-color: #fff;
--nmh-sound-radius: 999px; --nmh-play-size: 44px;
--nmh-play-icon-size: 22px;
--nmh-play-offset-x: 24px;
--nmh-play-offset-y: 24px;
--nmh-play-bg: rgba(0, 0, 0, 0.55);
--nmh-play-color: #fff;
--nmh-play-radius: 999px;
--nmh-play-opacity: 1; --nmh-progress-value: 0;
--nmh-progress-width: 100%;
--nmh-progress-height: 3px;
--nmh-progress-track-color: rgba(255, 255, 255, 0.25);
--nmh-progress-color: #fff;
--nmh-progress-radius: 999px;
--nmh-progress-track-opacity: 1;
--nmh-progress-offset-x: 24px;
--nmh-progress-offset-y: 16px;
--nmh-progress-gap: 12px;
--nmh-progress-fraction-color: #fff;
--nmh-progress-separator-color: var(--nmh-progress-fraction-color, #fff); --nmh-nav-fraction-color: #fff;
--nmh-nav-fraction-separator-color: var(--nmh-nav-fraction-color, #fff);
--nmh-nav-fraction-gap: 4px;
--nmh-nav-fraction-offset-x: 24px;
--nmh-nav-fraction-offset-y: 16px;
--nmh-segment-height: 3px;
--nmh-segment-gap: 4px;
--nmh-segment-track: rgba(255, 255, 255, 0.25);
--nmh-segment-fill: #fff;
--nmh-segment-radius: 999px;
--nmh-segment-width: 100%;
--nmh-segment-offset-x: 24px;
--nmh-segment-offset-y: 16px;
--nmh-segment-opacity: 1;
}
.nmh-swiper {
width: 100%;
height: var(--nmh-height, 70vh);
min-height: var(--nmh-min-height, 320px);
}
.nmh-swiper .swiper-wrapper {
height: 100%;
} .nmh-slide {
position: relative;
height: 100%;
overflow: hidden;
}
.nmh-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-size: var(--nmh-image-size, cover);
background-position: var(--nmh-image-position, center center);
background-repeat: no-repeat;
} .nmh-image-motion {
transform-origin: center center;
backface-visibility: hidden;
}
.nmh-image-motion.is-animating {
will-change: transform;
animation-duration: var(--nmh-motion-duration, 5000ms);
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.nmh-image-motion.is-animating.nmh-motion-zoom-in {
animation-name: nmh-zoom-in;
}
.nmh-image-motion.is-animating.nmh-motion-zoom-out {
animation-name: nmh-zoom-out;
}
.nmh-image-motion.is-animating.nmh-motion-pan-left {
animation-name: nmh-pan-left;
}
.nmh-image-motion.is-animating.nmh-motion-pan-right {
animation-name: nmh-pan-right;
}
.nmh-image-motion.is-animating.nmh-motion-pan-up {
animation-name: nmh-pan-up;
}
.nmh-image-motion.is-animating.nmh-motion-pan-down {
animation-name: nmh-pan-down;
}
.nmh-image-motion.is-animating.nmh-motion-zoom-in-left {
animation-name: nmh-zoom-in-left;
}
.nmh-image-motion.is-animating.nmh-motion-zoom-in-right {
animation-name: nmh-zoom-in-right;
}
.nmh-image-motion.is-animating.nmh-motion-zoom-out-left {
animation-name: nmh-zoom-out-left;
}
.nmh-image-motion.is-animating.nmh-motion-zoom-out-right {
animation-name: nmh-zoom-out-right;
}
@keyframes nmh-zoom-in {
from {
transform: scale(1) translate3d(0, 0, 0);
}
to {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, 0, 0);
}
}
@keyframes nmh-zoom-out {
from {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, 0, 0);
}
to {
transform: scale(1) translate3d(0, 0, 0);
}
}
@keyframes nmh-pan-left {
from {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(var(--nmh-motion-pan-x, 3%), 0, 0);
}
to {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(calc(var(--nmh-motion-pan-x, 3%) * -1), 0, 0);
}
}
@keyframes nmh-pan-right {
from {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(calc(var(--nmh-motion-pan-x, 3%) * -1), 0, 0);
}
to {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(var(--nmh-motion-pan-x, 3%), 0, 0);
}
}
@keyframes nmh-pan-up {
from {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, var(--nmh-motion-pan-y, 3%), 0);
}
to {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, calc(var(--nmh-motion-pan-y, 3%) * -1), 0);
}
}
@keyframes nmh-pan-down {
from {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, calc(var(--nmh-motion-pan-y, 3%) * -1), 0);
}
to {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(0, var(--nmh-motion-pan-y, 3%), 0);
}
}
@keyframes nmh-zoom-in-left {
from {
transform: scale(1) translate3d(0, 0, 0);
}
to {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(calc(var(--nmh-motion-pan-x, 3%) * -1), 0, 0);
}
}
@keyframes nmh-zoom-in-right {
from {
transform: scale(1) translate3d(0, 0, 0);
}
to {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(var(--nmh-motion-pan-x, 3%), 0, 0);
}
}
@keyframes nmh-zoom-out-left {
from {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(var(--nmh-motion-pan-x, 3%), 0, 0);
}
to {
transform: scale(1) translate3d(0, 0, 0);
}
}
@keyframes nmh-zoom-out-right {
from {
transform: scale(var(--nmh-motion-scale, 1.1)) translate3d(calc(var(--nmh-motion-pan-x, 3%) * -1), 0, 0);
}
to {
transform: scale(1) translate3d(0, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.nmh-image-motion,
.nmh-image-motion.is-animating {
animation: none !important;
transform: none !important;
will-change: auto !important;
}
.nmh-content-animation,
.nmh-content-animation.is-content-animating,
.nmh-content-animation.is-content-animating .nmh-title,
.nmh-content-animation.is-content-animating .nmh-subtitle,
.nmh-content-animation.is-content-animating .nmh-btn {
animation: none !important;
transform: none !important;
opacity: 1 !important;
will-change: auto !important;
}
}
.nmh-bg--youtube-thumb { }
.nmh-youtube {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
.nmh-youtube iframe {
width: 100%;
height: 100%;
border: 0; }
.nmh-local-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: var(--nmh-video-fit, cover);
object-position: var(--nmh-video-position, center center);
z-index: 1;
} .nmh-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
padding: 2rem;
box-sizing: border-box;
pointer-events: none;
}
.nmh-overlay-background {
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--nmh-overlay-color, transparent);
opacity: var(--nmh-overlay-opacity, 0);
pointer-events: none;
}
.nmh-overlay-content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: inherit;
width: 100%;
max-width: var(--nmh-content-max-width, 800px);
gap: var(--nmh-content-gap, 0.75rem);
text-align: center;
box-sizing: border-box;
}
.nmh-overlay .nmh-btn {
pointer-events: auto;
} .nmh-overlay.nmh-content-left {
align-items: flex-start;
}
.nmh-overlay.nmh-content-center {
align-items: center;
}
.nmh-overlay.nmh-content-right {
align-items: flex-end;
}
.nmh-overlay.nmh-content-top {
justify-content: flex-start;
}
.nmh-overlay.nmh-content-middle {
justify-content: center;
}
.nmh-overlay.nmh-content-bottom {
justify-content: flex-end;
} .nmh-overlay.nmh-content-left .nmh-overlay-content {
align-items: flex-start;
}
.nmh-overlay.nmh-content-center .nmh-overlay-content {
align-items: center;
}
.nmh-overlay.nmh-content-right .nmh-overlay-content {
align-items: flex-end;
} .nmh-content-animation.is-content-animating:not(.nmh-content-stagger) {
will-change: transform, opacity;
animation-duration: var(--nmh-content-animation-duration, 800ms);
animation-delay: var(--nmh-content-animation-delay, 200ms);
animation-fill-mode: both;
animation-timing-function: ease-out;
animation-iteration-count: 1;
}
.nmh-content-animation.is-content-animating.nmh-content-animation-fade:not(.nmh-content-stagger) {
animation-name: nmh-content-fade;
}
.nmh-content-animation.is-content-animating.nmh-content-animation-fade-up:not(.nmh-content-stagger) {
animation-name: nmh-content-fade-up;
}
.nmh-content-animation.is-content-animating.nmh-content-animation-fade-down:not(.nmh-content-stagger) {
animation-name: nmh-content-fade-down;
}
.nmh-content-animation.is-content-animating.nmh-content-animation-fade-left:not(.nmh-content-stagger) {
animation-name: nmh-content-fade-left;
}
.nmh-content-animation.is-content-animating.nmh-content-animation-fade-right:not(.nmh-content-stagger) {
animation-name: nmh-content-fade-right;
}
.nmh-content-animation.is-content-animating.nmh-content-animation-zoom-in:not(.nmh-content-stagger) {
animation-name: nmh-content-zoom-in;
}
.nmh-content-animation.is-content-animating.nmh-content-animation-zoom-out:not(.nmh-content-stagger) {
animation-name: nmh-content-zoom-out;
} .nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-btn {
will-change: transform, opacity;
animation-duration: var(--nmh-content-animation-duration, 800ms);
animation-fill-mode: both;
animation-timing-function: ease-out;
animation-iteration-count: 1;
}
.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-title {
animation-delay: var(--nmh-content-animation-delay, 200ms);
}
.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-subtitle {
animation-delay: calc(var(--nmh-content-animation-delay, 200ms) + var(--nmh-content-stagger-delay, 150ms));
}
.nmh-content-animation.is-content-animating.nmh-content-stagger .nmh-btn {
animation-delay: calc(var(--nmh-content-animation-delay, 200ms) + (var(--nmh-content-stagger-delay, 150ms) * 2));
}
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade .nmh-btn {
animation-name: nmh-content-fade;
}
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-up .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-up .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-up .nmh-btn {
animation-name: nmh-content-fade-up;
}
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-down .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-down .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-down .nmh-btn {
animation-name: nmh-content-fade-down;
}
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-left .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-left .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-left .nmh-btn {
animation-name: nmh-content-fade-left;
}
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-right .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-right .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-fade-right .nmh-btn {
animation-name: nmh-content-fade-right;
}
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-in .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-in .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-in .nmh-btn {
animation-name: nmh-content-zoom-in;
}
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-out .nmh-title,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-out .nmh-subtitle,
.nmh-content-animation.is-content-animating.nmh-content-stagger.nmh-content-animation-zoom-out .nmh-btn {
animation-name: nmh-content-zoom-out;
}
@keyframes nmh-content-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes nmh-content-fade-up {
from {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes nmh-content-fade-down {
from {
opacity: 0;
transform: translate3d(0, -30px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes nmh-content-fade-left {
from {
opacity: 0;
transform: translate3d(30px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes nmh-content-fade-right {
from {
opacity: 0;
transform: translate3d(-30px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes nmh-content-zoom-in {
from {
opacity: 0;
transform: scale(0.92);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes nmh-content-zoom-out {
from {
opacity: 0;
transform: scale(1.08);
}
to {
opacity: 1;
transform: scale(1);
}
}
.nmh-title {
margin: 0 0 var(--nmh-title-spacing, 0);
color: #fff;
font-size: 2rem;
line-height: 1.2;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
max-width: 100%;
overflow-wrap: anywhere;
word-wrap: break-word;
}
.nmh-subtitle {
margin: 0 0 var(--nmh-subtitle-spacing, 0);
color: #fff;
font-size: 1rem;
line-height: 1.4;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
max-width: 600px;
width: 100%;
box-sizing: border-box;
overflow-wrap: anywhere;
word-wrap: break-word;
} .nmh-btn {
display: inline-block;
padding: 0.6em 1.2em;
background: #fff;
background-color: #fff;
color: #1d2327;
text-decoration: none;
border-radius: 4px;
border: 0 solid transparent;
font-weight: 600;
transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
box-sizing: border-box;
}
.nmh-btn:hover {
opacity: 0.95;
} .nmh-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--nmh-arrow-button-size, 44px);
height: var(--nmh-arrow-button-size, 44px);
z-index: 6;
cursor: pointer;
background: var(--nmh-arrow-bg, rgba(255, 255, 255, 0.3));
border: none;
border-radius: var(--nmh-arrow-radius, 50%);
opacity: var(--nmh-arrow-opacity, 1);
transition: background 0.2s, opacity 0.2s;
box-sizing: border-box;
}
.nmh-arrow:hover {
background: var(--nmh-arrow-bg-hover, rgba(255, 255, 255, 0.6));
}
.nmh-arrow::after {
content: '';
position: absolute;
top: 50%;
width: var(--nmh-arrow-size, 10px);
height: var(--nmh-arrow-size, 10px);
border-top: 2px solid var(--nmh-arrow-color, #1d2327);
border-right: 2px solid var(--nmh-arrow-color, #1d2327);
}
.nmh-arrow:hover::after {
border-top-color: var(--nmh-arrow-color-hover, var(--nmh-arrow-color, #1d2327));
border-right-color: var(--nmh-arrow-color-hover, var(--nmh-arrow-color, #1d2327));
}
.nmh-arrow-prev {
left: var(--nmh-arrow-offset, 16px);
}
.nmh-arrow-prev::after {
left: 50%;
margin-left: calc(var(--nmh-arrow-size, 10px) * -0.4);
transform: translateY(-50%) rotate(-135deg);
}
.nmh-arrow-next {
right: var(--nmh-arrow-offset, 16px);
}
.nmh-arrow-next::after {
right: 50%;
margin-right: calc(var(--nmh-arrow-size, 10px) * -0.6);
transform: translateY(-50%) rotate(45deg);
} .nmh-pagination {
position: absolute;
bottom: var(--nmh-dot-offset, 16px);
left: 0;
width: 100%;
z-index: 5;
display: flex;
justify-content: center;
gap: var(--nmh-dot-gap, 8px);
box-sizing: border-box;
padding: 0 72px;
}
.nmh-hero .nmh-pagination .swiper-pagination-bullet {
width: var(--nmh-dot-size, 10px);
height: var(--nmh-dot-size, 10px);
background: var(--nmh-dot-color, rgba(255, 255, 255, 0.5));
opacity: var(--nmh-dot-opacity, 1);
cursor: pointer;
border-radius: var(--nmh-dot-radius, 50%);
transition: background 0.2s, width 0.2s, height 0.2s, opacity 0.2s;
}
.nmh-hero .nmh-pagination .swiper-pagination-bullet:hover,
.nmh-hero .nmh-pagination .swiper-pagination-bullet-active {
background: var(--nmh-dot-active-color, #fff);
opacity: var(--nmh-dot-active-opacity, 1);
width: var(--nmh-dot-active-size, var(--nmh-dot-size, 10px));
height: var(--nmh-dot-active-size, var(--nmh-dot-size, 10px));
} .nmh-nav-fraction {
position: absolute;
bottom: var(--nmh-nav-fraction-offset-y, 16px);
z-index: 5;
display: inline-flex;
align-items: center;
gap: var(--nmh-nav-fraction-gap, 4px);
color: var(--nmh-nav-fraction-color, #fff);
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
box-sizing: border-box;
}
.nmh-nav-fraction--left {
left: var(--nmh-nav-fraction-offset-x, 24px);
}
.nmh-nav-fraction--center {
left: 50%;
transform: translateX(-50%);
}
.nmh-nav-fraction--right {
right: var(--nmh-nav-fraction-offset-x, 24px);
}
.nmh-nav-fraction-separator {
color: var(--nmh-nav-fraction-separator-color, var(--nmh-nav-fraction-color, #fff));
opacity: 0.8;
} .nmh-segmented-progress {
position: absolute;
bottom: var(--nmh-segment-offset-y, 16px);
z-index: 5;
display: flex;
align-items: center;
gap: var(--nmh-segment-gap, 4px);
width: var(--nmh-segment-width, 100%);
max-width: calc(100% - (var(--nmh-segment-offset-x, 24px) * 2));
box-sizing: border-box;
opacity: var(--nmh-segment-opacity, 1);
pointer-events: none;
}
.nmh-segmented-progress--left {
left: var(--nmh-segment-offset-x, 24px);
}
.nmh-segmented-progress--center {
left: 50%;
transform: translateX(-50%);
}
.nmh-segmented-progress--right {
right: var(--nmh-segment-offset-x, 24px);
}
.nmh-segment {
appearance: none;
-webkit-appearance: none;
flex: 1 1 0;
min-width: 0;
height: var(--nmh-segment-height, 3px);
margin: 0;
padding: 0;
border: 0;
border-radius: var(--nmh-segment-radius, 999px);
background: var(--nmh-segment-track, rgba(255, 255, 255, 0.25));
overflow: hidden;
font: inherit;
color: inherit;
pointer-events: auto;
cursor: pointer;
display: block;
box-sizing: border-box;
}
span.nmh-segment {
cursor: default;
pointer-events: none;
}
.nmh-segment:focus {
outline: none;
}
.nmh-segment:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.nmh-segment__fill {
display: block;
width: 100%;
height: 100%;
background: var(--nmh-segment-fill, #fff);
border-radius: inherit;
transform-origin: left center;
transform: scaleX(0);
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.nmh-segment__fill {
will-change: auto;
}
} .nmh-progress {
position: absolute;
left: 0;
right: 0;
z-index: 4;
display: flex;
align-items: center;
gap: var(--nmh-progress-gap, 12px);
width: auto;
max-width: 100%;
box-sizing: border-box;
padding-left: var(--nmh-progress-offset-x, 24px);
padding-right: var(--nmh-progress-offset-x, 24px);
pointer-events: none;
}
.nmh-progress--top {
top: var(--nmh-progress-offset-y, 16px);
}
.nmh-progress--bottom {
bottom: var(--nmh-progress-offset-y, 16px);
}
.nmh-progress-bar {
flex: 1 1 auto;
min-width: 0;
width: var(--nmh-progress-width, 100%);
max-width: 100%;
height: var(--nmh-progress-height, 3px);
border-radius: var(--nmh-progress-radius, 999px);
background: var(--nmh-progress-track-color, rgba(255, 255, 255, 0.25));
opacity: var(--nmh-progress-track-opacity, 1);
overflow: hidden;
}
.nmh-progress-bar__fill {
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--nmh-progress-color, #fff);
transform-origin: left center;
transform: scaleX(var(--nmh-progress-value, 0));
will-change: transform;
}
.nmh-progress-fraction {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.25em;
color: var(--nmh-progress-fraction-color, #fff);
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.nmh-progress-separator {
color: var(--nmh-progress-separator-color, var(--nmh-progress-fraction-color, #fff));
opacity: 0.8;
}
.nmh-progress--mode-fraction {
justify-content: flex-end;
}
@media (prefers-reduced-motion: reduce) {
.nmh-progress-bar__fill {
will-change: auto;
}
} .nmh-sound-toggle-wrap {
position: absolute;
z-index: 7;
pointer-events: none;
}
.nmh-sound-toggle-wrap[hidden] {
display: none !important;
}
.nmh-hero .nmh-sound-toggle {
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--nmh-sound-size, 44px);
height: var(--nmh-sound-size, 44px);
padding: 0;
margin: 0;
border: none;
border-color: transparent !important;
border-radius: var(--nmh-sound-radius, 999px);
background-color: var(--nmh-sound-bg, rgba(0, 0, 0, 0.55)) !important;
color: var(--nmh-sound-color, #fff) !important;
cursor: pointer;
box-sizing: border-box;
transition: background-color 0.2s, color 0.2s, transform 0.15s, opacity 0.2s;
}
.nmh-hero .nmh-sound-toggle:hover {
background-color: var(--nmh-sound-bg-hover, rgba(0, 0, 0, 0.72)) !important;
color: var(--nmh-sound-color-hover, var(--nmh-sound-color, #fff)) !important;
}
.nmh-hero .nmh-sound-toggle:focus,
.nmh-hero .nmh-sound-toggle:active,
.nmh-hero .nmh-sound-toggle:focus-visible {
background-color: var(--nmh-sound-bg, rgba(0, 0, 0, 0.55)) !important;
color: var(--nmh-sound-color, #fff) !important;
}
.nmh-hero .nmh-sound-toggle:focus {
outline: none;
}
.nmh-hero .nmh-sound-toggle:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.nmh-hero .nmh-sound-toggle:hover:focus,
.nmh-hero .nmh-sound-toggle:hover:active,
.nmh-hero .nmh-sound-toggle:hover:focus-visible {
background-color: var(--nmh-sound-bg-hover, rgba(0, 0, 0, 0.72)) !important;
color: var(--nmh-sound-color-hover, var(--nmh-sound-color, #fff)) !important;
}
.nmh-hero .nmh-sound-toggle svg,
.nmh-hero .nmh-sound-toggle svg * {
color: inherit;
}
.nmh-sound-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.nmh-sound-icon[hidden] {
display: none !important;
}
.nmh-sound-svg {
width: var(--nmh-sound-icon-size, 22px);
height: var(--nmh-sound-icon-size, 22px);
display: block;
}
.nmh-sound-top-left {
top: var(--nmh-sound-offset-y, 24px);
left: var(--nmh-sound-offset-x, 24px);
}
.nmh-sound-top-center {
top: var(--nmh-sound-offset-y, 24px);
left: 50%;
transform: translateX(-50%);
}
.nmh-sound-top-right {
top: var(--nmh-sound-offset-y, 24px);
right: var(--nmh-sound-offset-x, 24px);
}
.nmh-sound-center-left {
top: 50%;
left: var(--nmh-sound-offset-x, 24px);
transform: translateY(-50%);
}
.nmh-sound-center-right {
top: 50%;
right: var(--nmh-sound-offset-x, 24px);
transform: translateY(-50%);
}
.nmh-sound-bottom-left {
bottom: var(--nmh-sound-offset-y, 24px);
left: var(--nmh-sound-offset-x, 24px);
}
.nmh-sound-bottom-center {
bottom: var(--nmh-sound-offset-y, 24px);
left: 50%;
transform: translateX(-50%);
}
.nmh-sound-bottom-right {
bottom: var(--nmh-sound-offset-y, 24px);
right: var(--nmh-sound-offset-x, 24px);
} .nmh-play-pause-wrap {
position: absolute;
z-index: 8;
pointer-events: none;
opacity: var(--nmh-play-opacity, 1);
}
.nmh-hero .nmh-play-pause {
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--nmh-play-size, 44px);
height: var(--nmh-play-size, 44px);
padding: 0;
margin: 0;
border: none;
border-color: transparent !important;
border-radius: var(--nmh-play-radius, 999px);
background-color: var(--nmh-play-bg, rgba(0, 0, 0, 0.55)) !important;
color: var(--nmh-play-color, #fff) !important;
cursor: pointer;
box-sizing: border-box;
transition: background-color 0.2s, color 0.2s, transform 0.15s, opacity 0.2s;
}
.nmh-hero .nmh-play-pause:hover {
background-color: var(--nmh-play-bg-hover, rgba(0, 0, 0, 0.72)) !important;
color: var(--nmh-play-color-hover, var(--nmh-play-color, #fff)) !important;
}
.nmh-hero .nmh-play-pause:focus,
.nmh-hero .nmh-play-pause:active,
.nmh-hero .nmh-play-pause:focus-visible {
background-color: var(--nmh-play-bg, rgba(0, 0, 0, 0.55)) !important;
color: var(--nmh-play-color, #fff) !important;
}
.nmh-hero .nmh-play-pause:focus {
outline: none;
}
.nmh-hero .nmh-play-pause:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.nmh-hero .nmh-play-pause:hover:focus,
.nmh-hero .nmh-play-pause:hover:active,
.nmh-hero .nmh-play-pause:hover:focus-visible {
background-color: var(--nmh-play-bg-hover, rgba(0, 0, 0, 0.72)) !important;
color: var(--nmh-play-color-hover, var(--nmh-play-color, #fff)) !important;
}
.nmh-hero .nmh-play-pause svg,
.nmh-hero .nmh-play-pause svg * {
color: inherit;
}
.nmh-play-pause-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.nmh-play-pause-icon[hidden] {
display: none !important;
}
.nmh-play-pause-svg {
width: var(--nmh-play-icon-size, 22px);
height: var(--nmh-play-icon-size, 22px);
display: block;
}
.nmh-play-pause-top-left {
top: var(--nmh-play-offset-y, 24px);
left: var(--nmh-play-offset-x, 24px);
}
.nmh-play-pause-top-center {
top: var(--nmh-play-offset-y, 24px);
left: 50%;
transform: translateX(-50%);
}
.nmh-play-pause-top-right {
top: var(--nmh-play-offset-y, 24px);
right: var(--nmh-play-offset-x, 24px);
}
.nmh-play-pause-center-left {
top: 50%;
left: var(--nmh-play-offset-x, 24px);
transform: translateY(-50%);
}
.nmh-play-pause-center-right {
top: 50%;
right: var(--nmh-play-offset-x, 24px);
transform: translateY(-50%);
}
.nmh-play-pause-bottom-left {
bottom: var(--nmh-play-offset-y, 24px);
left: var(--nmh-play-offset-x, 24px);
}
.nmh-play-pause-bottom-center {
bottom: var(--nmh-play-offset-y, 24px);
left: 50%;
transform: translateX(-50%);
}
.nmh-play-pause-bottom-right {
bottom: var(--nmh-play-offset-y, 24px);
right: var(--nmh-play-offset-x, 24px);
} .nmh-yt-play-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
pointer-events: auto;
}
.nmh-yt-play-btn {
padding: 0.6em 1.2em;
background: #fff;
color: #1d2327;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
pointer-events: auto;
transition: opacity 0.2s;
}
.nmh-yt-play-btn:hover {
opacity: 0.9;
}
.nmh-hero[data-hide-overlay="1"] .nmh-overlay {
display: none !important;
}
.nmh-tv-mode .nmh-youtube iframe {
pointer-events: none !important;
}
.nmh-yt-blocked-message {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
pointer-events: none;
color: #fff;
font-size: 1rem;
} .nmh-hero--empty {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--nmh-min-height, 320px);
height: var(--nmh-height, 70vh);
background: #1d2327;
color: #fff;
box-sizing: border-box;
}
.nmh-empty-state {
max-width: 28rem;
padding: 2rem;
text-align: center;
box-sizing: border-box;
}
.nmh-empty-state__title {
margin: 0 0 0.5rem;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
}
.nmh-empty-state__text {
margin: 0;
font-size: 0.95rem;
opacity: 0.8;
line-height: 1.45;
} @media (max-width: 767px) {
.nmh-overlay {
padding: 1.25rem;
}
.nmh-overlay-content {
max-width: 100%;
}
.nmh-title {
font-size: 1.5rem;
}
.nmh-arrow-prev {
left: max(8px, var(--nmh-arrow-offset, 16px));
}
.nmh-arrow-next {
right: max(8px, var(--nmh-arrow-offset, 16px));
}
.nmh-pagination {
padding: 0 56px;
}
.nmh-sound-bottom-center,
.nmh-sound-top-center { }
}