.njt-nofi-container {
z-index: 10000;
width: 100%;
top: 0;
left: 0;
}
.njt-nofi-container[data-position='fixed'],
.njt-nofi-container:not([data-position]) {
position: fixed;
}
.njt-nofi-container[data-position='absolute'] {
position: absolute;
} .njt-nofi-container[data-placement='bottom'] {
top: auto;
bottom: 0;
} .njt-nofi-stack {
z-index: 10000;
left: 0;
right: 0;
display: flex;
flex-direction: column;
}
.njt-nofi-stack[data-position='fixed'] {
position: fixed;
}
.njt-nofi-stack[data-position='absolute'] {
position: absolute;
}
.njt-nofi-stack[data-placement='top'] {
top: 0;
}
.njt-nofi-stack[data-placement='bottom'] {
bottom: 0;
flex-direction: column-reverse;
} .njt-nofi-stack .njt-nofi-container {
position: static;
top: auto;
bottom: auto;
} .njt-nofi-stack[data-placement='top']
> .njt-nofi-container-content
+ .njt-nofi-container-content {
border-top: 1px solid rgba( 0, 0, 0, 0.12 );
}
.njt-nofi-stack[data-placement='bottom']
> .njt-nofi-container-content
+ .njt-nofi-container-content {
border-bottom: 1px solid rgba( 0, 0, 0, 0.12 );
} .njt-nofi-container-content {
opacity: 0;
pointer-events: none;
}
.njt-nofi-container-content.njt-nofi-visible {
opacity: 1;
pointer-events: auto;
} .njt-nofi-notification-bar {
position: relative;
display: flex;
align-items: center;
padding: 0 10px;
width: 100%;
box-sizing: border-box;
transform: translateY( -100% ); background: var( --njt-bar-bg, #9af4cf );
color: var( --njt-bar-color, #1919cf );
} @keyframes njt-nofi-slide-in {
from {
opacity: 0;
transform: translateY( -100% );
}
to {
opacity: 1;
transform: translateY( 0 );
}
}
.njt-nofi-container-content.njt-nofi-visible .njt-nofi-notification-bar {
animation: njt-nofi-slide-in 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
} .njt-nofi-container[data-placement='bottom'] .njt-nofi-notification-bar {
transform: translateY( 100% );
}
@keyframes njt-nofi-slide-in-bottom {
from {
opacity: 0;
transform: translateY( 100% );
}
to {
opacity: 1;
transform: translateY( 0 );
}
}
.njt-nofi-container-content.njt-nofi-visible
.njt-nofi-container[data-placement='bottom'] .njt-nofi-notification-bar {
animation-name: njt-nofi-slide-in-bottom;
} .njt-nofi-container-content.njt-nofi-collapsed .njt-nofi-content {
display: none;
} .njt-nofi-content {
width: 100%;
margin: auto;
padding: 10px 50px;
box-sizing: border-box;
align-items: center;
flex-wrap: wrap;
gap: 16px; }  .njt-nofi-content[data-layout="centered"] {
justify-content: center;
}
.njt-nofi-content[data-layout="centered"] .njt-nofi-text {
text-align: center;
} .njt-nofi-content[data-layout="text-left"] {
justify-content: flex-start;
}
.njt-nofi-content[data-layout="text-left"] .njt-nofi-text {
margin-right: auto;
text-align: left;
} .njt-nofi-content[data-layout="three-zone"] {
justify-content: space-between;
}
.njt-nofi-content[data-layout="three-zone"] .njt-nofi-text {
text-align: left;
} .njt-nofi-content[data-layout="split"] {
justify-content: flex-start;
}
.njt-nofi-content[data-layout="split"] .njt-nofi-text {
text-align: left;
}
.njt-nofi-content[data-layout="split"] .njt-nofi-button {
margin-left: auto;
} .njt-nofi-content[data-layout="content-left"] {
justify-content: flex-start;
}
.njt-nofi-content[data-layout="content-left"] .njt-nofi-text {
text-align: left;
} .njt-nofi-content[data-layout="content-right"] {
justify-content: flex-end;
}
.njt-nofi-content[data-layout="content-right"] .njt-nofi-text {
text-align: right;
} .njt-nofi-content[data-layout="hero"] {
flex-direction: column;
align-items: center;
justify-content: center;
}
.njt-nofi-content[data-layout="hero"] .njt-nofi-text {
text-align: center;
}
.njt-nofi-content[data-layout="hero"] .njt-nofi-countdown {
transform: scale(1.3);
transform-origin: center;
margin: 8px 0;
}
.njt-nofi-content-desktop {
display: flex;
}
.njt-nofi-content-mobile {
display: none;
} .njt-nofi-content-deskop {
display: flex;
} .diplay-device-deskop,
.diplay-device-mobile { } .njt-nofi-text {
color: inherit;
}
.njt-nofi-button {
min-width: fit-content;
} .njt-nofi-button-text {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 8px 16px;
border-radius: 6px;
font-weight: 500; appearance: none;
-webkit-appearance: none;
border: 0;
margin: 0;
cursor: pointer;
font-family: inherit;
font-size: inherit; transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.njt-nofi-button-text:hover {
filter: brightness( 0.92 );
}
.njt-nofi-button-text:active {
filter: brightness( 0.88 );
}
.njt-nofi-button-text:focus-visible {
outline: 2px solid var( --njt-btn-bg, #1919cf );
outline-offset: 2px;
} .njt-nofi-button-text[class*='njt-nofi-anim-'] {
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
will-change: transform;
}
.njt-nofi-anim-wobble {
animation-name: njt-nofi-anim-wobble;
}
.njt-nofi-anim-shake {
animation-name: njt-nofi-anim-shake;
}
.njt-nofi-anim-bounce {
animation-name: njt-nofi-anim-bounce;
}
.njt-nofi-anim-pulse {
animation-name: njt-nofi-anim-pulse;
}
.njt-nofi-anim-swing {
animation-name: njt-nofi-anim-swing;
transform-origin: top center;
}
.njt-nofi-anim-jello {
animation-name: njt-nofi-anim-jello;
}
.njt-nofi-anim-tada {
animation-name: njt-nofi-anim-tada;
}
.njt-nofi-anim-rubber-band {
animation-name: njt-nofi-anim-rubber-band;
}
.njt-nofi-anim-heartbeat {
animation-name: njt-nofi-anim-heartbeat;
}
.njt-nofi-anim-flash {
animation-name: njt-nofi-anim-flash;
}
.njt-nofi-anim-blink {
animation-name: njt-nofi-anim-blink;
}
.njt-nofi-anim-vibrate {
animation-name: njt-nofi-anim-vibrate;
}
.njt-nofi-anim-pop {
animation-name: njt-nofi-anim-pop;
}
.njt-nofi-anim-bounce-in {
animation-name: njt-nofi-anim-bounce-in;
}
@keyframes njt-nofi-anim-wobble {
0%, 20%, 100% { transform: none; }
3% { transform: translateX( -12px ) rotate( -5deg ); }
6% { transform: translateX( 9px ) rotate( 3deg ); }
9% { transform: translateX( -7px ) rotate( -3deg ); }
12% { transform: translateX( 5px ) rotate( 2deg ); }
15% { transform: translateX( -3px ) rotate( -1deg ); }
}
@keyframes njt-nofi-anim-shake {
0%, 20%, 100% { transform: translateX( 0 ); }
3%, 9%, 15% { transform: translateX( -8px ); }
6%, 12% { transform: translateX( 8px ); }
}
@keyframes njt-nofi-anim-bounce {
0%, 20%, 100% { transform: translateY( 0 ); }
4% { transform: translateY( -12px ); }
8% { transform: translateY( 0 ); }
12% { transform: translateY( -6px ); }
16% { transform: translateY( 0 ); }
}
@keyframes njt-nofi-anim-pulse {
0%, 20%, 100% { transform: scale( 1 ); }
10% { transform: scale( 1.08 ); }
}
@keyframes njt-nofi-anim-swing {
0%, 20%, 100% { transform: rotate( 0 ); }
4% { transform: rotate( 8deg ); }
8% { transform: rotate( -6deg ); }
12% { transform: rotate( 4deg ); }
16% { transform: rotate( -2deg ); }
}
@keyframes njt-nofi-anim-jello {
0%, 20%, 100% { transform: none; }
3% { transform: skewX( -10deg ) skewY( -10deg ); }
6% { transform: skewX( 8deg ) skewY( 8deg ); }
9% { transform: skewX( -5deg ) skewY( -5deg ); }
12% { transform: skewX( 3deg ) skewY( 3deg ); }
15% { transform: skewX( -1deg ) skewY( -1deg ); }
}
@keyframes njt-nofi-anim-tada {
0%, 20%, 100% { transform: scale( 1 ) rotate( 0 ); }
2%, 4% { transform: scale( 0.95 ) rotate( -3deg ); }
6%, 10%, 14% { transform: scale( 1.1 ) rotate( 3deg ); }
8%, 12% { transform: scale( 1.1 ) rotate( -3deg ); }
}
@keyframes njt-nofi-anim-rubber-band {
0%, 20%, 100% { transform: scale3d( 1, 1, 1 ); }
3% { transform: scale3d( 1.25, 0.75, 1 ); }
6% { transform: scale3d( 0.75, 1.25, 1 ); }
9% { transform: scale3d( 1.15, 0.85, 1 ); }
12% { transform: scale3d( 0.95, 1.05, 1 ); }
15% { transform: scale3d( 1.05, 0.95, 1 ); }
18% { transform: scale3d( 1, 1, 1 ); }
}
@keyframes njt-nofi-anim-heartbeat {
0%, 20%, 100% { transform: scale( 1 ); }
3% { transform: scale( 1.15 ); }
6% { transform: scale( 1 ); }
9% { transform: scale( 1.15 ); }
12% { transform: scale( 1 ); }
} @keyframes njt-nofi-anim-flash {
0%, 20%, 100% { opacity: 1; }
5%, 15% { opacity: 0; }
10% { opacity: 1; }
}
@keyframes njt-nofi-anim-blink {
0%, 3%, 9%, 15%, 20%, 100% { opacity: 1; }
6%, 12%, 18% { opacity: 0; }
}
@keyframes njt-nofi-anim-vibrate {
0%, 20%, 100% { transform: translate( 0 ); }
2%, 6%, 10%, 14% { transform: translate( -2px, 2px ); }
4%, 8%, 12%, 16% { transform: translate( 2px, -2px ); }
}
@keyframes njt-nofi-anim-pop {
0%, 20%, 100% { transform: scale( 1 ); }
5% { transform: scale( 0.92 ); }
10% { transform: scale( 1.12 ); }
15% { transform: scale( 1 ); }
}
@keyframes njt-nofi-anim-bounce-in {
0%, 20%, 100% { transform: scale( 1 ); opacity: 1; }
2% { transform: scale( 0.3 ); opacity: 0; }
8% { transform: scale( 1.1 ); opacity: 1; }
12% { transform: scale( 0.9 ); }
16% { transform: scale( 1.03 ); }
18% { transform: scale( 1 ); }
} .njt-nofi-hover-grow:hover {
transform: scale( 1.05 );
}
.njt-nofi-hover-shrink:hover {
transform: scale( 0.95 );
}
.njt-nofi-hover-lift:hover {
transform: translateY( -3px );
box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.18 );
}
.njt-nofi-hover-glow:hover {
filter: brightness( 1.05 ) drop-shadow( 0 0 8px var( --njt-btn-bg, #1919cf ) );
}
.njt-nofi-hover-press:hover {
transform: translateY( 1px );
}
.njt-nofi-hover-press:active {
transform: translateY( 2px ) scale( 0.98 );
}
.njt-nofi-hover-shadow:hover {
box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.22 );
}
.njt-nofi-hover-color-shift:hover {
filter: hue-rotate( 25deg ) brightness( 1.05 );
} .njt-nofi-hover-slide-fill {
position: relative;
overflow: hidden;
}
.njt-nofi-hover-slide-fill::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: rgba( 255, 255, 255, 0.2 );
transform: translateX( -101% );
transition: transform 0.35s ease;
}
.njt-nofi-hover-slide-fill:hover::before {
transform: translateX( 0 );
} .njt-nofi-close,
.njt-nofi-toggle {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border: none;
background: #0000002e;
border-radius: 50%;
cursor: pointer;
color: inherit;
padding: 0;
transition: transform 0.5s, background 0.2s ease;
}
.njt-nofi-close:hover,
.njt-nofi-toggle:hover {
transform: scale( 1.1 );
}
.njt-nofi-close:focus,
.njt-nofi-toggle:focus,
.njt-nofi-close:focus-visible,
.njt-nofi-toggle:focus-visible {
outline: 2px solid #4a90e2;
outline-offset: 2px;
}
.njt-nofi-close-icon {
pointer-events: none;
width: 11px;
height: 11px;
} .njt-nofi-container-content.njt-nofi-collapsed .njt-nofi-toggle {
transform: rotate( 45deg );
}
.njt-nofi-container-content.njt-nofi-collapsed .njt-nofi-toggle:hover {
transform: rotate( 45deg ) scale( 1.1 );
}  .njt-nofi-nav {
position: absolute;
top: 0;
bottom: 0;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: transparent !important;
color: inherit !important;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s ease, background 0.2s ease;
z-index: 2;
}
.njt-nofi-nav-prev {
left: 0;
}
.njt-nofi-nav-next {
right: 0;
}
.njt-nofi-nav:hover,
.njt-nofi-nav:focus-visible {
opacity: 1;
} .njt-nofi-nav-prev:hover {
background: linear-gradient( to right, rgba( 127, 127, 127, 0.16 ), transparent );
}
.njt-nofi-nav-next:hover {
background: linear-gradient( to left, rgba( 127, 127, 127, 0.16 ), transparent );
}
.njt-nofi-nav:focus-visible { outline: 2px solid #4a90e2;
outline-offset: -3px;
}
.njt-nofi-nav:focus {
outline: none;
}
.njt-nofi-nav-icon {
pointer-events: none;
width: 22px;
height: 22px;
} .njt-nofi-has-nav .njt-nofi-content {
padding-left: 52px;
padding-right: 52px;
} .njt-nofi-has-nav .njt-nofi-close,
.njt-nofi-has-nav .njt-nofi-toggle {
margin-right: 52px;
} .njt-nofi-nav-slide-next .njt-nofi-container,
.njt-nofi-nav-slide-prev .njt-nofi-container {
overflow: hidden;
}
@keyframes njt-nofi-bar-in-right {
from {
opacity: 0;
transform: translateX( 100% );
}
to {
opacity: 1;
transform: translateX( 0 );
}
}
@keyframes njt-nofi-bar-in-left {
from {
opacity: 0;
transform: translateX( -100% );
}
to {
opacity: 1;
transform: translateX( 0 );
}
}
.njt-nofi-container-content.njt-nofi-visible.njt-nofi-nav-slide-next
.njt-nofi-notification-bar {
animation-name: njt-nofi-bar-in-right !important;
}
.njt-nofi-container-content.njt-nofi-visible.njt-nofi-nav-slide-prev
.njt-nofi-notification-bar {
animation-name: njt-nofi-bar-in-left !important;
}
@media only screen and (max-width: 480px) {
.njt-nofi-nav {
width: 40px;
}
.njt-nofi-nav-icon {
width: 20px;
height: 20px;
}
.njt-nofi-has-nav .njt-nofi-content {
padding-left: 44px;
padding-right: 44px;
}
.njt-nofi-has-nav .njt-nofi-close,
.njt-nofi-has-nav .njt-nofi-toggle {
margin-right: 44px;
}
} .admin-bar .njt-nofi-container[data-position='fixed'],
.admin-bar .njt-nofi-container[data-position='absolute'] {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .njt-nofi-container[data-position='fixed'],
.admin-bar .njt-nofi-container[data-position='absolute'] {
top: 46px;
}
}  .admin-bar .njt-nofi-container[data-placement='bottom'] {
top: auto;
bottom: 0;
} .admin-bar .njt-nofi-stack[data-placement='top'] {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .njt-nofi-stack[data-placement='top'] {
top: 46px;
}
} @media only screen and (max-width: 480px) {
.njt-nofi-content {
padding: 10px 20px; } .njt-nofi-has-mobile .njt-nofi-content-desktop {
display: none;
}
.njt-nofi-content-mobile {
display: flex;
}
} .customize-partial-edit-shortcuts-shown
.njt-nofi-container
.customize-partial-edit-shortcut-button {
left: 5px;
top: 10px;
}
.customize-partial-edit-shortcuts-shown
.njt-nofi-container
.customize-partial-edit-shortcut {
position: inherit;
}
.njt-nofi-container .customize-partial-refreshing {
opacity: 1;
transition: opacity 0.25s;
cursor: progress;
} @media (prefers-reduced-motion: reduce) {
.njt-nofi-close,
.njt-nofi-toggle,
.njt-nofi-button-text,
.njt-nofi-nav {
transition: none !important;
} .njt-nofi-notification-bar,
.njt-nofi-container-content.njt-nofi-visible.njt-nofi-nav-slide-next
.njt-nofi-notification-bar,
.njt-nofi-container-content.njt-nofi-visible.njt-nofi-nav-slide-prev
.njt-nofi-notification-bar {
transform: none !important;
animation: none !important;
} .njt-nofi-button-text[class*='njt-nofi-anim-'] {
animation: none !important;
}
.njt-nofi-button-text[class*='njt-nofi-hover-'] {
transition: none !important;
}
.njt-nofi-button-text[class*='njt-nofi-hover-']:hover,
.njt-nofi-button-text[class*='njt-nofi-hover-']:active {
transform: none !important;
}
.njt-nofi-hover-slide-fill::before {
display: none !important;
}
} .njt-nofi-countdown {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 4px;
color: inherit;
line-height: 1;
font-variant-numeric: tabular-nums;
} .njt-nofi-countdown.is-expired {
display: none;
}
.njt-nofi-cd-unit {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
position: relative;
}
.njt-nofi-cd-num {
font-weight: 700;
font-size: 1.15em;
font-variant-numeric: tabular-nums;
}
.njt-nofi-cd-label {
font-size: 0.62em;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.8;
} .njt-nofi-countdown--boxes .njt-nofi-cd-unit {
min-width: 2.4em;
padding: 4px 8px;
border: 1px solid currentColor;
border-radius: 6px;
background: color-mix( in srgb, currentColor 12%, transparent );
} .njt-nofi-countdown--flip .njt-nofi-cd-unit {
min-width: 2.4em;
padding: 4px 8px;
border-radius: 6px;
background: color-mix( in srgb, currentColor 16%, transparent );
}
.njt-nofi-countdown--flip .njt-nofi-cd-num {
display: inline-block;
transform-origin: center;
backface-visibility: hidden;
}
.njt-nofi-countdown--flip .njt-nofi-cd-num.is-flipping {
animation: njt-nofi-cd-flip 0.4s ease;
}
@keyframes njt-nofi-cd-flip {
0% {
transform: rotateX( 0deg );
}
50% {
transform: rotateX( -90deg );
opacity: 0.4;
}
100% {
transform: rotateX( 0deg );
}
} .njt-nofi-countdown--circular .njt-nofi-cd-ring {
width: 44px;
height: 44px;
transform: rotate( -90deg );
}
.njt-nofi-countdown--circular .njt-nofi-cd-ring-track {
stroke: currentColor;
stroke-width: 3;
opacity: 0.25;
}
.njt-nofi-countdown--circular .njt-nofi-cd-ring-fill {
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 100.53;
stroke-dashoffset: calc( 100.53 * ( 1 - var( --cd-progress, 1 ) ) );
transition: stroke-dashoffset 0.3s linear;
}
.njt-nofi-countdown--circular .njt-nofi-cd-num {
position: absolute;
top: 0;
left: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85em;
}
.njt-nofi-countdown--circular .njt-nofi-cd-label {
margin-top: 2px;
} .njt-nofi-countdown--text {
gap: 7px;
}
.njt-nofi-countdown--text .njt-nofi-cd-unit {
flex-direction: row;
align-items: baseline;
gap: 3px;
}
.njt-nofi-countdown--text .njt-nofi-cd-num {
font-size: 1em;
font-weight: 700;
}
.njt-nofi-countdown--text .njt-nofi-cd-label {
font-size: 0.95em;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
opacity: 0.9;
} @media (prefers-reduced-motion: reduce) {
.njt-nofi-countdown--flip .njt-nofi-cd-num.is-flipping {
animation: none !important;
}
.njt-nofi-countdown--circular .njt-nofi-cd-ring-fill {
transition: none !important;
}
} @media only screen and (max-width: 480px) {
.njt-nofi-countdown {
gap: 5px;
}
.njt-nofi-countdown--boxes .njt-nofi-cd-unit,
.njt-nofi-countdown--flip .njt-nofi-cd-unit {
min-width: 2em;
padding: 3px 5px;
}
.njt-nofi-countdown--circular .njt-nofi-cd-ring,
.njt-nofi-countdown--circular .njt-nofi-cd-num {
width: 36px;
height: 36px;
}
}