/* /static/pwa/generated/a4de7c44a956f2c2dd77.css */ @media(max-width:768px){.dm-standard-card{position:relative!important;min-width:0!important}.dm-standard-card .dm-card-poster{position:relative!important;overflow:hidden!important}.dm-standard-card .dm-card-poster>.dm-card-rating{position:absolute!important;inset:auto auto 8px 8px!important;z-index:50!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:0!important;height:25px!important;margin:0!important;padding:0 8px!important;gap:4px!important;border-radius:7px!important;border:1px solid rgba(255,255,255,.13)!important;background:#111216e8!important;box-shadow:0 4px 12px #00000061!important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.dm-standard-card .dm-card-poster>.dm-card-rating:before{content:"IMDb";display:inline-block;color:#f5c518;font-size:9px;font-weight:900;line-height:1}.dm-standard-card .dm-card-poster>.dm-card-rating svg{display:none!important}.dm-standard-card .dm-card-poster>.dm-card-rating span{padding:0!important;margin:0!important;color:#fff!important;font-size:11px!important;font-weight:800!important;line-height:1!important}.dm-standard-card .dm-card-info{display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important}.dm-standard-card .dm-card-separator{display:none!important}.dm-standard-card .dm-card-title{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;width:100%!important;min-height:2.7em!important;max-height:2.7em!important;margin:0 0 5px!important;overflow:hidden!important;white-space:normal!important;text-overflow:clip!important;line-height:1.35!important;text-align:center!important;direction:ltr!important}.dm-standard-card .dm-card-genres{display:block!important;width:100%!important;min-width:0!important;height:auto!important;min-height:2.6em!important;max-height:none!important;margin:0!important;padding:0 2px!important;overflow:visible!important;white-space:normal!important;text-overflow:clip!important;-webkit-line-clamp:unset!important;font-size:9px!important;line-height:1.3!important;font-weight:400!important;color:#ffffffb3!important;text-align:center!important;direction:ltr!important;word-break:normal!important;overflow-wrap:normal!important}.dm-standard-card .dm-card-genres span{display:inline!important;overflow:visible!important;white-space:normal!important;text-overflow:clip!important}.dm-standard-card .dm-genre-dot{opacity:.5;padding:0 1px}} /* /static/public/assets/css/home-card-slider-polish-v27.css */ /* ============================================ DIASTOMY HOME CARD + SLIDER POLISH V1 ============================================ */ @media (max-width: 768px) { /* * Slider */ .slider-section { overflow: hidden; } .slider-section .movie-slider { overflow: visible; } .slider-section .movie-slider .splide__track { overflow: hidden; border-radius: 0; } .slider-section .movie-slider .splide__list { will-change: transform; backface-visibility: hidden; transform: translateZ(0); } /* * Card */ .slider-section .dm-standard-card { min-width: 0 !important; opacity: 1; transform: translateZ(0); transition: opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1); } .slider-section .dm-standard-card:active { transform: scale(.985) translateZ(0); } .slider-section .dm-card-link { min-width: 0; height: 100%; } /* * Poster */ .slider-section .dm-card-poster { margin-bottom: 7px !important; border-radius: 12px !important; box-shadow: 0 8px 18px rgba(0,0,0,.28) !important; transform: translateZ(0); } .slider-section .dm-card-poster > img { transform: translateZ(0); transition: transform .28s cubic-bezier(.22,1,.36,1), filter .28s ease !important; } .slider-section .dm-card-link:active .dm-card-poster > img { transform: scale(.975) translateZ(0) !important; filter: brightness(.92); } /* * Remove expensive hover overlay on touch devices. */ .slider-section .dm-card-poster > div.absolute.inset-0 { display: none !important; } /* * Meta */ .slider-section .dm-card-meta { min-width: 0; padding: 0 1px !important; text-align: center !important; } /* * Title * * Two fixed lines so every card lines up. */ .slider-section .dm-card-title { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; overflow: hidden !important; white-space: normal !important; text-overflow: ellipsis; min-height: 2.7em; max-height: 2.7em; margin: 0 0 5px !important; font-size: clamp( 11px, 3vw, 14px ) !important; line-height: 1.35 !important; font-weight: 700 !important; text-align: center !important; direction: ltr; unicode-bidi: plaintext; } /* * Genre + Rating */ .slider-section .dm-card-info { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 5px !important; align-items: center !important; width: 100%; min-width: 0; direction: ltr; } .slider-section .dm-card-genres { display: block !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp( 9px, 2.35vw, 12px ) !important; line-height: 1.35; color: rgba( 255, 255, 255, .72 ) !important; text-align: left; direction: ltr; } /* * Remove separator that was causing the * ugly mixed layout. */ .slider-section .dm-card-separator { display: none !important; } /* * Rating pill */ .slider-section .dm-card-rating { display: inline-flex !important; flex: 0 0 auto; align-items: center; justify-content: center; gap: 2px !important; min-width: 36px; height: 22px; padding: 0 6px !important; border: 1px solid rgba( 255, 255, 255, .06 ) !important; border-radius: 999px !important; background: #292b33 !important; box-shadow: 0 4px 12px rgba( 0, 0, 0, .18 ); } .slider-section .dm-card-rating svg { width: 10px !important; height: 10px !important; flex: none; } .slider-section .dm-card-rating span { padding-top: 0 !important; font-size: 10px !important; line-height: 1 !important; color: #fff !important; } } /* ============================================ GENRE LAYOUT FIX V2 ============================================ */ @media (max-width: 768px) { .slider-section .dm-card-info { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; gap: 5px !important; align-items: start !important; width: 100% !important; min-width: 0 !important; direction: ltr !important; } /* Show multiple genres instead of only one */ .slider-section .dm-card-genres { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; min-height: 2.65em !important; max-height: 2.65em !important; font-size: 10px !important; line-height: 1.32 !important; text-align: center !important; direction: ltr !important; color: rgba(255,255,255,.72) !important; } /* Rating gets its own row */ .slider-section .dm-card-rating { justify-self: center !important; min-width: 38px !important; height: 21px !important; margin-top: 1px !important; } .slider-section .dm-card-separator { display: none !important; } } /* GENRE REAL OUTPUT FIX V3 */ @media (max-width: 768px) { /* * Title */ .slider-section .dm-card-title { margin-bottom: 4px !important; } /* * Put genres above rating. * This prevents the rating from stealing horizontal * space from the genre text. */ .slider-section .dm-card-info { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; } /* * IMPORTANT: * no truncate * no line-clamp * no ellipsis * * Show every genre returned by Django. */ .slider-section .dm-card-genres { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; font-size: 9px !important; line-height: 1.38 !important; font-weight: 400 !important; text-align: center !important; direction: ltr !important; color: rgba(255,255,255,.72) !important; word-break: normal !important; overflow-wrap: anywhere !important; } /* * Kill truncation inherited from Tailwind or old CSS. */ .slider-section .dm-card-genres *, .slider-section .dm-card-genres span { display: inline !important; max-width: none !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; } .slider-section .dm-genre-dot { opacity: .55; padding: 0 1px; } /* * Rating gets a separate row. */ .slider-section .dm-card-rating { display: inline-flex !important; align-self: center !important; justify-self: center !important; flex: 0 0 auto !important; margin: 0 !important; min-width: 36px !important; width: auto !important; height: 20px !important; padding: 0 6px !important; } .slider-section .dm-card-separator { display: none !important; } } /* * Very small phones: * keep all genres but use slightly smaller text. */ @media (max-width: 390px) { .slider-section .dm-card-genres { font-size: 8px !important; line-height: 1.35 !important; } } /* ============================================ IMDB POSTER BADGE V4 ============================================ */ @media (max-width: 768px) { /* * Poster is the positioning context. */ .slider-section .dm-card-poster { position: relative !important; overflow: hidden !important; } /* * IMDb badge is now physically inside poster. */ .slider-section .dm-card-poster .dm-card-rating { position: absolute !important; left: 7px !important; bottom: 7px !important; top: auto !important; right: auto !important; z-index: 20 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 25px !important; margin: 0 !important; padding: 0 8px !important; gap: 4px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 7px !important; background: rgba(18,18,20,.90) !important; box-shadow: 0 3px 9px rgba(0,0,0,.32) !important; line-height: 1 !important; transform: translateZ(0); } /* * IMDb yellow label. */ .slider-section .dm-card-poster .dm-card-rating::before { content: "IMDb"; display: inline-block; color: #f5c518; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: -.15px; } /* * We don't need the old star anymore. */ .slider-section .dm-card-poster .dm-card-rating svg { display: none !important; } /* * Score. */ .slider-section .dm-card-poster .dm-card-rating span { color: #fff !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; padding: 0 !important; } /* * Rating no longer consumes space * under the poster. */ .slider-section .dm-card-info { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* * Genre gets the WHOLE card width now. */ .slider-section .dm-card-genres { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; width: 100% !important; min-width: 0 !important; min-height: 2.55em !important; max-height: 2.55em !important; margin: 0 !important; padding: 0 2px !important; overflow: hidden !important; white-space: normal !important; text-overflow: clip !important; font-size: 9px !important; line-height: 1.28 !important; color: rgba( 255, 255, 255, .68 ) !important; text-align: center !important; direction: ltr !important; word-break: normal !important; overflow-wrap: normal !important; } /* * Don't allow children to add ellipsis. */ .slider-section .dm-card-genres span { display: inline !important; overflow: visible !important; max-width: none !important; white-space: normal !important; text-overflow: clip !important; } /* * Hide the obsolete separator. */ .slider-section .dm-card-separator { display: none !important; } /* * Two clean title lines. */ .slider-section .dm-card-title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; white-space: normal !important; overflow: hidden !important; text-overflow: clip !important; width: 100% !important; min-height: 2.65em !important; max-height: 2.65em !important; margin: 0 0 5px !important; padding: 0 !important; line-height: 1.32 !important; text-align: center !important; direction: ltr !important; } } /* * Desktop also gets a clean IMDb overlay. */ @media (min-width: 769px) { .dm-card-poster { position: relative; } .dm-card-poster .dm-card-rating { position: absolute !important; left: 10px !important; bottom: 10px !important; right: auto !important; top: auto !important; z-index: 20; margin: 0 !important; } } /* ========================================= FINAL GENRE TEXT - NO PILLS ========================================= */ @media (max-width: 768px) { .dm-standard-card .dm-card-info { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 4px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .dm-standard-card .dm-card-genres { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; width: 100% !important; min-width: 0 !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; margin: 0 !important; padding: 0 3px !important; overflow: hidden !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; white-space: normal !important; text-overflow: clip !important; color: rgba(255,255,255,.62) !important; font-size: 8.5px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: center !important; direction: ltr !important; word-break: normal !important; overflow-wrap: normal !important; } .dm-standard-card .dm-card-genres *, .dm-standard-card .dm-genre-chip, .dm-standard-card .dm-genre-name, .dm-standard-card .dm-genre-dot, .dm-standard-card .dm-genre-sep { display: inline !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 1px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: inherit !important; font: inherit !important; white-space: normal !important; } .dm-standard-card .dm-card-separator { display: none !important; } .dm-standard-card .dm-card-title { margin-bottom: 5px !important; } } /* DM-MOBILE-FOUR-V14 */ @media (max-width: 768px) { /* * Dubbed section = slider-section immediately * before animation-slider. * * Animation section = animation-slider. */ .slider-section:has(+ .animation-slider) .splide__track, .animation-slider .splide__track { padding-left: 0 !important; padding-right: 0 !important; overflow: hidden !important; } .slider-section:has(+ .animation-slider) .splide__list, .animation-slider .splide__list { display: flex !important; gap: 6px !important; } .slider-section:has(+ .animation-slider) .splide__slide, .animation-slider .splide__slide { flex: 0 0 calc((100% - 18px) / 4) !important; width: calc((100% - 18px) / 4) !important; max-width: calc((100% - 18px) / 4) !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .slider-section:has(+ .animation-slider) .splide__slide > *, .animation-slider .splide__slide > * { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* END-DM-MOBILE-FOUR-V14 */ /* MOBILE CARD TIDY V18 */ @media (max-width:768px){ .dm-standard-card .dm-card-title{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; height:34px!important; min-height:34px!important; max-height:34px!important; overflow:hidden!important; margin:6px 0 4px!important; padding:0 2px!important; font-size:10px!important; line-height:1.35!important; text-align:center!important; white-space:normal!important; } .dm-standard-card .dm-card-info{ display:block!important; height:30px!important; min-height:30px!important; max-height:30px!important; overflow:hidden!important; padding:0 2px!important; margin:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } .dm-standard-card .dm-card-info>*:not(.dm-card-genres){ display:none!important; } .dm-standard-card .dm-card-genres{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; height:27px!important; min-height:27px!important; max-height:27px!important; overflow:hidden!important; padding:0 1px!important; margin:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; font-size:7.5px!important; line-height:1.35!important; font-weight:400!important; color:rgba(255,255,255,.58)!important; text-align:center!important; direction:ltr!important; white-space:normal!important; } .dm-standard-card .dm-card-separator{ display:none!important; } .dm-standard-card .dm-card-genres span{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; margin:0!important; font:inherit!important; color:inherit!important; } } /* END MOBILE CARD TIDY V18 */ /* GENRE TWO LINES CLEAN V19 */ @media(max-width:768px){ .dm-standard-card .dm-card-genres{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; gap:1px!important; height:30px!important; min-height:30px!important; max-height:30px!important; overflow:hidden!important; font-size:7px!important; line-height:1.35!important; text-align:center!important; } .dm-standard-card .dm-card-genres .dm-genre-dot, .dm-standard-card .dm-card-genres .dm-genre-sep{ display:none!important; } .dm-standard-card .dm-card-genres > span:not(.dm-genre-dot):not(.dm-genre-sep){ display:block!important; width:100%!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; } } /* END GENRE TWO LINES CLEAN V19 */ /* GENRE FINAL V20 */ @media(max-width:768px){ .dm-standard-card .dm-card-info{ height:31px!important; min-height:31px!important; max-height:31px!important; padding:0 2px!important; margin:0!important; overflow:hidden!important; background:transparent!important; border:0!important; box-shadow:none!important; } .dm-standard-card .dm-card-info>*:not(.dm-card-genres){ display:none!important; } .dm-standard-card .dm-card-genres{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; gap:1px!important; width:100%!important; height:30px!important; min-height:30px!important; max-height:30px!important; margin:0!important; padding:0 2px!important; overflow:hidden!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; text-align:center!important; direction:ltr!important; } .dm-standard-card .dm-genre-line{ display:block!important; width:100%!important; height:14px!important; min-height:14px!important; max-height:14px!important; margin:0!important; padding:0!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; background:transparent!important; border:0!important; box-shadow:none!important; font-size:7.5px!important; font-weight:400!important; line-height:14px!important; color:rgba(255,255,255,.60)!important; } .dm-standard-card .dm-genre-dot, .dm-standard-card .dm-genre-sep, .dm-standard-card .dm-card-separator{ display:none!important; } .dm-standard-card .dm-card-info>:empty{ display:none!important; } } /* END GENRE FINAL V20 */ /* GENRE V21 - FORCE 2 CLEAN ROWS */ @media(max-width:768px){ .dm-standard-card .dm-card-genres{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; gap:0!important; height:30px!important; min-height:30px!important; max-height:30px!important; overflow:hidden!important; } .dm-standard-card .dm-card-genres > .dm-genre-line{ display:block!important; width:100%!important; height:14px!important; min-height:14px!important; max-height:14px!important; margin:0!important; padding:0 2px!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; font-size:7px!important; font-weight:400!important; line-height:14px!important; color:rgba(255,255,255,.60)!important; text-align:center!important; direction:ltr!important; } .dm-standard-card .dm-card-genres > .dm-genre-dot, .dm-standard-card .dm-card-genres > .dm-genre-sep, .dm-standard-card .dm-card-separator{ display:none!important; } .dm-standard-card .dm-card-info > *:not(.dm-card-genres){ display:none!important; } } /* END GENRE V21 */ /* CARD TEXT LEFT ALIGN V22 */ @media(max-width:768px){ .dm-standard-card .dm-card-title{ width:100%!important; text-align:left!important; direction:ltr!important; justify-content:flex-start!important; } .dm-standard-card .dm-card-info{ width:100%!important; text-align:left!important; direction:ltr!important; } .dm-standard-card .dm-card-genres{ width:100%!important; align-items:flex-start!important; justify-content:flex-start!important; text-align:left!important; direction:ltr!important; } .dm-standard-card .dm-card-genres > .dm-genre-line{ width:100%!important; text-align:left!important; direction:ltr!important; } } /* END CARD TEXT LEFT ALIGN V22 */ /* TITLE LEFT ALIGN V23 */ @media (max-width:768px){ body .slider-section .dm-standard-card .dm-card-title, body .animation-slider .dm-standard-card .dm-card-title{ width:100%!important; text-align:left!important; direction:ltr!important; margin-left:0!important; margin-right:0!important; padding-left:0!important; padding-right:0!important; justify-content:flex-start!important; align-items:flex-start!important; } /* keep genres left aligned */ body .dm-standard-card .dm-card-genres, body .dm-standard-card .dm-genre-line{ text-align:left!important; direction:ltr!important; align-items:flex-start!important; } } /* END TITLE LEFT ALIGN V23 */ /* FORCE CARD TITLE LEFT V24 */ @media (max-width:768px){ .slider-section .dm-standard-card .dm-card-link, .animation-slider .dm-standard-card .dm-card-link{ direction:ltr!important; } .slider-section .dm-standard-card .dm-card-meta, .animation-slider .dm-standard-card .dm-card-meta{ width:100%!important; direction:ltr!important; text-align:left!important; align-items:flex-start!important; justify-content:flex-start!important; } html body .slider-section .dm-standard-card .dm-card-title, html body .animation-slider .dm-standard-card .dm-card-title{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; width:100%!important; min-width:100%!important; max-width:100%!important; align-self:stretch!important; margin-left:0!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; text-align:left!important; direction:ltr!important; unicode-bidi:plaintext!important; justify-content:flex-start!important; align-items:flex-start!important; } html body .dm-standard-card .dm-card-title *{ text-align:left!important; direction:ltr!important; } } /* END FORCE CARD TITLE LEFT V24 */ /* TITLE OVERLAP FIX V25 */ @media (max-width:768px){ .dm-standard-card, .dm-standard-card .dm-card-link, .dm-standard-card .dm-card-meta{ min-width:0!important; max-width:100%!important; } .dm-standard-card .dm-card-meta{ width:100%!important; overflow:hidden!important; } html body .dm-standard-card .dm-card-title{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; width:100%!important; min-width:0!important; max-width:100%!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:6px 0 4px!important; padding:0!important; overflow:hidden!important; white-space:normal!important; text-overflow:ellipsis!important; overflow-wrap:anywhere!important; word-break:normal!important; text-align:left!important; direction:ltr!important; line-height:1.3!important; } /* prevent any title from leaking into next card */ .dm-standard-card .dm-card-title, .dm-standard-card .dm-card-title *{ box-sizing:border-box!important; max-width:100%!important; overflow:hidden!important; } } /* END TITLE OVERLAP FIX V25 */ /* HP STACK TITLE FIX V26 */ @media (max-width:768px){ .hp-stack-card, .hp-stack-content{ min-width:0!important; max-width:100%!important; } .hp-stack-content{ width:100%!important; overflow:hidden!important; direction:ltr!important; text-align:left!important; } .hp-stack-title{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; width:100%!important; min-width:0!important; max-width:100%!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:6px 0 4px!important; padding:0!important; overflow:hidden!important; white-space:normal!important; text-overflow:ellipsis!important; word-break:normal!important; overflow-wrap:normal!important; direction:ltr!important; text-align:left!important; font-size:10px!important; line-height:1.35!important; } .hp-stack-meta{ width:100%!important; min-width:0!important; overflow:hidden!important; } } /* END HP STACK TITLE FIX V26 */ @media(max-width:768px){ .splide__slide.dm-standard-card, .dm-standard-card .dm-card-link, .dm-standard-card .dm-card-meta{ min-width:0!important; max-width:100%!important; overflow:hidden!important; } html body .dm-standard-card .dm-card-title{ display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; height:18px!important; min-height:18px!important; max-height:18px!important; margin:7px 0 5px!important; padding:0!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; text-align:left!important; direction:ltr!important; box-sizing:border-box!important; } } /* /static/public/assets/css/home-inline.css */ /* ===== extracted block 1 ===== */ /* ========================= Half-price title centered ========================= */ .half-price-title, .half-price-section h2, .half-price-section .section-title { text-align: center !important; width: 100% !important; justify-content: center !important; } /* ========================= Modern Splide motion ========================= */ .splide__slide { opacity: .72; transform: scale(.94); transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .55s ease, filter .55s ease !important; will-change: transform, opacity; } .splide__slide.is-active, .splide__slide.is-visible { opacity: 1; transform: scale(1); } .splide__slide img { transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease !important; } .splide__slide:hover img { transform: scale(1.035); } .splide__slide:not(.is-visible) { filter: blur(.3px); } /* mobile */ @media (max-width: 767px) { .splide__slide { opacity: .82; transform: scale(.96); } .splide__slide.is-active, .splide__slide.is-visible { transform: scale(1); opacity: 1; } } /* ========================================= Half-price section ========================================= */ /* فقط اسلایدر نیم‌بها */ .movie-slider-2 .splide__slide { opacity: 0.45; transform: scale(.90) translateY(16px); filter: blur(1px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1), filter .65s ease !important; } .movie-slider-2 .splide__slide.is-visible { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } /* کارت فعال کمی زنده‌تر */ .movie-slider-2 .splide__slide.is-active { transform: scale(1.025) translateY(-3px); } /* تصویر داخل کارت */ .movie-slider-2 .splide__slide img { transition: transform .8s cubic-bezier(.22,1,.36,1), filter .6s ease !important; } .movie-slider-2 .splide__slide.is-active img { transform: scale(1.025); } /* هنگام ورق خوردن */ .movie-slider-2.is-moving .splide__slide { opacity: .55; transform: scale(.94) translateY(8px); } /* موبایل */ @media (max-width: 767px) { .movie-slider-2 .splide__slide { transform: scale(.95) translateY(10px); filter: none; } .movie-slider-2 .splide__slide.is-visible { transform: scale(1) translateY(0); } .movie-slider-2 .splide__slide.is-active { transform: scale(1.015) translateY(-2px); } } /* ===== extracted block 2 ===== */ /* Smooth homepage sliders */ .splide__track { overflow: hidden; } .splide__list { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; } .splide__slide { transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), opacity .55s ease !important; will-change: transform; } .splide__slide:not(.is-active) { opacity: .96; } .splide__slide.is-active { opacity: 1; } /* نرم‌تر شدن drag روی موبایل */ @media (max-width: 767px) { .splide__slide { transition-duration: .45s !important; } } /* ===== extracted block 3 ===== */ @media (max-width: 767px) { .home-famous-actors-scroll { position: relative; } .home-actors-swipe-hint { position: absolute; left: 0; top: 0; bottom: 22px; width: 58px; z-index: 999 !important; pointer-events: none; display: flex; align-items: center; justify-content: center; background: linear-gradient( to right, rgba(5,5,5,.96) 0%, rgba(5,5,5,.72) 35%, rgba(5,5,5,.30) 65%, rgba(5,5,5,0) 100% ); } .home-actors-swipe-arrow { color: #fff; font-size: 26px; font-weight: 700; line-height: 1; filter: drop-shadow(0 2px 7px rgba(0,0,0,.75)); animation: homeActorsSwipeNudge 1.35s ease-in-out infinite; } @keyframes homeActorsSwipeNudge { 0%, 100% { transform: translateX(3px); opacity: .55; } 50% { transform: translateX(-8px); opacity: 1; } } } /* ===== extracted block 4 ===== */ @media (max-width: 767px) { .slider-section-2 { position: relative !important; } .halfprice-edge-hint { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 72%; z-index: 40; pointer-events: none; display: flex; align-items: center; justify-content: center; } .halfprice-edge-hint.left { left: 0; background: linear-gradient( to right, rgba(5,5,5,.96) 0%, rgba(5,5,5,.72) 34%, rgba(5,5,5,.28) 66%, rgba(5,5,5,0) 100% ); } .halfprice-edge-hint.right { right: 0; background: linear-gradient( to left, rgba(5,5,5,.96) 0%, rgba(5,5,5,.72) 34%, rgba(5,5,5,.28) 66%, rgba(5,5,5,0) 100% ); } .halfprice-edge-arrow { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; color: #fff; background: rgba(22,22,26,.72); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 20px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08); font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); } .halfprice-edge-hint.left .halfprice-edge-arrow { animation: halfpriceArrowLeft 1.35s ease-in-out infinite; } .halfprice-edge-hint.right .halfprice-edge-arrow { animation: halfpriceArrowRight 1.35s ease-in-out infinite; } @keyframes halfpriceArrowLeft { 0%,100% { transform: translateX(3px); opacity: .65; } 50% { transform: translateX(-6px); opacity: 1; } } @keyframes halfpriceArrowRight { 0%,100% { transform: translateX(-3px); opacity: .65; } 50% { transform: translateX(6px); opacity: 1; } } } /* ===== extracted block 5 ===== */ .halfprice-header-row { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; height: 72px !important; /* فاصله واقعی تا کارت‌ها */ margin-bottom: 34px !important; overflow: visible !important; } /* گروه آیکن */ .halfprice-title-group { display: flex !important; align-items: center !important; } /* عنوان دقیقاً وسط کل صفحه */ .halfprice-heading { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; display: block !important; width: max-content !important; height: auto !important; margin: 0 !important; /* مهم: دیگر line-height ثابت نداریم */ line-height: normal !important; /* فضای امن برای فونت فارسی */ padding: 10px 12px 12px !important; font-size: 23px !important; font-weight: 700 !important; text-align: center !important; white-space: nowrap !important; color: #fff !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; z-index: 30 !important; pointer-events: none !important; } /* اسلایدر از هدر فاصله داشته باشد */ .movie-slider-2 { margin-top: 8px !important; } @media (max-width: 767px) { .halfprice-header-row { height: 64px !important; margin-bottom: 32px !important; } .halfprice-heading { font-size: 18px !important; line-height: normal !important; padding: 10px 10px 12px !important; } .movie-slider-2 { margin-top: 6px !important; } } /* ===== extracted block 6 ===== */ .movie-slider-2 .splide__slide, .movie-slider-2 .splide__slide.is-active, .movie-slider-2.is-dragging .splide__slide { transform: scale(.96) !important; transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .32s ease, filter .32s ease !important; transform-origin: center center !important; will-change: transform, opacity, filter; } /* فقط کلاس کنترل‌شده خودمون بزرگ بشه */ .movie-slider-2 .splide__slide.hp-card-active { transform: scale(1) !important; opacity: 1 !important; filter: brightness(1) !important; } /* موقع drag هیچ scale ناگهانی نده */ .movie-slider-2.is-dragging .splide__slide.hp-card-active { transform: scale(.96) !important; } /* بعد از release انیمیشن نرم */ .movie-slider-2:not(.is-dragging) .splide__slide.hp-card-active { transform: scale(1) !important; } @media (max-width:767px){ .movie-slider-2 .splide__slide, .movie-slider-2 .splide__slide.is-active { transform: scale(.97) !important; } .movie-slider-2 .splide__slide.hp-card-active { transform: scale(1) !important; } } /* ===== extracted block 7 ===== */ @media (max-width:767px) { /* * بخش‌های خارج از viewport تا زمانی که کاربر * به آن‌ها نزدیک نشده render کامل نمی‌شوند. */ .slider-section, .slider-section-2, .trailer-slider-section, .animation-slider, .hp-slider-section, .home-famous-actors-scroll { content-visibility: auto; contain-intrinsic-size: auto 430px; } /* * blurهای سنگین روی موبایل */ .custom-prev-btn, .custom-next-btn, .hp-prev-btn, .hp-next-btn { -webkit-backdrop-filter: blur(5px) !important; backdrop-filter: blur(5px) !important; } } /* از layout بخش‌های پایین جلوگیری از invalidation */ .slider-section, .slider-section-2, .trailer-slider-section, .hp-slider-section { contain: layout style; } /* ===== extracted block 8 ===== */ @media (max-width:767px) { /* * چهار Glow بزرگ 170px صفحه * روی موبایل render نشوند. */ .main-content > .absolute.inset-0.pointer-events-none { display: none !important; } /* * Blur روی slideهای خارج viewport ارزش بصری کمی * ولی هزینه GPU دارد. */ .splide__slide { filter: none !important; } /* * will-change دائمی باعث اختصاص layer زیاد می‌شود. */ .splide__slide { will-change: auto !important; } } /* ========================================================= DIASTOMY TOPIC CATEGORIES — GLASS RAIL V1 ========================================================= */ .dm-topic-section { position: relative; z-index: 10; width: calc(100% - 32px); max-width: 1180px; margin: 18px auto 72px; padding: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.065); border-radius: 28px; background: radial-gradient( 520px 180px at 85% -20%, rgba(201, 24, 36, .105), transparent 72% ), linear-gradient( 180deg, rgba(255,255,255,.035), rgba(255,255,255,.012) ); box-shadow: 0 20px 55px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.045); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* subtle top highlight */ .dm-topic-section::before { content: ""; position: absolute; top: 0; right: 7%; left: 45%; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.16), transparent ); } /* ========================================================= HEADER ========================================================= */ .dm-topic-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .dm-topic-head-main { display: flex; align-items: center; gap: 12px; } .dm-topic-accent { width: 4px; height: 41px; flex: 0 0 4px; border-radius: 999px; background: linear-gradient( 180deg, #ff4048, #a50816 ); box-shadow: 0 0 20px rgba(235, 25, 38, .28); } .dm-topic-eyebrow { display: block; margin-bottom: 1px; color: rgba(255,255,255,.33); font-size: 9px; font-weight: 700; letter-spacing: .18em; } .dm-topic-title { margin: 0; color: #fff; font-size: clamp(19px, 2.3vw, 26px); font-weight: 850; letter-spacing: -.025em; } .dm-topic-hint { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.34); font-size: 11px; white-space: nowrap; } .dm-topic-hint span { width: 6px; height: 6px; border-radius: 50%; background: #e4212e; box-shadow: 0 0 12px rgba(228,33,46,.5); } /* ========================================================= RAIL ========================================================= */ .dm-topic-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 9px; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; } .dm-topic-rail::-webkit-scrollbar { display: none; } .dm-topic-rail:active { cursor: grabbing; } /* ========================================================= CATEGORY ITEM ========================================================= */ .dm-topic-item { position: relative; min-width: 0; min-height: 94px; padding: 12px 13px 13px; scroll-snap-align: start; overflow: hidden; border: 1px solid rgba(255,255,255,.065); border-radius: 19px; background: radial-gradient( 160px 90px at 100% 0, rgba(184, 20, 31, .08), transparent 72% ), linear-gradient( 155deg, rgba(255,255,255,.045), rgba(255,255,255,.013) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.14); transition: transform .22s cubic-bezier(.22,.8,.22,1), border-color .22s ease, background .22s ease, box-shadow .22s ease; } .dm-topic-item::after { content: ""; position: absolute; right: -30px; bottom: -42px; width: 92px; height: 92px; border-radius: 50%; pointer-events: none; background: rgba(210, 19, 31, .07); filter: blur(24px); opacity: .7; } .dm-topic-item:hover { transform: translateY(-3px); border-color: rgba(234,45,56,.20); background: radial-gradient( 180px 100px at 100% 0, rgba(210, 21, 33, .13), transparent 72% ), linear-gradient( 155deg, rgba(255,255,255,.06), rgba(255,255,255,.017) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 13px 30px rgba(0,0,0,.20); } /* ========================================================= CARD HEADER ========================================================= */ .dm-topic-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; } .dm-topic-number { color: rgba(255,255,255,.24); font-family: system-ui, -apple-system, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em; } .dm-topic-dot { width: 6px; height: 6px; border-radius: 50%; background: #d71928; box-shadow: 0 0 10px rgba(215,25,40,.38); } /* ========================================================= OVERRIDE CURRENT card_category VISUALS ========================================================= */ .dm-topic-card { position: relative; z-index: 2; min-width: 0; } .dm-topic-card > *, .dm-topic-card > a, .dm-topic-card > div { width: 100% !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .dm-topic-card a { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 38px !important; color: rgba(255,255,255,.88) !important; text-decoration: none !important; font-size: 15px !important; font-weight: 700 !important; } .dm-topic-card span, .dm-topic-card p, .dm-topic-card h3, .dm-topic-card h4 { color: rgba(255,255,255,.88) !important; } /* old decorative red dots inside component aren't needed */ .dm-topic-card [class*="bg-red"] { opacity: .30 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dm-topic-section { width: calc(100% - 20px); margin: 12px auto 54px; padding: 16px 12px 15px; border-radius: 23px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .dm-topic-head { margin-bottom: 15px; padding: 0 3px; } .dm-topic-accent { height: 34px; } .dm-topic-title { font-size: 19px; } .dm-topic-eyebrow { font-size: 8px; } .dm-topic-hint { display: none; } .dm-topic-rail { grid-auto-columns: 132px; gap: 9px; padding-bottom: 5px; } .dm-topic-item { min-height: 82px; padding: 10px 11px; border-radius: 17px; /* * blur هر کارت روی iPhone سنگین نشود. */ backdrop-filter: none; -webkit-backdrop-filter: none; } .dm-topic-item-top { margin-bottom: 7px; } .dm-topic-card a { font-size: 13.5px !important; min-height: 32px !important; } } @media (max-width: 390px) { .dm-topic-rail { grid-auto-columns: 124px; } } /* ========================================================= DIASTOMY MOBILE ADVANCED SEARCH — WHITE STROKE V1 ========================================================= */ @media (max-width: 767px) { .dm-advanced-search-toggle { width: calc(100% - 20px) !important; height: 54px !important; margin: 10px !important; padding: 0 20px !important; border: 1px solid rgba(255,255,255,.34) !important; border-radius: 18px !important; background: rgba(255,255,255,.012) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 0 .5px rgba(255,255,255,.03) !important; color: #fff !important; } .dm-advanced-search-toggle:active { border-color: rgba(255,255,255,.72) !important; background: rgba(255,255,255,.035) !important; } .dm-advanced-search-toggle span { color: #fff !important; font-weight: 600 !important; } .dm-advanced-search-toggle svg { width: 22px !important; height: 22px !important; } .dm-advanced-search-toggle svg path { fill: #fff !important; } } /* ========================================================= ADVANCED SEARCH RAPID TOGGLE FIX V2 No delayed timeout / reversible animation ========================================================= */ @media (max-width: 767px) { .dm-advanced-search-panel { grid-template-rows: 0fr !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1), opacity .16s ease !important; will-change: grid-template-rows, opacity; } .dm-advanced-search-panel.is-open { grid-template-rows: 1fr !important; opacity: 1 !important; pointer-events: auto !important; } .dm-advanced-search-inner { min-height: 0 !important; overflow: hidden !important; } /* هنگام باز و بسته شدن اجازه نمی‌دهد dropdown یا محتوای فرم از ارتفاع واقعی پنل بیرون بزند. */ .dm-advanced-search-panel:not(.is-open) * { pointer-events: none !important; } } /* Desktop همیشه باز و بدون محدودیت */ @media (min-width: 768px) { .dm-advanced-search-panel { grid-template-rows: 1fr !important; opacity: 1 !important; overflow: visible !important; pointer-events: auto !important; transition: none !important; } .dm-advanced-search-inner { overflow: visible !important; } } /* /static/public/assets/css/hero-coverflow-v1.css */ /* ========================================================= DIASTOMY HERO — CUSTOM CINEMATIC COVERFLOW V9 no Splide positioning ========================================================= */ .dm-home-hero { position: relative; isolation: isolate; width: 100%; padding: 96px 0 58px !important; overflow: hidden; background: #080709 !important; } /* ========================================================= ACTIVE MOVIE AMBIENT BACKGROUND ========================================================= */ .dx-hero-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .dx-hero-ambient__layer { position: absolute; inset: -55px; opacity: 0; background: center 28% / cover no-repeat; transform: scale(1.08); transition: opacity 700ms ease; filter: blur(36px) saturate(.85); will-change: opacity; } .dx-hero-ambient__layer.is-active { opacity: .22; } .dx-hero-ambient::after { content: ""; position: absolute; inset: 0; background: radial-gradient( 760px 430px at 50% 35%, rgba(118,43,40,.18), transparent 68% ), linear-gradient( 180deg, rgba(7,7,9,.48), rgba(7,7,9,.80) 68%, #080709 100% ); } /* subtle floor light */ .dm-home-hero::after { content: ""; position: absolute; z-index: 0; left: 50%; bottom: 35px; width: min(78vw, 950px); height: 85px; transform: translateX(-50%); pointer-events: none; background: radial-gradient( ellipse, rgba(185,73,55,.13), transparent 67% ); filter: blur(20px); } /* ========================================================= HERO STAGE ========================================================= */ .dm-home-hero .hero-main-slider { position: relative !important; z-index: 2 !important; inset: auto !important; width: 100% !important; height: 555px !important; overflow: visible !important; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .dm-home-hero .dx-hero-track { position: relative !important; width: 100% !important; height: 100% !important; overflow: visible !important; } .dm-home-hero .dx-hero-list { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; transform: none !important; } /* ========================================================= ALL CARDS ========================================================= */ .dx-hero-slide { position: absolute !important; top: 5px !important; left: 50% !important; width: clamp(285px, 25vw, 350px) !important; height: auto !important; margin: 0 !important; opacity: 0; transform: translate3d(-50%, 55px, 0) scale(.62); transform-origin: center center; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; transition: transform 480ms cubic-bezier(.20,.76,.24,1), opacity 300ms ease !important; pointer-events: none; z-index: 0; } /* ========================================================= CENTER ========================================================= */ .dx-hero-slide.is-active { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); pointer-events: auto; z-index: 10; } /* ========================================================= LEFT / RIGHT NEIGHBOURS ========================================================= */ .dx-hero-slide.is-prev { opacity: .57; transform: translate3d( calc(-50% - 305px), 40px, 0 ) scale(.82); pointer-events: auto; z-index: 5; } .dx-hero-slide.is-next { opacity: .57; transform: translate3d( calc(-50% + 305px), 40px, 0 ) scale(.82); pointer-events: auto; z-index: 5; } /* ========================================================= SECOND LEFT / RIGHT CARDS ========================================================= */ .dx-hero-slide.is-prev2 { opacity: .22; transform: translate3d( calc(-50% - 515px), 62px, 0 ) scale(.67); z-index: 2; } .dx-hero-slide.is-next2 { opacity: .22; transform: translate3d( calc(-50% + 515px), 62px, 0 ) scale(.67); z-index: 2; } /* ========================================================= GLASS CARD ========================================================= */ .dx-hero-card { position: relative; width: 100% !important; box-sizing: border-box; padding: 10px 10px 17px; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255,255,255,.13); background: linear-gradient( 145deg, rgba(255,255,255,.09), rgba(255,255,255,.022) ); box-shadow: 0 24px 60px rgba(0,0,0,.37), inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .dx-hero-slide.is-active .dx-hero-card { border-color: rgba(255,255,255,.24); background: linear-gradient( 145deg, rgba(255,255,255,.115), rgba(255,255,255,.03) ); box-shadow: 0 34px 82px rgba(0,0,0,.48), 0 10px 36px rgba(155,56,43,.12), inset 0 1px 0 rgba(255,255,255,.15); } /* ========================================================= POSTER نزدیک به نمونه ========================================================= */ .dx-hero-poster { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.10; overflow: hidden; border-radius: 20px; background: #111; box-shadow: 0 14px 34px rgba(0,0,0,.26); } .dx-hero-poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .dx-hero-poster-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 0deg, rgba(0,0,0,.33), transparent 40% ); } /* side cards darker without filter */ .dx-hero-slide.is-prev .dx-hero-poster::after, .dx-hero-slide.is-next .dx-hero-poster::after, .dx-hero-slide.is-prev2 .dx-hero-poster::after, .dx-hero-slide.is-next2 .dx-hero-poster::after { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(3,3,5,.18); pointer-events: none; } /* quality not needed */ .dx-hero-quality { display: none !important; } /* ========================================================= WATCH TRAILER PILL ========================================================= */ .dx-hero-play { position: absolute; left: 50%; bottom: 16px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 138px; height: 40px; padding: 0 15px; transform: translate3d(-50%, 6px, 0); opacity: 0; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid rgba(255,255,255,.20); background: rgba(9,8,11,.67); box-shadow: 0 10px 25px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); transition: opacity 220ms ease, transform 320ms cubic-bezier(.2,.76,.24,1); } .dx-hero-slide.is-active .dx-hero-play { opacity: 1; transform: translate3d(-50%,0,0); } .dx-hero-slide:not(.is-active) .dx-hero-play { display: none; } .dx-hero-play svg { width: 14px; height: 14px; } /* ========================================================= INFO ========================================================= */ .dx-hero-info { padding: 16px 5px 1px; text-align: center; } .dx-hero-en-title { margin: 0; color: rgba(255,255,255,.97); font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dx-hero-fa-title { margin-top: 4px; color: rgba(255,255,255,.46); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dx-hero-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; color: rgba(255,255,255,.47); font-size: 9px; } .dx-hero-meta > span:not(:last-child)::after { content: "•"; margin-right: 5px; color: rgba(255,255,255,.20); } .dx-hero-rating { display: inline-flex; align-items: center; gap: 4px; } .dx-hero-rating svg { width: 11px; height: 11px; fill: #e9b64a; } /* ========================================================= SIDE INFO ========================================================= */ .dx-hero-slide.is-prev .dx-hero-info, .dx-hero-slide.is-next .dx-hero-info { opacity: .68; } .dx-hero-slide.is-prev2 .dx-hero-info, .dx-hero-slide.is-next2 .dx-hero-info { opacity: .30; } /* ========================================================= DOTS ========================================================= */ .dx-hero-dots { position: absolute; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; } .dx-hero-dot { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.20); transition: transform 220ms ease, background 220ms ease; cursor: pointer; } .dx-hero-dot.is-active { transform: scale(1.55); background: #dc3239; } /* old arrows */ .dm-home-hero .hero-prev, .dm-home-hero .hero-next { display: none !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dm-home-hero { padding: 92px 0 38px !important; background: #080709 !important; } .dx-hero-ambient__layer { filter: blur(24px); opacity: 0; } .dx-hero-ambient__layer.is-active { opacity: .15; } .dm-home-hero .hero-main-slider { height: 425px !important; } /* کارت مرکزی دقیقاً: left:50% + translateX(-50%) پس دیگر هیچ کتابخانه‌ای نمی‌تواند آن را جابه‌جا کند. */ .dx-hero-slide { top: 0 !important; left: 50% !important; width: 68vw !important; max-width: 280px !important; opacity: 0; transform: translate3d(-50%, 35px, 0) scale(.60); transition: transform 410ms cubic-bezier(.20,.76,.24,1), opacity 250ms ease !important; } .dx-hero-slide.is-active { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); z-index: 10; } /* دقیقاً دو طرف متقارن */ .dx-hero-slide.is-prev { opacity: .38; transform: translate3d( calc(-50% - 53vw), 26px, 0 ) scale(.78); z-index: 5; } .dx-hero-slide.is-next { opacity: .38; transform: translate3d( calc(-50% + 53vw), 26px, 0 ) scale(.78); z-index: 5; } .dx-hero-slide.is-prev2 { opacity: .10; transform: translate3d( calc(-50% - 82vw), 44px, 0 ) scale(.62); z-index: 2; } .dx-hero-slide.is-next2 { opacity: .10; transform: translate3d( calc(-50% + 82vw), 44px, 0 ) scale(.62); z-index: 2; } .dx-hero-card { padding: 7px 7px 11px; border-radius: 20px; backdrop-filter: none; -webkit-backdrop-filter: none; } .dx-hero-poster { aspect-ratio: 1 / 1.08; border-radius: 14px; } .dx-hero-play { bottom: 10px; min-width: 108px; height: 34px; padding: 0 11px; gap: 5px; font-size: 9px; backdrop-filter: none; -webkit-backdrop-filter: none; } .dx-hero-play svg { width: 12px; height: 12px; } .dx-hero-info { padding: 10px 4px 1px; } .dx-hero-en-title { font-size: 16px; } .dx-hero-fa-title { margin-top: 3px; font-size: 9px; } .dx-hero-meta { margin-top: 6px; gap: 3px; font-size: 8px; } .dx-hero-rating svg { width: 9px; height: 9px; } .dx-hero-dots { gap: 7px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .dx-hero-slide, .dx-hero-play, .dx-hero-dot { transition-duration: 1ms !important; } } /* ========================================================= HERO FULL DE-SPLIDE V10 ========================================================= */ .dm-home-hero .dx-hero-track { position: relative !important; width: 100% !important; height: 100% !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } .dm-home-hero .dx-hero-list { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; transform: none !important; } /* هیچ کنترل قدیمی Splide داخل Hero نمایش داده نشود */ .dm-home-hero .splide__arrows, .dm-home-hero .splide__arrow, .dm-home-hero .hero-prev, .dm-home-hero .hero-next, .dm-home-hero [class*="hero-prev"], .dm-home-hero [class*="hero-next"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* fallback: حتی قبل از JS کارت اول دیده شود */ .dm-home-hero .dx-hero-slide.is-active { opacity: 1 !important; } /* Mobile */ @media (max-width: 767px) { .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 425px !important; } } /* DIASTOMY HERO MOBILE POLISH V11 */ @media (max-width: 767px) { /* ----------------------------------------- HERO overall ----------------------------------------- */ .dm-home-hero { /* فاصله بیشتر Hero از لوگوی بالای صفحه */ padding: 110px 0 4px !important; } .dm-home-hero .hero-main-slider { height: 390px !important; } .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 390px !important; } /* ----------------------------------------- Main card size ----------------------------------------- */ .dx-hero-slide { width: 62vw !important; max-width: 255px !important; } .dx-hero-slide.is-active { transform: translate3d(-50%, 0, 0) scale(1) !important; } /* ----------------------------------------- Side cards ----------------------------------------- */ .dx-hero-slide.is-prev { opacity: .30 !important; transform: translate3d( calc(-50% - 49vw), 27px, 0 ) scale(.77) !important; } .dx-hero-slide.is-next { opacity: .30 !important; transform: translate3d( calc(-50% + 49vw), 27px, 0 ) scale(.77) !important; } .dx-hero-slide.is-prev2 { opacity: .06 !important; transform: translate3d( calc(-50% - 75vw), 40px, 0 ) scale(.62) !important; } .dx-hero-slide.is-next2 { opacity: .06 !important; transform: translate3d( calc(-50% + 75vw), 40px, 0 ) scale(.62) !important; } /* ----------------------------------------- Glass card ----------------------------------------- */ .dx-hero-card { padding: 6px 6px 10px !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.09) !important; background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.012) ) !important; box-shadow: 0 13px 31px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.055) !important; } .dx-hero-slide.is-active .dx-hero-card { border-color: rgba(255,255,255,.16) !important; box-shadow: 0 19px 45px rgba(0,0,0,.37), 0 7px 25px rgba(105,28,31,.08), inset 0 1px 0 rgba(255,255,255,.08) !important; } /* ----------------------------------------- Poster ----------------------------------------- */ .dx-hero-poster { aspect-ratio: 1 / 1.05 !important; border-radius: 13px !important; box-shadow: 0 9px 22px rgba(0,0,0,.22) !important; } .dx-hero-poster img { object-position: center 31% !important; } /* ----------------------------------------- Trailer button ----------------------------------------- */ .dx-hero-play { bottom: 9px !important; min-width: 102px !important; height: 32px !important; padding: 0 10px !important; gap: 5px !important; font-size: 8.5px !important; border: 1px solid rgba(255,255,255,.14) !important; background: rgba(7,7,9,.70) !important; box-shadow: 0 7px 18px rgba(0,0,0,.20) !important; } .dx-hero-play svg { width: 11px !important; height: 11px !important; } /* ----------------------------------------- Movie information ----------------------------------------- */ .dx-hero-info { padding: 9px 4px 0 !important; } .dx-hero-en-title { font-size: 15.5px !important; line-height: 1.2 !important; } .dx-hero-fa-title { margin-top: 3px !important; font-size: 8.5px !important; } .dx-hero-meta { margin-top: 5px !important; gap: 3px !important; font-size: 7.5px !important; } /* side information quieter */ .dx-hero-slide.is-prev .dx-hero-info, .dx-hero-slide.is-next .dx-hero-info { opacity: .32 !important; } /* ----------------------------------------- Dots ----------------------------------------- */ .dx-hero-dots { bottom: 3px !important; gap: 6px !important; } .dx-hero-dot { width: 5px !important; height: 5px !important; } .dx-hero-dot.is-active { width: 16px !important; height: 5px !important; border-radius: 999px !important; transform: none !important; } /* ----------------------------------------- Kill every old navigation arrow ----------------------------------------- */ .dm-home-hero .hero-prev, .dm-home-hero .hero-next, .dm-home-hero .hero-prev-btn, .dm-home-hero .hero-next-btn, .dm-home-hero .slider-prev, .dm-home-hero .slider-next, .dm-home-hero .splide__arrow, .dm-home-hero [data-hero-prev], .dm-home-hero [data-hero-next] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* DIASTOMY HEADER ↔ HERO MERGE V1 */ /* * هیرو کمی بیاید بالا تا با هدر یکپارچه شود */ .dm-home-hero { position: relative !important; z-index: 1 !important; margin-top: -22px !important; padding-top: 54px !important; } /* * نرمی شروع هیرو */ .dm-home-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 92px; pointer-events: none; z-index: 0; background: linear-gradient( 180deg, rgba(8, 8, 12, 0.00) 0%, rgba(18, 10, 14, 0.18) 22%, rgba(60, 18, 18, 0.12) 48%, rgba(8, 8, 12, 0.00) 100% ); } /* * محتوای هیرو بالای pseudo باشد */ .dm-home-hero > * { position: relative; z-index: 1; } @media (max-width: 767px) { .dm-home-hero { margin-top: -18px !important; padding-top: 46px !important; } .dm-home-hero::before { height: 74px; } } @media (max-width: 390px) { .dm-home-hero { margin-top: -15px !important; padding-top: 42px !important; } } /* DIASTOMY HERO STAGE CLEAN V12 */ /* ========================================================= REMOVE THE LARGE EMPTY LOWER AREA ========================================================= */ .dm-home-hero { padding-bottom: 18px !important; } /* * قبلاً stage حدود 555px بود و کارت خیلی زودتر تمام می‌شد. * حالا ارتفاع واقعی‌تر می‌شود. */ .dm-home-hero .hero-main-slider { height: clamp(410px, 38vw, 485px) !important; } .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 100% !important; } /* ambient باید absolute بماند */ .dm-home-hero > .dx-hero-ambient { position: absolute !important; inset: 0 !important; z-index: 0 !important; } /* ========================================================= DOTS ========================================================= */ .dm-home-hero .dx-hero-dots { bottom: 8px !important; } /* ========================================================= REMOVE ALL LEGACY ARROWS Custom coverflow دیگر به arrow قدیمی نیاز ندارد. ========================================================= */ .dm-home-hero .hero-prev, .dm-home-hero .hero-next, .dm-home-hero .hero-prev-btn, .dm-home-hero .hero-next-btn, .dm-home-hero .slider-prev, .dm-home-hero .slider-next, .dm-home-hero .splide__arrows, .dm-home-hero .splide__arrow, .dm-home-hero button[class*="prev"], .dm-home-hero button[class*="next"], .dm-home-hero a[class*="prev"], .dm-home-hero a[class*="next"], .dm-home-hero [aria-label*="previous" i], .dm-home-hero [aria-label*="next" i] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dm-home-hero { padding-bottom: 14px !important; } .dm-home-hero .hero-main-slider { height: 372px !important; } .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 372px !important; } .dm-home-hero .dx-hero-dots { bottom: 4px !important; } } @media (max-width: 390px) { .dm-home-hero .hero-main-slider, .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 360px !important; } } /* DIASTOMY HERO REAL HEIGHT FIX V13 */ /* * مهم: * Heroهای قدیمی min-height بزرگی داشتند. * همین باعث فضای سیاه بعد از کارت شده بود. */ .dm-home-hero { min-height: 0 !important; height: auto !important; padding-bottom: 12px !important; overflow: hidden !important; } /* * فقط خود stage به اندازه مورد نیاز کارت باشد. */ .dm-home-hero .hero-main-slider { position: relative !important; min-height: 0 !important; height: clamp(455px, 42vw, 545px) !important; } .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { position: relative !important; min-height: 0 !important; height: 100% !important; } /* * dots نزدیک انتهای واقعی Hero */ .dm-home-hero .dx-hero-dots { bottom: 5px !important; } /* * حتی اگر selector فلش قدیمی جایی دوباره ظاهر شد */ .dm-home-hero .hero-prev, .dm-home-hero .hero-next { display: none !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dm-home-hero { min-height: 0 !important; padding-bottom: 8px !important; } .dm-home-hero .hero-main-slider { min-height: 0 !important; /* * اندازه کارت فعلی + فضای کوتاه برای dots */ height: 355px !important; } .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 355px !important; } .dm-home-hero .dx-hero-dots { bottom: 0 !important; } } @media (max-width: 390px) { .dm-home-hero .hero-main-slider, .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 345px !important; } } /* DIASTOMY HERO SEAMLESS TOP V8 */ /* ========================================================= HEADER -> HERO MERGE ========================================================= */ .dm-home-hero { position: relative !important; /* * Hero physically slides underneath header. */ margin-top: -34px !important; /* * Keep content comfortable while visually removing gap. */ padding-top: 58px !important; border-top: 0 !important; outline: 0 !important; background: radial-gradient( 820px 420px at 50% 8%, rgba(105, 34, 38, .115), transparent 66% ), radial-gradient( 620px 390px at 50% 52%, rgba(95, 23, 28, .075), transparent 72% ), #050507 !important; } /* * Kill previous bridge pseudo style completely. */ .dm-home-hero::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 132px !important; z-index: 0 !important; pointer-events: none !important; /* * No hard edge: * same dark tone as the header at top, * fades into Hero naturally. */ background: linear-gradient( 180deg, rgba(8, 8, 12, .94) 0%, rgba(12, 9, 12, .76) 18%, rgba(31, 12, 16, .38) 45%, rgba(21, 9, 12, .14) 70%, transparent 100% ) !important; } /* * Additional soft red depth. */ .dm-home-hero::after { content: ""; position: absolute; top: 8px; left: 12%; right: 12%; height: 125px; z-index: 0; pointer-events: none; background: radial-gradient( ellipse at center, rgba(154, 25, 34, .09), transparent 68% ); filter: blur(30px); } /* * Hero content remains above the blend layers. */ .dm-home-hero > * { position: relative; z-index: 2; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dm-home-hero { margin-top: -28px !important; padding-top: 48px !important; background: radial-gradient( 520px 300px at 50% 5%, rgba(105, 29, 35, .10), transparent 68% ), #050507 !important; } .dm-home-hero::before { height: 106px !important; background: linear-gradient( 180deg, rgba(8,8,12,.96) 0%, rgba(13,9,12,.70) 25%, rgba(37,12,17,.28) 58%, transparent 100% ) !important; } .dm-home-hero::after { top: 4px; left: 5%; right: 5%; height: 95px; filter: blur(24px); } } @media (max-width: 390px) { .dm-home-hero { margin-top: -24px !important; padding-top: 45px !important; } } /* ========================================================= DIASTOMY HERO REAL SEAMLESS V17 Real transparent header -> hero transition ========================================================= */ /* * مهم: * خود section دیگر background ندارد. * بنابراین هیچ خط افقی‌ای نمی‌تواند از background آن ساخته شود. */ .dm-home-hero { position: relative !important; isolation: isolate !important; margin-top: -26px !important; border: 0 !important; border-top: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } /* * کل فضای سینمایی Hero روی pseudo-layer ساخته می‌شود. * * بالای این layer کاملاً transparent است و طی حدود 150px * آرام وارد فضای Hero می‌شود. */ .dm-home-hero::before { content: "" !important; position: absolute !important; z-index: 0 !important; inset: 0 !important; pointer-events: none !important; background: radial-gradient( 780px 430px at 50% 23%, rgba(107, 30, 38, .14), transparent 68% ), radial-gradient( 680px 480px at 50% 56%, rgba(74, 18, 27, .095), transparent 72% ), linear-gradient( 180deg, rgba(10,8,11,.20) 0%, rgba(8,7,10,.74) 20%, rgba(5,5,7,.96) 43%, #050507 72%, #050507 100% ) !important; /* * این قسمت خط صاف را واقعاً حذف می‌کند. */ -webkit-mask-image: linear-gradient( to bottom, transparent 0px, rgba(0,0,0,.12) 28px, rgba(0,0,0,.48) 74px, rgba(0,0,0,.86) 122px, #000 170px ) !important; mask-image: linear-gradient( to bottom, transparent 0px, rgba(0,0,0,.12) 28px, rgba(0,0,0,.48) 74px, rgba(0,0,0,.86) 122px, #000 170px ) !important; } /* * نور بسیار ملایم پشت کارت، * بدون ساختن edge جدید. */ .dm-home-hero::after { content: "" !important; position: absolute !important; z-index: 0 !important; top: 45px !important; left: 8% !important; right: 8% !important; height: 260px !important; pointer-events: none !important; background: radial-gradient( ellipse at 50% 35%, rgba(143, 28, 38, .10), rgba(82, 19, 28, .045) 43%, transparent 73% ) !important; filter: blur(36px) !important; opacity: .9 !important; } /* Hero content بالای ambient layer */ .dm-home-hero > * { position: relative !important; z-index: 2 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dm-home-hero { margin-top: -30px !important; background: transparent !important; } .dm-home-hero::before { background: radial-gradient( 520px 330px at 50% 21%, rgba(105,27,35,.13), transparent 68% ), radial-gradient( 440px 400px at 50% 53%, rgba(71,17,25,.08), transparent 72% ), linear-gradient( 180deg, rgba(8,7,10,.10) 0%, rgba(7,6,9,.68) 22%, rgba(5,5,7,.95) 45%, #050507 72%, #050507 100% ) !important; -webkit-mask-image: linear-gradient( to bottom, transparent 0px, rgba(0,0,0,.10) 25px, rgba(0,0,0,.40) 64px, rgba(0,0,0,.78) 106px, #000 150px ) !important; mask-image: linear-gradient( to bottom, transparent 0px, rgba(0,0,0,.10) 25px, rgba(0,0,0,.40) 64px, rgba(0,0,0,.78) 106px, #000 150px ) !important; } .dm-home-hero::after { top: 36px !important; left: 0 !important; right: 0 !important; height: 220px !important; filter: blur(30px) !important; } } /* ========================================================= MOBILE HERO DOTS — FINAL WHITE FIX ========================================================= */ @media (max-width: 767px) { /* همه dots */ .dm-home-hero .dx-hero-dots .dx-hero-dot, .dm-home-hero .dx-hero-dots button { background: rgba(255,255,255,.14) !important; border: 0 !important; opacity: 1 !important; width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; padding: 0 !important; border-radius: 999px !important; box-shadow: none !important; } /* ACTIVE — سفید کامل */ .dm-home-hero .dx-hero-dots .dx-hero-dot.is-active, .dm-home-hero .dx-hero-dots .dx-hero-dot.active, .dm-home-hero .dx-hero-dots button.is-active, .dm-home-hero .dx-hero-dots button.active, .dm-home-hero .dx-hero-dots [aria-current="true"] { width: 31px !important; min-width: 31px !important; height: 8px !important; background: #FFFFFF !important; opacity: 1 !important; box-shadow: 0 0 12px rgba(255,255,255,.20) !important; } } /* ========================================================= MOBILE HERO DOT — FORCE WHITE FINAL V2 ========================================================= */ @media (max-width: 767px) { .dm-home-hero .dx-hero-dots > .dm-force-white-active { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 8px !important; min-height: 8px !important; max-height: 8px !important; opacity: 1 !important; background: #fff !important; background-color: #fff !important; background-image: none !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 0 10px rgba(255,255,255,.22) !important; } .dm-home-hero .dx-hero-dots > .dm-force-white-active::before, .dm-home-hero .dx-hero-dots > .dm-force-white-active::after { background: #fff !important; background-color: #fff !important; opacity: 1 !important; } .dm-home-hero .dx-hero-dots > .dm-force-white-idle { width: 8px !important; min-width: 8px !important; height: 8px !important; min-height: 8px !important; background: rgba(255,255,255,.16) !important; opacity: 1 !important; border-radius: 999px !important; } } /* /static/public/assets/css/halfprice-editorial-v2.css */ /* ========================================================= DIASTOMY HALFPRICE — STACKED STREAMING V2 ========================================================= */ .hp-stack-section { position: relative; isolation: isolate; width: min(1180px, calc(100% - 28px)); margin: 64px auto 82px; padding: 27px 24px 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.065); border-radius: 32px; background: radial-gradient( 520px 310px at 50% 42%, rgba(148,25,50,.12), transparent 70% ), linear-gradient( 180deg, rgba(17,14,19,.92), rgba(6,6,9,.96) ); box-shadow: 0 25px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045); } /* ========================= AMBIENT ========================= */ .hp-stack-glow { position: absolute; width: 520px; height: 320px; left: 50%; top: 160px; transform: translateX(-50%); pointer-events: none; border-radius: 50%; background: rgba(154,22,48,.10); filter: blur(85px); z-index: -1; } /* ========================= HEADER ========================= */ .hp-stack-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; max-width: 900px; margin: 0 auto 24px; } .hp-stack-kicker { display: block; margin-bottom: 3px; color: rgba(255,255,255,.26); font-family: system-ui, sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .16em; } .hp-stack-heading { margin: 0; color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 850; letter-spacing: -.025em; } .hp-stack-saving { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.035); } .hp-stack-saving strong { color: #ff3c52; font-family: system-ui, sans-serif; font-size: 19px; line-height: 1; } .hp-stack-saving small { color: rgba(255,255,255,.38); font-size: 9px; } /* ========================= STAGE ========================= */ .hp-stack-stage { position: relative; width: 100%; height: 420px; perspective: 1100px; } .hp-stack-deck { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } /* ========================= CARDS ========================= */ .hp-stack-card { position: absolute; top: 50%; left: 50%; width: min(430px, 54vw); aspect-ratio: 1.34 / 1; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.72); transform-origin: center; transition: transform .52s cubic-bezier(.22,.8,.2,1), opacity .38s ease, filter .38s ease; will-change: transform, opacity; } .hp-stack-card-link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255,255,255,.13); background: #111; box-shadow: 0 20px 50px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08); text-decoration: none; } .hp-stack-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hp-stack-shade { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(4,4,7,.03) 20%, rgba(5,4,8,.16) 52%, rgba(6,5,9,.92) 100% ); } /* ACTIVE */ .hp-stack-card.is-active { z-index: 10; opacity: 1; pointer-events: auto; filter: none; transform: translate(-50%, -50%) translateZ(75px) scale(1); } /* PREV 1 */ .hp-stack-card.is-prev-1 { z-index: 7; opacity: .62; filter: brightness(.60); transform: translate(-50%, -50%) translateX(-315px) translateZ(-30px) rotateY(7deg) scale(.82); } /* NEXT 1 */ .hp-stack-card.is-next-1 { z-index: 7; opacity: .62; filter: brightness(.60); transform: translate(-50%, -50%) translateX(315px) translateZ(-30px) rotateY(-7deg) scale(.82); } /* SECOND LAYER */ .hp-stack-card.is-prev-2 { z-index: 4; opacity: .24; filter: brightness(.42); transform: translate(-50%, -50%) translateX(-500px) translateZ(-90px) rotateY(10deg) scale(.68); } .hp-stack-card.is-next-2 { z-index: 4; opacity: .24; filter: brightness(.42); transform: translate(-50%, -50%) translateX(500px) translateZ(-90px) rotateY(-10deg) scale(.68); } /* ========================= CARD DETAILS ========================= */ .hp-stack-card-saving { position: absolute; top: 15px; right: 15px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; color: #ff3951; border: 1px solid rgba(255,255,255,.11); background: rgba(10,9,14,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } .hp-stack-card-saving svg { width: 17px; height: 17px; } .hp-stack-quality { position: absolute; left: 15px; top: 15px; z-index: 4; padding: 5px 8px; border-radius: 8px; color: rgba(255,255,255,.72); font-family: system-ui, sans-serif; font-size: 8px; background: rgba(7,7,10,.55); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hp-stack-content { position: absolute; z-index: 4; left: 20px; right: 20px; bottom: 18px; text-align: center; } .hp-stack-pill { display: inline-flex; align-items: center; height: 26px; margin-bottom: 7px; padding: 0 10px; border-radius: 999px; color: rgba(255,255,255,.76); font-size: 8px; font-weight: 650; background: rgba(11,10,15,.56); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } .hp-stack-title { margin: 0 0 5px; overflow: hidden; color: #fff; font-size: clamp(20px,2.4vw,28px); font-weight: 850; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; } .hp-stack-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; color: rgba(255,255,255,.47); font-size: 9px; } .hp-stack-meta > span:not(:last-child)::after { content: "•"; margin-right: 7px; color: rgba(255,255,255,.18); } .hp-stack-rating { display: inline-flex; align-items: center; gap: 3px; } .hp-stack-rating svg { width: 10px; height: 10px; color: #f4c64b; } /* ========================= DOTS ========================= */ .hp-stack-dots { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 16px; margin-top: 1px; } .hp-stack-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 99px; cursor: pointer; background: rgba(255,255,255,.18); transition: width .25s ease, background .25s ease; } .hp-stack-dot.is-active { width: 25px; background: linear-gradient( 90deg, #f52f46, #cf1f36 ); box-shadow: 0 0 15px rgba(235,37,59,.18); } /* ========================= FOOTER ========================= */ .hp-stack-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; max-width: 900px; margin: 20px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.045); } .hp-stack-footer strong { display: block; margin-bottom: 2px; color: #fff; font-size: 15px; font-weight: 800; } .hp-stack-footer > div > span { color: rgba(255,255,255,.30); font-size: 9px; } .hp-stack-all { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.52); text-decoration: none; font-size: 10px; font-weight: 700; transition: color .2s ease; } .hp-stack-all:hover { color: #fff; } .hp-stack-all svg { width: 14px; height: 14px; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .hp-stack-section { width: calc(100% - 18px); margin: 44px auto 56px; padding: 20px 12px 18px; border-radius: 25px; } .hp-stack-header { margin-bottom: 7px; padding: 0 5px; } .hp-stack-heading { font-size: 20px; } .hp-stack-saving { padding: 7px 9px; } .hp-stack-saving strong { font-size: 16px; } .hp-stack-saving small { display: none; } .hp-stack-stage { height: 310px; } .hp-stack-card { width: min(285px, 72vw); aspect-ratio: 1.23 / 1; } .hp-stack-card-link { border-radius: 22px; } .hp-stack-card.is-prev-1 { opacity: .48; transform: translate(-50%, -50%) translateX(-205px) scale(.78); } .hp-stack-card.is-next-1 { opacity: .48; transform: translate(-50%, -50%) translateX(205px) scale(.78); } .hp-stack-card.is-prev-2 { opacity: .14; transform: translate(-50%, -50%) translateX(-310px) scale(.66); } .hp-stack-card.is-next-2 { opacity: .14; transform: translate(-50%, -50%) translateX(310px) scale(.66); } .hp-stack-content { left: 13px; right: 13px; bottom: 12px; } .hp-stack-title { font-size: 18px; } .hp-stack-pill { height: 23px; margin-bottom: 5px; font-size: 7.5px; } .hp-stack-card-saving { width: 31px; height: 31px; top: 10px; right: 10px; } .hp-stack-quality { top: 10px; left: 10px; } .hp-stack-footer { margin-top: 15px; padding: 14px 5px 0; } .hp-stack-footer strong { font-size: 14px; } .hp-stack-footer > div > span { display: none; } } @media (max-width: 390px) { .hp-stack-stage { height: 288px; } .hp-stack-card { width: min(265px, 73vw); } .hp-stack-card.is-prev-1 { transform: translate(-50%, -50%) translateX(-185px) scale(.76); } .hp-stack-card.is-next-1 { transform: translate(-50%, -50%) translateX(185px) scale(.76); } } @media (prefers-reduced-motion: reduce) { .hp-stack-card { transition-duration: 1ms !important; } } /* DIASTOMY HALFPRICE SIMPLE FLAT V3 */ /* --------------------------------- remove big glass box around section --------------------------------- */ .hp-stack-section{ width: min(1180px, calc(100% - 28px)) !important; margin: 56px auto 84px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; isolation: isolate; } .hp-stack-section::before, .hp-stack-section::after{ content: none !important; display: none !important; } /* --------------------------------- make inner wrappers flat too --------------------------------- */ .hp-stack-section .hp-stack-header, .hp-stack-section .hp-stack-head, .hp-stack-section .hp-stack-topbar, .hp-stack-section .hp-stack-body, .hp-stack-section .hp-stack-content, .hp-stack-section .hp-stack-shell, .hp-stack-section .hp-stack-frame, .hp-stack-section .hp-stack-footer, .hp-stack-section .hp-stack-bottom{ background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* --------------------------------- header spacing --------------------------------- */ .hp-stack-section .hp-stack-header, .hp-stack-section .hp-stack-head, .hp-stack-section .hp-stack-topbar{ padding: 0 4px 14px !important; margin: 0 0 10px !important; } /* --------------------------------- keep slider area clean --------------------------------- */ .hp-stack-section #hp-stack-deck, .hp-stack-section .hp-stack-deck, .hp-stack-section .hp-stack-slider, .hp-stack-section .hp-stack-stage, .hp-stack-section .hp-stack-cards{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* --------------------------------- keep actual cards premium --------------------------------- */ .hp-stack-section .hp-stack-card{ box-shadow: 0 20px 50px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05) !important; } /* --------------------------------- remove divider line under dots/footer --------------------------------- */ .hp-stack-section hr, .hp-stack-section .hp-stack-divider, .hp-stack-section .hp-stack-separator{ display: none !important; } /* --------------------------------- footer row cleaner --------------------------------- */ .hp-stack-section .hp-stack-footer, .hp-stack-section .hp-stack-bottom{ padding: 10px 4px 0 !important; margin-top: 12px !important; } /* --------------------------------- mobile fine tune --------------------------------- */ @media (max-width: 767px){ .hp-stack-section{ width: calc(100% - 22px) !important; margin: 42px auto 72px !important; padding: 0 !important; } .hp-stack-section .hp-stack-header, .hp-stack-section .hp-stack-head, .hp-stack-section .hp-stack-topbar{ padding: 0 2px 12px !important; } .hp-stack-section .hp-stack-footer, .hp-stack-section .hp-stack-bottom{ padding: 8px 2px 0 !important; margin-top: 8px !important; } } /* ========================================================= HALFPRICE MOBILE TOUCH FIX V3 ========================================================= */ #hp-stack-deck { touch-action: pan-y !important; overscroll-behavior-x: contain; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* جلوگیری از لرزش رندر کارت‌ها در Safari */ #hp-stack-deck .hp-stack-card { -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ========================================= HALFPRICE STACK MOBILE CONTENT FIX V4 ========================================= */ @media (max-width:767px){ #hp-stack-deck .hp-stack-card, #hp-stack-deck .hp-stack-card-link{ overflow:hidden!important; } #hp-stack-deck .hp-stack-content{ box-sizing:border-box!important; width:100%!important; min-width:0!important; max-width:100%!important; left:0!important; right:0!important; overflow:hidden!important; direction:ltr!important; text-align:left!important; transition: opacity .22s ease, transform .22s ease !important; } /* * کارت‌های کناری فقط پوستر باشند. * متن چند کارت دیگر روی هم نمی‌افتد. */ #hp-stack-deck .hp-stack-card:not(.is-active) .hp-stack-content{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:translateY(6px)!important; } /* * فقط کارت فعال اطلاعاتش را نمایش دهد. */ #hp-stack-deck .hp-stack-card.is-active .hp-stack-content{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:translateY(0)!important; } #hp-stack-deck .hp-stack-title{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:5px 0 4px!important; padding:0!important; overflow:hidden!important; white-space:normal!important; text-overflow:ellipsis!important; overflow-wrap:normal!important; word-break:normal!important; direction:ltr!important; text-align:left!important; font-size:13px!important; line-height:1.3!important; } #hp-stack-deck .hp-stack-meta{ width:100%!important; min-width:0!important; max-width:100%!important; overflow:hidden!important; direction:ltr!important; text-align:left!important; } } /* END HALFPRICE STACK MOBILE CONTENT FIX V4 */ /* ========================================================= DIASTOMY ROUND 5: prev/next arrows for the halfprice deck (client request — deck previously had dots only). ========================================================= */ .hp-stack-arrow { top: 50% !important; } @media (max-width: 767px) { .hp-stack-arrow--prev { left: 6px !important; } .hp-stack-arrow--next { right: 6px !important; } } /* /static/public/assets/css/home-header-clean-v14.css */ /* ========================================================= DIASTOMY HOME HEADER — CLEAN FLOATING V14 no outer box / no nested glass ========================================================= */ /* ========================================================= SHELL ========================================================= */ .dm-home-shell-v3 { position: relative; z-index: 70; width: min(820px, calc(100% - 42px)); margin: 18px auto 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* very subtle ambient light only */ .dm-home-shell-v3::after { content: ""; position: absolute; z-index: -1; top: 50%; left: 14%; right: 14%; height: 75px; transform: translateY(-50%); pointer-events: none; background: radial-gradient( ellipse at center, rgba(118, 24, 31, .08), transparent 72% ); filter: blur(28px); } /* ========================================================= TOPBAR ========================================================= */ .dm-home-topbar-v3 { direction: ltr !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 56px !important; padding: 3px 2px !important; gap: 5px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .dm-home-topbar-v3::before, .dm-home-topbar-v3::after { display: none !important; content: none !important; } /* ========================================================= WORDMARK ========================================================= */ .dm-home-brand-v12 { order: 3; margin-left: auto !important; display: flex; align-items: center; justify-content: center; padding: 0 3px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-decoration: none; } .dm-home-brand-v12 img { display: block; width: 168px; height: auto; max-height: 35px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.30)); } /* ========================================================= NOTIFICATION ========================================================= */ .dm-home-topbar-v3 > .dm-home-action-v3 { order: 1; width: 39px !important; height: 39px !important; flex: 0 0 39px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; color: rgba(255,255,255,.56) !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: color .18s ease, background .18s ease !important; } .dm-home-topbar-v3 > .dm-home-action-v3:hover { color: #fff !important; background: rgba(255,255,255,.045) !important; } /* ========================================================= ACTIONS ========================================================= */ .dm-home-actions-v3 { order: 2; display: flex !important; align-items: center !important; gap: 4px !important; margin: 0 !important; } .dm-home-actions-v3 .dm-home-action-v3 { border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ========================================================= SEARCH BUTTON — only strong accent ========================================================= */ #dm-home-search-toggle { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; color: #fff !important; background: linear-gradient( 145deg, #ff263e, #de102a ) !important; border: 1px solid rgba(255,255,255,.11) !important; box-shadow: 0 8px 22px rgba(217,16,42,.23), inset 0 1px 0 rgba(255,255,255,.20) !important; transition: transform .15s ease, box-shadow .18s ease !important; } #dm-home-search-toggle:active { transform: scale(.92) !important; } #dm-home-search-toggle svg { width: 18px !important; height: 18px !important; } /* ========================================================= PREMIUM — simple modern sparkle ========================================================= */ .dm-home-action-v3--vip { position: relative !important; width: 38px !important; height: 38px !important; flex: 0 0 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #f4c751 !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; } .dm-home-action-v3--vip svg { display: none !important; } .dm-home-action-v3--vip::before { content: "✦"; color: #f5ca54; font-family: Arial, sans-serif; font-size: 21px; line-height: 1; text-shadow: 0 0 13px rgba(244,199,81,.18); } .dm-home-action-v3--vip::after { display: none !important; content: none !important; } /* ========================================================= ICONS ========================================================= */ .dm-home-action-v3 svg { width: 19px !important; height: 19px !important; stroke-width: 1.65 !important; } /* ========================================================= SEARCH DROPDOWN ========================================================= */ .dm-home-search-panel-v3 { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; z-index: 100 !important; width: min(460px, 100%) !important; padding: 6px !important; border-radius: 15px !important; background: rgba(22,23,28,.94) !important; border: 1px solid rgba(255,255,255,.075) !important; box-shadow: 0 18px 42px rgba(0,0,0,.34) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-5px) scale(.985) !important; transform-origin: top left; transition: opacity .15s ease, transform .17s ease, visibility .15s ease !important; } .dm-home-shell-v3.is-search-open .dm-home-search-panel-v3 { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; } /* search form */ .dm-home-search-v3 { direction: rtl !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 47px !important; gap: 8px !important; padding: 4px 8px 4px 4px !important; border-radius: 11px !important; background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.05) !important; } .dm-home-search-v3 > svg { width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; flex: 0 0 18px !important; color: rgba(255,255,255,.38) !important; } #dm-home-search-input { flex: 1 1 auto !important; min-width: 0 !important; height: 37px !important; padding: 0 !important; border: 0 !important; outline: 0 !important; color: #fff !important; background: transparent !important; font-family: inherit !important; font-size: 11px !important; text-align: right !important; box-shadow: none !important; } #dm-home-search-input::placeholder { color: rgba(255,255,255,.27) !important; } .dm-home-search-submit-v3 { min-width: 65px !important; height: 37px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 9px !important; color: #fff !important; background: linear-gradient( 145deg, #fa263b, #d90e27 ) !important; font-family: inherit !important; font-size: 10px !important; font-weight: 750 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dm-home-shell-v3 { width: calc(100% - 32px) !important; max-width: 470px !important; margin-top: 14px !important; } .dm-home-topbar-v3 { min-height: 50px !important; padding: 2px 0 !important; } .dm-home-brand-v12 img { width: 138px; max-height: 29px; } .dm-home-topbar-v3 > .dm-home-action-v3 { width: 36px !important; height: 36px !important; flex-basis: 36px !important; } #dm-home-search-toggle { width: 39px !important; height: 39px !important; flex-basis: 39px !important; } .dm-home-action-v3--vip { width: 35px !important; height: 35px !important; flex-basis: 35px !important; } .dm-home-action-v3--vip::before { font-size: 19px; } .dm-home-search-panel-v3 { left: 0 !important; right: 0 !important; width: 100% !important; } } @media (max-width: 390px) { .dm-home-shell-v3 { width: calc(100% - 24px) !important; } .dm-home-brand-v12 img { width: 121px; } } /* ========================================================= DIASTOMY HEADER FINAL COMPOSITION V15 ========================================================= */ @media (max-width: 767px) { /* کل هدر جمع‌وجورتر */ .dm-home-shell-v3 { width: calc(100% - 44px) !important; max-width: 430px !important; margin: 18px auto 0 !important; padding: 0 !important; } /* یک خط تمیز */ .dm-home-topbar-v3 { direction: rtl !important; display: flex !important; align-items: center !important; min-height: 48px !important; gap: 7px !important; padding: 0 !important; } /* لوگو سمت راست */ .dm-home-brand-v12 { order: 1 !important; margin: 0 !important; margin-left: auto !important; padding: 0 !important; flex: 0 0 auto !important; } .dm-home-brand-v12 img { width: 142px !important; height: auto !important; max-height: 30px !important; object-fit: contain !important; } /* اکشن‌ها سمت چپ */ .dm-home-actions-v3 { order: 2 !important; display: flex !important; align-items: center !important; gap: 5px !important; margin: 0 !important; } /* notification */ .dm-home-topbar-v3 > .dm-home-action-v3 { order: 3 !important; width: 34px !important; height: 34px !important; flex: 0 0 34px !important; margin: 0 !important; color: rgba(255,255,255,.52) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .dm-home-topbar-v3 > .dm-home-action-v3 svg { width: 18px !important; height: 18px !important; } /* سرچ دیگر غول‌آسا نیست */ #dm-home-search-toggle { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; border-radius: 50% !important; color: #fff !important; background: rgba(237,28,36,.13) !important; border: 1px solid rgba(237,28,36,.28) !important; box-shadow: 0 0 18px rgba(237,28,36,.07) !important; } #dm-home-search-toggle svg { width: 18px !important; height: 18px !important; } /* هنگام باز بودن سرچ accent بیشتر */ .dm-home-shell-v3.is-search-open #dm-home-search-toggle { background: #ed1c24 !important; border-color: rgba(255,255,255,.15) !important; box-shadow: 0 7px 20px rgba(237,28,36,.25) !important; } /* ستاره/VIP فعلاً حذف */ .dm-home-action-v3--vip { display: none !important; } /* سرچ زیر خود هدر */ .dm-home-search-panel-v3 { top: calc(100% + 10px) !important; left: 0 !important; right: 0 !important; width: 100% !important; } /* glow قبلی هم کمتر */ .dm-home-shell-v3::after { left: 22% !important; right: 22% !important; height: 45px !important; opacity: .45 !important; } } /* گوشی‌های خیلی باریک */ @media (max-width: 370px) { .dm-home-shell-v3 { width: calc(100% - 28px) !important; } .dm-home-brand-v12 img { width: 128px !important; } } /* ========================================================= DIASTOMY HEADER / HERO SEAM V16 ========================================================= */ .dm-home-shell-v3::after { content: "" !important; position: absolute !important; z-index: -1 !important; left: 7% !important; right: 7% !important; top: 34px !important; height: 120px !important; pointer-events: none !important; opacity: 1 !important; background: radial-gradient( ellipse at 50% 25%, rgba(140, 28, 38, .11) 0%, rgba(75, 18, 27, .065) 38%, rgba(25, 12, 18, .025) 62%, transparent 78% ) !important; filter: blur(30px) !important; } @media (max-width: 767px) { .dm-home-shell-v3::after { left: 2% !important; right: 2% !important; top: 28px !important; height: 110px !important; filter: blur(26px) !important; } } /* ========================================================= DIASTOMY HEADER -> HERO REAL BRIDGE V18 ========================================================= */ .dm-home-hero-bridge { position: relative; z-index: 25; width: 100%; height: 105px; margin: -34px 0 -71px; pointer-events: none; overflow: visible; background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(11,7,10,.20) 22%, rgba(20,8,13,.42) 47%, rgba(13,7,10,.52) 67%, rgba(5,5,7,.12) 88%, transparent 100% ); -webkit-mask-image: linear-gradient( 180deg, transparent, #000 22%, #000 78%, transparent ); mask-image: linear-gradient( 180deg, transparent, #000 22%, #000 78%, transparent ); } /* ambient red haze crossing BOTH sections */ .dm-home-hero-bridge::before { content: ""; position: absolute; left: 4%; right: 4%; top: 5px; height: 110px; border-radius: 50%; background: radial-gradient( ellipse at center, rgba(128,24,34,.14) 0%, rgba(76,17,25,.075) 38%, rgba(33,11,17,.035) 62%, transparent 78% ); filter: blur(32px); } /* second blur kills the perfectly straight seam */ .dm-home-hero-bridge::after { content: ""; position: absolute; left: -8%; right: -8%; top: 38px; height: 72px; background: linear-gradient( 90deg, transparent 0%, rgba(20,10,14,.28) 15%, rgba(29,11,17,.40) 50%, rgba(20,10,14,.28) 85%, transparent 100% ); filter: blur(25px); } /* * V17 دیگر نباید خودش مرز را جابه‌جا کند. * Bridge این کار را انجام می‌دهد. */ .dm-home-hero { margin-top: 0 !important; } /* * بالاترین قسمت Hero شفاف بماند تا Bridge دیده شود. */ .dm-home-hero::before { -webkit-mask-image: linear-gradient( to bottom, transparent 0, rgba(0,0,0,.18) 45px, rgba(0,0,0,.68) 105px, #000 155px ) !important; mask-image: linear-gradient( to bottom, transparent 0, rgba(0,0,0,.18) 45px, rgba(0,0,0,.68) 105px, #000 155px ) !important; } /* MOBILE */ @media (max-width: 767px) { .dm-home-hero-bridge { height: 92px; margin: -28px 0 -64px; } .dm-home-hero-bridge::before { left: -5%; right: -5%; top: 3px; height: 96px; filter: blur(27px); } .dm-home-hero-bridge::after { top: 31px; height: 65px; filter: blur(22px); } .dm-home-hero { margin-top: 0 !important; } } /* iPhone Safari input zoom fix */ #dm-home-search-input { font-size: 16px !important; } /* DIASTOMY mobile logo position fix */ @media (max-width: 767px) { .dm-home-brand-v12 { margin-right: 14px !important; max-width: calc(100% - 28px) !important; } .dm-home-brand-v12 img { display: block !important; max-width: 100% !important; } } /* DIASTOMY SEARCH RED -> #DE0000 */ .dm-home-shell-v3.is-search-open #dm-home-search-toggle { background: #DE0000 !important; border-color: #DE0000 !important; } .dm-home-search-submit-v3 { background: #DE0000 !important; border-color: #DE0000 !important; } /* ========================================================= DIASTOMY MOBILE HEADER — FIGMA ICONS V1 Bell + Search ========================================================= */ @media (max-width: 767px) { /* ===================================================== NOTIFICATION Figma: no white circle / gray outline icon ===================================================== */ .dm-home-topbar-v3 a.dm-home-action-v3[aria-label="اعلان‌ها"] { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: rgba(255,255,255,.54) !important; } .dm-home-topbar-v3 .dm-mobile-figma-bell { display: block !important; width: 27px !important; height: 27px !important; min-width: 27px !important; max-width: 27px !important; min-height: 27px !important; max-height: 27px !important; color: rgba(255,255,255,.54) !important; fill: none !important; overflow: visible !important; } .dm-home-topbar-v3 a.dm-home-action-v3[aria-label="اعلان‌ها"]:active { color: rgba(255,255,255,.85) !important; transform: scale(.92) !important; } /* ===================================================== SEARCH Figma: black center + thin dark red outline ===================================================== */ #dm-home-search-toggle { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(222,0,0,.42) !important; border-radius: 50% !important; background: rgba(14,8,9,.72) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(222,0,0,.035), 0 0 16px rgba(222,0,0,.045) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease !important; } #dm-home-search-toggle .dm-mobile-figma-search { display: block !important; width: 27px !important; height: 27px !important; min-width: 27px !important; max-width: 27px !important; min-height: 27px !important; max-height: 27px !important; color: #fff !important; fill: none !important; overflow: visible !important; } /* باز بودن سرچ */ .dm-home-shell-v3.is-search-open #dm-home-search-toggle { background: rgba(222,0,0,.09) !important; border-color: rgba(222,0,0,.72) !important; box-shadow: 0 0 18px rgba(222,0,0,.10), inset 0 0 0 1px rgba(222,0,0,.04) !important; } #dm-home-search-toggle:active { transform: scale(.92) !important; } /* ===================================================== Prevent old SVG rules overriding Figma icons ===================================================== */ .dm-mobile-figma-bell *, .dm-mobile-figma-search * { vector-effect: non-scaling-stroke; } } /* ========================================================= DIASTOMY MOBILE HEADER ICONS — FIGMA V24 ========================================================= */ @media (max-width: 767px) { /* * هر دو دکمه */ .dm-home-topbar-v3 .dm-home-action-v3 { width: 43px !important; height: 43px !important; min-width: 43px !important; min-height: 43px !important; padding: 0 !important; border-radius: 999px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; -webkit-tap-highlight-color: transparent; } /* * NOTIFICATION * Figma = white circle / dark bell */ .dm-home-topbar-v3 a.dm-home-action-v3[href="/accounts/notifications/"] { background: #FFFFFF !important; border: 0 !important; color: #171717 !important; box-shadow: 0 3px 10px rgba(0,0,0,.14) !important; } .dm-home-topbar-v3 .dm-mobile-figma-bell { width: 26px !important; height: 26px !important; display: block !important; color: #171717 !important; } /* * SEARCH * Figma = solid red circle / white search */ .dm-home-topbar-v3 #dm-home-search-toggle { background: linear-gradient( 180deg, #F30A12 0%, #DE0000 100% ) !important; border: 0 !important; color: #FFFFFF !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 4px 13px rgba(222,0,0,.22) !important; } .dm-home-topbar-v3 #dm-home-search-toggle:hover, .dm-home-topbar-v3 #dm-home-search-toggle:focus, .dm-home-topbar-v3 #dm-home-search-toggle.is-active, .dm-home-topbar-v3 #dm-home-search-toggle.is-open { background: linear-gradient( 180deg, #F30A12 0%, #DE0000 100% ) !important; color: #FFFFFF !important; } .dm-home-topbar-v3 .dm-mobile-figma-search { width: 27px !important; height: 27px !important; display: block !important; color: #FFFFFF !important; } } /* ========================================================= DIASTOMY MOBILE HEADER — FIGMA FINAL V25 ========================================================= */ @media (max-width: 767px) { /* ========================================= VIP — موبایل کامل مخفی ========================================= */ .dm-home-topbar-v3 .dm-home-action-v3--vip { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ========================================= NOTIFICATION Figma: white circle + dark bell ========================================= */ .dm-home-topbar-v3 > a.dm-home-action-v3[href="/accounts/notifications/"] { display: flex !important; align-items: center !important; justify-content: center !important; width: 43px !important; height: 43px !important; min-width: 43px !important; min-height: 43px !important; max-width: 43px !important; max-height: 43px !important; padding: 0 !important; margin: 0 !important; aspect-ratio: 1 / 1 !important; background: #FFFFFF !important; background-color: #FFFFFF !important; border: 0 !important; border-radius: 50% !important; color: #171717 !important; overflow: hidden !important; box-sizing: border-box !important; flex: 0 0 43px !important; box-shadow: 0 2px 9px rgba(0,0,0,.16) !important; } .dm-home-topbar-v3 > a.dm-home-action-v3[href="/accounts/notifications/"] .dm-mobile-figma-bell { display: block !important; width: 25px !important; height: 25px !important; min-width: 25px !important; min-height: 25px !important; color: #171717 !important; flex: none !important; } /* ========================================= SEARCH Figma: red circle + white icon ========================================= */ .dm-home-topbar-v3 #dm-home-search-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 43px !important; height: 43px !important; min-width: 43px !important; min-height: 43px !important; max-width: 43px !important; max-height: 43px !important; padding: 0 !important; margin: 0 !important; aspect-ratio: 1 / 1 !important; border: 0 !important; border-radius: 50% !important; background: linear-gradient( 180deg, #F20A11 0%, #DE0000 100% ) !important; color: #FFFFFF !important; overflow: hidden !important; box-sizing: border-box !important; flex: 0 0 43px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 4px 12px rgba(222,0,0,.20) !important; } .dm-home-topbar-v3 #dm-home-search-toggle .dm-mobile-figma-search { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; display: block !important; color: #FFFFFF !important; } /* actions container فقط سرچ را نگه می‌دارد */ .dm-home-actions-v3 { display: flex !important; align-items: center !important; gap: 0 !important; } } /* /static/public/assets/css/home-desktop-final-v1.css */ /* ======================================================================== DIASTOMY HOME — DESKTOP FINAL V1 Desktop-only final composition. Mobile (<1024px) remains unchanged. ======================================================================== */ @media (min-width: 1024px) { .dm-home-intro-v19 { min-height: 760px; background: radial-gradient(860px 520px at 50% 22%, rgba(116,22,19,.18), transparent 70%), linear-gradient(180deg, #070708 0%, #080708 75%, #060607 100%) !important; } /* ---------- home header ---------- */ .dm-home-shell-v3 { width: min(calc(100% - 64px), 1440px) !important; margin: 0 auto !important; padding-top: 24px !important; position: relative !important; z-index: 80 !important; } .dm-home-topbar-v3 { width: 100% !important; min-height: 68px !important; height: 68px !important; padding: 7px 12px 7px 18px !important; display: grid !important; grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr) !important; align-items: center !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(22,22,24,.88), rgba(9,9,11,.84)) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; backdrop-filter: blur(18px) saturate(140%) !important; box-shadow: 0 18px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04) !important; } .dm-home-brand-v12 { grid-column: 2 !important; justify-self: center !important; width: 188px !important; max-width: 188px !important; margin: 0 !important; } .dm-home-brand-v12 img { width: 188px !important; max-width: 100% !important; height: auto !important; display: block !important; } .dm-home-topbar-v3 > .dm-home-action-v3 { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; width: 46px !important; height: 46px !important; border-radius: 50% !important; color: rgba(255,255,255,.9) !important; background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.075) !important; } .dm-home-actions-v3 { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; display: flex !important; align-items: center !important; gap: 9px !important; } .dm-home-actions-v3 .dm-home-action-v3 { width: 46px !important; height: 46px !important; border-radius: 50% !important; } .dm-home-action-v3--vip { display: flex !important; } .dm-home-action-v3--search { border-color: rgba(222,0,0,.44) !important; color: #fff !important; background: rgba(222,0,0,.07) !important; } .dm-home-shell-v3.is-search-open #dm-home-search-toggle, .dm-home-search-submit-v3 { background: #de0000 !important; border-color: #de0000 !important; } .dm-home-search-panel-v3 { top: 101px !important; left: 0 !important; right: 0 !important; width: min(720px, 72vw) !important; margin-inline: auto !important; padding: 0 !important; } .dm-home-search-v3 { min-height: 58px !important; border-radius: 20px !important; background: rgba(13,13,15,.96) !important; border: 1px solid rgba(255,255,255,.11) !important; box-shadow: 0 22px 60px rgba(0,0,0,.44) !important; } /* ---------- hero ---------- */ .dm-home-hero { min-height: 660px !important; padding: 74px 0 62px !important; background: transparent !important; } .dm-home-hero .hero-main-slider, .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { min-height: 540px !important; } .dx-hero-slide { width: 270px !important; height: 510px !important; } .dx-hero-slide.is-active { width: 320px !important; height: 555px !important; } .dx-hero-card { width: 100% !important; } .dx-hero-poster { border-radius: 24px !important; box-shadow: 0 30px 70px rgba(0,0,0,.42) !important; } .dx-hero-slide.is-active .dx-hero-poster { border-color: rgba(255,255,255,.16) !important; } .dx-hero-en-title { margin-top: 17px !important; font-size: clamp(27px, 2.1vw, 34px) !important; line-height: 1.12 !important; letter-spacing: -.02em !important; } .dx-hero-fa-title { margin-top: 7px !important; font-size: 16px !important; color: rgba(255,255,255,.72) !important; } .dx-hero-meta { margin-top: 10px !important; font-size: 13px !important; color: rgba(255,255,255,.66) !important; } .dx-hero-dots { bottom: 8px !important; } /* ---------- content rhythm ---------- */ .dm-topic-section, .slider-section, .slider-section-2, .animation-slider, .trailer-slider-section, .home-famous-actors-scroll { max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; } .slider-section, .animation-slider { padding-left: 48px !important; padding-right: 48px !important; } .slider-section, .animation-slider { margin-bottom: 92px !important; } .slider-section > .flex:first-child, .animation-slider > .flex:first-child { margin-bottom: 26px !important; } .slider-section h2, .animation-slider h2 { font-size: 24px !important; font-weight: 750 !important; letter-spacing: -.02em; } .slider-section .custom-prev-btn, .slider-section .custom-next-btn, .animation-slider .custom-prev-btn, .animation-slider .custom-next-btn { width: 44px !important; height: 44px !important; box-shadow: none !important; border: 1px solid rgba(255,255,255,.07) !important; background: rgba(255,255,255,.035) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; } .slider-section .custom-prev-btn:hover, .slider-section .custom-next-btn:hover, .animation-slider .custom-prev-btn:hover, .animation-slider .custom-next-btn:hover { background: #de0000 !important; border-color: #de0000 !important; } .slider-section a[href*="archive"], .animation-slider a[href*="archive"] { min-height: 44px !important; padding: 0 17px !important; border: 1px solid rgba(255,255,255,.07) !important; background: rgba(255,255,255,.035) !important; box-shadow: none !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; } /* ---------- topic categories ---------- */ .dm-topic-section { width: min(calc(100% - 96px), 1344px) !important; margin-top: 34px !important; margin-bottom: 92px !important; padding: 25px 28px 28px !important; border-radius: 28px !important; border: 1px solid rgba(255,255,255,.075) !important; background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), rgba(12,12,14,.72) !important; box-shadow: 0 26px 70px rgba(0,0,0,.18) !important; } .dm-topic-head { margin-bottom: 22px !important; } .dm-topic-title { font-size: 23px !important; } .dm-topic-rail { grid-auto-columns: minmax(156px, 1fr) !important; grid-auto-flow: column !important; gap: 12px !important; padding: 2px 1px 5px !important; } .dm-topic-item { min-height: 102px !important; border-radius: 19px !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.065) !important; transition: transform .24s ease, background .24s ease, border-color .24s ease !important; } .dm-topic-item:hover { transform: translateY(-4px); background: rgba(255,255,255,.045) !important; border-color: rgba(222,0,0,.28) !important; } /* ---------- standard carousel cards ---------- */ .movie-slider .splide__slide { width: 214px !important; max-width: 214px !important; opacity: 1 !important; transform: none !important; filter: none !important; } .movie-slider .splide__slide > a > div:first-child { height: 321px !important; aspect-ratio: auto !important; } .movie-slider .splide__track { overflow: hidden !important; } .movie-slider .splide__list { gap: 18px !important; } /* ---------- search/filter panel ---------- */ .dm-home-hero + .dm-topic-section ~ div[x-data] { max-width: 1344px !important; margin-left: auto !important; margin-right: auto !important; } /* ---------- half-price stack ---------- */ .hp-stack-section { width: min(calc(100% - 96px), 1344px) !important; margin: 100px auto 112px !important; padding: 34px 40px 42px !important; border-radius: 32px !important; border: 1px solid rgba(255,255,255,.075) !important; background: linear-gradient(145deg, rgba(31,7,8,.78), rgba(11,11,13,.92) 55%, rgba(8,8,10,.96)) !important; box-shadow: 0 30px 80px rgba(0,0,0,.28) !important; overflow: hidden !important; } .hp-stack-heading { font-size: 28px !important; line-height: 1.4 !important; } #hp-stack-deck { max-width: 1040px !important; margin-left: auto !important; margin-right: auto !important; } /* ---------- wide content banners ---------- */ .dm-home-intro-v19 ~ .relative, .dm-home-intro-v19 ~ section { scroll-margin-top: 110px; } } @media (min-width: 1280px) { .dm-home-shell-v3 { width: min(calc(100% - 96px), 1440px) !important; } .slider-section, .animation-slider { padding-left: 64px !important; padding-right: 64px !important; } .movie-slider .splide__slide { width: 226px !important; max-width: 226px !important; } .movie-slider .splide__slide > a > div:first-child { height: 339px !important; } } @media (min-width: 1536px) { .dm-home-shell-v3, .dm-topic-section, .slider-section, .animation-slider, .hp-stack-section { max-width: 1500px !important; } .dm-topic-section, .hp-stack-section { width: min(calc(100% - 120px), 1420px) !important; } } /* /static/public/assets/css/hero-desktop-reference-v1.css */ /* ========================================================= DIASTOMY DESKTOP HERO — REFERENCE COVERFLOW V1 Desktop only. Mobile <= 1023px remains untouched. ========================================================= */ .dx-hero-details-cta, .dx-hero-arrow { display: none; } @media (min-width: 1024px) { .dm-home-hero { min-height: 560px !important; padding: 38px 0 58px !important; overflow: hidden !important; background: radial-gradient(900px 440px at 50% 42%, rgba(16,54,78,.22), transparent 68%), linear-gradient(180deg, #071d2b 0%, #071c29 54%, #071821 100%) !important; } .dm-home-hero::after { width: min(92vw, 1320px) !important; height: 150px !important; bottom: 14px !important; opacity: .5 !important; } .dm-home-hero .hero-main-slider { height: 455px !important; min-height: 455px !important; max-width: 1440px !important; margin: 0 auto !important; overflow: visible !important; } .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 455px !important; min-height: 455px !important; overflow: visible !important; } /* reset all cards for the desktop composition */ .dx-hero-slide { top: 22px !important; left: 50% !important; width: 210px !important; height: 350px !important; opacity: 0 !important; transform: translate3d(-50%, 28px, 0) scale(.82) !important; transition: transform 520ms cubic-bezier(.2,.78,.2,1), opacity 300ms ease, width 520ms cubic-bezier(.2,.78,.2,1), height 520ms cubic-bezier(.2,.78,.2,1) !important; } /* center landscape banner */ .dx-hero-slide.is-active { top: 0 !important; width: min(58vw, 760px) !important; height: 408px !important; opacity: 1 !important; transform: translate3d(-50%, 0, 0) scale(1) !important; z-index: 20 !important; } /* inner side posters */ .dx-hero-slide.is-prev { opacity: .88 !important; transform: translate3d(calc(-50% - 485px), 31px, 0) scale(.96) !important; z-index: 11 !important; } .dx-hero-slide.is-next { opacity: .88 !important; transform: translate3d(calc(-50% + 485px), 31px, 0) scale(.96) !important; z-index: 11 !important; } /* outer side posters */ .dx-hero-slide.is-prev2 { width: 176px !important; height: 324px !important; opacity: .58 !important; transform: translate3d(calc(-50% - 666px), 42px, 0) scale(.91) !important; z-index: 7 !important; } .dx-hero-slide.is-next2 { width: 176px !important; height: 324px !important; opacity: .58 !important; transform: translate3d(calc(-50% + 666px), 42px, 0) scale(.91) !important; z-index: 7 !important; } .dx-hero-card { height: 100% !important; padding: 0 !important; border-radius: 22px !important; overflow: hidden !important; background: #0b1117 !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 24px 65px rgba(0,0,0,.46) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .dx-hero-slide.is-active .dx-hero-card { border-color: rgba(255,255,255,.18) !important; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.24) !important; } .dx-hero-poster { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: inherit !important; overflow: hidden !important; box-shadow: none !important; background: #0b1117 !important; } .dx-hero-poster img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 28% !important; } /* stronger cinematic shading only on the center banner */ .dx-hero-slide.is-active .dx-hero-poster-shade { background: linear-gradient(90deg, rgba(3,10,15,.82) 0%, rgba(3,10,15,.48) 30%, rgba(3,10,15,.08) 62%, rgba(3,10,15,.04) 100%), linear-gradient(0deg, rgba(0,0,0,.46) 0%, transparent 50%) !important; } .dx-hero-slide.is-prev .dx-hero-poster::after, .dx-hero-slide.is-next .dx-hero-poster::after, .dx-hero-slide.is-prev2 .dx-hero-poster::after, .dx-hero-slide.is-next2 .dx-hero-poster::after { background: linear-gradient(0deg, rgba(2,5,8,.20), rgba(2,5,8,.05)) !important; } /* side cards = image only */ .dx-hero-slide:not(.is-active) .dx-hero-info, .dx-hero-slide:not(.is-active) .dx-hero-play, .dx-hero-slide:not(.is-active) .dx-hero-details-cta { display: none !important; } /* active info sits on top of the landscape image */ .dx-hero-slide.is-active .dx-hero-info { position: absolute !important; left: 34px !important; right: auto !important; bottom: 74px !important; z-index: 8 !important; width: min(48%, 355px) !important; padding: 0 !important; text-align: left !important; opacity: 1 !important; pointer-events: none !important; } .dx-hero-slide.is-active .dx-hero-en-title { margin: 0 !important; font-size: clamp(24px, 2vw, 34px) !important; line-height: 1.08 !important; font-weight: 800 !important; color: #fff !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-shadow: 0 2px 16px rgba(0,0,0,.42) !important; } .dx-hero-slide.is-active .dx-hero-fa-title { margin-top: 7px !important; font-size: 13px !important; line-height: 1.55 !important; color: rgba(255,255,255,.84) !important; white-space: normal !important; overflow: visible !important; text-align: left !important; } .dx-hero-slide.is-active .dx-hero-meta { justify-content: flex-start !important; margin-top: 9px !important; gap: 7px !important; font-size: 11px !important; color: rgba(255,255,255,.75) !important; } /* trailer becomes the small circular play control */ .dx-hero-slide.is-active .dx-hero-play { display: inline-flex !important; left: 132px !important; bottom: 28px !important; width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; gap: 0 !important; border-radius: 50% !important; transform: none !important; opacity: 1 !important; background: rgba(255,255,255,.22) !important; border: 1px solid rgba(255,255,255,.32) !important; box-shadow: 0 10px 26px rgba(0,0,0,.28) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } .dx-hero-slide.is-active .dx-hero-play span { display: none !important; } .dx-hero-slide.is-active .dx-hero-play svg { width: 15px !important; height: 15px !important; margin-left: 2px !important; } /* "مشاهده" button, matching the reference */ .dx-hero-details-cta { position: absolute; left: 34px; bottom: 28px; z-index: 9; display: inline-flex; align-items: center; justify-content: center; height: 38px; min-width: 88px; padding: 0 15px; border-radius: 9px; color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; border: 1px solid rgba(255,255,255,.48); background: rgba(5,13,18,.26); box-shadow: 0 9px 24px rgba(0,0,0,.20); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s ease, transform .2s ease; } .dx-hero-details-cta:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); } /* desktop arrows */ .dx-hero-arrow { position: absolute; top: 192px; z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #fff; cursor: pointer; background: rgba(188,191,194,.42); box-shadow: 0 14px 34px rgba(0,0,0,.20); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .2s ease, background .2s ease; } .dx-hero-arrow:hover { background: rgba(218,221,224,.55); transform: scale(1.05); } .dx-hero-arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .dx-hero-arrow--prev { left: max(24px, calc(50% - 625px)); } .dx-hero-arrow--next { right: max(24px, calc(50% - 625px)); } .dx-hero-dots { bottom: -2px !important; z-index: 35 !important; } } @media (min-width: 1024px) and (max-width: 1199px) { .dx-hero-slide.is-active { width: 620px !important; height: 360px !important; } .dx-hero-slide.is-prev { width: 176px !important; height: 310px !important; transform: translate3d(calc(-50% - 390px), 28px, 0) scale(.94) !important; } .dx-hero-slide.is-next { width: 176px !important; height: 310px !important; transform: translate3d(calc(-50% + 390px), 28px, 0) scale(.94) !important; } .dx-hero-slide.is-prev2 { transform: translate3d(calc(-50% - 525px), 39px, 0) scale(.86) !important; } .dx-hero-slide.is-next2 { transform: translate3d(calc(-50% + 525px), 39px, 0) scale(.86) !important; } .dx-hero-arrow--prev { left: 24px; } .dx-hero-arrow--next { right: 24px; } } @media (min-width: 1440px) { .dx-hero-slide.is-active { width: 820px !important; height: 430px !important; } .dx-hero-slide.is-prev { width: 230px !important; height: 360px !important; transform: translate3d(calc(-50% - 530px), 34px, 0) scale(.96) !important; } .dx-hero-slide.is-next { width: 230px !important; height: 360px !important; transform: translate3d(calc(-50% + 530px), 34px, 0) scale(.96) !important; } .dx-hero-slide.is-prev2 { width: 190px !important; height: 340px !important; transform: translate3d(calc(-50% - 735px), 44px, 0) scale(.91) !important; } .dx-hero-slide.is-next2 { width: 190px !important; height: 340px !important; transform: translate3d(calc(-50% + 735px), 44px, 0) scale(.91) !important; } .dx-hero-arrow--prev { left: max(32px, calc(50% - 690px)); } .dx-hero-arrow--next { right: max(32px, calc(50% - 690px)); } } /* ========================================================= DESKTOP HERO -> TOPIC GAP FIX V2 Mobile untouched ========================================================= */ @media (min-width: 1024px) { /* فضای اضافه‌ای که Hero برای خودش رزرو می‌کرد */ .dm-home-hero { min-height: 0 !important; padding-top: 28px !important; padding-bottom: 0 !important; } .dm-home-hero .hero-main-slider, .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 430px !important; min-height: 430px !important; } /* دسته‌بندی را به Hero نزدیک‌تر کن */ .dm-topic-section { margin-top: -115px !important; } } /* مانیتورهای بزرگ */ @media (min-width: 1440px) { .dm-home-hero .hero-main-slider, .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 445px !important; min-height: 445px !important; } .dm-topic-section { margin-top: -125px !important; } } /* /static/public/assets/css/hero-mobile-3d-v1.css */ /* ========================================================= DIASTOMY MOBILE HERO — 5 CARD 3D COVERFLOW V1 PREV2 PREV ACTIVE NEXT NEXT2 Desktop untouched. ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- Real 3D scene ----------------------------------------------------- */ .dm-home-hero .hero-main-slider { perspective: 1050px !important; perspective-origin: 50% 42% !important; overflow: visible !important; } .dm-home-hero .dx-hero-track { overflow: visible !important; } .dm-home-hero .dx-hero-list { overflow: visible !important; perspective: 1050px !important; transform-style: preserve-3d !important; } .dm-home-hero .dx-hero-slide { transform-style: preserve-3d !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transition: transform 430ms cubic-bezier(.2,.78,.2,1), opacity 330ms ease !important; will-change: transform, opacity; } /* ===================================================== CENTER ===================================================== */ .dm-home-hero .dx-hero-slide.is-active { opacity: 1 !important; transform: translate3d( -50%, 0, 45px ) rotateY(0deg) scale(1) !important; z-index: 30 !important; } /* ===================================================== INNER LEFT ===================================================== */ .dm-home-hero .dx-hero-slide.is-prev { opacity: .47 !important; transform: translate3d( calc(-50% - 36vw), 19px, -85px ) rotateY(29deg) scale(.82) !important; transform-origin: 100% 50% !important; z-index: 18 !important; } /* ===================================================== INNER RIGHT ===================================================== */ .dm-home-hero .dx-hero-slide.is-next { opacity: .47 !important; transform: translate3d( calc(-50% + 36vw), 19px, -85px ) rotateY(-29deg) scale(.82) !important; transform-origin: 0% 50% !important; z-index: 18 !important; } /* ===================================================== OUTER LEFT ===================================================== */ .dm-home-hero .dx-hero-slide.is-prev2 { display: block !important; opacity: .25 !important; transform: translate3d( calc(-50% - 53vw), 31px, -190px ) rotateY(39deg) scale(.67) !important; transform-origin: 100% 50% !important; z-index: 8 !important; } /* ===================================================== OUTER RIGHT ===================================================== */ .dm-home-hero .dx-hero-slide.is-next2 { display: block !important; opacity: .25 !important; transform: translate3d( calc(-50% + 53vw), 31px, -190px ) rotateY(-39deg) scale(.67) !important; transform-origin: 0% 50% !important; z-index: 8 !important; } /* ===================================================== SIDE CARDS VISUAL DEPTH ===================================================== */ .dm-home-hero .dx-hero-slide.is-prev .dx-hero-card, .dm-home-hero .dx-hero-slide.is-next .dx-hero-card { border-color: rgba(255,255,255,.075) !important; box-shadow: 0 16px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04) !important; background: rgba(13,10,12,.76) !important; } .dm-home-hero .dx-hero-slide.is-prev2 .dx-hero-card, .dm-home-hero .dx-hero-slide.is-next2 .dx-hero-card { border-color: rgba(255,255,255,.045) !important; box-shadow: 0 13px 27px rgba(0,0,0,.30) !important; background: rgba(10,8,10,.60) !important; } /* ----------------------------------------------------- Darker as cards get farther away ----------------------------------------------------- */ .dm-home-hero .dx-hero-slide.is-prev .dx-hero-poster-shade, .dm-home-hero .dx-hero-slide.is-next .dx-hero-poster-shade { background: linear-gradient( 180deg, rgba(0,0,0,.05), rgba(0,0,0,.22) ) !important; } .dm-home-hero .dx-hero-slide.is-prev2 .dx-hero-poster-shade, .dm-home-hero .dx-hero-slide.is-next2 .dx-hero-poster-shade { background: rgba(0,0,0,.30) !important; } /* ----------------------------------------------------- Information fades by depth ----------------------------------------------------- */ .dm-home-hero .dx-hero-slide.is-prev .dx-hero-info, .dm-home-hero .dx-hero-slide.is-next .dx-hero-info { opacity: .30 !important; } .dm-home-hero .dx-hero-slide.is-prev2 .dx-hero-info, .dm-home-hero .dx-hero-slide.is-next2 .dx-hero-info { opacity: .12 !important; } /* ----------------------------------------------------- Trailer button only belongs to active card ----------------------------------------------------- */ .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-play { opacity: 0 !important; pointer-events: none !important; } /* ===================================================== VISUAL-ONLY GHOST Used only when the database has fewer than 5 hero items. ===================================================== */ .dm-home-hero .dx-hero-ghost { pointer-events: none !important; } .dm-home-hero .dx-hero-ghost .dx-hero-play, .dm-home-hero .dx-hero-ghost .dx-hero-quality { display: none !important; } /* * Keep only a very subtle title under ghost cards. * This makes them look like real carousel cards rather * than plain duplicated posters. */ .dm-home-hero .dx-hero-ghost .dx-hero-info { opacity: .10 !important; } /* ----------------------------------------------------- Prevent the outer cards from creating page overflow. Hero itself clips only at the screen boundary. ----------------------------------------------------- */ .dm-home-hero { overflow-x: clip !important; } } /* Slightly larger phones */ @media (min-width: 430px) and (max-width: 767px) { .dm-home-hero .dx-hero-slide.is-prev { transform: translate3d( calc(-50% - 35vw), 18px, -85px ) rotateY(28deg) scale(.84) !important; } .dm-home-hero .dx-hero-slide.is-next { transform: translate3d( calc(-50% + 35vw), 18px, -85px ) rotateY(-28deg) scale(.84) !important; } .dm-home-hero .dx-hero-slide.is-prev2 { transform: translate3d( calc(-50% - 51vw), 31px, -185px ) rotateY(38deg) scale(.69) !important; } .dm-home-hero .dx-hero-slide.is-next2 { transform: translate3d( calc(-50% + 51vw), 31px, -185px ) rotateY(-38deg) scale(.69) !important; } } /* ========================================================= MOBILE HERO PAGINATION — WHITE V2 ========================================================= */ @media (max-width: 767px) { .dm-home-hero .dx-hero-dots { position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; z-index: 80 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* تمام نقطه‌ها */ .dm-home-hero .dx-hero-dot { display: block !important; width: 7px !important; height: 7px !important; min-width: 7px !important; min-height: 7px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.25) !important; opacity: 1 !important; box-shadow: none !important; transition: width .22s ease, background .22s ease, box-shadow .22s ease !important; } /* نقطه فعال */ .dm-home-hero .dx-hero-dot.is-active, .dm-home-hero .dx-hero-dot.active, .dm-home-hero .dx-hero-dot[aria-current="true"] { width: 25px !important; background: #FFFFFF !important; box-shadow: 0 0 12px rgba(255,255,255,.30) !important; } } /* ========================================================= DIASTOMY MOBILE HERO PAGINATION — PURE WHITE FINAL V3 ========================================================= */ @media (max-width: 767px) { /* خود container نباید کل dots را تیره کند */ .dm-home-hero .dx-hero-dots { opacity: 1 !important; filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important; color: #fff !important; } /* نقاط غیرفعال */ .dm-home-hero .dx-hero-dots > .dx-hero-dot { width: 7px !important; min-width: 7px !important; max-width: 7px !important; height: 7px !important; min-height: 7px !important; max-height: 7px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.16) !important; background-color: rgba(255,255,255,.16) !important; background-image: none !important; opacity: 1 !important; filter: none !important; -webkit-filter: none !important; box-shadow: none !important; mix-blend-mode: normal !important; } /* active pill */ .dm-home-hero .dx-hero-dots > .dx-hero-dot.is-active { width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 7px !important; min-height: 7px !important; max-height: 7px !important; transform: none !important; background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; opacity: 1 !important; filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important; box-shadow: 0 0 8px rgba(255,255,255,.20) !important; } /* * اگر رنگ خاکستری از pseudo-element آمده باشد * کاملاً حذفش می‌کنیم. */ .dm-home-hero .dx-hero-dot::before, .dm-home-hero .dx-hero-dot::after { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; filter: none !important; } } /* ========================================================= DIASTOMY MOBILE VIEWPORT WIDTH FIX V5 ========================================================= */ @media (max-width: 767px) { html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overscroll-behavior-x: none; } .dm-home-intro-v19, .dm-home-hero, .dm-home-hero .hero-main-slider, .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { width: 100% !important; max-width: 100% !important; } .dm-home-hero, .dm-home-hero .hero-main-slider { overflow-x: clip !important; } } /* /static/public/assets/css/hero-desktop-3d-v2.css */ /* ========================================================= DIASTOMY DESKTOP HERO — 5 CARD COVERFLOW V3 [ FAR ] [ NEAR ] [ ACTIVE ] [ NEAR ] [ FAR ] Desktop only ========================================================= */ @media (min-width: 1024px) { .dm-home-hero { overflow-x: clip !important; } .dm-home-hero .hero-main-slider { position: relative !important; width: 100% !important; max-width: 1500px !important; height: 470px !important; min-height: 470px !important; margin: 54px auto 0 !important; perspective: 1500px !important; perspective-origin: 50% 44% !important; overflow: visible !important; } .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { width: 100% !important; height: 470px !important; min-height: 470px !important; overflow: visible !important; transform-style: preserve-3d !important; } .dm-home-hero .dx-hero-list { perspective: 1500px !important; } .dm-home-hero .dx-hero-slide { top: 0 !important; left: 50% !important; transform-style: preserve-3d !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transition: transform .52s cubic-bezier(.2,.8,.2,1), opacity .32s ease, filter .32s ease, width .52s cubic-bezier(.2,.8,.2,1), height .52s cubic-bezier(.2,.8,.2,1) !important; will-change: transform, opacity; } /* ===================================================== CENTER ===================================================== */ .dm-home-hero .dx-hero-slide.is-active { width: 820px !important; height: 430px !important; opacity: 1 !important; transform: translate3d(-50%, 0, 70px) rotateY(0deg) scale(1) !important; filter: none !important; z-index: 40 !important; } /* ===================================================== NEAR LEFT ===================================================== */ .dm-home-hero .dx-hero-slide.is-prev { width: 220px !important; height: 350px !important; opacity: .78 !important; transform: translate3d( calc(-50% - 535px), 38px, -105px ) rotateY(20deg) scale(.96) !important; transform-origin: 100% 50% !important; filter: brightness(.70) saturate(.82) !important; z-index: 22 !important; } /* ===================================================== NEAR RIGHT ===================================================== */ .dm-home-hero .dx-hero-slide.is-next { width: 220px !important; height: 350px !important; opacity: .78 !important; transform: translate3d( calc(-50% + 535px), 38px, -105px ) rotateY(-20deg) scale(.96) !important; transform-origin: 0 50% !important; filter: brightness(.70) saturate(.82) !important; z-index: 22 !important; } /* ===================================================== FAR LEFT ===================================================== */ .dm-home-hero .dx-hero-slide.is-prev2 { display: block !important; width: 178px !important; height: 305px !important; opacity: .38 !important; transform: translate3d( calc(-50% - 725px), 61px, -265px ) rotateY(31deg) scale(.88) !important; transform-origin: 100% 50% !important; filter: brightness(.48) saturate(.62) !important; z-index: 8 !important; } /* ===================================================== FAR RIGHT ===================================================== */ .dm-home-hero .dx-hero-slide.is-next2 { display: block !important; width: 178px !important; height: 305px !important; opacity: .38 !important; transform: translate3d( calc(-50% + 725px), 61px, -265px ) rotateY(-31deg) scale(.88) !important; transform-origin: 0 50% !important; filter: brightness(.48) saturate(.62) !important; z-index: 8 !important; } /* ===================================================== CARD ===================================================== */ .dm-home-hero .dx-hero-card { width: 100% !important; height: 100% !important; border-radius: 22px !important; overflow: hidden !important; } .dm-home-hero .dx-hero-poster { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; } .dm-home-hero .dx-hero-poster img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* سایه‌ها فقط پوستر باشند */ .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-info, .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-play, .dm-home-hero .dx-hero-slide:not(.is-active) .dx-hero-details-cta { display: none !important; } /* عمق بیشتر روی کارت‌های نزدیک */ .dm-home-hero .dx-hero-slide.is-prev .dx-hero-card, .dm-home-hero .dx-hero-slide.is-next .dx-hero-card { border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 24px 55px rgba(0,0,0,.48) !important; } /* کارت‌های دور */ .dm-home-hero .dx-hero-slide.is-prev2 .dx-hero-card, .dm-home-hero .dx-hero-slide.is-next2 .dx-hero-card { border: 1px solid rgba(255,255,255,.055) !important; box-shadow: 0 18px 38px rgba(0,0,0,.34) !important; } /* clone فقط نمایشی */ .dm-home-hero .dx-hero-ghost { pointer-events: none !important; } } /* ========================================================= LAPTOP 1024 — 1199 ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .dm-home-hero .hero-main-slider { height: 405px !important; min-height: 405px !important; margin-top: 45px !important; } .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 405px !important; min-height: 405px !important; } .dm-home-hero .dx-hero-slide.is-active { width: 620px !important; height: 360px !important; } .dm-home-hero .dx-hero-slide.is-prev { width: 166px !important; height: 292px !important; transform: translate3d( calc(-50% - 398px), 32px, -95px ) rotateY(19deg) scale(.94) !important; } .dm-home-hero .dx-hero-slide.is-next { width: 166px !important; height: 292px !important; transform: translate3d( calc(-50% + 398px), 32px, -95px ) rotateY(-19deg) scale(.94) !important; } .dm-home-hero .dx-hero-slide.is-prev2 { width: 135px !important; height: 250px !important; transform: translate3d( calc(-50% - 515px), 53px, -230px ) rotateY(29deg) scale(.84) !important; } .dm-home-hero .dx-hero-slide.is-next2 { width: 135px !important; height: 250px !important; transform: translate3d( calc(-50% + 515px), 53px, -230px ) rotateY(-29deg) scale(.84) !important; } } /* ========================================================= 1200 — 1439 ========================================================= */ @media (min-width: 1200px) and (max-width: 1439px) { .dm-home-hero .dx-hero-slide.is-active { width: 760px !important; height: 405px !important; } .dm-home-hero .dx-hero-slide.is-prev { transform: translate3d( calc(-50% - 480px), 37px, -100px ) rotateY(20deg) scale(.95) !important; } .dm-home-hero .dx-hero-slide.is-next { transform: translate3d( calc(-50% + 480px), 37px, -100px ) rotateY(-20deg) scale(.95) !important; } .dm-home-hero .dx-hero-slide.is-prev2 { transform: translate3d( calc(-50% - 640px), 59px, -250px ) rotateY(30deg) scale(.86) !important; } .dm-home-hero .dx-hero-slide.is-next2 { transform: translate3d( calc(-50% + 640px), 59px, -250px ) rotateY(-30deg) scale(.86) !important; } } /* ========================================================= BIG DESKTOP 1600+ ========================================================= */ @media (min-width: 1600px) { .dm-home-hero .hero-main-slider { max-width: 1640px !important; } .dm-home-hero .dx-hero-slide.is-active { width: 900px !important; height: 455px !important; } .dm-home-hero .dx-hero-slide.is-prev { width: 235px !important; height: 365px !important; transform: translate3d( calc(-50% - 590px), 43px, -110px ) rotateY(21deg) scale(.97) !important; } .dm-home-hero .dx-hero-slide.is-next { width: 235px !important; height: 365px !important; transform: translate3d( calc(-50% + 590px), 43px, -110px ) rotateY(-21deg) scale(.97) !important; } .dm-home-hero .dx-hero-slide.is-prev2 { width: 190px !important; height: 315px !important; transform: translate3d( calc(-50% - 790px), 66px, -280px ) rotateY(32deg) scale(.89) !important; } .dm-home-hero .dx-hero-slide.is-next2 { width: 190px !important; height: 315px !important; transform: translate3d( calc(-50% + 790px), 66px, -280px ) rotateY(-32deg) scale(.89) !important; } } /* ========================================================= DESKTOP HERO BOTTOM OVERLAP FIX V4 ========================================================= */ @media (min-width: 1024px) { /* فضای کافی برای خود اسلایدر + dots */ .dm-home-hero { position: relative !important; z-index: 5 !important; min-height: 590px !important; padding-bottom: 55px !important; overflow-x: clip !important; overflow-y: visible !important; } .dm-home-hero .hero-main-slider { margin-bottom: 30px !important; } /* dots روی بخش بعدی نیفتند */ .dm-home-hero .dx-hero-dots { position: absolute !important; bottom: -18px !important; z-index: 50 !important; } /* * پچ قدیمی برای کم کردن فاصله، * دسته‌بندی را با margin منفی بالا کشیده بود. * اینجا خنثی‌اش می‌کنیم. */ .dm-topic-section { position: relative !important; z-index: 2 !important; margin-top: 28px !important; } /* اگر wrapper دسته‌بندی کلاس دیگری داشت */ .dm-home-hero + *, .dm-home-intro-v19 + * { position: relative; } } @media (min-width: 1440px) { .dm-home-hero { min-height: 620px !important; padding-bottom: 65px !important; } .dm-topic-section { margin-top: 34px !important; } } /* ========================================================= DIASTOMY DESKTOP HERO — COMPACT V5 Smaller first viewport / show next section ========================================================= */ @media (min-width: 1024px) { /* کل ارتفاع Hero */ .dm-home-hero { min-height: 490px !important; padding-bottom: 24px !important; } /* صحنه اسلایدر */ .dm-home-hero .hero-main-slider { height: 385px !important; min-height: 385px !important; margin-top: 28px !important; margin-bottom: 14px !important; } .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 385px !important; min-height: 385px !important; } /* کارت اصلی */ .dm-home-hero .dx-hero-slide.is-active { width: 700px !important; height: 350px !important; transform: translate3d(-50%, 0, 60px) scale(1) !important; } /* سایه نزدیک */ .dm-home-hero .dx-hero-slide.is-prev, .dm-home-hero .dx-hero-slide.is-next { width: 190px !important; height: 290px !important; } .dm-home-hero .dx-hero-slide.is-prev { transform: translate3d( calc(-50% - 450px), 28px, -100px ) rotateY(20deg) scale(.94) !important; } .dm-home-hero .dx-hero-slide.is-next { transform: translate3d( calc(-50% + 450px), 28px, -100px ) rotateY(-20deg) scale(.94) !important; } /* سایه دور */ .dm-home-hero .dx-hero-slide.is-prev2, .dm-home-hero .dx-hero-slide.is-next2 { width: 150px !important; height: 245px !important; } .dm-home-hero .dx-hero-slide.is-prev2 { transform: translate3d( calc(-50% - 600px), 47px, -240px ) rotateY(30deg) scale(.85) !important; } .dm-home-hero .dx-hero-slide.is-next2 { transform: translate3d( calc(-50% + 600px), 47px, -240px ) rotateY(-30deg) scale(.85) !important; } /* dots کمی نزدیک‌تر */ .dm-home-hero .dx-hero-dots { bottom: -7px !important; } } /* ========================================================= LAPTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .dm-home-hero { min-height: 445px !important; } .dm-home-hero .hero-main-slider, .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 350px !important; min-height: 350px !important; } .dm-home-hero .dx-hero-slide.is-active { width: 575px !important; height: 320px !important; } .dm-home-hero .dx-hero-slide.is-prev, .dm-home-hero .dx-hero-slide.is-next { width: 155px !important; height: 260px !important; } .dm-home-hero .dx-hero-slide.is-prev { transform: translate3d( calc(-50% - 365px), 27px, -95px ) rotateY(19deg) scale(.93) !important; } .dm-home-hero .dx-hero-slide.is-next { transform: translate3d( calc(-50% + 365px), 27px, -95px ) rotateY(-19deg) scale(.93) !important; } .dm-home-hero .dx-hero-slide.is-prev2, .dm-home-hero .dx-hero-slide.is-next2 { width: 122px !important; height: 220px !important; } .dm-home-hero .dx-hero-slide.is-prev2 { transform: translate3d( calc(-50% - 475px), 45px, -220px ) rotateY(29deg) scale(.83) !important; } .dm-home-hero .dx-hero-slide.is-next2 { transform: translate3d( calc(-50% + 475px), 45px, -220px ) rotateY(-29deg) scale(.83) !important; } } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1600px) { .dm-home-hero { min-height: 515px !important; } .dm-home-hero .hero-main-slider, .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 405px !important; min-height: 405px !important; } .dm-home-hero .dx-hero-slide.is-active { width: 770px !important; height: 375px !important; } } /* ========================================================= DESKTOP HERO — REMOVE BOTTOM EMPTY GAP V6 ========================================================= */ @media (min-width: 1024px) { /* * پوستر فعلی حدود 350px است. * wrapper قدیمی 490/620px فضا رزرو می‌کرد. */ .dm-home-hero { height: 425px !important; min-height: 425px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; overflow-x: clip !important; overflow-y: visible !important; } .dm-home-hero .hero-main-slider { height: 385px !important; min-height: 385px !important; margin-top: 28px !important; margin-bottom: 0 !important; } .dm-home-hero .dx-hero-track, .dm-home-hero .dx-hero-list { height: 385px !important; min-height: 385px !important; } /* pagination درست زیر Hero */ .dm-home-hero .dx-hero-dots { bottom: 2px !important; } /* * wrapper مشترک Header/Hero نباید پایین * ارتفاع اضافه نگه دارد. */ .dm-home-intro-v19 { min-height: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* بخش بعدی */ .dm-home-intro-v19 + *, .dm-topic-section { margin-top: 18px !important; } } /* لپ‌تاپ */ @media (min-width: 1024px) and (max-width: 1199px) { .dm-home-hero { height: 390px !important; min-height: 390px !important; } } /* نمایشگر بزرگ */ @media (min-width: 1600px) { .dm-home-hero { height: 445px !important; min-height: 445px !important; } } /* /static/public/assets/css/topic-compact-v1.css */ /* ========================================================= DIASTOMY TOPIC CATEGORIES — COMPACT DESKTOP V1 ========================================================= */ @media (min-width: 1024px) { /* کل قاب */ .dm-topic-section { padding-top: 22px !important; padding-bottom: 20px !important; padding-left: 28px !important; padding-right: 28px !important; min-height: 0 !important; border-radius: 26px !important; } /* هدر بالای دسته‌بندی */ .dm-topic-head { min-height: 0 !important; margin-bottom: 15px !important; padding: 0 !important; } .dm-topic-head-main { min-height: 0 !important; gap: 12px !important; } /* خط قرمز کنار عنوان */ .dm-topic-accent { height: 42px !important; } /* EXPLORE */ .dm-topic-eyebrow { margin-bottom: 3px !important; font-size: 10px !important; line-height: 1 !important; } /* عنوان */ .dm-topic-title { margin: 0 !important; font-size: 27px !important; line-height: 1.25 !important; } /* متن برای مشاهده بکشید */ .dm-topic-hint { margin: 0 !important; font-size: 11px !important; } /* ریل کارت‌ها */ .dm-topic-rail { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; gap: 12px !important; } /* هر آیتم */ .dm-topic-item { min-height: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; } /* شماره 01،02... */ .dm-topic-item-top { margin-bottom: 7px !important; min-height: 16px !important; } .dm-topic-number { font-size: 11px !important; line-height: 1 !important; } .dm-topic-dot { width: 6px !important; height: 6px !important; } /* حذف فاصله اضافی اطراف خود کارت */ .dm-topic-card { margin: 0 !important; padding: 0 !important; } } /* ========================================================= DIASTOMY TOPIC CATEGORIES — COMPACT MOBILE V2 ========================================================= */ @media (max-width: 767px) { /* قاب اصلی */ .dm-topic-section { padding: 16px 14px 14px !important; min-height: 0 !important; border-radius: 20px !important; } /* هدر */ .dm-topic-head { min-height: 0 !important; margin-bottom: 11px !important; padding: 0 !important; } .dm-topic-head-main { min-height: 0 !important; gap: 9px !important; } /* خط قرمز کنار عنوان */ .dm-topic-accent { width: 3px !important; height: 34px !important; } /* EXPLORE */ .dm-topic-eyebrow { margin-bottom: 2px !important; font-size: 8px !important; line-height: 1 !important; } /* عنوان */ .dm-topic-title { margin: 0 !important; font-size: 20px !important; line-height: 1.25 !important; } /* برای مشاهده بکشید */ .dm-topic-hint { margin: 0 !important; gap: 5px !important; font-size: 9px !important; line-height: 1 !important; } .dm-topic-hint > span { width: 5px !important; height: 5px !important; } /* ریل */ .dm-topic-rail { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; gap: 9px !important; } /* هر آیتم */ .dm-topic-item { min-height: 0 !important; padding-top: 7px !important; padding-bottom: 7px !important; } /* شماره و نقطه */ .dm-topic-item-top { min-height: 13px !important; margin-bottom: 5px !important; } .dm-topic-number { font-size: 9px !important; line-height: 1 !important; } .dm-topic-dot { width: 5px !important; height: 5px !important; } /* خود کارت بدون فضای اضافه */ .dm-topic-card { margin: 0 !important; padding: 0 !important; } } /* ========================================================= DIASTOMY TOPIC CATEGORIES — MOBILE COMPACT FINAL V2 ========================================================= */ @media (max-width: 767px) { /* * OUTER BOX * کل سکشن جمع شود و فضای مرده حذف شود */ .dm-topic-section { position: relative !important; width: calc(100% - 20px) !important; margin: 14px auto 22px !important; padding: 13px 12px 13px !important; min-height: 0 !important; height: auto !important; border-radius: 22px !important; overflow: hidden !important; } /* ========================= HEADER ========================= */ .dm-topic-head { display: block !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .dm-topic-head-main { display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .dm-topic-accent { width: 4px !important; height: 42px !important; min-width: 4px !important; margin-top: 1px !important; border-radius: 999px !important; } .dm-topic-eyebrow { display: block !important; margin: 0 0 2px !important; font-size: 8px !important; line-height: 1 !important; letter-spacing: 2px !important; opacity: .5 !important; } .dm-topic-title { margin: 0 !important; padding: 0 !important; font-size: 19px !important; line-height: 1.25 !important; white-space: nowrap !important; } /* * hint موبایل حذف * همین بخش فضای خالی غیرضروری می‌ساخت */ .dm-topic-hint { display: none !important; } /* ========================= RAIL ========================= */ .dm-topic-rail { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; margin: 10px 0 0 !important; padding: 0 !important; overflow: visible !important; scroll-snap-type: none !important; } /* ========================= ITEMS ========================= */ .dm-topic-item { position: relative !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 74px !important; min-height: 74px !important; margin: 0 !important; padding: 9px 9px 8px !important; border-radius: 18px !important; overflow: hidden !important; } .dm-topic-item-top { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin: 0 0 9px !important; padding: 0 !important; min-height: 10px !important; } .dm-topic-number { font-size: 10px !important; line-height: 1 !important; letter-spacing: 1px !important; opacity: .42 !important; } .dm-topic-dot { width: 6px !important; height: 6px !important; min-width: 6px !important; min-height: 6px !important; margin: 0 !important; } .dm-topic-card { width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; } /* * متن داخل card_category */ .dm-topic-card a, .dm-topic-card div { min-height: 0 !important; } .dm-topic-card h3, .dm-topic-card h4, .dm-topic-card p, .dm-topic-card span { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.2 !important; } /* * فقط سه آیتم اول داخل باکس موبایل * تا ارتفاع سکشن دقیق و کنترل‌شده بماند */ .dm-topic-item:nth-child(n+4) { display: none !important; } } /* ========================================================= DIASTOMY TOPIC — ULTRA COMPACT MOBILE V3 ========================================================= */ @media (max-width: 767px) { .dm-topic-section { width: calc(100% - 20px) !important; height: 112px !important; min-height: 112px !important; max-height: 112px !important; margin: 10px auto 20px !important; padding: 9px 10px 9px !important; box-sizing: border-box !important; border-radius: 20px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } /* HEADER */ .dm-topic-head { height: 30px !important; min-height: 30px !important; max-height: 30px !important; margin: 0 0 5px !important; padding: 0 2px !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; flex: 0 0 30px !important; } .dm-topic-head-main { height: 30px !important; display: flex !important; align-items: flex-start !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; } .dm-topic-accent { width: 3px !important; min-width: 3px !important; height: 30px !important; margin: 0 !important; border-radius: 999px !important; } .dm-topic-eyebrow { font-size: 6.5px !important; line-height: 1 !important; margin: 0 0 1px !important; letter-spacing: 1.5px !important; } .dm-topic-title { font-size: 16px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } .dm-topic-hint { display: none !important; } /* RAIL */ .dm-topic-rail { flex: 1 1 auto !important; width: 100% !important; height: 59px !important; min-height: 59px !important; max-height: 59px !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: initial !important; grid-auto-columns: initial !important; gap: 7px !important; overflow: hidden !important; } /* CARDS */ .dm-topic-item { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 59px !important; min-height: 59px !important; max-height: 59px !important; margin: 0 !important; padding: 6px 8px !important; box-sizing: border-box !important; border-radius: 15px !important; overflow: hidden !important; } .dm-topic-item-top { height: 11px !important; min-height: 11px !important; margin: 0 0 5px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .dm-topic-number { font-size: 8px !important; line-height: 1 !important; letter-spacing: .8px !important; } .dm-topic-dot { width: 5px !important; height: 5px !important; min-width: 5px !important; min-height: 5px !important; } .dm-topic-card { height: 31px !important; min-height: 31px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } .dm-topic-card a { min-height: 0 !important; height: auto !important; font-size: 12px !important; line-height: 1.15 !important; margin: 0 !important; padding: 0 !important; } /* فقط سه دسته اول */ .dm-topic-item:nth-child(n+4) { display: none !important; } } /* ========================================================= DIASTOMY TOPIC — HTML COMPACT V4 ========================================================= */ @media (max-width: 767px) { .dm-topic-section-v4 { width: calc(100% - 20px) !important; margin: 10px auto 20px !important; padding: 9px 10px 10px !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; border-radius: 20px !important; overflow: hidden !important; } .dm-topic-v4-head { display: flex !important; align-items: flex-start !important; gap: 7px !important; margin: 0 0 7px !important; padding: 0 2px !important; height: auto !important; min-height: 0 !important; } .dm-topic-v4-copy { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .dm-topic-section-v4 .dm-topic-accent { width: 3px !important; min-width: 3px !important; height: 29px !important; margin: 0 !important; } .dm-topic-section-v4 .dm-topic-eyebrow { display: block !important; margin: 0 0 2px !important; font-size: 6.5px !important; line-height: 1 !important; letter-spacing: 1.4px !important; } .dm-topic-section-v4 .dm-topic-title { margin: 0 !important; font-size: 16px !important; line-height: 1.05 !important; white-space: nowrap !important; } .dm-topic-v4-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 7px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .dm-topic-item-v4 { width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 58px !important; margin: 0 !important; padding: 6px 8px !important; border-radius: 15px !important; } .dm-topic-item-v4 .dm-topic-item-top { margin: 0 0 4px !important; height: 10px !important; min-height: 10px !important; } .dm-topic-item-v4 .dm-topic-number { font-size: 8px !important; } .dm-topic-item-v4 .dm-topic-dot { width: 5px !important; height: 5px !important; } .dm-topic-item-v4 .dm-topic-card { min-height: 0 !important; height: 30px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } .dm-topic-item-v4 .dm-topic-card a { min-height: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 1.1 !important; } } /* ========================================================= DIASTOMY TOPIC — REMOVE NUMBERS V5 ========================================================= */ @media (max-width: 767px) { .dm-topic-item-v4 .dm-topic-item-top { justify-content: flex-start !important; } .dm-topic-item-v4 .dm-topic-dot { margin-inline-start: 0 !important; } } /* ========================================================= DIASTOMY TOPIC — REMOVE TOP RED DOT V6 ========================================================= */ @media (max-width: 767px) { .dm-topic-item, .dm-topic-item-v4 { gap: 0 !important; } .dm-topic-card, .dm-topic-item-v4 .dm-topic-card { margin-top: 0 !important; } } /* ========================================================= DIASTOMY TOPIC — TIGHT FINAL V7 ========================================================= */ @media (max-width: 767px) { .dm-topic-section-v4 { padding: 7px 10px 8px !important; margin: 8px auto 18px !important; border-radius: 19px !important; } .dm-topic-v4-head { margin: 0 0 4px !important; padding: 0 2px !important; } .dm-topic-section-v4 .dm-topic-accent { height: 27px !important; } .dm-topic-section-v4 .dm-topic-eyebrow { margin-bottom: 1px !important; } .dm-topic-section-v4 .dm-topic-title { font-size: 15.5px !important; line-height: 1 !important; } .dm-topic-v4-grid { gap: 6px !important; } .dm-topic-item-v4 { height: 54px !important; padding: 5px 8px !important; border-radius: 14px !important; } .dm-topic-item-v4 .dm-topic-card { height: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; } } /* ========================================================= DIASTOMY TOPIC V4 — ULTRA SLIM MOBILE ========================================================= */ @media (max-width: 767px) { .dm-topic-section-v4 { width: calc(100% - 20px) !important; margin: 6px auto 12px !important; padding: 5px 7px 6px !important; min-height: 0 !important; height: auto !important; border-radius: 15px !important; } .dm-topic-v4-head { margin: 0 0 3px !important; padding: 0 2px !important; gap: 5px !important; min-height: 0 !important; } .dm-topic-section-v4 .dm-topic-accent { width: 3px !important; min-width: 3px !important; height: 21px !important; } .dm-topic-section-v4 .dm-topic-eyebrow { font-size: 5.5px !important; margin: 0 0 1px !important; line-height: 1 !important; } .dm-topic-section-v4 .dm-topic-title { font-size: 13px !important; line-height: 1 !important; margin: 0 !important; } .dm-topic-v4-grid { gap: 5px !important; } .dm-topic-item-v4 { height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 2px 4px !important; margin: 0 !important; border-radius: 10px !important; display: flex !important; align-items: center !important; } .dm-topic-item-v4 .dm-topic-card { width: 100% !important; height: 28px !important; min-height: 28px !important; display: flex !important; align-items: center !important; } .dm-topic-item-v4 .dm-topic-card > a { width: 100% !important; height: 28px !important; min-height: 28px !important; padding: 2px 6px !important; font-size: 10.5px !important; line-height: 1 !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .dm-topic-item-v4 .dm-topic-card > a > div { width: 4px !important; height: 4px !important; min-width: 4px !important; } } /* /static/public/assets/css/hero-arrows-v1.css */ /* ========================================================= DIASTOMY HERO ARROWS V1 Mobile + Desktop ========================================================= */ .dm-home-hero { position: relative !important; } .dm-hero-arrow { position: absolute !important; top: 45% !important; width: 46px !important; height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 50% !important; background: rgba(8,8,10,.55) !important; color: rgba(255,255,255,.92) !important; box-shadow: 0 10px 30px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; z-index: 90 !important; cursor: pointer !important; opacity: .78 !important; transform: translateY(-50%) !important; transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease !important; } .dm-hero-arrow--left { left: 24px !important; } .dm-hero-arrow--right { right: 24px !important; } .dm-hero-arrow svg { width: 22px !important; height: 22px !important; display: block !important; } .dm-hero-arrow:hover { opacity: 1 !important; background: rgba(20,20,22,.78) !important; border-color: rgba(255,255,255,.32) !important; } .dm-hero-arrow:active { transform: translateY(-50%) scale(.92) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dm-hero-arrow { top: 40% !important; width: 38px !important; height: 38px !important; background: rgba(8,8,10,.48) !important; border-color: rgba(255,255,255,.12) !important; opacity: .82 !important; } .dm-hero-arrow--left { left: 10px !important; } .dm-hero-arrow--right { right: 10px !important; } .dm-hero-arrow svg { width: 19px !important; height: 19px !important; } } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1024px) { .dm-hero-arrow { width: 48px !important; height: 48px !important; top: 46% !important; } .dm-hero-arrow--left { left: 42px !important; } .dm-hero-arrow--right { right: 42px !important; } } /* مانیتورهای بزرگ */ @media (min-width: 1600px) { .dm-hero-arrow--left { left: 70px !important; } .dm-hero-arrow--right { right: 70px !important; } } /* /static/public/assets/css/home-desktop-clean-r3.css */ /* ========================================================= DIASTOMY HOME CLEAN R3 Use ONLY global components/header.html ========================================================= */ /* * تمام هدرهای اختصاصی Home مخفی. * فقط components/header.html باید دیده شود. */ body[data-page="home"] .dm-home-shell-v3, body[data-page="home"] .dm-desktop-header-r2 { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ========================================================= TOPIC CATEGORIES حفظ دیزاین درست دسته‌بندی دسکتاپ ========================================================= */ @media (min-width: 1024px) { body[data-page="home"] .dm-topic-section, body[data-page="home"] .dm-topic-section-v4 { width: min(calc(100% - 96px), 1344px) !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 20px auto 62px !important; padding: 22px 28px 24px !important; box-sizing: border-box !important; border-radius: 26px !important; overflow: hidden !important; } body[data-page="home"] .dm-topic-head, body[data-page="home"] .dm-topic-v4-head { height: auto !important; min-height: 0 !important; margin: 0 0 16px !important; padding: 0 !important; } body[data-page="home"] .dm-topic-rail, body[data-page="home"] .dm-topic-v4-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: initial !important; gap: 12px !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; scroll-snap-type: none !important; } body[data-page="home"] .dm-topic-item, body[data-page="home"] .dm-topic-item-v4 { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; margin: 0 !important; padding: 9px 12px !important; box-sizing: border-box !important; border-radius: 18px !important; overflow: hidden !important; } body[data-page="home"] .dm-topic-card, body[data-page="home"] .dm-topic-item-v4 .dm-topic-card { width: 100% !important; height: 39px !important; min-height: 39px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } } /* ========================================================= DIASTOMY TOPIC — EXTRA SLIM FINAL ========================================================= */ /* Desktop */ @media (min-width: 1024px) { body[data-page="home"] .dm-topic-section-v4 { margin: 14px auto 44px !important; padding: 14px 22px 16px !important; border-radius: 22px !important; } body[data-page="home"] .dm-topic-v4-head { margin: 0 0 9px !important; } body[data-page="home"] .dm-topic-section-v4 .dm-topic-accent { height: 34px !important; width: 4px !important; } body[data-page="home"] .dm-topic-section-v4 .dm-topic-eyebrow { font-size: 9px !important; margin-bottom: 2px !important; } body[data-page="home"] .dm-topic-section-v4 .dm-topic-title { font-size: 23px !important; line-height: 1.05 !important; } body[data-page="home"] .dm-topic-v4-grid { gap: 10px !important; } body[data-page="home"] .dm-topic-item-v4 { height: 58px !important; min-height: 58px !important; max-height: 58px !important; padding: 6px 10px !important; border-radius: 15px !important; } body[data-page="home"] .dm-topic-item-v4 .dm-topic-card { height: 34px !important; min-height: 34px !important; } body[data-page="home"] .dm-topic-item-v4 .dm-topic-card > *, body[data-page="home"] .dm-topic-item-v4 .dm-topic-card a { min-height: 30px !important; font-size: 14px !important; } } /* Mobile */ @media (max-width: 767px) { body[data-page="home"] .dm-topic-section-v4 { padding: 6px 8px 7px !important; margin: 6px auto 14px !important; border-radius: 17px !important; } body[data-page="home"] .dm-topic-v4-head { margin-bottom: 3px !important; } body[data-page="home"] .dm-topic-section-v4 .dm-topic-accent { height: 23px !important; width: 3px !important; } body[data-page="home"] .dm-topic-section-v4 .dm-topic-title { font-size: 14px !important; } body[data-page="home"] .dm-topic-section-v4 .dm-topic-eyebrow { font-size: 6px !important; } body[data-page="home"] .dm-topic-v4-grid { gap: 5px !important; } body[data-page="home"] .dm-topic-item-v4 { height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 3px 6px !important; border-radius: 12px !important; } body[data-page="home"] .dm-topic-item-v4 .dm-topic-card { height: 34px !important; min-height: 34px !important; } body[data-page="home"] .dm-topic-item-v4 .dm-topic-card a { min-height: 30px !important; font-size: 11.5px !important; } }