@charset "UTF-8"; /*! * Azura Clinic — استایل مشترک قالب (پایه‌ی سیستم طراحی) * --------------------------------------------------------------- * فاز ۳: این فایل جایگزین بلوک‌های استایل سراسری‌ای شده که قبلاً * داخل header.php ، footer.php و inc/main-footer.php درون‌خطی بودند. * * ترتیب بخش‌ها دقیقاً همان ترتیب قبلی در صفحه است تا آبشار CSS * (cascade) تغییری نکند. * * فهرست: * ۱) توکن‌های سیستم طراحی * ۲) هدر موبایل و دسکتاپ (از header.php) * ۳) لینک‌های فوتر (از inc/main-footer.php) * ۴) اورلی جست‌وجوی سراسری (از footer.php) * ۵) کپی‌رایت و لینک‌های فوتر (از footer.php) * * توجه: متغیرهای رنگ پویا (--colorMain و…) و CSS سفارشی پنل قالب * همچنان درون‌خطی می‌مانند چون از دیتابیس می‌آیند — * از طریق wp_add_inline_style() به همین فایل چسبانده می‌شوند. */ /* ============================================================ ۱) توکن‌های سیستم طراحی — Design Tokens ------------------------------------------------------------ منبع واحد حقیقت برای رنگ، گردی، فاصله، سایه و افکت شیشه‌ای. این مقادیر از دکمه‌ی مرجع هدر (.ah-btn) و هدر/فوتر فعلی استخراج شده‌اند، پس هیچ تغییر ظاهری ایجاد نمی‌کنند. فاز ۴ (یکسان‌سازی هدر) و فاز ۵ (سیستم دکمه) روی همین‌ها سوار می‌شوند. ============================================================ */ :root { /* --- رنگ پایه --- */ --azura-blue: var(--colorSecondary); --azura-dark: var(--colorMain); --azura-dark-rgb: 7, 51, 164; --azura-blue-rgb: 26, 122, 241; --azura-ink: #14161f; --azura-muted: #777; --azura-surface: #ffffff; --azura-line: #f0f2f5; /* --- گردی گوشه‌ها --- */ --azura-radius-btn: 14px; /* دکمه‌ی مرجع .ah-btn */ --azura-radius-card: 20px; --azura-radius-panel: 25px; --azura-radius-dock: 30px; --azura-radius-pill: 999px; /* --- افکت شیشه‌ای دکمه‌ی مرجع --- */ --azura-glass-blur: blur(16px) saturate(180%); --azura-glass-bg: rgba(var(--colorMainRGB), 0.16); --azura-glass-bg-hover: rgba(var(--colorMainRGB), 0.26); --azura-glass-border: 1px solid rgba(var(--colorMainRGB), 0.25); --azura-glass-border-hover: rgba(var(--colorMainRGB), 0.4); --azura-glass-shadow: 0 4px 18px rgba(var(--colorMainRGB), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(var(--colorMainRGB), 0.08); --azura-glass-shadow-hover: 0 8px 24px rgba(var(--colorMainRGB), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7); /* --- سایه‌های عمومی --- */ --azura-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.05); --azura-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.05); --azura-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.13); /* --- فاصله و اندازه‌ی دکمه (سیال) --- */ --azura-btn-pad-y: clamp(6px, 0.65vw, 9px); --azura-btn-pad-x: clamp(10px, 1.1vw, 16px); --azura-btn-font: clamp(12.5px, 1.05vw, 15px); --azura-btn-gap: 8px; /* --- انتقال‌ها --- */ --azura-transition: all 0.35s ease; /* --- لایه‌بندی (z-index) --- */ --azura-z-header: 9999; --azura-z-overlay: 10000; --azura-z-search: 99999; /* --- نقطه اتصال فونت (فاز ۱۱ عربی) --- */ --azura-font-body: YekanBakh, sans-serif; /* --- هدر صفحه (فاز ۴) -------------------------------- مقدار مرجع از /blog/ گرفته شده: عنوان ۳۸ پیکسل با وزن ۷۰۰. پله‌های ریسپانسیو همان پله‌های قبلی main.css هستند، فقط حالا یک‌جا تعریف شده‌اند تا هیچ قالبی مقدار خودش را ننویسد. فاز ۵ این‌ها را به clamp() تبدیل کرد — بدون اینکه مقدار تازه‌ای اختراع شود: دو سر بازه دقیقاً همان دو مقدار تأییدشده‌ی فاز ۴ است (۲۲px در عرض ۳۷۵ و ۳۸px در عرض ۱۲۸۰)، فقط دو پرش وسط راه (۲۲←۲۶ در ۵۷۶ و ۲۶←۳۸ در ۹۹۲) برداشته شد. خط از (۵۷۶px , ۲۲px) تا (۱۲۸۰px , ۳۸px) رد می‌شود. */ --azura-page-title-size: clamp(22px, 8.9px + 2.27vw, 38px); /* دو پله‌ی قدیمی حالا به همان مقدار سیال اشاره می‌کنند تا فایل‌های قالبی که هنوز اسمشان را صدا می‌زنند چیزی نشکنند. */ --azura-page-title-size-md: var(--azura-page-title-size); --azura-page-title-size-sm: var(--azura-page-title-size); --azura-page-title-weight: 700; --azura-page-title-color: #fff; /* ۵۰px در ۱۲۸۰ (مقدار مرجع) و ۲۲px روی موبایل */ --azura-page-title-pad-y: clamp(22px, 3.9vw, 50px); /* padding-top هدر — در main.css همیشه با margin-top منفیِ هم‌اندازه جفت است، پس هر دو از همین یک توکن می‌آیند و از هم جدا نمی‌افتند. */ --azura-page-header-pad-top: clamp(120px, 15.6vw, 200px); /* ---------- کانتینر واحد سایت (فاز ۹) ---------------------------- تا فاز ۸ دو هندسه‌ی جدا وجود داشت و هیچ‌وقت روی هم نمی‌افتادند: • هدر صفحه و آرشیوها → 95% با سقف 1400px (سیال) • .page-container → 1200px ثابت، و زیر 1260px یک‌باره 940px نتیجه‌اش این بود که لبه‌ی چپِ باکس محتوا نسبت به بردکرامب با تغییر عرض پنجره جابه‌جا می‌شد — اندازه‌گیری‌شده: 1024 → −۳۳ · 1152 → −۱۵۴ · 1280 → −۱۶ · 1366 → −۹۸ · 1440 → −۱۶۸ و بدتر از آن، خودِ .page-container در ۱۲۶۰ پیکسل یک پرش ۲۶۰ پیکسلی داشت (۹۴۰ → ۱۲۰۰). حالا یک توکن، یک منحنی سیال، بدون پرش. سقف ۱۲۰۰ است تا عرض خواندنیِ متن مقاله‌ها همان چیزی بماند که بود. -------------------------------------------------------------- */ --azura-container-width: 95%; --azura-container-max: 1200px; /* نام‌های قدیمی فاز ۴ به همان توکن اشاره می‌کنند تا فایل‌های قالبی که هنوز صدایشان می‌زنند چیزی نشکنند. */ --azura-page-header-width: var(--azura-container-width); --azura-page-header-max: var(--azura-container-max); /* ---------- همپوشانی محتوا با هدر آبی (فاز ۹) -------------------- قاعده‌ی فاز ۵: padding پایینِ هدر و margin بالای منفیِ محتوا باید قرینه باشند تا خنثی شوند. تا فاز ۸ سه مقدار جدا در سه فایل بود: • main.css → ۲۰۰ و −۲۰۰ (و زیر ۱۲۶۰: ۴۰ و −۴۰) ✅ • single-services/devices.css → ۳۴۶ و −۳۳۸، بدون مدیا-کوئری ❌ • single-post.css (زیر ۵۶۸) → ۱۰ و −۴۰ → عنوان ۷px زیر باکس می‌رفت ❌ حالا هر دو طرف از همین یک توکن می‌آیند، پس دیگر امکان ندارد از هم جدا بیفتند. مقدار پشتیبان هم عمداً همان ۲۰۰ است: اگر این فایل کهنه کش شده باشد، باز هم *قرینه* می‌ماند و شکل خراب نمی‌شود. */ --azura-content-overlap: 200px; /* ---------- باکس مشخصات زیر تصویر (فاز ۹) ----------------------- گردی اینجا توکن ندارد چون قرینه‌اش با جهت عوض می‌شود و html[dir=ltr] .article-details-box در main.css همان را می‌دهد. */ --azura-details-bg: rgba(255, 255, 255, 0.4); --azura-details-blur: blur(12.3px); --azura-details-pull: -50px; /* --- سیستم دکمه (فاز ۵) ------------------------------------- سه حالت: اصلی / ثانویه / خطی. هیچ رنگ تازه‌ای ساخته نشده — هر مقدار از یکی از دکمه‌های موجود سایت برداشته شده تا ظاهر جدید برای کاربر غریبه نباشد: • اصلی ← .gift-single-action-btn (گرادیان سرمه‌ای) • ثانویه ← .ah-btn هدر (شیشه‌ای، دکمه‌ی مرجع) • خطی ← .gift-guide-btn (پس‌زمینه‌ی روشن + کادر) • on-dark ← .visit-btn و .btn-next (سطح آبی career/start) ------------------------------------------------------------ */ --azura-btn-weight: 600; --azura-btn-lift: -2px; /* اندازه‌ی کوچک و بزرگ — پله‌ی میانی همان --azura-btn-pad-* بالاست */ --azura-btn-pad-y-sm: clamp(8px, 0.7vw, 10px); --azura-btn-pad-x-sm: clamp(12px, 1vw, 16px); --azura-btn-font-sm: clamp(12px, 0.95vw, 13.5px); --azura-btn-pad-y-lg: clamp(13px, 1.35vw, 18px); --azura-btn-pad-x-lg: clamp(18px, 2vw, 28px); --azura-btn-font-lg: clamp(14px, 1.1vw, 15px); /* اصلی */ --azura-btn-primary-bg: linear-gradient(135deg, var(--colorMain) 0%, var(--azMainDeep) 100%); --azura-btn-primary-bg-hover: linear-gradient(135deg, var(--azMainHover) 0%, var(--azMainHoverDark) 100%); --azura-btn-primary-ink: #ffffff; --azura-btn-primary-shadow: 0 10px 25px rgba(var(--colorMainRGB), 0.2); --azura-btn-primary-shadow-hover: 0 15px 35px rgba(var(--colorMainRGB), 0.35); /* ثانویه — همان توکن‌های --azura-glass-* بالا */ --azura-btn-secondary-ink: var(--colorMain); /* خطی */ --azura-btn-outline-bg: #f7f9fc; --azura-btn-outline-bg-hover: var(--colorMain); --azura-btn-outline-border: rgba(var(--colorMainRGB), 0.16); --azura-btn-outline-ink: var(--colorMain); --azura-btn-outline-ink-hover: #ffffff; /* روی سطح تیره/آبی */ --azura-btn-invert-bg: linear-gradient(135deg, #ffffff, var(--azTint)); --azura-btn-invert-ink: var(--azMainDark); --azura-btn-invert-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); --azura-btn-invert-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.3); /* --- پاپ‌آپ شیشه‌ای (SweetAlert2) — فاز ۵ ------------------- */ --azura-swal-bg: rgba(255, 255, 255, 0.12); --azura-swal-blur: blur(18px); --azura-swal-border: 1px solid rgba(255, 255, 255, 0.2); --azura-swal-ink: #ffffff; --azura-swal-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* --- آکاردئون سؤالات متداول (FAQ) ------------------------- مقدار مرجع = آکاردئون صفحه‌ی اصلی (ویجت المنتور banta_faq). کارفرما همان‌جا گردی ۱۵px و قلم ۲۰px با وزن معمولی را تأیید کرده بود، ولی این مقادیر فقط در تنظیمات همان ویجت بودند — پس /faq/ و /devices/ و /services/ گردی ۳۵px و قلم ۱۶px/۷۰۰ می‌گرفتند. حالا همه از یک منبع می‌آیند. رنگ حالت باز هم از همان ویجت است: --e-global-color-secondary که دقیقاً var(--colorMain) است. */ --azura-accordion-radius: 15px; --azura-accordion-font-size: 20px; --azura-accordion-font-weight: 400; --azura-accordion-ink: #000000; --azura-accordion-ink-open: var(--azura-dark, var(--colorMain)); } /* ============================================================ ۱-ب) سیستم دکمه — .azura-btn (فاز ۵) ------------------------------------------------------------ یک کلاس پایه + سه حالت. قبل از این فاز بیش از ۲۰ کلاس دکمه‌ی جدا در قالب بود که هرکدام گردی و padding و وزن خودش را داشت (از ۰ تا ۲۰ پیکسل گردی و از ۹.۵ تا ۱۶ پیکسل اندازه‌ی قلم). قاعده‌ی مصرف در مارک‌آپ: class="azura-btn azura-btn--primary" تغییردهنده‌های اختیاری: --sm | --lg | --block | --on-dark نکته‌ی مهم: هر var() اینجا مقدار پشتیبان دارد. دلیلش همان دام لایت‌اسپید است — فایل ترکیبیِ بهینه‌شده با تغییر محتوا نام عوض نمی‌کند و یک سال کش می‌ماند، پس ممکن است بخش توکن‌ها کهنه باشد و بخش دکمه‌ها تازه. با مقدار پشتیبان بدترین حالت «ظاهر قدیمی» است، نه «دکمه‌ی بی‌رنگ». ============================================================ */ .azura-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--azura-btn-gap, 8px); padding: var(--azura-btn-pad-y, 9px) var(--azura-btn-pad-x, 16px); border: 1px solid transparent; border-radius: var(--azura-radius-btn, 14px); background: transparent; font-family: inherit; font-size: var(--azura-btn-font, 15px); line-height: 1.3; text-align: center; text-decoration: none !important; cursor: pointer; position: relative; z-index: 0; /* بستر لایه‌بندی، تا درخشش زیر متن بماند */ overflow: hidden; box-sizing: border-box; -webkit-appearance: none; appearance: none; transition: var(--azura-transition, all 0.35s ease); } /* وزن قلم با انتخابگر دوتایی نوشته شده — ببینید توضیح بالای فایل: ‎.elementor-kit-80 a{font-weight:normal}‎ وگرنه رویش می‌نویسد. */ .azura-btn.azura-btn { font-weight: var(--azura-btn-weight, 600); } /* درخشش لغزنده روی هاور — عیناً همان افکت دکمه‌ی مرجع هدر. */ .azura-btn::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.7), transparent); transform: skewX(-20deg); transition: left 0.6s ease; z-index: -1; pointer-events: none; } .azura-btn:hover::before { left: 125%; } .azura-btn:hover { transform: translateY(var(--azura-btn-lift, -2px)); } .azura-btn:active { transform: translateY(0); } .azura-btn:focus-visible { outline: 2px solid var(--azura-blue, var(--colorSecondary)); outline-offset: 2px; } .azura-btn:disabled, .azura-btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .azura-btn:disabled:hover::before, .azura-btn.is-disabled:hover::before { left: -75%; } /* ---- حالت ۱: اصلی ---- */ .azura-btn--primary { background: var(--azura-btn-primary-bg, linear-gradient(135deg, var(--colorMain) 0%, var(--azMainDeep) 100%)); border-color: rgba(255, 255, 255, 0.06); color: var(--azura-btn-primary-ink, #ffffff) !important; box-shadow: var(--azura-btn-primary-shadow, 0 10px 25px rgba(var(--colorMainRGB), 0.2)); } .azura-btn--primary:hover { background: var(--azura-btn-primary-bg-hover, linear-gradient(135deg, var(--azMainHover) 0%, var(--azMainHoverDark) 100%)); color: var(--azura-btn-primary-ink, #ffffff) !important; box-shadow: var(--azura-btn-primary-shadow-hover, 0 15px 35px rgba(var(--colorMainRGB), 0.35)); } /* ---- حالت ۲: ثانویه (شیشه‌ای — دکمه‌ی مرجع) ---- */ .azura-btn--secondary { background: var(--azura-glass-bg, rgba(var(--colorMainRGB), 0.16)); backdrop-filter: var(--azura-glass-blur, blur(16px) saturate(180%)); -webkit-backdrop-filter: var(--azura-glass-blur, blur(16px) saturate(180%)); border: var(--azura-glass-border, 1px solid rgba(var(--colorMainRGB), 0.25)); color: var(--azura-btn-secondary-ink, var(--colorMain)) !important; box-shadow: var(--azura-glass-shadow, 0 4px 18px rgba(var(--colorMainRGB), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(var(--colorMainRGB), 0.08)); } .azura-btn--secondary:hover { background: var(--azura-glass-bg-hover, rgba(var(--colorMainRGB), 0.26)); border-color: var(--azura-glass-border-hover, rgba(var(--colorMainRGB), 0.4)); color: var(--azura-btn-secondary-ink, var(--colorMain)) !important; box-shadow: var(--azura-glass-shadow-hover, 0 8px 24px rgba(var(--colorMainRGB), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7)); } /* ---- حالت ۳: خطی ---- */ .azura-btn--outline { background: var(--azura-btn-outline-bg, var(--az-f7f9fc)); border: 1px solid var(--azura-btn-outline-border, rgba(var(--colorMainRGB), 0.16)); color: var(--azura-btn-outline-ink, var(--colorMain)) !important; } .azura-btn--outline:hover { background: var(--azura-btn-outline-bg-hover, var(--colorMain)); border-color: transparent; color: var(--azura-btn-outline-ink-hover, #ffffff) !important; } /* ---- تغییردهنده‌ی سطح تیره ---- career و book-an-appointment و start و کارت آفرها پس‌زمینه‌ی آبی دارند؛ سه حالت بالا آنجا وارونه می‌شوند وگرنه تیره روی تیره می‌افتد. */ .azura-btn--on-dark.azura-btn--primary { background: var(--azura-btn-invert-bg, linear-gradient(135deg, #ffffff, var(--azTint))); border-color: transparent; color: var(--azura-btn-invert-ink, var(--azMainDark)) !important; box-shadow: var(--azura-btn-invert-shadow, 0 10px 24px rgba(0, 0, 0, 0.2)); } .azura-btn--on-dark.azura-btn--primary:hover { background: var(--azura-btn-invert-bg, linear-gradient(135deg, #ffffff, var(--azTint))); color: var(--azura-btn-invert-ink, var(--azMainDark)) !important; box-shadow: var(--azura-btn-invert-shadow-hover, 0 14px 30px rgba(0, 0, 0, 0.3)); } .azura-btn--on-dark.azura-btn--secondary { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff !important; box-shadow: none; } .azura-btn--on-dark.azura-btn--secondary:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.45); color: #ffffff !important; box-shadow: none; } .azura-btn--on-dark.azura-btn--outline { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: #ffffff !important; } .azura-btn--on-dark.azura-btn--outline:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.6); color: #ffffff !important; } /* ---- اندازه و عرض ---- */ .azura-btn--sm { padding: var(--azura-btn-pad-y-sm, 10px) var(--azura-btn-pad-x-sm, 16px); font-size: var(--azura-btn-font-sm, 13.5px); } .azura-btn--lg { padding: var(--azura-btn-pad-y-lg, 18px) var(--azura-btn-pad-x-lg, 28px); font-size: var(--azura-btn-font-lg, 15px); letter-spacing: 0.5px; } .azura-btn--lg.azura-btn--lg { font-weight: 700; } .azura-btn--block { display: flex; width: 100%; } /* آیکون داخل دکمه — چه فونت‌آوسام باشد چه */ .azura-btn > svg { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; } /* ---- دکمه‌ی پشتیبانی فوتر ---- سفید روی فوتر آبی. متن‌های داخلش رنگ خودشان را از main.css می‌گیرند، پس باید صریح برگردانده شوند؛ و دایره‌ی آیکون که در هدر سفیدِ روی شیشه‌ی آبی است اینجا وارونه می‌شود تا روی دکمه‌ی سفید دیده شود. */ .call-button-footer.azura-btn .fancy-phone-number, .call-button-footer.azura-btn .header-box-title span { color: var(--azura-btn-invert-ink, var(--azMainDark)); } .call-button-footer.azura-btn .iconly { background: var(--azura-btn-invert-ink, var(--azMainDark)); color: #ffffff; } /* ============================================================ ۱-ج) پاپ‌آپ شیشه‌ای — .glass-swal (فاز ۵) ------------------------------------------------------------ قبل از این فاز همین کلاس در سه فایل جدا سه مقدار متفاوت داشت: career و book-an-appointment با blur(18px) و متن سفید، و contact-us با blur(10px) و متن ‎#333‎. حالا یک تعریف، همین‌جا. همه‌ی انتخابگرها زیر .glass-swal محدود شده‌اند — قبلاً ‎.swal2-title‎ و ‎.swal2-confirm‎ لخت نوشته شده بودند و روی هر پاپ‌آپ دیگری هم می‌نشستند. ============================================================ */ .swal2-popup.glass-swal { background: var(--azura-swal-bg, rgba(255, 255, 255, 0.12)) !important; backdrop-filter: var(--azura-swal-blur, blur(18px)); -webkit-backdrop-filter: var(--azura-swal-blur, blur(18px)); border: var(--azura-swal-border, 1px solid rgba(255, 255, 255, 0.2)); border-radius: var(--azura-radius-card, 20px); color: var(--azura-swal-ink, #ffffff); box-shadow: var(--azura-swal-shadow, 0 8px 32px rgba(0, 0, 0, 0.3)); } .glass-swal .swal2-title, .glass-swal .swal2-html-container { color: var(--azura-swal-ink, #ffffff) !important; } .glass-swal .swal2-confirm, .glass-swal .swal2-cancel { background: var(--azura-btn-invert-bg, linear-gradient(135deg, #ffffff, var(--azTint))) !important; color: var(--azura-btn-invert-ink, var(--azMainDark)) !important; border: 1px solid transparent !important; border-radius: var(--azura-radius-btn, 14px) !important; box-shadow: var(--azura-btn-invert-shadow, 0 10px 24px rgba(0, 0, 0, 0.2)) !important; font-weight: var(--azura-btn-weight, 600); transition: var(--azura-transition, all 0.35s ease); } .glass-swal .swal2-confirm:hover, .glass-swal .swal2-cancel:hover { transform: translateY(var(--azura-btn-lift, -2px)); box-shadow: var(--azura-btn-invert-shadow-hover, 0 14px 30px rgba(0, 0, 0, 0.3)) !important; } /* خط‌های زشت انیمیشن موفقیت و کادر دور آیکون‌ها */ .glass-swal .swal2-success-circular-line-left, .glass-swal .swal2-success-circular-line-right, .glass-swal .swal2-success-fix, .glass-swal .swal2-success-ring { display: none !important; } .glass-swal .swal2-icon.swal2-success, .glass-swal .swal2-icon.swal2-error, .glass-swal .swal2-icon.swal2-warning, .glass-swal .swal2-icon.swal2-info, .glass-swal .swal2-icon.swal2-question { border: none !important; box-shadow: none !important; } /* ============================================================ ۲) هدر — موبایل و دسکتاپ (منبع: header.php) ============================================================ */ /* ============================================================ MOBILE HEADER هدر موبایل و دسکتاپ همیشه هر دو رندر می‌شن؛ فقط CSS بر اساس عرض صفحه تصمیم می‌گیره کدوم دیده بشه (نه wp_is_mobile سمت سرور)، تا بین ۷۶۸ تا ۱۰۲۴ پیکسل (تبلت/پنجره باریک دسکتاپ/آیپد) هدر گم نشه. ============================================================ */ @media (min-width: 1025px) { .azura-mobile-header, .azura-menu-overlay { display: none !important; } } @media (max-width: 1024px) { .whatsapp-float { display: none !important; } } .azura-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: #fff; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; position: sticky; top: 0; z-index: 9999; box-shadow: 0 4px 15px rgba(0,0,0,0.06); } .azura-mobile-header .logo img { height: 42px; width: auto; } .burger-btn { color: var(--azura-blue); cursor: pointer; display: flex; align-items: center; } .azura-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; z-index: 10000; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .azura-menu-overlay.active { display: flex; } .menu-content-card { background: #fff; width: 88%; max-width: 350px; border-radius: 25px; padding: 15px 12px; position: relative; animation: azuraZoom 0.3s ease; max-height: 95vh; overflow-y: auto; text-align: center; } /* فاز ۲۰: `left` → `start` (در RTL خودش راست می‌شود؛ قاعده‌ی متقابل در azura-rtl.css دیگر لازم نیست). */ .azura-nav-list { list-style: none; padding: 0; margin: 0; text-align: start; } .azura-nav-list li { border-bottom: 1px solid #f0f2f5; } .azura-nav-list li:last-child { border-bottom: none; } .azura-nav-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-decoration: none; color: var(--azura-dark); font-weight: 600; font-size: 14px; } .nav-icon-circle { width: 30px; height: 30px; background: rgba(var(--colorSecondaryRGB),0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--azura-blue); font-size: 13px; } /* فاز ۵: ظاهر از .azura-btn--primary --block می‌آید؛ اینجا فقط جای نشستنش در کارت منو مانده. ⚠ فاز ۲۰: حاشیه‌ی افقی برداشته شد. `.azura-btn--block` عرض را `100%` می‌کند، پس `margin: … 10px … 10px` روی همان ۱۰۰٪ سوار می‌شد و جعبه ۲۰px از کادر کارت بیرون می‌زد — در LTR از راست و در RTL از چپ. اندازه‌گیری روی ۳۷۵px: لبه‌ی دکمه ۴۱ بود ولی `.azura-nav-list` و `.menu-socials` روی ۵۰. حالا هر سه دقیقاً هم‌لبه‌اند. */ .menu-book-btn { margin: 15px 0 5px 0; } .menu-socials { display: flex; justify-content: center; gap: 8px; margin-top: 10px; } .social-circle { width: 32px; height: 32px; background: var(--azura-dark); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; } @keyframes azuraZoom { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* ============================================================ DESKTOP HEADER — LAYOUT ============================================================ */ #azura-header { display: none; position: sticky; top: 0; z-index: 9999; font-family: inherit; } @media (min-width: 1025px) { #azura-header { display: block; width: 92%; max-width: 1400px; margin: 0 auto; transition: width 0.3s ease; } } @media (min-width: 1450px) { #azura-header { width: 70%; } } @media (max-width: 1024px) { #azura-header { display: none !important; } } /* Top row */ #azura-header .ah-top-wrap { width: 100%; background: transparent; box-sizing: border-box; padding: 0; position: relative; z-index: 2; } #azura-header .ah-top-inner { width: 100%; margin: 0 auto; padding: clamp(10px, 1vw, 15px) clamp(14px, 1.4vw, 20px); display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; border-radius: 0 0 25px 25px; background: #ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } #azura-header .ah-logo a { display: inline-flex; align-items: center; text-decoration: none; } #azura-header .ah-logo img { height: clamp(42px, 4.1vw, 60px); width: auto; display: block; } #azura-header .ah-cta { display: flex; align-items: center; gap: clamp(8px, 0.85vw, 12px); } /* فاز ۵: ظاهر این دکمه حالا از .azura-btn + .azura-btn--secondary می‌آید (همان مقادیر، فقط یک‌جا). اینجا فقط چیزی می‌ماند که مخصوص خود این دکمه است: جهت LTR شماره‌ی تماس و ساختار آیکون/دو خط متن. */ .ah-btn { direction: ltr; } .ah-btn .ah-btn-icon { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); width: clamp(26px, 2.2vw, 32px); height: clamp(26px, 2.2vw, 32px); border-radius: 50%; flex-shrink: 0; z-index: 2; box-shadow: 0 2px 6px rgba(var(--colorMainRGB), 0.2); } .ah-btn .ah-btn-icon svg { width: clamp(12px, 1.05vw, 15px); height: clamp(12px, 1.05vw, 15px); fill: var(--colorMain); } .ah-btn .ah-btn-text { display: flex; flex-direction: column; z-index: 2; } .ah-btn .ah-btn-title { font-weight: 700; color: var(--colorMain); line-height: 1.25; font-size: clamp(12.5px, 1.05vw, 15px); } /* وزن صریح: .azura-btn وزن ۶۰۰ دارد و این خط آن را ارث می‌برد. */ .ah-btn .ah-btn-sub { color: rgba(var(--colorMainRGB), 0.75); line-height: 1.25; font-size: clamp(10px, 0.85vw, 12px); font-weight: 400; } /* Bottom row */ #azura-header .ah-bottom-wrap { width: 100%; background: transparent; box-sizing: border-box; padding: 0 15px; margin-top: -18px; position: relative; z-index: 1; } #azura-header .ah-bottom-inner { background: var(--azSecondaryDark); border-radius: 0 0 15px 15px; display: flex; align-items: stretch; padding: clamp(12px, 1.25vw, 18px) 10px 0 10px; box-sizing: border-box; box-shadow: 0 8px 20px rgba(0,0,0,0.06); } /* Nav */ #azura-header .ah-nav { flex: 1; } #azura-header .ah-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; height: 100%; } #azura-header .ah-nav > ul > li { position: relative; height: 100%; display: flex; align-items: center; } #azura-header .ah-nav > ul > li > a { display: flex; align-items: center; gap: 4px; padding: 12px clamp(6px, 0.7vw, 10px); font-size: clamp(11.5px, 1.1vw, 15px); color: #fff !important; text-decoration: none !important; white-space: nowrap; transition: background 0.2s; height: 100%; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); } #azura-header .ah-dental { font-size: clamp(13px, 1.3vw, 18px); } @media (min-width: 1025px) and (max-width: 1250px) { #azura-header .ah-nav > ul > li > a { padding: 12px 6px; } #azura-header .ah-dental { padding: 0 10px; } } #azura-header .ah-nav > ul > li > a:hover, #azura-header .ah-nav > ul > li:hover > a { background: rgba(255,255,255,0.12); } /* ============================================================ SUBMENU — Split Header Style ============================================================ */ /* indicator روی آیتم‌های دارای ساب‌منو */ #azura-header .ah-nav > ul > li.menu-item-has-children > a { position: relative; } #azura-header .ah-nav > ul > li.menu-item-has-children > a::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: rgba(255,255,255,0.9); border-radius: 3px 3px 0 0; transition: width 0.25s ease; } #azura-header .ah-nav > ul > li.menu-item-has-children:hover > a::before { width: 60%; } #azura-header .ah-nav > ul > li.menu-item-has-children > a::after { content: "▾"; font-size: 11px; margin-left: 2px; opacity: 0.6; transition: opacity 0.2s, transform 0.2s; } #azura-header .ah-nav > ul > li.menu-item-has-children:hover > a::after { opacity: 1; transform: rotate(180deg) translateY(1px); } /* کانتینر ساب‌منو — override همه چیز با !important */ #azura-header .ah-nav ul li > ul.sub-menu, #azura-header .ah-nav ul li > ul.sub-menu.tw\:hidden { display: flex !important; flex-direction: column !important; position: absolute !important; top: 100% !important; left: 0 !important; background: #fff !important; border: 0px solid var(--azTint4) !important; border-radius: 0 12px 12px 12px !important; min-width: 340px !important; z-index: 10000 !important; overflow: hidden !important; box-shadow: 0 20px 50px rgba(0,0,0,0.13) !important; opacity: 0 !important; transform: translateY(-8px) !important; pointer-events: none !important; transition: opacity 0.22s ease, transform 0.22s ease !important; padding: 0 !important; margin: 0 !important; max-height: 80vh !important; overflow-y: auto !important; } #azura-header .ah-nav ul li:hover > ul.sub-menu, #azura-header .ah-nav ul li:hover > ul.sub-menu.tw\:hidden { opacity: 1 !important; transform: translateY(0) !important; pointer-events: all !important; } /* هدر آبی داخل ساب‌منو */ #azura-header .ah-nav .sub-menu .sub-menu-header { display: none !important; background: var(--azSecondaryDark); color: rgba(255,255,255,0.92); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 14px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.15); display: block; } /* گرید آیتم‌ها — responsive: ۳ ستون اگه آیتم‌ها زیاد باشن */ #azura-header .ah-nav .sub-menu .sub-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 8px 12px; } #azura-header .ah-nav .sub-menu .sub-menu-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } /* li های اصلی مخفی */ #azura-header .ah-nav .sub-menu > li { display: none !important; } /* آیتم‌های داخل گرید */ #azura-header .ah-nav .sub-menu .sub-menu-grid a { display: flex !important; align-items: center !important; gap: 7px !important; padding: 6px 10px !important; background: transparent !important; border: none !important; border-radius: 0 !important; color: #1a1a2e !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap !important; transition: color 0.15s, background 0.15s !important; border-bottom: 1px solid var(--az-f0f5ff) !important; } #azura-header .ah-nav .sub-menu .sub-menu-grid a::before { content: "" !important; min-width: 5px !important; height: 5px !important; border-radius: 50% !important; background: var(--azSecondaryDark) !important; flex-shrink: 0 !important; display: block !important; opacity: 0.5 !important; transition: opacity 0.15s !important; } #azura-header .ah-nav .sub-menu .sub-menu-grid a:hover { background: var(--az-f0f5ff) !important; color: var(--azSecondaryDark) !important; border-bottom-color: var(--azTint4) !important; } #azura-header .ah-nav .sub-menu .sub-menu-grid a:hover::before { background: var(--azSecondaryDark) !important; opacity: 1 !important; } /* ⚠ فاز ۲۰: قواعد `.ah-dental` حذف شدند — خودِ لینک از هدر رفت. این جایگاه حالا دکمه‌ی زبان است. */ /* دکمه‌ی زبان، نوار پایینی هدر دسکتاپ. ظاهر از `.azura-btn--outline.azura-btn--on-dark` می‌آید (قاعده‌ی فاز ۵: هیچ کلاس دکمه‌ی تازه‌ای ساخته نمی‌شود)؛ اینجا فقط جای نشستن و اندازه. */ #azura-header .ah-lang { align-self: center; margin-inline-start: clamp(8px, 1vw, 16px); padding: 6px clamp(12px, 1.3vw, 18px); font-size: clamp(13px, 1.2vw, 16px); font-weight: 600; white-space: nowrap; } #azura-header .ah-lang svg { width: clamp(14px, 1.2vw, 17px); height: clamp(14px, 1.2vw, 17px); fill: currentColor; flex-shrink: 0; } /* پرچم زبان مقصد. ⚠ ابعاد در خودِ تگ `` هم هست تا چیدمان قبل از رسیدن تصویر جابه‌جا نشود (CLS). اینجا فقط ظاهر. */ .azura-lang-toggle__flag { width: 16px; height: 11px; flex-shrink: 0; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); } /* دکمه‌ی زبان هدر موبایل — قرصِ کوچکی که کمی از لبه‌ی هدر پایین می‌زند، همان حسِ دکمه‌ی سرچِ دسکتاپ که کارفرما خواست. ⚠ `.azura-mobile-header` از قبل `position: sticky` است، یعنی خودش بلوکِ دربرگیرنده‌ی فرزند absolute می‌شود؛ نیازی به `relative` نیست. ⚠ `inset-inline-end` عمدی است: در LTR سمت راست و در RTL سمت چپ می‌نشیند، بدون قاعده‌ی متقابل در azura-rtl.css. */ .mobile-lang-toggle { position: absolute; inset-inline-end: 18px; bottom: -13px; z-index: 2; padding: 5px 14px; font-size: 12px; font-weight: 700; line-height: 1.2; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px rgba(var(--colorSecondaryRGB), 0.32); } /* ============================================================ WHATSAPP FLOAT ============================================================ */ /* فاز ۲۰ (تصمیم کارفرما): دکمه‌ی شناور در RTL آینه می‌شود و سمت چپ می‌نشیند. `inset-inline-end` در LTR عیناً همان `right: 25px` است، پس نسخه‌ی انگلیسی یک پیکسل هم تکان نمی‌خورد. */ .whatsapp-float { position: fixed; bottom: 25px; inset-inline-end: 25px; width: 60px; height: 60px; background-color: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.3); z-index: 9999; text-decoration: none; transition: all 0.3s ease-in-out; } .whatsapp-float:hover { transform: scale(1.1); } .main-whatsapp-icon { font-size: 35px; color: #fff; line-height: 1; display: block; } @media (max-width: 768px) { .whatsapp-float { bottom: 20px; inset-inline-end: 20px; width: 55px; height: 55px; } .main-whatsapp-icon { font-size: 30px; } } /* ============================================================ ۳) لینک‌های فوتر (منبع: inc/main-footer.php) ============================================================ */ .copyright {font-size: large;} .copyright a {color: var(--az-0a58ca);text-decoration: underline;} .copyright a:hover {color: var(--az-063a8a);background-color: rgba(0,0,0,0.05);} /* ============================================================ ۴) اورلی جست‌وجوی سراسری (منبع: footer.php) ============================================================ */ .global-search-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(var(--az-060d26-rgb), 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 20px 20px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .global-search-overlay.active { opacity: 1; visibility: visible; } .global-search-box { width: min(680px, 100%); max-height: 76vh; background: #fff; border-radius: 20px; box-shadow: 0 25px 60px rgba(0,0,0,0.35); overflow: hidden; display: flex; flex-direction: column; transform: translateY(-16px); transition: transform 0.25s ease; } .global-search-overlay.active .global-search-box { transform: translateY(0); } .global-search-input-wrap { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #eef0f5; flex-shrink: 0; } .global-search-icon { font-size: 22px; color: var(--azMainDark); flex-shrink: 0; } .global-search-input { flex: 1; border: none; outline: none; font-size: 18px; color: #1a1a1a; background: transparent; } .global-search-close { border: none; background: var(--az-f2f4f8); color: #666; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; } .global-search-close:hover { background: #e5e8f0; } .global-search-results { overflow-y: auto; padding: 10px 0; } .global-search-hint, .global-search-empty, .global-search-loading { padding: 30px 22px; text-align: center; color: #8a8f9c; font-size: 15px; } .global-search-group-label { padding: 10px 22px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--azMainDark); } .global-search-item { display: flex; align-items: center; gap: 14px; padding: 10px 22px; text-decoration: none; color: #1a1a1a; transition: background 0.15s ease; } .global-search-item:hover { background: var(--az-f4f7ff); color: var(--azMainDark); } .global-search-item-thumb { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #eef0f5; } .global-search-item-thumb-placeholder { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; background: #eef0f5; display: flex; align-items: center; justify-content: center; color: #a7acba; font-size: 18px; } .global-search-item-title { font-size: 15px; } body.global-search-locked { overflow: hidden; } @media (max-width: 767px) { .global-search-overlay { padding-top: 12vh; } .global-search-input { font-size: 16px; } } /* ============================================================ ۵) کپی‌رایت و لینک‌های فوتر (منبع: footer.php) ============================================================ */ .copyright a { text-decoration: none; border-bottom: 1px solid currentColor; } .copyright a:hover { border-bottom: 2px solid currentColor; } .footer-bg a { text-decoration: underline; } .footer-bg a { color: #fff; } /* ============================================================ ۶) هدر واحد صفحات (فاز ۴) ------------------------------------------------------------ مارک‌آپ این بخش از template-parts/page-header.php می‌آید و هر ۱۸ قالب از همان یک فایل استفاده می‌کنند. چرا !important: بعضی فایل‌های css/templates/*.css قواعد عنصری مثل h1{font-size:xx-large!important} دارند که برای محتوای مقاله نوشته شده بودند ولی به عنوان صفحه هم می‌خوردند. این انتخابگر هم مشخص‌تر است هم !important دارد، پس بدون دست‌زدن به آن فایل‌ها عنوان صفحه را قطعی می‌کند. ============================================================ */ /* کانتینر واحد هدر صفحه. قبلاً هر قالب کانتینر خودش را می‌داد و نتیجه‌اش این بود که بردکرامب روی صفحه‌های مختلف در سه فاصله‌ی متفاوت از لبه می‌نشست (۲۸۳ / ۲۵۸ / ۴۰۳ پیکسل در عرض ۱۹۲۰). حالا همه یک هندسه دارند: همان چیزی که /blog/ داشت. */ .azura-page-header__inner, .azura-crumb-bar__inner { width: var(--azura-container-width, 95%); max-width: var(--azura-container-max, 1200px); margin: 0 auto; } /* --------------------------------------------------------------- فاز ۹ — نقاط شکست کانتینر واحد. مقادیر همان پله‌های .page-container در main.css است؛ فقط حالا هدر و آرشیو و باکس محتوا هر سه از همین یکی می‌خوانند، پس لبه‌ی چپشان روی هر عرضی دقیقاً یکی است. --------------------------------------------------------------- */ @media (max-width: 992px) { :root { --azura-container-width: calc(100% - 60px); } } @media (max-width: 768px) { :root { --azura-container-width: calc(100% - 40px); } } @media (max-width: 576px) { :root { --azura-container-width: calc(100% - 30px); } } /* زیر ۱۲۶۰px هدر آبی کوتاه است، پس همپوشانی هم کم می‌شود. قرینه بودن با margin منفیِ محتوا خودکار است چون هر دو همین توکن‌اند. */ @media (max-width: 1260px) { :root { --azura-content-overlap: 40px; } } /* هر var() اینجا مقدار پشتیبان دارد. دلیل: توکن‌ها در همین فایل تعریف می‌شوند ولی css/templates/*.css مصرفشان می‌کنند. این دو فایل جدا کش می‌شوند (و لایت‌اسپید هم جداگانه ترکیبشان می‌کند)، پس اگر یکی به‌روز باشد و دیگری کهنه، var() بی‌مقدار می‌ماند و اندازه‌ی قلم به ۱۵ پیکسل می‌افتد — دقیقاً همان چیزی که روی /gifts/loyalty-card/ دیده شد. */ .azura-page-header .page-title .title, .azura-page-title .title { font-size: var(--azura-page-title-size, 38px) !important; font-weight: var(--azura-page-title-weight, 700) !important; color: var(--azura-page-title-color, #fff); } /* فاصله‌ی بالا و پایین عنوان — همان ۵۰/۵۰ مرجع، حالا از توکن */ .azura-page-header .page-title { padding: var(--azura-page-title-pad-y, 50px) 0; } /* توضیح زیر عنوان — جایگزین استایل درون‌خطی قبلی archive.php */ .azura-page-intro { margin-top: 35px; color: #fff; font-size: larger; } .azura-page-intro--justify { text-align: justify; } /* نوار بردکرامب برای صفحه‌هایی که هدر آبی ندارند (career و book-appointment). فقط بردکرامب، بدون پس‌زمینه. */ /* نوار بردکرامب صفحه‌های بدون هدر آبی (career و book-appointment). بیرون از .page-container آن قالب‌ها رندر می‌شود، وگرنه عرض ۱۲۰۰ پیکسلی و flex مرکزچین آن‌ها بردکرامب را ۱۴۵ پیکسل به داخل هل می‌داد. */ .azura-crumb-bar { width: 100%; padding-top: 20px; position: relative; z-index: 1; } @media (max-width: 992px) { .azura-page-header .page-title .title, .azura-page-title .title { font-size: var(--azura-page-title-size-md, 26px) !important; } } @media (max-width: 576px) { .azura-page-header .page-title .title, .azura-page-title .title { font-size: var(--azura-page-title-size-sm, 22px) !important; } } /* ============================================================ ۶) فاز ۹ — چیدمان و ریسپانسیو ============================================================ */ /* --- کانتینر واحد: آرشیوها هم از همان توکن می‌خوانند ---------- قبلاً .custom-wide-container مقدار خودش را داشت (95% / 1400px) و .page-container مقدار دیگری. حالا هر سه (هدر، آرشیو، باکس محتوا) یک عرض دارند، پس لبه‌ی چپشان روی هر عرضی دقیقاً روی هم می‌افتد. */ .custom-wide-container { width: var(--azura-container-width, 95%); max-width: var(--azura-container-max, 1200px); margin-left: auto; margin-right: auto; } /* --- گریدهای بوت‌استرپی که والدشان padding جبرانی نداشت -------- یک .row حاشیه‌ی منفی دارد و طبق قرارداد بوت‌استرپ باید داخل ظرفی باشد که همان اندازه padding افقی دارد. اینجا نبود، پس گرید از دو طرف بیرون می‌زد و صفحه افقی می‌لغزید: /blog/ و /services/ → ۲ تا ۴px · صفحه‌ی اصلی → ۲px مقدار padding عمداً با حاشیه‌ی منفی هر گرید جور است (#servicesGrid آرشیو سرویس ۱۵px، بقیه نصف --bs-gutter-x). */ .custom-wide-container { padding-left: 15px; padding-right: 15px; } .bcp-service-cats { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); } /* --- کف ایمنی سرریز افقی -------------------------------------- هر سه ریشه‌ی واقعی بالا رفع شده‌اند؛ این خط فقط تضمین می‌کند که محتوای تازه‌ی پیشخوان (یک جدول پهن، یک embed، یک لینک بلند) دوباره کل صفحه را نلغزاند. clip عمداً به‌جای hidden است: ظرف اسکرول نمی‌سازد و position: sticky را نمی‌شکند. */ html { overflow-x: clip; } /* محتوای تولیدشده در پیشخوان می‌تواند رشته‌ی بلندِ بدون فاصله داشته باشد (نشانی، نام محصول). این خط جلوی سرریزش را می‌گیرد بدون آنکه شکل متن عادی عوض شود. */ .html-content, .comment-content, .article-content { overflow-wrap: break-word; } /* --- دیدگاه‌ها در موبایل -------------------------------------- تورفتگی ۸۵ پیکسلی برای دسکتاپ طراحی شده بود تا متن از آواتار فاصله بگیرد. در ۳۷۵px همان تورفتگی عرض خواندنی را به ۱۲۳px می‌رساند. */ @media (max-width: 768px) { .comment p { margin-left: 0; margin-right: 0; } .comment-meta { width: 100%; } } /* --- شماره‌ی سؤال آکاردئون ------------------------------------- دایره‌ی شماره با left: -10px عمداً از گوشه‌ی جعبه بیرون می‌زند. ولی .faq-box.elementor-faq (آکاردئون صفحه‌ی اصلی) هیچ padding افقی ندارد و تا لبه‌ی صفحه می‌آید، پس آن ۱۰ پیکسل از کادر دید بیرون می‌افتاد — اندازه‌گیری‌شده در ۷۶۸ و ۱۰۲۴: left = -10. روی همان یک نوع جعبه می‌آید داخل؛ بقیه‌ی جعبه‌ها padding دارند و فقط در عرض‌های کوچک لازم است. */ .faq-box.elementor-faq .count { right: 0; } html[dir=ltr] .faq-box.elementor-faq .count { left: 0; } @media (max-width: 992px) { html[dir=ltr] .faq-box .count { left: 0; } .faq-box .count { right: 0; } } /* ============================================================================ فهرست بخش‌های صفحه — «On This Page» (فاز ۱۱) ---------------------------------------------------------------------------- قبلاً این بلوک **سه بار** تکرار شده بود: در css/templates/single-services.css و single-devices.css و single-post.css. هر سه از نظر مقدار مو‌به‌مو یکی بودند، پس اینجا یکی شدند و آنجا حذف. ⚠ نسخه‌ی اول فاز ۱۱ همان جعبه‌ی تک‌ستونیِ قدیمی بود: روی ۱۲۰۰ پیکسل یک ستون باریک چپ و دوسوم عرض خالی. حالا شبکه‌ی خودچین است. ⚠ رنگ هاور قبلاً طلایی #cca43b بود (میراث بلوک قدیمی) — در پالت این سایت نه قهوه‌ای هست، نه نارنجی، نه سبز. حالا از --azura-blue می‌آید. ========================================================================== */ .azura-page-nav { background: linear-gradient(180deg, #fbfcfe 0%, var(--az-f6f9fe) 100%); border: 1px solid var(--azura-line, #f0f2f5); border-radius: var(--azura-radius-panel, 25px); padding: clamp(18px, 2.2vw, 28px) clamp(16px, 2.4vw, 30px); margin-bottom: 35px; max-width: 1400px; box-shadow: var(--azura-shadow-sm, 0 4px 15px rgba(0, 0, 0, 0.05)); } /* عنوان با خط لهجه‌ی سرمه‌ای زیرش — هم‌خانواده‌ی .bordered-title بخش کامنت‌ها */ .azura-page-nav .azura-page-nav__title { position: relative; font-weight: 700; font-size: 18px; color: var(--azura-ink, #14161f); text-align: center !important; margin: 0 0 clamp(16px, 1.8vw, 24px); padding-bottom: 12px; letter-spacing: 0.2px; } .azura-page-nav .azura-page-nav__title::after { content: ""; position: absolute; inset-inline-start: 50%; transform: translateX(-50%); bottom: 0; width: 46px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--azura-blue, var(--colorSecondary)), var(--azura-dark, var(--colorMain))); } /* ★ شبکه‌ی خودچین: دسکتاپ سه ستون، تبلت دو، موبایل یک — بدون هیچ مدیا-کوئری، چون minmax خودش تصمیم می‌گیرد. */ .azura-page-nav__list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px clamp(12px, 1.6vw, 24px); counter-reset: azura-nav; } .azura-page-nav__item { margin: 0; padding: 0; display: block !important; list-style: none !important; counter-increment: azura-nav; } .azura-page-nav__link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--azura-radius-btn, 14px); text-decoration: none; color: #4a5568; font-size: 15px; line-height: 1.5; border: 1px solid transparent; transition: var(--azura-transition, all 0.35s ease); } /* شماره از counter می‌آید، پس با شرطی‌بودن بخش‌ها هم همیشه پشت‌سرهم است */ .azura-page-nav__num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--azura-dark, var(--colorMain)); background: rgba(var(--azura-blue-rgb, 26, 122, 241), 0.1); transition: var(--azura-transition, all 0.35s ease); } .azura-page-nav__num::before { content: counter(azura-nav); } .azura-page-nav__text { min-width: 0; } .azura-page-nav__link:hover, .azura-page-nav__link:focus-visible { color: var(--azura-dark, var(--colorMain)); background: var(--azura-surface, #fff); border-color: rgba(var(--azura-blue-rgb, 26, 122, 241), 0.22); box-shadow: 0 4px 14px rgba(var(--azura-dark-rgb, 7, 51, 164), 0.07); } .azura-page-nav__link:hover .azura-page-nav__num, .azura-page-nav__link:focus-visible .azura-page-nav__num { color: #fff; background: var(--azura-blue, var(--colorSecondary)); } /* --- حالت تیترهای متن (فقط نوشته‌های وبلاگ) ------------------------------ اینجا سلسله‌مراتب معنی دارد، پس تک‌ستونی می‌ماند و پله‌ها را نگه می‌دارد. */ .azura-page-nav__list--headings { grid-template-columns: 1fr; gap: 2px; } .azura-page-nav__item--d1 .azura-page-nav__link { font-weight: 700; margin-top: 8px; } .azura-page-nav__item--d2 .azura-page-nav__link { font-weight: 500; } .azura-page-nav__item--d3 { padding-inline-start: 26px; } .azura-page-nav__item--d4 { padding-inline-start: 46px; } .azura-page-nav__item--d5 { padding-inline-start: 66px; } .azura-page-nav__item--d6 { padding-inline-start: 86px; } .azura-page-nav__item--d3 .azura-page-nav__link, .azura-page-nav__item--d4 .azura-page-nav__link { font-size: 14px; } .azura-page-nav__item--d5 .azura-page-nav__link, .azura-page-nav__item--d6 .azura-page-nav__link { font-size: 13px; } /* در حالت تیترها شماره معنی ندارد (سلسله‌مراتب دارد، نه ترتیب خطی) */ .azura-page-nav__list--headings .azura-page-nav__num { width: 6px; height: 6px; background: rgba(var(--azura-blue-rgb, 26, 122, 241), 0.35); } .azura-page-nav__list--headings .azura-page-nav__num::before { content: ""; } .azura-page-nav__list--headings .azura-page-nav__link:hover .azura-page-nav__num { background: var(--azura-blue, var(--colorSecondary)); } /* ============================================================================ تیتر بخش‌ها — h2 واقعی (فاز ۱۱) ---------------------------------------------------------------------------- قبلاً بودند: به چشم تیتر، در ساختار سند هیچ. کلاس‌های ظاهری عیناً همان‌اند تا ظاهر عوض نشود؛ ولی چون css/templates/single-services.css قاعده‌ی عنصری h2{font-size:x-large!important} دارد (که برای متن مقاله نوشته شده بود)، اندازه اینجا صریح برگردانده می‌شود. ========================================================================== */ h2.azura-section-title { font-size: 30px !important; line-height: 1.3; margin: 0 0 12px; } @media (max-width: 576px) { h2.azura-section-title { font-size: 20px !important; } } /* ============================================================================ پنل «Similar Treatments» (فاز ۱۱) ---------------------------------------------------------------------------- قبلاً یک تیتر لخت روی همان زمینه‌ی سفیدِ بخش کامنت‌ها بود و از آن جدا دیده نمی‌شد. حالا پنل خودش را دارد. ========================================================================== */ .azura-similar-panel { background: linear-gradient(180deg, #fbfcfe 0%, var(--az-f4f8fe) 100%); border: 1px solid var(--azura-line, #f0f2f5); border-radius: var(--azura-radius-panel, 25px); padding: clamp(22px, 3vw, 40px) clamp(16px, 2.4vw, 32px); margin: 40px 0; box-shadow: var(--azura-shadow-sm, 0 4px 15px rgba(0, 0, 0, 0.05)); } .azura-similar-panel h2.azura-section-title { text-align: center; margin-bottom: clamp(18px, 2.4vw, 30px); } .azura-similar-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .azura-similar-card { flex: 1 1 280px; max-width: 340px; background: var(--azura-surface, #fff); border: 1px solid var(--azura-line, #f0f2f5); border-radius: var(--azura-radius-card, 20px); overflow: hidden; box-shadow: var(--azura-shadow-sm, 0 4px 15px rgba(0, 0, 0, 0.05)); transition: var(--azura-transition, all 0.35s ease); } .azura-similar-card:hover { transform: translateY(var(--azura-btn-lift, -2px)); box-shadow: var(--azura-shadow-md, 0 10px 30px rgba(0, 0, 0, 0.05)); border-color: rgba(var(--azura-blue-rgb, 26, 122, 241), 0.25); } .azura-similar-card img { width: 100%; height: 220px; object-fit: cover; display: block; } .azura-similar-card__title { margin: 0; padding: 16px 18px 18px; font-size: 17px; font-weight: 600; line-height: 1.45; } .azura-similar-card__title a { color: var(--azura-ink, #14161f); text-decoration: none; } .azura-similar-card:hover .azura-similar-card__title a { color: var(--azura-dark, var(--colorMain)); } /* هدر چسبان روی لنگر می‌نشیند. #watch-transformation از قبل درون‌خطی `scroll-margin-top: 110px` داشت؛ همان مقدار برای همه‌ی لنگرها. */ #azura-overview, #azura-catalog, #azura-pricing, #azura-before-after, #azura-instructions, #azura-faqs, #azura-similar-services, #azura-device-services, #relatedGalleryContent, #relatedBlogsContent, #watch-transformation, .html-content :is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: 110px; } /* ═══════════════════════════════════════════════════════════════ فاز ۱۹ — سوییچر زبان ─────────────────────────────────────────────────────────────── ⚠ کلاس دکمه‌ی تازه‌ای ساخته نشده (قاعده‌ی ثابت فاز ۵). این بلوک فقط همان توکن‌های شیشه‌ای `.ah-btn` را روی یک گروه دو تایی می‌چیند. ⚠ وقتی سایت تک‌زبانه باشد، `azura_language_switcher()` رشته‌ی خالی برمی‌گرداند و **هیچ بایتی** به صفحه اضافه نمی‌شود. ═══════════════════════════════════════════════════════════════ */ .azura-lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--azura-radius-pill, 999px); background: var(--azura-glass-bg, rgba(var(--colorMainRGB), 0.16)); backdrop-filter: var(--azura-glass-blur, blur(16px) saturate(180%)); -webkit-backdrop-filter: var(--azura-glass-blur, blur(16px) saturate(180%)); border: var(--azura-glass-border, 1px solid rgba(var(--colorMainRGB), 0.25)); /* جهت گروه همیشه ثابت است تا با عوض شدن زبان جای دکمه‌ها نپرد. */ direction: ltr; } .azura-lang-switch__item { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 5px 12px; border-radius: var(--azura-radius-pill, 999px); font-size: var(--azura-btn-font, 14px); font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; color: var(--azura-btn-secondary-ink, var(--colorMain)); transition: var(--azura-transition, all 0.35s ease); } .azura-lang-switch__item:hover, .azura-lang-switch__item:focus-visible { background: var(--azura-glass-bg-hover, rgba(var(--colorMainRGB), 0.26)); color: var(--azura-btn-secondary-ink, var(--colorMain)); text-decoration: none; } .azura-lang-switch__item.is-current { background: var(--azura-dark, var(--colorMain)); color: #fff; cursor: default; } /* حالت منو: تمام‌عرض، زیر فهرست ناوبری موبایل. */ .azura-lang-switch--menu { display: flex; width: 100%; margin: 12px 0 4px; } .azura-lang-switch--menu .azura-lang-switch__item { flex: 1; } /************************************************************ * کارت‌های وبلاگ و دستگاه — هم‌ترازی و فاصله‌ی عکس تا عنوان * فاز ۲۰ (۲۰۲۶-۰۸-۳۰) · گزارش کارفرما ***********************************************************/ /* * دو عیب، یک ریشه — هر دو اندازه‌گیری‌شده روی ۱۲۸۰px، در هر دو زبان: * * ۱) «Read More» در کارت‌های یک ردیف هم‌تراز نیست. * آرشیو وبلاگ انگلیسی: بالای فوتر بین **۴۱۶ و ۴۶۴** نوسان داشت (۴۸px)، * و فضای خالیِ زیر آن بین ۱۵ و ۶۳. عربی: ۵ ردیف از ۶ نامیزان. * علت: گرید کارت‌ها را هم‌ارتفاع می‌کشد (`.post-item` یک ستون فلکس است)، * ولی `.post-item-content` مقدار `display:block` دارد؛ پس محتوا توزیع * نمی‌شود و هر خطِ اضافیِ عنوان یا چکیده، فوتر را پایین می‌بَرد و * فضای اضافی ته کارت جمع می‌شود. * درمان: باکس محتوا هم ستون فلکس شود و فوتر با `margin-top:auto` * به کف کارت بچسبد. عنوان و چکیده کوتاه نمی‌شوند. * * ۲) فاصله‌ی عکس تا عنوان زیادی است: وبلاگ **۵۰px** و دستگاه‌ها **۴۵px**. * ریشه‌ی مشترک: `.post-item-image{margin-bottom:20px}` در main.css. * هیچ‌کدام از دو قالب کارت آن را خنثی نمی‌کنند، پس روی padding خودشان * سوار می‌شود (وبلاگ ۱۵+۱۵، دستگاه ۲۵). با صفرکردنش، فاصله‌ی بالا با * padding کناریِ همان کارت برابر می‌شود — ۱۵px در وبلاگ، ۲۵px در دستگاه. * * ⚠ عمداً فقط CSS: هیچ فایل قالبی دست نخورد، پس HTML بایت‌به‌بایت همان می‌ماند * و بیس‌لاین ۲۶۸ نشانی انگلیسی تکان نمی‌خورد. * * ⚠ خاصیت عمدی: بلوک `