/* * BynoBit Academy — Magazine landing * ------------------------------------------------------------------ * قالب هیچ build pipeline ای برای Tailwind ندارد و فایل های CSS از قبل * purge شده اند. این فایل فقط همان یوتیلیتی هایی را می سازد که در build * موجود نیستند (object-cover / aspect-ratio / line-clamp-3 / gradient عمودی). * بقیه استایل ها با کلاس های موجود قالب نوشته شده تا ظاهر یکدست بماند. * * دارک مود مثل قالب مادر با کلاس .dark روی کار می کند، پس اینجا هم * از همان الگوی :is(.dark *) استفاده شده است. */ /*===== TOKENS =====*/ .bb-mag { --bb-primary: var(--color-primary-color, #f7a600); --bb-radius: .5rem; } /*===== MEDIA: cover + نسبت تصویر ثابت (جلوگیری از CLS) =====*/ .bb-media { position: relative; display: block; overflow: hidden; border-radius: var(--bb-radius); background-color: #e7e5e4; /* stone-200 — پیش از لود شدن تصویر */ } .bb-media:is(.dark *) { background-color: #292524; /* stone-800 */ } .bb-media > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .bb-ratio-16-9 { aspect-ratio: 16 / 9; } .bb-ratio-4-3 { aspect-ratio: 4 / 3; } .bb-ratio-1-1 { aspect-ratio: 1 / 1; } /* هیرو روی موبایل کوتاه تر، روی دسکتاپ بلندتر */ .bb-ratio-hero { aspect-ratio: 4 / 3; } @media (min-width: 768px) { .bb-ratio-hero { aspect-ratio: 16 / 10; } } /*===== ZOOM ملایم روی هاور (فقط transform — بدون reflow) =====*/ .bb-zoom > img { transition: transform .4s ease-out; } .bb-card:hover .bb-zoom > img { transform: scale(1.04); } /*===== OVERLAY گرادیانی برای کارت هیرو =====*/ .bb-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgb(12 10 9 / .92) 0%, rgb(12 10 9 / .70) 35%, rgb(12 10 9 / .15) 70%, rgb(12 10 9 / 0) 100% ); } /*===== LINE CLAMP (نسخه ۳ خطی در build موجود نیست) =====*/ .bb-clamp-2, .bb-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .bb-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; } .bb-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; } /*===== نوار موضوعات: اسکرول افقی بدون اسکرول بار =====*/ .bb-scroll-x { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .bb-scroll-x::-webkit-scrollbar { display: none; } /*===== شماره در لیست پربازدیدها =====*/ .bb-rank { font-variant-numeric: tabular-nums; line-height: 1; } /*===== حالت فعال تب های فیلتر =====*/ .bb-tab[aria-selected="true"] { background-color: var(--bb-primary); border-color: var(--bb-primary); color: #1c1917; /* stone-900 — کنتراست ~۱۱:۱ روی زرد */ } .bb-tab[aria-selected="true"]:is(.dark *) { color: #1c1917; } /*===== وضعیت در حال بارگذاری گرید =====*/ .bb-grid-loading { opacity: .45; pointer-events: none; transition: opacity .2s ease-out; } /*===== اسکلتون =====*/ .bb-skeleton { background: linear-gradient(90deg, #f5f5f4 25%, #e7e5e4 37%, #f5f5f4 63%); background-size: 400% 100%; animation: bb-shimmer 1.4s ease infinite; } .bb-skeleton:is(.dark *) { background: linear-gradient(90deg, #292524 25%, #44403c 37%, #292524 63%); background-size: 400% 100%; } @keyframes bb-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /*===== ورود پلکانی آیتم های گرید =====*/ .bb-enter { animation: bb-fade-up .32s ease-out backwards; } @keyframes bb-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /*===== فوکوس قابل مشاهده (قالب مادر روی خیلی جاها ندارد) =====*/ .bb-mag a:focus-visible, .bb-mag button:focus-visible, .bb-mag input:focus-visible { outline: 2px solid var(--bb-primary); outline-offset: 2px; border-radius: var(--bb-radius); } /*================================================================== * یوتیلیتی های Tailwind که در build کامپایل شده قالب حضور ندارند. * عمداً زیر .bb-mag اسکوپ شده اند تا هیچ اثری بیرون از این صفحه نگذارند. * مقادیر دقیقاً برابر مقادیر پیش فرض Tailwind است (stone / breakpoints). *================================================================*/ .bb-mag .shrink-0 { flex-shrink: 0; } .bb-mag .min-w-0 { min-width: 0; } .bb-mag .mt-auto { margin-top: auto; } .bb-mag .text-stone-900 { color: #1c1917; } .bb-mag .hover\:bg-stone-800:hover { background-color: #292524; } .dark .bb-mag .dark\:text-stone-600 { color: #57534e; } .dark .bb-mag .dark\:text-stone-700 { color: #44403c; } /* breakpoints قالب: sm 40rem / md 48rem / lg 64rem / xl 80rem */ @media (min-width: 40rem) { .bb-mag .sm\:col-span-2 { grid-column: span 2 / span 2; } } @media (min-width: 48rem) { .bb-mag .md\:items-center { align-items: center; } .bb-mag .md\:w-96 { width: 24rem; } } @media (min-width: 80rem) { .bb-mag .xl\:col-span-2 { grid-column: span 2 / span 2; } } /*===== احترام به prefers-reduced-motion =====*/ @media (prefers-reduced-motion: reduce) { .bb-mag *, .bb-mag *::before, .bb-mag *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .bb-card:hover .bb-zoom > img { transform: none; } }