/** * home-modern.css — لایه ارتقای حرکتی و عمق بصری صفحه اصلی * نسخه: 1.0.0 | وابستگی: ai-home-cards * اصل طراحی: صفر تغییر رنگ/گوشه — فقط Motion + Depth + Accessibility * بارگذاری: فقط Front Page یا قالب services-page (از طریق ai_assistant_home_modern_assets) */ /* ---------- توکن‌های محلی (مقادیر از پالت موجود سایت) ---------- */ :root { --hm-teal: 0, 133, 122; /* رنگ Teal موجود کارت‌های صفحه اصلی */ --hm-ease: cubic-bezier(0.4, 0, 0.2, 1); --hm-speed: 200ms; --hm-shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.06); --hm-shadow-hover: 0 10px 24px rgba(var(--hm-teal), 0.14), 0 3px 8px rgba(0, 0, 0, 0.06); --hm-focus-ring: 0 0 0 3px rgba(var(--hm-teal), 0.22); } /* ============================================================ ۱) کارت‌های سرویس — Hover Lift + Focus Ring فقط دسکتاپ (دستگاه‌های دارای ماوس)؛ موبایل همان :active موجود در home-cards.css را حفظ می‌کند و دست نمی‌خوریم ============================================================ */ @media (hover: hover) and (pointer: fine) { .main-ai-service-card-wrapper { transition: transform var(--hm-speed) var(--hm-ease), box-shadow var(--hm-speed) var(--hm-ease); will-change: transform; } .main-ai-service-card-wrapper:hover { transform: translateY(-3px); /* بلندشدن ملایم کارت */ box-shadow: var(--hm-shadow-hover); } /* بازگشت نرم هنگام کلیک */ .main-ai-service-card-wrapper:active { transform: translateY(-1px) scale(0.99); } } /* حلقه فوکس برای دسترسی‌پذیری (WCAG) — وقتی فوکس وارد نواحی تعاملی کارت می‌شود */ .main-ai-service-card-wrapper:focus-within { box-shadow: var(--hm-focus-ring), var(--hm-shadow-hover); } /* آیکون اطلاعات: هم‌نواسازی سرعت با سیستم جدید (رنگ بنفش موجود #4e54c8 حفظ می‌شود) */ .service-info-icon { transition-duration: var(--hm-speed); } /* ============================================================ ۲) انیمیشن ورود (Reveal) — فقط وقتی JavaScript فعال است کلاس am-js توسط اسکریپت inline به اضافه می‌شود؛ بنابراین بدون JS هیچ عنصری مخفی نمی‌ماند (No-JS Fallback) ============================================================ */ html.am-js .js-reveal { opacity: 0; transform: translateY(16px); } html.am-js .js-reveal.is-visible { opacity: 1; transform: none; transition: opacity 500ms var(--hm-ease) var(--reveal-delay, 0ms), transform 500ms var(--hm-ease) var(--reveal-delay, 0ms); } /* ============================================================ ۳) Hero — ورود محتوای هدر هنگام Page Load (CSS خالص، بدون JS) ============================================================ */ @keyframes hm-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .home-hero-content > * { animation: hm-fade-up 550ms var(--hm-ease) backwards; } .home-hero-content > *:nth-child(1) { animation-delay: 80ms; } .home-hero-content > *:nth-child(2) { animation-delay: 180ms; } .home-hero-content > *:nth-child(3) { animation-delay: 280ms; } .home-hero-content > *:nth-child(n+4) { animation-delay: 380ms; } /* ============================================================ ۴) بخش CTA پایین صفحه — هم‌اهنگ با حرکت کارت‌ها ============================================================ */ @media (hover: hover) and (pointer: fine) { .home-cta-tag { transition: transform var(--hm-speed) var(--hm-ease), box-shadow var(--hm-speed) var(--hm-ease); } .home-cta-tag:hover { transform: translateY(-2px); } } /* ============================================================ ۵) کلید خاموش‌کننده — احترام به تنظیمات کاربر (WCAG 2.3.3) ============================================================ */ @media (prefers-reduced-motion: reduce) { .home-hero-content > *, html.am-js .js-reveal, html.am-js .js-reveal.is-visible, .main-ai-service-card-wrapper, .home-cta-tag { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }