/* * پوستهٔ باشگاه مشتریان — روشن و تیره، موبایل تا دسکتاپ. * * ⚠ این پرونده در هر سه حالتِ رندر بار می‌شود: سندِ ایزوله، جاسازی داخلِ قالبِ خریدار، * و شورت‌کد. پس **هیچ** قاعده‌ای روی html، body، :root یا عنصرِ برهنه نوشته نمی‌شود؛ * همه‌چیز زیرِ ریشهٔ `.dmlty-app` است. قاعده‌های سطحِ سند فقط در سندِ ایزوله و از * Front\Theme::document_css() می‌آیند. * * ⚠ رنگ‌های برند از متغیرهایی می‌آیند که سرور چاپ می‌کند (Front\Theme::css_vars) و * خریدار از پنل تنظیمشان می‌کند. هیچ رنگِ برندی مستقیم اینجا نوشته نمی‌شود؛ آنچه * اینجاست فقط نگاشتِ روشن/تیره و رنگ‌های خنثاست. * * چیدمان: موبایل تا ۷۶۷ یک ستون با نوارِ پایین · تبلت ۷۶۸ تا ۱۰۲۳ دو ستون با همان * نوارِ پایین · دسکتاپ از ۱۰۲۴ ستونِ کناری و بدونِ نوارِ پایین · ۱۲۸۰ به بالا سه ستون. */ /* قلم درونِ خودِ افزونه است، نه از شبکهٔ توزیع: سایتِ خریدار نباید برای دیده‌شدنِ درستِ پنل به سرورِ کسِ دیگری وابسته باشد. */ @font-face { font-family: Vazirmatn; src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: Vazirmatn; src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; font-style: normal; } /* ═══════════════════════════════ توکن‌ها ═══════════════════════════════ */ /* * ⚠ پالتِ روشن روی خودِ `.dmlty-app` تعریف می‌شود، نه `:root`. در سندِ ایزوله این * کلاس روی `` است و همه‌چیز زیرِ آن؛ در حالتِ جاسازی‌شده پوششِ ماست. یک * تعریفِ `:root` آنجا متغیرهای ما را روی سندِ خریدار می‌نشاند. */ .dmlty-app { /* * رنگ‌های خامِ برند — همان چیزی که سرور می‌نویسد و خریدار در تنظیمات انتخابش * می‌کند. * * ⚠ این‌ها **هرگز** در هیچ پوسته‌ای بازنویسی نمی‌شوند و هیچ‌جا مستقیم مصرف * نمی‌شوند. رنگِ مصرفی `--dmlty-brand` است که پایین‌تر از روی همین‌ها ساخته * می‌شود. دلیلش یک خرابیِ واقعی است: پیش از این پوستهٔ تیره خودِ * `--dmlty-brand` را با مقداری بازنویسی می‌کرد که خودش از `--dmlty-brand` * ساخته شده بود — یک **حلقهٔ ارجاع**. طبق مشخصات، هر متغیرِ داخلِ حلقه * «نامعتبر در زمانِ محاسبه» می‌شود، پس هر قاعده‌ای که آن را می‌خواند به مقدارِ * اولیه می‌افتاد: زمینه‌ها شفاف و رنگ‌ها پریده. در پوستهٔ روشن هیچ اثری نداشت * و فقط در تیره دیده می‌شد، بدونِ یک خط خطا در کنسول. */ --dmlty-brand-base: #5b46f2; --dmlty-brand-2-base: #8b6cff; --dmlty-accent: #ef3e63; --dmlty-ink: #131327; --dmlty-radius: 18px; /* رنگِ مصرفی. در پوستهٔ روشن همان رنگِ خام است. */ --dmlty-brand: var(--dmlty-brand-base); --dmlty-brand-2: var(--dmlty-brand-2-base); /* ⚠ اعلانِ دوم برای مرورگرهای بدونِ color-mix نامعتبر است و نادیده گرفته می‌شود، پس همان مقدارِ اول سرِ جایش می‌ماند — افت، نه شکست. */ --dmlty-tint: rgba(91, 70, 242, 0.1); --dmlty-tint: color-mix(in srgb, var(--dmlty-brand) 10%, transparent); --dmlty-tint-2: rgba(91, 70, 242, 0.18); --dmlty-tint-2: color-mix(in srgb, var(--dmlty-brand) 18%, transparent); --dmlty-on-brand: #fff; /* سطح‌ها و متن — پوستهٔ روشن. */ --dmlty-bg: #f4f5fa; --dmlty-surface: #fff; --dmlty-surface-2: #f7f8fd; --dmlty-surface-3: #eef0f8; --dmlty-line: #e7e8f2; --dmlty-line-soft: #eff0f7; --dmlty-text: var(--dmlty-ink); --dmlty-muted: #7a7d99; --dmlty-ok: #2f9e6a; --dmlty-ok-bg: rgba(47, 158, 106, 0.12); --dmlty-warn: #c8791a; --dmlty-warn-bg: rgba(200, 121, 26, 0.12); --dmlty-danger: #d24a63; --dmlty-danger-bg: rgba(210, 74, 99, 0.12); --dmlty-shadow-sm: 0 1px 2px rgba(19, 19, 39, 0.05); --dmlty-shadow: 0 2px 10px rgba(19, 19, 39, 0.06); --dmlty-shadow-lg: 0 12px 32px rgba(19, 19, 39, 0.1); --dmlty-radius-ctl: 11px; --dmlty-radius-pill: 999px; /* مقیاسِ فاصله — نه فشرده، نه پراکنده. کلِ ریتمِ صفحه از همین چهار عدد می‌آید. */ --dmlty-gap-xs: 6px; --dmlty-gap-sm: 10px; --dmlty-gap: 16px; --dmlty-gap-lg: 24px; --dmlty-pad: 16px; --dmlty-card-pad: 16px; --dmlty-tab-h: 62px; --dmlty-side-w: 264px; --dmlty-max: 620px; --dmlty-font: Vazirmatn, IRANSansX, Tahoma, Arial, sans-serif; } /* * پوستهٔ تیره. * * ⚠ سه نقطهٔ ورود، و هر سه لازم است: صفتِ صریح روی خودِ پوشش (حالتِ جاسازی‌شده)، * صفتِ صریح روی سندِ ایزوله، و ترجیحِ سیستمی وقتی کاربر هنوز چیزی انتخاب نکرده. * حالتِ سوم با «مگر اینکه روشن انتخاب شده باشد» مهار می‌شود، وگرنه انتخابِ صریحِ * «روشن» روی دستگاهی که سیستمش تیره است بی‌اثر می‌ماند. * * ⚠ رنگِ متنِ خریدار (ink) اینجا کنار گذاشته می‌شود و به جایش متنِ روشن می‌نشیند: * تنظیمِ او برای زمینهٔ سفید انتخاب شده و روی زمینهٔ تیره ناخوانا می‌شود. */ .dmlty-app[data-dmlty-theme="dark"], [data-dmlty-theme="dark"] .dmlty-app { --dmlty-bg: #0d0d18; --dmlty-surface: #16162a; --dmlty-surface-2: #1c1c33; --dmlty-surface-3: #23233f; --dmlty-line: #2a2a48; --dmlty-line-soft: #21213a; --dmlty-text: #e9e9f4; --dmlty-muted: #9a9ab8; /* رنگِ برند روی زمینهٔ تیره کم‌جان می‌شود؛ نسخهٔ روشن‌ترش از روی رنگِ **خام** ساخته می‌شود، نه از روی خودِ رنگِ مصرفی — وگرنه حلقهٔ ارجاع می‌شود. */ --dmlty-brand: #8b7cff; --dmlty-brand: color-mix(in oklab, var(--dmlty-brand-base) 68%, #fff); --dmlty-brand-2: #a99cff; --dmlty-brand-2: color-mix(in oklab, var(--dmlty-brand-2-base) 60%, #fff); --dmlty-tint: rgba(139, 124, 255, 0.16); --dmlty-tint: color-mix(in srgb, var(--dmlty-brand) 16%, transparent); --dmlty-tint-2: rgba(139, 124, 255, 0.26); --dmlty-tint-2: color-mix(in srgb, var(--dmlty-brand) 26%, transparent); --dmlty-ok-bg: rgba(47, 158, 106, 0.2); --dmlty-warn-bg: rgba(200, 121, 26, 0.2); --dmlty-danger-bg: rgba(210, 74, 99, 0.2); --dmlty-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --dmlty-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --dmlty-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { /* * ⚠ نگهبان باید **سند** را هم ببیند، نه فقط پوششِ اپ. خطای واقعیِ گزارش‌شده: * اسکریپتِ پیش از رنگ‌آمیزی در `` اجرا می‌شود و آنجا هنوز پوششی وجود ندارد، * پس فقط سند صفت می‌گیرد. نگهبانی که تنها پوشش را می‌سنجید، در هر بارگذاریِ تازه * «هیچ انتخابی نشده» می‌خواند و روی دستگاهی که سیستمش تیره است پوستهٔ تیره را * برمی‌گرداند — یعنی انتخابِ «روشن» با هر جابه‌جایی بین تب‌ها پاک می‌شد. */ :root:not([data-dmlty-theme]) .dmlty-app:not([data-dmlty-theme="light"]):not([data-dmlty-theme="dark"]) { --dmlty-bg: #0d0d18; --dmlty-surface: #16162a; --dmlty-surface-2: #1c1c33; --dmlty-surface-3: #23233f; --dmlty-line: #2a2a48; --dmlty-line-soft: #21213a; --dmlty-text: #e9e9f4; --dmlty-muted: #9a9ab8; /* همان قاعدهٔ بالا: از رنگِ **خام** ساخته می‌شود، نه از رنگِ مصرفی. */ --dmlty-brand: #8b7cff; --dmlty-brand: color-mix(in oklab, var(--dmlty-brand-base) 68%, #fff); --dmlty-brand-2: #a99cff; --dmlty-brand-2: color-mix(in oklab, var(--dmlty-brand-2-base) 60%, #fff); --dmlty-tint: rgba(139, 124, 255, 0.16); --dmlty-tint: color-mix(in srgb, var(--dmlty-brand) 16%, transparent); --dmlty-tint-2: rgba(139, 124, 255, 0.26); --dmlty-tint-2: color-mix(in srgb, var(--dmlty-brand) 26%, transparent); --dmlty-ok-bg: rgba(47, 158, 106, 0.2); --dmlty-warn-bg: rgba(200, 121, 26, 0.2); --dmlty-danger-bg: rgba(210, 74, 99, 0.2); --dmlty-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --dmlty-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --dmlty-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55); } } /* ═══════════════════════════════ بازنشانی ═══════════════════════════════ */ /* ⚠ زیرِ ریشهٔ خودمان اسکوپ است، نه `*` سراسری: همین پرونده داخلِ قالبِ خریدار هم بار می‌شود و یک بازنشانیِ سراسری آنجا چیدمانِ کلِ سایتِ او را جابه‌جا می‌کند. */ .dmlty-app, .dmlty-app *, .dmlty-app *::before, .dmlty-app *::after { box-sizing: border-box; } .dmlty-app { margin: 0; background: var(--dmlty-bg); color: var(--dmlty-text); font-family: var(--dmlty-font); font-size: 14px; line-height: 1.85; /* ⚠ راست‌چینی را خودمان اعلام می‌کنیم و به زبانِ سایتِ خریدار تکیه نمی‌کنیم: روی نصبی که پیشخوانش انگلیسی است هر بندِ فارسی چپ‌چین می‌افتد و نقطهٔ پایانِ جمله سرِ سطر می‌پرد، بدونِ اینکه جایی خطایی بدهد. */ direction: rtl; text-align: start; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } /* ⚠ صفتِ hidden امتیازِ ۰-۱-۰ دارد و به هر کلاسی که display بدهد می‌بازد؛ بدونِ این، عنصری که اسکریپت پنهانش کرده کاملاً دیده می‌ماند و هیچ خطایی هم نمی‌دهد. */ .dmlty-app [hidden] { display: none !important; } .dmlty-app img { max-inline-size: 100%; block-size: auto; } /* * ⚠ رشتهٔ بی‌فاصله سرریزِ افقی می‌سازد و روی موبایل کلِ صفحه را می‌لغزاند: نشانیِ * لینکِ دعوت، کدِ تخفیف، نامِ کاربریِ لاتین، شمارهٔ سفارشِ بلند. شکستنِ آخرین‌راه‌حل * روی هر متنِ پنل روشن است تا هیچ‌کدام قابِ نمایشگر را نشکند. */ /* ⚠ یک اعلان روی ریشه کافی است چون این ویژگی ارث می‌رسد؛ انتخابگرِ عنصرِ برهنه (`.dmlty-app span`) عمداً نوشته نشد — امتیازش از کلاسِ خودِ همان فرزند بالاتر است و روزی قاعده‌ای را که نباید، می‌بلعد. */ .dmlty-app { overflow-wrap: anywhere; } .dmlty-app svg { flex: none; } /* * ⚠ بازنشانیِ پیوند داخلِ `:where()` است و این **رفعِ یک خطای واقعی** است، نه سلیقه. * * `.dmlty-app a` امتیازِ ۰-۱-۱ دارد و `.dmlty-btn` امتیازِ ۰-۱-۰. یعنی هر دکمه‌ای که * یک `` بود رنگِ متنش را از این بازنشانی می‌گرفت نه از کلاسِ خودش: دکمهٔ بنفش با * متنِ تیره، در حالی که همان کلاس روی `