/* ===================================================================== CF CINEMA v2 — «التذكرة»: طبقة تصميم إضافية فوق cf-browse.css --------------------------------------------------------------------- • حمّله مباشرة بعد cf-browse.css (يعتمد على نفس الترتيب في التفوّق). • لا يغيّر أي HTML ولا JS موجود: يضيف فقط - فئات جديدة: .cf-item--wide .cf-smart .cf-smart__* .cf-vh - متغيّراً: --cf-glow (ثلاثية RGB مفصولة بمسافات: "230 57 70") • المتصفحات القديمة التي لا تدعم Container Queries ترى تصميم cf-browse.css كما هو تماماً (تدهور سلس). الفهرس: 1) المتغيرات 4) زجاج التفاصيل (cf-sheet) 2) الأداء 5) الشارات الذكية 3) التوهج والتفاعل 6) البطاقة العريضة (Bento) 7) Container Queries ===================================================================== */ /* ---------- 1) المتغيرات ---------- */ .cf{ --cf-glow:230 57 70; /* يُستبدل بلون البوستر عبر cf-cinema.js أو data-glow */ --cf-glass:rgb(11 13 18 / .62); --cf-blur:16px; /* التفاصيل السريعة */ --cf-blur-sm:10px; /* الشارات (أرخص على الـ GPU) */ } /* ---------- 2) الأداء: مئات البطاقات بلا تقطيع ---------- content-visibility: لا يُرسم ما هو خارج الشاشة. أول 12 بطاقة تبقى مرئية دائماً (LCP + لا قفزات عند أول تمرير). ملاحظة: content-visibility تقصّ الرسم عند حدود العنصر، ولذلك استبدلنا رفع البطاقة (translateY) والظل الخارجي بتوهج داخلي. */ .cf .cf-grid{grid-auto-flow:dense} .cf .cf-item{ container:cfc/inline-size; content-visibility:auto; contain-intrinsic-size:auto 330px; } .cf .cf-item:nth-child(-n+12), .cf .cf-item.is-feature{content-visibility:visible} :root[data-cf-view="list"] .cf .cf-item{contain-intrinsic-size:auto 240px} /* ---------- 3) التوهج المحيطي + التفاعلات ---------- */ .cf .cf-card::before{ content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none; background:radial-gradient(130% 56% at 50% 40%,rgb(var(--cf-glow) / .36),transparent 72%); opacity:.65;transition:opacity .45s var(--cf-ease) } .cf .cf-card:focus-within::before{opacity:1} @media (hover:hover) and (pointer:fine){ .cf .cf-card:hover{ transform:none; /* يلغي الرفع القديم (يُقصّ مع content-visibility) */ border-color:rgb(var(--cf-glow) / .7); box-shadow: inset 0 0 0 1px rgb(var(--cf-glow) / .32), inset 0 -46px 64px -44px rgb(var(--cf-glow) / .42) } .cf .cf-card:hover::before{opacity:1} .cf .cf-card:hover .cf-media img{transform:scale(1.03);will-change:transform} /* will-change عند التفاعل فقط */ } /* ---------- 4) زجاج التفاصيل السريعة (cf-sheet) ---------- يُطبَّق فقط حين تكون الورقة طبقة فوق البوستر (شبكة عادية)، فلا يمسّ وضع القائمة ولا البطاقة المميّزة. */ :root:not([data-cf-view="list"]) .cf .cf-item:not(.is-feature) .cf-card.is-open .cf-sheet{ background: linear-gradient(0deg,rgb(var(--cf-glow) / .24),transparent 58%), var(--cf-glass); -webkit-backdrop-filter:blur(var(--cf-blur)) saturate(1.35); backdrop-filter:blur(var(--cf-blur)) saturate(1.35) } @media (hover:hover) and (pointer:fine){ :root:not([data-cf-view="list"]) .cf .cf-item:not(.is-feature) .cf-card:hover .cf-sheet, :root:not([data-cf-view="list"]) .cf .cf-item:not(.is-feature) .cf-card:focus-within .cf-sheet{ background: linear-gradient(0deg,rgb(var(--cf-glow) / .24),transparent 58%), var(--cf-glass); -webkit-backdrop-filter:blur(var(--cf-blur)) saturate(1.35); backdrop-filter:blur(var(--cf-blur)) saturate(1.35) } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root:not([data-cf-view="list"]) .cf .cf-item:not(.is-feature) .cf-card .cf-sheet{background:rgba(11,13,18,.95)} } /* ---------- 5) الشارة الذكية: ملصق صلب يعبر خط التمزيق ---------- تُطبع داخل
(وليس داخل .cf-flags). معلومة لا تكررها البطاقة في مكان آخر: حداثة العمل فقط (جديد / محدَّث). */ .cf-body{position:relative} .cf-body:has(.cf-smart){padding-top:16px} .cf-smart{ --sm-bg:#ffb52a;--sm-ink:#1a1300; position:absolute;top:-11px;left:12px;z-index:2; display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:7px; font-size:11px;font-weight:800;line-height:1;white-space:nowrap; color:var(--sm-ink);background:var(--sm-bg); box-shadow:0 0 0 3px var(--cf-surface),0 8px 14px -6px rgb(0 0 0 / .85) /* حلقة بلون البطاقة = ملصق مقصوص */ } .cf-smart__dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--sm-ink)} .cf-smart[data-kind="new-ep"] .cf-smart__dot, .cf-smart[data-kind="new"] .cf-smart__dot{animation:cfPulse 1.6s ease-in-out infinite} /* cfPulse في cf-browse.css */ .cf-smart[data-kind="updated"]{--sm-bg:#3ccfb6;--sm-ink:#04201b} /* في القائمة والعريضة لا يوجد خط تمزيق فوق العنوان: تصبح سطراً عادياً */ :root[data-cf-view="list"] .cf-smart, .cf-item--wide .cf-smart{position:static;align-self:flex-start;margin:0 0 6px;box-shadow:none} :root[data-cf-view="list"] .cf-body:has(.cf-smart), .cf-item--wide .cf-body:has(.cf-smart){padding-top:12px} @media (hover:none),(pointer:coarse){.cf .cf-info{bottom:16px}} /* يترك للملصق مكانه */ /* ---------- 5-ب) شارة الجودة: نظام ألوان هادئ ---------- الشائع (WEB-DL / HD) رمادي فضّي؛ اللون للاستثنائي فقط: ذهبي 4K | أزرق Blu-ray/1080p | أخضر Rip/HDTV | برتقالي (جودة منخفضة CAM/TS) */ .cf .cf-q{ --qc:203 213 225; color:rgb(var(--qc));background:rgb(11 13 18 / .82); border:1px solid rgb(var(--qc) / .5);box-shadow:0 4px 10px rgb(0 0 0 / .4) } .cf .cf-q.quality-bdrip,.cf .cf-q.quality-bluray,.cf .cf-q.quality-brrip,.cf .cf-q.quality-hd-1080p{--qc:125 190 255} .cf .cf-q.quality-hdrip,.cf .cf-q.quality-hdtv,.cf .cf-q.quality-perhd,.cf .cf-q.quality-tvrip,.cf .cf-q.quality-webhd,.cf .cf-q.quality-webrip{--qc:126 224 164} .cf .cf-q.quality-cam,.cf .cf-q.quality-desiscr,.cf .cf-q.quality-dthrip,.cf .cf-q.quality-dvbrip,.cf .cf-q.quality-dvdscr, .cf .cf-q.quality-hc-webrip,.cf .cf-q.quality-hchdrip,.cf .cf-q.quality-hdcam,.cf .cf-q.quality-hdtc,.cf .cf-q.quality-hdts, .cf .cf-q.quality-r5,.cf .cf-q.quality-scr,.cf .cf-q.quality-tc,.cf .cf-q.quality-ts,.cf .cf-q.quality-tshq{--qc:255 159 67} .cf .cf-q.quality-4k{background:linear-gradient(135deg,#ffb52a,#e08a00);color:#1a1300;border-color:transparent} /* ---------- 5-ج) التذكرة: خط تمزيق منقّط + قَصّتان على الجانبين ---------- موضع القَصّة = أسفل البوستر تماماً، يُحسب من عرض البطاقة (cqi) × نسبة 338/258. للشبكة العادية فقط؛ المميّزة والعريضة والقائمة تأخذ الخط المنقّط بلا قَصّات. */ .cf-body::before{ content:"";position:absolute;top:0;right:14px;left:14px;height:0;pointer-events:none; border-top:1.5px dashed rgb(255 255 255 / .17) } :root[data-cf-view="list"] .cf-body::before{display:none} :root:not([data-cf-view="list"]) .cf .cf-item:not(.is-feature):not(.cf-item--wide) .cf-card{ --cut:calc((100cqi - 2px) * 1.31008 + 1px); --nr:7px; -webkit-mask: radial-gradient(circle var(--nr) at 0 var(--cut),#0000 calc(var(--nr) - .5px),#000 var(--nr)) left/51% 100% no-repeat, radial-gradient(circle var(--nr) at 100% var(--cut),#0000 calc(var(--nr) - .5px),#000 var(--nr)) right/51% 100% no-repeat; mask: radial-gradient(circle var(--nr) at 0 var(--cut),#0000 calc(var(--nr) - .5px),#000 var(--nr)) left/51% 100% no-repeat, radial-gradient(circle var(--nr) at 100% var(--cut),#0000 calc(var(--nr) - .5px),#000 var(--nr)) right/51% 100% no-repeat } /* حدّ القَصّة (حتى لا تبدو الحافة مقروضة) */ :root:not([data-cf-view="list"]) .cf .cf-item:not(.is-feature):not(.cf-item--wide) .cf-card::after{ content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none; background: radial-gradient(circle calc(var(--nr) + 1px) at 0 var(--cut),#0000 var(--nr),rgb(255 255 255 / .16) calc(var(--nr) + .5px),#0000 calc(var(--nr) + 1px)), radial-gradient(circle calc(var(--nr) + 1px) at 100% var(--cut),#0000 var(--nr),rgb(255 255 255 / .16) calc(var(--nr) + .5px),#0000 calc(var(--nr) + 1px)) } /* نص إضافي لقارئات الشاشة ومحركات البحث (سنة الإنتاج + «مترجم») */ .cf-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- 6) البطاقة العريضة (Bento) — للحلقات/الإصدارات الجديدة كلياً ---------- تُضاف الفئة .cf-item--wide من PHP (حدّ أقصى 2 لكل قسم). لا تعمل في وضع القائمة، ولا مع .is-feature (الأولوية للمميّزة). */ :root:not([data-cf-view="list"]) .cf .cf-item--wide:not(.is-feature){grid-column:span 2} @container cfc (min-width:330px){ :root:not([data-cf-view="list"]) .cf-item--wide:not(.is-feature) .cf-stage{ aspect-ratio:16/9;flex:1 0 auto } :root:not([data-cf-view="list"]) .cf-item--wide:not(.is-feature) .cf-media img{object-position:center 22%} :root:not([data-cf-view="list"]) .cf-item--wide:not(.is-feature) .cf-title{font-size:16px} /* لوحة زجاجية دائمة أسفل البوستر بدل الورقة الكاملة */ :root:not([data-cf-view="list"]) .cf-item--wide:not(.is-feature) .cf-sheet{ top:auto;bottom:0;aspect-ratio:auto;opacity:1;transform:none;pointer-events:auto; flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 12px 10px 64px; background:linear-gradient(0deg,rgb(var(--cf-glow) / .3),rgb(11 13 18 / .5)); -webkit-backdrop-filter:blur(var(--cf-blur)) saturate(1.35); backdrop-filter:blur(var(--cf-blur)) saturate(1.35); border-top:1px solid rgb(255 255 255 / .12) } :root:not([data-cf-view="list"]) .cf-item--wide:not(.is-feature) .cf-specs, :root:not([data-cf-view="list"]) .cf-item--wide:not(.is-feature) .cf-cast, :root:not([data-cf-view="list"]) .cf-item--wide:not(.is-feature) .cf-gen{display:none} :root:not([data-cf-view="list"]) .cf-item--wide:not(.is-feature) .cf-sw{flex:1 1 200px;width:auto} :root:not([data-cf-view="list"]) .cf-item--wide:not(.is-feature) .cf-story{--cf-lines:2;font-size:12px} :root:not([data-cf-view="list"]) .cf-item--wide:not(.is-feature) .cf-go{margin-top:0;flex:none} } /* ---------- 7) Container Queries: كل بطاقة تعرف مساحتها ---------- */ .cf .cf-item .cf-title{font-size:clamp(12px,6.4cqi,14.5px)} .cf .cf-item .cf-ring{width:clamp(32px,19cqi,46px);height:clamp(32px,19cqi,46px)} .cf .cf-item .cf-ring b{font-size:clamp(10px,6cqi,12.5px)} @container cfc (max-width:150px){ .cf-facts li:nth-child(n+3){display:none} .cf-smart{padding:0 8px;font-size:10.5px} .cf-q{font-size:9.5px;padding:2px 6px} } @container cfc (min-width:210px){ .cf-body{padding:12px 13px 13px} .cf-facts{font-size:12px} } @media (prefers-reduced-transparency:reduce){ .cf .cf-sheet{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} }