/* ========================== Blog Page – Segal Negar Scoped overrides for dark blog page ========================== */ /* فونت فارسی Vazirmatn (از استایل پایه) */ @font-face { font-family: "Vazirmatn"; src: url("/fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; } /* متغیرهای برند */ :root { --brand-red: #d32f2f; --bg-900: #0f1115; /* نزدیک به neutral-900 */ --bg-800: #151922; --text-100: #f5f5f5; --text-300: #d1d5db; --text-400: #9ca3af; --card-border: rgba(255, 255, 255, 0.1); --card-glow: rgba(211, 47, 47, 0.35); } /* -------------------------- اسکوپ صفحه وبلاگ (به کلاس blog-page بده) --------------------------- */ body.blog-page { font-family: "Vazirmatn", sans-serif; background: radial-gradient( 1200px 600px at 10% -10%, rgba(211, 47, 47, 0.12) 0%, rgba(211, 47, 47, 0) 60% ), linear-gradient(180deg, var(--bg-900) 0%, #0c0f14 100%); color: var(--text-100); margin: 0; padding: 0; overflow-x: hidden; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* لینک‌ها – از استایل پایه الهام گرفته ولی برای تم تیره */ body.blog-page a { text-decoration: none; color: inherit; transition: all 0.3s ease-in-out; } body.blog-page a:hover { color: var(--brand-red); } /* تیترها */ body.blog-page h1, body.blog-page h2, body.blog-page h3 { color: #fff; } /* Breadcrumb */ body.blog-page .breadcrumb, body.blog-page nav[aria-label="breadcrumb"], body.blog-page nav[aria-label="breadcrumb"] a { color: var(--text-400); } body.blog-page nav[aria-label="breadcrumb"] a:hover { color: #fff; } /* کارت‌های وبلاگ (تقویت بوردر/سایه مطابق طراحی) */ body.blog-page .post-card, body.blog-page article.group { border: 1px solid var(--card-border); background: linear-gradient( 135deg, rgba(211, 47, 47, 0.05), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) ); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); transition: box-shadow 0.25s ease, transform 0.25s ease; } body.blog-page article.group:hover { box-shadow: 0 0 25px var(--card-glow); transform: translateY(-2px); } /* کاور کارت و اورلی گرادیان */ body.blog-page .post-card__cover, body.blog-page article .relative.rounded-xl { background: rgba(255, 255, 255, 0.05); } body.blog-page .post-card__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 60% ); opacity: 0; transition: opacity 0.25s ease; } body.blog-page article.group:hover .post-card__cover::after, body.blog-page article.group:hover .relative.rounded-xl > .absolute.inset-0 { opacity: 1; } /* متاداده پست */ body.blog-page .post-meta, body.blog-page .text-neutral-400 { color: var(--text-400) !important; } /* چیپ‌های دسته‌بندی (اگر کلاس سفارشی بخواهی) */ body.blog-page .chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: var(--text-300); font-size: 0.875rem; } body.blog-page .chip.is-active { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } /* سرچ */ body.blog-page .search-input { width: 100%; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.625rem 1rem; color: #fff; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.blog-page .search-input::placeholder { color: var(--text-400); } body.blog-page .search-input:focus { border-color: var(--brand-red); box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.35); } /* دکمه‌های قرمز برند (اگر جایی نیاز شد) */ body.blog-page .btn-red { display: inline-block; padding: 0.75rem 1.25rem; border-radius: 1rem; border: 1px solid var(--brand-red); background: var(--brand-red); color: #fff; font-weight: 600; backdrop-filter: blur(6px); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); } body.blog-page .btn-red:hover { transform: scale(1.05); background: #fff; color: var(--brand-red); box-shadow: 0 15px 28px rgba(0, 0, 0, 0.35); } /* صفحه‌بندی */ body.blog-page .pagination a { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #fff; padding: 0.5rem 0.75rem; border-radius: 0.5rem; } body.blog-page .pagination a.is-active { border-color: var(--brand-red); background: var(--brand-red); } /* Line Clamp اگر پلاگین Tailwind فعال نیست */ /* دو خط برش بدون vendor-prefix (سازگار و بدون خطا) */ body.blog-page .line-clamp-2 { line-height: 1.6; max-height: calc(1.6em * 2); overflow: hidden; display: block; } /* افکت ورود آرام (از استایل پایه) */ @keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } body.blog-page .animate-fade-in { animation: fade-in 1s ease-out both; } /* هدر و مگامنو (همان استایل پایه، سازگار با تیره) */ .glass-header { background-color: transparent; backdrop-filter: blur(6px) saturate(150%); -webkit-backdrop-filter: blur(6px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25); } .glass-header.scrolled { background-color: rgba(15, 15, 15, 0.75); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); } .glass-header .megamenu-style { background: rgba(30, 30, 30, 0.8); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); transition: all 0.3s ease; } .glass-header.scrolled .megamenu-style { background: rgba(20, 20, 20, 0.8); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); } /* Utility از استایل پایه */ .drop-shadow-glow-red { filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.8)); } /* نوار اسکرول (نسخه تیره) */ body.blog-page.custom-scroll::-webkit-scrollbar { height: 8px; width: 8px; } body.blog-page.custom-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); } body.blog-page.custom-scroll::-webkit-scrollbar-thumb { background-color: rgba(211, 47, 47, 0.55); border-radius: 9999px; transition: all 0.3s ease-in-out; } body.blog-page.custom-scroll:active::-webkit-scrollbar-thumb, body.blog-page.custom-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(211, 47, 47, 0.85); box-shadow: 0 0 15px rgba(211, 47, 47, 0.85); } body.blog-page.custom-scroll { cursor: grab; transition: box-shadow 0.3s ease; } body.blog-page.custom-scroll:active { cursor: grabbing; box-shadow: 0 0 10px rgba(211, 47, 47, 0.6); } /* tsParticles (در صورت استفاده) */ #tsparticles { position: absolute; inset: 0; z-index: -1; } /* اسکرول نرم (از پایه) */ html { scroll-behavior: smooth; } /* دسترس‌پذیری مودال (در صورت نیاز) */ body.blog-page .modal-open { overflow: hidden; } /* کاهش حرکت برای کاربران حساس به انیمیشن */ @media (prefers-reduced-motion: reduce) { body.blog-page * { transition: none !important; animation: none !important; transform: none !important; } }