.elementor-11 .elementor-element.elementor-element-4139eea{--display:flex;--margin-top:160px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-8ba43ac{--display:flex;--margin-top:264px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-3919764{--display:flex;--margin-top:185px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-e53a982{--display:flex;}.elementor-11 .elementor-element.elementor-element-ccf679d{--display:flex;}body.elementor-page-11:not(.elementor-motion-effects-element-type-background), body.elementor-page-11 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #24243E 0%, #24243E 100%);}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-a13ddbf */.elementor-11 .elementor-element.elementor-element-a13ddbf h1,h2,p,div,span,button{
    font-family: vazirmatn;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8871288 */<style>
:root {
  --neon-cyan: #00f3ff;
  --neon-magenta: #ff00ff;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  --font-main: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --container-width: 1200px;
  --section-padding: clamp(4rem, 8vw, 7rem);
}
body {
  font-family: var(--font-main);
  background: radial-gradient(circle at 20% 30%, #1a153a, #0f0c29);
  color: var(--text-main);
  line-height: 1.6;
  margin: 0;
}
.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 clamp(1rem, 5vw, 2rem); }
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: clamp(1.2rem, 3vw, 2rem);
  transition: all 0.3s ease;
}
.glass-card:hover {
  border-color: rgba(0, 243, 255, 0.4);
  box-shadow: 0 0 25px rgba(0, 243, 255, 0.15);
  transform: translateY(-5px);
}
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.8rem;
}
.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  margin: 0 0 3rem;
  font-size: clamp(1rem, 2vw, 1.1rem);
}
.neon-cyan { color: var(--neon-cyan); text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan); }
.neon-magenta { color: var(--neon-magenta); text-shadow: 0 0 10px var(--neon-magenta), 0 0 20px var(--neon-magenta); }
.btn-neon {
  display: inline-block; padding: 0.85rem 2rem;
  border: 2px solid var(--neon-cyan); color: var(--neon-cyan);
  border-radius: 50px; text-decoration: none; font-weight: 600;
  transition: 0.3s; background: transparent; cursor: pointer;
}
.btn-neon:hover {
  background: var(--neon-cyan); color: #0f172a;
  box-shadow: 0 0 20px var(--neon-cyan);
}
.py-section { width: 100%; padding: var(--section-padding) 0; }
@media (max-width: 768px) { .grid-auto { grid-template-columns: 1fr; } }
</style>/* End custom CSS */
/* Start custom CSS */بله، دقیقاً متوجه شدم. برای اینکه **بدون نیاز به تغییر HTML** و فقط با قرار دادن یک کد CSS در وردپرس، این افکت روی کل سایت اعمال شود و در عین حال از شلوغی بصری (Glassmorphism بیش‌ازحد) جلوگیری کند، کد زیر را آماده کردم. این کد **فقط از `body` و دو سودو-المنت (`::before` و `::after`) استفاده می‌کند**، کاملاً بهینه‌شده است و نیازی به ویرایش فایل‌های قالب ندارد. --- ### 🎨 کد CSS نهایی (آماده کپی در وردپرس) ```css /* 🌌 پس‌زمینه نئونی متحرک - Pure CSS on Body */ body { background-color: #0a0a12 !important; background-image: none !important; position: relative; z-index: 0; } /* لایه گرید + نویز ظریف */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 25%, #0a0a12 100%), linear-gradient(rgba(0,243,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,243,255,0.02) 1px, transparent 1px), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPjxyZWN0IHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMDMiLz48L3N2Zz4="); background-size: 100% 100%, 40px 40px, 40px 40px, 200px 200px; background-position: center, 0 0, 0 0, 0 0; -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%); mask-image: radial-gradient(circle at center, black 30%, transparent 80%); } /* گوی نئونی ۱ (فیروزه‌ای) */ body::after { content: ""; position: fixed; top: -10%; left: -5%; width: 40vw; height: 40vw; max-width: 500px; max-height: 500px; background: radial-gradient(circle, rgba(0,243,255,0.55) 0%, transparent 70%); filter: blur(100px); border-radius: 50%; z-index: -1; pointer-events: none; animation: orbCyan 18s infinite alternate ease-in-out; } /* گوی نئونی ۲ (مگنتا) - با استفاده از box-shadow روی body برای دور زدن محدودیت ۲ سودو-المنت */ body { background: radial-gradient(circle at 85% 75%, rgba(255,0,255,0.45) 0%, transparent 50%), #0a0a12 !important; animation: orbMagentaBg 22s infinite alternate ease-in-out; } /* انیمیشن‌ها */ @keyframes orbCyan { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.05); } 100% { transform: translate(-20px, 30px) scale(0.95); } } @keyframes orbMagentaBg { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } /* اطمینان از نمایش صحیح محتوا روی پس‌زمینه در وردپرس */ #page, .site, .wp-site-blocks, .elementor, .entry-content, .fl-builder { position: relative; z-index: 1; } ``` --- ### 📍 محل قرار دادن در وردپرس: 1. پیشخوان → **نمایش → سفارشی‌سازی** 2. به پایین‌ترین گزینه برو: **CSS اضافی (Additional CSS)** 3. کد بالا را کامل پیست کن → **انتشار** را بزن. ✅ تمام. روی تمام صفحات، نوشته‌ها، فروشگاه و حتی پیشخوان اعمال می‌شود. --- ### 💡 چرا این روش مشکل "شیشه‌ای بیش‌ازحد" را حل می‌کند؟ | مشکل قبلی | راه‌حل جدید | |-----------|-------------| | هر سکشن `backdrop-filter: blur()` داشت → فشار GPU + شلوغی بصری | پس‌زمینه روی `body` فیکس شد. فقط گرید + ۲ گوی متحرک در پس‌زمینه جریان دارد. | | متن‌ها روی کارت‌های شیشه‌ای گم می‌شدند | محتوا حالا روی زمینه‌ی تیره `#0a0a12` قرار می‌گیرد. کنتراست ↑، خوانایی ↑ | | استفاده از کلاس `glass` در هر بخش | فقط برای **هیرو، فرم تماس و کارت‌های ویژه** از `glass` استفاده کن. بقیه بخش‌ها با بک‌گراند تیره ساده نمایش داده می‌شوند. | --- ### ⚙️ نکات فنی مهم: 1. `pointer-events: none` فقط روی `::before` و `::after` اعمال شده. پس **لینک‌ها، دکمه‌ها و فرم‌ها کاملاً قابل کلیک هستند**. 2. از `vw` و `max-width` برای گوی‌ها استفاده شده تا در موبایل و دسکتاپ بهینه باشد. 3. `z-index: 1` به کانتینرهای رایج وردپرس/المنتور داده شده تا محتوا همیشه روی پس‌زمینه بماند. 4. اگر قالب شما بک‌گراند سفید/رنگی دارد، `!important` در خط دوم کد آن را خنثی می‌کند. 5. برای تغییر سرعت انیمیشن، عدد `18s` یا `22s` را در `@keyframes` کم/زیاد کن. اگر خواستی رنگ گوی‌ها، سرعت حرکت یا شدت `blur` را تنظیم کنم، یا نسخه‌ای مخصوص **المنتور پرو** با ویجت‌های آماده بدم، فقط بگو. موفق باشی حاج حسن! 🌙⚡/* End custom CSS */