/* ========================================================================== پل هویت بصری — v9 روی مارک‌آپ موجود kh-core. چرا این فایل لازم است: صفحه‌های سایت با المنتور ساخته شده‌اند و محتوایشان از ویجت‌های kh-core می‌آید که مارک‌آپ `kh-*` تولید می‌کنند. استایل جدید قالب برای کلاس‌هایی نوشته شده بود که اصلاً روی صفحه نیستند، پس هیچ اثری نداشت. راه‌حل: خودِ kh-core با توکن ساخته شده. با بازتعریف همان توکن‌ها، کل سایت هویت v9 را می‌گیرد — بدون تغییر یک خط مارک‌آپ یا محتوای المنتور، و کاملاً برگشت‌پذیر (کافی است این فایل بارگذاری نشود). ترتیب بارگذاری: بعد از همه‌ی استایل‌های kh-core. ========================================================================== */ /* ─────────── ۱. توکن‌ها ─────────── نکته‌ی مهم درباره‌ی ویژگی سلکتور: پوسته‌های kh-core توکن‌ها را با `[data-kh-skin="x"] body.kh-site` تعریف می‌کنند — ویژگی (۰,۲,۱). صفت data-kh-skin هم روی است، نه روی body. پس سلکتوری مثل `body.kh-site[data-kh-skin]` اصلاً مطابقت نمی‌کند و `html body.kh-site` هم ویژگی کمتری دارد و می‌بازد. شکل زیر (۰,۲,۲) است: هم مطابقت می‌کند، هم برنده می‌شود. */ html[data-kh-skin] body.kh-site, html body.kh-site, :root { /* پالت v9: سرمه‌ای ستون هویت، بنفش رنگ تأکید */ --kh-navy: #1E3A8A; --kh-navy-deep: #0F1F4D; --kh-navy-soft: #EDF1FA; /* «gold» در kh-core نام رنگ تأکید است، نه لزوماً طلایی. مقدارش را بنفش می‌کنیم تا همه‌ی دکمه‌ها و تأکیدها عوض شوند. */ --kh-gold: #6D28D9; --kh-gold-2: #5B21B6; --kh-gold-soft: #F2EDFD; --kh-gold-ink: #FFFFFF; --kh-ink: #0F172A; --kh-ink-2: #41506B; --kh-muted: #8794AC; --kh-bg: #F4F6FA; --kh-card: #FFFFFF; --kh-line: #E3E9F0; --kh-ok: #0F7B4F; --kh-danger: #C6362C; --kh-radius: 16px; --kh-radius-sm: 11px; --kh-radius-pill: 999px; --kh-shadow: 0 14px 36px -20px rgba(15,31,77,.30); --kh-shadow-lg: 0 26px 60px -30px rgba(15,31,77,.45); } /* حالت تیره: رنگ تأکید باید روشن‌تر و کم‌اشباع‌تر شود، وگرنه روی زمینه‌ی تیره می‌درخشد. */ /* حالت تیره در kh-dark.css با `[data-kh-theme="dark"][data-kh-skin="x"] body.kh-site` تعریف شده — ویژگی (۰,۳,۱). شکل زیر (۰,۳,۲) است. */ html[data-kh-skin][data-kh-theme="dark"] body.kh-site, html[data-kh-theme="dark"] body.kh-site { --kh-navy: #7A9CFF; --kh-navy-deep: #080D18; --kh-navy-soft: rgba(122,156,255,.11); --kh-gold: #A78BFA; --kh-gold-2: #BCA6FC; --kh-gold-soft: rgba(167,139,250,.13); /* متن روی رنگ تأکیدِ روشن باید تیره باشد، نه سفید */ --kh-gold-ink: #0B1020; --kh-ink: #E9EEF8; --kh-ink-2: #A6B2C8; --kh-muted: #78859C; --kh-bg: #080D18; --kh-card: #111827; --kh-line: #1F2A3E; --kh-shadow: 0 18px 44px -24px rgba(0,0,0,.95); --kh-shadow-lg: 0 30px 66px -34px rgba(0,0,0,1); } /* ─────────── ۱.۵ فاصله زیر هدر ─────────── قالب‌ها روی بخش اولشان padding-top:0 درون‌خطی دارند تا هیروی تمام‌عرض بچسبد به هدر. ولی در صفحه‌های متن‌محور نتیجه‌اش این است که کارت مطلب عملاً به هدر می‌چسبد. چون آن صفر درون‌خطی است و از هر کلاسی قوی‌تر، فاصله را روی ظرف اصلی می‌گذاریم؛ این‌طور هم اثر می‌کند هم چیزی را نمی‌شکند. */ #main, .kh-site main { padding-block-start: clamp(14px, 2.2vw, 28px); } /* ─────────── ۱.۵.۹ صفت hidden باید واقعاً پنهان کند ─────────── `[hidden]` در استایل پیش‌فرض مرورگر فقط `display: none` است — یعنی ویژگی (۰,۱,۰) و هر قاعده‌ی کلاس‌دار از آن قوی‌تر است. جعبه‌ی «این مطلب مفید بود؟» دقیقاً به همین دلیل خراب بود: جاوااسکریپت `hidden` را درست می‌گذاشت، ولی `.kh-helpful__actions{display:flex}` و `.kh-helpful__ask{display:grid}` رویش می‌نوشتند. نتیجه: دکمه‌ها، فرم توضیح و پیام «ممنون» هر سه با هم روی صفحه می‌ماندند. این قاعده سراسری است و عمداً `!important` دارد: نکته‌ی صفت hidden همین است که بی‌قیدوشرط باشد. */ [hidden] { display: none !important; } /* ─────────── ۱.۶ صفحه‌های ووکامرس ─────────── سبد، پرداخت و حساب کاربری با کدکوتاه داخل برگه رندر می‌شوند. اگر برگه هنوز قالب المنتور را داشته باشد، ظرف اصلی قالب ما اصلاً وجود ندارد و فاصله‌ی بالای صفحه صفر می‌ماند. پس فاصله را روی خودِ ظرف ووکامرس هم می‌گذاریم تا مستقل از قالبِ برگه کار کند. */ .woocommerce-account .woocommerce, .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce, .woocommerce-order-received .woocommerce { margin-block-start: clamp(14px, 2.2vw, 28px); } /* ─────────── ۱.۷ حساب کاربری ─────────── این بخش عمداً خالی است. قبلاً اینجا ناوبری حساب را به یک نوار تبِ افقی تبدیل می‌کرد. آن راه‌حل وقتی درست بود که قالب هنوز فایل حساب کاربری نداشت. حالا `assets/css/kh-account.css` مالک این ناحیه است و چیدمان دوستونی (ستون کناری ۲۶۰ پیکسل + کارت محتوا) را می‌سازد. نگه داشتن هر دو یعنی جنگ ویژگی: انتخابگرِ اینجا `ul:not(.kh-side-nav)` داشت یعنی (۰,۳,۲) و از (۰,۲,۲) فایل تازه قوی‌تر بود — پس فایل تازه بی‌صدا بی‌اثر می‌شد و منو به شکل سه ردیف قرصِ درهم می‌ماند. دو فایل برای یک ناحیه، همیشه به همین‌جا می‌رسد. */ /* ─────────── ۱.۷.۵ نوار بالای آرشیو فروشگاه ─────────── شمارش نتایج و منوی مرتب‌سازی، margin صفر دارند و مستقیم روی شبکه‌ی محصولات می‌نشینند — فاصله‌شان تا کارت‌ها اندازه‌گیری شد: صفر. یک ردیف مرتب با فاصله‌ی بالا و پایین و یک خط مو برای جداسازی. */ html body.kh-site .woocommerce-result-count, html body.kh-site .woocommerce-ordering { margin-block: 0; } html body.kh-site ul.products { margin-block-start: clamp(16px, 2vw, 24px); padding-block-start: clamp(16px, 2vw, 22px); border-block-start: 1px solid var(--kh-line); } /* منوی مرتب‌سازی هم‌ارتفاع بقیه‌ی کنترل‌ها باشد */ html body.kh-site .woocommerce-ordering select { min-block-size: 44px; border-radius: var(--kh-radius-pill); padding-inline: 16px; } /* ─────────── ۱.۸ توضیحات محصول روی کارت ─────────── پنل تب‌های محصول (توضیحات، نظرات) پس‌زمینه و فاصله‌ی داخلی نداشت و متن لخت روی زمینه‌ی صفحه می‌نشست — برخلاف مقاله‌ها که کارت دارند. همان سطح کارتی را اینجا هم می‌دهیم تا خواندنش یکدست باشد. */ html body.kh-site.single-product .woocommerce-Tabs-panel { background: var(--kh-card); border: 1px solid var(--kh-line); border-radius: var(--kh-radius); padding: clamp(20px, 3vw, 36px); } html body.kh-site.single-product .woocommerce-Tabs-panel > *:first-child { margin-block-start: 0; } /* عنوان «توضیحات» داخل پنل تکراری است — تب بالای آن همین را می‌گوید */ html body.kh-site.single-product .woocommerce-Tabs-panel > h2:first-child { font-size: clamp(18px, 2vw, 22px); margin-block-end: 14px; } /* طول خط متن توضیحات هم مثل مقاله محدود شود تا خواندنش راحت باشد */ html body.kh-site.single-product .woocommerce-Tabs-panel > p, html body.kh-site.single-product .woocommerce-Tabs-panel > ul, html body.kh-site.single-product .woocommerce-Tabs-panel > ol { max-inline-size: 72ch; line-height: 2; } /* بخش محصولات مرتبط هم نفس بکشد */ html body.kh-site.single-product .related, html body.kh-site.single-product .up-sells { margin-block-start: clamp(26px, 3.4vw, 44px); } /* ─────────── ۲. کارت ─────────── kh-core به‌جای حاشیه از inset shadow استفاده می‌کند. آن را به حاشیه‌ی واقعی تبدیل می‌کنیم تا با زبان v9 بخواند. */ .kh-site .kh-card { background: var(--kh-card); border: 1px solid var(--kh-line); border-radius: var(--kh-radius); box-shadow: none; transition: transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s cubic-bezier(.4,0,.2,1), border-color .24s cubic-bezier(.4,0,.2,1); } .kh-site a.kh-card:hover, .kh-site .kh-card:hover { transform: translateY(-5px); box-shadow: var(--kh-shadow); border-color: transparent; } /* ─────────── ۳. دکمه ─────────── */ .kh-site .kh-btn { border-radius: var(--kh-radius-pill); font-weight: 700; min-block-size: 44px; box-shadow: none; transition: transform .18s cubic-bezier(.4,0,.2,1), background-color .18s cubic-bezier(.4,0,.2,1); } .kh-site .kh-btn:active { transform: scale(.98); } .kh-site .kh-btn--gold, .kh-site .kh-btn--primary { background: var(--kh-gold); color: var(--kh-gold-ink); border: 0; } .kh-site .kh-btn--gold:hover, .kh-site .kh-btn--primary:hover { background: var(--kh-gold-2); } .kh-site .kh-btn--soft, .kh-site .kh-btn--ghost { background: transparent; color: var(--kh-ink); box-shadow: inset 0 0 0 1px var(--kh-line); } .kh-site .kh-btn--soft:hover, .kh-site .kh-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--kh-navy); color: var(--kh-navy); } /* ─────────── ۴. برچسب و چیپ ─────────── */ .kh-site .kh-tag { background: var(--kh-navy-soft); color: var(--kh-navy); border-radius: var(--kh-radius-pill); font-size: 12px; font-weight: 700; } .kh-site .kh-eyebrow { color: var(--kh-muted); font-size: 11.5px; font-weight: 800; /* letter-spacing فقط روی لاتین مجاز است؛ متن فارسی از هم می‌گسلد */ letter-spacing: normal; } .kh-site .kh-eyebrow:lang(en) { letter-spacing: .08em; } /* ─────────── ۵. تایپوگرافی ─────────── فارسی به line-height بازتر از لاتین نیاز دارد. */ .kh-site { font-size: 16px; line-height: 2; color: var(--kh-ink); } .kh-site h1, .kh-site h2, .kh-site h3, .kh-site h4 { letter-spacing: normal; line-height: 1.6; font-weight: 800; } .kh-site h2 { font-size: clamp(20px, 2.3vw, 28px); } .kh-site h3 { font-size: clamp(17px, 1.9vw, 21px); } .kh-site .kh-card__title { font-size: 15.5px; line-height: 1.75; } .kh-site .kh-meta, .kh-site .kh-card__foot { font-size: 12.5px; color: var(--kh-muted); } /* ارقام جدول‌ها و متاها نلرزند */ .kh-site .kh-meta, .kh-site .kh-duration, .kh-site .kh-price { font-variant-numeric: tabular-nums; } /* ─────────── ۶. جلد و بندانگشتی ─────────── واریانت‌های رنگی قدیمی (سبز/طلایی) به خانواده‌ی سرمه‌ای–بنفش می‌روند. سبز عمداً حذف شده — کارفرما: چشم را اذیت می‌کند. */ .kh-site .kh-thumb { border-radius: 0; } .kh-site .kh-thumb--gold { background: linear-gradient(150deg,#241243,#5B21B6); } .kh-site .kh-thumb--green { background: linear-gradient(150deg,#0F2C48,#25607F); } .kh-site .kh-thumb--navy, .kh-site .kh-thumb--blue { background: linear-gradient(150deg,#0F1F4D,#2749A8); } .kh-site .kh-thumb--slate { background: linear-gradient(150deg,#182238,#3B4D74); } .kh-site .kh-thumb__watermark { color: rgba(255,255,255,.26); font-weight: 800; } .kh-site .kh-duration, .kh-site .kh-level { background: rgba(8,13,24,.72); color: #fff; border-radius: var(--kh-radius-pill); font-size: 12px; font-weight: 700; backdrop-filter: blur(5px); } /* دکمه پخش */ .kh-site .kh-play { background: rgba(255,255,255,.94); color: var(--kh-navy-deep); border: 0; box-shadow: 0 8px 24px -10px rgba(0,0,0,.55); transition: transform .24s cubic-bezier(.4,0,.2,1); } .kh-site .kh-card:hover .kh-play { transform: scale(1.09); } /* ─────────── ۷. زمینه و بخش‌ها ─────────── */ .kh-site { background: var(--kh-bg); } .kh-site .kh-section { padding-block: clamp(32px, 4.2vw, 54px); } /* ─────────── ۸. فرم ─────────── ارتفاع ۴۴ پیکسل حداقلِ لمس راحت است. */ .kh-site input:not([type="checkbox"]):not([type="radio"]), .kh-site select, .kh-site textarea { border-radius: var(--kh-radius-sm); border: 1px solid var(--kh-line); background: var(--kh-card); color: var(--kh-ink); min-block-size: 46px; font-family: inherit; } .kh-site input:focus, .kh-site select:focus, .kh-site textarea:focus { outline: 0; border-color: var(--kh-navy); box-shadow: 0 0 0 3px var(--kh-navy-soft); } /* ─────────── ۹. حلقه فوکوس ─────────── برای کاربر کیبورد. رنگش باید با پالت تازه بخواند. */ .kh-site :focus-visible { outline: 2.5px solid var(--kh-navy); outline-offset: 2px; border-radius: 4px; } /* ─────────── ۱۰. احترام به کاهش حرکت ─────────── */ @media (prefers-reduced-motion: reduce) { .kh-site *, .kh-site *::before, .kh-site *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }