/* ========================================================================== Vikrun — حالتِ تیره (Dark Mode) -------------------------------------------------------------------------- فقط وقتی لود می‌شود که ماژولِ `dark_mode` در پنل روشن باشد. محرک: صفتِ `data-vk-theme="dark"` روی که dark-mode.js از localStorage می‌گذارد. **تشخیصِ خودکارِ تمِ سیستم (`prefers-color-scheme`) عمداً استفاده نشده** — چون هنوز همه‌ی صفحاتِ سایت تیره نشده‌اند و فلیپِ خودکار بازدیدکننده را وسطِ یک سایتِ نیمه‌تیره می‌انداخت. انتخاب همیشه صریح و با دکمه است. پالت عیناً از ماکتِ v4 (`_docs/mockups/homepage-v4.html`، بلاکِ `:root[data-theme="dark"]`). خنثی‌ها گرم‌اند، نه خاکستریِ خام. ========================================================================== */ :root[data-vk-theme="dark"] { /* ── توکن‌های سراسریِ سایت (هم‌نامِ tokens.css) ── */ --vk-ink: #f4f1e9; --vk-text: #cec9bd; --vk-muted: #9a968b; --vk-border: #312d26; --vk-bg: #141310; --vk-card: #1e1c18; --vk-yellow-tint: #2a2410; --vk-yellow-strong: #ffd84a; color-scheme: dark; } /* حرکتِ نرمِ سوییچ (کاربرانِ reduced-motion مستثنا در انتهای فایل). */ :root[data-vk-theme="dark"] body, :root[data-vk-theme="dark"] .vikrun-header, :root[data-vk-theme="dark"] .vikrun-footer { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ───────────────────────────────────────────────────────────────────────── ۱) پایه‌ی صفحه ───────────────────────────────────────────────────────────────────────── */ :root[data-vk-theme="dark"] body { background: var(--vk-bg); color: var(--vk-text); } :root[data-vk-theme="dark"] .site-main, :root[data-vk-theme="dark"] .page-content { background: transparent; } /* نوتیس‌های سراسریِ خودِ ووکامرس (افزوده‌شدن به سبد، خطاهای فرم، ...) — روی هر صفحه‌ای می‌توانند ظاهر شوند، بجِ اطلاعیه رنگش هاردکدِ خاکستریِ روشنِ خودِ افزونه‌ی ووکامرس است، نه چیزی که قالب تعریف کرده باشد. */ :root[data-vk-theme="dark"] :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) { background-color: var(--vk-card) !important; color: var(--vk-text) !important; } /* ───────────────────────────────────────────────────────────────────────── ۲) هدر — سطح‌های هاردکدِ سفید در site-chrome.css ───────────────────────────────────────────────────────────────────────── */ :root[data-vk-theme="dark"] .vikrun-header { background: #1a1815; } :root[data-vk-theme="dark"] .vikrun-header-sitename { color: var(--vk-ink); } /* کادرِ سرچ: زمینه‌ی خاکستریِ روشن → سطحِ تیره */ :root[data-vk-theme="dark"] .vk-header-search, :root[data-vk-theme="dark"] #rb_header_search { background: #24211c; border-color: var(--vk-border); } :root[data-vk-theme="dark"] .vk-header-search:focus-within, :root[data-vk-theme="dark"] #rb_header_search:focus-within { background: #2b2721; } /* ⚠️ فیلدِ سرچ زمینه‌ی روشنش را از `#rb_header_search .vk-header-search__input` (شناسه = specificityِ بالا) و کلاسِ بوت‌استرپیِ `form-control` می‌گیرد؛ بدونِ سلکتورِ هم‌وزن + `!important` در تمِ تیره یک کادرِ سفیدِ توی‌ذوق‌زن می‌ماند. */ :root[data-vk-theme="dark"] #rb_header_search .vk-header-search__input, :root[data-vk-theme="dark"] .vk-header-search__input, :root[data-vk-theme="dark"] .vk-header-search input[type="search"], :root[data-vk-theme="dark"] .vk-header-search input[type="text"] { background: #24211c !important; border-color: var(--vk-border) !important; color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] #rb_header_search:hover .vk-header-search__input, :root[data-vk-theme="dark"] #rb_header_search .vk-header-search__input:focus { background: #2b2721 !important; border-color: var(--vk-yellow) !important; } :root[data-vk-theme="dark"] .vk-header-search__input::placeholder { color: var(--vk-muted) !important; } /* آیکنِ ذره‌بین روی حبابِ زرد باید تیره بماند (نه مجنتای موروثیِ reset.css). */ :root[data-vk-theme="dark"] .vk-header-search__button svg { fill: #161513; } /* حساب/سبد و دکمه‌های هدر */ :root[data-vk-theme="dark"] .vikrun-header-account, :root[data-vk-theme="dark"] .vikrun-header-cart { background: #24211c; border-color: var(--vk-border); color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vikrun-header-account:hover, :root[data-vk-theme="dark"] .vikrun-header-cart:hover { background: var(--vk-yellow-tint); border-color: var(--vk-yellow) !important; } /* مگامنو */ :root[data-vk-theme="dark"] .vikrun-header-nav { border-top-color: var(--vk-border); } :root[data-vk-theme="dark"] .vk-pro-panel, :root[data-vk-theme="dark"] .vk-pro-dropdown, :root[data-vk-theme="dark"] .vk-pro-mobile-panel, :root[data-vk-theme="dark"] .vk-header-search__results { background: var(--vk-card); border-color: var(--vk-border); color: var(--vk-text); } /* ⚠️ CSSِ مگامنو از `Frontend/ProMenu.php` **اینلاین** چاپ می‌شود و رنگ‌هایش هاردکدند (`#111`, `#222`, `#fff`, `#fff7d1`) — و چون اینلاین بعد از این فایل می‌آید، فقط specificityِ بالاتر یا `!important` جواب می‌دهد. بدونِ این بلاک آیتم‌های منو در تمِ تیره **کاملاً نامرئی** بودند (کنتراستِ ۱.۰۷). */ :root[data-vk-theme="dark"] .vk-pro-link, :root[data-vk-theme="dark"] .vk-pro-trigger, /* `:not(.vk-pro-panel-cta a)` لازم است: دکمه‌ی CTA زمینه‌ی زرد دارد و روشن‌کردنِ متنش کنتراست را به ۱.۳۳ می‌برد (متنِ روشن روی زرد). */ :root[data-vk-theme="dark"] .vk-pro-panel a:not(.vk-pro-panel-cta a), :root[data-vk-theme="dark"] .vk-pro-mobile-panel a, :root[data-vk-theme="dark"] .vk-pro-mobile-acc, :root[data-vk-theme="dark"] .vk-pro-mobile-head strong, :root[data-vk-theme="dark"] .vikrun-header-nav a { color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vk-pro-panel-title { color: var(--vk-muted) !important; } :root[data-vk-theme="dark"] .vk-pro-link:hover, :root[data-vk-theme="dark"] .vk-pro-link.is-open, :root[data-vk-theme="dark"] .vk-pro-panel a:not(.vk-pro-panel-cta a):hover, :root[data-vk-theme="dark"] .vk-pro-mobile-panel a:hover, :root[data-vk-theme="dark"] .vk-pro-mobile-acc:hover { background: var(--vk-yellow-tint) !important; border-color: var(--vk-yellow-strong); color: var(--vk-yellow-strong) !important; } :root[data-vk-theme="dark"] .vk-pro-burger, :root[data-vk-theme="dark"] .vk-pro-mobile-close, :root[data-vk-theme="dark"] .vk-pro-mobile-toggle { background: #24211c !important; border-color: var(--vk-border) !important; color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vk-pro-burger span { background: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vk-pro-panel-cta { outline: 1px solid var(--vk-border); } /* آکاردئونِ تودرتویِ پنلِ موبایل — زمینه/رنگِ عنوان هاردکد بودند (در بررسیِ نهاییِ ریسپانسیو پیدا شد، جدا از بقیه‌ی پنلِ موبایل). */ :root[data-vk-theme="dark"] .vk-pro-mobile-sub { background: #1a1815 !important; } :root[data-vk-theme="dark"] .vk-pro-mobile-sub-title { color: var(--vk-muted) !important; } /* ───────────────────────────────────────────────────────────────────────── ۳) فوتر ───────────────────────────────────────────────────────────────────────── */ :root[data-vk-theme="dark"] .vikrun-footer { background: #17150f; } :root[data-vk-theme="dark"] .vikrun-footer-badge, :root[data-vk-theme="dark"] .vikrun-footer-bottom { background: var(--vk-card); } /* بجِ اعتمادِ فوتر زمینه‌ی `#fff`ِ هاردکد داشت → متنِ روشن روی سفید (کنتراست ۱.۱۳). */ :root[data-vk-theme="dark"] .vikrun-footer-trust-item { background: var(--vk-card); border-color: var(--vk-border); color: var(--vk-ink); } :root[data-vk-theme="dark"] .vikrun-back-to-top:hover, :root[data-vk-theme="dark"] .vikrun-footer-col a:hover, :root[data-vk-theme="dark"] .vikrun-footer-contact-item a:hover { color: var(--vk-ink); } /* نوارِ پایینِ موبایل (خانه/منو/سبد/حساب) — سایت‌وایده، زمینه‌اش هاردکدِ #fff بود و در بررسیِ نهاییِ ریسپانسیو دیده شد؛ آیتم‌هایش خودشان از قبل var دارند. */ :root[data-vk-theme="dark"] .vikrun-mobile-bottom-bar { background: #1a1815; } /* ───────────────────────────────────────────────────────────────────────── ۴) دکمه‌ی سوییچِ تم (در هدر) ───────────────────────────────────────────────────────────────────────── */ .vk-theme-toggle { /* ۴۴px تا با بقیه‌ی آیکون‌هایِ همین ردیفِ هدر (.vikrun-header-cart، .vikrun-header-account، هر دو ۴۴px در site-chrome.css) هم‌اندازه و با حداقلِ هدفِ لمسیِ استاندارد یکی باشد — قبلاً ۴۰px تنها موردِ ناهم‌خوان در همین ردیف بود. */ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--vk-border, #eee); border-radius: 50%; background: var(--vk-card, #fff); color: var(--vk-ink, #111); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .vk-theme-toggle:hover { background: var(--vk-yellow-tint, #fff8d9); border-color: var(--vk-yellow, #ffcd11); } /* رفعِ باگِ رنگِ صورتیِ `reset.css` (`button:focus{background-color:#c36}`): کلیک با ماوس روی دکمه `:focus` می‌دهد ولی معمولاً `:focus-visible` نه (هیوریستیکِ مرورگر) — پس override فقط با `:focus-visible` کافی نبود؛ `:focus` هم لازم است. */ .vk-theme-toggle:focus { background: var(--vk-card, #fff) !important; color: var(--vk-ink, #111) !important; } .vk-theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 205, 17, .45); } .vk-theme-toggle svg { width: 20px; height: 20px; } /* آیکنِ خورشید در تمِ روشن، ماه در تمِ تیره. */ .vk-theme-toggle .vk-icon-moon { display: none; } :root[data-vk-theme="dark"] .vk-theme-toggle .vk-icon-sun { display: none; } :root[data-vk-theme="dark"] .vk-theme-toggle .vk-icon-moon { display: block; } /* ───────────────────────────────────────────────────────────────────────── ۵) صفحه‌ی اصلی — عیناً پالتِ دارکِ ماکتِ v4 ───────────────────────────────────────────────────────────────────────── */ :root[data-vk-theme="dark"] .vikrun-home { /* ⚠️ `!important` لازم است: HomepageRenderer مقدارِ `--vk-black` را از آپشنِ design.text_color به‌صورتِ **اینلاین** روی همین المان می‌گذارد و اینلاین بر stylesheet غلبه می‌کند — بدونِ !important متنِ تیره روی زمینه‌ی تیره می‌ماند. */ --vk-black: #f4f1e9 !important; --vk-ink-2: #cec9bd; --vk-muted: #9a968b; --vk-bg: #141310; --vk-surface: #1e1c18; --vk-soft: #1a1815; --vk-soft-2: #211f1a; --vk-border: #312d26; --vk-yellow-soft: #2a2410; --vk-yellow-ink: #ffd84a; --vk-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.35); --vk-shadow-2: 0 22px 50px rgba(0,0,0,.55); /* صریح (نه فقط توکن) تا اگر جایی مقدارِ هاردکد ماند هم پوشش داده شود. */ background: #141310; color: #f4f1e9; } /* CTAِ اصلیِ هیرو باید برعکس شود وگرنه دکمه‌ی تیره در زمینه‌ی تیره گم می‌شود (`.vk-btn-black` رنگش هاردکد است و با توکن نمی‌چرخد). */ :root[data-vk-theme="dark"] .vk-hero-actions .vk-btn-black { background: #f4f1e9; color: #161513 !important; } /* کارتِ برندِ کاترپیلار مشکی/زرد است — در تمِ تیره برعکس می‌شود تا محو نشود. */ :root[data-vk-theme="dark"] .vk-brand-tile.is-cat { --bc: #ffcd11; } :root[data-vk-theme="dark"] .vk-brand-tile.is-cat .vk-brand-mark { background: var(--vk-yellow); color: #141414; } /* بجِ آیکونِ کارتِ دسته‌بندی رویِ زمینه‌ی زردِ ثابت می‌نشیند؛ رنگش var(--vk-black) بود که چند خط بالاتر در تمِ تیره روشن می‌شود → آیکونِ زردِ کم‌رنگ روی زردِ روشن (کنتراستِ ضعیف). مثلِ .vk-brand-mark پین می‌شود تا همیشه تیره بماند. */ :root[data-vk-theme="dark"] .vk-category-icon { color: #141414; } /* 🔴 بنرِ کش‌بک: گرادیانش `var(--vk-yellow-soft)` را به‌عنوانِ استاپِ آخر دارد و در تمِ تیره آن توکن `#2a2410` (قهوه‌ایِ تیره) می‌شود → نیمی از بنر تیره می‌شد و متنِ تیره‌ی رویش خوانا نبود (کنتراست ۲.۳–۳.۱). این بنر در هر دو تم یک بلوکِ زردِ برند است، پس استاپ‌هایش در تیره روی مقادیرِ روشن **پین** می‌شوند. */ :root[data-vk-theme="dark"] .vk-cashback { background: linear-gradient(120deg, #ffcd11 0%, #ffdb52 52%, #fff6cf 100%); border-color: #f2b800; } :root[data-vk-theme="dark"] .vk-cashback, :root[data-vk-theme="dark"] .vk-cashback h2, :root[data-vk-theme="dark"] .vk-cashback p, :root[data-vk-theme="dark"] .vk-cb-step strong { color: #161513; } :root[data-vk-theme="dark"] .vk-cashback p { color: #5c4a00; } :root[data-vk-theme="dark"] .vk-cb-step span:not(.vk-cb-n) { color: #6b5600; } :root[data-vk-theme="dark"] .vk-cashback-main .vk-btn-black { background: #161513; color: #fff !important; } /* نکته: `.vk-brandbar-section` زمینه‌اش را اینلاین با `var(--vk-surface)` دارد و چون var در زمانِ computed-value حل می‌شود، خودش با تم می‌چرخد — override لازم نیست. */ /* ───────────────────────────────────────────────────────────────────────── ۶) صفحه‌ی محصولِ تکی (single product) — پوششِ کاملاً نو (۲۰۲۶-۰۷-۲۶) ───────────────────────────────────────────────────────────────────────── */ /* اندازه‌گیریِ زنده قبل از این بلوک: عنوانِ محصول/عنوان‌بخش‌ها/لینکِ «مشاهده‌ی همه» کنتراستِ ۱.۰۲:۱ داشتند (متنِ تقریباً مشکی، مستقیم روی صفحه‌ی تیره، بدونِ کارتِ زیرش) — یعنی عملاً نامرئی. توضیحِ کوتاه هم ۲.۱۰:۱ و لینک‌های بردکرامب ۳.۲۸:۱ بودند. تمپلیتِ .vk-spt توکن‌های محلیِ خودش را دارد (--black/--text/ --muted/--border/--soft) که هیچ‌کدام به توکن‌های سراسریِ دارک وصل نبودند؛ بیشترِ متن‌ها هم از همین‌ها استفاده می‌کنند، پس فلیپ‌کردنِ همین چند توکن اکثرِ کار را یک‌جا حل می‌کند. باقی — پس‌زمینه‌ها/رنگ‌هایی که هاردکد بودند نه var — جداگانه زیر override شده‌اند. */ :root[data-vk-theme="dark"] .vk-spt { --black: var(--vk-ink); --text: var(--vk-text); --muted: var(--vk-muted); --border: var(--vk-border); --soft: var(--vk-card); } /* ⚠️ استثنا — همان تله‌ی «متنِ روشن روی زردِ دکمه» که در مگامنو هم بود ([[menu-architecture]]): این دو المان --black را روی زمینه‌ی زردِ ثابت به‌عنوانِ رنگِ متن/بردر مصرف می‌کنند، نه روی صفحه — فلیپِ سراسری اینجا باید خنثی شود وگرنه متنِ روشن روی زرد می‌نشیند. */ :root[data-vk-theme="dark"] .vk-spt-swatch.is-active { border-color: #161513 !important; color: #161513 !important; } :root[data-vk-theme="dark"] .vk-spt-cart button.single_add_to_cart_button:not(:disabled):not(.disabled):not(.wc-variation-selection-needed) { color: #161513 !important; } /* حالتِ غیرفعال (پیش از انتخابِ سایز): چون --soft با باکسِ خرید یکی شد، دکمه با پس‌زمینه‌ی یکسان نامرئی می‌ماند — رنگِ جداگانه لازم است، نه فقط توکنِ soft. */ :root[data-vk-theme="dark"] .vk-spt-cart button.single_add_to_cart_button:disabled, :root[data-vk-theme="dark"] .vk-spt-cart button.single_add_to_cart_button.disabled, :root[data-vk-theme="dark"] .vk-spt-cart button.single_add_to_cart_button.wc-variation-selection-needed { background: #141310 !important; color: var(--vk-muted) !important; border: 1px solid var(--vk-border) !important; } /* همین تله برایِ حالتِ hoverِ «مشاهده‌ی همه» هم صادق است — زمینه‌اش هم از var(--black) می‌آید (نه فقط متن)، پس با فلیپ به رنگِ روشن تبدیل می‌شد. */ :root[data-vk-theme="dark"] .vk-spt-related-all:hover { background: var(--vk-yellow-tint); border-color: var(--vk-yellow-strong); color: var(--vk-yellow-strong) !important; } /* ── بردکرامب (زمینه‌اش هاردکد #F6F6F6 بود) ── */ :root[data-vk-theme="dark"] .vk-spt-breadcrumb { background: var(--vk-card); } :root[data-vk-theme="dark"] .vk-spt-bc-item, :root[data-vk-theme="dark"] .vk-spt-bc-cats a { color: var(--vk-muted); } :root[data-vk-theme="dark"] .vk-spt-bc-sep { color: var(--vk-border); } /* ── گالری (گرادیانِ سفیدِ هاردکد) ── */ :root[data-vk-theme="dark"] .vk-spt-gallery-main { background: linear-gradient(145deg, var(--vk-card) 0%, #17150f 100%); } :root[data-vk-theme="dark"] .vk-spt-thumb { background: linear-gradient(180deg, var(--vk-card) 0%, #17150f 100%); } /* ── باکسِ خرید (زمینه‌اش هاردکد #fff بود) ── */ :root[data-vk-theme="dark"] .vk-spt-buybox { background: var(--vk-card); } :root[data-vk-theme="dark"] .vk-spt-price del, :root[data-vk-theme="dark"] .vk-spt-card-price del { color: var(--vk-muted); } /* ── توضیحِ کوتاه — رنگش هاردکدِ #4a4a4a بود (var نبود) ── */ :root[data-vk-theme="dark"] .vk-spt-short-desc { color: var(--vk-text); } /* ── تگ‌های ویژگی — بردر و رنگِ متن هاردکد بودند ── */ :root[data-vk-theme="dark"] .vk-spt-features .feature-card { border-color: var(--vk-border) !important; } :root[data-vk-theme="dark"] .vk-spt-features .feature-label { color: var(--vk-text) !important; } /* ── دکمه‌ی راهنمای سایز — پایه‌اش کاملاً هاردکد بود ── */ :root[data-vk-theme="dark"] .vk-spt-sizeguide-btn { background: var(--vk-card); border-color: var(--vk-border); color: var(--vk-text); } /* ── سواچ‌های سایز — پایه/hover/ناموجود همه هاردکد بودند ── */ :root[data-vk-theme="dark"] .vk-spt-swatch { background: var(--vk-card); border-color: var(--vk-border); color: var(--vk-text); } :root[data-vk-theme="dark"] .vk-spt-swatch:hover { background: var(--vk-yellow-tint); border-color: var(--vk-yellow-strong); } :root[data-vk-theme="dark"] .vk-spt-swatch.is-out { background: #201d17; border-color: var(--vk-border); color: #5c584c; } :root[data-vk-theme="dark"] .vk-spt-swatch.is-out:hover { background: #201d17; border-color: var(--vk-border); } :root[data-vk-theme="dark"] .vk-spt-swatch.is-out .vk-spt-swatch-label { color: #5c584c; } /* ── راهنمای «ابتدا سایز را انتخاب کنید» ── */ :root[data-vk-theme="dark"] .vk-spt-size-hint { background: var(--vk-yellow-tint); border-color: #4a3f18; color: var(--vk-yellow-strong); } /* ── پیامِ کش‌بک («X تومان به کیف‌پول برمی‌گردد») — سبزِ هاردکد بود ── */ :root[data-vk-theme="dark"] .vk-spt-cashback { background: #16281a; border-color: #2a4a30; color: #8fcf9a; } :root[data-vk-theme="dark"] .vk-spt-cashback svg { color: #5fbf6f; } /* ── کارت‌های «کالاهای مشابه» — پایه/عکس/عنوان هاردکد بودند ── */ :root[data-vk-theme="dark"] .vk-spt-card { background: var(--vk-card); border-color: var(--vk-border); } :root[data-vk-theme="dark"] .vk-spt-card-img { background: linear-gradient(180deg, #201d17 0%, #17150f 100%); } :root[data-vk-theme="dark"] .vk-spt-card-title { color: var(--vk-text) !important; } /* ── جدولِ مشخصات (شورت‌کدِ [product_specs]) — زمینه/رنگ‌ها هاردکد بودند ── */ :root[data-vk-theme="dark"] .vk-spt-specs-shortcode .spec-item, :root[data-vk-theme="dark"] .vk-spt-spec-row, :root[data-vk-theme="dark"] body.single-product .product-specs-container > * { background: var(--vk-card) !important; border-color: var(--vk-border) !important; } :root[data-vk-theme="dark"] .vk-spt-specs-shortcode .spec-item .spec-label, :root[data-vk-theme="dark"] .vk-spt-specs-shortcode .spec-item > *:first-child, :root[data-vk-theme="dark"] .vk-spt-spec-label, :root[data-vk-theme="dark"] body.single-product .product-specs-container > * > *:first-child { background: #201d17 !important; border-left-color: var(--vk-border) !important; color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vk-spt-specs-shortcode .spec-item .spec-value, :root[data-vk-theme="dark"] .vk-spt-specs-shortcode .spec-item > *:last-child:not(:first-child), :root[data-vk-theme="dark"] .vk-spt-spec-value, :root[data-vk-theme="dark"] body.single-product .product-specs-container > * > *:last-child { background: var(--vk-card) !important; color: var(--vk-text) !important; } /* ── حالتِ خالیِ نظرات (بردر و آیکن هاردکد بودند) ── */ :root[data-vk-theme="dark"] .vk-spt-review-empty { border-color: var(--vk-border); } :root[data-vk-theme="dark"] .vk-spt-review-empty-icon { background: var(--vk-card); } /* ── کارتِ «نظراتِ کاربران» — کاملاً هاردکد بود، هیچ var نداشت ── */ :root[data-vk-theme="dark"] .vk-spt-reviews-card { background: var(--vk-card); border-color: var(--vk-border); } :root[data-vk-theme="dark"] .vk-spt-review-hint { background: linear-gradient(135deg, #211f19, #241f14); border-bottom-color: var(--vk-border); } :root[data-vk-theme="dark"] .vk-spt-review-hint strong { color: var(--vk-ink); } :root[data-vk-theme="dark"] .vk-spt-review-hint span { color: var(--vk-muted); } :root[data-vk-theme="dark"] .vk-spt-reviews-card .comment-form-rating label { color: var(--vk-ink); } :root[data-vk-theme="dark"] .vk-spt-reviews-card .comment-form label { color: var(--vk-muted); } :root[data-vk-theme="dark"] .vk-spt-reviews-card .comment-form input[type="text"], :root[data-vk-theme="dark"] .vk-spt-reviews-card .comment-form input[type="email"], :root[data-vk-theme="dark"] .vk-spt-reviews-card .comment-form textarea { background: #17150f !important; border-color: var(--vk-border) !important; color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vk-spt-reviews-card .comment-form input:focus, :root[data-vk-theme="dark"] .vk-spt-reviews-card .comment-form textarea:focus { background: var(--vk-card) !important; } :root[data-vk-theme="dark"] .vk-spt-reviews-card .comment-form-cookies-consent label { color: var(--vk-muted); } :root[data-vk-theme="dark"] .vk-spt-reviews-card .commentlist li.review, :root[data-vk-theme="dark"] .vk-spt-reviews-card .commentlist li.comment { background: #17150f; border-color: var(--vk-border); } :root[data-vk-theme="dark"] .vk-spt-reviews-card .commentlist .woocommerce-review__author { color: var(--vk-ink); } :root[data-vk-theme="dark"] .vk-spt-reviews-card .commentlist time { color: var(--vk-muted); } :root[data-vk-theme="dark"] .vk-spt-reviews-card .commentlist .description p { color: var(--vk-text); } :root[data-vk-theme="dark"] .vk-spt-reviews-card .commentlist img.avatar, :root[data-vk-theme="dark"] .vk-spt-reviews-card .commentlist + #review_form_wrapper { border-color: var(--vk-border); } /* ── نوارِ اعتماد (تراست‌استریپ) — هم روی محصول هم جاهای دیگر مصرف می‌شود ── */ :root[data-vk-theme="dark"] .vk-product-trust-strip-inner { background: var(--vk-card); border-color: var(--vk-border); } :root[data-vk-theme="dark"] .vk-product-trust-strip-item { background: var(--vk-card); border-left-color: var(--vk-border); } :root[data-vk-theme="dark"] .vk-product-trust-strip-item:hover { background: var(--vk-yellow-tint); } :root[data-vk-theme="dark"] .vk-product-trust-strip-text strong { color: var(--vk-ink); } :root[data-vk-theme="dark"] .vk-product-trust-strip-text span { color: var(--vk-muted); } /* بریک‌پوینت‌های ۲×۲ در single-product-template.css یک border-bottom هاردکد (#EAEAEA) روی دو تایلِ اول می‌گذارند — در دارک هم باید دیده شود. */ :root[data-vk-theme="dark"] .vk-product-trust-strip-item:nth-child(1), :root[data-vk-theme="dark"] .vk-product-trust-strip-item:nth-child(2) { border-bottom-color: var(--vk-border) !important; } /* ── باکسِ واتساپ ── */ :root[data-vk-theme="dark"] .vk-product-whatsapp-box { background: linear-gradient(180deg, #16211a 0%, var(--vk-card) 70%) !important; border-color: rgba(37,211,102,.3) !important; } :root[data-vk-theme="dark"] .vk-product-whatsapp-content strong { color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vk-product-whatsapp-content span { color: #8fae95 !important; } :root[data-vk-theme="dark"] .vk-product-whatsapp-note { color: #7a9b81 !important; } /* ── مودالِ راهنمایِ سایز ── */ :root[data-vk-theme="dark"] .vk-size-modal-box { background: var(--vk-card) !important; } :root[data-vk-theme="dark"] .vk-size-modal-close { background: #17150f !important; border-color: var(--vk-border) !important; color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vk-size-modal-head h3 { color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vk-size-modal-head p { color: var(--vk-muted) !important; } :root[data-vk-theme="dark"] .vk-size-table-card { background: var(--vk-card) !important; border-color: var(--vk-border) !important; } :root[data-vk-theme="dark"] .vk-size-table { background: var(--vk-card) !important; } :root[data-vk-theme="dark"] .vk-size-table td { background: var(--vk-card) !important; color: var(--vk-text) !important; border-bottom-color: var(--vk-border) !important; } :root[data-vk-theme="dark"] .vk-size-table tbody tr:nth-child(even) td { background: #17150f !important; } :root[data-vk-theme="dark"] .vk-size-modal-note, :root[data-vk-theme="dark"] .vk-size-empty-chart { background: var(--vk-yellow-tint) !important; border-color: #4a3f18 !important; color: var(--vk-yellow-strong) !important; } /* ── ویجتِ سفارشیِ ثبتِ نظر (review-form.css، کلاس‌هایِ vkr-*) ── این ویجت با جاوااسکریپت جایِ فرمِ بومیِ ووکامرس (.vk-spt-reviews-card) را می‌گیرد (display:none روی آن می‌گذارد) — یعنی همان چیزی‌ست که کاربرِ واقعی می‌بیند، نه فرمِ بالا. کاملاً هاردکد بود، هیچ var نداشت. */ :root[data-vk-theme="dark"] .vkr-form-card { background: var(--vk-card) !important; border-color: var(--vk-border) !important; } :root[data-vk-theme="dark"] .vkr-form-header { background: linear-gradient(135deg, #241f14 0%, var(--vk-card) 60%) !important; border-bottom-color: var(--vk-border) !important; } :root[data-vk-theme="dark"] .vkr-form-header-icon { background: var(--vk-yellow-tint) !important; border-color: #4a3f18 !important; } :root[data-vk-theme="dark"] .vkr-form-title { color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vkr-form-subtitle { color: var(--vk-muted) !important; } :root[data-vk-theme="dark"] .vkr-step-label { color: var(--vk-text) !important; } /* ستاره‌ی انتخاب‌نشده: stroke خاکستریِ روشن‌تر تا رویِ زمینه‌ی تیره هم دیده شود */ :root[data-vk-theme="dark"] .vkr-star-path { stroke: #55503f; } :root[data-vk-theme="dark"] .vkr-label { color: var(--vk-muted) !important; } :root[data-vk-theme="dark"] .vkr-textarea, :root[data-vk-theme="dark"] .vkr-input { background: #17150f !important; border-color: var(--vk-border) !important; color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vkr-textarea:focus, :root[data-vk-theme="dark"] .vkr-input:focus { background: var(--vk-card) !important; } :root[data-vk-theme="dark"] .vkr-textarea::placeholder, :root[data-vk-theme="dark"] .vkr-input::placeholder, :root[data-vk-theme="dark"] .vkr-char-count { color: #6b6656 !important; } :root[data-vk-theme="dark"] .vkr-btn-back { color: var(--vk-muted) !important; } :root[data-vk-theme="dark"] .vkr-btn-back:hover { color: var(--vk-ink) !important; } /* دکمه‌ی ثبت (مشکی+زرد) در هر دو تم درست است — دست‌نخورده می‌ماند */ :root[data-vk-theme="dark"] .vkr-success-title { color: var(--vk-ink) !important; } :root[data-vk-theme="dark"] .vkr-success-text { color: var(--vk-muted) !important; } :root[data-vk-theme="dark"] .vkr-error-bar { background: #3a211d !important; border-color: #6b3a33 !important; color: #f0a599 !important; } /* ───────────────────────────────────────────────────────────────────────── ۷) مجله (آرشیو + پستِ تکی) — بازطراحیِ ۲۰۲۶-۰۷-۲۷ ───────────────────────────────────────────────────────────────────────── */ /* توکن‌های محلیِ .vk-blog/.vk-single (blog.css) عیناً به الگویِ .vk-spt — بیشترِ کارت‌ها/متن‌ها همین چند توکن را مصرف می‌کنند، پس فلیپِ همین‌ها اکثرِ سطح را یک‌جا حل می‌کند. */ :root[data-vk-theme="dark"] .vk-blog, :root[data-vk-theme="dark"] .vk-single { --ink-2: var(--vk-text); --yellow-ink: var(--vk-yellow-strong); --soft: #1a1815; --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.35); --shadow-2: 0 22px 50px rgba(0,0,0,.55); } /* گرادیانِ زمینه‌ی هیروی آرشیو و بلاک‌های همیشه‌تیره (shop-card/cta-block، هاردکد #161513 نه var) خودشان دست‌نخورده درست می‌مانند. */ /* ⚠️ تلهٔ همان الگویی که در هدر/مگامنو هم بود: چند دکمه `background: var(--vk-ink)` دارند (متنشان همیشه‌سفیدِ هاردکد است) — var(--vk-ink) در دارک معکوس می‌شود (روشن، برایِ متنِ خوانا روی صفحه‌ی تیره)، پس زمینه‌شان روشن می‌شود ولی متنِ سفیدِ هاردکد رویش تقریباً نامرئی می‌ماند. باید زمینه را صریح روی یک تیره‌ی ثابت پین کرد، نه اینکه با توکن بچرخد. */ :root[data-vk-theme="dark"] .vk-blog .read-link, :root[data-vk-theme="dark"] .vk-blog .view-all, :root[data-vk-theme="dark"] .vk-single .chip:not(:first-child) { background: #24211c; } :root[data-vk-theme="dark"] .vk-blog .read-link:hover, :root[data-vk-theme="dark"] .vk-blog .view-all:hover { background: var(--vk-yellow-strong); color: #161513; } /* ───────────────────────────────────────────────────────────────────────── ۸) صفحاتِ محتوایی — درباره/ضمانت‌اصالت/تعویض‌سایز/مرجوعی/ارسال/تماس/سوالات (۲۰۲۶-۰۷-۲۷) ───────────────────────────────────────────────────────────────────────── */ /* هر ۷ صفحه (ContentPages.php) دقیقاً همان تلهٔ .vk-spt را دارند: هرکدام یک `