:root{
--pml-bg:#02050a;
--pml-bg-deep:#181818;
--pml-bg-soft:#1c1a1a;
--pml-card:#073438;
--pml-card-2:#03382d;
--pml-border:rgba(255,255,255,.11);
--pml-text:#ffffff;
--pml-muted:#9bb6d4;
--pml-muted-2:#6f8ead;
--pml-blue:#0084ff;
--pml-blue-2:#005eff;
--pml-cyan:#15bccf;
--pml-gold:#ffa900;
--pml-gold-2:#ff7a18;
--pml-gradient:linear-gradient(116.85deg,#ffa900 0%,#0084ff 100%);
--pml-gradient-blue:linear-gradient(135deg,#005eff 0%,#00d4ff 100%);
--pml-gradient-gold:linear-gradient(135deg,#ffa900 0%,#ff7a18 100%);
--pml-radius:24px;
--pml-shadow:0 26px 80px rgba(0,0,0,.36);
--pml-font:"EnoFlix Sans","EnoFlix Core","Inter","Poppins","Open Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--pml-spotlight-card-height:305px;
--pml-spotlight-slide-width: 245px;
--pml-spotlight-card-ratio: 3 / 4;
--pml-spotlight-card-aspect-ratio: 2 / 3;
--pml-spotlight-card-radius: 14px;
--pml-spotlight-card-gap: 22px;
--pml-modal-width:940px;
--pml-modal-radius:26px;
--pml-modal-video-max-height:530px;
--eno-page-background: #000000;
--eno-bg: #02050a;
--eno-bg-soft: #07101c;
--eno-bg-card: rgba(11, 20, 34, 0.76);
--eno-surface: #161616;
--eno-surface-soft: #232323;
--eno-surface-hover: #414141;
--eno-text: #ffffff;
--eno-text-soft: rgba(255, 255, 255, 0.72);
--eno-text-muted: rgba(255, 255, 255, 0.52);
--eno-primary: #1687ff;
--eno-primary-hover: #3b9cff;
--eno-primary-active: #0a70d8;
--eno-secondary: #7c4dff;
--eno-accent: #00d2ff;
--eno-error: #ff5c67;
--eno-success: #35c985;
--eno-border: rgba(255, 255, 255, 0.16);
--eno-border-mule: rgba(255, 255, 255, 0.26);
--eno-border-hover: rgba(255, 255, 255, 0.55);
--eno-focus: #ffffff;
--eno-radius-sm: 0.375rem;
--eno-radius-md: 0.5rem;
--eno-radius-lg: 1rem;
--eno-radius-pill: 999px;
--eno-shadow-button: 0 12px 32px rgba(0, 116, 255, 0.3);
--eno-shadow-header: 0 10px 30px rgba(0, 0, 0, 0.15);
--eno-duration-fast: 180ms;
--eno-duration: 250ms;
--eno-duration-slow: 500ms;
--eno-transition-fast: 160ms ease;
--eno-transition-base: 260ms ease;
--eno-ease: cubic-bezier(0.32, 0.94, 0.6, 1);
--eno-input-bg: rgba(8, 15, 27, 0.76);
--eno-input-border: rgba(255, 255, 255, 0.38);
--eno-input-error: #ff5d68;
--eno-input-success: #36d98a;
--eno-container: 120rem;
--eno-container-width: 120rem;
--eno-header-height: 7.5rem;
}
*{
box-sizing:border-box;
}
html{
/*width: 100%;
min-height: 100%;*/
scroll-behavior:smooth;
/*background: var(--eno-bg);*/
}
/*html.pml-loading .pml-app{
opacity:0;
}
html.pml-ready .pml-app{
opacity:1;
transition:opacity .22s ease;
}*/
/* =========================================================
APPLICATION VISIBILITY
---------------------------------------------------------
Never hide the entire page while API configuration loads.
========================================================= */
html.pml-loading .pml-app,
html.pml-ready .pml-app {
opacity: 1;
visibility: visible;
}
body{
width: 100%;
min-height: 100%;
margin:0;
background:var(--pml-bg-deep);
color:var(--pml-text);
font-family:var(--pml-font);
overflow-x:hidden;
font-size: 16px;
line-height: 1.5;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.pml-lock-open,
body.pml-preview-open{
overflow:hidden;
}
a{
color:inherit;
text-decoration:none;
}
a:hover{
color:inherit;
}
img,
svg,
video,
canvas {
display: block;
max-width:100%;
}
button,
input,
select,
textarea {
margin: 0;
color: inherit;
font: inherit;
}
button,
select{
font-family:inherit;
cursor:pointer;
}
.pml-app{
min-height:100vh;
background:
radial-gradient(circle at 0 0,rgba(0,132,255,.28),transparent 34%),
radial-gradient(circle at 100% 10%,rgba(255,169,0,.14),transparent 26%),
var(--pml-bg-deep);
}
/* =========================================================
MAIN CONTENT FOCUS TARGET
========================================================= */
#main-content:focus {
outline: none;
}
#main-content:focus-visible {
outline: 3px solid #ffffff;
outline-offset: -3px;
}
/*.pml-container{
width:min(100% - 42px,1280px);
margin-inline:auto;
}
.pml-container--wide{
width:min(100% - 56px,1480px);
}*/
/* =========================================================
GLOBAL CONTAINERS
---------------------------------------------------------
- Centers page content
- Prevents sections from stretching edge to edge
- Keeps responsive side spacing
========================================================= */
.pml-container {
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: clamp(18px, 2.5vw, 34px);
box-sizing: border-box;
}
/* Wide sections */
.pml-container.pml-container--wide {
max-width: 1440px;
}
/*#appCourseView {
width: 100%;
min-height: 100vh;
}*/
.eno-container {
width: 100%;
max-width: var(--eno-container-width);
margin-inline: auto;
padding-inline: 1.5rem;
}
@media (min-width: 600px) {
.eno-container {
padding-inline: 2rem;
}
}
@media (min-width: 960px) {
.eno-container {
padding-inline: 5rem;
}
}
@media (min-width: 1280px) {
.eno-container {
padding-inline: 9.25rem;
}
}
@media (min-width: 1920px) {
.eno-container {
padding-inline: 12rem;
}
}
/* =========================================================
SPOTLIGHT CONTAINER
---------------------------------------------------------
Keeps Spotlight centered and narrower on large screens.
========================================================= */
.pml-spotlight .pml-container {
width: 100%;
max-width: 1440px;
margin-inline: auto;
}
.pml-spotlight {
position: relative;
isolation: isolate;
padding: 76px 0 96px;
overflow: hidden;
background:
radial-gradient(
circle at 50% -15%,
rgba(0, 153, 255, 0.18),
transparent 36%
),
radial-gradient(
circle at 8% 40%,
rgb(35 36 36 / 8%),
transparent 28%
),
radial-gradient(
circle at 92% 40%,
rgb(38 37 36 / 8%),
transparent 28%
),
linear-gradient(
180deg,
#212423 0%,
#181819 48%,
#111213 100%
);
}
.pml-spotlight::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
url("../img/hero/slider-2.jpg")
center / cover
no-repeat;
opacity: 0.60;
filter: grayscale(1) contrast(1.1);
pointer-events: none;
}
.pml-spotlight::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(
90deg,
rgb(12 12 12 / 90%) 0%,
rgb(0 0 0 / 45%) 35%,
rgb(0 0 0 / 45%) 65%,
rgb(2 2 2 / 90%) 100%
),
linear-gradient(
180deg,
rgb(9 9 9 / 5%),
rgb(0 0 0 / 45%)
);
pointer-events: none;
}
.pml-spotlight .pml-container {
position: relative;
z-index: 3;
}
.pml-spotlight .pml-section-head,
.pml-spotlight .pml-section-head--inline {
position: relative;
z-index: 5;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"eyebrow eyebrow"
"title actions";
align-items: center;
column-gap: 28px;
row-gap: 18px;
width: 100%;
margin: 0 0 38px;
}
.pml-spotlight .pml-section-head > div:first-child {
display: contents;
}
.pml-spotlight .pml-eyebrow {
grid-area: eyebrow;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 9px;
width: max-content;
min-height: 32px;
margin: 0;
padding: 0 14px;
border: 1px solid rgba(255, 169, 0, 0.3);
border-radius: 999px;
background:
linear-gradient(
135deg,
rgba(255, 169, 0, 0.14),
rgba(255, 169, 0, 0.035)
);
color: var(--pml-gold, #ffa900);
font-size: 11px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.17em;
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.pml-spotlight .pml-eyebrow::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--pml-gold, #ffa900);
box-shadow:
0 0 0 5px rgba(255, 169, 0, 0.1),
0 0 14px rgba(255, 169, 0, 0.72);
}
.pml-spotlight .pml-section-head h2 {
grid-area: title;
min-width: 0;
margin: 0;
color: #ffffff;
font-size: clamp(24px, 2.6vw, 40px);
font-weight: 600;
line-height: 0.96;
letter-spacing: -0.06em;
text-wrap: balance;
text-shadow:
0 14px 40px rgba(0, 0, 0, 0.34);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.pml-spotlight-actions {
grid-area: actions;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 52px;
padding: 5px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 999px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.025)
);
box-shadow:
0 16px 42px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.09);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.pml-slider-btn {
position: relative;
z-index: 8;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: 0 0 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 50%;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.11),
rgba(255, 255, 255, 0.035)
);
color: #ffffff;
font-size: 14px;
line-height: 1;
cursor: pointer;
box-shadow:
0 9px 22px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition:
transform 0.2s ease,
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.pml-slider-btn i {
display: block;
line-height: 1;
pointer-events: none;
}
.pml-slider-btn:hover {
border-color: rgba(0, 174, 255, 0.58);
background:
linear-gradient(
135deg,
#0084ff,
#00bfff
);
color: #ffffff;
transform: translateY(-2px) scale(1.05);
box-shadow:
0 13px 28px rgba(0, 132, 255, 0.28),
0 0 0 4px rgba(0, 132, 255, 0.08);
}
.pml-slider-btn:active {
transform: scale(0.94);
}
.pml-slider-btn:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.94);
outline-offset: 3px;
}
/*.pml-slider-btn.swiper-button-disabled,
.pml-slider-btn:disabled {
opacity: 0.32;
cursor: default;
pointer-events: none;
transform: none;
}*/
.pml-slider-btn:disabled {
opacity: 0.32;
cursor: default;
pointer-events: none;
transform: none;
}
.pml-mini-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 112px;
min-height: 40px;
padding: 0 17px;
border: 1px solid rgba(255, 169, 0, 0.38);
border-radius: 999px;
background:
linear-gradient(
135deg,
rgba(255, 169, 0, 0.18),
rgba(255, 116, 0, 0.07)
);
color: #ffffff;
font-size: 12px;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.09);
transition:
transform 0.2s ease,
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.pml-mini-link i {
font-size: 12px;
transition: transform 0.2s ease;
}
.pml-mini-link:hover {
border-color: var(--pml-gold, #ffa900);
background:
linear-gradient(
135deg,
#ffb000,
#ff8500
);
color: #071c2c;
transform: translateY(-2px);
box-shadow:
0 14px 30px rgba(255, 145, 0, 0.23),
0 0 0 4px rgba(255, 169, 0, 0.08);
}
.pml-mini-link:hover i {
transform: translateX(3px);
}
.pml-mini-link:active {
transform: scale(0.96);
}
.pml-mini-link:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.94);
outline-offset: 3px;
}
.pml-section {
padding: 105px 0;
background:
radial-gradient(
circle at 10% 0,
rgb(8 8 8 / 10%),
#0808085c 24%
),
var(--pml-bg-deep);
}
.pml-section--soft {
background:
radial-gradient(
circle at 95% 10%,
rgb(39 39 39 / 10%),
#4b494900 24%
),
#1b1a1a;
}
.pml-section:not(.pml-spotlight) .pml-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 34px;
margin-bottom: 42px;
}
.pml-section:not(.pml-spotlight) .pml-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: var(--pml-gold);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
}
.pml-section:not(.pml-spotlight) .pml-section-head h2,
.pml-live__content h2,
.pml-cta h2 {
margin: 0;
max-width: 600px;
color: #ffffff;
/*font-size: clamp(34px, 4vw, 52px);*/
font-size: clamp(24px, 2.6vw, 40px);
line-height: 1.03;
font-weight: 600;
letter-spacing: -0.055em;
}
.pml-section:not(.pml-spotlight) .pml-section-head p {
max-width: 540px;
margin: 0;
color: var(--pml-muted);
font-size: 16px;
line-height: 1.6;
}
.pml-spotlight-viewport {
position: relative;
width: 100%;
overflow: hidden;
}
.pml-spotlight-track {
position: relative;
display: flex;
align-items: stretch;
box-sizing: border-box;
gap: var(--pml-spotlight-gap, 20px);
width: 100%;
margin: 0;
padding: 8px 2px 24px;
overflow-x: auto;
overflow-y: hidden;
list-style: none;
cursor: grab;
scroll-behavior: auto;
scroll-snap-type: none;
scrollbar-width: none;
overscroll-behavior-x: contain;
overscroll-behavior-y: auto;
/*touch-action: pan-x pan-y;*/
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
transform: translateZ(0);
backface-visibility: hidden;
}
.pml-spotlight-track::-webkit-scrollbar {
display: none;
}
.pml-spotlight-track:active,
.pml-spotlight-track.is-pointer-down,
.pml-spotlight-track.is-dragging {
cursor: grabbing;
/*scroll-behavior: auto;
scroll-snap-type: none;*/
}
.pml-spotlight-item {
position: relative;
flex: 0 0 var(--pml-spotlight-slide-width);
width: var(--pml-spotlight-slide-width);
min-width: 0;
overflow: visible;
scroll-snap-align: none;
scroll-snap-stop: normal;
transform: translateZ(0);
backface-visibility: hidden;
}
.pml-spotlight-item .pml-card {
width: 100%;
height: auto;
aspect-ratio: 2 / 3;
}
.pml-spotlight-track img {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
/*.pml-spotlight-track.is-dragging {
scroll-behavior: auto;
}*/
.pml-spotlight-track.is-dragging {
scroll-behavior: auto;
scroll-snap-type: none;
user-select: none;
-webkit-user-select: none;
}
.pml-spotlight-track.is-dragging .pml-card {
pointer-events: auto;
transform: translateZ(0) !important;
transition: none !important;
}
.pml-spotlight-track.is-dragging .pml-card {
transform: translateZ(0) !important;
transition: none !important;
}
/*.pml-spotlight-track.is-dragging
.pml-card__media > img {
transform: scale(1) !important;
filter: saturate(1.05) contrast(1.04) !important;
transition: none !important;
}*/
.pml-spotlight-track.is-dragging
.pml-card:hover
.pml-card__picture > img,
.pml-spotlight-track.is-dragging
.pml-card:focus-visible
.pml-card__picture > img,
.pml-spotlight-track.is-dragging
.pml-card:hover
.pml-card__media > img,
.pml-spotlight-track.is-dragging
.pml-card:focus-visible
.pml-card__media > img {
transform:
translateZ(0)
scale(1) !important;
}
/*.pml-spotlight-track.is-dragging.pml-card:hover .pml-card__media > img,
.pml-spotlight-track.is-dragging.pml-card:focus-visible .pml-card__media > img {
transform: scale(1) !important;
}*/
.pml-spotlight-track.is-dragging
.pml-card__picture > img,
.pml-spotlight-track.is-dragging
.pml-card__media > img {
transform:
translateZ(0)
scale(1) !important;
filter:
saturate(1.05)
contrast(1.04) !important;
transition: none !important;
}
/*.pml-spotlight-track.is-dragging .pml-card__play,
.pml-spotlight-track.is-dragging.pml-card:hover .pml-card__play,
.pml-spotlight-track.is-dragging.pml-card:focus-visible
.pml-card__play,.pml-spotlight-track.is-dragging.pml-card__play:hover,
.pml-spotlight-track.is-dragging .pml-card__play:active {
transform: translateZ(0) scale(1) !important;
transition: none !important;
}*/
.pml-spotlight-track.is-dragging
.pml-card__play,
.pml-spotlight-track.is-dragging
.pml-card:hover
.pml-card__play,
.pml-spotlight-track.is-dragging
.pml-card:focus-visible
.pml-card__play,
.pml-spotlight-track.is-dragging
.pml-card__play:hover,
.pml-spotlight-track.is-dragging
.pml-card__play:active {
transform:
translateZ(0)
scale(1) !important;
transition: none !important;
}
/*.pml-spotlight-track.is-dragging.pml-card__rank, .pml-spotlight-track.is-dragging
.pml-card:hover .pml-card__rank,.pml-spotlight-track.is-dragging.pml-card:focus-visible
.pml-card__rank {
transform: translateX(-50%) scaleX(1.02) !important;
filter: none !important;
transition: none !important;
}*/
.pml-spotlight-track.is-dragging
.pml-card__rank,
.pml-spotlight-track.is-dragging
.pml-card:hover
.pml-card__rank,
.pml-spotlight-track.is-dragging
.pml-card:focus-visible
.pml-card__rank {
transform:
translateX(-50%)
scaleX(1.02) !important;
filter: none !important;
transition: none !important;
}
.pml-card__shade,.pml-card__rank,.pml-card__quality,
.pml-card__skeleton,.pml-card::after {
pointer-events: none;
}
/*.pml-card,
.pml-card__media,
.pml-card__content,
.pml-card__play {
pointer-events: auto;
}*/
.pml-card,
.pml-card__media,
.pml-card__content {
pointer-events: auto;
}
.pml-card__play {
pointer-events: none;
}
.pml-spotlight-track img {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
/*@media (hover: none), (pointer: coarse) {
.pml-card:hover
.pml-card__media > img {
transform: scale(1);
filter: saturate(1.05) contrast(1.04);
}
.pml-card:hover.pml-card__play {
transform: translateZ(0) scale(1);
}
.pml-card:hover.pml-card__rank {
transform: translateX(-50%) scaleX(1);
}
.pml-card.js-pml-preview:active {
transform: translateZ(0);
}
}*/
@media (hover: none), (pointer: coarse) {
.pml-card:hover
.pml-card__picture > img,
.pml-card:hover
.pml-card__media > img {
transform:
translateZ(0)
scale(1);
filter:
saturate(1.05)
contrast(1.04);
}
.pml-card:hover
.pml-card__play {
transform:
translateZ(0)
scale(1);
}
.pml-card:hover
.pml-card__rank {
transform:
translateX(-50%)
scaleX(1);
}
.pml-card.js-pml-preview:active {
transform:
translateZ(0)
scale(0.985);
}
}
.pml-card {
position: relative;
display: block;
width: 100%;
height: auto;
aspect-ratio:var(--pml-spotlight-card-aspect-ratio);
border-radius:var(--pml-spotlight-card-radius);
overflow: visible;
background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)), rgba(1, 40, 48, 0.98);
border:1px solid rgba(255,255,255,.10);
box-shadow: 0 22px 58px rgb(1 28 35 / 0%), inset 0 1px 0 rgba(255,255,255,.08);
cursor: pointer;
transform: translateZ(0);
transition:
transform .28s ease,
box-shadow .28s ease;
}
.pml-card:focus {
outline: none;
}
.pml-card:focus-visible {
outline:
3px solid
var(--pml-gold, #ffa900);
outline-offset: 4px;
}
/*.pml-card__media {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
border-radius: inherit;
}
.pml-card__media > img {
position: absolute;
inset: 0;
z-index: 2;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(1.05) contrast(1.04);
transform: scale(1);
transform-origin: center;
transition:
transform .38s ease,
filter .38s ease;
}
.pml-card:hover .pml-card__media > img,
.pml-card:focus-visible .pml-card__media > img {
transform: scale(1.045);
filter: saturate(1.12) contrast(1.07) brightness(.94);
}*/
/* =========================================================
SPOTLIGHT CARD IMAGE AND SKELETON
---------------------------------------------------------
Supports:
- Normal ![]()
- Responsive
- AVIF / WebP sources
- Loading skeleton
- Image error state
========================================================= */
.pml-card__media {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
aspect-ratio: 2 / 3;
background:
linear-gradient(
145deg,
#012830,
#011d24
);
}
/* =========================================================
RESPONSIVE PICTURE WRAPPER
========================================================= */
.pml-card__picture {
position: absolute;
inset: 0;
z-index: 2;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
}
/* =========================================================
CARD POSTER IMAGE
========================================================= */
.pml-card__picture > img,
.pml-card__media > img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
opacity: 0;
filter:
saturate(1.05)
contrast(1.04);
transform:
translateZ(0)
scale(1.01);
transform-origin: center;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
pointer-events: none;
transition:
opacity 220ms ease,
transform 380ms ease,
filter 380ms ease;
}
/* =========================================================
IMAGE LOADED STATE
========================================================= */
.pml-card.is-image-loaded
.pml-card__picture > img,
.pml-card.is-image-loaded
.pml-card__media > img {
opacity: 1;
transform:
translateZ(0)
scale(1);
}
/* =========================================================
IMAGE HOVER
========================================================= */
.pml-card:hover
.pml-card__picture > img,
.pml-card:focus-visible
.pml-card__picture > img,
.pml-card:hover
.pml-card__media > img,
.pml-card:focus-visible
.pml-card__media > img {
transform:
translateZ(0)
scale(1.045);
filter:
saturate(1.12)
contrast(1.07)
brightness(0.94);
}
/* =========================================================
IMAGE ERROR STATE
========================================================= */
.pml-card.is-image-error
.pml-card__picture,
.pml-card.is-image-error
.pml-card__media > img {
opacity: 0;
}
.pml-card.is-image-error
.pml-card__media {
background:
radial-gradient(
circle at 50% 35%,
rgba(0, 132, 255, 0.13),
transparent 45%
),
linear-gradient(
145deg,
#012830,
#011d24
);
}
.pml-card__media .pml-card__shade {
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
}
.pml-spotlight {
--pml-spotlight-gap: 20px;
--pml-spotlight-slide-width:
calc((100% - 100px) / 6);
}
@media (min-width: 992px) and (max-width: 1399px) {
.pml-spotlight {
--pml-spotlight-gap: 18px;
--pml-spotlight-slide-width:
calc((100% - 72px) / 5);
}
}
@media (max-width: 1199px) {
.pml-spotlight {
padding: 76px 0 84px;
}
.pml-spotlight .pml-section-head h2 {
font-size: clamp(38px, 5.2vw, 56px);
}
.pml-spotlight-actions {
min-height: 48px;
}
.pml-slider-btn {
width: 38px;
height: 38px;
flex: 0 0 38px;
}
.pml-mini-link {
min-width: 104px;
min-height: 38px;
padding: 0 14px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.pml-spotlight {
--pml-spotlight-gap: 14px;
--pml-spotlight-slide-width:
calc((100% - 42px) / 4);
}
.pml-spotlight .pml-section-head,
.pml-spotlight .pml-section-head--inline {
column-gap: 18px;
row-gap: 14px;
margin-bottom: 30px;
}
.pml-spotlight .pml-section-head h2 {
font-size: clamp(34px, 5.5vw, 46px);
}
.pml-section:not(.pml-spotlight) .pml-section-head {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 767px) {
.pml-spotlight {
--pml-spotlight-card-radius: 24px;
padding: 42px 0 58px;
}
.pml-spotlight-track {
padding: 6px 1px 56px;
}
.pml-spotlight .pml-section-head,
.pml-spotlight .pml-section-head--inline {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"eyebrow eyebrow"
"title actions";
align-items: center;
column-gap: 8px;
row-gap: 10px;
margin-bottom: 22px;
}
.pml-spotlight .pml-eyebrow {
min-height: 24px;
padding: 0 9px;
font-size: 7.5px;
letter-spacing: 0.12em;
}
.pml-spotlight .pml-eyebrow::before {
width: 5px;
height: 5px;
flex-basis: 5px;
}
.pml-spotlight .pml-section-head h2 {
overflow: hidden;
font-size: clamp(22px, 6vw, 30px);
line-height: 1;
letter-spacing: -0.045em;
white-space: nowrap;
text-overflow: ellipsis;
}
.pml-spotlight-actions {
justify-self: end;
display: inline-flex;
align-items: center;
width: auto;
min-height: 32px;
gap: 3px;
padding: 2px 3px;
border-radius: 999px;
}
.pml-slider-btn {
width: 26px;
height: 26px;
flex: 0 0 26px;
font-size: 9px;
}
.pml-mini-link {
min-width: 68px;
min-height: 26px;
gap: 3px;
padding: 0 8px;
font-size: 8px;
}
.pml-mini-link i {
font-size: 8px;
}
.pml-section {
padding: 68px 0;
}
.pml-card__content {
padding: 15px 32px 34px 15px;
}
.pml-card__content h3 {
font-size: 20px;
}
.pml-card__content p,
.pml-card__rating {
font-size: 12px;
}
.pml-card::after {
right: 14px;
bottom: 14px;
width: 38px;
height: 38px;
}
.pml-card__lock {
width: 40px;
height: 40px;
}
.pml-card__quality {
min-width: 38px;
min-height: 29px;
}
/*.enoflix-home7-rail--three {
display: none;
}*/
}
@media (min-width: 576px) and (max-width: 767px) {
.pml-spotlight {
--pml-spotlight-gap: 10px;
--pml-spotlight-slide-width:
calc((100% - 20px) / 3);
}
}
@media (max-width: 575px) {
.pml-spotlight {
--pml-spotlight-gap: 8px;
--pml-spotlight-slide-width:
calc((100% - 8px) / 2);
}
.pml-spotlight-track {
padding: 6px 1px 52px;
}
.pml-card {
border-radius: var(
--eno-radius-sm,
10px
);
}
}
@media (max-width: 480px) {
.pml-spotlight .pml-section-head,
.pml-spotlight .pml-section-head--inline {
column-gap: 5px;
}
.pml-spotlight .pml-section-head h2 {
font-size: clamp(20px, 5.8vw, 26px);
}
.pml-spotlight-actions {
min-height: 28px;
gap: 2px;
padding: 2px;
}
.pml-slider-btn {
width: 23px;
height: 23px;
flex: 0 0 23px;
font-size: 8px;
}
.pml-mini-link {
min-width: 58px;
min-height: 23px;
gap: 2px;
padding: 0 6px;
font-size: 7px;
}
.pml-mini-link i {
font-size: 7px;
}
}
@media (max-width: 374px) {
.pml-spotlight {
padding: 36px 0 48px;
}
.pml-spotlight .pml-section-head h2 {
font-size: 19px;
}
.pml-spotlight .pml-eyebrow {
min-height: 22px;
padding: 0 7px;
font-size: 6.5px;
}
.pml-spotlight-actions {
transform: scale(0.92);
transform-origin: right center;
}
.pml-slider-btn {
width: 21px;
height: 21px;
flex: 0 0 21px;
}
.pml-mini-link {
min-width: 54px;
min-height: 21px;
font-size: 6.5px;
}
}
@media (min-width: 1400px) {
.pml-card {
max-height: 24rem;
}
}
@media (min-width: 1920px) {
.pml-card {
max-height: 26rem;
}
}
@media (prefers-reduced-motion: reduce) {
.pml-slider-btn,
.pml-mini-link,
.pml-mini-link i {
transition: none !important;
}
.pml-slider-btn:hover,
.pml-slider-btn:active,
.pml-mini-link:hover,
.pml-mini-link:active {
transform: none !important;
}
}
.pml-card__rank {
position: absolute;
left: 50%;
right: auto;
font-size: clamp(4.6rem, 5.4vw, 6.4rem);
bottom: -0.9rem;
z-index: 7;
display: block;
min-width: 0.78em;
margin: 0;
color: #0f0f0f;
font-family: "Lato", sans-serif;
font-weight: 900;
line-height: 0.72;
letter-spacing: -0.035em;
text-align: center;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "kern" 1;
pointer-events: none;
user-select: none;
transform: translateX(-50%) scaleX(1.02);
transform-origin: center bottom;
-webkit-text-stroke: 2.4px rgba(255, 255, 255, 0.96);
paint-order: stroke fill;
text-shadow:
0 7px 16px rgb(47 47 47 / 68%),
0 14px 28px rgb(40 41 41 / 50%);
transition:
transform 0.28s ease,
filter 0.28s ease,
text-shadow 0.28s ease;
}
.pml-card:hover .pml-card__rank,
.pml-card:focus-visible .pml-card__rank {
transform: translateX(-50%) translateY(-1px) scaleX(1.02) scale(1.015);
filter: brightness(1.06);
text-shadow:
0 8px 18px rgba(8, 33, 28, 0.72),
0 16px 32px rgba(3, 39, 25, 0.56),
0 0 12px rgba(255, 169, 0, 0.1);
}
@media (min-width: 1400px) {
.pml-card__rank {
bottom: -1rem;
font-size: clamp(5.8rem, 6vw, 8rem);
-webkit-text-stroke-width: 2.6px;
}
}
@media (min-width: 1920px) {
.pml-card__rank {
bottom: -1.15rem;
font-size: 9.5rem;
-webkit-text-stroke-width: 3px;
}
}
@media (max-width: 991px) {
.pml-card__rank {
bottom: -0.65rem;
font-size: clamp(3.2rem, 7vw, 4.4rem);
transform: translateX(-50%) scaleX(1);
-webkit-text-stroke-width: 1.8px;
}
.pml-card:hover .pml-card__rank,
.pml-card:focus-visible .pml-card__rank {
transform:
translateX(-50%)
translateY(-1px)
scaleX(1)
scale(1.012);
}
}
@media (max-width: 767px) {
.pml-card__rank {
bottom: -0.5rem;
font-size: clamp(3rem, 13vw, 3.9rem);
transform: translateX(-50%) scaleX(1);
-webkit-text-stroke-width: 1.6px;
}
.pml-card:hover .pml-card__rank,
.pml-card:focus-visible .pml-card__rank {
transform:
translateX(-50%)
translateY(-1px)
scaleX(1)
scale(1.01);
}
}
@media (max-width: 374px) {
.pml-card__rank {
bottom: -0.42rem;
font-size: 2.75rem;
-webkit-text-stroke-width: 1.4px;
}
}
@media (prefers-reduced-motion: reduce) {
.pml-card__rank {
transition: none !important;
}
.pml-card:hover .pml-card__rank,
.pml-card:focus-visible .pml-card__rank {
transform:
translateX(-50%)
scaleX(1) !important;
}
}
.pml-card__lock{
display: none !important;
}
.pml-card__skeleton {
position: absolute;
inset: 0;
z-index: 1;
display: block;
border-radius: inherit;
opacity: 1;
pointer-events: none;
background:
linear-gradient(
100deg,
#012830 20%,
#0b3b43 40%,
#012830 60%
);
background-size: 220% 100%;
transform: translateZ(0);
will-change: opacity, background-position;
animation: pmlPosterLoading 1.4s linear infinite;
transition:
/*opacity 240ms ease;*/
opacity 180ms ease;
}
.pml-card.is-image-loaded .pml-card__skeleton,
.pml-card.is-image-error .pml-card__skeleton {
opacity: 0;
animation: none;
/*background: linear-gradient(135deg, #012830fa, #011d24fc);*/
}
/*@keyframes pmlPosterLoading {
0%,
100% {
background-color: #012830fa;
}
50% {
background-color: #09242afa
}
}*/
@keyframes pmlPosterLoading {
from {
background-position: 200% 0;
}
to {
background-position: -20% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.pml-card__skeleton {
animation: none;
will-change: auto;
}
.pml-card__picture > img,
.pml-card__media > img {
transition: none;
}
}
.pml-icon {
display: block;
flex: 0 0 auto;
fill: currentColor;
}
/*.pml-card__lock{
display: inline-flex;
top: 68px;
left: 14px;
}*/
/*.pml-card__lock{
position:absolute;
top:14px;
left:14px;
z-index:5;
width:42px;
height:42px;
border-radius:999px;
background:rgba(2,12,25,.76);
border:1px solid rgba(255,255,255,.18);
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:14px;
backdrop-filter:blur(12px);
box-shadow:0 10px 24px rgba(0,0,0,.18);
}*/
/* =========================================================
CARD OVERLAYS
========================================================= */
.pml-card__shade{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(180deg, rgba(2,12,25,0) 16%, rgba(2,12,25,.35) 48%, rgba(1, 29, 36, 0.99) 100%);
pointer-events:none;
}
.pml-card::after{
content:"";
position:absolute;
right: 14px;
bottom: 14px;
z-index: 8;
width:25px;
height:25px;
background:url("../img/logo/favicon.png") center / contain no-repeat;
opacity: .92;
pointer-events:none;
filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.pml-card__quality{
position:absolute;
top:14px;
right:14px;
z-index:5;
min-width:40px;
min-height:30px;
padding:0 10px;
border-radius:999px;
background:var(--pml-gradient-gold);
color: #1d1d1d;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:950;
line-height:1;
box-shadow:0 10px 24px rgba(0,0,0,.20);
}
.pml-card__content{
position:absolute;
inset:0;
z-index:3;
padding: 20px;
padding-right: 38px;
padding-bottom: 42px;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.pml-card__content h3{
margin:0 0 7px;
color:#fff;
font-size:clamp(18px,1.4vw,23px);
line-height:1.08;
font-weight:600;
letter-spacing:-.035em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.pml-card__content p{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin:0 0 9px;
color:var(--pml-muted);
font-size:12px;
font-weight:500;
}
.pml-card__content p span:last-child{
color:var(--pml-gold);
}
.pml-card__rating{
color:var(--pml-gold);
font-size:12px;
font-weight:500;
}
.pml-card__play {
position: relative;
z-index: 6;
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(46px, 4vw, 60px);
height: clamp(46px, 4vw, 60px);
flex: 0 0 auto;
margin: 0 0 14px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.227);
border-radius: 50%;
background: rgb(255 255 255 / 6%);
color: var(--pml-blue, #0084ff);
font-size: clamp(15px, 1.2vw, 19px);
line-height: 1;
opacity: 1;
/*cursor: pointer;*/
cursor: inherit;
pointer-events: none;
transform: translateZ(0) scale(1);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
transform 0.22s ease,
background-color 0.22s ease,
border-color 0.22s ease,
color 0.22s ease,
box-shadow 0.22s ease;
}
.pml-card__play i {
display: block;
margin-left: 2px;
line-height: 1;
pointer-events: none;
}
.pml-card:hover .pml-card__play,
.pml-card:focus-visible .pml-card__play {
border-color:
var(--pml-gold, #ffa900);
background:
var(--pml-gold, #ffa900);
color:
rgba(2, 36, 45, 0.99);
transform:
translateZ(0)
scale(1.07);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.44),
0 0 0 5px rgba(255, 169, 0, 0.16);
}
/*.pml-card:hover .pml-card__play,
.pml-card:focus-visible .pml-card__play {
transform: scale(1.07);
box-shadow:
0 16px 38px rgba(0, 0, 0, 0.42),
0 0 0 5px rgba(255, 255, 255, 0.08);
}*/
/*.pml-card__play:hover {
border-color: var(--pml-gold, #ffa900);
background: var(--pml-gold, #ffa900);
color: rgba(2, 36, 45, 0.99);
transform: scale(1.12);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.44),
0 0 0 5px rgba(255, 169, 0, 0.16);
}*/
.pml-card__play:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.96);
outline-offset: 4px;
}
.pml-card__play:active {
transform: scale(0.96);
}
@media (max-width: 991px) {
.pml-card__play {
width: 52px;
height: 52px;
margin-bottom: 12px;
font-size: 16px;
}
}
@media (max-width: 767px) {
.pml-card__play {
width: 46px;
height: 46px;
margin-bottom: 10px;
font-size: 14px;
}
}
@media (max-width: 374px) {
.pml-card__play {
width: 42px;
height: 42px;
margin-bottom: 8px;
font-size: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.pml-card__play {
transition: none !important;
}
.pml-card:hover .pml-card__play,
.pml-card:focus-visible .pml-card__play,
.pml-card__play:hover,
.pml-card__play:active {
transform: none !important;
}
}
.pml-card__content p{
min-width:0;
max-width:100%;
}
.pml-card__content p span{
min-width:0;
}
.pml-card__content p span:last-child{
display:block;
max-width:100%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.pml-preview__genre{
display:block;
max-width:100%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.pml-category-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
}
.pml-category{
position:relative;
min-height:285px;
padding:18px;
border-radius:var(--pml-radius);
overflow:hidden;
background:rgb(10 13 66 / 72%);
border:1px solid var(--pml-border);
transition:.25s ease;
}
.pml-category:hover{
transform:translateY(-5px);
border-color:rgba(255,169,0,.45);
box-shadow:var(--pml-shadow);
}
.pml-category__lock{
position:absolute;
top:16px;
left:16px;
z-index:5;
width:38px;
height:38px;
border-radius:999px;
background:rgb(23 24 25 / 26%);
border:1px solid rgb(255 255 255 / 6%);
color:#ffffff26;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:13px;
}
.pml-category__image{
height:196px;
border-radius:18px;
overflow:hidden;
background-size:cover;
background-position:center;
position:relative;
}
.pml-category__image::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent,rgb(13 29 95 / 91%));
}
.pml-category h3{
margin: 18px 0 0;
color:#ffffff;
font-size:20px;
font-weight:650;
}
.pml-category__arrow{
position:absolute;
right:22px;
bottom:20px;
color:var(--pml-gold);
}
.pml-feature-grid,
.pml-device-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.pml-feature-card,
.pml-device-card{
min-height:230px;
padding:30px;
border-radius:var(--pml-radius);
background:
radial-gradient(circle at top right,rgb(98 73 104 / 18%),#0000001c 36%),
linear-gradient(180deg,rgba(255,255,255,.055),rgb(19 5 66 / 21%)),
rgb(24 8 52 / 75%);
border:1px solid var(--pml-border);
transition:.24s ease;
}
.pml-feature-card:hover,
.pml-device-card:hover{
transform:translateY(-5px);
border-color:rgb(255 188 0 / 54%);
box-shadow:var(--pml-shadow);
}
.pml-feature-card > span,
.pml-device-card > span{
width:52px;
height:52px;
border-radius:16px;
background:var(--pml-gradient-blue);
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:20px;
margin-bottom:24px;
}
.pml-feature-card h3,
.pml-device-card h3{
margin:0 0 13px;
color:#fff;
font-size:22px;
font-weight:950;
}
.pml-feature-card p,
.pml-device-card p{
margin:0;
color:var(--pml-muted);
line-height:1.7;
}
.pml-live{
padding:105px 0;
background:
radial-gradient(circle at 80% 50%,rgb(54 53 52 / 16%),#00000036 32%),
linear-gradient(180deg,#222121fa,#120f0f);
}
.pml-live__grid{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:34px;
align-items:center;
}
.pml-live__content p{
margin:22px 0 30px;
max-width:560px;
color:var(--pml-muted);
font-size:17px;
line-height:1.75;
}
.pml-live__panel{
display:grid;
gap:18px;
}
.pml-live-card{
padding:16px;
border-radius:24px;
display:grid;
grid-template-columns:150px 1fr;
gap:18px;
align-items:center;
background:#0e0a41e8;
border:1px solid var(--pml-border);
box-shadow:0 18px 44px rgb(16 16 16 / 18%);
}
.pml-live-card img{
width:150px;
height:100px;
border-radius:18px;
object-fit:cover;
}
.pml-live-card span{
display:inline-flex;
margin-bottom:8px;
color:var(--pml-gold);
font-size:12px;
font-weight:950;
text-transform:uppercase;
letter-spacing:.08em;
}
.pml-live-card h3{
margin:0 0 5px;
color:#fff;
font-size:22px;
font-weight:950;
}
.pml-live-card p{
margin:0;
color:var(--pml-muted);
}
.pml-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
}
.pml-plan{
position:relative;
padding:32px;
border-radius:var(--pml-radius);
background:rgb(26 11 71 / 69%);
border:1px solid var(--pml-border);
overflow:hidden;
}
.pml-plan::before{
content:"";
position:absolute;
right:-40px;
top:-60px;
width:510px;
height:390px;
background:radial-gradient(circle,rgb(252 149 8 / 13%),#17171700 64%);
}
.pml-plan--active{
border-color:rgb(147 131 98 / 29%);
box-shadow:0 24px 62px rgb(35 35 34 / 15%);
}
.pml-plan__tag{
position:absolute;
right:20px;
top:20px;
z-index:2;
padding: 7px 11px;
border-radius:999px;
background:var(--pml-gradient-gold);
color:#282828;
font-size:13px;
font-weight:650;
}
.pml-plan h3{
margin:0 0 14px;
color:#01dcff;
font-size:25px;
font-weight:750;
}
.pml-plan p{
margin:0 0 20px;
color:var(--pml-muted);
line-height:1.4;
}
.pml-price{
margin-bottom:23px;
color:#fff;
font-size:35px;
line-height:1;
font-weight:800;
letter-spacing:-.055em;
}
.pml-price span{
margin-left:4px;
color:var(--pml-muted);
font-size:15px;
font-weight:700;
letter-spacing:0;
}
.pml-plan ul{
list-style:none;
padding:0;
margin:0 0 28px;
display:grid;
gap:12px;
color:var(--pml-muted);
}
.pml-plan li{
display:flex;
align-items:center;
gap:9px;
font-weight:600;
}
.pml-plan li i{
color:var(--pml-gold);
}
.pml-plan .pml-btn{
width:100%;
}
/*.pml-faq-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px 26px;
}
.pml-faq{
padding:22px 0;
border-bottom:1px solid rgba(255,255,255,.10);
}
.pml-faq summary{
cursor:pointer;
display:flex;
align-items:center;
gap:18px;
list-style:none;
color:#fff;
font-size:22px;
font-weight:950;
}
.pml-faq summary::-webkit-details-marker{
display:none;
}
.pml-faq summary::after{
content:"+";
margin-left:auto;
color:var(--pml-gold);
font-size:30px;
line-height:1;
font-weight:950;
}
.pml-faq[open] summary::after{
content:"−";
}
.pml-faq summary span{
width:58px;
height:58px;
border-radius:16px;
background:rgba(255,255,255,.08);
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}
.pml-faq p{
margin:16px 0 0 76px;
color:var(--pml-muted);
line-height:1.7;
}*/
/* =========================================================
HERO CURVE  ASYMMETRIC CINEMATIC SWEEP
---------------------------------------------------------
Features:
- Curved diagonal transition
- Blue-to-gold illuminated edge
- Soft ambient glow
- Responsive mobile shape
========================================================= */
.pml-hero-curve {
position: relative;
z-index: 5;
width: 100%;
height: 96px;
margin-top: -1px;
overflow: hidden;
background: transparent;
pointer-events: none;
}
/* =========================================================
MAIN CURVED SURFACE
========================================================= */
.pml-hero-curve__surface {
position: absolute;
inset: 0;
/*
* This gradient becomes the illuminated curve edge.
*/
background:
linear-gradient(
100deg,
rgba(0, 94, 255, 0.1) 0%,
var(--pml-blue, #1687ff) 28%,
var(--pml-cyan, #15bccf) 53%,
var(--pml-gold, #ffa900) 78%,
rgba(255, 122, 24, 0.18) 100%
);
/*
* An off-centre ellipse produces the asymmetric sweep.
*/
clip-path:
ellipse(
88% 135%
at 34% 100%
);
-webkit-clip-path:
ellipse(
88% 135%
at 34% 100%
);
transform: translateZ(0);
}
/* =========================================================
SOFT CURVE GLOW
========================================================= */
.pml-hero-curve__surface::before {
position: absolute;
inset: -8px 0 0;
z-index: 0;
content: "";
background:
linear-gradient(
100deg,
transparent 4%,
rgba(22, 135, 255, 0.65) 28%,
rgba(21, 188, 207, 0.4) 52%,
rgba(255, 169, 0, 0.55) 77%,
transparent 98%
);
filter: blur(18px);
opacity: 0.58;
clip-path:
ellipse(
88% 135%
at 34% 100%
);
-webkit-clip-path:
ellipse(
88% 135%
at 34% 100%
);
}
/* =========================================================
INNER SURFACE
---------------------------------------------------------
This covers most of the gradient and leaves a slim,
illuminated edge following the curve.
========================================================= */
.pml-hero-curve__surface::after {
position: absolute;
inset: 4px 0 0;
z-index: 1;
content: "";
background:
radial-gradient(
circle at 74% 0%,
rgba(0, 132, 255, 0.1),
transparent 32%
),
radial-gradient(
circle at 18% 20%,
rgba(255, 169, 0, 0.055),
transparent 26%
),
var(
--pml-bg,
#043128
);
clip-path:
ellipse(
88% 135%
at 34% 100%
);
-webkit-clip-path:
ellipse(
88% 135%
at 34% 100%
);
}
/* =========================================================
TABLETS
========================================================= */
@media (max-width: 991px) {
.pml-hero-curve {
height: 78px;
}
.pml-hero-curve__surface,
.pml-hero-curve__surface::before,
.pml-hero-curve__surface::after {
clip-path:
ellipse(
96% 138%
at 30% 100%
);
-webkit-clip-path:
ellipse(
96% 138%
at 30% 100%
);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575px) {
.pml-hero-curve {
height: 58px;
}
.pml-hero-curve__surface,
.pml-hero-curve__surface::before,
.pml-hero-curve__surface::after {
clip-path:
ellipse(
112% 145%
at 24% 100%
);
-webkit-clip-path:
ellipse(
112% 145%
at 24% 100%
);
}
.pml-hero-curve__surface::before {
filter: blur(12px);
opacity: 0.48;
}
.pml-hero-curve__surface::after {
inset: 3px 0 0;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.pml-hero-curve__surface {
transform: none;
}
}
/* =========================================================
ENOFLIX HERO CURVE COLLECTION
---------------------------------------------------------
Change the modifier class in the HTML to select a design.
Available designs:
1. Double Wave
2. Layered Arcs
3. Crossing Ribbons
4. Convex Drop
5. Side Sweep
6. Neon Horizon
========================================================= */
/* =========================================================
SHARED BASE
========================================================= */
.pml-hero-curve {
--pml-curve-bg:
var(--pml-bg, #021d1b);
--pml-curve-hero:
#01302e;
--pml-curve-blue:
var(--pml-blue, #1687ff);
--pml-curve-blue-2:
var(--pml-blue-2, #005eff);
--pml-curve-cyan:
var(--pml-cyan, #15bccf);
--pml-curve-gold:
var(--pml-gold, #ffa900);
--pml-curve-gold-2:
var(--pml-gold-2, #ff7a18);
position: relative;
z-index: 5;
width: 100%;
height: clamp(72px, 7vw, 110px);
margin-top: -1px;
overflow: hidden;
background:
var(--pml-curve-bg);
isolation: isolate;
pointer-events: none;
}
.pml-hero-curve__surface {
position: absolute;
inset: 0;
}
.pml-hero-curve__surface::before,
.pml-hero-curve__surface::after {
position: absolute;
content: "";
pointer-events: none;
}
/* =========================================================
DESIGN 1  DOUBLE WAVE
---------------------------------------------------------
Two closely blended curves with a thin glowing border.
Smooth and cinematic.
========================================================= */
.pml-hero-curve--double-wave
.pml-hero-curve__surface {
left: -8%;
right: auto;
bottom: -58px;
top: auto;
width: 116%;
height: 136px;
border-radius:
50% 50% 0 0 /
100% 100% 0 0;
background:
linear-gradient(
100deg,
rgba(0, 94, 255, 0.08) 0%,
var(--pml-curve-blue) 22%,
var(--pml-curve-cyan) 52%,
var(--pml-curve-gold) 78%,
rgba(255, 122, 24, 0.12) 100%
);
box-shadow:
0 -14px 40px
rgba(22, 135, 255, 0.18);
}
.pml-hero-curve--double-wave
.pml-hero-curve__surface::before {
inset: -14px 0 auto;
height: 46px;
border-radius: 50%;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(22, 135, 255, 0.56) 24%,
rgba(21, 188, 207, 0.44) 52%,
rgba(255, 169, 0, 0.52) 78%,
transparent 100%
);
filter: blur(18px);
opacity: 0.6;
}
.pml-hero-curve--double-wave
.pml-hero-curve__surface::after {
left: 0;
right: 0;
top: 5px;
bottom: -1px;
border-radius:
50% 50% 0 0 /
100% 100% 0 0;
background:
radial-gradient(
circle at 30% 10%,
rgba(0, 132, 255, 0.1),
transparent 34%
),
radial-gradient(
circle at 78% 12%,
rgba(255, 169, 0, 0.07),
transparent 30%
),
var(--pml-curve-bg);
}
/* =========================================================
DESIGN 2  LAYERED ARCS
---------------------------------------------------------
Separate blue and gold curves overlap softly.
Creates a premium layered-glass effect.
========================================================= */
.pml-hero-curve--layered-arcs
.pml-hero-curve__surface {
background:
linear-gradient(
180deg,
rgba(1, 48, 46, 0.22),
transparent 70%
),
var(--pml-curve-bg);
}
.pml-hero-curve--layered-arcs
.pml-hero-curve__surface::before {
left: -18%;
bottom: -82px;
width: 82%;
height: 158px;
border-radius:
54% 46% 0 0 /
100% 100% 0 0;
background:
linear-gradient(
105deg,
rgba(0, 94, 255, 0.06),
rgba(22, 135, 255, 0.72),
rgba(21, 188, 207, 0.26)
);
box-shadow:
0 -10px 36px
rgba(22, 135, 255, 0.2);
transform:
rotate(3deg);
transform-origin:
center bottom;
opacity: 0.86;
}
.pml-hero-curve--layered-arcs
.pml-hero-curve__surface::after {
right: -22%;
bottom: -76px;
width: 88%;
height: 150px;
border-radius:
46% 54% 0 0 /
100% 100% 0 0;
background:
linear-gradient(
250deg,
rgba(255, 122, 24, 0.05),
rgba(255, 169, 0, 0.72),
rgba(125, 77, 255, 0.2)
);
box-shadow:
0 -10px 36px
rgba(255, 169, 0, 0.16);
transform:
rotate(-3deg);
transform-origin:
center bottom;
opacity: 0.8;
}
/* =========================================================
DESIGN 3  CROSSING RIBBONS
---------------------------------------------------------
Two rounded gradient ribbons cross each other.
More futuristic and energetic.
========================================================= */
.pml-hero-curve--crossing-ribbons
.pml-hero-curve__surface {
overflow: hidden;
background:
radial-gradient(
circle at 50% 0%,
rgba(0, 132, 255, 0.1),
transparent 52%
),
var(--pml-curve-bg);
}
.pml-hero-curve--crossing-ribbons
.pml-hero-curve__surface::before {
left: -12%;
top: 22%;
width: 126%;
height: 34px;
border-radius: 999px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(0, 94, 255, 0.2) 8%,
var(--pml-curve-blue) 30%,
var(--pml-curve-cyan) 55%,
rgba(21, 188, 207, 0.08) 92%,
transparent 100%
);
box-shadow:
0 0 26px
rgba(22, 135, 255, 0.28);
transform:
rotate(-3.5deg);
opacity: 0.82;
}
.pml-hero-curve--crossing-ribbons
.pml-hero-curve__surface::after {
left: -14%;
top: 48%;
width: 130%;
height: 28px;
border-radius: 999px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(255, 122, 24, 0.08) 10%,
var(--pml-curve-gold) 38%,
rgba(125, 77, 255, 0.62) 66%,
rgba(0, 132, 255, 0.1) 92%,
transparent 100%
);
box-shadow:
0 0 24px
rgba(255, 169, 0, 0.2);
transform:
rotate(3deg);
opacity: 0.78;
}
/* =========================================================
DESIGN 4  CONVEX DROP
---------------------------------------------------------
The hero background drops into the next section.
Gives a bold downward rounded transition.
========================================================= */
.pml-hero-curve--convex-drop
.pml-hero-curve__surface {
background:
var(--pml-curve-bg);
}
.pml-hero-curve--convex-drop
.pml-hero-curve__surface::before {
left: -8%;
top: -98px;
width: 116%;
height: 172px;
border-radius:
0 0 50% 50% /
0 0 100% 100%;
background:
linear-gradient(
100deg,
var(--pml-curve-blue-2),
var(--pml-curve-cyan) 48%,
var(--pml-curve-gold) 78%,
var(--pml-curve-gold-2)
);
box-shadow:
0 14px 42px
rgba(22, 135, 255, 0.2);
}
.pml-hero-curve--convex-drop
.pml-hero-curve__surface::after {
left: -7%;
top: -104px;
width: 114%;
height: 170px;
border-radius:
0 0 50% 50% /
0 0 100% 100%;
background:
radial-gradient(
circle at 30% 70%,
rgba(0, 132, 255, 0.1),
transparent 38%
),
linear-gradient(
135deg,
#01302e,
#00201c
);
}
/* =========================================================
DESIGN 5  SIDE SWEEP
---------------------------------------------------------
An asymmetric curve sweeps from lower left to upper right.
========================================================= */
.pml-hero-curve--side-sweep
.pml-hero-curve__surface {
background:
linear-gradient(
105deg,
rgba(0, 94, 255, 0.04),
var(--pml-curve-blue) 30%,
var(--pml-curve-cyan) 58%,
var(--pml-curve-gold) 82%,
rgba(255, 122, 24, 0.08)
);
clip-path:
ellipse(
92% 145%
at 24% 100%
);
-webkit-clip-path:
ellipse(
92% 145%
at 24% 100%
);
}
.pml-hero-curve--side-sweep
.pml-hero-curve__surface::before {
inset: -10px 0 0;
background:
linear-gradient(
100deg,
transparent 2%,
rgba(22, 135, 255, 0.58) 30%,
rgba(21, 188, 207, 0.4) 58%,
rgba(255, 169, 0, 0.55) 82%,
transparent 100%
);
filter: blur(18px);
opacity: 0.55;
clip-path:
ellipse(
92% 145%
at 24% 100%
);
-webkit-clip-path:
ellipse(
92% 145%
at 24% 100%
);
}
.pml-hero-curve--side-sweep
.pml-hero-curve__surface::after {
inset: 5px 0 0;
background:
radial-gradient(
circle at 68% 0%,
rgba(0, 132, 255, 0.08),
transparent 34%
),
var(--pml-curve-bg);
clip-path:
ellipse(
92% 145%
at 24% 100%
);
-webkit-clip-path:
ellipse(
92% 145%
at 24% 100%
);
}
/* =========================================================
DESIGN 6  NEON HORIZON
---------------------------------------------------------
A subtle curved horizon with blended ambient light.
Best for a clean and minimal transition.
========================================================= */
.pml-hero-curve--neon-horizon
.pml-hero-curve__surface {
background:
radial-gradient(
ellipse 70% 80% at 50% 115%,
rgba(0, 132, 255, 0.12),
transparent 62%
),
var(--pml-curve-bg);
}
.pml-hero-curve--neon-horizon
.pml-hero-curve__surface::before {
left: -5%;
bottom: 30%;
width: 110%;
height: 3px;
border-radius: 50%;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(0, 94, 255, 0.4) 10%,
var(--pml-curve-blue) 32%,
var(--pml-curve-cyan) 52%,
var(--pml-curve-gold) 74%,
rgba(255, 122, 24, 0.36) 90%,
transparent 100%
);
box-shadow:
0 0 12px
rgba(22, 135, 255, 0.5),
0 0 30px
rgba(255, 169, 0, 0.18);
transform:
perspective(500px)
rotateX(50deg)
scaleX(1.05);
}
.pml-hero-curve--neon-horizon
.pml-hero-curve__surface::after {
left: 10%;
right: 10%;
bottom: 5%;
height: 60%;
border-radius: 50%;
background:
radial-gradient(
ellipse at center,
rgba(22, 135, 255, 0.12),
rgba(21, 188, 207, 0.05) 35%,
transparent 72%
);
filter: blur(16px);
}
/* =========================================================
TABLET ADJUSTMENTS
========================================================= */
@media (max-width: 991px) {
.pml-hero-curve {
height: 76px;
}
.pml-hero-curve--double-wave
.pml-hero-curve__surface {
bottom: -66px;
height: 126px;
}
.pml-hero-curve--layered-arcs
.pml-hero-curve__surface::before,
.pml-hero-curve--layered-arcs
.pml-hero-curve__surface::after {
height: 130px;
}
.pml-hero-curve--convex-drop
.pml-hero-curve__surface::before,
.pml-hero-curve--convex-drop
.pml-hero-curve__surface::after {
height: 146px;
}
}
/* =========================================================
MOBILE ADJUSTMENTS
========================================================= */
@media (max-width: 575px) {
.pml-hero-curve {
height: 56px;
}
.pml-hero-curve--double-wave
.pml-hero-curve__surface {
left: -15%;
width: 130%;
bottom: -76px;
height: 118px;
}
.pml-hero-curve--layered-arcs
.pml-hero-curve__surface::before {
left: -30%;
width: 100%;
bottom: -78px;
}
.pml-hero-curve--layered-arcs
.pml-hero-curve__surface::after {
right: -32%;
width: 104%;
bottom: -76px;
}
.pml-hero-curve--crossing-ribbons
.pml-hero-curve__surface::before {
height: 22px;
}
.pml-hero-curve--crossing-ribbons
.pml-hero-curve__surface::after {
height: 19px;
}
.pml-hero-curve--convex-drop
.pml-hero-curve__surface::before {
top: -88px;
height: 128px;
}
.pml-hero-curve--convex-drop
.pml-hero-curve__surface::after {
top: -93px;
height: 126px;
}
.pml-hero-curve--side-sweep
.pml-hero-curve__surface,
.pml-hero-curve--side-sweep
.pml-hero-curve__surface::before,
.pml-hero-curve--side-sweep
.pml-hero-curve__surface::after {
clip-path:
ellipse(
118% 155%
at 18% 100%
);
-webkit-clip-path:
ellipse(
118% 155%
at 18% 100%
);
}
.pml-hero-curve--neon-horizon
.pml-hero-curve__surface::before {
bottom: 34%;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.pml-hero-curve__surface,
.pml-hero-curve__surface::before,
.pml-hero-curve__surface::after {
animation: none !important;
transition: none !important;
}
}
/* =========================================================
9. CTA & SIGNUP - UNIFIED SECTION
========================================================= */
.pml-cta {
position: relative;
min-height: 480px;
display: flex;
align-items: center;
overflow: hidden;
background: #141414;
padding: 60px 0;
}
.pml-cta__bg {
position: absolute;
inset: 0;
background: url("../media/banner/detail/manga.png") center / cover no-repeat;
opacity: 0.8;
}
.pml-cta__shade {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, #101011 0%, rgb(32 32 32 / 86%) 48%, rgb(3 3 3 / 30%) 100%),
linear-gradient(180deg, #121313 0%, transparent 30%, #0a0a0a 100%);
}
.pml-cta__content {
position: relative;
z-index: 2;
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.pml-cta__title {
margin: 0 0 16px;
font-size: clamp(32px, 4vw, 48px);
font-weight: 800;
line-height: 1.15;
background: linear-gradient(135deg, #ff9f06, #00c4ff, #ffd93d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pml-cta__description {
margin: 0 0 32px;
color: rgba(255, 255, 255, 0.75);
font-size: clamp(16px, 1.2vw, 20px);
line-height: 1.8;
}
.pml-cta__button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 30px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
color: #000000;
background: linear-gradient(135deg, #c35410, #efa904);
border: none;
border-radius: 18px;
cursor: pointer;
transition: all 300ms ease;
text-decoration: none;
box-shadow: 0 4px 20px rgb(243 142 28 / 30%);
}
.pml-cta__button:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 40px rgb(23 23 24 / 15%);
}
.pml-cta__button:active {
transform: scale(0.96);
}
.pml-cta__divider {
display: flex;
align-items: center;
gap: 24px;
margin: 40px 0 32px;
color: rgba(255, 255, 255, 0.2);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.pml-cta__divider::before,
.pml-cta__divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
.pml-cta__form {
display: flex;
gap: 12px;
max-width: 540px;
margin: 0 auto;
}
.pml-cta__form-field {
flex: 1;
position: relative;
}
.pml-cta__form-input {
width: 100%;
padding: 16px 20px;
font-size: 16px;
font-family: inherit;
color: #ffffff;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgb(255 255 255 / 5%);
border-radius: 18px;
transition: all 250ms ease;
outline: none;
}
.pml-cta__form-input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.pml-cta__form-input:focus {
border-color: rgb(249 166 59 / 40%);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 4px rgb(255 186 107 / 10%);
}
.pml-cta__form-input:focus:invalid {
border-color: rgb(255 179 54 / 35%);
box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.15);
}
.pml-cta__form-input:valid:not(:placeholder-shown) {
border-color: rgba(78, 84, 200, 0.4);
box-shadow: 0 0 0 4px rgba(78, 84, 200, 0.08);
}
.pml-cta__form-submit {
flex: 0 0 auto;
padding: 10px 22px;
font-size: 14px;
font-weight: 500;
font-family: inherit;
color: #ffffff;
background: linear-gradient(135deg, #55617a66, #c1c8cd);
border: none;
border-radius: 18px;
cursor: pointer;
transition: all 300ms ease;
white-space: nowrap;
box-shadow: 0 4px 20px rgb(128 123 123 / 25%);
}
.pml-cta__form-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(78, 84, 200, 0.35);
}
.pml-cta__form-submit:active {
transform: scale(0.96);
}
.pml-cta__form-message {
margin: 12px 0 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
min-height: 20px;
}
.pml-cta__form-message--error {
color: #ff6b6b;
}
.pml-cta__form-message--success {
color: #00d188;
}
/* =========================================================
RESPONSIVE - CTA
========================================================= */
/* ---------- TABLET (992px and below) ---------- */
@media (max-width: 991.98px) {
.pml-cta {
min-height: 400px;
padding: 50px 0;
}
.pml-cta__title {
font-size: clamp(28px, 3.5vw, 38px);
}
}
/* ---------- MOBILE (600px and below) ---------- */
@media (max-width: 599.98px) {
.pml-cta {
min-height: auto;
padding: 40px 20px;
}
.pml-cta__title {
font-size: clamp(24px, 5vw, 30px);
}
.pml-cta__description {
font-size: 15px;
margin-bottom: 24px;
}
.pml-cta__button {
width: 100%;
justify-content: center;
padding: 14px 24px;
font-size: 15px;
}
.pml-cta__divider {
margin: 28px 0 24px;
font-size: 12px;
gap: 16px;
}
.pml-cta__form {
flex-direction: column;
gap: 10px;
}
.pml-cta__form-input {
padding: 14px 16px;
font-size: 15px;
}
.pml-cta__form-submit {
width: 100%;
justify-content: center;
padding: 14px 24px;
font-size: 15px;
}
}
/* ---------- SMALL MOBILE (400px and below) ---------- */
@media (max-width: 399.98px) {
.pml-cta {
padding: 30px 16px;
}
.pml-cta__title {
font-size: 22px;
}
.pml-cta__description {
font-size: 14px;
}
.pml-cta__button {
font-size: 14px;
padding: 12px 20px;
}
.pml-cta__form-input {
font-size: 14px;
padding: 12px 14px;
}
.pml-cta__form-submit {
font-size: 14px;
padding: 12px 20px;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.pml-cta__button,
.pml-cta__form-submit,
.pml-cta__form-input {
transition: none !important;
}
.pml-cta__button:hover,
.pml-cta__form-submit:hover {
transform: none !important;
}
}
.pml-footer{
padding:34px 0;
background:#19181870;
border-top:1px solid rgba(255,255,255,.08);
}
.pml-footer__top,
.pml-footer__bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}
.pml-footer__top{
padding-bottom:24px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.pml-footer__bottom{
padding-top:24px;
}
.pml-footer__links,
.pml-socials{
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
}
.pml-footer a{
color:var(--pml-muted);
transition:.2s ease;
}
.pml-footer a:hover{
color:#fff;
}
.pml-footer p{
margin:0;
color:var(--pml-muted);
}
/* =========================================================
6. PROMOTIONAL BANNER - MODERN GLASS
========================================================= */
.pml-promo {
position: relative;
z-index: 6;
padding: 16px 0 32px;
max-width: 720px;
margin: 0 auto;
}
.pml-promo-card {
position: relative;
width: 100%;
transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pml-promo-card:hover {
transform: scale(1.01) translateY(-2px);
}
.pml-promo-card__surface {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px 16px 82px;
min-height: 80px;
background: linear-gradient(
135deg,
rgb(14 0 255 / 36%),
rgb(47 22 170 / 15%)
);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}
/* Animated gradient accent - new colors */
.pml-promo-card__surface::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 120%;
height: 200%;
background: radial-gradient(
ellipse at 70% 50%,
rgb(248 40 195 / 28%),
rgb(73 86 216 / 11%),
rgb(8 8 8 / 0%) 70%
);
pointer-events: none;
animation: promoGlow 8s ease-in-out infinite alternate;
}
@keyframes promoGlow {
0% {
transform: translateX(-20%) scale(1) rotate(0deg);
opacity: 0.3;
}
100% {
transform: translateX(20%) scale(1.3) rotate(2deg);
opacity: 0.8;
}
}
.pml-promo-card__art {
position: absolute;
top: 50%;
left: 16px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
color: #0098ff;
background: linear-gradient(
135deg,
rgb(7 162 243 / 20%),
rgb(22 29 173 / 76%)
);
border: 1px solid rgb(33 178 249 / 30%);
border-radius: 14px;
font-size: 22px;
transform: translateY(-50%);
transition: all 300ms ease;
box-shadow: 0 0 30px rgba(255, 107, 107, 0.1);
}
.pml-promo-card:hover .pml-promo-card__art {
transform: translateY(-50%) scale(1.05) rotate(-4deg);
border-color: rgba(78, 84, 200, 0.5);
box-shadow: 0 0 40px rgba(78, 84, 200, 0.2);
}
.pml-promo-card__content {
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
}
.pml-promo-card__eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 2px;
color: #ffffff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
background: rgb(18 147 180 / 39%);
padding: 2px 10px 2px 8px;
border-radius: 20px;
border: 1px solid rgb(46 233 245 / 15%);
}
.pml-promo-card__eyebrow::before {
content: 'â—†';
font-size: 8px;
}
.pml-promo-card__title {
margin: 4px 0 0;
color: #ffffff;
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
background: linear-gradient(135deg, #ffffff, #ffa415);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pml-promo-card__title strong {
background: linear-gradient(135deg, #ffb43d, #6bebff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
}
.pml-promo-card__description {
display: none;
}
.pml-promo-card__button {
flex: 0 0 auto;
position: relative;
z-index: 1;
min-height: 36px;
padding: 6px 18px;
color: #ffffff;
font-size: 13px;
font-weight: 700;
font-family: inherit;
background: linear-gradient(
135deg,
rgb(107 230 255 / 25%),
rgb(28 110 244 / 25%)
);
border: 1px solid rgb(32 173 255 / 30%);
border-radius: 8px;
cursor: pointer;
transition: all 250ms ease;
white-space: nowrap;
letter-spacing: 0.02em;
}
.pml-promo-card__button:hover {
background: linear-gradient(
135deg,
rgb(255 203 107 / 40%),
rgb(219 149 28 / 40%)
);
border-color: rgba(78, 84, 200, 0.6);
transform: translateY(-1px) scale(1.02);
box-shadow: 0 4px 20px rgb(69 76 202 / 25%);
}
.pml-promo-card__button:active {
transform: scale(0.96);
}
/* Decorative corner accent - new color */
.pml-promo-card__surface::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 60px;
height: 60px;
background: radial-gradient(
circle at bottom right,
rgb(255 193 49 / 8%),
transparent 70%
);
pointer-events: none;
border-radius: 0 0 16px 0;
}
/* =========================================================
7. BENEFIT GRID - NEON GLOW
========================================================= */
.pml-benefit-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 28px;
gap: 16px;
}
.pml-benefit-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 280px;
padding: 28px 24px 98px;
overflow: hidden;
background: linear-gradient(
145deg,
rgb(21 17 98 / 90%),
rgb(12 12 71 / 95%)
);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 18px;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.pml-benefit-card::before {
position: absolute;
inset: 0;
content: "";
background: radial-gradient(
circle at 100% 100%,
rgba(78, 84, 200, 0.2),
transparent 50%
);
pointer-events: none;
}
/* Individual card glow colors */
.pml-benefit-card:nth-child(1)::before {
background: radial-gradient(
circle at 100% 100%,
rgb(233 223 223 / 15%),
#10101000 50%
);
}
.pml-benefit-card:nth-child(2)::before {
background: radial-gradient(
circle at 100% 100%,
rgb(247 163 4 / 25%),
transparent 50%
);
}
.pml-benefit-card:nth-child(3)::before {
background: radial-gradient(
circle at 100% 100%,
rgba(78, 84, 200, 0.25),
transparent 50%
);
}
.pml-benefit-card:nth-child(4)::before {
background: radial-gradient(
circle at 100% 100%,
rgba(0, 206, 209, 0.2),
transparent 50%
);
}
.pml-benefit-card:hover {
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-4px) scale(1.01);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.pml-benefit-card__content {
position: relative;
z-index: 2;
}
.pml-benefit-card__title {
margin: 0;
color: #ffffff;
font-size: 23px;
font-weight: 800;
line-height: 1.25;
}
.pml-benefit-card:nth-child(1) .pml-benefit-card__title {
color: #ffffff;
}
.pml-benefit-card:nth-child(2) .pml-benefit-card__title {
color: #ffa208;
}
.pml-benefit-card:nth-child(3) .pml-benefit-card__title {
color: #ffffff;
}
.pml-benefit-card:nth-child(4) .pml-benefit-card__title {
color: #00d1d1;
}
.pml-benefit-card__description {
margin: 14px 0 0;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
.pml-benefit-card__icon {
position: absolute;
right: 22px;
bottom: 20px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
color: #ffffff;
background: linear-gradient(
135deg,
rgba(255, 107, 107, 0.2),
rgb(44 48 133 / 30%)
);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
font-size: 28px;
transition: all 300ms ease;
}
.pml-benefit-card:nth-child(1) .pml-benefit-card__icon {
background: linear-gradient(135deg, rgb(230 228 228 / 30%), rgb(216 216 216 / 10%));
border-color: rgb(195 190 190 / 30%);
color: #b7b7b7;
}
.pml-benefit-card:nth-child(2) .pml-benefit-card__icon {
background: linear-gradient(135deg, rgb(246 140 7 / 30%), rgb(249 154 4 / 10%));
border-color: rgb(242 164 6 / 24%);
color: #ffaf08;
}
.pml-benefit-card:nth-child(3) .pml-benefit-card__icon {
background: linear-gradient(135deg, rgba(78, 84, 200, 0.3), rgba(78, 84, 200, 0.1));
border-color: rgb(98 103 200 / 30%);
color: #f0f4f5;
}
.pml-benefit-card:nth-child(4) .pml-benefit-card__icon {
background: linear-gradient(135deg, rgba(0, 206, 209, 0.3), rgba(0, 206, 209, 0.1));
border-color: rgb(4 212 215 / 30%);
color: #09cfd2;
}
.pml-benefit-card:hover .pml-benefit-card__icon {
transform: scale(1.1) rotate(-8deg);
}
/* =========================================================
8. FAQ SECTION - DARK THEME
========================================================= */
.pml-faq-list {
display: grid;
width: 100%;
margin-top: 28px;
gap: 8px;
}
.pml-faq-item {
width: 100%;
}
.pml-faq-item__heading {
margin: 0;
}
.pml-faq-item__button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 24px;
color: #ffffff;
background: rgb(255 255 255 / 18%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 1.35;
text-align: left;
cursor: pointer;
transition: all 220ms ease;
}
.pml-faq-item__button:hover {
background: rgb(32 32 35 / 59%);
border-color: #ffa90073;
}
.pml-faq-item__button[aria-expanded="true"] {
background: linear-gradient(135deg, rgb(0 41 139 / 15%), rgb(124 0 206 / 15%));
border-color: rgb(102 102 101 / 33%);
}
.pml-faq-item__button:focus-visible {
position: relative;
z-index: 3;
outline: 2px solid #fba429;
outline-offset: 2px;
}
.pml-faq-item__question {
min-width: 0;
}
.pml-faq-item__icon {
position: relative;
display: block;
width: 30px;
height: 30px;
margin-left: 18px;
flex: 0 0 30px;
transition: transform 220ms ease;
color: #ffb808;
}
.pml-faq-item__icon::before,
.pml-faq-item__icon::after {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 2px;
content: "";
background: currentColor;
border-radius: 999px;
transform: translate(-50%, -50%);
}
.pml-faq-item__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.pml-faq-item__button[aria-expanded="true"] .pml-faq-item__icon {
transform: rotate(45deg);
color: #ffffff;
}
.pml-faq-item__panel {
display: grid;
grid-template-rows: 0fr;
margin-top: 1px;
color: #ffffff;
background: rgb(93 93 96 / 12%);
border-radius: 0 0 12px 12px;
overflow: hidden;
opacity: 0;
transition: grid-template-rows 240ms ease, opacity 240ms ease;
}
.pml-faq-item__panel[aria-hidden="false"] {
grid-template-rows: 1fr;
opacity: 1;
}
.pml-faq-item__panel-inner {
min-height: 0;
padding: 0 24px;
overflow: hidden;
transition: padding 240ms ease;
}
.pml-faq-item__panel[aria-hidden="false"] .pml-faq-item__panel-inner {
padding: 24px;
}
.pml-faq-item__panel p {
margin: 0;
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
line-height: 1.6;
}
.pml-faq-item__panel p + p {
margin-top: 18px;
}
/* =========================================================
10. DIALOG/MODAL - NEON
========================================================= */
.pml-dialog[hidden] {
display: none;
}
.pml-dialog {
position: fixed;
inset: 0;
z-index: 10020;
}
.pml-dialog__backdrop {
position: absolute;
inset: 0;
background: rgb(0 0 0 / 75%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.pml-dialog__positioner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow-y: auto;
}
.pml-dialog__panel {
position: relative;
width: min(100%, 560px);
max-height: calc(100vh - 48px);
overflow-y: auto;
color: #ffffff;
background: linear-gradient(
145deg,
rgb(18 18 52 / 95%),
rgb(6 6 23)
);
border: 1px solid rgb(255 172 34 / 20%);
border-radius: 18px;
box-shadow:
0 30px 90px rgb(0 0 0 / 67%),
0 0 60px rgba(255, 107, 107, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pml-dialog__content {
padding: 36px;
}
.pml-dialog__close {
position: absolute;
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: #ffffff;
background: rgb(255 160 0 / 15%);
border: 1px solid rgba(255, 107, 107, 0.2);
border-radius: 50%;
cursor: pointer;
transition: all 200ms ease;
}
.pml-dialog__close:hover {
background: rgb(255 214 107 / 30%);
transform: rotate(90deg);
}
.pml-dialog__badge {
display: inline-flex;
padding: 6px 12px;
color: #05b7fd;
background: rgb(71 210 255 / 12%);
border: 1px solid rgb(61 226 255 / 18%);
border-radius: 999px;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pml-dialog__title {
margin: 18px 52px 0 0;
font-size: clamp(25px, 4vw, 34px);
line-height: 1.2;
background: linear-gradient(135deg, #ffb30a, #4e54c8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pml-dialog__description {
margin: 18px 0 0;
color: rgb(255 255 255 / 73%);
line-height: 1.65;
}
.pml-dialog__features {
display: grid;
margin: 22px 0 0;
padding-left: 22px;
gap: 10px;
color: rgba(255, 255, 255, 0.85);
}
.pml-dialog__features li {
list-style: none;
position: relative;
padding-left: 24px;
}
.pml-dialog__features li::before {
content: '✦';
position: absolute;
left: 0;
color: #f7c111;
}
.pml-dialog__actions {
display: flex;
flex-wrap: wrap;
margin-top: 28px;
gap: 12px;
}
body.pml-dialog-open {
overflow: hidden;
}
/* =========================================================
RESPONSIVE BREAKPOINTS
========================================================= */
/* ---------- TABLET (992px and below) ---------- */
@media (max-width: 991.98px) {
.pml-benefit-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pml-promo-card__surface {
padding-left: 112px;
}
.pml-promo-card__art {
left: 20px;
}
}
/* ---------- MOBILE (600px and below) ---------- */
@media (max-width: 599.98px) {
/* === PROMO BANNER === */
.pml-promo {
padding-top: 16px;
max-width: 100%;
padding-left: 12px;
padding-right: 12px;
}
.pml-promo-card__art {
top: 20px;
left: 18px;
width: 58px;
height: 58px;
border-radius: 18px;
font-size: 25px;
transform: none;
}
.pml-promo-card:hover .pml-promo-card__art {
transform: scale(1.05) rotate(-4deg);
}
.pml-promo-card__surface {
flex-direction: column;
align-items: stretch;
padding: 94px 18px 20px;
gap: 18px;
min-height: auto;
}
.pml-promo-card__content {
text-align: center;
}
.pml-promo-card__eyebrow {
justify-content: center;
font-size: 9px;
}
.pml-promo-card__title {
font-size: 18px;
}
.pml-promo-card__button {
width: 100%;
justify-content: center;
text-align: center;
min-height: 44px;
font-size: 14px;
}
/* === BENEFIT GRID === */
.pml-benefit-grid {
grid-template-columns: 1fr;
gap: 14px;
margin-top: 20px;
}
.pml-benefit-card {
min-height: 220px;
padding: 22px 20px 82px;
}
.pml-benefit-card__title {
font-size: 20px;
}
.pml-benefit-card__description {
font-size: 15px;
}
.pml-benefit-card__icon {
width: 54px;
height: 54px;
font-size: 23px;
right: 18px;
bottom: 18px;
border-radius: 16px;
}
/* === FAQ === */
.pml-faq-list {
margin-top: 20px;
}
.pml-faq-item__button {
padding: 19px 16px;
font-size: 16px;
}
.pml-faq-item__icon {
width: 22px;
height: 22px;
flex-basis: 22px;
margin-left: 12px;
}
.pml-faq-item__panel[aria-hidden="false"] .pml-faq-item__panel-inner {
padding: 18px 16px;
}
.pml-faq-item__panel-inner {
padding-inline: 16px;
}
.pml-faq-item__panel p {
font-size: 15px;
}
/* === FOOTER === */
.pml-footer-signup {
padding: 44px 0 50px;
}
.pml-footer-signup__title {
font-size: 18px;
padding: 0 16px;
}
/* === DIALOG === */
.pml-dialog__positioner {
align-items: flex-end;
padding: 10px;
}
.pml-dialog__panel {
width: 100%;
max-height: 88vh;
border-radius: 18px 18px 8px 8px;
}
.pml-dialog__content {
padding: 28px 20px;
}
.pml-dialog__title {
font-size: 22px;
margin-right: 40px;
}
.pml-dialog__actions {
flex-direction: column;
}
.pml-dialog__actions .pml-btn {
width: 100%;
}
}
/* ---------- SMALL MOBILE (400px and below) ---------- */
@media (max-width: 399.98px) {
.pml-promo-card__surface {
padding: 80px 14px 16px;
gap: 14px;
}
.pml-promo-card__art {
width: 48px;
height: 48px;
font-size: 20px;
top: 16px;
left: 14px;
}
.pml-promo-card__title {
font-size: 16px;
}
.pml-promo-card__eyebrow {
font-size: 8px;
padding: 1px 8px;
}
.pml-promo-card__button {
font-size: 12px;
min-height: 38px;
}
.pml-benefit-card {
padding: 18px 16px 72px;
min-height: 180px;
}
.pml-benefit-card__title {
font-size: 17px;
}
.pml-benefit-card__description {
font-size: 13px;
margin-top: 10px;
}
.pml-benefit-card__icon {
width: 44px;
height: 44px;
font-size: 19px;
right: 14px;
bottom: 14px;
border-radius: 12px;
}
.pml-faq-item__button {
padding: 16px 12px;
font-size: 14px;
}
.pml-dialog__content {
padding: 20px 16px;
}
.pml-dialog__title {
font-size: 19px;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.pml-promo-card,
.pml-promo-card__button,
.pml-promo-card__art,
.pml-benefit-card,
.pml-faq-item__button,
.pml-faq-item__icon,
.pml-faq-item__panel,
.pml-faq-item__panel-inner,
.pml-dialog__close {
transition: none !important;
animation: none !important;
}
.pml-promo-card:hover,
.pml-benefit-card:hover {
transform: none !important;
}
.pml-promo-card__surface::before {
animation: none !important;
}
}
:root{
--pml-preview-width: 680px;
--pml-preview-media-ratio: 16 / 8.7;
--pml-preview-radius: 22px;
--pml-preview-padding: 20px;
--pml-access-width: 430px;
--pml-preview-bg: #0b3421;
--pml-preview-bg-deep: #042f20;
--pml-preview-surface:
rgba(255, 255, 255, .08);
--pml-preview-border:
rgba(255, 255, 255, .14);
--pml-preview-text: #ffffff;
--pml-preview-muted: #9db3ca;
}
body.pml-preview-open,
body.pml-lock-open{
overflow: hidden;
}
.pml-preview{
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 20px;
opacity: 1;
visibility: visible;
transition:
opacity .24s ease,
visibility .24s ease;
}
.pml-preview[hidden]{
display: none !important;
}
.pml-preview__overlay{
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(
circle at 50% 12%,
rgba(0, 132, 255, .18),
transparent 36%
),
radial-gradient(
circle at 82% 74%,
rgba(255,169,0,.10),
transparent 30%
),
rgba(0,5,13,.88);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.pml-preview__card{
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: min(calc(100vw - 40px),var(--pml-preview-width));
max-height: calc(100dvh - 40px);
overflow-x: hidden;
overflow-y: auto;
color: var(--pml-preview-text);
/*background:
radial-gradient(
circle at 90% 100%,
rgba(0, 132, 255, .12),
transparent 38%
),
linear-gradient(
180deg,
rgba(8, 30, 54, .99),
rgba(2, 10, 21, .99)
);*/
background:
linear-gradient(
180deg,
rgba(1, 40, 48, 0.98) 0%,
rgba(1, 29, 36, 0.99) 100%
);
border: 1px solid var(--pml-preview-border);
border-radius: var(--pml-preview-radius);
box-shadow:
0 42px 120px rgba(0, 0, 0, .72),
0 0 0 1px rgba(255, 255, 255, .025),
inset 0 1px 0 rgba(255, 255, 255, .08);
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .2) transparent;
transform: translateY(0) scale(1);
animation:
pmlPreviewEnter
.34s
cubic-bezier(.2, .8, .2, 1);
box-sizing: border-box;
}
.pml-preview__card::-webkit-scrollbar{
width: 6px;
}
.pml-preview__card::-webkit-scrollbar-track{
background: transparent;
}
.pml-preview__card::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, .18);
border-radius: 999px;
}
@keyframes pmlPreviewEnter{
from{
opacity: 0;
transform:
translateY(18px)
scale(.975);
}
to{
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
.pml-preview__close,
.pml-preview__mute {
position: absolute;
top: 16px;
z-index: 90;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
min-width: 46px;
min-height: 46px;
padding: 0;
margin: 0;
color: #ffffff;
background: rgb(2 10 22 / 14%);
border: 1px solid rgb(255 255 255 / 18%);
border-radius: 50%;
font-size: 17px;
line-height: 1;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.38);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transform: translateZ(0);
transition:
transform 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.pml-preview__close {
right: 16px;
}
.pml-preview__mute {
left: 16px;
}
.pml-preview__close > i,
.pml-preview__mute > i {
display: block;
line-height: 1;
pointer-events: none;
}
.pml-preview__close:hover,
.pml-preview__mute:hover {
color: #06172a;
background: var(--pml-gold, #ffa900);
border-color: var(--pml-gold-mute, #f0bb54);
transform:
translateZ(0)
scale(1.06);
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.42);
}
.pml-preview__close:active,
.pml-preview__mute:active {
transform:
translateZ(0)
scale(0.96);
}
.pml-preview__close:focus,
.pml-preview__mute:focus {
outline: none;
}
.pml-preview__close:focus-visible,
.pml-preview__mute:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
.pml-preview__mute[data-muted="true"] {
color: #1f2021;
background: var(--pml-gold, #ffa900);
border-color: var(--pml-gold, #ffa900);
}
.pml-preview__mute[data-muted="false"] {
color: #ffffff;
background: rgba(2, 10, 22, 0.78);
border-color: rgba(255, 255, 255, 0.18);
}
.pml-preview__mute[data-muted="false"]:hover {
color: #06172a;
background: var(--pml-gold, #ffa900);
border-color: var(--pml-gold, #ffa900);
}
.pml-preview__icon-btn.pml-tooltip {
position: relative;
}
.pml-preview__close.pml-tooltip,
.pml-preview__mute.pml-tooltip {
position: absolute;
}
.pml-tooltip::before {
position: absolute;
left: 50%;
z-index: 2000;
width: max-content;
max-width: 220px;
padding: 8px 11px;
content: attr(data-tooltip);
color: #ffffff;
background: rgb(29 30 30 / 90%);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.4);
font-size: 13px;
font-weight: 400;
line-height: 1.2;
text-align: center;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
opacity 160ms ease,
visibility 160ms ease,
transform 160ms ease;
}
.pml-tooltip::after {
position: absolute;
left: 50%;
z-index: 2001;
width: 0;
height: 0;
content: "";
border: 6px solid transparent;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 160ms ease,
visibility 160ms ease,
transform 160ms ease;
}
.pml-tooltip::before {
bottom: calc(100% + 12px);
transform:
translateX(-50%)
translateY(6px);
}
.pml-tooltip::after {
bottom: calc(100% + 1px);
border-top-color: rgb(29 30 30 / 90%);
transform:
translateX(-50%)
translateY(6px);
}
/* =========================================================
TOP CONTROL TOOLTIPS  BELOW BUTTON
========================================================= */
.pml-preview__close.pml-tooltip::before,
.pml-preview__mute.pml-tooltip::before {
top: calc(100% + 12px);
bottom: auto;
transform:
translateY(-6px);
}
.pml-preview__close.pml-tooltip::after,
.pml-preview__mute.pml-tooltip::after {
top: calc(100% + 1px);
bottom: auto;
border-top-color: transparent;
border-bottom-color: rgb(29 30 30 / 90%);
transform:
translateY(-6px);
}
/* =========================================================
TOP-LEFT MUTE TOOLTIP ALIGNMENT
========================================================= */
.pml-preview__mute.pml-tooltip::before {
left: 0;
right: auto;
transform:
translateX(0)
translateY(-6px);
}
.pml-preview__mute.pml-tooltip::after {
left: 16px;
right: auto;
transform:
translateX(0)
translateY(-6px);
}
/* =========================================================
TOP-RIGHT CLOSE TOOLTIP ALIGNMENT
========================================================= */
.pml-preview__close.pml-tooltip::before {
right: 0;
left: auto;
transform:
translateX(0)
translateY(-6px);
}
.pml-preview__close.pml-tooltip::after {
right: 16px;
left: auto;
transform:
translateX(0)
translateY(-6px);
}
/* =========================================================
TOOLTIP VISIBLE STATE
========================================================= */
.pml-tooltip:hover::before,
.pml-tooltip:hover::after,
.pml-tooltip:focus-visible::before,
.pml-tooltip:focus-visible::after {
opacity: 1;
visibility: visible;
}
.pml-tooltip:hover::before,
.pml-tooltip:hover::after,
.pml-tooltip:focus-visible::before,
.pml-tooltip:focus-visible::after {
transform:
translateX(-50%)
translateY(0);
}
.pml-preview__mute.pml-tooltip:hover::before,
.pml-preview__mute.pml-tooltip:hover::after,
.pml-preview__mute.pml-tooltip:focus-visible::before,
.pml-preview__mute.pml-tooltip:focus-visible::after,
.pml-preview__close.pml-tooltip:hover::before,
.pml-preview__close.pml-tooltip:hover::after,
.pml-preview__close.pml-tooltip:focus-visible::before,
.pml-preview__close.pml-tooltip:focus-visible::after {
transform:
translateX(0)
translateY(0);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575px) {
.pml-preview__close,
.pml-preview__mute {
top: 12px;
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
font-size: 15px;
}
.pml-preview__close {
right: 12px;
}
.pml-preview__mute {
left: 12px;
}
.pml-tooltip::before {
max-width: 170px;
white-space: normal;
}
}
/* =========================================================
TOUCH DEVICES
========================================================= */
@media (hover: none) {
.pml-tooltip::before,
.pml-tooltip::after {
display: none;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.pml-preview__close,
.pml-preview__mute,
.pml-tooltip::before,
.pml-tooltip::after {
transition: none;
}
}
/* =========================================================
7. MEDIA AREA
========================================================= */
.pml-preview__media{
position: relative;
flex: 0 0 auto;
display: block;
width: 100%;
aspect-ratio: var(--pml-preview-media-ratio);
overflow: hidden;
/*background:
#012830;*/
/*background:
linear-gradient(
180deg,
rgba(1, 40, 48, 0) 0%,
rgba(1, 40, 48, 0.08) 30%,
rgba(1, 40, 48, 0.34) 62%,
rgba(1, 40, 48, 0.78) 86%,
rgba(1, 40, 48, 0.96) 100%
);*/
background:
radial-gradient(
circle at 50% 35%,
rgba(0, 132, 255, 0.08),
transparent 48%
),
#020812;
isolation:
isolate;
box-sizing: border-box;
}
.pml-preview__shell{
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
/*background:
#07343d;*/
background: #020812;
}
.pml-preview__media,
.pml-preview__shell {
border-bottom: 0;
box-shadow: none;
outline: none;
}
/* =========================================================
8. LIGHT CINEMATIC VIDEO OVERLAYS
---------------------------------------------------------
No heavy black side edges.
Only a soft bottom fade remains.
========================================================= */
.pml-preview__media::before{
position: absolute;
inset: 0;
z-index: 6;
content: "";
background:
linear-gradient(
90deg,
rgba(1, 40, 48, .08) 0%,
transparent 16%,
transparent 84%,
rgba(1, 40, 48, .08) 100%
);
pointer-events: none;
}
/*.pml-preview__media::after{
position: absolute;
inset: auto 0 0;
z-index: 7;
height: 48%;
content: "";
background:
linear-gradient(
180deg,
transparent 0%,
rgba(1, 40, 48, .18) 46%,
rgba(1, 40, 48, .88) 100%
);
pointer-events: none;
}*/
/* =========================================================
MEDIA BOTTOM FADE  SINGLE FINAL VERSION
========================================================= */
.pml-preview__media::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 7;
height: 48%;
content: "";
background:
linear-gradient(
180deg,
rgba(1, 40, 48, 0) 0%,
rgba(1, 40, 48, 0.10) 38%,
rgba(1, 40, 48, 0.34) 62%,
rgba(1, 40, 48, 0.68) 82%,
rgba(1, 40, 48, 0.92) 100%
);
pointer-events: none;
}
/* =========================================================
MEDIA TO BODY GRADIENT TRANSITION
========================================================= */
/*.pml-preview__media::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 7;
height: 34%;
content: "";
background:
linear-gradient(
180deg,
rgba(1, 40, 48, 0) 0%,
rgba(1, 40, 48, 0.08) 28%,
rgba(1, 40, 48, 0.22) 50%,
rgba(1, 40, 48, 0.52) 72%,
rgba(1, 40, 48, 0.82) 88%,
rgba(1, 40, 48, 0.98) 100%
);
pointer-events: none;
}*/
/* =========================================================
MEDIA BOTTOM FADE
========================================================= */
/*.pml-preview__media::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 7;
height: 28%;
content: "";
background:
linear-gradient(
180deg,
rgba(1, 40, 48, 0) 0%,
rgba(1, 40, 48, 0.08) 30%,
rgba(1, 40, 48, 0.28) 58%,
rgba(1, 40, 48, 0.62) 82%,
rgba(1, 40, 48, 0.88) 100%
);
pointer-events: none;
}*/
/* =========================================================
9. VIDEO AND POSTER
---------------------------------------------------------
cover:
- Fills the complete media area.
- Removes black letterboxing.
- May crop a small amount at the edges.
========================================================= */
.pml-preview__video,
.pml-preview__poster{
position: absolute !important;
inset: 0 !important;
display: block;
width: 100% !important;
height: 100% !important;
/*min-width: 100%;
min-height: 100%;*/
max-width: none !important;
max-height: none !important;
object-fit: cover;
object-position: center center;
/*background: transparent;*/
background: #020812;
}
.pml-preview__video{
z-index: 2;
opacity: 0;
transform: scale(1.36);
transition:
opacity .32s ease,
transform .65s ease;
}
.pml-preview__video.is-ready{
opacity: 1;
transform:
scale(1.30);
}
.pml-preview__poster{
z-index: 1;
opacity: 1;
visibility: visible;
transform: scale(1.025);
transition:
opacity .32s ease,
visibility .32s ease,
transform .65s ease;
}
.pml-preview__poster.is-hidden{
opacity: 0;
visibility: hidden;
transform: scale(1.065);
pointer-events: none;
}
/* =========================================================
10. LOADING STATE
========================================================= */
.pml-preview__loading{
position: absolute;
inset: 0;
z-index: 11;
display: grid;
place-items: center;
/*background:rgba(2, 8, 20, .16);*/
background:
radial-gradient(
circle at center,
rgba(0, 132, 255, 0.10),
transparent 40%
),
rgba(2, 8, 18, 0.94);
pointer-events: none;
}
.pml-preview__loading[hidden]{
display: none !important;
}
.pml-preview__loading span{
width: 42px;
height: 42px;
border: 3px solid rgba(255, 255, 255, .18);
border-top-color: var(--pml-gold, #ffa900);
border-radius: 50%;
animation:
pmlPreviewSpin
.72s
linear
infinite;
}
@keyframes pmlPreviewSpin{
to{
transform:
rotate(360deg);
}
}
/* =========================================================
11. PREVIEW ENDED SCREEN
========================================================= */
.pml-preview__ended{
position: absolute;
inset: 0;
z-index: 25;
display: grid;
place-items: center;
overflow-x: hidden;
overflow-y: auto;
padding: 30px 26px;
color: #ffffff;
text-align: center;
background:
radial-gradient(
circle at 50% 34%,
rgba(0, 132, 255, .23),
transparent 44%
),
radial-gradient(
circle at 86% 22%,
rgba(255, 169, 0, .08),
transparent 34%
),
linear-gradient(
180deg,
rgba(3, 13, 28, .92),
rgba(2, 8, 20, .99)
);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.pml-preview__ended[hidden]{
display: none !important;
}
.pml-preview__ended-content{
width: min(100%, 520px);
margin: auto;
}
.pml-preview__ended-icon{
width: 68px;
height: 68px;
margin:
0 auto 16px;
display: grid;
place-items: center;
color: var(--pml-gold, #ffa900);
background:rgba(255, 169, 0, .13);
border: 1px solid rgba(255, 169, 0, .46);
border-radius: 50%;
box-shadow:
0 14px 36px
rgba(0, 0, 0, .28);
font-size: 26px;
}
.pml-preview__ended h4{
margin:0 0 11px;
font-size: clamp(25px, 3vw, 36px);
font-weight: 700;
line-height: 1.08;
letter-spacing:-.04em;
}
.pml-preview__ended p{
max-width: 480px;
margin: 0 auto 23px;
color:rgba(255, 255, 255, .74);
font-size: 15px;
line-height: 1.58;
}
.pml-preview__ended-actions{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.pml-preview__ended-btn{
min-height: 46px;
padding: 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #ffffff;
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 999px;
font-size: 13px;
font-weight:800;
text-decoration: none;
cursor: pointer;
transition:
transform .2s ease,
background-color .2s ease,
border-color .2s ease;
}
.pml-preview__ended-btn:hover{
color: #ffffff;
background:rgba(255, 255, 255, .16);
border-color:rgba(255, 255, 255, .36);
transform: translateY(-2px);
}
.pml-preview__ended-btn--primary{
color:#07131f;
background:
linear-gradient(
135deg,
#ffbb35,
#ff7a18
);
border-color:rgba(255, 184, 47, .76);
}
.pml-preview__ended-btn--primary:hover{
color:#07131f;
}
/* =========================================================
12. BRAND
========================================================= */
.pml-preview__brand{
position: absolute;
left: 22px;
bottom: 18px;
z-index: 20;
display: inline-flex;
align-items: center;
max-width: 126px;
opacity: .96;
transition:
opacity .2s ease,
transform .2s ease;
}
.pml-preview__brand:hover{
opacity: 1;
transform: translateY(-1px);
}
.pml-preview__brand img{
display: block;
width: auto;
height: 32px;
max-width: 126px;
object-fit: contain;
filter:
drop-shadow(
0 8px 18px
rgba(0, 0, 0, .58)
);
}
/* =========================================================
13. BODY
========================================================= */
/*.pml-preview__body{
position: relative;
z-index: 30;
flex: 0 0 auto;
display: block;
width: 100%;
padding: var(--pml-preview-padding);
color: var(--pml-preview-text);
background:
linear-gradient(180deg,
rgba(1, 40, 48, 0.98),
rgba(1, 29, 36, 0.98));
background:
linear-gradient(
180deg,
rgba(1, 40, 48, 0.98) 0%,
rgba(1, 35, 42, 0.99) 48%,
rgba(1, 29, 36, 0.99) 100%
);
visibility: visible;
opacity: 1;
box-sizing: border-box;
}*/
/* =========================================================
13. BODY  FADED INTO VIDEO
========================================================= */
.pml-preview__body {
position: relative;
z-index: 30;
flex: 0 0 auto;
display: block;
width: 100%;
/*
* Pull the body slightly over the bottom of the media.
* This removes the visible horizontal join.
*/
margin-top: -42px;
padding:
calc(var(--pml-preview-padding) + 42px)
var(--pml-preview-padding)
var(--pml-preview-padding);
color:
var(--pml-preview-text);
background:
linear-gradient(
180deg,
rgba(1, 40, 48, 0) 0%,
rgba(1, 40, 48, 0.45) 24px,
rgba(1, 40, 48, 0.88) 42px,
rgba(1, 40, 48, 0.98) 62px,
rgba(1, 35, 42, 0.99) 55%,
rgba(1, 29, 36, 0.99) 100%
);
visibility: visible;
opacity: 1;
box-sizing: border-box;
}
/* =========================================================
14. METADATA
========================================================= */
.pml-preview__meta{
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0 0 15px;
gap:8px;
}
.pml-preview__meta-item{
min-height:32px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: rgba(255, 255, 255, .95);
background: rgba(255, 255, 255, .075);
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
font-size:12px;
font-weight:600;
line-height:1;
white-space: nowrap;
}
.pml-preview__meta-item--quality{
color: #202121f5;
background:var(--pml-gold, #ffa900);
border-color:var(--pml-gold, #ffa900);
box-shadow: 0 8px 20px rgba(255, 169, 0, .16);
}
.pml-preview__meta-item--match{
color:#58d68d;
background:rgba(55, 211, 135, .08);
border-color: rgba(55, 211, 135, .2);
}
.pml-preview__meta-item i{
color: var(--pml-gold, #ffa900);
}
/* =========================================================
15. TITLE
========================================================= */
.pml-preview__title{
margin:0 0 9px;
color:#ffffff;
font-size: clamp(27px, 3vw, 38px);
font-weight:800;
line-height:1.06;
letter-spacing:-.045em;
}
/* =========================================================
16. GENRES
========================================================= */
.pml-preview__genre{
display:-webkit-box;
max-width: 100%;
margin:0 0 15px;
overflow:hidden;
color:#00baff;
font-size:14px;
font-weight:400;
line-height:1.45;
letter-spacing:-.01em;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
line-clamp:2;
}
/* =========================================================
17. DESCRIPTION
========================================================= */
.pml-preview__description{
display:-webkit-box;
max-width:760px;
margin: 0 0 21px;
overflow: hidden;
color: rgba(255, 255, 255, .78);
font-size:14px;
font-weight:400;
line-height:1.62;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
line-clamp: 3;
}
/* =========================================================
18. ACTIONS
========================================================= */
.pml-preview__actions{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:10px;
}
.pml-preview__actions .pml-btn{
min-height:46px;
padding: 0 21px;
font-size:13px;
}
.pml-preview__icon-btn{
width:46px;
height:46px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color:#ffffff;
background:
rgba(255, 255, 255, .085);
border: 1px solid rgba(255, 255, 255, .2);
border-radius:50%;
cursor:pointer;
transition:
transform .2s ease,
background-color .2s ease,
border-color .2s ease;
}
.pml-preview__icon-btn:hover{
background: rgba(255, 255, 255, .16);
border-color:rgba(255, 255, 255, .36);
transform: translateY(-2px);
}
.pml-preview__icon-btn.is-active{
color:#06172a;
background: var(--pml-gold, #ffa900);
border-color: var(--pml-gold, #ffa900);
}
.pml-preview__icon-btn:focus-visible,
.pml-preview__actions .pml-btn:focus-visible,
.pml-preview__ended-btn:focus-visible{
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* =========================================================
19. ACCESS MODAL
========================================================= */
.pml-access{
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
place-items: center;
padding: 22px;
}
.pml-access[hidden]{
display: none !important;
}
.pml-access__overlay{
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 50% 24%,
rgba(0, 132, 255, .17),
transparent 36%
),
rgb(13 13 14 / 88%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.pml-access__card{
position: relative;
z-index: 2;
width:
min(
100%,
var(--pml-access-width)
);
padding: 34px 30px 30px;
color: #ffffff;
text-align:center;
background:
radial-gradient(
circle at top right,
rgb(255 185 0 / 20%),
#0d0d0d57 34%
),
linear-gradient(
180deg,
rgb(58 60 61 / 98%),
rgb(10 10 10 / 99%)
);
border: 1px solid rgba(255, 255, 255, .14);
border-radius:24px;
box-shadow:
0 20px 50px
rgba(0, 0, 0, .62),
inset 0 1px 0
rgba(255, 255, 255, .08);
animation:
pmlPreviewEnter
.32s
cubic-bezier(.2, .8, .2, 1);
}
.pml-access__close{
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
padding: 0;
display:
inline-flex;
align-items:
center;
justify-content:
center;
color:
#ffffff;
background:
rgb(255 255 255 / 23%);
border:
1px solid
rgb(196 193 193 / 37%);
border-radius:
50%;
cursor:
pointer;
transition:
background-color .2s ease,
color .2s ease,
transform .2s ease;
}
.pml-access__close::before,
.pml-access__close::after{
position: absolute;
width: 15px;
height: 2px;
content: "";
background:
currentColor;
border-radius:
999px;
}
.pml-access__close::before{
transform: rotate(45deg);
}
.pml-access__close::after{
transform: rotate(-45deg);
}
.pml-access__close:hover{
color:#e39f0e;
background: #292928f7;
transform: scale(1.05);
}
.pml-access__icon{
width: 66px;
height: 66px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background:
var(
--pml-gradient-blue,
linear-gradient(
135deg,
#0068ff,
#00bfff
)
);
border-radius: 21px;
box-shadow: 0 17px 42px rgba(0, 132, 255, .26);
font-size: 25px;
}
.pml-access__card h3{
margin: 0 0 10px;
font-size:27px;
font-weight:800;
line-height:1.1;
letter-spacing:-.035em;
}
.pml-access__card p{
max-width: 340px;
margin: 0 auto 24px;
color: var(--pml-preview-muted);
font-size: 14px;
line-height: 1.65;
}
.pml-access__actions{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
}
.pml-access__actions .pml-btn{
min-height: 43px;
padding: 0 18px;
font-size: 13px;
}
/* =========================================================
20. TABLET
========================================================= */
@media (max-width: 767px) {
:root {
--pml-preview-width: 620px;
--pml-preview-radius: 22px;
--pml-preview-padding: 18px;
--pml-preview-media-ratio: 16 / 9;
}
.pml-preview {
padding: 16px;
place-items: center;
}
.pml-preview__card {
width: min(100%, var(--pml-preview-width));
max-height: calc(100dvh - 32px);
border-radius: var(--pml-preview-radius);
}
/* =======================================================
TABLET MEDIA FILL
======================================================= */
.pml-preview__media {
position: relative;
width: 100%;
aspect-ratio: var(--pml-preview-media-ratio);
overflow: hidden;
}
.pml-preview__shell {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.pml-preview__video,
.pml-preview__poster {
position: absolute !important;
inset: 0 !important;
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover;
object-position: center center;
transform-origin: center center;
}
/*
* Slightly stronger crop on tablets.
* The upward translation removes visible dark space
* near the top of some trailer frames.
*/
.pml-preview__video {
transform:
translateY(-2%)
scale(1.42);
}
.pml-preview__video.is-ready {
transform:
translateY(-2%)
scale(1.38);
}
.pml-preview__poster {
transform:
translateY(-1%)
scale(1.06);
}
.pml-preview__poster.is-hidden {
transform:
translateY(-1%)
scale(1.10);
}
.pml-preview__close,
.pml-preview__mute {
top: 12px;
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
}
.pml-preview__close {
right: 12px;
}
.pml-preview__mute {
left: 12px;
}
.pml-preview__brand {
left: 16px;
bottom: 13px;
max-width: 102px;
}
.pml-preview__brand img {
max-width: 102px;
height: 27px;
}
/*.pml-preview__body {
position: relative;
z-index: 30;
display: block;
padding: 19px;
}*/
/* =======================================================
TABLET BODY FADE
======================================================= */
.pml-preview__body {
position: relative;
z-index: 30;
display: block;
width: 100%;
margin-top: -36px;
padding:
calc(var(--pml-preview-padding) + 36px)
var(--pml-preview-padding)
var(--pml-preview-padding);
background:
linear-gradient(
180deg,
rgba(1, 40, 48, 0) 0%,
rgba(1, 40, 48, 0.44) 22px,
rgba(1, 40, 48, 0.86) 38px,
rgba(1, 40, 48, 0.98) 56px,
rgba(1, 35, 42, 0.99) 55%,
rgba(1, 29, 36, 0.99) 100%
);
visibility: visible;
opacity: 1;
box-sizing: border-box;
}
.pml-preview__meta {
margin-bottom: 13px;
gap: 7px;
}
.pml-preview__meta-item {
min-height: 30px;
padding: 0 10px;
font-size: 11px;
}
.pml-preview__title {
font-size: 27px;
}
.pml-preview__genre {
margin-bottom: 13px;
font-size: 13px;
}
.pml-preview__description {
margin-bottom: 18px;
font-size: 13px;
line-height: 1.58;
}
.pml-preview__actions .pml-btn {
min-height: 44px;
padding: 0 17px;
}
.pml-preview__icon-btn {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
}
.pml-access {
padding: 16px;
}
.pml-access__card {
padding: 30px 20px 24px;
border-radius: 22px;
}
.pml-access__actions .pml-btn {
flex: 1 1 auto;
}
}
/* =========================================================
21. MOBILE  CENTERED MODAL
========================================================= */
@media (max-width: 480px) {
:root {
--pml-preview-width: 100%;
--pml-preview-radius: 20px;
--pml-preview-padding: 17px;
--pml-preview-media-ratio: 16 / 9;
}
.pml-preview {
display: grid;
place-items: center;
align-items: center;
justify-items: center;
padding: 12px;
}
.pml-preview__card {
width: 100%;
max-height: calc(100dvh - 24px);
overflow-x: hidden;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--pml-preview-radius);
}
/* =======================================================
MOBILE MEDIA AREA
======================================================= */
.pml-preview__media {
position: relative;
width: 100%;
aspect-ratio: var(--pml-preview-media-ratio);
min-height: 220px;
overflow: hidden;
}
.pml-preview__shell {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.pml-preview__video,
.pml-preview__poster {
position: absolute !important;
inset: 0 !important;
display: block;
width: 100% !important;
height: 100% !important;
min-width: 100%;
min-height: 100%;
max-width: none !important;
max-height: none !important;
object-fit: cover;
object-position: center center;
transform-origin: center center;
}
/*
* Increased from 1.26.
* This removes the dark/empty area at the top and makes
* the trailer fill the complete mobile media container.
*/
.pml-preview__video {
transform:
translateY(-3%)
scale(1.50);
}
.pml-preview__video.is-ready {
transform:
translateY(-3%)
scale(1.46);
}
.pml-preview__poster {
transform:
translateY(-1%)
scale(1.08);
}
.pml-preview__poster.is-hidden {
transform:
translateY(-1%)
scale(1.12);
}
.pml-preview__close,
.pml-preview__mute {
top: 12px;
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
}
.pml-preview__close {
right: 12px;
}
.pml-preview__mute {
left: 12px;
}
.pml-preview__brand {
left: 15px;
bottom: 12px;
max-width: 96px;
}
.pml-preview__brand img {
max-width: 96px;
height: 26px;
}
/*
* Keep the body above any media overlays or tooltips.
*/
.pml-preview__body {
position: relative;
z-index: 30;
display: block;
width: 100%;
margin-top: -28px;
visibility: visible;
opacity: 1;
/*padding: 18px 17px 20px;*/
padding:
calc(var(--pml-preview-padding) + 28px)
var(--pml-preview-padding)
20px;
background:
linear-gradient(
180deg,
rgba(1, 40, 48, 0) 0%,
rgba(1, 40, 48, 0.48) 18px,
rgba(1, 40, 48, 0.88) 30px,
rgba(1, 40, 48, 0.98) 46px,
rgba(1, 35, 42, 0.99) 56%,
rgba(1, 29, 36, 0.99) 100%
);
visibility: visible;
opacity: 1;
box-sizing: border-box;
}
.pml-preview__meta {
display: flex;
flex-wrap: wrap;
margin-bottom: 14px;
gap: 6px;
}
.pml-preview__meta-item {
min-height: 29px;
padding: 0 9px;
font-size: 10.5px;
}
.pml-preview__title {
margin-bottom: 9px;
font-size: 26px;
line-height: 1.08;
}
.pml-preview__genre {
margin-bottom: 14px;
font-size: 13px;
line-height: 1.42;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.pml-preview__description {
margin-bottom: 19px;
font-size: 13px;
line-height: 1.58;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.pml-preview__actions {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto
auto;
align-items: center;
gap: 10px;
}
.pml-preview__actions .pml-btn--primary {
width: 100%;
}
.pml-preview__actions .pml-btn--dark {
display: none;
}
.pml-preview__actions .pml-btn {
min-height: 46px;
padding: 0 16px;
}
.pml-preview__icon-btn {
position: relative;
width: 46px;
height: 46px;
min-width: 46px;
min-height: 46px;
}
}
/* =========================================================
22. MOBILE PREVIEW-ENDED SCREEN
---------------------------------------------------------
The media area becomes taller only while the ended
overlay is visible, giving the text and buttons room.
========================================================= */
/*@media (max-width: 480px) {
.pml-preview__media:has(
.pml-preview__ended:not([hidden])
) {
min-height: min(430px, 60dvh);
aspect-ratio: auto;
}
.pml-preview__ended {
align-items: center;
padding: 72px 20px 26px;
}
.pml-preview__ended-content {
width: 100%;
max-width: 330px;
margin: auto;
}
.pml-preview__ended-icon {
width: 62px;
height: 62px;
margin-bottom: 15px;
font-size: 24px;
}
.pml-preview__ended h4 {
margin-bottom: 11px;
font-size: 26px;
}
.pml-preview__ended p {
max-width: 310px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.52;
}
.pml-preview__ended-actions {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.pml-preview__ended-btn {
width: 100%;
min-height: 45px;
}
}*/
/* =========================================================
22. MOBILE PREVIEW-ENDED SCREEN  COMPACT FINAL
---------------------------------------------------------
- Keeps the ended screen readable.
- Prevents it from becoming excessively tall.
- Stops the body from overlapping the ended overlay.
- Uses a compact two-column button layout.
========================================================= */
@media (max-width: 480px) {
/*
* Increase the media height only enough to contain the
* ended message. Do not use 430px / 60dvh here.
*/
.pml-preview__media:has(
.pml-preview__ended:not([hidden])
) {
min-height:
clamp(
310px,
43dvh,
360px
);
aspect-ratio: auto;
}
/*
* The video-to-body overlap is useful during playback,
* but it is unnecessary when the ended screen is visible.
*/
.pml-preview__card:has(
.pml-preview__ended:not([hidden])
)
.pml-preview__body {
margin-top: 0;
padding:
18px
var(--pml-preview-padding)
20px;
background:
linear-gradient(
180deg,
rgba(1, 40, 48, 0.99),
rgba(1, 29, 36, 0.99)
);
}
.pml-preview__ended {
display: grid;
place-items: center;
overflow: hidden;
padding:
62px
18px
22px;
background:
radial-gradient(
circle at 50% 25%,
rgba(0, 132, 255, 0.22),
transparent 48%
),
linear-gradient(
180deg,
rgba(3, 13, 28, 0.96),
rgba(2, 8, 20, 0.99)
);
}
.pml-preview__ended-content {
width: 100%;
max-width: 340px;
margin: auto;
}
.pml-preview__ended-icon {
width: 54px;
height: 54px;
margin:
0
auto
12px;
font-size: 22px;
}
.pml-preview__ended h4 {
margin:
0
0
9px;
font-size: 24px;
line-height: 1.08;
}
.pml-preview__ended p {
max-width: 310px;
margin:
0
auto
17px;
font-size: 13px;
line-height: 1.48;
}
/*
* Subscribe takes the full first row.
* Replay and Watch Now share the second row.
*/
.pml-preview__ended-actions {
width: 100%;
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap: 8px;
}
.pml-preview__ended-btn {
width: 100%;
min-width: 0;
min-height: 43px;
padding:
0
12px;
font-size: 12px;
}
/*
* Your primary button is Subscribe Now.
*/
.pml-preview__ended-btn--primary {
grid-column:
1 / -1;
grid-row:
1;
order: -1;
}
/*
* Replay and Watch Now appear below Subscribe.
*/
#pmlPreviewReplay {
grid-column: 1;
grid-row: 2;
}
#pmlPreviewEndedWatch {
grid-column: 2;
grid-row: 2;
}
/*
* Mute has no useful function after playback ends.
*/
.pml-preview__card:has(
.pml-preview__ended:not([hidden])
)
.pml-preview__mute {
opacity: 0.55;
pointer-events: none;
}
}
/* =========================================================
23. EXTRA SMALL MOBILE
========================================================= */
@media (max-width: 370px) {
.pml-preview {
padding: 8px;
}
.pml-preview__card {
max-height: calc(100dvh - 16px);
border-radius: 18px;
}
.pml-preview__media {
min-height: 205px;
}
/*
* Extra crop for narrow phones.
*/
.pml-preview__video {
transform:
translateY(-4%)
scale(1.58);
}
.pml-preview__video.is-ready {
transform:
translateY(-4%)
scale(1.52);
}
.pml-preview__poster {
transform:
translateY(-1%)
scale(1.10);
}
.pml-preview__poster.is-hidden {
transform:
translateY(-1%)
scale(1.14);
}
.pml-preview__close,
.pml-preview__mute {
width: 39px;
height: 39px;
min-width: 39px;
min-height: 39px;
}
.pml-preview__body {
position: relative;
z-index: 30;
display: block;
padding: 16px 14px 18px;
}
.pml-preview__meta {
gap: 5px;
}
.pml-preview__meta-item {
min-height: 27px;
padding: 0 8px;
font-size: 10px;
}
.pml-preview__title {
font-size: 23px;
}
.pml-preview__genre {
font-size: 12px;
}
.pml-preview__description {
font-size: 12.5px;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.pml-preview__actions {
grid-template-columns:
minmax(0, 1fr)
auto;
}
.pml-preview__icon-btn[data-preview-info] {
display: none;
}
.pml-preview__media:has(
.pml-preview__ended:not([hidden])
) {
/*min-height: min(410px, 62dvh);*/
min-height: clamp(290px, 45dvh, 335px);
aspect-ratio: auto;
}
.pml-preview__ended {
/*padding: 66px 15px 22px;*/
padding: 56px 13px 18px;
}
.pml-preview__ended-content {
max-width: 300px;
}
.pml-preview__ended-icon {
width: 50px;
height: 50px;
margin-bottom: 10px;
font-size: 20px;
}
.pml-preview__ended h4 {
margin-bottom: 8px;
font-size: 22px;
}
.pml-preview__ended p {
margin-bottom: 14px;
font-size: 12px;
line-height: 1.42;
}
.pml-preview__ended-btn {
min-height: 41px;
padding: 0 9px;
font-size: 11px;
}
.pml-access__actions {
flex-direction: column;
}
.pml-access__actions .pml-btn {
width: 100%;
}
}
/* =========================================================
24. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce){
.pml-preview__card{
animation: none;
}
.pml-preview__video,
.pml-preview__poster,
.pml-preview__close,
.pml-preview__mute,
.pml-preview__icon-btn,
.pml-preview__ended-btn,
.pml-access__close{
transition: none;
}
.pml-preview__loading span{
animation-duration: 1.5s;
}
}
/*.pml-my-list-btn {
position: relative;
gap: 6px;
}
.pml-my-list-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
background: var(--pml-gold, #ffa900);
color: #061b33;
border-radius: 999px;
font-size: 11px;
font-weight: 900;
line-height: 1;
}
.pml-continue-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin-top: 24px;
}
.pml-continue-card {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--pml-radius-sm, 12px);
overflow: hidden;
background: var(--pml-bg-soft, #1a1a2e);
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pml-continue-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.pml-continue-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pml-continue-card__progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(255, 255, 255, 0.2);
}
.pml-continue-card__progress-bar {
height: 100%;
background: var(--pml-gold, #ffa900);
border-radius: 0 2px 2px 0;
transition: width 0.3s ease;
}
.pml-continue-card__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.25s ease;
}
.pml-continue-card:hover .pml-continue-card__overlay {
opacity: 1;
}
.pml-continue-card__play-btn {
width: 56px;
height: 56px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.pml-continue-card__play-btn:hover {
transform: scale(1.1);
background: rgba(255, 255, 255, 0.25);
}
.pml-card__badge--new {
position: absolute;
top: 14px;
left: 14px;
z-index: 5;
padding: 4px 12px;
border-radius: 999px;
background: var(--pml-gold, #ffa900);
color: #061b33;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
animation: pmlPulseBadge 2s ease-in-out infinite;
}
@keyframes pmlPulseBadge {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 169, 0, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 20px 8px rgba(255, 169, 0, 0.2);
}
}
.pml-genre-filter {
padding: 12px 0 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pml-genre-filter__scroll {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 4px 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.pml-genre-filter__scroll::-webkit-scrollbar {
display: none;
}
.pml-genre-filter__btn {
flex: 0 0 auto;
padding: 8px 20px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
color: var(--pml-muted, #9bb6d4);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.pml-genre-filter__btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
.pml-genre-filter__btn.is-active {
background: var(--pml-gold, #ffa900);
border-color: var(--pml-gold, #ffa900);
color: #061b33;
}
.pml-card-skeleton {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.02) 25%,
rgba(255, 255, 255, 0.08) 50%,
rgba(255, 255, 255, 0.02) 75%
);
background-size: 200% 100%;
animation: pmlSkeletonShimmer 1.5s infinite;
}
@keyframes pmlSkeletonShimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.pml-scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9998;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: var(--pml-gradient-blue, linear-gradient(135deg, #005eff, #00d4ff));
color: #fff;
font-size: 20px;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 94, 255, 0.3);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pml-scroll-top.is-visible {
opacity: 1;
transform: translateY(0);
}
.pml-scroll-top:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 32px rgba(0, 94, 255, 0.45);
}
.pml-scroll-top:active {
transform: scale(0.95);
}
.pml-view-toggle {
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
color: var(--pml-muted, #9bb6d4);
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pml-view-toggle:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
.pml-view-toggle.is-grid {
color: var(--pml-gold, #ffa900);
border-color: var(--pml-gold, #ffa900);
}
.pml-notification-btn {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--pml-text, #fff);
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.pml-notification-btn:hover {
background: rgba(255, 255, 255, 0.08);
transform: scale(1.05);
}
.pml-notification-dot {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff3b30;
border: 2px solid var(--pml-bg-deep, #042a24);
display: none;
}
.pml-notification-dot.has-notifications {
display: block;
animation: pmlPulseDot 1.5s ease-in-out infinite;
}
@keyframes pmlPulseDot {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
}
.pml-card__quick-preview {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
z-index: 20;
width: 280px;
transform: translateX(-50%);
background: rgba(10, 20, 40, 0.98);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 16px;
backdrop-filter: blur(20px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
transform: translateX(-50%) translateY(8px);
}
.pml-card:hover .pml-card__quick-preview {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.pml-card__quick-preview::before {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 16px;
height: 16px;
background: rgba(10, 20, 40, 0.98);
border-right: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pml-card__quick-preview-title {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
}
.pml-card__quick-preview-desc {
margin: 0 0 10px;
font-size: 13px;
color: var(--pml-muted, #9bb6d4);
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pml-card__quick-preview-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--pml-muted-2, #6f8ead);
}
.pml-card__quick-preview-meta span {
background: rgba(255, 255, 255, 0.06);
padding: 2px 10px;
border-radius: 999px;
}
.pml-card__episode-info {
position: absolute;
bottom: 70px;
left: 20px;
z-index: 4;
padding: 4px 12px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
}*/
.pml-preview__icon-btn{
position:relative;
width:44px;
height:44px;
min-width:44px;
padding:0;
border-radius:999px;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.08);
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
cursor:pointer;
transition:
transform .2s ease,
background .2s ease,
border-color .2s ease,
color .2s ease,
opacity .2s ease;
}
.pml-preview__icon-btn:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.15);
border-color:rgba(255,255,255,.38);
color:#fff;
}
.pml-preview__icon-btn.is-active{
background:var(--pml-gold, #ffa900);
border-color:var(--pml-gold, #ffa900);
color:#061b33;
}
.pml-preview__icon-btn.is-loading{
pointer-events:none;
opacity:.68;
}
.pml-preview__icon-btn.is-loading i{
animation:pmlMyListPulse .7s ease-in-out infinite alternate;
}
.pml-preview__icon-btn:disabled{
cursor:wait;
}
@keyframes pmlMyListPulse{
from{
transform:scale(.82);
opacity:.55;
}
to{
transform:scale(1);
opacity:1;
}
}
@media (max-width:390px){
.pml-preview__actions{
display:grid;
grid-template-columns:1fr 1fr auto auto;
}
.pml-preview__actions .pml-btn{
width:auto;
}
}
.pml-card.js-pml-preview{
cursor:pointer;
user-select:none;
-webkit-tap-highlight-color:transparent;
}
.pml-card.js-pml-preview:focus-visible{
outline:3px solid var(--pml-gold, #ffa900);
outline-offset:4px;
border-color:var(--pml-gold, #ffa900);
}
.pml-card.js-pml-preview:active{
transform:translateY(-3px) scale(.985);
}
.pml-cookie{
position:fixed;
left:0;
right:0;
bottom:22px;
z-index:9997;
padding:0 20px;
}
.pml-cookie[hidden]{
display:none !important;
}
.pml-cookie__box{
width:min(100%,1040px);
margin-inline:auto;
padding:18px;
border-radius:24px;
background:rgb(45 46 46 / 96%);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 80px rgba(0,0,0,.36);
display:grid;
grid-template-columns:auto 1fr auto;
gap:16px;
align-items:center;
}
.pml-cookie__icon{
width:58px;
height:58px;
border-radius:18px;
background:rgba(255,169,0,.14);
color:var(--pml-gold);
display:flex;
align-items:center;
justify-content:center;
font-size:25px;
}
.pml-cookie__content h2{
margin:0 0 5px;
color:#fff;
font-size:18px;
font-weight:950;
}
.pml-cookie__content p{
margin:0;
color:var(--pml-muted);
line-height:1.55;
font-size:14px;
}
.pml-cookie__content a{
color:var(--pml-gold);
font-weight:900;
}
.pml-cookie__actions{
display:flex;
align-items:center;
gap:8px;
}
.pml-cookie__btn{
min-height:42px;
padding:0 18px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
color:#fff;
font-size:14px;
font-weight:950;
cursor:pointer;
}
.pml-cookie__btn--decline{
background:rgba(255,255,255,.08);
}
:root{
--ef-hero-height: 720px;
--ef-hero-title-size: clamp(34px, 3.45vw, 48px);
--ef-hero-title-weight: 700;
--ef-hero-title-width: 570px;
--ef-hero-text-width: 470px;
--ef-hero-text-size: 16px;
--ef-rail-right: -160px;
--ef-rail-top: -44px;
--ef-rail-width: 820px;
--ef-rail-height: 660px;
--ef-rail-scale: .92;
--ef-rail-rotate: -18deg;
--ef-poster-width: 225px;
--ef-poster-height: 335px;
--ef-poster-radius: 26px;
--ef-hero-blue: var(--pml-blue, #0084ff);
--ef-hero-gold: var(--pml-gold, #ffa900);
--ef-hero-deep: #1b1c1b;
--ef-hero-navy: #202020;
}
/* =========================================================
2. SKIP LINK
========================================================= */
/*.pml-skip-link {
position: fixed;
top: 0.75rem;
left: 0.75rem;
z-index: 9999;
padding: 0.75rem 1rem;
color: #000;
background: #fff;
border-radius: var(--eno-radius-sm);
font-weight: 700;
transform: translateY(-160%);
transition: transform var(--eno-transition-fast);
}
.pml-skip-link:focus {
transform: translateY(0);
}*/
/* =========================================================
ACCESSIBLE SKIP LINK
========================================================= */
.pml-skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 100000;
padding: 12px 18px;
border-radius: 8px;
background: #ffffff;
color: #000000;
font-weight: 700;
text-decoration: none;
transform: translateY(-160%);
transition: transform 160ms ease;
}
.pml-skip-link:focus {
transform: translateY(0);
}
:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
/*.pml-language-picker {
position: relative;
display: inline-flex;
align-items: center;
width: 138px;
height: 44px;
flex: 0 0 auto;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(8, 13, 24, 0.68);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
overflow: hidden;
}
.pml-language-picker[hidden] {
display: none !important;
}
.pml-language-picker__select {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
padding: 4px 34px 4px 36px;
color: #ffffff;
background: rgb(51 51 52 / 82%);
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.pml-language-picker__select:hover {
background: rgb(19 19 19 / 95%);
border-color: rgba(255, 255, 255, 0.62);
}
.pml-language-picker__select:focus {
outline: none;
}
.pml-language-picker__select:focus-visible {
border-color: #ffffff;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.pml-language-picker__select option {
color: #323131;
background: #ffffff;
}
.pml-language-picker__icon {
position: absolute;
top: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.7);
}
.pml-language-picker__icon--start {
left: 12px;
width: 16px;
height: 16px;
font-size: 14px;
}
.pml-language-picker__icon--end {
right: 12px;
width: 12px;
height: 12px;
font-size: 12px;
transition: transform 0.2s ease;
}
.pml-language-picker:hover .pml-language-picker__icon--end {
transform: translateY(-50%) rotate(180deg);
}*/
.pml-language-picker {
position: relative;
display: inline-flex;
align-items: center;
width: 138px;
min-width: 138px;
height: 44px;
flex: 0 0 auto;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(8, 13, 24, 0.68);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
overflow: hidden;
transition:
opacity 180ms ease,
border-color 180ms ease,
background-color 180ms ease;
}
.pml-language-picker[hidden] {
display: none !important;
}
.pml-language-picker__select {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
padding: 4px 34px 4px 36px;
color: #ffffff;
background: rgb(51 51 52 / 82%);
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 999px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition:
background-color 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
color 180ms ease;
}
.pml-language-picker__select:hover {
background: rgb(19 19 19 / 95%);
border-color: rgba(255, 255, 255, 0.62);
}
.pml-language-picker__select:focus {
outline: none;
}
.pml-language-picker__select:focus-visible {
border-color: #ffffff;
box-shadow:
inset 0 0 0 1px
rgba(255, 255, 255, 0.45),
0 0 0 2px
rgba(255, 255, 255, 0.9);
}
.pml-language-picker__select:disabled {
cursor: progress;
}
.pml-language-picker__select option {
color: #323131;
background: #ffffff;
}
.pml-language-picker__icon {
position: absolute;
top: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
transform: translateY(-50%);
color:
rgba(255, 255, 255, 0.78);
}
.pml-language-picker__icon--start {
left: 12px;
width: 16px;
height: 16px;
font-size: 14px;
}
.pml-language-picker__icon--end {
right: 12px;
width: 12px;
height: 12px;
font-size: 12px;
transition:
transform 200ms ease;
}
.pml-language-picker:hover
.pml-language-picker__icon--end {
transform:
translateY(-50%)
rotate(180deg);
}
html[dir="rtl"]
.pml-language-picker__icon--start {
right: 12px;
left: auto;
}
html[dir="rtl"]
.pml-language-picker__icon--end {
right: auto;
left: 12px;
}
html[dir="rtl"]
.pml-language-picker__select {
padding:
4px
36px
4px
34px;
text-align: right;
}
html.pml-language-switching {
cursor: progress;
}
html.pml-language-switching
.pml-language-picker {
opacity: 0.68;
pointer-events: none;
}
html.pml-language-switching
.pml-language-picker__select {
cursor: progress;
}
.pml-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
@media (max-width: 767px) {
.pml-language-picker {
width: 46px;
min-width: 46px;
height: 44px;
}
.pml-language-picker__select {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
padding: 0;
color: transparent;
background: transparent;
border-radius: 999px;
opacity: 0.01;
}
.pml-language-picker__select:focus-visible {
opacity: 0.01;
box-shadow:
inset 0 0 0 2px #ffffff;
}
.pml-language-picker__icon--start {
top: 50%;
right: auto;
left: 50%;
width: 20px;
height: 20px;
font-size: 16px;
transform:
translate(-50%, -50%);
}
.pml-language-picker__icon--end {
display: none;
}
html[dir="rtl"]
.pml-language-picker__icon--start {
right: auto;
left: 50%;
transform:
translate(-50%, -50%);
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (
prefers-reduced-motion: reduce
) {
.pml-language-picker,
.pml-language-picker__select,
.pml-language-picker__icon--end {
transition: none;
}
.pml-language-picker:hover
.pml-language-picker__icon--end {
transform:
translateY(-50%);
}
}
.pml-hero-signup {
width: min(100%, 620px);
margin-top: 24px;
}
.pml-hero-signup__title {
margin: 0 0 14px;
color:rgba(255, 255, 255, 0.88);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
.pml-signup-form {
display: flex;
align-items: flex-start;
width: 100%;
gap: 10px;
}
.pml-signup-field {
position: relative;
min-width: 0;
flex: 1 1 auto;
}
.pml-signup-field__control {
position: relative;
width: 100%;
}
.pml-signup-field__input {
display: block;
width: 100%;
min-height: 46px;
padding: 16px 14px 6px;
color: #ffffff;
background:rgb(14 14 14 / 53%);
border: 1px solid rgb(255 255 255 / 29%);
border-radius: 16px;
font-family: inherit;
font-size: 16px;
outline: none;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition:
border-color 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
}
.pml-signup-field__input:hover {
border-color:
rgba(255, 255, 255, 0.66);
}
.pml-signup-field__input:focus {
border-color: #ffffff;
background:rgb(35 48 64 / 64%);
box-shadow:
0 0 0 2px
rgba(255, 255, 255, 0.84);
}
.pml-signup-field__label {
position: absolute;
top: 50%;
left: 16px;
right: 16px;
color: rgba(255, 255, 255, 0.65);
font-size: 16px;
line-height: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
transform: translateY(-50%);
transition:
top 180ms ease,
font-size 180ms ease,
transform 180ms ease;
}
.pml-signup-field__input:focus
+ .pml-signup-field__label,
.pml-signup-field__input:not(:placeholder-shown)
+ .pml-signup-field__label {
top: 9px;
font-size: 12px;
transform: translateY(0);
}
.pml-signup-field__message {
min-height: 18px;
margin: 6px 0 0;
color: #f83e49;
font-size: 13px;
line-height: 1.3;
}
.pml-signup-field.is-error
.pml-signup-field__input {
border-color: #5b1d2b;
box-shadow:
0 0 0 1px
rgba(255, 98, 108, 0.35);
}
.pml-signup-field.is-success
.pml-signup-field__input {
border-color: #39ce8b;
}
.pml-signup-form__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 8px 20px;
gap: 8px;
color: #ffffff;
background:
linear-gradient(
135deg,
var(--pml-blue, #1687ff),
#076ed4
);
border: 0;
border-radius: 16px;
font-family: inherit;
font-size: 16px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 12px 26px rgb(22 135 255 / 21%);
transition:
transform 180ms ease,
box-shadow 180ms ease,
filter 180ms ease;
}
.pml-signup-form__button:hover {
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow:
0 16px 36px
rgba(22, 135, 255, 0.42);
}
.pml-signup-form__button:active {
transform:
translateY(0);
}
.pml-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 80;
padding: 16px 0;
background: linear-gradient(180deg, rgb(12 12 12 / 95%) 0%, rgb(18 18 18 / 71%) 50%, rgb(112 112 119 / 5%) 100%);
border-bottom: 2px solid rgb(255 255 255 / 7%);
transition: all 0.3s ease;
}
.pml-header.is-scrolled {
padding: 12px 0;
background: rgb(26 26 27 / 7%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/*border-bottom: 1px solid rgba(255, 107, 107, 0.1);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);*/
}
.pml-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* LOGO */
.pml-logo {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
width: 180px;
}
.pml-logo__img {
display: block;
height: 38px;
max-width: 100%;
width: auto;
object-fit: contain;
transition: height 0.3s ease;
}
.pml-header.is-scrolled .pml-logo__img {
height: 32px;
}
.pml-logo__img--light {
display: block;
}
.pml-logo__img--dark {
display: none;
}
.pml-header.is-scrolled .pml-logo__img--light {
display: none;
}
.pml-header.is-scrolled .pml-logo__img--dark {
display: none;
}
.pml-header.is-scrolled .pml-logo__img {
height: 32px;
}
@media (max-width: 599.98px) {
.pml-logo {
width: auto;
min-width: 80px;
}
.pml-logo__img {
height: 28px;
}
.pml-header.is-scrolled .pml-logo__img {
height: 24px;
}
}
/* NAVIGATION */
.pml-nav {
position:relative;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 6px;
border-radius:999px;
background:
linear-gradient(180deg,rgb(174 169 169 / 8%),rgb(191 184 184 / 4%)),
rgb(42 43 43 / 83%);
border:1px solid rgb(196 199 199 / 12%);
box-shadow:inset 0 1px 0 rgb(46 46 46 / 10%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
flex: 0 1 auto;
margin: 0 auto;
}
.pml-navdrop{
position:static;
}
.pml-nav > a,
.pml-navdrop > button {
min-height: 36px;
padding: 0 16px;
border-radius: 999px;
color:rgb(255 255 255 / 78%);
border: none;
outline: none;
background:rgb(0 0 0 / 9%);
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
position: relative;
white-space: nowrap;
font-family: inherit;
text-decoration: none;
transition:
color .22s ease,
background .22s ease,
transform .22s ease;
}
.pml-nav > a:hover,
.pml-nav > a.is-active,
.pml-navdrop.is-open > button,
.pml-navdrop:focus-within > button {
color:#f8bc21;
background:rgb(40 40 41 / 21%);
border: 1px solid rgb(144 146 146 / 35%);
}
/*.pml-nav > a::after,
.pml-navdrop > button::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #9a9191, #4e54c8);
border-radius: 999px;
transform: translateX(-50%);
transition: width 0.25s ease;
}*/
.pml-nav > a:hover::after,
.pml-nav > a.is-active::after,
.pml-navdrop.is-open > button::after,
.pml-navdrop:focus-within > button::after {
width: 60%;
}
/* DROPDOWN / MEGA MENU */
/*.pml-navdrop {
position: relative;
}*/
.pml-navdrop > button i {
font-size: 10px;
transition: transform 0.25s ease;
}
.pml-navdrop.is-open > button i,
.pml-navdrop:focus-within > button i {
transform: rotate(180deg);
}
.pml-mega {
position:absolute;
top:calc(100% + 14px);
left:50%;
right: auto;
width:min(560px,calc(100vw - 48px));
max-height:420px;
overflow:hidden;
padding:28px 30px;
border-radius:30px;
background:
radial-gradient(circle at 92% 18%,rgba(0,132,255,.12),transparent 28%),
linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.96));
color:#3b403f;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:34px;
box-shadow:
0 28px 70px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.92);
transform:translateX(-50%) translateY(14px) scale(.985);
transform-origin: top center;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .22s ease,
visibility .22s ease,
transform .22s ease;
}
.pml-mega::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
width: 16px;
height: 16px;
background:rgb(255 255 255);
/*border-top: 1px solid rgba(255, 255, 255, 0.08);
border-left: 1px solid rgba(255, 255, 255, 0.08);*/
transform: translateX(-50%) rotate(45deg);
border-radius: 5px;
}
.pml-navdrop.is-open .pml-mega,
.pml-navdrop:focus-within .pml-mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
}
.pml-mega__col {
position:relative;
display: flex;
flex-direction: column;
gap: 8px;
z-index:2;
display:grid;
/*gap:12px;*/
}
.pml-mega__col h2 {
margin: 0 0 6px;
color:#0e0e0e;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pml-mega__title {
display: block;
margin: 0 0 12px;
color: var(--pml-text);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.3;
text-transform: uppercase;
}
.pml-mega__col a {
min-height:46px;
padding:0 12px;
border-radius:15px;
outline:0;
display:flex;
align-items:center;
gap:13px;
color:#1e1e1f;
font-size:16px;
font-weight:600;
letter-spacing:-.02em;
transition:
background .2s ease,
color .2s ease,
transform .2s ease;
}
.pml-mega__col a:hover,
.pml-mega__col a:focus-visible {
background:rgb(0 132 255 / 12%);
color:#005eff;
transform:translateX(4px);
}
.pml-mega__col a i {
width: 32px;
height: 32px;
border-radius:12px;
background:rgba(0,132,255,.08);
color:#0084ff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex: 0 0 32px;
transition: all 0.2s ease;
}
.pml-mega__col a:hover i {
background: rgb(107 178 255 / 18%);
transform: scale(1.05);
}
.pml-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 0 0 auto;
width: 180px;
}
.pml-btn {
min-height: 38px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
color: #ffffff;
font-size: 13px;
font-weight: 600;
font-family: inherit;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition:
transform .22s ease,
background .22s ease,
border-color .22s ease,
color .22s ease,
opacity .22s ease;
}
.pml-btn--primary,
.pml-cookie__btn--accept{
background:var(--pml-gradient-blue);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 16px rgba(255, 107, 107, 0.2);
}
.pml-btn--primary:hover,
.pml-cookie__btn--accept:hover{
background:var(--pml-gradient-gold);
color:#fff;
transform: translateY(-2px);
box-shadow: 0 6px 28px rgba(78, 84, 200, 0.35);
}
.pml-btn--ghost {
background:rgba(255,255,255,.07);
border-color:rgba(255,255,255,.18);
color:#fff;
}
.pml-btn--ghost:hover {
background:rgba(255,255,255,.13);
border-color:rgba(255,255,255,.28);
color:#fff;
transform:translateY(-2px);
}
.pml-btn--ghost i {
font-size: 12px;
}
.pml-btn--light {
background: #ffffff;
border-color:rgba(255,255,255,.85);
color:#2a2a2a;
}
.pml-btn--light:hover {
background:#f4f9ff;
color:#2a2a2a;
transform:translateY(-2px);
}
.pml-btn--dark{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.14);
color:#fff;
}
.pml-btn--dark:hover{
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.24);
color:#fff;
transform:translateY(-2px);
}
/* MOBILE TOGGLE */
/*.pml-mobile-toggle {
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: none;
background: rgba(255, 255, 255, 0.06);
border-radius: 8px;
color: #ffffff;
cursor: pointer;
font-size: 18px;
transition: all 0.25s ease;
}
.pml-mobile-toggle:hover {
background: rgba(255, 255, 255, 0.12);
}*/
.enoflix-home7-hero{
position: relative;
min-height: var(--ef-hero-height);
overflow: hidden;
display: flex;
align-items: center;
isolation: isolate;
background:
radial-gradient(circle at 18% 20%, rgb(33 33 34 / 16%), transparent 34%),
radial-gradient(circle at 86% 16%, rgb(18 18 18 / 10%), #0d0d0d00 28%),
linear-gradient(135deg, #161717 0%, #121111 48%, #040404 100%);
color: #fff;
}
.enoflix-home7-hero[hidden]{
display: none !important;
}
.enoflix-home7-hero::before{
content: "";
position: absolute;
inset: 0;
z-index: -3;
background:
linear-gradient(
90deg,
rgb(27 29 29 / 98%) 0%,
rgb(11 17 17 / 90%) 38%,
rgb(19 19 19 / 38%) 68%,
rgb(0 0 0 / 18%) 100%
),
repeating-linear-gradient(
90deg,
rgb(229 229 229 / 3%) 0,
rgba(255,255,255,.028) 1px,
#1c1d1d00 1px,
#12121200 84px
);
}
.enoflix-home7-hero::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 8;
height: 160px;
background: linear-gradient(180deg, #2e2e2e00 0%, rgb(9 9 9 / 79%) 100%);
pointer-events: none;
}
.enoflix-home7-bgline{
position: absolute;
inset: auto 0 0 0;
z-index: -2;
height: 620px;
background:
radial-gradient(circle at 70% 44%, rgb(45 45 46 / 15%), transparent 34%),
radial-gradient(circle at 95% 60%, rgb(15 15 14 / 11%), transparent 30%);
opacity: 1;
}
.enoflix-home7-container{
position: relative;
z-index: 5;
width: min(100% - 42px, 1280px);
margin-inline: auto;
}
.enoflix-home7-layout{
position: relative;
display: grid;
grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
align-items: center;
gap: 34px;
padding: 112px 0 62px;
}
.enoflix-home7-content{
position: relative;
z-index: 10;
max-width: 560px;
padding-left: 6px;
}
.enoflix-home7-badge{
min-height: 32px;
width: fit-content;
max-width: 100%;
padding: 0 16px;
margin-bottom: 22px;
border-radius: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
background:
linear-gradient(180deg, rgb(42 42 41 / 13%), rgb(22 22 21 / 34%)),
rgb(113 113 115 / 46%);
border: 1px solid rgb(255 255 255 / 8%);
color: #dddddd;
font-size: 13px;
font-weight: 500;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter: blur(8px);
}
.enoflix-home7-badge i{
color: var(--ef-hero-gold);
}
.enoflix-home7-content h1{
margin: 0;
max-width: var(--ef-hero-title-width);
color: #fff;
font-size: var(--ef-hero-title-size);
line-height: 1.02;
font-weight: var(--ef-hero-title-weight);
letter-spacing: -.055em;
text-transform: none;
}
.enoflix-home7-content h1 span,
.enoflix-home7-content h1 strong{
color: var(--ef-hero-blue);
}
.enoflix-home7-content p{
margin: 22px 0 0;
max-width: var(--ef-hero-text-width);
color: rgba(219,235,255,.76);
font-size: var(--ef-hero-text-size);
line-height: 1.62;
font-weight: 400;
}
.enoflix-home7-buttons{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 34px;
}
.enoflix-home7-buttons .pml-btn{
min-height: 52px;
padding: 0 25px;
font-size: 15px;
}
.enoflix-home7-meta{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
}
.enoflix-home7-meta span{
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(255,255,255,.075);
border: 1px solid rgba(255,255,255,.10);
color: rgba(221,237,255,.70);
font-size: 12px;
font-weight: 400;
}
.enoflix-home7-meta i{
color: var(--ef-hero-gold);
}
.enoflix-home7-art{
position: relative;
min-height: 560px;
}
.enoflix-home7-rails{
position: absolute;
right: var(--ef-rail-right);
top: var(--ef-rail-top);
width: var(--ef-rail-width);
height: var(--ef-rail-height);
display: flex;
gap: 20px;
transform: rotate(var(--ef-rail-rotate)) scale(var(--ef-rail-scale));
transform-origin: center;
pointer-events: none;
}
.enoflix-home7-rail{
width: var(--ef-poster-width);
height: var(--ef-rail-height);
overflow: hidden;
border-radius: 30px;
mask-image: linear-gradient(180deg, transparent 0%, #121212 10%, #191818 88%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #1e1d1d 88%, transparent 100%);
}
.enoflix-home7-rail--two{
margin-top: -74px;
}
.enoflix-home7-rail--three{
margin-top: 38px;
}
.enoflix-home7-track{
display: grid;
gap: 28px;
animation: enoflixHome7ScrollUp 24s linear infinite;
}
.enoflix-home7-rail--two .enoflix-home7-track{
animation-name: enoflixHome7ScrollDown;
animation-duration: 28s;
}
.enoflix-home7-rail--three .enoflix-home7-track{
animation-duration: 26s;
}
.enoflix-home7-poster{
position: relative;
width: var(--ef-poster-width);
height: var(--ef-poster-height);
overflow: hidden;
border-radius: var(--ef-poster-radius);
background: rgb(46 45 45 / 98%);
border: 1px solid rgba(255,255,255,.13);
box-shadow:
0 22px 58px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.08);
}
.enoflix-home7-poster img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform: scale(1.01);
}
.enoflix-home7-poster::after{
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, #29292900 48%, rgb(17 17 17 / 98%) 100%),
radial-gradient(circle at center, rgb(78 80 81 / 5%), transparent 54%);
}
.enoflix-home7-poster__play{
position: absolute;
left: 18px;
bottom: 18px;
z-index: 3;
width: 46px;
height: 46px;
border-radius: 999px;
display: grid;
place-items: center;
color: #000000;
background: rgb(255 255 255 / 55%);
box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.enoflix-home7-poster__play i{
transform: translateX(2px);
}
.enoflix-home7-poster__tag{
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
min-height: 20px;
padding: 0 10px;
border-radius: 999px;
display: inline-flex;
align-items: center;
background: var(--ef-hero-gold);
color: rgb(51 53 53 / 98%);
font-size: 12px;
font-weight: 900;
}
.enoflix-home7-floating-icons{
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.enoflix-home7-dot,
.enoflix-home7-ring{
position: absolute;
display: block;
}
.enoflix-home7-dot{
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--ef-hero-gold);
box-shadow: 0 0 24px rgb(255 169 0 / 31%);
animation: enoflixHome7Float 4s ease-in-out infinite;
}
.enoflix-home7-dot--one{
left: 60px;
top: 110px;
}
.enoflix-home7-dot--two{
left: 210px;
bottom: 110px;
width: 10px;
height: 10px;
background: var(--ef-hero-blue);
box-shadow: 0 0 24px rgba(0,132,255,.46);
animation-delay: .7s;
}
.enoflix-home7-dot--three{
right: 80px;
top: 82px;
width: 9px;
height: 9px;
animation-delay: 1.2s;
}
.enoflix-home7-dot--four{
right: 280px;
bottom: 60px;
width: 12px;
height: 12px;
background: #7a777d;
box-shadow: 0 0 20px rgba(255,255,255,.35);
animation-delay: 1.7s;
}
.enoflix-home7-ring{
width: 74px;
height: 74px;
border-radius: 999px;
border: 2px solid rgb(255 171 13 / 26%);
animation: enoflixHome7Spin 9s linear infinite;
}
.enoflix-home7-ring::after{
content: "";
position: absolute;
right: 7px;
top: 7px;
width: 11px;
height: 11px;
border-radius: 999px;
background: var(--ef-hero-gold);
}
.enoflix-home7-ring--one{
left: 18px;
bottom: 210px;
}
.enoflix-home7-ring--two{
right: 36px;
bottom: 168px;
width: 56px;
height: 56px;
animation-direction: reverse;
}
@keyframes enoflixHome7ScrollUp{
from{
transform: translateY(0);
}
to{
transform: translateY(-50%);
}
}
@keyframes enoflixHome7ScrollDown{
from{
transform: translateY(-50%);
}
to{
transform: translateY(0);
}
}
@keyframes enoflixHome7Float{
0%,100%{
transform: translate3d(0,0,0);
}
50%{
transform: translate3d(0,-18px,0);
}
}
@keyframes enoflixHome7Spin{
to{
transform: rotate(360deg);
}
}
@media (max-width: 1199px){
:root{
--ef-hero-height: 690px;
--ef-rail-right: -210px;
--ef-rail-scale: .86;
--ef-rail-rotate: -20deg;
}
.enoflix-home7-layout{
gap: 26px;
}
.enoflix-home7-content h1{
font-size: clamp(38px, 4.7vw, 56px);
}
}
@media (max-width: 1023px){
.enoflix-home7-hero{
min-height: auto;
}
.enoflix-home7-layout{
grid-template-columns: 1fr;
padding: 106px 0 70px;
}
.enoflix-home7-content{
max-width: 720px;
text-align: center;
margin-inline: auto;
padding-left: 0;
}
.enoflix-home7-badge,
.enoflix-home7-content p{
margin-inline: auto;
}
.enoflix-home7-buttons,
.enoflix-home7-meta{
justify-content: center;
}
.enoflix-home7-art{
min-height: 470px;
}
.enoflix-home7-rails{
left: 50%;
right: auto;
top: -86px;
transform: translateX(-50%) rotate(-16deg) scale(.82);
}
}
@media (max-width: 767px){
.enoflix-home7-container{
width: min(100% - 28px, 1280px);
}
.enoflix-home7-layout{
padding: 96px 0 58px;
gap: 24px;
}
.enoflix-home7-badge{
min-height: 34px;
padding: 0 12px;
font-size: 10px;
margin-bottom: 16px;
}
.enoflix-home7-content h1{
font-size: clamp(34px, 10vw, 46px);
line-height: 1;
letter-spacing: -.05em;
font-weight: 780;
}
.enoflix-home7-content p{
max-width: 370px;
margin-top: 18px;
font-size: 14px;
line-height: 1.58;
}
.enoflix-home7-buttons{
margin-top: 25px;
gap: 10px;
}
.enoflix-home7-buttons .pml-btn{
min-height: 46px;
padding: 0 17px;
font-size: 13px;
}
.enoflix-home7-meta{
gap: 8px;
margin-top: 20px;
}
.enoflix-home7-meta span{
min-height: 29px;
padding: 0 9px;
font-size: 10px;
}
.enoflix-home7-art{
min-height: 360px;
}
.enoflix-home7-rails{
top: -126px;
width: 680px;
height: 570px;
gap: 18px;
transform: translateX(-50%) rotate(-15deg) scale(.68);
}
.enoflix-home7-rail{
width: 210px;
height: 570px;
border-radius: 26px;
}
.enoflix-home7-track{
gap: 18px;
}
.enoflix-home7-poster{
width: 210px;
height: 310px;
border-radius: 22px;
}
.enoflix-home7-ring--one,
.enoflix-home7-ring--two,
.enoflix-home7-dot--three,
.enoflix-home7-dot--four{
display: none;
}
}
@media (max-width: 430px){
.enoflix-home7-content h1{
font-size: 38px;
font-weight: 770;
}
.enoflix-home7-buttons .pml-btn{
flex: 1 1 auto;
}
.enoflix-home7-art{
min-height: 340px;
}
.enoflix-home7-rails{
top: -130px;
transform: translateX(-50%) rotate(-15deg) scale(.63);
}
}
@media (prefers-reduced-motion: reduce){
.enoflix-home7-track,
.enoflix-home7-dot,
.enoflix-home7-ring{
animation: none !important;
}
}
/* =========================================================
8. RESPONSIVE BREAKPOINTS
========================================================= */
/* ---------- 8.1 1199px and below ---------- */
@media (max-width: 1199px) {
:root {
--ef-hero-height: 690px;
--ef-rail-right: -210px;
--ef-rail-scale: .86;
--ef-rail-rotate: -20deg;
}
.enoflix-home7-layout {
gap: 26px;
}
.enoflix-home7-content h1 {
font-size: clamp(38px, 4.7vw, 56px);
}
/* HEADER ADJUSTMENTS */
.pml-header__inner {
gap: 16px;
}
.pml-logo {
width: 150px;
}
.pml-logo__img {
max-width: 128px;
height: 40px;
}
.pml-header-actions {
width: 150px;
}
.pml-nav > a,
.pml-navdrop > button {
min-height: 39px;
padding: 0 13px;
font-size: 13px;
}
.pml-header-actions .pml-btn {
min-height: 42px;
padding: 0 17px;
font-size: 13px;
}
}
/* ---------- 8.2 1023px and below ---------- */
@media (max-width: 1023px) {
.enoflix-home7-hero {
min-height: auto;
}
.enoflix-home7-layout {
grid-template-columns: 1fr;
padding: 106px 0 70px;
}
.enoflix-home7-content {
max-width: 720px;
text-align: center;
margin-inline: auto;
padding-left: 0;
}
.enoflix-home7-badge,
.enoflix-home7-content p {
margin-inline: auto;
}
.enoflix-home7-buttons,
.enoflix-home7-meta {
justify-content: center;
}
.enoflix-home7-art {
min-height: 470px;
}
.enoflix-home7-rails {
left: 50%;
right: auto;
top: -86px;
transform: translateX(-50%) rotate(-16deg) scale(.82);
}
}
@media (max-width:1199px){
:root{
--pml-modal-width:700px;
--pml-modal-video-max-height:360px;
--pml-spotlight-card-height:300px;
}
.pml-header__inner{
gap:16px;
}
.pml-logo{
width: 120px;
}
.pml-logo__img{
max-width:128px;
height:40px;
}
.pml-header-actions {
width: 150px;
}
.pml-nav{
gap:5px;
padding:6px;
}
.pml-nav > a,
.pml-navdrop > button{
min-height:39px;
padding:0 13px;
font-size:13px;
}
.pml-header-actions .pml-btn{
min-height: 2rem;
padding-inline: 0.8rem;
font-size: 0.8rem;
}
.pml-hero{
min-height:720px;
}
.pml-language-picker {
min-width: 2.95rem;
width: 2.95rem;
}
.pml-language-picker__select {
width: 100%;
padding-left: 2.2rem;
padding-right: 0.75rem;
color: #c9c5c5;
}
.pml-language-picker__select option {
color: #1b1a1a;
}
.pml-language-picker__icon--end {
display: none;
}
}
@media (max-width:1023px){
.pml-hero{
min-height:auto;
}
.pml-hero__grid{
grid-template-columns:1fr;
padding-top:118px;
padding-bottom:70px;
gap:36px;
}
.pml-hero__content{
max-width:720px;
text-align:center;
margin-inline:auto;
}
.pml-hero p,
.pml-live__content p{
margin-inline:auto;
}
.pml-hero__buttons,
.pml-hero__meta{
justify-content:center;
}
.pml-hero__visual{
min-height:500px;
}
.pml-hero-card--main{
right:50%;
top:0;
width:min(420px,72%);
transform:translateX(50%) rotate(2deg);
}
.pml-section-head{
align-items:flex-start;
flex-direction:column;
}
.pml-category-grid,
.pml-feature-grid,
.pml-device-grid,
.pml-pricing-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.pml-live__grid,
.pml-faq-grid{
grid-template-columns:1fr;
}
.pml-cookie__box{
grid-template-columns:1fr;
}
.pml-language-picker {
min-width: 2.95rem;
width: 2.95rem;
}
.pml-language-picker__select {
width: 100%;
padding-left: 2.2rem;
padding-right: 0.75rem;
color: #c9c5c5;
}
.pml-language-picker__select option {
color: #181717;
}
.pml-language-picker__icon--end {
display: inline-block;
}
}
@media (max-width: 991.98px) {
:root{
--pml-modal-width:660px;
--pml-modal-video-max-height:330px;
--pml-spotlight-card-height:270px;
}
.pml-header{
padding:14px 0;
background:rgb(14 14 14);
}
.pml-header__inner {
padding: 0 16px;
width: min(100% - 28px, 1280px);
gap: 12px;
}
.pml-nav{
display:none;
}
.pml-nav > a,
.pml-navdrop > button {
font-size: 12px;
padding: 0 12px;
min-height: 32px;
}
.pml-logo{
width: auto;
min-width:auto;
}
.pml-logo__img{
max-width:132px;
height:40px;
}
.pml-header.is-scrolled .pml-logo__img {
height: 28px;
}
.pml-header-actions{
width: auto;
gap:8px;
}
.pml-header-actions .pml-btn{
min-height:38px;
padding:0 13px;
font-size:12px;
}
.pml-language-picker {
height: 34px;
min-width: 34px;
}
.pml-language-picker__icon--end {
display: inline-block;
}
.pml-mega {
padding: 20px;
gap: 20px;
width: min(460px, calc(100vw - 24px));
}
.pml-mega::before {
left: 82%;
}
.pml-mega__col a {
font-size: 13px;
min-height: 36px;
}
.pml-mega__col a i {
width: 28px;
height: 28px;
font-size: 12px;
flex: 0 0 28px;
}
.pml-mobile-toggle {
display: inline-flex;
}
/*.pml-spotlight-swiper .swiper-slide{
width:310px;
flex-basis:310px;
}*/
}
@media (max-width:767px){
:root{
--pml-modal-width:100%;
--pml-modal-video-max-height:260px;
--pml-modal-radius:20px;
--pml-spotlight-card-height:270px;
}
/*.pml-container,
.pml-container--wide{
width:min(100% - 28px,1280px);
}*/
.pml-container,
.pml-container.pml-container--wide {
width: 100%;
padding-inline: 14px;
}
.pml-logo__img{
max-width:126px;
height:38px;
}
.pml-header-actions{
gap:7px;
}
.pml-header-actions .pml-btn{
min-height:38px;
padding:0 12px;
font-size:12px;
}
.pml-hero{
align-items:flex-start;
}
.pml-hero__grid{
padding-top:104px;
padding-bottom:64px;
gap:28px;
}
.pml-badge{
min-height:34px;
padding:0 11px;
font-size:10px;
margin-bottom:16px;
}
.pml-hero h1{
font-size:clamp(36px,11vw,46px);
line-height:.96;
letter-spacing:-.06em;
}
.pml-hero p{
max-width:360px;
margin:18px auto 0;
font-size:14px;
line-height:1.55;
}
.pml-hero__buttons{
gap:10px;
margin-top:26px;
}
.pml-hero__buttons .pml-btn{
min-height:46px;
padding:0 18px;
font-size:13px;
}
.pml-hero__meta{
gap:13px;
margin-top:22px;
font-size:12px;
}
.pml-hero__visual{
min-height:430px;
width:100%;
}
.pml-hero-card--main{
width:min(320px,76vw);
border-radius:34px;
}
.pml-play-orb{
width:86px;
height:86px;
font-size:30px;
}
.pml-float-chip{
--pml-chip-px:12px;
--pml-chip-height:40px;
--pml-chip-gap:7px;
--pml-chip-font:11px;
}
.pml-float-chip--one{
left:4px;
top:112px;
}
.pml-float-chip--two{
right:2px;
bottom:98px;
}
.pml-mini-poster{
width:92px;
border-width:6px;
border-radius:18px;
}
.pml-mini-poster--one{
left:24px;
bottom:76px;
}
.pml-mini-poster--two{
right:22px;
top:84px;
}
.pml-section,
.pml-spotlight,
.pml-live{
padding:72px 0;
}
/*.pml-spotlight-swiper{
overflow:hidden;
padding:6px 0 14px;
}
.pml-spotlight-swiper .swiper-slide{
width:82vw;
flex-basis:82vw;
}*/
.pml-card{
border-radius:10px;
}
.pml-card::after{
right:10px;
bottom:10px;
width: 20px;
height: 20px;
opacity:.68;
}
.pml-card__content{
padding:16px;
}
.pml-card__content h3{
font-size:17px;
}
.pml-card__content p,
.pml-card__rating{
font-size: 11px;
}
.pml-card__lock{
width: 40px;
height: 40px;
}
.pml-card__quality{
min-width: 38px;
min-height: 30px;
}
.pml-section-head--inline{
flex-direction:column;
align-items:flex-start;
}
/*.pml-spotlight-actions{
width:100%;
justify-content:flex-start;
gap:8px;
}*/
.pml-slider-btn{
width: 40px;
height: 40px;
flex-basis: 40px;
}
.pml-category-grid,
.pml-feature-grid,
.pml-device-grid,
.pml-pricing-grid{
grid-template-columns:1fr;
}
.pml-live-card{
grid-template-columns:1fr;
}
.pml-live-card img{
width:100%;
height:180px;
}
.pml-footer__top,
.pml-footer__bottom{
flex-direction:column;
align-items:flex-start;
}
.pml-preview{
padding:12px;
}
.pml-preview__card{
width:100%;
max-height:calc(100vh - 24px);
}
.pml-preview__close,
.pml-preview__mute{
width:38px;
height:38px;
font-size:15px;
}
.pml-preview__media{
aspect-ratio: 16 / 9;
max-height:42vh;
}
.pml-preview__brand{
left:290px;
bottom:16px;
max-width:60px;
}
.pml-preview__brand img{
max-width:60px;
height:30px;
}
.pml-preview__body{
padding:16px;
}
.pml-preview__tags{
gap:7px;
margin-bottom:11px;
}
.pml-preview__tags span{
min-height:28px;
padding:0 10px;
font-size:12px;
}
.pml-preview__body h3{
font-size:24px;
}
.pml-preview__body p{
font-size:14px;
margin-bottom:18px;
}
.pml-preview__actions{
gap:8px;
}
.pml-preview__actions .pml-btn{
flex:1 1 auto;
min-height:46px;
padding:0 14px;
font-size:13px;
}
.pml-preview__ended{
padding:18px;
}
.pml-preview__ended-actions{
flex-direction:column;
width:min(270px,100%);
margin:0 auto;
}
.pml-preview__ended-btn{
width:100%;
}
.pml-access__card{
padding:24px;
}
.pml-cookie{
bottom:14px;
padding:0 14px;
}
.pml-cookie__actions{
width:100%;
}
.pml-cookie__btn{
flex:1;
}
}
@media (max-width: 599.98px) {
.pml-header {
padding: 10px 0;
}
.pml-header.is-scrolled {
padding: 8px 0;
}
.pml-header__inner {
padding: 0 12px;
gap: 8px;
}
.pml-logo {
min-width: 80px;
}
.pml-logo__img {
height: 28px;
}
.pml-header.is-scrolled .pml-logo__img {
height: 24px;
}
.pml-nav {
display: none;
}
.pml-header-actions {
min-width: auto;
gap: 4px;
}
.pml-btn {
min-height: 30px;
padding: 0 10px;
font-size: 11px;
gap: 4px;
}
.pml-btn--primary {
padding: 0 14px;
}
.pml-btn--ghost {
display: none;
}
.pml-mobile-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: none;
background: rgba(255, 255, 255, 0.06);
border-radius: 8px;
color: #ffffff;
cursor: pointer;
font-size: 16px;
transition: all 0.25s ease;
}
.pml-mobile-toggle:hover {
background: rgba(255, 255, 255, 0.12);
}
.pml-language-picker {
height: 30px;
min-width: 30px;
width: auto;
}
.pml-language-picker__select {
font-size: 12px;
min-width: 40px;
padding: 4px 28px 4px 36px;
}
.pml-language-picker__icon--start {
padding-left: 8px;
font-size: 12px;
}
.pml-language-picker__icon--end {
padding-right: 6px;
font-size: 9px;
}
}
@media (max-width: 399.98px) {
:root{
--pml-modal-video-max-height:235px;
}
.pml-container {
padding-inline: 1rem;
}
.pml-header__inner {
padding: 0 8px;
gap: 6px;
}
.pml-logo {
min-width: 60px;
}
.pml-logo__img{
max-width: 118px;
height: 36px;
}
.pml-header.is-scrolled .pml-logo__img {
height: 20px;
}
.pml-header-actions .pml-btn--ghost{
display: none;
}
.pml-header-actions .pml-btn{
min-height:30px;
padding:0 14px;
font-size:11px;
}
.pml-btn {
font-size: 10px;
padding: 0 8px;
min-height: 26px;
}
.pml-btn--primary {
padding: 0 10px;
}
.pml-language-picker {
height: 26px;
min-width: 26px;
}
.pml-language-picker__select {
font-size: 12px;
min-width: 30px;
padding: 0 20px 0 6px;
}
.pml-language-picker__icon--start {
display: none;
}
.pml-language-picker__icon--end {
padding-right: 4px;
font-size: 7px;
}
.pml-preview__body h3{
font-size: 22px;
}
.pml-preview__actions{
flex-direction:column;
align-items:stretch;
}
.pml-preview__actions .pml-btn{
width:100%;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
/* Header */
.pml-header,
.pml-logo__img,
.pml-nav > a,
.pml-navdrop > button,
.pml-btn,
.pml-mega,
.pml-language-picker,
.pml-mobile-toggle {
transition: none !important;
}
.pml-nav > a::after,
.pml-navdrop > button::after {
transition: none !important;
}
.pml-mega {
transform: translateX(-50%) translateY(0) scale(1);
}
/* Hero Section */
.enoflix-home7-track,
.enoflix-home7-dot,
.enoflix-home7-ring {
animation: none !important;
}
*,
*::before,
*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
transition-duration:.001ms !important;
}
}
/*@media (forced-colors: active) {
.pml-language-picker__select,
.pml-btn,
.pml-signup-field__input,
.pml-signup-form__button {
border: 1px solid ButtonText;
}
.eno-background,
.eno-bottom-curve {
display: none;
}
}*/
/* =========================================================
WINDOWS HIGH-CONTRAST / FORCED COLORS
========================================================= */
@media (forced-colors: active) {
.pml-language-picker__select,
.pml-btn,
.pml-slider-btn,
.pml-mini-link,
.pml-card,
.pml-signup-field__input,
.pml-signup-form__button,
.pml-cta__form-input,
.pml-cta__form-submit,
.pml-faq-item__button,
.pml-preview__icon-btn {
border:
1px solid
ButtonText;
}
.pml-card:focus-visible,
.pml-slider-btn:focus-visible,
.pml-btn:focus-visible,
.pml-faq-item__button:focus-visible {
outline:
2px solid
Highlight;
outline-offset: 3px;
}
.pml-spotlight::before,
.pml-spotlight::after,
.enoflix-home7-bgline,
.enoflix-home7-floating-icons,
.pml-cta__bg,
.pml-cta__shade {
display: none;
}
}
/* =========================================================
BELOW-THE-FOLD RENDER OPTIMIZATION
---------------------------------------------------------
Allows the browser to delay layout and painting for
sections that are far outside the viewport.
========================================================= */
/*.pml-spotlight,
.pml-section,
.pml-live,
.pml-promo,
.pml-cta,
.pml-footer {
content-visibility: auto;
contain-intrinsic-size:
auto 700px;
}*/
/* =========================================================
BELOW-THE-FOLD RENDER OPTIMIZATION
========================================================= */
#categories,
#features,
#live,
#devices,
#pricing,
#faq,
.pml-cta,
.pml-footer {
content-visibility: auto;
contain-intrinsic-size: auto 700px;
}