/* /static/pwa/generated/85db6c9db74a80f92229.css */ @media(max-width:767px){.dm-home-advanced-card{position:relative!important;overflow:hidden!important;isolation:isolate;border:1px solid rgba(255,255,255,.1)!important;border-radius:19px!important;background:radial-gradient(150px 110px at 100% 0%,rgba(224,37,48,.14),transparent 70%),linear-gradient(145deg,#19191cfa,#08080afc)!important;box-shadow:0 18px 42px #0000004d,inset 0 1px #ffffff0d!important}.dm-home-advanced-card:after{content:"";position:absolute;left:-55px;bottom:-70px;width:140px;height:140px;border-radius:50%;background:#d21e2914;filter:blur(45px);pointer-events:none}.dm-home-advanced-toggle{min-height:70px!important;height:70px!important;padding:0 15px!important;gap:11px!important;border:0!important}.dm-home-advanced-toggle:before{content:"";width:42px;height:42px;flex:0 0 42px;border-radius:13px;border:1px solid rgba(255,74,86,.18);background-color:#dc232e16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-opacity='.9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h8'/%3E%3Cpath d='M16 7h4'/%3E%3Ccircle cx='14' cy='7' r='2'/%3E%3Cpath d='M4 17h3'/%3E%3Cpath d='M11 17h9'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:21px;box-shadow:inset 0 1px #ffffff0e}.dm-home-advanced-copy{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;text-align:right}.dm-home-advanced-title{color:#fff;font-size:15px;line-height:1.55;font-weight:750}.dm-home-advanced-subtitle{display:block;color:#ffffff6b;font-size:10px;font-weight:400;line-height:1.7}.dm-home-advanced-toggle>svg{width:34px!important;height:34px!important;padding:10px!important;flex:0 0 34px;border-radius:11px;background:#ffffff0b;border:1px solid rgba(255,255,255,.065);opacity:.88}.dm-home-advanced-toggle:active{transform:scale(.987)}.dm-home-continue-head{position:relative;align-items:center!important;margin-top:30px!important;margin-bottom:16px!important;gap:10px}.dm-home-continue-head:before{content:"";position:absolute;right:-9px;top:5px;width:3px;height:34px;border-radius:99px;background:linear-gradient(180deg,#ee3b46,#ee3b461f);box-shadow:0 0 14px #ee3b4638}.dm-home-continue-title{display:flex!important;flex-direction:column;gap:0;color:#fff!important;font-size:20px!important;line-height:1.48!important;font-weight:800!important;letter-spacing:-.025em}.dm-home-continue-subtitle{display:block;color:#fff6;font-size:10px;line-height:1.7;font-weight:400;letter-spacing:0}.dm-home-continue-all{display:flex!important;align-items:center;min-height:36px;padding:7px 10px!important;gap:2px!important;border-radius:11px!important;color:#ffffffb8!important;font-size:11px!important;font-weight:500!important;background:#ffffff0b!important;border:1px solid rgba(255,255,255,.07)!important;box-shadow:inset 0 1px #ffffff09!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.dm-home-continue-all svg{width:15px!important;height:15px!important;opacity:.7}.dm-home-continue-all:active{transform:scale(.96)}} /* /static/public/assets/css/home-reference-ui-v1.css */ /* ========================================================= DIASTOMY HOME — REFERENCE UI V1 - iOS-style mobile glass header - wide cinematic single-card hero slider Loaded at the end of the Home page to override legacy hero rules. ========================================================= */ /* --------------------------------------------------------- HOME MOBILE HEADER — SEARCH + NOTIFICATION + PROFILE --------------------------------------------------------- */ @media (max-width: 767px) { body[data-page="home"] > header.dm-site-header-glass { display: none !important; } body[data-page="home"] .dm-home-shell-v3 { width: calc(100% - 20px) !important; max-width: none !important; margin: 8px auto 8px !important; z-index: 250 !important; } body[data-page="home"] .dm-home-topbar-v3 { width: 100% !important; height: 52px !important; min-height: 52px !important; padding: 0 !important; display: block !important; overflow: visible !important; } body[data-page="home"] .dm-mobile-header-v7.dmh8-glass { position: relative !important; width: 100% !important; height: 52px !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; padding: 4px !important; margin: 0 !important; direction: ltr !important; border: 1px solid rgba(255,255,255,.12) !important; border-top-color: rgba(255,255,255,.22) !important; border-radius: 18px !important; background: linear-gradient( 135deg, rgba(30,33,40,.50), rgba(10,12,17,.31) ) !important; -webkit-backdrop-filter: blur(25px) saturate(160%) !important; backdrop-filter: blur(25px) saturate(160%) !important; box-shadow: 0 13px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important; overflow: visible !important; } body[data-page="home"] .dm-mobile-header-v7.dmh8-glass::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.38), transparent ); } body[data-page="home"] .dmh7-logo.dmh8-logo { position: relative !important; left: auto !important; top: auto !important; transform: none !important; order: 1 !important; flex: 0 0 78px !important; width: 78px !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 4px !important; margin: 0 !important; z-index: 1 !important; } body[data-page="home"] .dmh7-logo.dmh8-logo > img { width: 72px !important; height: auto !important; max-height: 23px !important; object-fit: contain !important; filter: drop-shadow(0 4px 11px rgba(0,0,0,.30)); } body[data-page="home"] .dmh7-search.dmh8-search-pill { position: relative !important; order: 2 !important; width: auto !important; min-width: 0 !important; height: 42px !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid rgba(255,255,255,.12) !important; border-top-color: rgba(255,255,255,.22) !important; border-radius: 14px !important; color: rgba(255,255,255,.72) !important; background: linear-gradient( 145deg, rgba(255,255,255,.105), rgba(255,255,255,.045) ) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 22px rgba(0,0,0,.18) !important; overflow: hidden !important; } body[data-page="home"] .dmh7-search.dmh8-search-pill > img { width: 19px !important; height: 19px !important; flex: 0 0 19px !important; filter: brightness(0) invert(1) !important; opacity: .76 !important; } body[data-page="home"] .dmh7-search.dmh8-search-pill > span { display: inline !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.50) !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .01em; } body[data-page="home"] .dmh7-notification.dmh8-icon, body[data-page="home"] .dmh8-profile { position: relative !important; order: 3 !important; width: 42px !important; min-width: 42px !important; height: 42px !important; flex: 0 0 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border: 1px solid rgba(255,255,255,.12) !important; border-top-color: rgba(255,255,255,.22) !important; border-radius: 14px !important; color: #fff !important; background: linear-gradient( 145deg, rgba(255,255,255,.115), rgba(255,255,255,.045) ) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 22px rgba(0,0,0,.18) !important; text-decoration: none !important; overflow: visible !important; } body[data-page="home"] .dmh8-profile { order: 4 !important; overflow: hidden !important; } body[data-page="home"] .dmh7-notification.dmh8-icon > img { width: 21px !important; height: 21px !important; filter: brightness(0) invert(1) !important; opacity: .88 !important; } body[data-page="home"] .dmh8-profile > svg { width: 22px !important; height: 22px !important; opacity: .90; } body[data-page="home"] .dmh8-profile-avatar { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } body[data-page="home"] .dmh7-badge { top: -4px !important; right: -4px !important; min-width: 16px !important; width: auto !important; height: 16px !important; padding: 0 4px !important; line-height: 16px !important; font-size: 8px !important; border: 2px solid rgba(10,12,16,.94) !important; box-shadow: 0 4px 12px rgba(221,2,2,.42) !important; } body[data-page="home"] .dmh7-search:active, body[data-page="home"] .dmh7-notification:active, body[data-page="home"] .dmh8-profile:active { transform: scale(.96) !important; } /* Search dropdown adopts the same material. */ body[data-page="home"] .dm-home-search-panel-v3 { top: calc(100% + 9px) !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 400 !important; } body[data-page="home"] .dm-home-search-v3 { border: 1px solid rgba(255,255,255,.13) !important; border-top-color: rgba(255,255,255,.23) !important; border-radius: 18px !important; background: linear-gradient( 145deg, rgba(25,28,34,.86), rgba(8,10,14,.78) ) !important; -webkit-backdrop-filter: blur(28px) saturate(160%) !important; backdrop-filter: blur(28px) saturate(160%) !important; box-shadow: 0 18px 50px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09) !important; } } @media (max-width: 360px) { body[data-page="home"] .dmh7-logo.dmh8-logo { display: none !important; } } /* --------------------------------------------------------- HERO — ONE WIDE LANDSCAPE CARD, LIKE THE REFERENCE Existing JS still handles swipe, autoplay and dots. --------------------------------------------------------- */ body[data-page="home"] .dm-home-hero { position: relative !important; isolation: isolate !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 16px 0 48px !important; overflow: hidden !important; background: #050607 !important; } body[data-page="home"] .dm-home-hero::after { left: 50% !important; bottom: 4px !important; width: min(76vw, 980px) !important; height: 70px !important; opacity: .55 !important; } body[data-page="home"] .dm-home-hero .hero-main-slider { position: relative !important; width: 100% !important; height: 500px !important; min-height: 500px !important; max-height: 500px !important; margin: 0 !important; overflow: visible !important; perspective: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list { position: relative !important; width: 100% !important; height: 462px !important; min-height: 462px !important; max-height: 462px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; perspective: none !important; transform-style: flat !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide { position: absolute !important; left: 50% !important; top: 0 !important; width: min(1180px, calc(100vw - 80px)) !important; min-width: 0 !important; max-width: 1180px !important; height: 462px !important; min-height: 462px !important; max-height: 462px !important; margin: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate3d(-50%, 10px, 0) scale(.985) !important; transform-origin: center center !important; filter: none !important; z-index: 0 !important; transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.78,.2,1), visibility 420ms ease !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate3d(-50%, 0, 0) scale(1) !important; z-index: 20 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev2, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next2, body[data-page="home"] .dm-home-hero .dx-hero-ghost { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate3d(-50%, 10px, 0) scale(.985) !important; } body[data-page="home"] .dm-home-hero .dx-hero-card { position: relative !important; width: 100% !important; height: 100% !important; min-height: 100% !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.13) !important; border-top-color: rgba(255,255,255,.20) !important; border-radius: 28px !important; background: #101216 !important; box-shadow: 0 28px 78px rgba(0,0,0,.42), 0 10px 34px rgba(95,20,25,.14), inset 0 1px 0 rgba(255,255,255,.07) !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; aspect-ratio: auto !important; border-radius: inherit !important; overflow: hidden !important; background: #0d1014 !important; box-shadow: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-picture { display: block !important; width: 100% !important; height: 100% !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; transform: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster-shade { z-index: 2 !important; background: linear-gradient( 90deg, rgba(3,5,8,.79) 0%, rgba(3,5,8,.55) 24%, rgba(3,5,8,.16) 54%, rgba(3,5,8,.04) 74% ), linear-gradient( 0deg, rgba(3,5,8,.62) 0%, transparent 42% ) !important; } body[data-page="home"] .dm-home-hero .dx-hero-info { position: absolute !important; left: 42px !important; right: auto !important; bottom: 92px !important; z-index: 7 !important; width: min(45%, 430px) !important; padding: 0 !important; direction: ltr !important; text-align: left !important; opacity: 1 !important; pointer-events: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-en-title { margin: 0 !important; color: #fff !important; font-size: clamp(30px, 3.1vw, 50px) !important; line-height: 1.02 !important; font-weight: 850 !important; letter-spacing: -.035em !important; text-align: left !important; text-shadow: 0 4px 20px rgba(0,0,0,.42) !important; } body[data-page="home"] .dm-home-hero .dx-hero-fa-title { margin-top: 9px !important; color: rgba(255,255,255,.78) !important; font-size: 14px !important; line-height: 1.55 !important; text-align: left !important; } body[data-page="home"] .dm-home-hero .dx-hero-meta { justify-content: flex-start !important; margin-top: 10px !important; gap: 9px !important; color: rgba(255,255,255,.70) !important; font-size: 11px !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-cta { position: absolute !important; left: 42px !important; bottom: 36px !important; z-index: 8 !important; height: 42px !important; min-width: 102px !important; padding: 0 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(255,255,255,.13) !important; border-radius: 12px !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; background: linear-gradient(145deg, #ff2a35, #d80d1c) !important; box-shadow: 0 12px 28px rgba(218,14,29,.30), inset 0 1px 0 rgba(255,255,255,.20) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-play { position: absolute !important; left: 158px !important; right: auto !important; bottom: 36px !important; z-index: 8 !important; width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; border: 1px solid rgba(255,255,255,.18) !important; border-top-color: rgba(255,255,255,.30) !important; border-radius: 14px !important; color: #fff !important; background: linear-gradient( 145deg, rgba(255,255,255,.15), rgba(255,255,255,.065) ) !important; -webkit-backdrop-filter: blur(20px) saturate(155%) !important; backdrop-filter: blur(20px) saturate(155%) !important; box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.13) !important; opacity: 1 !important; transform: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-play > span { display: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-play svg { width: 16px !important; height: 16px !important; margin-left: 2px !important; } body[data-page="home"] .dm-home-hero .dx-hero-quality { display: none !important; } /* DIASTOMY ROUND 5 FIX: client asked for the slider arrows back. (Previously hidden here to match an older reference design.) */ body[data-page="home"] .dm-home-hero .dm-hero-arrow, body[data-page="home"] .dm-home-hero .dx-hero-arrow { display: flex !important; } body[data-page="home"] .dm-home-hero .dx-hero-dots { position: absolute !important; left: 50% !important; bottom: 6px !important; z-index: 50 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transform: translateX(-50%) !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot { width: 7px !important; height: 7px !important; min-width: 7px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.34) !important; opacity: 1 !important; transform: none !important; transition: width .24s ease, background .24s ease, opacity .24s ease !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot.is-active, body[data-page="home"] .dm-home-hero .dx-hero-dot.dm-force-white-active { width: 23px !important; background: rgba(255,255,255,.96) !important; border-radius: 999px !important; transform: none !important; } body[data-page="home"] .dx-hero-ambient__layer { filter: blur(42px) saturate(.78) !important; } body[data-page="home"] .dx-hero-ambient__layer.is-active { opacity: .13 !important; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { body[data-page="home"] .dm-home-hero .hero-main-slider { height: 420px !important; min-height: 420px !important; max-height: 420px !important; } body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list { height: 385px !important; min-height: 385px !important; max-height: 385px !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide { width: calc(100vw - 48px) !important; height: 385px !important; min-height: 385px !important; max-height: 385px !important; } body[data-page="home"] .dm-home-hero .dx-hero-info { left: 30px !important; bottom: 82px !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-cta { left: 30px !important; bottom: 28px !important; } body[data-page="home"] .dm-home-hero .dx-hero-play { left: 146px !important; bottom: 28px !important; } } /* --------------------------------------------------------- MOBILE HERO --------------------------------------------------------- */ @media (max-width: 767px) { body[data-page="home"] .dm-home-hero { min-height: 0 !important; height: auto !important; max-height: none !important; padding: 6px 0 34px !important; margin-top: 0 !important; overflow: hidden !important; } body[data-page="home"] .dm-home-hero .hero-main-slider { width: 100% !important; height: min(62vw, 250px) !important; min-height: min(62vw, 250px) !important; max-height: min(62vw, 250px) !important; margin: 0 !important; overflow: visible !important; perspective: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list { width: 100% !important; height: min(56vw, 220px) !important; min-height: min(56vw, 220px) !important; max-height: min(56vw, 220px) !important; overflow: visible !important; perspective: none !important; transform-style: flat !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active { left: 50% !important; top: 0 !important; width: calc(100% - 28px) !important; min-width: 0 !important; max-width: 760px !important; height: min(56vw, 220px) !important; min-height: min(56vw, 220px) !important; max-height: min(56vw, 220px) !important; transform: translate3d(-50%,0,0) scale(1) !important; perspective: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active), body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev2, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next2, body[data-page="home"] .dm-home-hero .dx-hero-ghost { display: block !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate3d(-50%,0,0) scale(.985) !important; } body[data-page="home"] .dm-home-hero .dx-hero-card { padding: 0 !important; border-radius: 20px !important; border-color: rgba(255,255,255,.11) !important; box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster { border-radius: inherit !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster-shade { background: linear-gradient( 90deg, rgba(3,5,8,.66), rgba(3,5,8,.25) 48%, rgba(3,5,8,.03) 78% ), linear-gradient( 0deg, rgba(3,5,8,.46), transparent 46% ) !important; } body[data-page="home"] .dm-home-hero .dx-hero-info { display: block !important; left: 17px !important; right: auto !important; bottom: 55px !important; width: min(57%, 220px) !important; padding: 0 !important; text-align: left !important; opacity: 1 !important; } body[data-page="home"] .dm-home-hero .dx-hero-en-title { font-size: clamp(18px, 5.2vw, 25px) !important; line-height: 1.02 !important; letter-spacing: -.025em !important; text-shadow: 0 3px 15px rgba(0,0,0,.45) !important; } body[data-page="home"] .dm-home-hero .dx-hero-fa-title { display: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-meta { display: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-cta { display: inline-flex !important; left: 17px !important; bottom: 16px !important; min-width: 82px !important; height: 34px !important; padding: 0 14px !important; border-radius: 10px !important; font-size: 10px !important; } body[data-page="home"] .dm-home-hero .dx-hero-play { display: inline-flex !important; left: 108px !important; bottom: 16px !important; width: 34px !important; min-width: 34px !important; height: 34px !important; border-radius: 10px !important; } body[data-page="home"] .dm-home-hero .dx-hero-play svg { width: 13px !important; height: 13px !important; } body[data-page="home"] .dm-home-hero .dx-hero-dots { bottom: 3px !important; gap: 6px !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot { width: 6px !important; min-width: 6px !important; height: 6px !important; background: rgba(255,255,255,.36) !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot.is-active, body[data-page="home"] .dm-home-hero .dx-hero-dot.dm-force-white-active { width: 18px !important; background: #fff !important; } body[data-page="home"] .dx-hero-ambient__layer.is-active { opacity: .07 !important; } } /* --------------------------------------------------------- VERY WIDE DESKTOP --------------------------------------------------------- */ @media (min-width: 1440px) { body[data-page="home"] .dm-home-hero .hero-main-slider { height: 550px !important; min-height: 550px !important; max-height: 550px !important; } body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list, body[data-page="home"] .dm-home-hero .dx-hero-slide { height: 510px !important; min-height: 510px !important; max-height: 510px !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide { width: min(1280px, calc(100vw - 140px)) !important; max-width: 1280px !important; } } @media (prefers-reduced-motion: reduce) { body[data-page="home"] .dm-home-hero .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-dot, body[data-page="home"] .dmh7-search, body[data-page="home"] .dmh7-notification, body[data-page="home"] .dmh8-profile { transition: none !important; } } /* /static/public/assets/css/home-mobile-reference-final.css */ /* ========================================================= DIASTOMY HOME — MOBILE REFERENCE FINAL V3 Goal: match the supplied mobile reference without touching desktop. Loaded after home-reference-ui-v1.css on the Home page. ========================================================= */ @media (max-width: 767px) { html.dm-mobile-menu-open, html.dm-mobile-menu-open body { overflow: hidden !important; } body[data-page="home"] { background: #050607 !important; } /* ---------- top header: hamburger + search + bell + profile ---------- */ body[data-page="home"] .dm-home-shell-v3 { width: calc(100% - 20px) !important; max-width: 440px !important; margin: 8px auto 8px !important; } body[data-page="home"] .dm-home-topbar-v3 { height: 52px !important; min-height: 52px !important; padding: 0 !important; } body[data-page="home"] .dm-mobile-header-v7.dmh8-glass { height: 52px !important; min-height: 52px !important; padding: 4px !important; gap: 7px !important; border-radius: 17px !important; background: linear-gradient(135deg, rgba(27,30,36,.66), rgba(10,12,16,.48)) !important; border: 1px solid rgba(255,255,255,.11) !important; box-shadow: 0 10px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important; } body[data-page="home"] .dmh8-menu { order: 1 !important; width: 42px !important; min-width: 42px !important; height: 42px !important; flex: 0 0 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.93) !important; border: 0 !important; border-radius: 13px !important; background: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; } body[data-page="home"] .dmh8-menu svg { width: 27px !important; height: 27px !important; } body[data-page="home"] .dmh8-menu:active { transform: scale(.95) !important; background: rgba(255,255,255,.05) !important; } body[data-page="home"] .dmh7-search.dmh8-search-pill { order: 2 !important; height: 42px !important; min-width: 0 !important; flex: 1 1 auto !important; padding: 0 12px !important; border-radius: 13px !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.075) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important; } body[data-page="home"] .dmh7-search.dmh8-search-pill > span { font-size: 14px !important; color: rgba(255,255,255,.48) !important; } body[data-page="home"] .dmh7-notification.dmh8-icon, body[data-page="home"] .dmh8-profile { width: 42px !important; min-width: 42px !important; height: 42px !important; flex-basis: 42px !important; border-radius: 13px !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important; } /* neutralize legacy mobile logo rules after replacing the logo with menu */ body[data-page="home"] .dmh7-logo.dmh8-logo { display: none !important; } /* ---------- compact cinematic hero, matching reference proportions ---------- */ body[data-page="home"] .dm-home-hero { height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 5px 0 30px !important; background: #050607 !important; overflow: hidden !important; } body[data-page="home"] .dm-home-hero .hero-main-slider { height: clamp(142px, 42vw, 180px) !important; min-height: clamp(142px, 42vw, 180px) !important; max-height: clamp(142px, 42vw, 180px) !important; overflow: visible !important; } body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list { height: clamp(142px, 42vw, 180px) !important; min-height: clamp(142px, 42vw, 180px) !important; max-height: clamp(142px, 42vw, 180px) !important; overflow: visible !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active { width: calc(100% - 30px) !important; max-width: 430px !important; height: clamp(142px, 42vw, 180px) !important; min-height: clamp(142px, 42vw, 180px) !important; max-height: clamp(142px, 42vw, 180px) !important; left: 50% !important; top: 0 !important; transform: translate3d(-50%,0,0) !important; } body[data-page="home"] .dm-home-hero .dx-hero-card { border-radius: 17px !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 14px 34px rgba(0,0,0,.30) !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster img { object-fit: cover !important; object-position: center center !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster-shade { background: linear-gradient(90deg, rgba(2,4,7,.58), rgba(2,4,7,.18) 48%, rgba(2,4,7,.02) 76%), linear-gradient(0deg, rgba(2,4,7,.34), transparent 48%) !important; } body[data-page="home"] .dm-home-hero .dx-hero-info { left: 17px !important; bottom: 48px !important; width: min(55%, 205px) !important; } body[data-page="home"] .dm-home-hero .dx-hero-en-title { font-size: clamp(17px, 4.8vw, 22px) !important; line-height: 1.04 !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-cta { left: 17px !important; bottom: 12px !important; min-width: 82px !important; height: 33px !important; padding: 0 15px !important; border-radius: 999px !important; font-size: 10px !important; } body[data-page="home"] .dm-home-hero .dx-hero-play { left: 106px !important; bottom: 12px !important; width: 33px !important; min-width: 33px !important; height: 33px !important; border-radius: 10px !important; } body[data-page="home"] .dm-home-hero .dx-hero-dots { bottom: 3px !important; gap: 6px !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot { width: 6px !important; min-width: 6px !important; height: 6px !important; background: rgba(255,255,255,.28) !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot.is-active, body[data-page="home"] .dm-home-hero .dx-hero-dot.dm-force-white-active { width: 23px !important; background: #fff !important; } /* The supplied reference goes directly from hero/dots into content. */ body[data-page="home"] .dm-topic-section-v4 { display: none !important; } body[data-page="home"] .dm-topic-section-v4 + .slider-section { margin-top: 2px !important; } body[data-page="home"] .dm-topic-section-v4 + .slider-section > div:first-child { margin-bottom: 14px !important; } /* ---------- hamburger drawer ---------- */ body[data-page="home"] .dm-home-mobile-drawer-v2 { position: fixed !important; inset: 0 !important; z-index: 20000 !important; display: block !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .2s ease, visibility .2s ease !important; } body[data-page="home"] .dm-home-mobile-drawer-v2.is-open { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body[data-page="home"] .dm-home-mobile-drawer-backdrop-v2 { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; background: rgba(0,0,0,.58) !important; -webkit-backdrop-filter: blur(5px) !important; backdrop-filter: blur(5px) !important; } body[data-page="home"] .dm-home-mobile-drawer-panel-v2 { position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: min(82vw, 310px) !important; padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 24px !important; background: radial-gradient(circle at 0 0, rgba(137,0,12,.20), transparent 38%), #0a0b0e !important; border-right: 1px solid rgba(255,255,255,.08) !important; box-shadow: 22px 0 60px rgba(0,0,0,.42) !important; transform: translateX(-102%) !important; transition: transform .26s cubic-bezier(.22,1,.36,1) !important; } body[data-page="home"] .dm-home-mobile-drawer-v2.is-open .dm-home-mobile-drawer-panel-v2 { transform: translateX(0) !important; } body[data-page="home"] .dm-home-mobile-drawer-head-v2 { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; padding-bottom: 18px !important; margin-bottom: 8px !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; } body[data-page="home"] .dm-home-mobile-drawer-head-v2 img { width: 116px !important; height: auto !important; } body[data-page="home"] .dm-home-mobile-drawer-close-v2 { width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; color: #fff !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 12px !important; background: rgba(255,255,255,.04) !important; } body[data-page="home"] .dm-home-mobile-drawer-close-v2 svg { width: 21px !important; height: 21px !important; } body[data-page="home"] .dm-home-mobile-drawer-nav-v2 { display: grid !important; gap: 9px !important; } body[data-page="home"] .dm-home-mobile-drawer-nav-v2 a { min-height: 54px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 0 14px !important; color: rgba(255,255,255,.92) !important; font-size: 13.5px !important; font-weight: 650 !important; text-decoration: none !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 15px !important; background: rgba(255,255,255,.035) !important; transition: background .15s ease, border-color .15s ease !important; } body[data-page="home"] .dm-home-mobile-drawer-nav-v2 a:active { background: rgba(255,255,255,.07) !important; border-color: rgba(221,2,2,.28) !important; } body[data-page="home"] .dm-home-mobile-drawer-nav-v2 a .dmhd-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; flex: 0 0 34px !important; border-radius: 10px !important; border: 1px solid rgba(255,80,80,.28) !important; background: rgba(221,2,2,.08) !important; color: #ff6a6f !important; } body[data-page="home"] .dm-home-mobile-drawer-nav-v2 a .dmhd-icon svg { width: 18px !important; height: 18px !important; } } @media (min-width: 768px) { .dmh8-menu, .dm-home-mobile-drawer-v2 { display: none !important; } } /* DM MOBILE HERO SLIDER FIX V4 */ @media (max-width: 767px) { body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list, body[data-page="home"] .dm-home-hero .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active { height: clamp(148px, 44vw, 188px) !important; min-height: clamp(148px, 44vw, 188px) !important; max-height: clamp(148px, 44vw, 188px) !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active { width: calc(100% - 26px) !important; max-width: 430px !important; left: 50% !important; transform: translate3d(-50%,0,0) !important; } body[data-page="home"] .dm-home-hero .dx-hero-card { overflow: hidden !important; border-radius: 18px !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster img { object-fit: cover !important; object-position: center center !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-info { position: absolute !important; left: 18px !important; right: auto !important; top: auto !important; bottom: 52px !important; width: min(52%, 190px) !important; max-width: 190px !important; padding: 0 !important; text-align: left !important; z-index: 20 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-en-title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; white-space: normal !important; font-size: clamp(18px, 5vw, 24px) !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; margin: 0 !important; text-shadow: 0 2px 10px rgba(0,0,0,.35) !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-fa-title, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-meta { display: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-details-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; left: 18px !important; right: auto !important; top: auto !important; bottom: 12px !important; min-width: 94px !important; height: 35px !important; padding: 0 20px !important; border-radius: 999px !important; font-size: 13px !important; z-index: 25 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide .dx-hero-play { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; left: 116px !important; right: auto !important; top: auto !important; bottom: 12px !important; width: 35px !important; min-width: 35px !important; height: 35px !important; border-radius: 10px !important; z-index: 25 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide .dx-hero-play > span { display: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-dots { bottom: 4px !important; gap: 6px !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot { width: 6px !important; min-width: 6px !important; height: 6px !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot.is-active, body[data-page="home"] .dm-home-hero .dx-hero-dot.dm-force-white-active { width: 22px !important; } } /* DM MOBILE GLASS HEADER V5 */ @media (max-width: 767px) { body[data-page="home"] .dm-mobile-header-v7.dmh8-glass { position: relative !important; background: linear-gradient( 135deg, rgba(44, 48, 58, .26) 0%, rgba(24, 27, 34, .18) 48%, rgba(9, 11, 15, .15) 100% ) !important; border: 1px solid rgba(255,255,255,.13) !important; border-top-color: rgba(255,255,255,.22) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.08) !important; backdrop-filter: blur(24px) saturate(180%) brightness(1.08) !important; box-shadow: 0 10px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(255,255,255,.025) !important; } body[data-page="home"] .dm-mobile-header-v7.dmh8-glass::before { content: "" !important; position: absolute !important; top: 0 !important; left: 15px !important; right: 15px !important; height: 1px !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.42), transparent ) !important; pointer-events: none !important; z-index: 10 !important; } body[data-page="home"] .dmh7-search.dmh8-search-pill { background: linear-gradient( 135deg, rgba(255,255,255,.075), rgba(255,255,255,.025) ) !important; border: 1px solid rgba(255,255,255,.095) !important; -webkit-backdrop-filter: blur(16px) saturate(150%) !important; backdrop-filter: blur(16px) saturate(150%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3px 12px rgba(0,0,0,.08) !important; } body[data-page="home"] .dmh7-notification.dmh8-icon, body[data-page="home"] .dmh8-profile { background: linear-gradient( 145deg, rgba(255,255,255,.085), rgba(255,255,255,.025) ) !important; border: 1px solid rgba(255,255,255,.11) !important; -webkit-backdrop-filter: blur(15px) saturate(160%) !important; backdrop-filter: blur(15px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.10) !important; } body[data-page="home"] .dmh8-menu { background: rgba(255,255,255,.018) !important; } } /* ========================================================= DIASTOMY MOBILE HERO POLISH V6 ========================================================= */ @media (max-width: 767px) { /* Fix right-side white strip / horizontal overflow */ html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; background: #050607 !important; } body[data-page="home"] { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; } /* More breathing room between header and hero */ body[data-page="home"] .dm-home-hero { position: relative !important; overflow: visible !important; padding: 4px 0 27px !important; margin-top: 2px !important; margin-bottom: 4px !important; } /* Main slider dimensions */ body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list, body[data-page="home"] .dm-home-hero .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active { height: clamp(160px, 44vw, 186px) !important; min-height: clamp(160px, 44vw, 186px) !important; max-height: clamp(160px, 44vw, 186px) !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active { width: calc(100% - 28px) !important; max-width: 430px !important; left: 50% !important; right: auto !important; transform: translate3d(-50%,0,0) !important; } /* Hero card */ body[data-page="home"] .dm-home-hero .dx-hero-card { position: relative !important; width: 100% !important; height: 100% !important; overflow: hidden !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.09) !important; box-shadow: 0 13px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster, body[data-page="home"] .dm-home-hero .dx-hero-picture { width: 100% !important; height: 100% !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; transform: scale(1.01) !important; } /* Proper cinematic fade for readable text */ body[data-page="home"] .dm-home-hero .dx-hero-poster-shade { display: block !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 90deg, rgba(0,0,0,.56) 0%, rgba(0,0,0,.24) 32%, rgba(0,0,0,.04) 63%, transparent 82% ), linear-gradient( 0deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.24) 35%, transparent 65% ) !important; z-index: 5 !important; pointer-events: none !important; } /* Movie title */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-info { display: block !important; position: absolute !important; left: 18px !important; right: auto !important; top: auto !important; bottom: 55px !important; width: 48% !important; max-width: 175px !important; padding: 0 !important; margin: 0 !important; text-align: left !important; z-index: 20 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-en-title { margin: 0 !important; font-size: clamp(18px, 5vw, 22px) !important; line-height: 1.05 !important; font-weight: 800 !important; color: #fff !important; white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; text-shadow: 0 2px 8px rgba(0,0,0,.55) !important; } /* We don't need these in the compact mobile hero */ body[data-page="home"] .dm-home-hero .dx-hero-fa-title, body[data-page="home"] .dm-home-hero .dx-hero-meta, body[data-page="home"] .dm-home-hero .dx-hero-quality { display: none !important; } /* Red watch button */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-details-cta { position: absolute !important; left: 18px !important; right: auto !important; top: auto !important; bottom: 13px !important; min-width: 88px !important; height: 35px !important; padding: 0 19px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: none !important; border-radius: 999px !important; background: linear-gradient( 135deg, #ff2b2b, #e9101c ) !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; box-shadow: 0 7px 18px rgba(231,17,30,.30) !important; z-index: 25 !important; } /* Small play button */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play { display: inline-flex !important; position: absolute !important; left: 113px !important; right: auto !important; top: auto !important; bottom: 13px !important; width: 35px !important; min-width: 35px !important; height: 35px !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,.18) !important; background: rgba(18,20,23,.62) !important; -webkit-backdrop-filter: blur(10px) saturate(150%) !important; backdrop-filter: blur(10px) saturate(150%) !important; color: #fff !important; z-index: 26 !important; } body[data-page="home"] .dm-home-hero .dx-hero-play > span { display: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-play svg { width: 13px !important; height: 13px !important; } /* Move pagination OUTSIDE the image */ body[data-page="home"] .dm-home-hero .dx-hero-dots { position: absolute !important; left: 50% !important; right: auto !important; bottom: -18px !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; gap: 5px !important; z-index: 40 !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot { width: 5px !important; min-width: 5px !important; height: 5px !important; border-radius: 999px !important; background: rgba(255,255,255,.25) !important; transition: width .22s ease, background .22s ease !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot.is-active, body[data-page="home"] .dm-home-hero .dx-hero-dot.dm-force-white-active { width: 23px !important; background: #fff !important; box-shadow: 0 0 8px rgba(255,255,255,.18) !important; } } /* DM MOBILE HEADER NO BORDER V6 */ @media (max-width: 767px) { body[data-page="home"] .dm-mobile-header-v7.dmh8-glass { border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; outline: 0 !important; box-shadow: 0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035) !important; } body[data-page="home"] .dm-mobile-header-v7.dmh8-glass::before { display: none !important; content: none !important; } body[data-page="home"] .dmh7-search.dmh8-search-pill { border: 0 !important; outline: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } body[data-page="home"] .dmh7-notification.dmh8-icon, body[data-page="home"] .dmh8-profile { border: 0 !important; outline: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } body[data-page="home"] .dmh8-menu { border: 0 !important; outline: 0 !important; box-shadow: none !important; } } /* ========================================================= DM MOBILE HERO SIDE PEEK V1 show a small visible part of previous/next slide ========================================================= */ @media (max-width: 767px) { body[data-page="home"] .dm-home-hero { overflow: visible !important; } body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list { overflow: visible !important; } /* active slide slightly narrower so left/right slides can peek */ body[data-page="home"] .dm-home-hero .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active { width: calc(100% - 52px) !important; max-width: 404px !important; } /* main active card */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active { opacity: 1 !important; z-index: 5 !important; transform: translate3d(-50%, 0, 0) scale(1) !important; pointer-events: auto !important; } /* show previous slide a little from left */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev { opacity: .55 !important; display: block !important; pointer-events: none !important; z-index: 3 !important; left: 50% !important; top: 0 !important; transform: translate3d(calc(-50% - 30px), 0, 0) scale(.92) !important; } /* show next slide a little from right */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next { opacity: .55 !important; display: block !important; pointer-events: none !important; z-index: 3 !important; left: 50% !important; top: 0 !important; transform: translate3d(calc(-50% + 30px), 0, 0) scale(.92) !important; } /* keep far slides hidden */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev2, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next2 { opacity: 0 !important; pointer-events: none !important; z-index: 1 !important; } /* side slides should look dimmer */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-card { filter: brightness(.72) saturate(.88) !important; } /* hide text/buttons on side slides */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-info, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-play, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-details-cta, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-info, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-play, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-details-cta, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev2 .dx-hero-info, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev2 .dx-hero-play, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev2 .dx-hero-details-cta, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next2 .dx-hero-info, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next2 .dx-hero-play, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next2 .dx-hero-details-cta { opacity: 0 !important; visibility: hidden !important; display: none !important; } } /* ========================================================= DIASTOMY MOBILE HERO SIDE PEEK — HARD FIX V2 Fully resets old V18 stacked/crossfade positioning ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- containers MUST NOT clip neighbour slides ----------------------------------------------------- */ html, body { overflow-x: hidden !important; } body[data-page="home"] .dm-home-hero { position: relative !important; overflow: visible !important; padding-left: 0 !important; padding-right: 0 !important; } body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list { position: relative !important; width: 100% !important; overflow: visible !important; clip: auto !important; clip-path: none !important; mask-image: none !important; -webkit-mask-image: none !important; } /* ----------------------------------------------------- RESET V18 old version uses inset:0 / width:100% ----------------------------------------------------- */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide { display: block !important; position: absolute !important; inset: auto !important; top: 0 !important; bottom: auto !important; left: 50% !important; right: auto !important; width: calc(100% - 92px) !important; min-width: 0 !important; max-width: 390px !important; margin: 0 !important; visibility: hidden !important; opacity: 0 !important; transform-origin: center center !important; pointer-events: none !important; transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .30s ease, filter .30s ease !important; } /* ----------------------------------------------------- MAIN SLIDE ----------------------------------------------------- */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-active { display: block !important; visibility: visible !important; opacity: 1 !important; left: 50% !important; right: auto !important; transform: translate3d(-50%, 0, 0) scale(1) !important; filter: none !important; z-index: 30 !important; pointer-events: auto !important; } /* ----------------------------------------------------- LEFT — previous movie ----------------------------------------------------- */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev { display: block !important; visibility: visible !important; opacity: .72 !important; left: 50% !important; right: auto !important; transform: translate3d( calc(-50% - 42px), 0, 0 ) scale(.96) !important; filter: brightness(.66) saturate(.82) !important; z-index: 20 !important; pointer-events: none !important; } /* ----------------------------------------------------- RIGHT — next movie ----------------------------------------------------- */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next { display: block !important; visibility: visible !important; opacity: .72 !important; left: 50% !important; right: auto !important; transform: translate3d( calc(-50% + 42px), 0, 0 ) scale(.96) !important; filter: brightness(.66) saturate(.82) !important; z-index: 20 !important; pointer-events: none !important; } /* ----------------------------------------------------- Hide cards further away ----------------------------------------------------- */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev2, body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next2 { display: block !important; visibility: hidden !important; opacity: 0 !important; z-index: 1 !important; } /* ----------------------------------------------------- Cards ----------------------------------------------------- */ body[data-page="home"] .dm-home-hero .dx-hero-slide .dx-hero-card { width: 100% !important; height: 100% !important; overflow: hidden !important; border-radius: 18px !important; } /* side cards must contain IMAGE ONLY */ body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-info, body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-details-cta, body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-play, body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-quality { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* ----------------------------------------------------- Make neighbour edges actually visible ----------------------------------------------------- */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-card { box-shadow: 0 8px 25px rgba(0,0,0,.42) !important; } } /* ========================================================= DIASTOMY MOBILE HERO — REFERENCE EXACT V7 Netflix-like narrow side peek ========================================================= */ @media (max-width: 767px) { /* ===== HERO AREA ===== */ body[data-page="home"] .dm-home-hero { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 5px 0 7px !important; padding: 0 !important; /* * Outer hero clips the pieces that go outside screen. * Inner slider remains visible. */ overflow: hidden !important; background: #050607 !important; } body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list { position: relative !important; width: 100% !important; height: clamp(158px, 46vw, 188px) !important; min-height: clamp(158px, 46vw, 188px) !important; max-height: clamp(158px, 46vw, 188px) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; } /* ===== RESET ALL OLD HERO POSITIONS ===== */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide { display: block !important; position: absolute !important; inset: auto !important; top: 0 !important; bottom: auto !important; left: 50% !important; right: auto !important; /* * Nearly full width. * Leaves ~18px each side for neighbour slide. */ width: calc(100% - 36px) !important; min-width: 0 !important; max-width: 420px !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transform-origin: center center !important; transition: transform .46s cubic-bezier(.22,1,.36,1), opacity .32s ease, filter .32s ease !important; } /* ===== ACTIVE / CENTER ===== */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-active { visibility: visible !important; opacity: 1 !important; left: 50% !important; transform: translate3d(-50%, 0, 0) !important; filter: none !important; z-index: 30 !important; pointer-events: auto !important; } /* ===== PREVIOUS: SMALL LEFT STRIP ===== */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev { display: block !important; visibility: visible !important; opacity: .72 !important; left: 50% !important; /* * Correct carousel placement: * active = -50% * previous = -150% */ transform: translate3d(-150%, 0, 0) !important; filter: brightness(.56) saturate(.85) !important; z-index: 15 !important; pointer-events: none !important; } /* ===== NEXT: SMALL RIGHT STRIP ===== */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next { display: block !important; visibility: visible !important; opacity: .72 !important; left: 50% !important; /* * active = -50% * next = +50% */ transform: translate3d(50%, 0, 0) !important; filter: brightness(.56) saturate(.85) !important; z-index: 15 !important; pointer-events: none !important; } /* ===== FAR SLIDES ===== */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev2, body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next2 { display: block !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; z-index: 1 !important; } /* ===== CARD ===== */ body[data-page="home"] .dm-home-hero .dx-hero-card { position: relative !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; border-radius: 16px !important; background: #111 !important; box-shadow: 0 8px 24px rgba(0,0,0,.26) !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster, body[data-page="home"] .dm-home-hero .dx-hero-picture { display: block !important; width: 100% !important; height: 100% !important; border-radius: 16px !important; overflow: hidden !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; /* Reference composition */ object-position: center center !important; transform: scale(1.005) !important; } /* ===== REFERENCE DARK FADE ===== */ body[data-page="home"] .dm-home-hero .dx-hero-poster-shade { display: block !important; position: absolute !important; inset: 0 !important; z-index: 5 !important; pointer-events: none !important; background: linear-gradient( 90deg, rgba(3,8,12,.67) 0%, rgba(3,8,12,.47) 20%, rgba(3,8,12,.16) 47%, rgba(3,8,12,.02) 72%, transparent 100% ), linear-gradient( 0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.06) 42%, transparent 68% ) !important; } /* ===== TITLE ===== */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-info { display: block !important; position: absolute !important; left: 18px !important; right: auto !important; top: auto !important; bottom: 57px !important; width: 48% !important; max-width: 176px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; z-index: 20 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-en-title { display: -webkit-box !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; white-space: normal !important; font-size: clamp(18px, 5.25vw, 22px) !important; line-height: 1.04 !important; font-weight: 800 !important; letter-spacing: -.025em !important; color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,.42) !important; } /* Reference doesn't show extra metadata */ body[data-page="home"] .dm-home-hero .dx-hero-fa-title, body[data-page="home"] .dm-home-hero .dx-hero-meta, body[data-page="home"] .dm-home-hero .dx-hero-quality { display: none !important; } /* ===== CTA ===== */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-details-cta { display: inline-flex !important; position: absolute !important; left: 18px !important; right: auto !important; top: auto !important; bottom: 18px !important; width: auto !important; min-width: 91px !important; height: 34px !important; padding: 0 20px !important; align-items: center !important; justify-content: center !important; border: 0 !important; outline: 0 !important; border-radius: 999px !important; background: #ee1f2b !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: 0 5px 14px rgba(238,31,43,.27) !important; z-index: 25 !important; } /* Reference has ONE red CTA, no separate square play button */ body[data-page="home"] .dm-home-hero .dx-hero-play { display: none !important; } /* ===== ONLY IMAGE ON SIDE SLIDES ===== */ body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-info, body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-details-cta, body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-play, body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-quality { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* ===== PAGINATION INSIDE BANNER ===== */ body[data-page="home"] .dm-home-hero .dx-hero-dots { display: flex !important; position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 9px !important; transform: translateX(-50%) !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; z-index: 80 !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot { width: 6px !important; min-width: 6px !important; height: 6px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.48) !important; opacity: 1 !important; transition: width .22s ease, background .22s ease !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot.is-active, body[data-page="home"] .dm-home-hero .dx-hero-dot.dm-force-white-active { width: 20px !important; border-radius: 999px !important; background: #fff !important; box-shadow: 0 0 6px rgba(255,255,255,.18) !important; } /* DIASTOMY ROUND 5 FIX: client asked for the slider arrows back on mobile too (previously hidden for the reference design). */ body[data-page="home"] .dm-home-hero .dm-hero-arrow { display: flex !important; } } /* ========================================================= DIASTOMY MOBILE HERO SIDE SLIDES CLEAR V1 make left/right slides fully bright ========================================================= */ @media (max-width: 767px) { body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev, body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next { opacity: 1 !important; filter: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-card { filter: none !important; box-shadow: 0 8px 24px rgba(0,0,0,.22) !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-poster img, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-poster img { filter: none !important; opacity: 1 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-poster-shade, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-poster-shade { opacity: 0 !important; background: transparent !important; } } /* ========================================================= DIASTOMY HERO SIDE SCALE V8 side slides smaller -> grow when active ========================================================= */ @media (max-width: 767px) { /* CENTER / ACTIVE */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-active { transform: translate3d(-50%, 0, 0) scale(1) !important; opacity: 1 !important; filter: none !important; z-index: 30 !important; } /* LEFT / PREVIOUS */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev { /* * smaller than center * translation adjusted so a narrow strip remains visible */ transform: translate3d(-143%, 0, 0) scale(.88) !important; transform-origin: center center !important; opacity: 1 !important; filter: none !important; z-index: 15 !important; } /* RIGHT / NEXT */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next { transform: translate3d(43%, 0, 0) scale(.88) !important; transform-origin: center center !important; opacity: 1 !important; filter: none !important; z-index: 15 !important; } /* Smooth grow/shrink animation while sliding */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide { transition: transform .48s cubic-bezier(.22,1,.36,1), opacity .32s ease, filter .32s ease !important; will-change: transform !important; } /* Side cards stay completely bright */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-poster img, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-poster img { opacity: 1 !important; filter: none !important; } /* Don't darken the exposed side pieces */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-poster-shade, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-poster-shade { opacity: 0 !important; background: transparent !important; } } /* ========================================================= DIASTOMY MOBILE — REFERENCE MATCH V9 proportions / spacing / hero composition ========================================================= */ @media (max-width: 767px) { /* ===================================================== 1. HEADER Reference has no large outer card. ===================================================== */ body[data-page="home"] .dm-home-shell-v3 { width: calc(100% - 24px) !important; max-width: 440px !important; margin: 8px auto 6px !important; } body[data-page="home"] .dm-home-topbar-v3 { height: 48px !important; min-height: 48px !important; } body[data-page="home"] .dm-mobile-header-v7.dmh8-glass { height: 48px !important; min-height: 48px !important; padding: 0 !important; gap: 7px !important; /* remove the large outer glass card */ background: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* hamburger */ body[data-page="home"] .dmh8-menu { width: 39px !important; min-width: 39px !important; height: 39px !important; flex: 0 0 39px !important; border: 0 !important; border-radius: 11px !important; background: rgba(255,255,255,.025) !important; box-shadow: none !important; } body[data-page="home"] .dmh8-menu svg { width: 25px !important; height: 25px !important; } /* search */ body[data-page="home"] .dmh7-search.dmh8-search-pill { height: 39px !important; padding: 0 13px !important; border: 0 !important; border-radius: 12px !important; background: linear-gradient( 135deg, rgba(38,40,47,.58), rgba(20,21,27,.46) ) !important; -webkit-backdrop-filter: blur(18px) saturate(145%) !important; backdrop-filter: blur(18px) saturate(145%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important; } body[data-page="home"] .dmh7-search.dmh8-search-pill > span { font-size: 13px !important; color: rgba(255,255,255,.52) !important; } /* bell + profile */ body[data-page="home"] .dmh7-notification.dmh8-icon, body[data-page="home"] .dmh8-profile { width: 39px !important; min-width: 39px !important; height: 39px !important; flex: 0 0 39px !important; border: 0 !important; border-radius: 12px !important; background: rgba(255,255,255,.035) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } /* ===================================================== 2. HERO WRAPPER ===================================================== */ body[data-page="home"] .dm-home-hero { margin: 2px 0 5px !important; padding: 0 !important; height: clamp(154px, 43.5vw, 174px) !important; min-height: clamp(154px, 43.5vw, 174px) !important; max-height: clamp(154px, 43.5vw, 174px) !important; overflow: hidden !important; } body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list { height: 100% !important; min-height: 100% !important; max-height: 100% !important; overflow: visible !important; } /* ===================================================== 3. SLIDE SIZE ===================================================== */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide { width: calc(100% - 42px) !important; max-width: 414px !important; height: 100% !important; top: 0 !important; } /* ===================================================== ACTIVE SLIDE ===================================================== */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-active { transform: translate3d(-50%,0,0) scale(1) !important; opacity: 1 !important; filter: none !important; z-index: 30 !important; } /* ===================================================== SIDE SLIDES Slightly smaller like reference. Only a narrow edge remains visible. ===================================================== */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev { transform: translate3d(-148%,0,0) scale(.88) !important; transform-origin: center center !important; opacity: 1 !important; filter: none !important; z-index: 15 !important; } body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next { transform: translate3d(48%,0,0) scale(.88) !important; transform-origin: center center !important; opacity: 1 !important; filter: none !important; z-index: 15 !important; } /* smooth size change */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide { transition: transform .46s cubic-bezier(.22,1,.36,1), opacity .28s ease !important; will-change: transform !important; } /* ===================================================== HERO CARD ===================================================== */ body[data-page="home"] .dm-home-hero .dx-hero-card { border-radius: 15px !important; border: 0 !important; box-shadow: 0 8px 22px rgba(0,0,0,.20) !important; } body[data-page="home"] .dm-home-hero .dx-hero-poster, body[data-page="home"] .dm-home-hero .dx-hero-picture { border-radius: 15px !important; } /* ===================================================== 4. CINEMATIC SHADE A little softer than current version ===================================================== */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-poster-shade { opacity: 1 !important; background: linear-gradient( 90deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.32) 23%, rgba(0,0,0,.08) 52%, transparent 75% ), linear-gradient( 0deg, rgba(0,0,0,.27), transparent 52% ) !important; } /* side images = completely clean */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-poster-shade, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-poster-shade { display: none !important; opacity: 0 !important; background: transparent !important; } /* ===================================================== 5. TITLE POSITION Reference is more vertically centered. ===================================================== */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-info { left: 18px !important; right: auto !important; top: 54px !important; bottom: auto !important; width: 47% !important; max-width: 175px !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-en-title { font-size: clamp( 17px, 4.7vw, 21px ) !important; line-height: 1.04 !important; font-weight: 800 !important; letter-spacing: -.025em !important; } /* ===================================================== 6. CTA Smaller and higher, like reference. ===================================================== */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-details-cta { left: 18px !important; bottom: 25px !important; min-width: 86px !important; height: 30px !important; padding: 0 17px !important; font-size: 11px !important; border-radius: 999px !important; box-shadow: 0 5px 13px rgba(238,31,43,.24) !important; } /* reference doesn't need separate play square */ body[data-page="home"] .dm-home-hero .dx-hero-play { display: none !important; } /* ===================================================== 7. DOTS ===================================================== */ body[data-page="home"] .dm-home-hero .dx-hero-dots { bottom: 8px !important; gap: 5px !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot { width: 5px !important; min-width: 5px !important; height: 5px !important; background: rgba(255,255,255,.42) !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot.is-active, body[data-page="home"] .dm-home-hero .dx-hero-dot.dm-force-white-active { width: 18px !important; background: #fff !important; } /* ===================================================== 8. SPACE AFTER HERO Reference has almost no giant empty gap. ===================================================== */ body[data-page="home"] .dm-home-hero + * { margin-top: 8px !important; } } /* ========================================================= DIASTOMY HERO EDGE PEEK BOOST V1 show a bit more of left/right neighbour slides ========================================================= */ @media (max-width: 767px) { /* اسلاید اصلی یکم باریک‌تر */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide { width: calc(100% - 58px) !important; max-width: 402px !important; } /* وسط */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-active { transform: translate3d(-50%, 0, 0) scale(1) !important; } /* چپ - یکم بیشتر دیده شود */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev { transform: translate3d(-145%, 0, 0) scale(.87) !important; opacity: 1 !important; filter: none !important; } /* راست - یکم بیشتر دیده شود */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next { transform: translate3d(45%, 0, 0) scale(.87) !important; opacity: 1 !important; filter: none !important; } } /* ========================================================= DIASTOMY HERO EDGE PEEK TUNE V2 slightly reduce left/right visible slices ========================================================= */ @media (max-width: 767px) { /* اسلاید اصلی کمی عریض‌تر از قبل */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide { width: calc(100% - 50px) !important; max-width: 410px !important; } /* اسلاید وسط */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-active { transform: translate3d(-50%, 0, 0) scale(1) !important; } /* اسلاید چپ - کمی بیشتر بره بیرون */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev { transform: translate3d(-147%, 0, 0) scale(.885) !important; opacity: 1 !important; filter: none !important; } /* اسلاید راست - کمی بیشتر بره بیرون */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next { transform: translate3d(47%, 0, 0) scale(.885) !important; opacity: 1 !important; filter: none !important; } } /* ========================================================= DIASTOMY HERO HEIGHT TRIM V3 make hero a bit shorter to match reference ========================================================= */ @media (max-width: 767px) { /* خود Hero کوتاه‌تر */ body[data-page="home"] .dm-home-hero { height: clamp(142px, 40.5vw, 160px) !important; min-height: clamp(142px, 40.5vw, 160px) !important; max-height: clamp(142px, 40.5vw, 160px) !important; margin: 2px 0 4px !important; padding: 0 !important; } body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list, body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide { height: 100% !important; min-height: 100% !important; max-height: 100% !important; } /* عنوان کمی بالاتر و جمع‌وجورتر */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-info { top: 42px !important; bottom: auto !important; left: 18px !important; width: 45% !important; max-width: 165px !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-en-title { font-size: clamp(16px, 4.4vw, 20px) !important; line-height: 1.02 !important; } /* دکمه مشاهده کمی کوچیک‌تر و بالاتر */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-details-cta { bottom: 18px !important; min-width: 82px !important; height: 28px !important; padding: 0 16px !important; font-size: 10.5px !important; border-radius: 999px !important; } /* دکمه پلی هم کمی متناسب‌تر */ body[data-page="home"] .dm-home-hero .dx-hero-play { bottom: 18px !important; width: 28px !important; min-width: 28px !important; height: 28px !important; border-radius: 9px !important; } body[data-page="home"] .dm-home-hero .dx-hero-play svg { width: 12px !important; height: 12px !important; } /* dots کمی بالاتر */ body[data-page="home"] .dm-home-hero .dx-hero-dots { bottom: 7px !important; gap: 5px !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot { width: 5px !important; min-width: 5px !important; height: 5px !important; } body[data-page="home"] .dm-home-hero .dx-hero-dot.is-active, body[data-page="home"] .dm-home-hero .dx-hero-dot.dm-force-white-active { width: 18px !important; } } /* ========================================================= DIASTOMY HEADER SEARCH POLISH V1 rounder search, slimmer height, cleaner bell icon ========================================================= */ @media (max-width: 767px) { /* کل ردیف هدر */ body[data-page="home"] .dm-home-shell-v3 { width: calc(100% - 24px) !important; max-width: 440px !important; margin: 8px auto 6px !important; } body[data-page="home"] .dm-home-topbar-v3 { height: 44px !important; min-height: 44px !important; } body[data-page="home"] .dm-mobile-header-v7.dmh8-glass { height: 44px !important; min-height: 44px !important; gap: 8px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* منو */ body[data-page="home"] .dmh8-menu { width: 38px !important; min-width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 12px !important; background: rgba(255,255,255,.03) !important; border: 0 !important; box-shadow: none !important; } /* سرچ: لاغرتر + گردتر */ body[data-page="home"] .dmh7-search.dmh8-search-pill { height: 36px !important; min-height: 36px !important; padding: 0 16px !important; border-radius: 17px !important; border: 0 !important; background: linear-gradient( 135deg, rgba(39,42,50,.60), rgba(20,21,27,.42) ) !important; -webkit-backdrop-filter: blur(18px) saturate(145%) !important; backdrop-filter: blur(18px) saturate(145%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important; } body[data-page="home"] .dmh7-search.dmh8-search-pill svg, body[data-page="home"] .dmh7-search.dmh8-search-pill i { width: 18px !important; height: 18px !important; } body[data-page="home"] .dmh7-search.dmh8-search-pill > span, body[data-page="home"] .dmh7-search.dmh8-search-pill input, body[data-page="home"] .dmh7-search.dmh8-search-pill .placeholder { font-size: 12.5px !important; color: rgba(255,255,255,.56) !important; } /* نوتیف */ body[data-page="home"] .dmh7-notification.dmh8-icon { position: relative !important; width: 38px !important; min-width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 12px !important; background: rgba(255,255,255,.03) !important; border: 0 !important; box-shadow: none !important; overflow: hidden !important; } /* آیکون قبلی مخفی */ body[data-page="home"] .dmh7-notification.dmh8-icon svg, body[data-page="home"] .dmh7-notification.dmh8-icon i, body[data-page="home"] .dmh7-notification.dmh8-icon img { opacity: 0 !important; visibility: hidden !important; } /* آیکون Bell جدید */ body[data-page="home"] .dmh7-notification.dmh8-icon::before { content: "" !important; position: absolute !important; inset: 0 !important; margin: auto !important; width: 19px !important; height: 19px !important; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 17h5l-1.405-1.405A2.03 2.03 0 0 1 18 14.158V11a6.002 6.002 0 0 0-4-5.659V4a2 2 0 1 0-4 0v1.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 17a3 3 0 0 0 6 0' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; pointer-events: none !important; z-index: 2 !important; } /* نقطه نوتیف اگر badge وجود دارد */ body[data-page="home"] .dmh7-notification.dmh8-icon .badge, body[data-page="home"] .dmh7-notification.dmh8-icon .notification-badge, body[data-page="home"] .dmh7-notification.dmh8-icon [data-badge] { position: absolute !important; top: 5px !important; right: 5px !important; z-index: 4 !important; } /* پروفایل */ body[data-page="home"] .dmh8-profile { width: 38px !important; min-width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 12px !important; background: rgba(255,255,255,.03) !important; border: 0 !important; box-shadow: none !important; } } /* ========================================================= DIASTOMY MOBILE HERO BUTTONS V10 Play + Movie Information ========================================================= */ @media (max-width: 767px) { /* PLAY — red primary button */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-details-cta { display: inline-flex !important; position: absolute !important; left: 18px !important; right: auto !important; top: auto !important; bottom: 18px !important; width: 82px !important; min-width: 82px !important; height: 30px !important; padding: 0 18px !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 999px !important; background: #ed1c24 !important; color: #fff !important; font-family: inherit !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .05px !important; box-shadow: 0 5px 14px rgba(237,28,36,.24) !important; z-index: 30 !important; } /* INFO — secondary square button */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play { display: inline-flex !important; position: absolute !important; left: 106px !important; right: auto !important; top: auto !important; bottom: 18px !important; width: 30px !important; min-width: 30px !important; height: 30px !important; padding: 0 !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; border: 1px solid rgba(255,255,255,.17) !important; background: rgba(18,20,24,.63) !important; color: #fff !important; -webkit-backdrop-filter: blur(12px) saturate(145%) !important; backdrop-filter: blur(12px) saturate(145%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 13px rgba(0,0,0,.18) !important; z-index: 31 !important; } /* New information icon */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play svg { display: block !important; visibility: visible !important; opacity: 1 !important; width: 16px !important; height: 16px !important; color: #fff !important; flex: none !important; } /* icon-only button on mobile */ body[data-page="home"] .dm-home-hero .dx-hero-play > span { display: none !important; } /* side slides still show no controls */ body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-details-cta, body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-play { display: none !important; } } /* ========================================================= DIASTOMY HERO INFO BUTTON NO BOX V11 no border / no box / new icon ========================================================= */ @media (max-width: 767px) { /* red Play button stays the same */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-details-cta { left: 18px !important; bottom: 18px !important; width: 82px !important; min-width: 82px !important; height: 30px !important; padding: 0 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; z-index: 30 !important; } /* INFO button — no box */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; position: absolute !important; left: 110px !important; right: auto !important; top: auto !important; bottom: 18px !important; width: auto !important; min-width: 0 !important; height: 30px !important; padding: 0 2px !important; margin: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(255,255,255,.96) !important; text-decoration: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; z-index: 31 !important; } /* new icon */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play svg { width: 15px !important; height: 15px !important; display: block !important; visibility: visible !important; opacity: 1 !important; color: #fff !important; flex: none !important; } /* text */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play > span { display: inline !important; visibility: visible !important; opacity: 1 !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1 !important; color: rgba(255,255,255,.94) !important; letter-spacing: .02em !important; } /* remove old box behavior if any previous patch left it */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play::before, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play::after { box-shadow: none !important; background: none !important; border: 0 !important; } /* no controls on side slides */ body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-play { display: none !important; } } /* ========================================================= DIASTOMY HERO BUTTONS CLEAN FIX V12 ========================================================= */ @media (max-width: 767px) { /* ---------- PLAY ---------- */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-details-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; left: 18px !important; right: auto !important; top: auto !important; bottom: 17px !important; width: 78px !important; min-width: 78px !important; height: 29px !important; padding: 0 17px !important; margin: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 999px !important; background: #ed1c24 !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 5px 13px rgba(237,28,36,.25) !important; transform: none !important; z-index: 30 !important; } /* ---------- DETAILS ---------- */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; position: absolute !important; left: 108px !important; right: auto !important; top: auto !important; bottom: 17px !important; width: auto !important; min-width: 0 !important; height: 29px !important; gap: 5px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; color: #fff !important; transform: none !important; z-index: 31 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play svg { display: block !important; visibility: visible !important; opacity: 1 !important; width: 16px !important; height: 16px !important; flex: 0 0 16px !important; color: rgba(255,255,255,.95) !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play > span { display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; color: rgba(255,255,255,.92) !important; } /* پاک کردن اثر پچ‌های قبلی */ body[data-page="home"] .dm-home-hero .dx-hero-play::before, body[data-page="home"] .dm-home-hero .dx-hero-play::after { content: none !important; display: none !important; } /* فقط اسلاید وسط کنترل داشته باشد */ body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-details-cta, body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-play { display: none !important; } } /* ========================================================= DIASTOMY HERO DETAILS OVERLAY V13 Details button opens animated info panel on same poster ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- Buttons layout ----------------------------------------------------- */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-details-cta { left: 18px !important; bottom: 17px !important; width: 78px !important; min-width: 78px !important; height: 29px !important; padding: 0 17px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; z-index: 32 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; position: absolute !important; left: 108px !important; right: auto !important; top: auto !important; bottom: 17px !important; width: auto !important; min-width: 0 !important; height: 29px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(255,255,255,.95) !important; text-decoration: none !important; cursor: pointer !important; user-select: none !important; -webkit-tap-highlight-color: transparent !important; z-index: 33 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play svg { width: 15px !important; height: 15px !important; color: #fff !important; flex: 0 0 15px !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play > span { display: inline-block !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; color: rgba(255,255,255,.93) !important; } /* ----------------------------------------------------- Details overlay panel ----------------------------------------------------- */ body[data-page="home"] .dm-home-hero .dx-hero-card { position: relative !important; overflow: hidden !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-panel { position: absolute !important; inset: 0 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-start !important; padding: 16px 16px 14px !important; margin: 0 !important; border-radius: inherit !important; background: linear-gradient( 180deg, rgba(5,8,12,.10) 0%, rgba(5,8,12,.32) 28%, rgba(5,8,12,.82) 72%, rgba(5,8,12,.95) 100% ) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(16px) scale(.985) !important; transition: opacity .26s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility .26s ease !important; z-index: 40 !important; } body[data-page="home"] .dm-home-hero .dx-hero-card.is-details-open .dx-hero-details-panel { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; } /* وقتی پنل باز شد، المان‌های قبلی fade شوند */ body[data-page="home"] .dm-home-hero .dx-hero-card.is-details-open .dx-hero-info, body[data-page="home"] .dm-home-hero .dx-hero-card.is-details-open .dx-hero-details-cta, body[data-page="home"] .dm-home-hero .dx-hero-card.is-details-open .dx-hero-play, body[data-page="home"] .dm-home-hero .dx-hero-card.is-details-open .dx-hero-dots { opacity: 0 !important; transition: opacity .18s ease !important; pointer-events: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-inner { width: 100% !important; max-width: 100% !important; color: #fff !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-kicker { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: rgba(255,255,255,.72) !important; margin-bottom: 5px !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-title { margin: 0 0 7px !important; padding: 0 !important; font-size: 19px !important; line-height: 1.08 !important; font-weight: 800 !important; color: #fff !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-meta { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 0 9px !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-meta span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 22px !important; padding: 0 8px !important; border-radius: 999px !important; background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.92) !important; font-size: 10.5px !important; font-weight: 600 !important; line-height: 1 !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-summary { margin: 0 !important; padding: 0 !important; font-size: 11.5px !important; line-height: 1.52 !important; color: rgba(255,255,255,.90) !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-close { position: absolute !important; top: 10px !important; right: 10px !important; width: 26px !important; min-width: 26px !important; height: 26px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; outline: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.10) !important; color: #fff !important; font-size: 18px !important; line-height: 1 !important; cursor: pointer !important; z-index: 45 !important; } /* side slides no details controls */ body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-play, body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-details-panel { display: none !important; } } /* ========================================================= DIASTOMY HERO DETAILS OVERLAY V15 FINAL ========================================================= */ @media (max-width: 767px) { /* ---------- Details trigger ---------- */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; position: absolute !important; left: 108px !important; right: auto !important; top: auto !important; bottom: 17px !important; width: auto !important; min-width: 0 !important; height: 29px !important; padding: 0 !important; margin: 0 !important; gap: 5px !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #fff !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent !important; z-index: 38 !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play svg { display: block !important; width: 16px !important; min-width: 16px !important; height: 16px !important; opacity: .96 !important; color: #fff !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-play > span { display: inline-block !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; color: rgba(255,255,255,.94) !important; } /* ---------- Overlay ---------- */ body[data-page="home"] .dm-home-hero .dx-hero-card { position: relative !important; isolation: isolate !important; overflow: hidden !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-panel { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: flex-end !important; box-sizing: border-box !important; padding: 18px 18px 16px !important; border-radius: inherit !important; background: linear-gradient( 180deg, rgba(5,7,10,.26) 0%, rgba(5,7,10,.52) 30%, rgba(5,7,10,.88) 70%, rgba(5,7,10,.97) 100% ) !important; -webkit-backdrop-filter: blur(12px) saturate(118%) !important; backdrop-filter: blur(12px) saturate(118%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate3d(0, 15px, 0) scale(.985) !important; transition: opacity .24s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s !important; z-index: 100 !important; } /* OPEN */ body[data-page="home"] .dm-home-hero .dx-hero-card.is-details-open .dx-hero-details-panel { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate3d(0,0,0) scale(1) !important; transition: opacity .24s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s !important; } /* ---------- Content animation ---------- */ body[data-page="home"] .dm-home-hero .dx-hero-details-inner { width: 100% !important; opacity: 0 !important; transform: translate3d(0,10px,0) !important; transition: opacity .24s ease .07s, transform .32s cubic-bezier(.22,1,.36,1) .05s !important; } body[data-page="home"] .dm-home-hero .dx-hero-card.is-details-open .dx-hero-details-inner { opacity: 1 !important; transform: translate3d(0,0,0) !important; } /* ---------- Text ---------- */ body[data-page="home"] .dm-home-hero .dx-hero-details-kicker { display: block !important; margin-bottom: 4px !important; color: rgba(255,255,255,.62) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-title { margin: 0 0 7px !important; padding: 0 !important; color: #fff !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.05 !important; text-align: left !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-meta { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 5px !important; margin-bottom: 8px !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-meta > span { display: inline-flex !important; align-items: center !important; min-height: 20px !important; padding: 0 7px !important; border-radius: 999px !important; background: rgba(255,255,255,.09) !important; color: rgba(255,255,255,.88) !important; font-size: 9.5px !important; line-height: 1 !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-rating { color: #ffd65a !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-summary { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.78) !important; font-size: 10.5px !important; line-height: 1.5 !important; text-align: left !important; } /* ---------- Close button ---------- */ body[data-page="home"] .dm-home-hero .dx-hero-details-close { position: absolute !important; top: 11px !important; right: 11px !important; width: 27px !important; min-width: 27px !important; height: 27px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.10) !important; color: #fff !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; z-index: 110 !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-close svg { width: 13px !important; height: 13px !important; } /* Side cards cannot open overlay */ body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-play, body[data-page="home"] .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-details-panel { display: none !important; } } /* * 4 cards exactly. * Splide mobile gap = .25rem (4px) * 3 gaps = 12px */ body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide { width: calc((100% - 12px) / 4) !important; min-width: calc((100% - 12px) / 4) !important; max-width: calc((100% - 12px) / 4) !important; flex: 0 0 calc((100% - 12px) / 4) !important; } /* * کارت قبلاً برای عرض 151px ارتفاع 215px داشت. * با 4 کارت، ارتفاع پوستر هم متناسب می‌شود. */ body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a > div:first-child { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; border-radius: 10px !important; margin-bottom: 7px !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a > div:first-child img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 10px !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide h3 { font-size: 11px !important; line-height: 1.35 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 2px !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide a > div:last-child > div > span { font-size: 10px !important; } } /* ========================================================== DIASTOMY LATEST SERIES EXACT FOUR — V3 ========================================================== */ @media (max-width: 767px) { /* * فقط بخش تازه‌ترین سریال‌ها */ body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) { padding-left: 20px !important; padding-right: 20px !important; overflow: hidden !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider { width: 100% !important; overflow: hidden !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__track { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__list { display: flex !important; gap: 4px !important; padding: 0 !important; margin: 0 !important; } /* * عرض نهایی را JS تعیین می‌کند. * margin خود Splide حذف می‌شود تا محاسبه دقیق باشد. */ body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide { margin-left: 0 !important; margin-right: 0 !important; min-width: 0; box-sizing: border-box !important; } /* ============================= POSTER ============================= */ body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a { display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a > div:first-child { position: relative !important; width: 100% !important; height: auto !important; /* * نسبت اصلی کارت قبلی: * 151 × 215 */ aspect-ratio: 151 / 215 !important; overflow: hidden !important; margin-bottom: 8px !important; border-radius: 11px !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a > div:first-child img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 11px !important; } /* ============================= TEXT AREA ============================= */ body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a > div:last-child { width: 100% !important; min-width: 0 !important; padding: 0 1px !important; text-align: right !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide h3 { display: block !important; width: 100% !important; margin: 0 0 4px !important; padding: 0 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: right !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #fff !important; } /* * Genre + IMDb در یک خط */ body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a > div:last-child > div { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-width: 0 !important; gap: 3px !important; } /* * separator موبایل قبلی */ body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide .w-\[1px\] { display: none !important; } /* Genre */ body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a > div:last-child > div > span { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.3 !important; color: rgba(255,255,255,.78) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* IMDb */ body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a > div:last-child > div > div:last-child { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; gap: 2px !important; width: auto !important; min-width: 0 !important; height: 20px !important; margin: 0 !important; padding: 0 5px !important; border: 0 !important; border-radius: 999px !important; background: #292b33 !important; position: static !important; transform: none !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a > div:last-child > div > div:last-child svg { width: 9px !important; height: 9px !important; flex: 0 0 9px !important; } body[data-page="home"] :is(.dm-latest-series-section, .dm-trending-movies-section, .dm-dubbed-section) .movie-slider .splide__slide > a > div:last-child > div > div:last-child span { padding: 0 !important; font-size: 9px !important; line-height: 1 !important; color: #fff !important; white-space: nowrap !important; } } /* ========================================================= DIASTOMY ROUND 6 V3 — MOBILE HERO ARROWS OFF User request: keep desktop arrows, remove only main hero arrows on mobile. ========================================================= */ @media (max-width: 767px) { body[data-page="home"] .dm-home-hero > .dm-hero-arrow, body[data-page="home"] .dm-home-hero .dm-hero-arrow--left, body[data-page="home"] .dm-home-hero .dm-hero-arrow--right { display: none !important; visibility: hidden !important; pointer-events: none !important; } } /* /static/public/assets/css/home-micro-polish-v1.css */ /* ========================================================= DIASTOMY HOME MICRO POLISH V1 Goal: keep existing layout, refine glass/depth/motion/touch UX. Loaded last on Home so this file owns the final visual polish. ========================================================= */ body[data-page="home"] { --dm-glass-surface: rgba(255,255,255,.050); --dm-glass-surface-strong: rgba(24,26,31,.62); --dm-glass-border: rgba(255,255,255,.085); --dm-glass-highlight: rgba(255,255,255,.055); --dm-glass-shadow: 0 10px 30px rgba(0,0,0,.24); --dm-glass-blur: 14px; --dm-ease-out: cubic-bezier(.22,1,.36,1); --dm-fast: 170ms; --dm-medium: 310ms; --dm-hero-motion: 410ms; } /* ---------- shared interaction language ---------- */ body[data-page="home"] a, body[data-page="home"] button { -webkit-tap-highlight-color: transparent; } body[data-page="home"] .dm-home-view-all, body[data-page="home"] .dm-home-slider-arrow { border: 1px solid var(--dm-glass-border) !important; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important; box-shadow: inset 0 1px 0 var(--dm-glass-highlight), 0 8px 24px rgba(0,0,0,.18) !important; -webkit-backdrop-filter: blur(var(--dm-glass-blur)) saturate(125%) !important; backdrop-filter: blur(var(--dm-glass-blur)) saturate(125%) !important; transition: transform var(--dm-fast) var(--dm-ease-out), background-color var(--dm-fast) ease, border-color var(--dm-fast) ease, box-shadow var(--dm-fast) ease, opacity var(--dm-fast) ease !important; } body[data-page="home"] .dm-home-view-all:active, body[data-page="home"] .dm-home-slider-arrow:not(:disabled):active { transform: translateY(1px) scale(.965) !important; } body[data-page="home"] .dm-home-slider-arrow:disabled { opacity: .28 !important; box-shadow: none !important; } body[data-page="home"] :is(a, button):focus-visible { outline: 2px solid rgba(255,255,255,.78) !important; outline-offset: 3px !important; } @media (hover:hover) and (pointer:fine) { body[data-page="home"] .dm-home-view-all:hover, body[data-page="home"] .dm-home-slider-arrow:not(:disabled):hover { border-color: rgba(255,255,255,.15) !important; background: linear-gradient(145deg, rgba(237,28,36,.74), rgba(130,12,18,.60)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 28px rgba(237,28,36,.16) !important; transform: translateY(-1px) !important; } } /* ---------- hero: same geometry, cleaner depth + matched motion ---------- */ body[data-page="home"] .dm-home-hero .dx-hero-slide { transition: transform var(--dm-hero-motion) var(--dm-ease-out), opacity 250ms ease !important; will-change: transform, opacity !important; } body[data-page="home"] .dm-home-hero .dx-hero-card { border: 1px solid rgba(255,255,255,.065) !important; box-shadow: 0 12px 32px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035) !important; transform: translateZ(0); } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next .dx-hero-card { border-color: rgba(255,255,255,.045) !important; box-shadow: 0 7px 22px rgba(0,0,0,.19) !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-cta { transition: transform var(--dm-fast) var(--dm-ease-out), box-shadow var(--dm-fast) ease, filter var(--dm-fast) ease !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-cta:active { transform: translateY(1px) scale(.96) !important; filter: brightness(.94) !important; } body[data-page="home"] .dm-home-hero .dx-hero-play { transition: opacity var(--dm-fast) ease, color var(--dm-fast) ease, transform var(--dm-fast) var(--dm-ease-out) !important; } body[data-page="home"] .dm-home-hero .dx-hero-play:active { transform: translateY(1px) scale(.965) !important; opacity: .78 !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-panel { transition: opacity 240ms ease, transform var(--dm-medium) var(--dm-ease-out), visibility 0s linear var(--dm-medium) !important; } body[data-page="home"] .dm-home-hero .dx-hero-card.is-details-open .dx-hero-details-panel { transition: opacity 240ms ease, transform var(--dm-medium) var(--dm-ease-out), visibility 0s !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-close { border: 1px solid rgba(255,255,255,.09) !important; background: rgba(17,19,23,.48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.22) !important; transition: transform var(--dm-fast) var(--dm-ease-out), background-color var(--dm-fast) ease !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-close:active { transform: scale(.90) !important; background: rgba(255,255,255,.14) !important; } /* ---------- standard cards: subtle edge + calmer metadata ---------- */ body[data-page="home"] .dm-standard-card .dm-card-poster { border: 1px solid rgba(255,255,255,.055) !important; box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025) !important; transform: translateZ(0); } body[data-page="home"] .dm-standard-card .dm-card-poster img { transition: transform 430ms var(--dm-ease-out), filter 250ms ease !important; } body[data-page="home"] .dm-standard-card .dm-card-title { color: rgba(255,255,255,.96) !important; transition: color var(--dm-fast) ease !important; } body[data-page="home"] .dm-standard-card .dm-card-genres { color: rgba(255,255,255,.58) !important; } body[data-page="home"] .dm-standard-card .dm-card-rating { background: rgba(13,14,17,.72) !important; border: 1px solid rgba(255,255,255,.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.24) !important; -webkit-backdrop-filter: blur(8px) saturate(115%) !important; backdrop-filter: blur(8px) saturate(115%) !important; } body[data-page="home"] .dm-subtitle-badge { position: absolute !important; top: 6px !important; right: 6px !important; left: auto !important; bottom: auto !important; z-index: 30 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 20px !important; margin: 0 !important; padding: 4px 7px !important; border-radius: 7px !important; white-space: nowrap !important; line-height: 1 !important; pointer-events: none !important; -webkit-backdrop-filter: blur(8px) saturate(120%) !important; backdrop-filter: blur(8px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 5px 14px rgba(0,0,0,.20) !important; } body[data-page="home"] .dm-subtitle-badge--yes { color: rgba(255,255,255,.96) !important; background: rgba(7,112,78,.78) !important; border: 1px solid rgba(92,240,183,.18) !important; } body[data-page="home"] .dm-subtitle-badge--no { color: rgba(255,255,255,.60) !important; background: rgba(12,13,16,.66) !important; border: 1px solid rgba(255,255,255,.07) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } /* ---------- continue watching ---------- */ body[data-page="home"] .dm-continue-poster { border-color: rgba(255,255,255,.06) !important; box-shadow: 0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025) !important; } body[data-page="home"] .dm-continue-play { width: 40px !important; height: 40px !important; background: rgba(10,11,14,.46) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 22px rgba(0,0,0,.22) !important; -webkit-backdrop-filter: blur(10px) saturate(125%) !important; backdrop-filter: blur(10px) saturate(125%) !important; transition: transform var(--dm-fast) var(--dm-ease-out), background-color var(--dm-fast) ease, border-color var(--dm-fast) ease !important; } body[data-page="home"] .dm-continue-progress { height: 3px !important; background: rgba(255,255,255,.14) !important; } body[data-page="home"] .dm-continue-progress-label { bottom: 8px !important; right: 8px !important; padding: 4px 7px !important; color: rgba(255,255,255,.82) !important; background: rgba(9,10,12,.58) !important; border: 1px solid rgba(255,255,255,.065) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important; -webkit-backdrop-filter: blur(8px) saturate(115%) !important; backdrop-filter: blur(8px) saturate(115%) !important; } /* ---------- actors ---------- */ body[data-page="home"] .dm-actor-avatar { border-width: 1px !important; border-color: rgba(255,255,255,.26) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.18) !important; transition: transform 240ms var(--dm-ease-out), border-color 180ms ease, box-shadow 220ms ease !important; } @media (hover:hover) and (pointer:fine) { body[data-page="home"] .dm-actor-card:hover .dm-actor-avatar { transform: translateY(-2px) scale(1.025); border-color: rgba(237,28,36,.72) !important; box-shadow: 0 10px 28px rgba(0,0,0,.24), 0 0 18px rgba(237,28,36,.16) !important; } } /* ---------- advanced search card ---------- */ body[data-page="home"] .dm-home-advanced-card { border-color: var(--dm-glass-border) !important; background: radial-gradient(170px 120px at 100% 0%, rgba(224,37,48,.11), transparent 72%), linear-gradient(145deg, rgba(31,32,37,.68), rgba(9,10,12,.70)) !important; box-shadow: var(--dm-glass-shadow), inset 0 1px 0 var(--dm-glass-highlight) !important; -webkit-backdrop-filter: blur(16px) saturate(122%) !important; backdrop-filter: blur(16px) saturate(122%) !important; } body[data-page="home"] .dm-home-advanced-toggle { transition: transform var(--dm-fast) var(--dm-ease-out), background-color var(--dm-fast) ease !important; } body[data-page="home"] .dm-home-advanced-toggle:active { transform: scale(.985) !important; } /* ---------- Search overlay: transparent layered glass, not a second black page ---------- */ @media (max-width: 767px) { body[data-page="home"] .dm-search-overlay-v1 { background: rgba(6,7,9,.88) !important; -webkit-backdrop-filter: blur(18px) saturate(112%) !important; backdrop-filter: blur(18px) saturate(112%) !important; transform: translate3d(0, 10px, 0) scale(.995) !important; transition: opacity 260ms ease, transform 300ms var(--dm-ease-out), visibility 260ms ease !important; } body[data-page="home"] .dm-search-overlay-v1.is-open { transform: translate3d(0,0,0) scale(1) !important; } body[data-page="home"] .dmso-search-row { background: linear-gradient(180deg, rgba(6,7,9,.96) 58%, rgba(6,7,9,.72) 82%, rgba(6,7,9,0)) !important; -webkit-backdrop-filter: blur(12px) saturate(115%) !important; backdrop-filter: blur(12px) saturate(115%) !important; } body[data-page="home"] .dmso-search-box { height: 48px !important; padding: 0 14px !important; border: 1px solid rgba(255,255,255,.075) !important; border-radius: 16px !important; background: rgba(255,255,255,.045) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important; } body[data-page="home"] .dmso-search-input { height: 46px !important; font-size: 16px !important; } body[data-page="home"] .dmso-close { border-color: rgba(255,255,255,.08) !important; background: rgba(255,255,255,.055) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 22px rgba(0,0,0,.18) !important; -webkit-backdrop-filter: blur(12px) saturate(120%) !important; backdrop-filter: blur(12px) saturate(120%) !important; transition: transform var(--dm-fast) var(--dm-ease-out), background-color var(--dm-fast) ease !important; } body[data-page="home"] .dmso-chip { border-color: rgba(255,255,255,.105) !important; background: rgba(255,255,255,.045) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; transition: transform var(--dm-fast) var(--dm-ease-out), background-color var(--dm-fast) ease, color var(--dm-fast) ease, border-color var(--dm-fast) ease !important; } body[data-page="home"] .dmso-chip.is-active { color: #0b0c0e !important; background: rgba(255,255,255,.94) !important; border-color: rgba(255,255,255,.94) !important; box-shadow: 0 6px 18px rgba(0,0,0,.16) !important; } body[data-page="home"] .dmso-poster { border: 1px solid rgba(255,255,255,.055) !important; box-shadow: 0 9px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.025) !important; } /* Header glass: keep exact current geometry, only refine material + feedback. */ body[data-page="home"] :is(.dmh8-menu, .dmh7-notification.dmh8-icon, .dmh8-profile) { position: relative !important; overflow: visible !important; border: 1px solid rgba(255,255,255,.065) !important; background: linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.018)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 7px 20px rgba(0,0,0,.14) !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; backdrop-filter: blur(12px) saturate(125%) !important; transition: transform var(--dm-fast) var(--dm-ease-out), background-color var(--dm-fast) ease, border-color var(--dm-fast) ease !important; } body[data-page="home"] .dmh7-search.dmh8-search-pill { position: relative !important; overflow: visible !important; border: 1px solid rgba(255,255,255,.07) !important; background: linear-gradient(135deg, rgba(40,43,51,.54), rgba(18,20,25,.40)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 22px rgba(0,0,0,.13) !important; -webkit-backdrop-filter: blur(14px) saturate(132%) !important; backdrop-filter: blur(14px) saturate(132%) !important; transition: transform var(--dm-fast) var(--dm-ease-out), border-color var(--dm-fast) ease, background-color var(--dm-fast) ease !important; } body[data-page="home"] :is(.dmh8-menu, .dmh7-notification.dmh8-icon, .dmh8-profile, .dmh7-search.dmh8-search-pill):active { transform: translateY(1px) scale(.965) !important; border-color: rgba(255,255,255,.11) !important; } /* Keep 38/36px visuals, expand the invisible touch area toward 44px. */ body[data-page="home"] .dmh8-menu::after, body[data-page="home"] .dmh8-profile::after, body[data-page="home"] .dmh7-search.dmh8-search-pill::after { content: ""; position: absolute; inset: -4px; background: transparent; border-radius: inherit; } /* Notification already uses ::before for the bell, so ::after is free for hit-area. */ body[data-page="home"] .dmh7-notification.dmh8-icon::after { content: "" !important; position: absolute !important; inset: -4px !important; background: transparent !important; border: 0 !important; border-radius: inherit !important; box-shadow: none !important; } body[data-page="home"] .dmh7-notification .dmh7-badge { top: -3px !important; right: -3px !important; z-index: 8 !important; box-shadow: 0 0 0 2px rgba(5,6,8,.92), 0 4px 10px rgba(0,0,0,.22) !important; } /* Mobile Hero: no ambient blur layer; poster/side-peek remains unchanged. */ body[data-page="home"] .dx-hero-ambient { display: none !important; } /* Make tiny controls easier to hit without making them look larger. */ body[data-page="home"] .dm-home-hero .dx-hero-details-close::after { content: ""; position: absolute; inset: -8px; border-radius: 999px; } body[data-page="home"] .dm-home-hero .dx-hero-slide.is-active .dx-hero-details-cta { box-shadow: 0 6px 16px rgba(237,28,36,.22), inset 0 1px 0 rgba(255,255,255,.10) !important; } body[data-page="home"] .dm-home-hero .dx-hero-details-panel { -webkit-backdrop-filter: blur(9px) saturate(112%) !important; backdrop-filter: blur(9px) saturate(112%) !important; } /* Four-card mobile rows: retain exact count, simplify visual noise. */ body[data-page="home"] .dm-standard-card .dm-card-poster { border-radius: 11px !important; box-shadow: 0 7px 18px rgba(0,0,0,.19), inset 0 1px 0 rgba(255,255,255,.025) !important; } body[data-page="home"] .dm-standard-card .dm-card-genres { color: rgba(255,255,255,.56) !important; } body[data-page="home"] .dm-subtitle-badge { top: 5px !important; right: 5px !important; min-height: 18px !important; padding: 3px 5px !important; border-radius: 6px !important; font-size: 7px !important; } body[data-page="home"] .dm-continue-play { width: 36px !important; height: 36px !important; } body[data-page="home"] .dm-continue-play svg { width: 17px !important; height: 17px !important; } body[data-page="home"] .dm-continue-progress-label { font-size: 8.5px !important; border-radius: 999px !important; } body[data-page="home"] .dm-home-view-all, body[data-page="home"] .dm-home-continue-all { min-height: 36px !important; padding: 7px 10px !important; border-radius: 11px !important; color: rgba(255,255,255,.72) !important; font-size: 11px !important; font-weight: 500 !important; } /* A steadier heading/content rhythm without moving sections around. */ body[data-page="home"] :is(.dm-trending-movies-section, .dm-latest-series-section, .dm-dubbed-section, .dm-continue-section) > div:first-child { margin-bottom: 16px !important; } } /* ---------- desktop micro-interactions ---------- */ @media (min-width: 768px) { body[data-page="home"] .dm-home-view-all { min-height: 44px; padding-inline: 16px !important; } body[data-page="home"] .dm-home-slider-arrow { border-radius: 999px !important; } body[data-page="home"] .dm-continue-play { width: 46px !important; height: 46px !important; } } /* ---------- accessibility / low motion ---------- */ @media (prefers-reduced-motion: reduce) { body[data-page="home"] *, body[data-page="home"] *::before, body[data-page="home"] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- half-price editorial: same composition, shared glass language ---------- */ body[data-page="home"] .hp-stack-card { transition: transform 500ms var(--dm-ease-out), opacity 300ms ease, filter 300ms ease !important; } body[data-page="home"] .hp-stack-card-link { border-color: rgba(255,255,255,.085) !important; box-shadow: 0 18px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.055) !important; } body[data-page="home"] :is(.hp-stack-card-saving, .hp-stack-quality, .hp-stack-pill) { border-color: rgba(255,255,255,.085) !important; background: rgba(10,11,14,.50) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 6px 16px rgba(0,0,0,.14) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; } body[data-page="home"] .hp-stack-dot { background: rgba(255,255,255,.20) !important; transition: width 240ms var(--dm-ease-out), background-color 180ms ease, box-shadow 180ms ease !important; } body[data-page="home"] .hp-stack-dot.is-active { width: 23px !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 0 10px rgba(255,255,255,.16) !important; } body[data-page="home"] .hp-stack-all { min-height: 36px; padding: 0 11px; border: 1px solid var(--dm-glass-border); border-radius: 11px; color: rgba(255,255,255,.70); background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 var(--dm-glass-highlight); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); transition: transform var(--dm-fast) var(--dm-ease-out), color var(--dm-fast) ease, border-color var(--dm-fast) ease, background-color var(--dm-fast) ease; } body[data-page="home"] .hp-stack-all:active { transform: translateY(1px) scale(.965); } @media (hover:hover) and (pointer:fine) { body[data-page="home"] .hp-stack-all:hover { color: #fff; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.075); transform: translateY(-1px); } } /* /static/public/assets/css/home-micro-polish-v2.css */ /* ========================================================= DIASTOMY HOME MICRO POLISH V2 Small cleanup pass: remove subtitle poster tags and tighten excess spacing between homepage boxes/sections. ========================================================= */ /* Remove the subtitle sticker from homepage posters entirely. */ body[data-page="home"] .dm-subtitle-badge { display: none !important; } /* Tighten poster/meta spacing a little without changing card design. */ body[data-page="home"] .dm-standard-card .dm-card-poster, body[data-page="home"] .dm-continue-card .dm-continue-poster { margin-bottom: 6px !important; } body[data-page="home"] .dm-standard-card .dm-card-info { gap: 6px !important; } /* Reduce extra spacing between major homepage boxes/sections. */ body[data-page="home"] .dm-trending-movies-section, body[data-page="home"] .dm-continue-section, body[data-page="home"] .hp-slider-section, body[data-page="home"] .dm-fresh-series-section, body[data-page="home"] .dm-dubbed-section, body[data-page="home"] .dm-home-actors-section { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 22px !important; padding-bottom: 22px !important; } body[data-page="home"] .dm-trending-movies-section { margin-bottom: 12px !important; } body[data-page="home"] .dm-home-advanced-wrap { gap: 14px !important; margin-top: 8px !important; padding-top: 2px !important; padding-bottom: 10px !important; } body[data-page="home"] :is(.dm-trending-movies-section, .dm-continue-section, .hp-slider-section, .dm-fresh-series-section, .dm-dubbed-section, .dm-home-actors-section) > div:first-child { margin-bottom: 12px !important; } /* Suggested series and actor rail: slightly tighter card gaps. */ body[data-page="home"] .hp-movie-slider .splide__slide > .grid { gap: 10px !important; } body[data-page="home"] #actor-list { gap: 12px !important; padding-bottom: 14px !important; } /* Slightly denser view-all row on mobile to help sections sit closer together. */ @media (max-width: 767px) { body[data-page="home"] .dm-home-view-all, body[data-page="home"] .dm-home-continue-all, body[data-page="home"] .hp-stack-all { margin: 0 !important; } body[data-page="home"] .dm-trending-movies-section, body[data-page="home"] .dm-continue-section, body[data-page="home"] .hp-slider-section, body[data-page="home"] .dm-fresh-series-section, body[data-page="home"] .dm-dubbed-section, body[data-page="home"] .dm-home-actors-section { padding-top: 18px !important; padding-bottom: 18px !important; } body[data-page="home"] .dm-home-advanced-wrap { gap: 12px !important; margin-top: 6px !important; padding-bottom: 8px !important; } body[data-page="home"] .dm-trending-movies-section > div:first-child, body[data-page="home"] .dm-continue-section > div:first-child, body[data-page="home"] .hp-slider-section > div:first-child, body[data-page="home"] .dm-fresh-series-section > div:first-child, body[data-page="home"] .dm-dubbed-section > div:first-child, body[data-page="home"] .dm-home-actors-section > div:first-child { margin-bottom: 10px !important; } body[data-page="home"] .hp-movie-slider .splide__slide > .grid { gap: 8px !important; } body[data-page="home"] #actor-list { gap: 10px !important; padding-bottom: 10px !important; } } @media (min-width: 768px) { body[data-page="home"] .dm-trending-movies-section, body[data-page="home"] .dm-continue-section, body[data-page="home"] .hp-slider-section, body[data-page="home"] .dm-fresh-series-section, body[data-page="home"] .dm-dubbed-section, body[data-page="home"] .dm-home-actors-section { padding-top: 26px !important; padding-bottom: 26px !important; } body[data-page="home"] #actor-list { gap: 14px !important; } } /* /static/public/assets/css/home-download-sheet-v8.css */ /* DIASTOMY HOME DOWNLOAD SHEET V8 Fixes Alpine x-show visibility conflict from V7. */ [x-cloak] { display: none !important; } html.dm-download-open-v7, body.dm-download-open-v7 { overflow: hidden !important; overscroll-behavior: none !important; } .dm-download-overlay-v7 { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; display: flex; align-items: flex-end !important; justify-content: center !important; isolation: isolate !important; padding: 0 !important; margin: 0 !important; } .dm-download-backdrop-v7 { position: absolute !important; inset: 0 !important; z-index: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: rgba(0, 0, 0, .84) !important; -webkit-backdrop-filter: blur(7px) !important; backdrop-filter: blur(7px) !important; } .dm-download-sheet-v7 { position: relative !important; z-index: 1 !important; width: 100% !important; max-width: 100% !important; max-height: min(70dvh, 650px) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; color: #fff !important; background: radial-gradient(120% 90% at 100% 0%, rgba(237,28,36,.08), transparent 42%), rgba(13,14,17,.985) !important; border: 1px solid rgba(255,255,255,.10) !important; border-bottom: 0 !important; border-radius: 28px 28px 0 0 !important; box-shadow: 0 -20px 65px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.045) !important; padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 8px) !important; -webkit-backdrop-filter: blur(22px) saturate(125%) !important; backdrop-filter: blur(22px) saturate(125%) !important; } .dm-download-handle-v7 { height: 19px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; } .dm-download-handle-v7 span { display: block !important; width: 38px !important; height: 4px !important; border-radius: 999px !important; background: rgba(255,255,255,.18) !important; } .dm-download-header-v7 { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 8px 16px 14px !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.075) !important; background: rgba(13,14,17,.90) !important; } .dm-download-heading-v7 { min-width: 0 !important; flex: 1 1 auto !important; text-align: right !important; } .dm-download-heading-v7 p { margin: 0 0 4px !important; color: #ed1c24 !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 800 !important; } .dm-download-heading-v7 h3 { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: rgba(255,255,255,.97) !important; font-size: 17px !important; line-height: 1.45 !important; font-weight: 750 !important; } .dm-download-close-v7 { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; color: #fff !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; transition: transform .16s cubic-bezier(.22,1,.36,1), background-color .16s ease !important; } .dm-download-close-v7:active { transform: scale(.92) !important; background: rgba(255,255,255,.10) !important; } .dm-download-body-v7 { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; padding: 12px 12px 16px !important; background: transparent !important; scrollbar-width: thin !important; scrollbar-color: rgba(255,255,255,.15) transparent !important; } .dm-download-body-v7::-webkit-scrollbar { width: 4px !important; } .dm-download-body-v7::-webkit-scrollbar-track { background: transparent !important; } .dm-download-body-v7::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15) !important; border-radius: 999px !important; } .dm-download-loading-v7 { min-height: 180px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; color: rgba(255,255,255,.45) !important; text-align: center !important; font-size: 13px !important; } .dm-download-options-v7 { display: block !important; width: 100% !important; } .dm-download-season-v7 { display: block !important; width: 100% !important; margin: 0 0 10px !important; overflow: hidden !important; box-sizing: border-box !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important; } .dm-download-season-v7:last-child { margin-bottom: 0 !important; } .dm-download-season-head-v7 { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 11px 13px !important; background: rgba(255,255,255,.026) !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.065) !important; } .dm-download-season-head-v7 strong { color: rgba(255,255,255,.96) !important; font-size: 13px !important; font-weight: 750 !important; } .dm-download-season-head-v7 span { color: rgba(255,255,255,.42) !important; font-size: 10px !important; white-space: nowrap !important; } .dm-download-episodes-v7 { display: block !important; } .dm-download-episode-v7 { min-height: 58px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 10px 13px !important; box-sizing: border-box !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.055) !important; } .dm-download-episode-v7:last-child { border-bottom: 0 !important; } .dm-download-episode-label-v7 { flex: 0 0 auto !important; color: rgba(255,255,255,.82) !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important; } .dm-download-quality-list-v7 { min-width: 0 !important; flex: 1 1 auto !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; } .dm-download-quality-v7 { min-height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 6px 11px !important; box-sizing: border-box !important; color: rgba(255,255,255,.94) !important; text-decoration: none !important; font-size: 11px !important; line-height: 1 !important; font-weight: 550 !important; white-space: nowrap !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.085) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; transition: transform .15s cubic-bezier(.22,1,.36,1), background-color .15s ease, border-color .15s ease !important; } .dm-download-quality-v7:active { transform: scale(.965) !important; background: rgba(237,28,36,.20) !important; border-color: rgba(237,28,36,.35) !important; } .dm-download-quality-v7 svg { flex: 0 0 auto !important; } .dm-download-empty-quality-v7 { color: rgba(255,255,255,.34) !important; font-size: 10px !important; } .dm-download-empty-v7 { padding: 42px 18px !important; color: rgba(255,255,255,.44) !important; text-align: center !important; font-size: 13px !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; } @media (max-width: 430px) { .dm-download-sheet-v7 { max-height: min(68dvh, 590px) !important; } .dm-download-header-v7 { padding-inline: 14px !important; } .dm-download-heading-v7 h3 { font-size: 16px !important; } .dm-download-body-v7 { padding: 10px 10px 14px !important; } .dm-download-episode-v7 { gap: 9px !important; padding: 9px 11px !important; } .dm-download-quality-list-v7 { gap: 5px !important; } .dm-download-quality-v7 { min-height: 32px !important; padding: 5px 9px !important; font-size: 10.5px !important; } } @media (min-width: 768px) { .dm-download-overlay-v7 { align-items: center !important; padding: 20px !important; } .dm-download-sheet-v7 { width: min(600px, calc(100vw - 40px)) !important; max-width: 600px !important; max-height: 82vh !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; border-radius: 28px !important; padding-bottom: 0 !important; } .dm-download-handle-v7 { display: none !important; } .dm-download-header-v7 { padding: 16px 18px !important; } .dm-download-body-v7 { padding: 14px 14px 18px !important; } } @media (prefers-reduced-motion: reduce) { .dm-download-close-v7, .dm-download-quality-v7 { transition: none !important; } } /* ========================================================= DM_SUGGESTED_MODAL_V9 Suggested-series Play + Download popup Stable Safari backdrop + smooth motion ========================================================= */ html.dm-play-open-v9, body.dm-play-open-v9 { overflow: hidden !important; overscroll-behavior: none !important; } /* ---------- ROOT FADE ---------- */ .dm-suggested-modal-v9 { opacity: 1; -webkit-tap-highlight-color: transparent !important; } .dm-suggested-modal-v9.dm-suggested-modal-transition { transition: opacity 220ms cubic-bezier(.22, 1, .36, 1) !important; } .dm-suggested-modal-v9.dm-suggested-modal-hidden { opacity: 0 !important; } .dm-suggested-modal-v9.dm-suggested-modal-visible { opacity: 1 !important; } /* ========================================================= BACKDROP ========================================================= */ /* * Backdrop is NOT a button anymore. * * global-motion-v20 transforms every button on pointerdown. * A transformed full-screen backdrop-filter layer can lose * its Safari compositing surface while the finger is down. */ .dm-suggested-backdrop-v9, .dm-suggested-backdrop-v9:active, .dm-suggested-backdrop-v9:focus { transform: none !important; filter: none !important; opacity: 1 !important; outline: 0 !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; } /* * Blur value itself NEVER animates. * Only overlay opacity animates. * This is much more stable on iOS Safari. */ .dm-play-quality-backdrop.dm-suggested-backdrop-v9, .dm-download-backdrop-v7.dm-suggested-backdrop-v9 { background: rgba(2, 3, 6, .80) !important; -webkit-backdrop-filter: blur(7px) saturate(.92) !important; backdrop-filter: blur(7px) saturate(.92) !important; } /* ========================================================= SHEET ENTER / LEAVE ========================================================= */ .dm-suggested-modal-v9 .dm-suggested-modal-sheet-v9 { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transform-origin: 50% 100%; transition: transform 320ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease !important; will-change: transform, opacity; } .dm-suggested-modal-v9.dm-suggested-modal-hidden .dm-suggested-modal-sheet-v9 { opacity: 0 !important; transform: translate3d(0, 24px, 0) scale(.975) !important; } .dm-suggested-modal-v9.dm-suggested-modal-visible .dm-suggested-modal-sheet-v9 { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; } /* ========================================================= PLAY POPUP Override old Round7 instant transition ========================================================= */ .dm-play-quality-overlay.dm-suggested-modal-v9 { transition: opacity 220ms cubic-bezier(.22, 1, .36, 1) !important; } .dm-play-quality-sheet.dm-suggested-modal-sheet-v9 { animation: none !important; transition: transform 320ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease !important; } /* ========================================================= DOWNLOAD POPUP ========================================================= */ .dm-download-overlay-v7.dm-suggested-modal-v9 { transition: opacity 220ms cubic-bezier(.22, 1, .36, 1) !important; } .dm-download-sheet-v7.dm-suggested-modal-sheet-v9 { transition: transform 320ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease !important; } /* Desktop: smaller travel distance */ @media (min-width: 768px) { .dm-suggested-modal-v9 .dm-suggested-modal-sheet-v9 { transform-origin: 50% 50%; } .dm-suggested-modal-v9.dm-suggested-modal-hidden .dm-suggested-modal-sheet-v9 { transform: translate3d(0, 14px, 0) scale(.98) !important; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .dm-suggested-modal-v9, .dm-suggested-modal-v9 .dm-suggested-modal-sheet-v9 { transition-duration: .01ms !important; } } /* /static/public/assets/css/home-motion-v9.css */ /* ========================================================= DIASTOMY HOME MOTION V9 Gesture + compositor tuning only. No layout/design changes. ========================================================= */ /* Give browser an early hint that horizontal gestures are app-handled. */ body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .movie-slider .splide__track, body[data-page="home"] .dm-fresh-series-slider .splide__track { touch-action: pan-y pinch-zoom; } /* Splide moves only the list: promote that one layer, not every card. */ body[data-page="home"] .movie-slider .splide__list, body[data-page="home"] .dm-fresh-series-slider .splide__list { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } body[data-page="home"] .movie-slider .splide__slide, body[data-page="home"] .dm-fresh-series-slider .splide__slide { backface-visibility: hidden; -webkit-backface-visibility: hidden; } @media (max-width: 767px) { /* V9 owns final mobile hero motion timing. */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide { transition: transform 320ms cubic-bezier(.20,.82,.24,1), opacity 190ms ease !important; will-change: transform, opacity !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* Real-time finger tracking. Keep the exact existing geometry. */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-active { transform: translate3d(calc(-50% + var(--dm-hero-drag-x, 0px)), 0, 0) scale(1) !important; } body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev { transform: translate3d(calc(-147% + var(--dm-hero-drag-x, 0px)), 0, 0) scale(.885) !important; } body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next { transform: translate3d(calc(47% + var(--dm-hero-drag-x, 0px)), 0, 0) scale(.885) !important; } /* During touch tracking there must be zero transition lag. */ body[data-page="home"] .dm-home-hero .dx-hero-list.is-dragging > .dx-hero-slide { transition: none !important; } /* A rejected short swipe snaps back quickly instead of floating. */ body[data-page="home"] .dm-home-hero .dx-hero-list.is-snapping-back > .dx-hero-slide { transition: transform 220ms cubic-bezier(.20,.82,.24,1), opacity 160ms ease !important; } /* Side cards do not need expensive effects while they are moving. */ body[data-page="home"] .dm-home-hero .dx-hero-slide.is-prev, body[data-page="home"] .dm-home-hero .dx-hero-slide.is-next { filter: none !important; } } /* ========================================================= DIASTOMY HERO TRACK MOTION V1 Mobile Hero moves one compositor rail, not every slide. This mirrors the motion architecture of the lower sliders. ========================================================= */ @media (max-width: 767px) { body[data-page="home"] .dm-home-hero .dx-hero-list { transform: translate3d(var(--dm-hero-drag-x, 0px), 0, 0) !important; transition: none !important; will-change: transform !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* Slide geometry stays fixed; the rail supplies finger movement. */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-active { transform: translate3d(-50%, 0, 0) scale(1) !important; } body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev { transform: translate3d(-147%, 0, 0) scale(.885) !important; } body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next { transform: translate3d(47%, 0, 0) scale(.885) !important; } /* No per-card transition while a rail gesture/glide is in progress. */ body[data-page="home"] .dm-home-hero .dx-hero-list.is-dragging > .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding > .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-list.is-hero-swap > .dx-hero-slide { transition: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding { transition: transform 275ms cubic-bezier(.22,.78,.22,1) !important; } body[data-page="home"] .dm-home-hero .dx-hero-list.is-snapping-back { transition: transform 175ms cubic-bezier(.22,.78,.22,1) !important; } body[data-page="home"] .dm-home-hero .dx-hero-list.is-hero-swap { transition: none !important; } /* Grow the incoming card while the rail moves; shrink outgoing card. */ body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding-next > .dx-hero-slide.is-active .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding-prev > .dx-hero-slide.is-active .dx-hero-card { transform: scale(.885) !important; transition: transform 275ms cubic-bezier(.22,.78,.22,1) !important; transform-origin: center center !important; will-change: transform !important; } body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding-next > .dx-hero-slide.is-next .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding-prev > .dx-hero-slide.is-prev .dx-hero-card { transform: scale(1.13) !important; transition: transform 275ms cubic-bezier(.22,.78,.22,1) !important; transform-origin: center center !important; will-change: transform !important; } body[data-page="home"] .dm-home-hero .dx-hero-list.is-hero-swap .dx-hero-card { transition: none !important; } /* Side cards are already composited; avoid expensive filters in motion. */ body[data-page="home"] .dm-home-hero .dx-hero-list.is-dragging > .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding > .dx-hero-slide { filter: none !important; } } /* ========================================================= DIASTOMY_HERO_GESTURE_V16 Simple transition engine ========================================================= */ @media (max-width: 767px) { /* * Prevent horizontal viewport movement. */ body[data-page="home"] { overflow-x: hidden !important; overscroll-behavior-x: none !important; } /* * Hero completely owns gestures that begin inside it. * * This intentionally means: * dragging vertically while the finger is ON the Hero * will not scroll the page. * * This is required to remove the iOS right/vertical jump. */ body[data-page="home"] .dm-home-hero, body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list, body[data-page="home"] .dm-home-hero .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-card { touch-action: none !important; overscroll-behavior: none !important; -webkit-user-select: none !important; user-select: none !important; } body[data-page="home"] .dm-home-hero, body[data-page="home"] .dm-home-hero .hero-main-slider { overflow-x: hidden !important; } /* * Real visible animation. * * No is-dragging transition:none during swipe anymore. */ body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide { transition: transform 260ms cubic-bezier(.22,.61,.36,1), opacity 180ms ease !important; will-change: transform, opacity !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* * Old classes must never disable the V16 animation. */ body[data-page="home"] .dm-home-hero .dx-hero-list.is-dragging > .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-list.is-snapping-back > .dx-hero-slide { transition: transform 260ms cubic-bezier(.22,.61,.36,1), opacity 180ms ease !important; } } /* ========================================================= DIASTOMY_HERO_TOUCH_FOLLOW_V18_1 True 1:1 full-banner touch slider ========================================================= */ @media (max-width: 767px) { html, body[data-page="home"] { overflow-x: hidden !important; overscroll-behavior-x: none !important; max-width: 100% !important; } body[data-page="home"] .dm-home-hero, body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .dm-home-hero .dx-hero-track, body[data-page="home"] .dm-home-hero .dx-hero-list, body[data-page="home"] .dm-home-hero .dx-hero-slide, body[data-page="home"] .dm-home-hero .dx-hero-card { touch-action: none !important; overscroll-behavior: none !important; -webkit-user-select: none !important; user-select: none !important; } body[data-page="home"] .dm-home-hero, body[data-page="home"] .dm-home-hero .hero-main-slider, body[data-page="home"] .dm-home-hero .dx-hero-track { overflow-x: hidden !important; } } /* DIASTOMY_HERO_TOUCH_FOLLOW_V18_3 */ /* ========================================================= DIASTOMY_HERO_TOUCH_FOLLOW_V18_4 Fast-swipe race-condition fix ========================================================= */ @media (max-width: 767px) { body[data-page="home"] .dm-home-hero .dx-hero-slide { /* * Prevent blending artifacts while two cards cross. */ backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } } /* ========================================================= DIASTOMY_HERO_TOUCH_FOLLOW_V18_5 Strict two-poster / no-overlap fast-swipe mode ========================================================= */ @media (max-width: 767px) { body[data-page="home"] .dm-home-hero .dx-hero-track { /* * Anything outside Hero's own viewport is clipped. */ overflow: hidden !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide { /* * Safari compositor isolation. */ isolation: isolate !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } } /* DIASTOMY_HERO_NO_JUMP_V23_START */ @media (max-width: 767px) { body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-active { transform: translate3d(-50%, 0, 0) scale(var(--dm-scale-active, 1)) !important; transform-origin: center center !important; } body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-prev { transform: translate3d(-147%, 0, 0) scale(var(--dm-scale-prev, .885)) !important; transform-origin: center center !important; } body[data-page="home"] .dm-home-hero .dx-hero-list > .dx-hero-slide.is-next { transform: translate3d(47%, 0, 0) scale(var(--dm-scale-next, .885)) !important; transform-origin: center center !important; } body[data-page="home"] .dm-home-hero .dx-hero-list.is-dragging > .dx-hero-slide { transition: none !important; } body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding-next > .dx-hero-slide.is-active, body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding-prev > .dx-hero-slide.is-active { transform: translate3d(-50%, 0, 0) scale(.885) !important; transition: transform 275ms cubic-bezier(.22,.78,.22,1), opacity 190ms ease !important; } body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding-next > .dx-hero-slide.is-next { transform: translate3d(47%, 0, 0) scale(1) !important; transition: transform 275ms cubic-bezier(.22,.78,.22,1), opacity 190ms ease !important; } body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding-prev > .dx-hero-slide.is-prev { transform: translate3d(-147%, 0, 0) scale(1) !important; transition: transform 275ms cubic-bezier(.22,.78,.22,1), opacity 190ms ease !important; } body[data-page="home"] .dm-home-hero .dx-hero-list.is-dragging .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-list.is-gliding .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-list.is-hero-swap .dx-hero-card { transform: none !important; transition: none !important; will-change: auto !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide .dx-hero-card, body[data-page="home"] .dm-home-hero .dx-hero-slide .dx-hero-poster, body[data-page="home"] .dm-home-hero .dx-hero-slide .dx-hero-picture, body[data-page="home"] .dm-home-hero .dx-hero-slide .dx-hero-poster img { width: 100% !important; height: 100% !important; } body[data-page="home"] .dm-home-hero .dx-hero-slide .dx-hero-poster img { object-fit: cover !important; object-position: center center !important; transform: none !important; } } /* DIASTOMY_HERO_NO_JUMP_V23_END */ /* /static/public/assets/css/home-slider-native-v11.css */ /* ========================================================= DIASTOMY HOME SLIDER NATIVE V11 Mobile 4-card rails use native iOS/browser momentum scrolling. No visual redesign: same 4-up geometry, no JS transition lock. ========================================================= */ @media (max-width: 767px) { /* Splide core keeps .splide hidden until mount(). Native mobile rails do not mount Splide, so explicitly reveal only these rails. */ body[data-page="home"] .dm-native-four-slider { visibility: visible !important; width: 100% !important; overflow: visible !important; } body[data-page="home"] .dm-native-four-slider .splide__track { width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain; touch-action: auto !important; scroll-snap-type: x proximity; scroll-behavior: auto !important; scrollbar-width: none; -ms-overflow-style: none; padding-left: 0 !important; padding-right: 0 !important; transform: translateZ(0); } body[data-page="home"] .dm-native-four-slider .splide__track::-webkit-scrollbar { display: none; width: 0; height: 0; } body[data-page="home"] .dm-native-four-slider .splide__list { display: flex !important; width: 100% !important; min-width: 100% !important; max-width: none !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; transform: none !important; transition: none !important; will-change: auto !important; backface-visibility: visible !important; -webkit-backface-visibility: visible !important; } body[data-page="home"] .dm-native-four-slider .splide__slide { flex: 0 0 calc((100% - 12px) / 4) !important; width: calc((100% - 12px) / 4) !important; min-width: calc((100% - 12px) / 4) !important; max-width: calc((100% - 12px) / 4) !important; margin: 0 !important; scroll-snap-align: start; scroll-snap-stop: normal; transform: none !important; } /* Keep touch interaction on the rail native, even though V9 told Splide tracks to reserve horizontal gestures for JS. */ body[data-page="home"] .dm-native-four-slider .splide__track, body[data-page="home"] .dm-native-four-slider .splide__list, body[data-page="home"] .dm-native-four-slider .splide__slide { touch-action: auto !important; } }