/* ========================================================= EnoPlayer V6 – CORE - Tokens, body, player shell - Progress rail + thumb + chapters + tooltip - Controls, buttons, icons, watermark, spinner - Settings panel, meta badges, volume, next overlay - Neutral base (engine) - Brand themes override via data-enoplayer-theme ========================================================= */ /* ========================= ROOT TOKENS — ENOPLAYER ========================= */ :root{ /* Brand */ --enoplayer-brand: #005eff; --enoplayer-brand-alt: #ffac00; /* Stage / surfaces */ --enoplayer-bg: #020617; /* page / stage */ --enoplayer-surface: #020617; /* player shell */ --enoplayer-surface-soft: rgba(15,23,42,.94); /* Text */ --enoplayer-text: #e5e7eb; --enoplayer-text-muted: rgba(148,163,184,.90); /* Borders / outlines */ --enoplayer-border-subtle: rgba(148,163,184,.25); --enoplayer-border-strong: rgba(15,23,42,1); /* Radius / elevation */ --enoplayer-radius-lg: 18px; --enoplayer-radius-md: 12px; --enoplayer-radius-sm: 8px; --enoplayer-radius-pill: 999px; --enoplayer-seek-thumb-w: 176px; --enoplayer-seek-thumb-h: 99px; /* 16:9 */ --enoplayer-shadow-lg: 0 22px 55px rgba(0,0,0,.70); --enoplayer-shadow-soft: 0 12px 34px rgba(15,23,42,.75); /* “main color” concept like --plyr-color-main */ --enoplayer-color-main: var(--enoplayer-brand-alt, #ffac00); /* UI sizing */ --enoplayer-control-spacing: 10px; --enoplayer-control-icon-size: 18px; /* ========================= PROGRESS / RAIL ========================= */ --enoplayer-progress-bg: linear-gradient( 180deg, rgba(255,255,255,.10), rgba(0,0,0,.65) ); --enoplayer-progress-buffer: linear-gradient( 90deg, rgba(255,255,255,.25), rgba(255,255,255,.05) ); --enoplayer-progress-played: linear-gradient(90deg, #f49400, #ffb84f); --enoplayer-progress-thumb-glow: rgba(255,150,0,.40); /* Seek preview */ --enoplayer-seek-bg: #001022; --enoplayer-seek-glow-main: rgba(0,60,140,.65); --enoplayer-seek-glow-ring: rgba(0,140,255,.35); --enoplayer-seek-glow-inner: rgba(0,112,255,.15); /* Tooltip / popup */ --enoplayer-tooltip-bg: rgba(15,23,42,.96); --enoplayer-tooltip-text: #f9fafb; --enoplayer-popup-bg: rgba(15,23,42,.96); --enoplayer-popup-text: #e5e7eb; /* Badges */ --enoplayer-badge-bg: rgba(15,23,42,.90); --enoplayer-badge-text: #e5e7eb; /* ========================= LOADING / SHIMMER ========================= */ --enoplayer-progress-loading-size: 25px; --enoplayer-progress-loading-bg: rgba(35,40,47,.60); /* ========================= RANGE (sliders) — global (match your volume math) ========================= */ --enoplayer-range-track-height: 4px; --enoplayer-range-thumb-size: 12px; /* ========================= Cookies Consent — DropOut ========================= */ --eno-bg: rgba(10, 12, 18, 0.72); --eno-panel: rgba(18, 22, 34, 0.92); --eno-panel-2: rgba(22, 28, 44, 0.96); --eno-border: rgba(255,255,255,0.10); --eno-text: rgba(255,255,255,0.92); --eno-muted: rgba(255,255,255,0.66); --eno-shadow: 0 24px 70px rgba(0,0,0,0.6); --eno-radius: 18px; /* Eno brand accent (you can change per product) Example: EnoFlix accent: #ffb400 Example: EnoPlayer accent: #0070ff */ --eno-accent: #ffb400; --eno-accent-2: rgba(255, 180, 0, 0.18); /* ========================= VOLUME — panel sizing ========================= */ --enoplayer-vol-panel-h: 40px; --enoplayer-vol-panel-w: 120px; --enoplayer-vol-panel-gap: 14px; --enoplayer-vol-panel-pad-x: 10px; --enoplayer-vol-panel-radius: 999px; --enoplayer-vol-panel-bg: rgba(255,255,255,.10); --enoplayer-vol-panel-border: rgba(255,255,255,.08); /* Small screens (overlay mode) */ --enoplayer-vol-panel-w-sm: 92px; --enoplayer-vol-panel-gap-sm: 8px; --enoplayer-vol-panel-pad-x-sm: 8px; /* Touch devices (always open) */ --enoplayer-vol-panel-w-touch: 108px; --enoplayer-vol-panel-gap-touch: 12px; --enoplayer-vol-panel-pad-x-touch: 10px; /* Motion */ --enoplayer-vol-open-shift: -6px; --enoplayer-vol-open-scale: .85; --enoplayer-vol-dur: .28s; --enoplayer-vol-ease: cubic-bezier(.2,0,.2,1); /* Slider geometry (thumb-safe padding) */ --enoplayer-vol-safe-extra: 10px; /* Slider colors */ --enoplayer-vol-track-bg: rgba(255,255,255,.25); --enoplayer-vol-track-border: rgba(255,255,255,.10); --enoplayer-vol-thumb-bg: #fff; --enoplayer-vol-focus-ring: rgba(255,255,255,.22); /* Animated mute “snap” */ --enoplayer-vol-snap-ms: 160ms; --enoplayer-vol-snap-ease: cubic-bezier(.2,0,.2,1); /* TV mode (for vertical volume later) */ --enoplayer-tv-vol-w: 44px; --enoplayer-tv-vol-h: 140px; --enoplayer-tv-vol-pad-y: 12px; /* ===== EnoFlix tokens used by core layout ===== */ --enoflix-bg: #050516; --enoflix-shadow: 0 24px 60px rgba(0,0,0,.85); --enoflix-prime-dark: #09122f; /* ===== Legacy aliases (keep old CSS working) ===== */ --enoplayer-border: var(--enoplayer-border-subtle); --enoplayer-shadow: var(--enoplayer-shadow-lg); --enoplayer-radius: var(--enoplayer-radius-lg); --enoplayer-muted: var(--enoplayer-text-muted); } /* Shimmer like Plyr progress loading */ @keyframes enoplayer-progress-shimmer{ to{ background-position: var(--enoplayer-progress-loading-size) 0; } } /* Popup motion like Plyr menu */ @keyframes enoplayer-popup{ 0%{ opacity:.5; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } } /* Generic fade-in */ @keyframes enoplayer-fade-in{ from{ opacity:0; } to{ opacity:1; } } :root{ /* ========================= ENOFLIX TYPOGRAPHY (for EnoPlayer) ========================= */ /* UI / body */ --enoplayer-font-body: "EnoFlix Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Core UI (menus, settings, labels) */ --enoplayer-font-core: "EnoFlix Core", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Strong UI / headings */ --enoplayer-font-super: "EnoFlix Nova", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Display */ --enoplayer-font-display: "EnoFlix Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --enoplayer-font-display-alt: "EnoFlix Molla", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --enoplayer-font-serif: "EnoFlix Serif", ui-serif, Georgia, "Times New Roman", serif; --enoplayer-font-strong: "EnoFlix Axis", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Character / accent */ --enoplayer-font-character: "EnoFlix Character", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --enoplayer-font-accent: "EnoFlix Quick", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Backward compatible: this is what your CSS already uses */ --enoplayer-font: var(--enoplayer-font-body); } /* ========================= ENOPLAYER TYPOGRAPHY MAP ========================= */ /* Base: everything inside player uses Body */ .enoplayer-container, .enoplayer-container *{ font-family: var(--enoplayer-font-body); } /* “Core UI” areas: numbers, menus, tooltips, toggles */ .time-display, .enoplayer-tooltip, .enoplayer-settings, .enoplayer-settings-header, .enoplayer-settings-title, .enoplayer-settings-item, .enoplayer-cast-banner, .enoplayer-airplay-banner{ font-family: var(--enoplayer-font-core); } /* Titles / hero text */ .enoplayer-next__title, .enoplayer-next__content .title, .enoplayer-meta-badge{ font-family: var(--enoplayer-font-super); } /* Labels / tiny uppercase system text */ .enoplayer-next__label, .enoplayer-settings-title, .enoplayer-next__meta, .enoplayer-next__countdown{ font-family: var(--enoplayer-font-core); letter-spacing: 0.16em; text-transform: uppercase; } /* Buttons should feel “UI clean” (Core) */ .control-btn, .enoplayer-next__btn-primary, .enoplayer-next__btn-secondary{ font-family: var(--enoplayer-font-core); letter-spacing: 0.02em; } /* Captions/subtitles (readability = Body) */ video::cue{ font-family: var(--enoplayer-font-body); } /* Optional: if you have chapter tooltips / text overlays */ .enoplayer-seek-thumb-time{ font-family: var(--enoplayer-font-core); letter-spacing: 0.02em; } /* ========================= THEME: DEFAULT ========================= */ .enoplayer-container[data-enoplayer-theme="enoplayer"] { --enoplayer-accent: #0070ff; --enoplayer-accent-soft: rgba(0, 112, 255, 0.18); --enoplayer-accent-strong: rgba(0, 112, 255, 0.9); --enoplayer-bg: #020617; --enoplayer-surface: #020617; /* typography roles (FIXED: no self-reference) */ --enoplayer-font-body: var(--enoplayer-font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif); --enoplayer-font-core: var(--enoplayer-font-core-base, var(--enoplayer-font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif)); --enoplayer-font-super: var(--enoplayer-font-nova, var(--enoplayer-font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif)); /* clean / neutral */ --enoplayer-progress-played: linear-gradient(90deg, #f49400, #ffb84f); --enoplayer-progress-thumb-glow: rgba(255, 160, 0, 0.55); --enoplayer-seek-bg: #001022; --enoplayer-seek-glow-main: rgba(0, 60, 140, 0.65); --enoplayer-seek-glow-ring: rgba(0, 140, 255, 0.35); --enoplayer-seek-glow-inner: rgba(0, 112, 255, 0.15); } /* ========================= THEME: ENOFLIX ========================= */ .enoplayer-container[data-enoplayer-theme="enoflix"] { --enoplayer-accent: #0070ff; --enoplayer-accent-soft: rgba(0, 112, 255, 0.24); --enoplayer-accent-strong: rgba(0, 140, 255, 0.96); --enoplayer-bg: #020817; --enoplayer-surface: #020817; --enoplayer-surface-soft: rgba(2, 8, 23, 0.96); /* 🎬 typography swap */ --enoplayer-font-body: var(--enoplayer-font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif); --enoplayer-font-core: var(--enoplayer-font-core-base, var(--enoplayer-font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif)); --enoplayer-font-super: var(--enoplayer-font-display, var(--enoplayer-font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif)); /* Make progress feel more “EnoFlix” */ --enoplayer-progress-bg: linear-gradient( 180deg, rgba(15, 23, 42, 0.85), rgba(2, 6, 23, 1) ); --enoplayer-progress-buffer: linear-gradient( 90deg, rgba(148, 163, 184, 0.55), rgba(148, 163, 184, 0.16) ); --enoplayer-progress-played: linear-gradient(90deg, #ff9500, #ffb84f); --enoplayer-progress-thumb-glow: rgba(255, 150, 0, 0.7); /* EnoFlix signature seek preview */ --enoplayer-seek-bg: #020817; --enoplayer-seek-glow-main: rgba(0, 112, 255, 0.32); --enoplayer-seek-glow-ring: rgba(0, 140, 255, 0.35); --enoplayer-seek-glow-inner: rgba(0, 112, 255, 0.22); } /* ========================= RESET + BODY ========================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; /*display: flex;*/ display: block; justify-content: center; background: var(--enoflix-bg); color: #e5e7eb; font-family: var(--enoplayer-font); } body, html { color: #fff; font-family: var(--enoplayer-font); --base-line-height: 1.2; line-height: var(--base-line-height); --base-font-size: 10px; font-size: var(--base-font-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: default; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .svg-icon { height: 100%; pointer-events: none; width: 100%; } /* ========================= PLAYER SHELL ========================= */ .enoplayer-container{ position: relative; width: 100%; max-width: 1120px; background: var(--enoflix-bg); padding: 1.5rem; font-family: var(--enoplayer-font); border-radius: 24px; overflow: hidden; box-shadow: var(--enoflix-shadow); } /* Center the player on the page (normal mode) */ .enoplayer-safe-area{ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } /* 16:9 shell */ .enoplayer{ position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 */ background: #000; color: var(--enoplayer-text); border: 1px solid var(--enoplayer-border); box-shadow: var(--enoplayer-shadow); border-radius: var(--enoplayer-radius); overflow: hidden; margin: 6px auto 24px; z-index: 1; } /* Poster layer */ .enoplayer-poster{ position: absolute; inset: 0; z-index: 2; background-size: cover; background-position: center; transition: opacity .25s ease; } .enoplayer:not(.poster-disabled) .enoplayer-poster{ opacity: 1; pointer-events: auto; } .enoplayer.poster-disabled .enoplayer-poster{ opacity: 0; pointer-events: none; } /* Video */ .enoplayer-video{ position: absolute; inset: 0; width: 100%; height: 100%; background: #000; outline: none; display: block; object-fit: cover; /* normal mode */ } .enoplayer-video.is-fill{ object-fit: cover; } /* ========================= FULLSCREEN - Unified rules (no duplicates) - Includes Safari (-webkit-full-screen) - Choose ONE fit: contain OR cover ========================= */ .enoplayer-container:fullscreen, .enoplayer-container:-webkit-full-screen{ padding: 0 !important; margin: 0 !important; width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; background: #000 !important; box-shadow: none !important; } .enoplayer-container:fullscreen .enoplayer, .enoplayer-container:-webkit-full-screen .enoplayer{ margin: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; /* remove 16:9 hack */ border-radius: 0 !important; } /* ✅ Fullscreen video fit choice: - contain = no crop, may show black bars - cover = fills screen, may crop edges */ .enoplayer-container:fullscreen .enoplayer-video, .enoplayer-container:-webkit-full-screen .enoplayer-video{ width: 100% !important; height: 100% !important; object-fit: contain !important; /* CHANGE to cover if you want crop */ background: #000; } /* If safe-area ever goes fullscreen */ .enoplayer-safe-area:fullscreen, :fullscreen .enoplayer-safe-area{ padding: 0 !important; margin: 0 !important; align-items: stretch; justify-content: center; } /* aggressive crop – use carefully */ .enoplayer-video.enoplayer-video--crop-bars { transform: scale(1.06); /* zoom in slightly */ transform-origin: center; } /*.enoplayer.is-playing .enoplayer-hit{ pointer-events:auto; }*/ /* ============================================================ ENOPLAYER LOGO STACK (fix: MUST override base logo styles) ============================================================ */ /* wrapper */ .enoplayer-logo-stack { position: absolute; top: 20px; right: 20px; z-index: 40; display: flex; gap: 8px; align-items: center; } .enoplayer-logo { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: none; } /* main Enoflix logo */ .enoplayer-logo--main { width: 40px; height: 40px; background-image: url("https://enoflix.net/i/enoflix-logo-active-small"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* Mini-mode EnoFloat positioning */ .enofloat-mini-mode .enoplayer-logo--enofloat { position: absolute; top: -8px; /* was 20px → small downward correction */ right: -25px; /* increase inset so it’s not hugging the corner */ display: flex !important; } /* Base: hidden until mini-mode */ .enoplayer-logo--enofloat { width: 110px; height: 45px; background-size: contain; background-position: center; background-repeat: no-repeat; display: none; } @media (max-width: 480px) { .enoplayer-logo--enofloat { width: 95px; height: 38px; } } /* Use the EnoFlix brand gradient version */ .enoplayer-logo--enofloat.enofloat-theme-enoflix { background-image: url("https://enoflix.net/i/enofloat-mini-enoflix"); } /* Use the EnoFlix brand gradient version */ .enoplayer-logo--enofloat.enofloat-theme-obit { background-image: url("https://enoflix.net/i/enofloat-logo-transp"); } /* Default blue-green-aqua */ .enoplayer-logo--enofloat.enofloat-theme-default { background-image: url("https://enoflix.net/i/enofloat-mini-grad"); } /* Gold */ .enoplayer-logo--enofloat.enofloat-theme-gold { background-image: url("https://enoflix.net/i/enofloat-mini-gold"); } /* Silver */ .enoplayer-logo--enofloat.enofloat-theme-silver { background-image: url("https://enoflix.net/i/enofloat-mini-silver"); } .enofloat-mini-mode .enoplayer-logo--main { display: none; } .enofloat-mini-mode .enoplayer-logo--enofloat { display: flex; } /* ========================================================= EnoPlayer – LOADING SPINNER (Official Style) - Gradient arc sweep - Elastic scale pulse - Inner glow core - Brand token support ========================================================= */ .enoplayer-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 40; pointer-events: none; display: none; /* toggled by JS */ } .enoplayer-spinner { width: 54px; height: 54px; position: relative; border-radius: 50%; animation: enoplayer-scale 1.4s ease-in-out infinite; } /* Outer rotating ring */ .enoplayer-spinner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient( from 0deg, var(--enoplayer-brand) 0deg, var(--enoplayer-brand-alt) 120deg, rgba(255,255,255,0.12) 200deg, transparent 360deg ); /* hollow center */ -webkit-mask: radial-gradient( circle, transparent 65%, #000 66% ); mask: radial-gradient(circle, transparent 65%, #000 66%); animation: enoplayer-spin 0.9s linear infinite; } /* Inner glowing core */ .enoplayer-spinner::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--enoplayer-brand-alt); transform: translate(-50%, -50%); box-shadow: 0 0 12px var(--enoplayer-brand-alt), 0 0 24px rgba(255,172,0,0.45); animation: enoplayer-corepulse 1.4s ease-in-out infinite; } /* Rotation */ @keyframes enoplayer-spin { to { transform: rotate(360deg); } } /* Elastic outer bounce */ @keyframes enoplayer-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* Inner core pulsing */ @keyframes enoplayer-corepulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; } } /* ========================================================= BIG OVERLAY CONTROL (Play / Pause) — FINAL (NO FREEZE) - Overlay never steals clicks (only visible button is clickable) - Visibility is controlled by JS classes: .big-play-visible / .big-pause-hidden - Pulse ONLY play button when paused + NOT in float ========================================================= */ /* ---------- Size system ---------- */ .enoplayer{ --big-ctrl-size: 80px; --big-ctrl-icon: 36px; } @media (max-width: 480px), (max-height: 480px){ .enoplayer{ --big-ctrl-size: 56px; --big-ctrl-icon: 26px; } } @media (max-width: 360px), (max-height: 360px){ .enoplayer{ --big-ctrl-size: 44px; --big-ctrl-icon: 20px; } } /* EnoFloat sizing */ .enoplayer-container.enofloat-active .enoplayer{ --big-ctrl-size: 48px; --big-ctrl-icon: 22px; } .enoplayer-container.enofloat-active.enofloat-mini-mode .enoplayer{ --big-ctrl-size: 42px; --big-ctrl-icon: 19px; } /* ---------- Overlay wrapper ---------- */ .enoplayer-big-ctrl{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:120; opacity:1; /* wrapper always "present" */ pointer-events:none; /* NEVER steal clicks */ } /* ---------- Buttons base ---------- */ .big-play-btn{ position:absolute; width:var(--big-ctrl-size); height:var(--big-ctrl-size); border-radius:999px; border:none; cursor:pointer; padding:0; background:transparent; opacity:0; transform:scale(.92); pointer-events:none; /* only visible button becomes clickable */ transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease; filter: drop-shadow(0 8px 22px rgba(0,0,0,.65)); } /* Visible button (ONLY JS adds this) */ .big-play-btn.big-play-visible{ opacity:1; transform:scale(1); pointer-events:auto; animation: eno-center-pop .18s ease-out; } @keyframes eno-center-pop{ from{ transform:scale(.9); opacity:.0; } to{ transform:scale(1); opacity:1; } } /* Hidden button (ONLY JS adds this) */ .big-play-btn.big-pause-hidden{ opacity:0; transform:scale(.96); pointer-events:none; animation:none; } /* Hover */ .big-play-btn.big-play-visible:hover, .big-play-btn.big-play-visible:focus-visible{ transform:scale(1.06); box-shadow: 0 0 0 1px rgba(180,190,255,.55), 0 22px 55px rgba(0,0,0,.95); } /* ---------- Ring ---------- */ .big-play-btn-ring{ position:absolute; inset:0; border-radius:inherit; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), rgba(0,0,0,.78) ); border:1px solid rgba(255,255,255,.45); box-shadow: 0 0 0 1px rgba(15,23,42,.45), 0 16px 38px rgba(0,0,0,.55); } /* Float polish */ .enoplayer-container.enofloat-active .big-play-btn{ filter: drop-shadow(0 4px 12px rgba(0,0,0,.55)); } .enoplayer-container.enofloat-active .big-play-btn-ring{ background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.25); box-shadow: 0 0 0 1px rgba(15,23,42,.35), 0 10px 22px rgba(0,0,0,.45); } /* ---------- Icon ---------- */ .big-play-btn-icon{ position:relative; z-index:2; width:var(--big-ctrl-icon); height:var(--big-ctrl-icon); display:block; margin:0 auto; background-repeat:no-repeat; background-position:center; background-size:contain; } .icon-big-play{ background-image:url("https://enoflix.net/i/big-play?v=2"); filter: invert(1) brightness(2) drop-shadow(0 0 4px rgba(255,255,255,.35)); } .icon-big-pause{ background-image:url("https://enoflix.net/i/big-pause?v=2"); filter: invert(1) brightness(2) drop-shadow(0 0 4px rgba(255,255,255,.35)); } /* ---------- Pulse (ONLY play button, ONLY paused, ONLY normal mode) ---------- */ .enoplayer-container:not(.enofloat-active) .enoplayer.is-paused .big-play-btn--play.big-play-visible{ animation: enoplayer-bigplay-pulse 2.2s ease-in-out infinite; } .enoplayer-container.enofloat-active .big-play-btn.big-play-visible{ animation:none !important; } @keyframes enoplayer-bigplay-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.045); opacity:1; } } /* ========================= CONTROLS WRAPPER ========================= */ .enoplayer-controls { position: absolute; inset-inline: 0; bottom: 0; z-index: 100; overflow: visible; background: linear-gradient( transparent, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.70) ); /*padding: 60px 15px 15px;*/ padding: 14px 15px 15px; opacity: 0; transition: opacity 0.3s; pointer-events: auto; } .enoplayer-container:hover .enoplayer-controls, .enoplayer-controls.visible { opacity: 1; } /* ENOPLAYER PROGRESS (PLYR) + YOUTUBE FEEL (ONE BLOCK) */ :root{ /* colors */ --eno-progress-played:#e9f2ff; --eno-progress-track:rgba(255,255,255,.14); --eno-progress-buffer:rgba(255,255,255,.32); --eno-progress-accent:#00b3ff; /* sizing */ --eno-hit-h:16px; --eno-radius:999px; --eno-track-h-idle:6px; --eno-track-h-hover:7px; /* thumb */ --eno-thumb:14px; --eno-thumb-shadow:0 1px 2px rgba(0,0,0,.35); --eno-thumb-ring:0 0 0 4px rgba(255,255,255,.25); /* glow baselines (used by box-shadow rules below) */ --eno-edge-paused:.35; --eno-glow-paused:4px; --eno-glowA-paused:.10; --eno-edge-playing:.85; --eno-glow-playing:8px; --eno-glowA-playing:.22; --eno-edge-hover:.95; --eno-glow-hover:10px; --eno-glowA-hover:.25; --eno-edge-scrub:1; --eno-glow-scrub:12px; --eno-glowA-scrub:.30; } /* wrapper */ .enoplayer-progress{ position:relative;height:var(--eno-hit-h);flex:1;overflow:visible; user-select:none;-webkit-tap-highlight-color:transparent; --eno-track-h:var(--eno-track-h-idle); } /* holder: JS sets --value and --buffer here */ .enoplayer-progress .progress-bar{ position:relative;height:var(--eno-hit-h);border-radius:var(--eno-radius);overflow:visible; --value:0%;--buffer:0%; } /* rails */ .enoplayer-progress .progress-bar::before, .enoplayer-progress .progress-bar::after, .enoplayer-progress .progress-bar .progress-buffer{ transition:height .16s ease,clip-path .12s ease,width .12s ease,box-shadow .16s ease; } .enoplayer-progress .progress-bar::before{ content:"";position:absolute;left:0;right:0;top:50%; height:var(--eno-track-h);transform:translateY(-50%); border-radius:var(--eno-radius);background:var(--eno-progress-track); z-index:0;pointer-events:none; } .enoplayer-progress .progress-bar .progress-buffer{ position:absolute;left:0;right:0;top:50%; height:var(--eno-track-h);transform:translateY(-50%); border-radius:var(--eno-radius); background:linear-gradient(to right,rgba(255,255,255,.34),rgba(255,255,255,.18)); clip-path:inset(0 calc(100% - var(--buffer,0%)) 0 var(--value,0%) round var(--eno-radius)); z-index:1;pointer-events:none;filter:brightness(.95); } .enoplayer-progress .progress-bar::after{ content:"";position:absolute;left:0;top:50%; height:var(--eno-track-h);transform:translateY(-50%); border-radius:var(--eno-radius);width:var(--value,0%);min-width:2px; z-index:2;pointer-events:none; background:linear-gradient(to right, var(--eno-progress-played) 0%, var(--eno-progress-played) calc(100% - 10px), var(--eno-progress-accent) 100% ); } /* range hitbox */ .enoplayer-progress .progress-bar input.progress-thumb{ -webkit-appearance:none;appearance:none; position:absolute;inset:0;width:100%;height:var(--eno-hit-h); margin:0;padding:0;background:transparent;cursor:pointer;outline:none;border:0; z-index:5;touch-action:pan-x;-webkit-tap-highlight-color:transparent; } /* hide native track */ .enoplayer-progress .progress-bar input.progress-thumb::-webkit-slider-runnable-track{height:var(--eno-hit-h);background:transparent;} .enoplayer-progress .progress-bar input.progress-thumb::-moz-range-track{height:var(--eno-hit-h);background:transparent;} .enoplayer-progress .progress-bar input.progress-thumb::-moz-range-progress{height:var(--eno-hit-h);background:transparent;} /* thumb */ .enoplayer-progress .progress-bar input.progress-thumb::-webkit-slider-thumb{ -webkit-appearance:none;width:var(--eno-thumb);height:var(--eno-thumb);border-radius:50%; background:#fff;box-shadow:var(--eno-thumb-shadow); margin-top:calc((var(--eno-hit-h) - var(--eno-thumb)) / 2); transition:transform .2s ease,box-shadow .2s ease,opacity .15s ease; } .enoplayer-progress .progress-bar input.progress-thumb::-moz-range-thumb{ width:var(--eno-thumb);height:var(--eno-thumb);border-radius:50%; background:#fff;border:0;box-shadow:var(--eno-thumb-shadow); transition:transform .2s ease,box-shadow .2s ease,opacity .15s ease; } /* cues never block */ .enoplayer__cues,.enoplayer-chapters{position:absolute;inset:0;z-index:4;pointer-events:none;} .enoplayer__cues *,.enoplayer-chapters *{pointer-events:none!important;} /* YouTube thin->thick */ @media (hover:hover) and (pointer:fine){.enoplayer-progress:hover{--eno-track-h:var(--eno-track-h-hover);}} .enoplayer-progress.is-scrubbing{--eno-track-h:var(--eno-track-h-hover);} /* thumb visibility (simple + reliable) */ .enoplayer .progress-bar input.progress-thumb::-webkit-slider-thumb{opacity:0;transform:scale(.6);} .enoplayer .progress-bar input.progress-thumb::-moz-range-thumb{opacity:0;transform:scale(.6);} @media (hover:hover) and (pointer:fine){ .enoplayer-progress:hover .progress-bar input.progress-thumb::-webkit-slider-thumb{opacity:1;transform:scale(1);} .enoplayer-progress:hover .progress-bar input.progress-thumb::-moz-range-thumb{opacity:1;transform:scale(1);} } .enoplayer.is-playing .progress-bar input.progress-thumb::-webkit-slider-thumb{opacity:1;transform:scale(1);} .enoplayer.is-playing .progress-bar input.progress-thumb::-moz-range-thumb{opacity:1;transform:scale(1);} .enoplayer-progress.is-scrubbing .progress-bar input.progress-thumb::-webkit-slider-thumb{ opacity:1!important;transform:scale(1.1)!important;box-shadow:var(--eno-thumb-shadow),var(--eno-thumb-ring); } .enoplayer-progress.is-scrubbing .progress-bar input.progress-thumb::-moz-range-thumb{ opacity:1!important;transform:scale(1.1)!important;box-shadow:var(--eno-thumb-shadow),var(--eno-thumb-ring); } @media (max-width:600px){ .enoplayer .progress-bar input.progress-thumb::-webkit-slider-thumb{opacity:1!important;transform:scale(1)!important;} .enoplayer .progress-bar input.progress-thumb::-moz-range-thumb{opacity:1!important;transform:scale(1)!important;} } /* signature glow states (no extra vars on elements, only roots above) */ .enoplayer:not(.is-playing) .enoplayer-progress .progress-bar::after{ box-shadow:inset -2px 0 0 rgba(0,179,255,var(--eno-edge-paused)), 0 0 var(--eno-glow-paused) rgba(0,179,255,var(--eno-glowA-paused)); } .enoplayer.is-playing .enoplayer-progress .progress-bar::after{ box-shadow:inset -2px 0 0 rgba(0,179,255,var(--eno-edge-playing)), 0 0 var(--eno-glow-playing) rgba(0,179,255,var(--eno-glowA-playing)); } .enoplayer-progress.is-scrubbing .progress-bar::after{ box-shadow:inset -2px 0 0 rgba(0,179,255,var(--eno-edge-scrub)), 0 0 var(--eno-glow-scrub) rgba(0,179,255,var(--eno-glowA-scrub)); } @media (hover:hover) and (pointer:fine){ .enoplayer:hover .enoplayer-progress .progress-bar::after{ box-shadow:inset -2px 0 0 rgba(0,179,255,var(--eno-edge-hover)), 0 0 var(--eno-glow-hover) rgba(0,179,255,var(--eno-glowA-hover)); } } /* small hover clarity lift */ @media (hover:hover) and (pointer:fine){ .enoplayer-progress:hover{ --eno-progress-track:rgba(255,255,255,.20); --eno-progress-buffer:rgba(255,255,255,.36); } } /* safety */ .enoplayer-progress,.enoplayer-progress .progress-bar{overflow:visible!important;} /* --------------------------------------------------------- SEEK PREVIEW (your existing UI, slightly plyr-ish polish) --------------------------------------------------------- */ .enoplayer-seek-thumb { position: absolute; bottom: 120%; transform: translateX(-50%) translateY(6px) scale(.98); padding-bottom: 4px; opacity:0; visibility:hidden; pointer-events:none; display:flex; flex-direction: column; align-items: center; gap: 6px; z-index: 40; transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; } .enoplayer-seek-thumb.is-visible { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0) scale(1); transition: opacity .16s ease, transform .16s ease, visibility 0s } /*.enoplayer-seek-thumb-img { width: 160px; height: 90px; border-radius: 8px; background: radial-gradient(circle at 0 0, #444, #020617); background-size: cover; background-position: center; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.8); overflow: hidden; } .enoplayer-seek-thumb-time { background: rgba(0, 0, 0, 0.85); background: rgb(0 112 255 / 71%); padding: 6px 18px; border-radius: 18px; font-size: 0.92rem; font-weight: 600; }*/ /* ================================ ENOPLAYER SIGNATURE SEEK PREVIEW ================================ */ .enoplayer-seek-thumb-img { width: var(--enoplayer-seek-thumb-w); height: var(--enoplayer-seek-thumb-h); aspect-ratio: 16 / 9; border-radius: var(--enoplayer-radius-sm); background: var(--enoplayer-seek-bg); background-repeat:no-repeat; background-size: cover; background-position: center; box-shadow: 0 10px 26px var(--enoplayer-seek-glow-main), 0 0 0 1px var(--enoplayer-seek-glow-ring), inset 0 0 20px var(--enoplayer-seek-glow-inner); overflow: visible; position: relative; /*border-bottom-left-radius: calc(var(--enoplayer-radius-sm) - 2px); border-bottom-right-radius: calc(var(--enoplayer-radius-sm) - 2px);*/ } /* Notch pointer (under the thumbnail) */ .enoplayer-seek-thumb-img::after{ content:""; position:absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); /* Blend with thumbnail background */ background: linear-gradient( 180deg, rgba(255,255,255,0.18), rgba(2,6,23,0.75) ); border-right: 1px solid rgba(255,255,255,0.10); border-bottom: 1px solid rgba(255,255,255,0.10); border-radius: 2px; box-shadow: 0 4px 10px rgba(0,0,0,0.35); /*border-bottom-right-radius: 3px;*/ pointer-events:none; opacity: 0; transition: opacity .15s ease, transform .15s ease; } /* Fade + settle when visible */ .enoplayer-seek-thumb.is-visible .enoplayer-seek-thumb-img::after{ opacity: 1; transform: translateX(-50%) rotate(45deg) translateY(1px); } .enofloat-mini-mode .enoplayer-seek-thumb-img::after{ display: none; } .enoplayer-seek-thumb-time { background: rgba(0, 112, 255, 0.82); padding: 6px 18px; border-radius: 20px; font-size: 0.95rem; font-weight: 700; color: white; text-shadow: 0 0 6px rgba(0,0,0,0.8); box-shadow: 0 4px 16px rgba(0,112,255,0.45), inset 0 0 6px rgba(255,255,255,0.25); } /* ========================= SETTINGS PANEL ========================= */ .enoplayer-settings { position: absolute; right: 10px; bottom: 70px; width: min(260px, 80vw); border-radius: 16px; background: radial-gradient( circle at top, rgba(15, 23, 42, 0.97), rgba(15, 23, 42, 0.94) ); border: 1px solid rgba(148, 163, 184, 0.7); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7); font-size: 13px; z-index: 200; backdrop-filter: blur(16px); opacity: 0; transform: translateY(10px) scale(0.97); transform-origin: bottom right; pointer-events: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; overflow-y: auto; } .enoplayer-settings.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .enoplayer-settings-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid rgba(30, 64, 175, 0.5); } .enoplayer-settings-header span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--enoplayer-muted); } .enoplayer-settings-close { border: none; background: transparent; color: var(--enoplayer-muted); font-size: 18px; cursor: pointer; line-height: 1; } .enoplayer-settings-close:hover { color: #e5e7eb; } .enoplayer-settings-body { max-height: 260px; overflow: auto; padding: 8px 10px 10px; } .enoplayer-settings-group { margin-bottom: 10px; } .enoplayer-settings-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--enoplayer-muted); margin-bottom: 4px; } .enoplayer-settings-item { display: inline-flex; align-items: center; justify-content: center; margin: 2px 4px 2px 0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.5); background: rgba(15, 23, 42, 0.85); color: #e5e7eb; cursor: pointer; font-size: 12px; white-space: nowrap; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.12s ease; } .enoplayer-settings-item:hover { background: rgba(30, 64, 175, 0.75); border-color: rgba(129, 140, 248, 0.9); transform: translateY(-1px); } .enoplayer-settings-item.is-active { border-color: var(--enoplayer-brand); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.8); background: radial-gradient( circle at top, rgba(37, 99, 235, 0.25), rgba(15, 23, 42, 0.95) ); } .enoplayer-audio-list, .enoplayer-subtitles-list { display: flex; flex-wrap: wrap; } .enoplayer-settings-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0,0,0,0.45), rgba(0,0,0,0.85)); opacity: 0; pointer-events: none; transition: opacity 0.18s ease-out; z-index: 180; } .enoplayer-settings.is-open ~ .enoplayer-settings-backdrop, .enoplayer-settings-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* ========================= META BADGES ========================= */ .enoplayer-meta-badges { position: absolute; left: 16px; top: 16px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 40; } .enoplayer-meta-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.6); background: rgba(15, 23, 42, 0.85); color: #e5e7eb; backdrop-filter: blur(10px); } .enoplayer-meta-badge.imax { border-color: #38bdf8; } .enoplayer-meta-badge.hdr { border-color: #22c55e; } .enoplayer-meta-badge.widescreen { border-color: #eab308; } .enoplayer-meta-badge.atmos { border-color: #f97316; } /* gradient ring */ /*.control-btn::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: linear-gradient(90deg, rgb(0 94 255 / 55%), rgb(255 172 0 / 33%)); opacity: 0; transform: scale(0.85); transition: opacity 0.18s ease, transform 0.18s ease; z-index: 0; } .control-btn:hover::before { opacity: 1; transform: scale(1); }*/ /* ========================================================= AIRPLAY BUTTON – ENOPLAYER STYLE ========================================================= */ /* Hide until browser confirms support */ .airplay-btn { display: none; /* JS adds display back if supported */ opacity: 0.2; } /* When Safari/WebKit reports API available */ .enoplayer-container.has-airplay .airplay-btn { display: inline-flex; opacity: 0.85; } /* AirPlay device discovered (availability = 'available') */ .enoplayer-container.airplay-available .airplay-btn { opacity: 1; } /* When AirPlay is currently active */ .enoplayer-container.airplay-active .airplay-btn { background: radial-gradient(circle at 30% 30%, rgba(129, 140, 248, 0.35), rgba(15,23,42,0.95)); box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.7), 0 0 18px rgba(129, 140, 248, 0.45); filter: brightness(1.25); } /* Icon size + rendering (better than your original block) */ .icon-airplay { width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; display: block; } /* ========================================================= AIRPLAY BANNER – ON-SCREEN STATUS ========================================================= */ .enoplayer-airplay-banner { position: absolute; left: 18px; bottom: 84px; /* just above your progress rail */ padding: 6px 12px; border-radius: 999px; background: radial-gradient( circle at 0% 0%, rgba(129, 140, 248, 0.55), rgba(15, 23, 42, 0.98) ); color: #e5e7eb; font-size: 0.75rem; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; z-index: 160; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.22s ease-out, transform 0.22s ease-out; } .enoplayer-airplay-banner.is-visible { opacity: 1; transform: translateY(0); } /* tiny dot */ .enoplayer-airplay-banner-dot { width: 7px; height: 7px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.8); } /* ========================================================= CAST BUTTON – ENOPLAYER STYLE ========================================================= */ /* Hidden until Cast framework says hello */ .cast-btn { display: none; /* JS shows it when cast.framework is ready */ opacity: 0.25; } /* When Cast is supported on this page */ .enoplayer-container.has-cast .cast-btn { display: inline-flex; opacity: 0.9; } /* When Cast devices are discovered / available */ .enoplayer-container.cast-available .cast-btn { opacity: 1; } /* When actively casting */ .enoplayer-container.cast-active .cast-btn { background: radial-gradient(circle at 70% 30%, rgba(248, 250, 252, 0.08), rgba(15, 23, 42, 0.98) ); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.9), 0 0 22px rgba(251, 191, 36, 0.55); filter: brightness(1.2); } /* Icon block (uses your sprite URL from JS) */ .icon-cast { width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; display: block; } /* ========================================================= CAST BANNER – ON-SCREEN STATUS ========================================================= */ .enoplayer-cast-banner { position: absolute; right: 18px; bottom: 84px; /* mirrored from AirPlay banner, other side */ padding: 6px 12px; border-radius: 999px; background: radial-gradient( circle at 100% 0%, rgba(251, 191, 36, 0.55), rgba(15, 23, 42, 0.98) ); color: #e5e7eb; font-size: 0.75rem; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; z-index: 160; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.22s ease-out, transform 0.22s ease-out; } .enoplayer-cast-banner.is-visible { opacity: 1; transform: translateY(0); } .enoplayer-cast-banner-dot { width: 7px; height: 7px; border-radius: 999px; background: #facc15; box-shadow: 0 0 8px rgba(250, 204, 21, 0.9); } /* icon URLs */ .icon-play { background-image: url("https://enoflix.net/i/play"); } .icon-pause { background-image: url("https://enoflix.net/i/pause"); } .icon-volume { background-image: url("https://enoflix.net/i/volume"); } .icon-volume-mute { background-image: url("https://enoflix.net/i/volume-mute"); } .icon-captions { background-image: url("https://enoflix.net/i/captions-on"); } .icon-settings { background-image: url("https://enoflix.net/i/eno-settings"); } .icon-pip { background-image: url("https://enoflix.net/i/picture-in-picture"); } .icon-fullscreen-enter { background-image: url("https://enoflix.net/i/fullscreen-enter"); } .icon-fullscreen-exit { background-image: url("https://enoflix.net/i/fullscreen-exit"); } .icon-skip-backward { background-image: url("https://enoflix.net/i/rewind"); } .icon-skip-forward { background-image: url("https://enoflix.net/i/fast-forward"); } .icon-recap { background-image: url("https://enoflix.net/i/recap"); width: 28px !important; height: 28px !important; } .captions-btn.active .icon-captions { background-image: url("https://enoflix.net/i/captions-on"); } .captions-btn:not(.active) .icon-captions { background-image: url("https://enoflix.net/i/captions-off"); } /* ✅ NEW – TV mode icon */ .icon-tv { background-image: url("https://enoflix.net/i/tv-screen"); /* or /tv-mode if that’s your endpoint */ width: 18px; height: 18px; filter: brightness(0) invert(1); } /* Optional: different icon when TV Mode is ON */ .enoplayer-tv-toggle.is-on .icon-tv { background-image: url("https://enoflix.net/i/tv-on"); } .icon { display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; } /* CDN arrow icon like your play/volume icons */ .icon-mini-toggle { display: block; width: 18px; height: 18px; background-image: url("https://enoflix.net/i/left-toggle"); /* 🔁 put your real arrow icon here */ background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform 0.2s ease-out, opacity 0.2s ease-out; } /* ========================================================= BOTTOM CONTROLS LAYOUT - Left / Center / Right rows - Remove gap ONLY between volume button + slider ========================================================= */ .controls-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; } .controls-left, .controls-right{ display:flex; align-items:center; gap:12px; /* default spacing for all controls */ } .controls-center{ display:flex; align-items:center; justify-content:center; gap:1.1rem; } /* ✅ Remove gap ONLY for volume pair (button + slider) */ .controls-left .volume-btn{ margin-right:0; } .controls-left .volume-btn + .volume-slider-container{ margin-left:-12px; } /* cancels gap */ /* ========================================================= CONTROL BUTTONS + ICONS - Clean structure - No conflicting transforms (single transform system) - Left/Right = small utility buttons - Center = primary glass buttons ========================================================= */ /* ========================= BASE BUTTON ========================= */ .control-btn{ background: rgb(255 160 0 / 75%); border: none; width: 34px; height: 34px; padding: 8px; border-radius: 999px; cursor: pointer; position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; color: #fff; overflow: visible; z-index: 1; transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, opacity 0.15s ease; } /* ========================= ICON BASE (BG ICONS) ========================= */ .control-btn span{ position: relative; z-index: 2; /* above ring */ display: inline-block; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center; filter: brightness(0) invert(1); transition: filter 0.2s ease; } .control-btn:hover span{ filter: brightness(0) invert(1) brightness(1.25); } /* ========================= ICON STATE TOGGLES ========================= */ .control-btn .icon-pause{ display: none; } .control-btn.playing .icon-play{ display: none; } .control-btn.playing .icon-pause{ display: block; } .control-btn.muted .icon-volume{ display: none; } .control-btn:not(.muted) .icon-volume-mute{ display: none; } .control-btn:not(.fullscreen) .icon-fullscreen-exit{ display: none; } .control-btn.fullscreen .icon-fullscreen-enter{ display: none; } /* ========================= DEFAULT INTERACTIONS (shared baseline) ========================= */ .control-btn:hover:not(:disabled):not(.is-disabled){ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; } .control-btn:active:not(:disabled):not(.is-disabled){ transform: translateY(0) scale(0.96); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); } .control-btn:focus-visible{ outline: none; } /* Disabled */ .control-btn:disabled, .control-btn.is-disabled{ opacity: 0.35; background: rgba(255, 255, 255, 0.08); box-shadow: none; transform: none !important; cursor: default; pointer-events: none; } /* ========================= SOLID RING + GLOW (BEHIND) ========================= */ .control-btn::before{ content: ""; position: absolute; inset: -2px; border-radius: inherit; opacity: 0; transform: scale(0.92); transform-origin: center; /* ring + subtle glow */ box-shadow: 0 0 0 2px rgb(0 120 255 / 95%), /* crisp ring */ 0 0 18px rgb(0 120 255 / 35%); /* soft glow */ transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; z-index: -1; } .control-btn:hover::before{ opacity: 1; transform: scale(1); } /* ========================================================= ZONE STYLES ========================================================= */ /* ========================= LEFT + RIGHT CONTROLS ========================= */ .controls-left .control-btn:hover:not(:disabled):not(.is-disabled), .controls-right .control-btn:hover:not(:disabled):not(.is-disabled){ background: rgba(255, 255, 255, 0.15); transform: translateY(-1px) scale(1.06); /* replaces old scale(1.1) */ } .controls-left .control-btn:active:not(:disabled):not(.is-disabled), .controls-right .control-btn:active:not(:disabled):not(.is-disabled){ transform: translateY(0) scale(0.95); } /* ========================= CENTER CONTROLS (PRIMARY) ========================= */ .controls-center .control-btn{ background: rgba(0, 0, 0, 0.35); width: 40px; height: 40px; padding: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); } /* Center hover/active keeps the same motion language, but stronger */ .controls-center .control-btn:hover:not(:disabled):not(.is-disabled){ background: rgba(255, 255, 255, 0.22); transform: translateY(-1px) scale(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; } .controls-center .control-btn:active:not(:disabled):not(.is-disabled){ background: rgba(255, 255, 255, 0.30); transform: translateY(0) scale(0.94); } /* Recap button */ .controls-center .recap-btn{ width: 50px; height: 50px; background: rgba(255, 255, 255, 0.18); } /* ========================================================= ENOPLAYER — VOLUME (HOVER + KEYBOARD STABLE) - Desktop: expands in layout (pushes time) - <=480: overlay panel (no layout shift => no jitter) - JS sets: --value (NUMBER 0..100) on .volume-slider ========================================================= */ /* 1) Wrapper */ .volume-area{ position: relative; display: inline-flex; align-items: center; gap: 0; } /* 2) Expanding panel */ .volume-slider-container{ position: relative; display: flex; align-items: center; height: var(--enoplayer-vol-panel-h, 40px); /* closed */ width: 0; margin-left: 0; padding: 0; border-radius: var(--enoplayer-vol-panel-radius, 999px); background: var(--enoplayer-vol-panel-bg, rgba(255,255,255,.10)); box-shadow: 0 0 0 1px var(--enoplayer-vol-panel-border, rgba(255,255,255,.08)) inset; overflow: hidden; opacity: 0; pointer-events: none; transform-origin: left center; transform: translateX(var(--enoplayer-vol-open-shift, -6px)) scaleX(var(--enoplayer-vol-open-scale, .85)); transition: width var(--enoplayer-vol-dur, .26s) var(--enoplayer-vol-ease, cubic-bezier(.2,0,.2,1)), margin-left var(--enoplayer-vol-dur, .26s) var(--enoplayer-vol-ease, cubic-bezier(.2,0,.2,1)), padding var(--enoplayer-vol-dur, .26s) var(--enoplayer-vol-ease, cubic-bezier(.2,0,.2,1)), transform var(--enoplayer-vol-dur, .26s) var(--enoplayer-vol-ease, cubic-bezier(.2,0,.2,1)), opacity .14s ease; } .volume-area:hover .volume-slider-container, .volume-area:focus-within .volume-slider-container{ width: var(--enoplayer-vol-panel-w, 120px); margin-left: var(--enoplayer-vol-panel-gap, 14px); padding: 0 var(--enoplayer-vol-panel-pad-x, 10px); opacity: 1; pointer-events: auto; transform: translateX(0) scaleX(1); } /* 3) Slider */ .volume-slider{ --thumb: var(--enoplayer-range-thumb-size, 12px); --trackH: var(--enoplayer-range-track-height, 4px); --value: 100; /* JS sets number */ --val: clamp(0, var(--value), 100); --safe: calc((var(--thumb) / 2) + var(--enoplayer-vol-safe-extra, 10px)); position: relative; width: 100%; height: var(--enoplayer-vol-panel-h, 40px); border-radius: var(--enoplayer-vol-panel-radius, 999px); box-sizing: border-box; overflow: hidden; background: transparent; cursor: pointer; } /* Native range (invisible but does all pointer dragging) */ .volume-native{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; z-index: 5; } /* Keyboard focus ring */ .volume-slider:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--enoplayer-vol-focus-ring, rgba(255,255,255,.22)); } /* Track */ .volume-slider::before{ content:""; position: absolute; left: var(--safe); right: var(--safe); top: 50%; transform: translateY(-50%); height: var(--trackH); border-radius: 999px; background: var(--enoplayer-vol-track-bg, rgba(255,255,255,.25)); box-shadow: 0 0 0 1px var(--enoplayer-vol-track-border, rgba(255,255,255,.10)) inset; } /* Fill */ .volume-level{ position: absolute; left: var(--safe); top: 50%; transform: translateY(-50%); height: var(--trackH); border-radius: 999px; width: calc((100% - (var(--safe) * 2)) * (var(--val) / 100)); background: currentColor; color: var(--enoplayer-color-main, #fff); pointer-events: none; } /* Thumb */ .volume-thumb{ position: absolute; top: 50%; left: calc(var(--safe) + (100% - (var(--safe) * 2)) * (var(--val) / 100)); transform: translate(-50%,-50%); width: var(--thumb); height: var(--thumb); border-radius: 999px; background: var(--enoplayer-vol-thumb-bg, #fff); pointer-events: none; opacity: 0; box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.25); } /* Single transition definition (no duplicates) */ .volume-level, .volume-thumb{ transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease, width var(--enoplayer-vol-snap-ms, .18s) var(--enoplayer-vol-snap-ease, cubic-bezier(.2,0,.2,1)), left var(--enoplayer-vol-snap-ms, .18s) var(--enoplayer-vol-snap-ease, cubic-bezier(.2,0,.2,1)); } .volume-area:hover .volume-thumb, .volume-area:focus-within .volume-thumb{ opacity: 1; } .volume-slider:active .volume-thumb{ transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.25); } /* Mute snap */ .volume-area.is-muted .volume-level{ width: 0 !important; } .volume-area.is-muted .volume-thumb{ left: var(--safe) !important; } .volume-area.is-muted .volume-slider::before{ opacity: .45; } /* <=480 overlay mode (NO layout animation => no shake) */ @media (max-width: 480px){ .volume-slider-container{ position: absolute; left: 100%; top: 50%; margin-left: var(--enoplayer-vol-panel-gap-sm, 8px); width: var(--enoplayer-vol-panel-w-sm, 92px); padding: 0 var(--enoplayer-vol-panel-pad-x-sm, 8px); /* closed visually only */ opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(-6px) scaleX(.86); /* override transitions */ transition: opacity .14s ease, transform .22s var(--enoplayer-vol-ease, cubic-bezier(.2,0,.2,1)); } .volume-area:hover .volume-slider-container, .volume-area:focus-within .volume-slider-container{ opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0) scaleX(1); } } /* Touch: always open */ @media (hover: none) and (pointer: coarse){ .volume-slider-container{ opacity: 1; pointer-events: auto; transform: none; } .volume-thumb{ opacity: 1; } } /* ========================================= TV-only elements (HIDDEN by default) ========================================= */ .enoplayer-container:not([data-tv-mode="true"]) .tv-volume-percent, .enoplayer-container:not([data-tv-mode="true"]) .tv-volume-actions{ display: none !important; } /* ========================= TIME DISPLAY ========================= */ .time-display{ display: inline-flex; align-items: center; gap: 0; margin-left: 12px; color: var(--enoplayer-text, #fff); font-family: var(--enoplayer-font-core, var(--enoplayer-font, system-ui)); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; opacity: 0; /* default hidden (matches controls hidden state) */ transition: opacity .18s ease; } /* Show when controls are visible OR when player is hovered */ .enoplayer-container:hover .time-display, .enoplayer-controls.visible .time-display{ opacity: 1; } /* Optional: prevent interaction when hidden */ .enoplayer-controls:not(.visible) .time-display{ pointer-events: none; } .time-display .current-time::after{ content: " / "; opacity: .55; margin: 0 2px; } .time-display .duration{ opacity: .75; font-weight: 500; } /* TV mode */ /*.enoplayer-container[data-tv-mode="true"] .time-display{ font-size: 15px; padding: 6px 12px; }*/ /* ========================= NEXT EPISODE OVERLAY ========================= */ .enoplayer-next { position: absolute; right: 2rem; bottom: 8rem; width: 420px !important; max-width: calc(100vw - 3rem); padding: 0.9rem 1.1rem; border-radius: 18px; background: radial-gradient( circle at 10% -10%, var(--enoflix-prime-dark), #141726 65% ); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7); display: flex; gap: 1rem; align-items: center; justify-content: space-between; z-index: 200; opacity: 0; transform: translateY(10px) scale(0.97); pointer-events: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .enoplayer-next.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .enoplayer-next__thumb { position: relative; width: 88px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); } .enoplayer-next__thumb img, .enoplayer-next__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .enoplayer-next__preview { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s ease-out; } .enoplayer-next__preview.is-active { opacity: 1; } .enoplayer-next__content { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; max-width: 55%; line-height: 1.25; } .enoplayer-next__label { text-transform: uppercase; font-size: 0.7rem; opacity: 0.85; letter-spacing: 0.16em; color: #9ca3af; } .enoplayer-next__title { font-weight: 600; font-size: 0.95rem; color: #fff; } .enoplayer-next__countdown { font-size: 0.75rem; opacity: 0.9; } .enoplayer-next__meta { font-size: 0.72rem; opacity: 0.9; } .enoplayer-next__synopsis { font-size: 0.72rem; opacity: 0.8; display: block; } .enoplayer-next__actions { margin-left: auto; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; flex-shrink: 0; width: 130px; } .enoplayer-next__btn-primary, .enoplayer-next__btn-secondary { border-radius: 999px; border: none; cursor: pointer; font-weight: 600; font-size: 0.78rem; padding: 0.35rem 0.8rem; white-space: nowrap; transition: transform 0.15s ease-out, background 0.15s ease-out, border-color 0.15s ease-out; } .enoplayer-next__btn-primary { background: #fff; color: #050516; } .enoplayer-next__btn-primary:hover { transform: scale(1.04); background: #f2f2f2; } .enoplayer-next__btn-secondary { background: transparent; color: #fff; border: 1.6px solid rgba(255, 255, 255, 0.55); font-weight: 300; font-size: 0.82rem; padding: 0.55rem 1.2rem; border-radius: 8px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; height: 38px; box-sizing: border-box; backdrop-filter: blur(6px); } .enoplayer-next__btn-secondary:hover { transform: scale(1.05); border-color: #ffffff; color: #ffffff; background: rgba(255, 255, 255, 0.08); } .enoplayer-next__btn-primary:active, .enoplayer-next__btn-secondary:active { transform: scale(0.96); } /* countdown ring */ .enoplayer-next__ring { display: inline-flex; align-items: center; gap: 0.4rem; } .enoplayer-next__ring svg { width: 22px; height: 22px; } .enoplayer-next__ring-bg { fill: none; stroke: rgba(15, 23, 42, 0.75); stroke-width: 4; } .enoplayer-next__ring-fg { fill: none; stroke: var(--enoplayer-brand-alt); stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 0.25s linear; } .enoplayer-next__ring-label { font-size: 0.78rem; font-weight: 600; } /* ========================= ENOPLAYER CONTROL TOOLTIPS ========================= */ .enoplayer-tooltip { position: absolute; z-index: 9999; max-width: 220px; padding: 6px 12px; font-size: 11px; line-height: 1.4; font-weight: 500; letter-spacing: 0.12em; white-space: nowrap; /* only ONE text-transform */ text-transform: none; color: #e5e7eb; /* Gold / blue ring + dark inner */ /*background: linear-gradient(135deg, #020617, #020617) padding-box, linear-gradient(90deg, #005eff, #ffac00) border-box; border: 1px solid transparent;*/ background: rgba(15, 23, 42, 0.96); border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(15, 23, 42, 0.9); backdrop-filter: blur(14px); /* hidden by default */ opacity: 0; visibility: hidden; display: none; pointer-events: none; transform: translate(-50%, 4px) scale(0.96); transition: opacity 0.16s ease-out, transform 0.16s ease-out, visibility 0s linear 0.16s, display 0s linear 0.16s; } /* Small arrow */ .enoplayer-tooltip::before { content: ""; position: absolute; width: 10px; height: 10px; /*background: linear-gradient(135deg, #020617, #020617) padding-box, linear-gradient(90deg, #005eff, #ffac00) border-box; border: 1px solid transparent;*/ border-width: 6px 6px 0 6px; border-style: solid; border-color: rgba(15, 23, 42, 0.96) transparent transparent transparent; background: rgba(15, 23, 42, 0.96); border-radius: 3px; transform: rotate(45deg); bottom: -4px; /* perfect spacing */ left: 50%; transform: translateX(-50%) rotate(45deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); } /* Visible state – JS just adds .is-visible */ .enoplayer-tooltip.is-visible { opacity: 1; visibility: visible; display: block; pointer-events: auto; transform: translate(-50%, 0) scale(1); transition: opacity 0.16s ease-out, transform 0.16s ease-out; } /* ----- Position variants ----- */ /* TOP (default) */ .enoplayer-tooltip.pos-top { transform-origin: 50% 100%; } .enoplayer-tooltip.pos-top::before { bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); } /* BOTTOM */ .enoplayer-tooltip.pos-bottom { transform-origin: 50% 0%; } .enoplayer-tooltip.pos-bottom::before { top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); } /* LEFT */ .enoplayer-tooltip.pos-left { transform-origin: 100% 50%; } .enoplayer-tooltip.pos-left::before { top: 50%; right: -6px; transform: translateY(-50%) rotate(45deg); } /* RIGHT */ .enoplayer-tooltip.pos-right { transform-origin: 0% 50%; } .enoplayer-tooltip.pos-right::before { top: 50%; left: -6px; transform: translateY(-50%) rotate(45deg); } /* Slightly bigger on big desktops / TVs */ @media (min-width: 1800px) { .enoplayer-tooltip { font-size: 12px; padding: 8px 14px; } } /* ========================= ACCESSIBILITY FOCUS ========================= */ /*.control-btn:focus-visible { outline: 2px solid #ffa908; outline-offset: 2px; }*/ /* Fallback */ .control-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(0,112,255,.9), 0 0 0 6px rgba(0,112,255,.35); } .enoplayer-focusable { outline: none; } .enoplayer-focus-visible { box-shadow: 0 0 0 2px rgba(0, 94, 255, 0.9), 0 0 0 6px rgba(0, 94, 255, 0.35); border-radius: 999px; } .enoplayer-focus-visible--rect { box-shadow: 0 0 0 2px rgba(0, 94, 255, 0.9), 0 0 0 4px rgba(0, 94, 255, 0.35); border-radius: 10px; } /* ========================= TOP ACTION BUTTONS (EnoFloat) ========================= */ /* The layer that blocks native overlay taps/clicks */ .enoplayer-hit{ position: absolute; inset: 0; z-index: 15; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; pointer-events: auto; } /* Controls MUST be above hit layer so buttons are clickable */ /*.enoplayer-controls, .enoplayer-top-actions, .enoplayer-big-ctrl, .enoplayer-tv-toggle, .tv-settings{ z-index: 300; }*/ /* ========================================================= ENOPLAYER — ADS LOCK OVERRIDES (MUST BE LAST IN CSS) Fixes: - big ctrl clickable during ads - tv toggle clickable during ads - ads layer not blocking properly - top actions staying clickable ========================================================= */ /* Default: tap anywhere toggles play/pause */ .enoplayer .enoplayer-hit{ pointer-events: auto; } /* During ads or hard locks: hit layer must NOT capture clicks */ .enoplayer-container.is-ads-locked .enoplayer-hit, .enoplayer-container.is-in-ad .enoplayer-hit{ pointer-events: none !important; } /* 3) When ads lock is ON: disable clicks on player overlays */ .enoplayer-container.is-ads-locked .enoplayer-big-ctrl, .enoplayer-container.is-ads-locked .enoplayer-big-ctrl *{ pointer-events: none !important; } .enoplayer-container.is-ads-locked .enoplayer-top-actions, .enoplayer-container.is-ads-locked .enoplayer-top-actions *{ pointer-events: none !important; } /* ✅ IMPORTANT FIX: disable TV toggle by class AND optional data attr */ .enoplayer-container.is-ads-locked .enoplayer-tv-toggle, .enoplayer-container.is-ads-locked [data-enoplayer-tv-toggle]{ pointer-events: none !important; opacity: .4 !important; } /*.enoplayer-top-actions { position: absolute; top: 14px; right: 14px; display: flex; gap: 10px; z-index: 40; z-index: 60; pointer-events: auto; }*/ /* Top actions -> top-center (black circle position) */ .enoplayer-top-actions{ position: absolute; top: 16px; left: 50%; right: auto !important; transform: translateX(-50%); display: inline-flex; gap: 10px; z-index: 120; /* above hit layer + poster */ pointer-events: none; } .enoplayer-action-btn { width: 44px; height: 44px; border-radius: 999px; border: none; padding: 0; cursor: pointer; pointer-events: auto !important; background: rgba(22, 22, 22, 0.92); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .enoplayer-action-btn:hover { background: rgba(44, 44, 44, 0.96); transform: translateY(-1px) scale(1.04); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.65); } .enoplayer-action-btn:active { transform: scale(0.97); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55); } .enoplayer-action-btn:focus-visible { outline: 2px solid var(--enoplayer-brand, #005eff); outline-offset: 2px; } .enoplayer-action-icon svg { width: 20px; height: 20px; fill: currentColor; } .enoplayer-action-icon { width: 20px; height: 20px; display: block; filter: brightness(0) invert(1); } .is-top-hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; transform: scale(0.96); } /* ✅ But the buttons inside must still be clickable */ .enoplayer-top-actions .enoplayer-action-btn { pointer-events: auto; } /* Optional: hide on very tiny screens if you want */ @media (max-width: 360px) { .enoplayer-top-actions { top: 10px; right: 10px; gap: 6px; } .enoplayer-action-btn { width: 38px; height: 38px; } .enoplayer-action-icon svg { width: 18px; height: 18px; } } /* Hide ONLY top overlay buttons without affecting PiP/EnoFloat logic */ /*.is-top-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: scale(0.96); }*/ /* Hard-hide Safari/iOS native control layers (best-effort) */ .enoplayer-video::-webkit-media-controls, .enoplayer-video::-webkit-media-controls-enclosure, .enoplayer-video::-webkit-media-controls-overlay-enclosure, .enoplayer-video::-webkit-media-controls-panel, .enoplayer-video::-webkit-media-controls-panel-container, .enoplayer-video::-webkit-media-controls-start-playback-button, .enoplayer-video::-webkit-media-controls-play-button, .enoplayer-video::-webkit-media-controls-fullscreen-button, .enoplayer-video::-webkit-media-controls-picture-in-picture-button, .enoplayer-video::-webkit-media-controls-mute-button, .enoplayer-video::-webkit-media-controls-timeline, .enoplayer-video::-webkit-media-controls-volume-slider, .enoplayer-video::-webkit-media-controls-current-time-display, .enoplayer-video::-webkit-media-controls-time-remaining-display { display: none !important; -webkit-appearance: none !important; opacity: 0 !important; } .enoplayer-container{ --enoplayer-controls-height: 88px; } .enoplayer-tv-mode .enoplayer-container{ --enoplayer-controls-height: 104px; } /* Overlays that should NOT block movie clicks */ .enoplayer-logo-stack, .enoplayer-meta, .enoplayer-meta-badges { pointer-events: none; } /* If any of those contain actual buttons/links, re-enable on them */ .enoplayer-logo-stack button, .enoplayer-meta button, .enoplayer-meta a { pointer-events: auto; } /* ========================= ENOADS LAYER (V1) — FINAL (PREMIUM) FIXED ========================= */ /* Slot that holds injected ad video */ .enoads-slot{ position:absolute; inset:0; z-index: 9998 !important; pointer-events:none; } .enoads-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* Overlay layer becomes click-blocker when active */ .enoads-layer{ position:absolute; inset:0; z-index: 9999 !important; opacity:0; transition: opacity .2s ease; pointer-events:none; isolation:isolate; /* ✅ creates clean stacking context */ } .enoads-layer[aria-hidden="true"], .enoads-slot[aria-hidden="true"]{ pointer-events: none !important; } .enoads-layer[aria-hidden="false"], .enoads-slot[aria-hidden="false"]{ pointer-events: auto; } /* 2) If ads are active via aria-hidden, force visible */ .enoads-layer[aria-hidden="false"]{ opacity: 1 !important; pointer-events: auto !important; } .enoads-layer[aria-hidden="true"]{ pointer-events: none !important; } .enoads-layer.is-on{ opacity:1; pointer-events:auto; /* ✅ blocks everything underneath */ } /* ✅ allow modal clicks (since it's outside the card) */ .enoads-layer.is-on .enoads-whyModal, .enoads-layer.is-on .enoads-whyModal *{ pointer-events: auto !important; } /* Underlay for readability */ .enoads-layer.is-on::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; /* ✅ explicitly behind */ background: radial-gradient(120% 80% at 0% 100%, rgba(0,0,0,0.55), transparent 58%), linear-gradient(to top, rgba(0,0,0,0.25), transparent 40%); } /* ❌ block all interactions inside layer by default */ .enoads-layer.is-on *{ pointer-events:none; } /* ✅ allow only ad card + its children */ .enoads-layer.is-on .enoads-card, .enoads-layer.is-on .enoads-card *{ pointer-events:auto; } /* During ads: block taps/clicks on the video surface + poster */ .enoplayer-container.is-ads-locked .enoplayer-video, .enoplayer-container.is-ads-locked .enoplayer-poster, .enoplayer-container.is-ads-locked .enoplayer-surface, .enoplayer-container.is-ads-locked .enoplayer{ pointer-events: none; } /* But allow the ad card UI itself */ .enoplayer-container.is-ads-locked .enoads-card, .enoplayer-container.is-ads-locked #enoAdsLayer, .enoplayer-container.is-ads-locked #enoAdsLayer *{ pointer-events: auto; } /* Bottom rail (YouTube-style) — BELOW the card */ .enoads-rail{ position:absolute; left:0; right:0; bottom:0; height:3px; background: rgba(255,255,255,0.18); z-index:1; /* ✅ above underlay, below card */ opacity:0; transition: opacity .2s ease; pointer-events:none; } .enoads-layer.is-on .enoads-rail{ opacity:1; } .enoads-rail__fill{ height:100%; width:0%; background: rgba(255,180,0,0.92); transition: width .1s linear; } /* Ad card (premium glass) */ .enoads-card{ position:absolute; right:16px; bottom:calc(16px + var(--enoplayer-controls-height, 96px)); width:min(280px, calc(100% - 32px)); padding:12px; background: rgba(10,12,18,0.62); border:1px solid rgba(255,255,255,0.16); border-radius:16px; color:rgba(255,255,255,0.92); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 28px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12); z-index:2; /* ✅ always above rail + underlay */ overflow:hidden; transform:translateY(0); opacity:1; transition:opacity .18s ease, transform .18s ease, filter .18s ease; } /* card highlight layer BEHIND content */ .enoads-card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:0; background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,0.16), transparent 55%); opacity:.9; } /* ensure all card children sit above highlight */ .enoads-card > *{ position:relative; z-index:1; } /* top row */ .enoads-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-right:30px; /* ✅ reserve space for pie */ } /* Pods label */ .enoads-top__left{ display:flex; align-items:center; gap:10px; } .enoads-pod{ font-size:12px; color:rgba(255,255,255,0.78); } /* Why button */ .enoads-top__right{ display:flex; align-items:center; gap:10px; } .enoads-why{ height:28px; padding:0 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.28); color: rgba(255,255,255,0.9); font-size:12px; cursor:pointer; transition: transform .12s ease, background .12s ease; } .enoads-why:hover{ background: rgba(0,0,0,0.42); transform: translateY(-1px); } .enoads-why:focus-visible{ outline:2px solid rgba(255,255,255,0.35); outline-offset:2px; } /* ========================= WHY MODAL — OUTSIDE ========================= */ /* modal covers the whole player layer */ .enoads-whyModal{ position: fixed; inset: 0; display: none; z-index: 999999; /* above ad card */ pointer-events: auto; } .enoads-whyModal.is-open{ display: block; } /* dim/blur the whole scene */ .enoads-whyModal::before{ content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,0.08), transparent 55%), rgba(0,0,0,0.55); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); pointer-events: none; } /* Default state: smooth fade */ .enoplayer-top-actions, [data-enoplayer-tvmode], .enoplayer-tvmode, .enoplayer-tv-toggle{ transition: opacity .18s ease, visibility .18s ease; } /* Optional: a bit faster while hiding */ .enoplayer-container.is-why-open .enoplayer-top-actions, .enoplayer-container.is-why-open [data-enoplayer-tvmode], .enoplayer-container.is-why-open .enoplayer-tvmode, .enoplayer-container.is-why-open .enoplayer-tv-toggle{ transition-duration: .14s; } /* Hide when Why modal is open */ .enoplayer-container.is-why-open .enoplayer-top-actions, .enoplayer-container.is-why-open [data-enoplayer-tvmode], .enoplayer-container.is-why-open .enoplayer-tvmode, .enoplayer-container.is-why-open .enoplayer-tv-toggle{ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* panel centered, TV safe */ .enoads-whyModal__panel{ position: absolute; left: 50%; top: 25%; transform: translate(-50%, -50%); width: min(720px, calc(100% - 56px)); border-radius: 26px; padding: 18px 18px 16px; background: rgba(10,12,18,0.82); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 30px 90px rgba(0,0,0,0.65); display: grid; grid-template-rows: auto auto; gap: 10px; /* keep it above TV controls area */ max-height: calc(100% - (96px + var(--enoplayer-controls-height, 160px))); } .enoads-whyModal__titleRow{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } /* left group: title + info */ .enoads-whyModal__titleGroup{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; min-width: 0; padding-right: 44px; } /* title */ .enoads-whyModal__title{ margin: 0; font-size: 22px; font-weight: 900; line-height: 1.15; color: rgba(255,255,255,0.96); -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: inline-flex; align-items: center; gap: 8px; min-width: 0; /* prevents overflow pushing the icon */ white-space: nowrap; } /* wrap controls tooltip positioning */ .enoads-whyModal__infoWrap{ -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; display: inline-flex; vertical-align: middle; align-items: center; } /* compact i (button/icon) */ .enoads-whyModal__info{ width: 18px; height: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* fallback centering (if flex is weird) */ line-height: 18px; text-align: center; vertical-align: middle; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* remove default button styles if you use