/* ────────────────────────────────────────────────────────────── موبایل و تبلت استایل‌های صفحه inline هستند و رانتایم آن‌ها را دوباره سریال می‌کند (`z-index: 60` با فاصله، نه `z-index:60`). پس انتخابگر صفتی روی *مقدار* قابل اتکا نیست و به‌جایش از قلاب‌های data-m و data-screen-label استفاده می‌کنیم. کلاس .lite را جاوااسکریپت روی می‌گذارد وقتی دستگاه لمسی یا صفحه باریک‌تر از ۱۰۲۴ باشد. ────────────────────────────────────────────────────────────── */ /* ───────── ۱) شیشهٔ مات: گران‌ترین افکت روی GPU موبایل ───────── */ @media (max-width: 1023px) { /* نام ویژگی در خروجی رانتایم دست‌نخورده می‌ماند، پس این انتخابگر کار می‌کند */ [style*="backdrop-filter"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* بدون بلور، پس‌زمینهٔ نیمه‌شفاف باید تیره‌تر شود تا متن خوانا بماند */ nav[aria-label="ناوبری اصلی"] { background: rgba(6, 10, 18, .95) !important; } [data-m="chat-panel"] { background: rgba(6, 10, 18, .97) !important; } } /* ───────── ۲) حالت سبک: هرچه به موس وابسته است ───────── */ .lite canvas[aria-hidden="true"] { display: none !important; } /* رگ‌ها و رشتهٔ DNA */ .lite [data-cursor-view] { cursor: auto; } /* ───────── ۳) ناوبری ───────── */ @media (max-width: 1023px) { nav[aria-label="ناوبری اصلی"] { top: 10px !important; gap: 12px !important; padding: 8px 12px !important; width: calc(100vw - 20px) !important; max-width: none !important; } /* ساعت، تغییر زبان و سواچ رنگ روی صفحهٔ باریک جا نمی‌شوند */ nav[aria-label="ناوبری اصلی"] [role="group"] { display: none !important; } nav[aria-label="ناوبری اصلی"] > div > span[dir="ltr"] { display: none !important; } /* ردیف لینک‌ها به‌جای شکستن به چند خط، افقی اسکرول می‌شود */ nav[aria-label="ناوبری اصلی"] > div { flex-wrap: nowrap !important; overflow-x: auto !important; gap: 18px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } nav[aria-label="ناوبری اصلی"] > div::-webkit-scrollbar { display: none; } nav[aria-label="ناوبری اصلی"] > div > a { flex: none !important; white-space: nowrap; } } @media (max-width: 560px) { /* روی گوشی فقط لوگو و دکمهٔ «تماس» می‌ماند */ nav[aria-label="ناوبری اصلی"] > div > a[href="#projects"], nav[aria-label="ناوبری اصلی"] > div > a[href="#about"], nav[aria-label="ناوبری اصلی"] > div > a[href="#services"], nav[aria-label="ناوبری اصلی"] > div > a[href="#blog"] { display: none !important; } nav[aria-label="ناوبری اصلی"] a[href="#top"] span[dir="ltr"] { display: none !important; } } /* ───────── ۴) قهرمان ───────── */ @media (max-width: 900px) { /* ۳۴۰vh یعنی سه صفحه‌ونیم اسکرول تا رسیدن به محتوا — روی گوشی زیادی است */ [data-m="hero"] { height: 200vh !important; } } @media (max-width: 560px) { /* clamp(52px,10vw,160px) روی ۳۹۰px همان ۵۲px می‌ماند و «محمدعلی گرجی» از دو طرف بیرون می‌زند */ [data-m="hero-name"] > div:last-child { font-size: clamp(30px, 11.5vw, 52px) !important; } [data-m="hero-name"] > div:first-child { font-size: 11px !important; letter-spacing: .28em !important; } [data-m="hero-head"] { padding: 0 7vw !important; } } /* ───────── ۵) کارت پروژه: تک‌ستونه، تصویر بالای متن ───────── */ @media (max-width: 900px) { [data-tilt] { grid-template-columns: 1fr !important; } /* قاب تصویر ارتفاع طبیعی خودش را بگیرد، نه کشیده تا هم‌قدِ ستون متن */ [data-m="card-media"] { min-height: 0 !important; order: -1; } /* هر پروژه لازم نیست یک صفحهٔ کامل بگیرد */ [data-screen-label^="پروژه"] { min-height: auto !important; padding: 6vh 4vw !important; } } /* ───────── ۶) فاصله‌ها ───────── */ @media (max-width: 900px) { section { padding-left: 5vw !important; padding-right: 5vw !important; } } /* ───────── ۷) ویجت گفتگو ───────── */ @media (max-width: 560px) { [data-screen-label="چت با جونیور"] { right: 14px !important; bottom: 14px !important; max-width: calc(100vw - 28px); } [data-m="chat-panel"] { width: calc(100vw - 28px) !important; height: min(68vh, 500px) !important; } /* حباب «من اینجام» نباید از لبهٔ صفحه بیرون بزند */ [data-screen-label="چت با جونیور"] button { max-width: calc(100vw - 40px); } } /* ───────── ۸) نشانگر بخش ───────── */ @media (max-width: 700px) { [data-m="sec-indicator"] { display: none !important; } } /* ───────── ۹) فرم و تایپوگرافی ───────── */ @media (max-width: 560px) { /* زیر ۱۶px، iOS هنگام فوکوس روی فیلد خودکار زوم می‌کند */ input, textarea, select { font-size: 16px !important; } h1, h2 { line-height: 1.45 !important; } } /* ───────── ۱۰) لایت‌باکس تصویر ───────── */ @media (max-width: 560px) { [aria-label="بستن تصویر"] { left: 14px !important; top: 14px !important; } }