/* ========================================================================== style.css — استایل اصلی سایت هومات پالت رنگی برند: Deep Blue (#1E40AF) / Electric Cyan (#06B6D4) / AI Green (#10B981) / Amber (#F59E0B) ========================================================================== */ :root { --navy: #1E40AF; --navy-rgb: 30, 64, 175; --navy-soft: #1E3A8A; --navy-deep: #0F2557; --navy-deep-rgb: 15, 37, 87; --cyan: #06B6D4; --cyan-rgb: 6, 182, 212; /* نسخه تیره‌تر سایان — فقط برای متن روی پس‌زمینه روشن؛ سایان اصلی روی سفید کنتراست کافی (WCAG AA، حداقل ۴.۵:۱) ندارد، این نسخه ۵.۳۶:۱ است و همچنان خانواده رنگ برند است */ --cyan-text: #0E7490; --green: #10B981; --green-rgb: 16, 185, 129; --amber: #F59E0B; --amber-rgb: 245, 158, 11; --gold: var(--amber); --text: #1F2937; --text-muted: #5b6675; --bg: #ffffff; --bg-alt: #f5f8fb; --border: #E5E7EB; --shadow: 0 10px 30px rgba(var(--navy-rgb), 0.08); --shadow-lg: 0 24px 60px rgba(var(--navy-rgb), 0.14); --shadow-cyan: 0 16px 40px rgba(var(--cyan-rgb), 0.22); --radius: 14px; /* متن بدنه: IBM Plex Sans Arabic — فونت شرکتی و جدی با پشتیبانی عالی فارسی. عمداً به‌جای Vazirmatn انتخاب شد: وزیرمتن عملاً فونت پیش‌فرض اکثر سایت‌های ایرانی است و باعث می‌شود سایت «مثل بقیه» به‌نظر برسد. وزیرمتن به‌عنوان جایگزین دوم می‌ماند تا اگر روزی فونت اول لود نشد، متن فارسی همچنان درست نمایش داده شود. */ --font-fa: 'Pelak', Tahoma, sans-serif; --font-en: 'Pelak', system-ui, sans-serif; /* فونت نمایشی برای سرتیترها — Estedad، متمایز از Vazirmatn که برای متن بدنه نگه داشته شده؛ این جفت‌سازی (فونت نمایشی + فونت بدنه) یکی از نشانه‌های سایت «طراحی‌شده» در برابر «قالب عمومی» است */ --font-display-fa: 'Pelak', Tahoma, sans-serif; /* ---------- توکن‌های تم شیشه‌ای (glassmorphism) ---------- فقط روی پس‌زمینه‌های تصویری/تیره استفاده می‌شوند (هیرو ویدیویی، کارت‌های روی تصویر). نکته: شیشه روی پس‌زمینه‌ی سفیدِ تخت هیچ اثری ندارد و فقط متن را کم‌کنتراست می‌کند — به همین دلیل عمداً به‌صورت سراسری روی همه کارت‌های سایت اعمال نشده است. */ --glass-bg: rgba(255, 255, 255, 0.10); --glass-bg-strong: rgba(255, 255, 255, 0.16); --glass-border: rgba(255, 255, 255, 0.22); --glass-blur: blur(18px) saturate(150%); /* نسخه‌ی روشنِ شیشه برای سرتیتر بخش‌ها (روی پس‌زمینه‌ی سفید صفحه) */ --glass-panel: rgba(255, 255, 255, 0.55); --glass-border-solid: rgba(15, 37, 87, 0.09); /* واش/گرادیان ملایم برند — برای پس‌زمینه بخش‌های alt و کارت‌های برجسته، جای پر رنگ ثابت */ --wash-navy: linear-gradient(135deg, rgba(var(--navy-rgb), 0.06), rgba(var(--cyan-rgb), 0.05) 55%, rgba(var(--navy-rgb), 0.02)); --wash-deep: linear-gradient(160deg, var(--navy-deep), var(--navy) 65%, var(--navy-soft)); } /* ---------- ریست پایه ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } /* توجه: scroll-behavior:smooth عمداً اینجا تنظیم نشده — اسکرول نرم توسط Lenis (در main.js) مدیریت می‌شود؛ ترکیب هم‌زمان این دو باعث کند و سنگین‌شدن حس اسکرول می‌شود. مسیر بازگشتی بدون JS/Lenis همچنان با {behavior:'smooth'} صریح در main.js کار می‌کند. */ /* جهت صفحه از روی صفت dir در تعیین می‌شود (نه ثابت rtl) تا نسخه انگلیسی (dir="ltr") هم به‌درستی چپ‌به‌راست رندر شود؛ direction روی body ارث می‌برد و نیازی به تکرار در هر انتخاب‌گر نیست. فونت هم بر همین اساس بین فارسی/لاتین سوییچ می‌شود. */ html[dir="rtl"] { direction: rtl; } html[dir="ltr"] { direction: ltr; /* رقم‌ها در انگلیسی لاتین باشند (Pelak فقط رقم فارسی دارد) — نگاه کنید به fonts.css */ --font-fa: 'HomatLatinDigits', 'Pelak', Tahoma, sans-serif; --font-en: 'HomatLatinDigits', 'Pelak', system-ui, sans-serif; --font-display-fa: 'HomatLatinDigits', 'Pelak', Tahoma, sans-serif; } html[dir="ltr"] body { font-family: var(--font-en); } body { font-family: var(--font-fa); background: var(--bg); color: var(--text); line-height: 1.9; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .en, .ltr-num { font-family: var(--font-en); direction: ltr; unicode-bidi: isolate; } h1, h2, h3, h4 { color: var(--navy); font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; font-family: var(--font-display-fa); text-wrap: balance; } html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3, html[dir="ltr"] h4 { font-family: var(--font-en); letter-spacing: -0.015em; } .container { width: 100%; /* قاب عریض‌تر: روی مانیتورهای بزرگ تا ۱۵۶۰ پیکسل باز می‌شود تا فضای دو طرف هدر نرود، ولی حاشیه‌ی منطقی از لبه‌ی تصویر همیشه حفظ می‌شود (padding واکنش‌گرا). عریض‌تر از این، طول خط متن را از حد خوانایی راحت خارج می‌کند. */ max-width: 1560px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } /* بلوک‌های متنی طولانی داخل قاب عریض، عرض خودشان را محدود نگه می‌دارند تا خط‌ها بیش از حد کشیده و سخت‌خوان نشوند */ .section-head { max-width: 760px; } /* ========================================================================== ورود موشن‌دار محو-به-شفاف سرتیترهای اصلی — جایگزین ظریف و باکلاس افکت‌های قبلی (اسپاتلایت/گرادیان متحرک)، فقط یک‌بار هنگام ورود به دید اجرا می‌شود. با data-aos="blur-in" روی عنصر فعال می‌شود؛ AOS کلاس .aos-animate را در لحظه مناسب اضافه می‌کند و این ترنزیشن‌ها اجرا می‌شوند. ========================================================================== */ [data-aos="blur-in"] { opacity: 0; filter: blur(14px); transform: translateY(18px); transition-property: opacity, filter, transform; transition-duration: 900ms; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } [data-aos="blur-in"].aos-animate { opacity: 1; filter: blur(0); transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-aos="blur-in"] { opacity: 1; filter: none; transform: none; transition: none; } } .section { padding: 72px 0; } .section-alt { background: var(--bg-alt); background-image: var(--wash-navy); } /* ---------- یادداشت کوچک زیر عنوان کاتالوگ دوره‌ها در نسخه انگلیسی ---------- */ .courses-lang-note { color: var(--text-muted); font-size: 0.85rem; margin-top: 6px; } /* ========================================================================== سرتیتر شیشه‌ای بخش‌ها -------------------------------------------------------------------------- هر سرتیتر یک «پنجره» است که ویدیوی تخت جمشیدِ هیرو از پشتش دیده می‌شود. چطور کار می‌کند: لایه‌ی .glass-head-media داخل سرتیتر، تصویر پوستر را با background-attachment: fixed نشان می‌دهد؛ چون تصویر نسبت به viewport ثابت است، با اسکرول احساس «پنجره‌ای رو به یک صحنه» می‌دهد، نه یک عکس تکراری. assets/js/main.js تنها یک عنصر