/** * استایل‌های رنگی تم — با data-color-style روی اعمال می‌شود. * شناسه‌ها باید با theme.php → color_styles[].id هم‌خوان باشند. * * هر پالت، توکن‌های معنایی UI را بازتعریف می‌کند تا تغییر استایل رنگی * روی دکمه‌ها، لینک‌ها، آیکون‌ها، پس‌زمینه فیلترها و سایر عناصر مؤثر باشد. */ /* ── نگاشت معنایی مشترک (روی توکن‌های پالت زیر) ── */ [data-color-style] { --btn-primary-bg: var(--dark); --btn-primary-hover: var(--a2); --btn-accent-bg: var(--a1); --btn-accent-hover: var(--a2); --link: var(--a2); --link-hover: var(--a1); --icon-accent: var(--a1); --icon-muted: var(--g5); --filter-bg: var(--g1); --filter-border: var(--border); --filter-head-icon: var(--a1); --filter-active-bg: var(--a3); --filter-hover-bg: var(--a3); --sort-active-bg: var(--a3); --sort-active-text: var(--a2); --chip-active-border: var(--a1); --chip-active-bg: var(--a3); --switch-track-active: var(--a1); --focus-ring: rgba(var(--a1-rgb), 0.12); --focus-ring-soft: rgba(var(--a1-rgb), 0.1); --focus-ring-strong: rgba(var(--a1-rgb), 0.45); --glow-accent: rgba(var(--a1-rgb), 0.18); --shadow-accent: rgba(var(--a1-rgb), 0.22); --hero-strip-bg: var(--g2); --breadcrumb-bg: var(--w); --success: var(--green); --success-bg: rgba(var(--green-rgb), 0.14); --tag-hot-bg: var(--a1); --announce-gradient: linear-gradient(var(--a1), var(--a2)); --scrollbar-thumb: var(--g4); --border: rgba(var(--dark-rgb), 0.08); } /* ── تراکота (پیش‌فرض) ── */ [data-color-style="terra"], :root:not([data-color-style]), :root[data-color-style=""] { --a1-rgb: 217, 127, 74; --a2-rgb: 181, 101, 58; --dark-rgb: 24, 21, 15; --green-rgb: 102, 124, 96; --a1: #d97f4a; --a2: #b5653a; --a3: #f5e6d8; --a4: #e8c9af; --dark: #18150f; --ink: #2a2520; --green: #667c60; --w: #ffffff; --g1: #f8f5f2; --g2: #f1ebe4; --g3: #e4dbd0; --g4: #cfc4b5; --g5: #9e9085; --g6: #5c534a; } /* ── اقیانوس ── */ [data-color-style="ocean"] { --a1-rgb: 93, 122, 152; --a2-rgb: 74, 98, 128; --dark-rgb: 15, 23, 36; --green-rgb: 74, 124, 111; --a1: #5d7a98; --a2: #4a6280; --a3: #e8eef4; --a4: #c5d4e3; --dark: #0f1724; --ink: #1a2433; --green: #4a7c6f; --w: #ffffff; --g1: #f4f7fa; --g2: #e8eef4; --g3: #d4dce6; --g4: #b8c5d4; --g5: #7a8fa3; --g6: #4a5568; } /* ── جنگل ── */ [data-color-style="forest"] { --a1-rgb: 102, 124, 96; --a2-rgb: 79, 99, 73; --dark-rgb: 20, 26, 20; --green-rgb: 90, 143, 82; --a1: #667c60; --a2: #4f6349; --a3: #eef3eb; --a4: #d4e0cf; --dark: #141a14; --ink: #1f2a1f; --green: #5a8f52; --w: #ffffff; --g1: #f4f7f2; --g2: #eaf0e8; --g3: #d8e2d4; --g4: #b8c8b2; --g5: #7a9074; --g6: #4a5c46; } /* ── رز ── */ [data-color-style="rose"] { --a1-rgb: 201, 107, 122; --a2-rgb: 168, 85, 99; --dark-rgb: 26, 18, 20; --green-rgb: 122, 107, 92; --a1: #c96b7a; --a2: #a85563; --a3: #fceef1; --a4: #f0d0d6; --dark: #1a1214; --ink: #2a2022; --green: #7a6b5c; --w: #ffffff; --g1: #faf6f7; --g2: #f5eef0; --g3: #eadde0; --g4: #d4c0c5; --g5: #9e858b; --g6: #5c4a4e; } /* ── نیمه‌شب ── */ [data-color-style="midnight"] { --a1-rgb: 107, 91, 149; --a2-rgb: 82, 70, 115; --dark-rgb: 18, 16, 26; --green-rgb: 92, 107, 122; --a1: #6b5b95; --a2: #524673; --a3: #eeeaf5; --a4: #d4cce8; --dark: #12101a; --ink: #1e1a28; --green: #5c6b7a; --w: #ffffff; --g1: #f6f4fa; --g2: #eeeaf5; --g3: #ddd6ea; --g4: #c4b8d8; --g5: #8a7aa8; --g6: #52466a; } /* ── طلایی ── */ [data-color-style="gold"] { --a1-rgb: 201, 162, 39; --a2-rgb: 166, 133, 25; --dark-rgb: 26, 22, 8; --green-rgb: 107, 122, 74; --a1: #c9a227; --a2: #a68519; --a3: #faf6e8; --a4: #ede2bc; --dark: #1a1608; --ink: #2a2410; --green: #6b7a4a; --w: #ffffff; --g1: #faf8f2; --g2: #f5f0e4; --g3: #e8dfc8; --g4: #d4c8a8; --g5: #9e9070; --g6: #5c543a; } /* ── اعمال معنایی روی عناصر ── */ [data-color-style] .sidebar, [data-color-style] .shop-filter-box { background: var(--filter-bg); border-color: var(--filter-border); } [data-color-style] .sidebar h3 i, [data-color-style] .shop-sort-head i, [data-color-style] .panel-header h3 i { color: var(--icon-accent); } [data-color-style] .fcheck input, [data-color-style] .shop-switch input:checked + .shop-switch-ui { accent-color: var(--a1); } [data-color-style] .shop-switch input:checked + .shop-switch-ui { background: var(--switch-track-active); } [data-color-style] .shop-sort-option.is-active { background: var(--sort-active-bg); color: var(--sort-active-text); } [data-color-style] .shop-filter-link.is-active, [data-color-style] .shop-filter-link:hover { color: var(--link-hover); } [data-color-style] .shop-clear-filters { color: var(--link); } [data-color-style] .shop-clear-filters:hover { color: var(--link-hover); } [data-color-style] .see-more, [data-color-style] .shop-product-meta a, [data-color-style] .cms-cat-link.on, [data-color-style] .cms-cat-link:hover { color: var(--link); } [data-color-style] .see-more:hover, [data-color-style] .shop-product-meta a:hover { color: var(--link-hover); } [data-color-style] .breadcrumb a:hover, [data-color-style] .menu-link:hover, [data-color-style] .menu-link:hover i, [data-color-style] .soc-a:hover { color: var(--link-hover); } [data-color-style] .apply-btn, [data-color-style] .checkout-btn, [data-color-style] .form-submit, [data-color-style] .btn-solid, [data-color-style] .nl-btn, [data-color-style] .pa-cart, [data-color-style] .pab-cart, [data-color-style] .pabtn.on { background: var(--btn-primary-bg); } [data-color-style] .apply-btn:hover, [data-color-style] .checkout-btn:hover, [data-color-style] .form-submit:hover, [data-color-style] .btn-solid:hover, [data-color-style] .nl-btn:hover, [data-color-style] .pa-cart:hover, [data-color-style] .pab-cart:hover, [data-color-style] .pabtn:hover { background: var(--btn-primary-hover); } [data-color-style] .sqb-cart, [data-color-style] .pt-hot, [data-color-style] .ptag-hot, [data-color-style] nav.gnav .nav-chip:not(.green) { background: var(--btn-accent-bg); } [data-color-style] .sqb-cart:hover, [data-color-style] nav.gnav .nav-chip:not(.green):hover { background: var(--btn-accent-hover); } [data-color-style] .shop-variant-chip.is-default, [data-color-style] .shop-product-thumb.is-active { border-color: var(--chip-active-border); background: var(--chip-active-bg); } [data-color-style] .hero-strip { background: var(--hero-strip-bg); } [data-color-style] .breadcrumb { background: var(--breadcrumb-bg); } [data-color-style] .shop-product-stock.is-in-stock { background: var(--success-bg); color: var(--success); } [data-color-style] .tcard-check { color: var(--success); } [data-color-style] nav.gnav .nav-chip.green, [data-color-style] .ptag-lim { background: var(--success); } [data-color-style] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } [data-color-style] .form-field input:focus, [data-color-style] .search-box input:focus, [data-color-style] .search-box-input:focus, [data-color-style] .search-box.is-search-open .search-box-input, [data-color-style] .nl-input:focus, [data-color-style] .sort-sel:focus { border-color: var(--a1); box-shadow: 0 0 0 3px var(--focus-ring); } [data-color-style] .cqb:hover, [data-color-style] .pa-quick:hover { border-color: var(--a1); color: var(--a1); background: var(--filter-hover-bg); } [data-color-style] .shop-add-to-cart:not(:disabled):hover { background: var(--btn-primary-hover); opacity: 1; } [data-color-style] .shop-variant-size-btn.is-active { border-color: var(--btn-primary-bg); background: var(--btn-primary-bg); color: #fff; } [data-color-style] .shop-variant-size-btn:not(.is-disabled):not(:disabled):hover { border-color: var(--a1); background: var(--filter-hover-bg); color: var(--a2); } [data-color-style] .shop-spinner { border-color: var(--g3); border-top-color: var(--a1); }