/* ========================================================================== KH Premium Academy — Skins -------------------------------------------------------------------------- دو پوسته رنگی برای یک Design System. چرا فقط CSS؟ پوسته صرفاً مقدار توکن‌ها را عوض می‌کند. یعنی سوییچ کردن هیچ تغییری در قالب‌های Elementor، مارک‌آپ ویجت‌ها یا محتوا لازم ندارد — یک ویژگی روی عوض می‌شود و تمام. data-kh-skin="warm" → پوسته اول (کرم و طلایی — طرح اصلی) data-kh-skin="calm" → پوسته دوم (سفید خنثی، آرام، کم‌طلا) پوسته calm بر اساس سه ایراد واقعی پوسته اول ساخته شده است: ۱. پس‌زمینه کرم + دو گرادیان دائمی → چشم نقطه استراحت ندارد ۲. طلایی روی سطوح زیاد → خستگی بصری ۳. تضاد بالای کرم روشن و سرمه‌ای تیره در هیرو → شلوغی ========================================================================== */ /* ========================================================================== پوسته ۱: WARM — طرح اصلی فقط برای صراحت اینجا آمده؛ مقادیر همان kh-design-system.css است. ========================================================================== */ /* * نکته درباره انتخابگرها: * ویژگی data-kh-skin روی تگ نوشته می‌شود (نه body) تا پیش از * رندر هر محتوایی اعمال شود و رنگ‌ها پرش نداشته باشند. * بنابراین الگو این است: [data-kh-skin="x"] body.kh-site * که specificity آن (۰,۳,۱) از تعریف پایه در kh-design-system.css * (۰,۱,۱) بیشتر است و توکن‌ها را درست بازنویسی می‌کند. */ [data-kh-skin="warm"] body.kh-site { --kh-bg-soft: #FFFFFF; } /* ========================================================================== پوسته ۲: CALM — سفید خنثی و آرام ========================================================================== */ [data-kh-skin="calm"] body.kh-site { /* --- سطوح --- سفید خالص برای زمینه اصلی، و یک خاکستری سرد بسیار روشن برای سکشن‌های متناوب. جدا کردن بخش‌ها به‌جای گرادیان، با اختلاف پس‌زمینه و خط ظریف انجام می‌شود. */ --kh-bg: #FFFFFF; --kh-bg-soft: #F7F8FA; --kh-paper: #FFFFFF; --kh-field-bg: #F7F8FA; /* --- متن --- مقادیر خنثی و سرد؛ زردی قبلی حذف می‌شود. */ --kh-ink: #17202A; --kh-ink-soft: #384250; --kh-body-text: #4A5461; --kh-muted: #667085; --kh-nav-link: #4A5461; /* --- خطوط --- خط سرد و روشن‌تر: جداسازی بدون سنگینی. */ --kh-line: #E7EAF0; --kh-tag-bg: #F2F4F7; --kh-tag-text: #4A5461; /* --- سرمه‌ای --- به‌جای تقریباً سیاه، یک اسلیت عمیق. تضادش با سفید کمتر و چشم‌نوازتر است ولی همچنان کاملاً خواناست. */ --kh-navy: #1D2939; --kh-navy-2: #344054; --kh-navy-deep: #101828; /* --- اکسنت --- کهربای کنترل‌شده. تیره‌تر از طلایی قبلی تا روی سفید کنتراست کافی داشته باشد و کمتر «براق» دیده شود. */ --kh-gold: #B07D1A; --kh-gold-light: #D9A94B; --kh-gold-soft: #FBF6EC; --kh-success: #12805C; /* --- فوتر --- همان اسلیت عمیق، نه سیاه. */ --kh-footer-bg: #101828; --kh-footer-text: #98A2B3; --kh-footer-line: rgba(255, 255, 255, .08); --kh-footer-panel: rgba(255, 255, 255, .04); /* --- سایه --- بسیار سبک‌تر. جداسازی وظیفه border است نه سایه. */ --kh-shadow-xs: 0 1px 2px rgba(16, 24, 40, .04); --kh-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06); --kh-shadow-card: 0 8px 24px rgba(16, 24, 40, .07); --kh-shadow-nav: 0 4px 16px rgba(16, 24, 40, .06); --kh-shadow-deep: 0 16px 40px rgba(16, 24, 40, .10); /* --- گوشه --- کمی جمع‌تر؛ حس «اپلیکیشن» به‌جای «کارت تزئینی». */ --kh-r-card: 16px; --kh-r-panel: 20px; --kh-r-section: 24px; /* پس‌زمینه تخت — بدون هیچ گرادیانی */ background-image: none; background-color: var(--kh-bg); } /* ========================================================================== CALM — اصلاح کامپوننت‌ها جایی که فقط عوض کردن توکن کافی نیست. ========================================================================== */ /* --- هدر: شفاف‌تر و سبک‌تر --- */ [data-kh-skin="calm"] .kh-navbar { border-color: var(--kh-line); background: rgba(255, 255, 255, .82); box-shadow: none; } [data-kh-skin="calm"] .kh-header.is-stuck .kh-navbar { background: rgba(255, 255, 255, .94); box-shadow: var(--kh-shadow-sm); } [data-kh-skin="calm"] .kh-brand__mark { background: var(--kh-navy); color: #fff; } /* --- eyebrow دیگر طلایی نیست --- این بیشترین سطح طلایی صفحه بود. حالا خاکستری خنثی با یک خط کوتاه طلایی — اکسنت می‌ماند ولی غالب نیست. */ [data-kh-skin="calm"] .kh-eyebrow { color: var(--kh-muted); } [data-kh-skin="calm"] .kh-eyebrow::before { background: var(--kh-gold); inline-size: 14px; } [data-kh-skin="calm"] .kh-eyebrow--light { color: #98A2B3; } /* --- هیرو صفحات داخلی: تخت و آرام --- */ [data-kh-skin="calm"] .kh-hero-card { border-color: var(--kh-line); background: var(--kh-bg-soft); min-block-size: 0; padding: 44px; } /* بلوک گرافیکی تیره کنار هیرو، بزرگ‌ترین منبع تضاد بود. در این پوسته روشن و آرام می‌شود. */ [data-kh-skin="calm"] .kh-hero-art { background: linear-gradient(160deg, #EEF1F5, #E3E8EF); box-shadow: none; border: 1px solid var(--kh-line); } [data-kh-skin="calm"] .kh-hero-art::after { content: none; } [data-kh-skin="calm"] .kh-mini-dash { background: var(--kh-paper); border: 1px solid var(--kh-line); inset: 24px; } [data-kh-skin="calm"] .kh-mini-dash__top { background: var(--kh-navy); } /* --- هیرو صفحه اصلی --- */ [data-kh-skin="calm"] .kh-browser { border-color: var(--kh-line); box-shadow: var(--kh-shadow-deep); transform: none; } [data-kh-skin="calm"] .kh-screen { background: linear-gradient(160deg, #1D2939, #344054); } [data-kh-skin="calm"] .kh-display .kh-hl-outline { /* متن توخالی روی سفید ضعیف دیده می‌شود؛ در این پوسته توپر ولی کم‌رنگ‌تر است. */ color: var(--kh-muted); -webkit-text-stroke: 0; } [data-kh-skin="calm"] .kh-float { border-color: var(--kh-line); box-shadow: var(--kh-shadow-card); } /* --- کارت‌ها: مرز به‌جای سایه --- */ [data-kh-skin="calm"] .kh-card, [data-kh-skin="calm"] .kh-panel, [data-kh-skin="calm"] .kh-service, [data-kh-skin="calm"] .kh-path, [data-kh-skin="calm"] .kh-project, [data-kh-skin="calm"] .kh-tool-card, [data-kh-skin="calm"] .kh-account-panel { box-shadow: none; } [data-kh-skin="calm"] .kh-card:hover, [data-kh-skin="calm"] .kh-service:hover, [data-kh-skin="calm"] .kh-path:hover, [data-kh-skin="calm"] .kh-project:hover, [data-kh-skin="calm"] .kh-tool-card:hover { transform: translateY(-3px); border-color: #D0D5DD; box-shadow: var(--kh-shadow-card); } /* آیکن‌های گرد طلایی، سطح طلایی زیادی می‌ساختند */ [data-kh-skin="calm"] .kh-service__icon, [data-kh-skin="calm"] .kh-path__icon, [data-kh-skin="calm"] .kh-tool-card__icon, [data-kh-skin="calm"] .kh-case-block__icon, [data-kh-skin="calm"] .kh-contact-card__icon { background: var(--kh-bg-soft); color: var(--kh-navy); border: 1px solid var(--kh-line); } [data-kh-skin="calm"] .kh-service:hover .kh-service__icon, [data-kh-skin="calm"] .kh-path:hover .kh-path__icon, [data-kh-skin="calm"] .kh-tool-card:hover .kh-tool-card__icon { background: var(--kh-navy); border-color: var(--kh-navy); color: #fff; } /* --- تامبنیل‌های گرادیانی: آرام‌تر --- */ [data-kh-skin="calm"] .kh-thumb { background: linear-gradient(150deg, #1D2939, #344054); } [data-kh-skin="calm"] .kh-thumb--gold { background: linear-gradient(150deg, #3D3221, #6B5836); } [data-kh-skin="calm"] .kh-thumb--green { background: linear-gradient(150deg, #12261F, #234E3D); } [data-kh-skin="calm"] .kh-thumb__watermark { color: rgba(255, 255, 255, .05); } /* --- بنتو --- */ [data-kh-skin="calm"] .kh-bento__item--podcast { background: var(--kh-bg-soft); border-color: var(--kh-line); } [data-kh-skin="calm"] .kh-bento__item--video { background: linear-gradient(150deg, #1D2939, #344054); } /* --- CTA و سطوح تیره: اسلیت به‌جای سیاه، بدون گرادیان رادیال --- */ [data-kh-skin="calm"] .kh-cta, [data-kh-skin="calm"] .kh-banner--dark, [data-kh-skin="calm"] .kh-welcome, [data-kh-skin="calm"] .kh-testimonial, [data-kh-skin="calm"] .kh-service--featured { background: linear-gradient(150deg, #1D2939, #101828); } [data-kh-skin="calm"] .kh-podcast-feature, [data-kh-skin="calm"] .kh-audio-player, [data-kh-skin="calm"] .kh-auth__visual { background: linear-gradient(150deg, #1D2939, #101828); } /* --- نقل‌قول و جعبه هشدار: کمتر زرد --- */ [data-kh-skin="calm"] .kh-prose blockquote, [data-kh-skin="calm"] .kh-prose .kh-quote, [data-kh-skin="calm"] .kh-prose .wp-block-quote { background: var(--kh-bg-soft); border-inline-start-color: var(--kh-navy); color: var(--kh-body-text); } /* --- برچسب سطح/دسته --- */ [data-kh-skin="calm"] .kh-tag--gold { background: var(--kh-bg-soft); color: var(--kh-body-text); } /* --- واژه‌نامه: حرف الفبا خنثی --- */ [data-kh-skin="calm"] .kh-glossary__letter { background: var(--kh-bg-soft); color: var(--kh-navy); border: 1px solid var(--kh-line); } /* --- مسیر یادگیری: نوار وضعیت آرام --- */ [data-kh-skin="calm"] .kh-path-status { background: var(--kh-bg-soft); border-color: var(--kh-line); } /* --- ابزارهای سئو --- پنل‌ها و خروجی ابزارها هم باید با پوسته هماهنگ باشند، وگرنه صفحه ابزارها با بقیه سایت ناهماهنگ می‌ماند. */ [data-kh-skin="calm"] .kh-tool__panel, [data-kh-skin="calm"] .kh-tool__output, [data-kh-skin="calm"] .kh-serp, [data-kh-skin="calm"] .kh-chain__hop { background: var(--kh-paper); border-color: var(--kh-line); box-shadow: none; } [data-kh-skin="calm"] .kh-tool__panel--preview, [data-kh-skin="calm"] .kh-tool__presets, [data-kh-skin="calm"] .kh-tool__stats { background: var(--kh-bg-soft); border-color: var(--kh-line); } [data-kh-skin="calm"] .kh-tool__code { background: var(--kh-navy-deep); } /* نوار چگالی کلمه: خنثی به‌جای طلایی */ [data-kh-skin="calm"] .kh-density__bar > i, [data-kh-skin="calm"] .kh-tool__meter-bar > i { background: linear-gradient(90deg, var(--kh-navy-2), var(--kh-navy)); } [data-kh-skin="calm"] .kh-chain__num { background: var(--kh-bg-soft); border: 1px solid var(--kh-line); color: var(--kh-navy); } /* --- فرم‌ها --- */ [data-kh-skin="calm"] .kh-field input, [data-kh-skin="calm"] .kh-field textarea, [data-kh-skin="calm"] .kh-field select { background: var(--kh-paper); border-color: var(--kh-line); } [data-kh-skin="calm"] .kh-field input:focus, [data-kh-skin="calm"] .kh-field textarea:focus { border-color: var(--kh-navy); box-shadow: 0 0 0 3px rgba(29, 41, 57, .1); } /* --- دکمه‌ها: طلایی فقط برای اقدام اصلی --- */ [data-kh-skin="calm"] .kh-btn--gold { background: var(--kh-gold); box-shadow: none; } [data-kh-skin="calm"] .kh-btn--dark { box-shadow: none; } [data-kh-skin="calm"] .kh-btn:hover { transform: translateY(-1px); } /* --- فوکوس: هم‌رنگ اسلیت، نه طلایی --- */ [data-kh-skin="calm"] { --kh-focus: 0 0 0 3px rgba(29, 41, 57, .14); } [data-kh-skin="calm"] .kh-site :is(a, button, input, textarea, select, summary):focus-visible { outline-color: var(--kh-navy); } /* ========================================================================== پوسته ۳: FRESH — فیروزه‌ای و بنفش روی سفید -------------------------------------------------------------------------- سیستم دو‌اکسنتی: فیروزه‌ای برای اقدام و وضعیت، بنفش برای تأکید و سطوح گرافیکی. حس آموزشی، جوان و روشن — بدون گرمای زرد. ========================================================================== */ [data-kh-skin="fresh"] body.kh-site { --kh-bg: #FFFFFF; --kh-bg-soft: #F5F8FA; --kh-paper: #FFFFFF; --kh-field-bg: #F5F8FA; --kh-ink: #182430; --kh-ink-soft: #35424F; --kh-body-text: #4B5764; --kh-muted: #6B7785; --kh-nav-link: #4B5764; --kh-line: #E4EAEF; --kh-tag-bg: #EFF4F7; --kh-tag-text: #4B5764; /* «سرمه‌ای» در این پوسته یک زغالی متمایل به سبز است تا با فیروزه‌ای هم‌خانواده بماند. */ --kh-navy: #1F2C36; --kh-navy-2: #33444F; --kh-navy-deep: #16212A; /* اکسنت اول: فیروزه‌ای */ --kh-gold: #0FA88C; --kh-gold-light: #45C9B0; --kh-gold-soft: #E8F7F3; /* اکسنت دوم: بنفش */ --kh-accent-2: #6D4AE0; --kh-accent-2-soft: #F0EBFC; --kh-success: #0FA88C; --kh-footer-bg: #232A31; --kh-footer-text: #A5AEB8; --kh-footer-line: rgba(255, 255, 255, .08); --kh-footer-panel: rgba(255, 255, 255, .04); --kh-shadow-xs: 0 1px 2px rgba(24, 36, 48, .04); --kh-shadow-sm: 0 2px 6px rgba(24, 36, 48, .06); --kh-shadow-card: 0 10px 30px rgba(24, 36, 48, .08); --kh-shadow-nav: 0 6px 20px rgba(24, 36, 48, .07); --kh-shadow-deep: 0 20px 50px rgba(24, 36, 48, .12); --kh-r-card: 18px; --kh-r-panel: 22px; --kh-r-section: 28px; background-image: none; background-color: var(--kh-bg); } /* --- هدر --- */ [data-kh-skin="fresh"] .kh-navbar { border-color: var(--kh-line); background: rgba(255, 255, 255, .9); box-shadow: var(--kh-shadow-sm); } [data-kh-skin="fresh"] .kh-brand__mark { background: linear-gradient(140deg, var(--kh-gold), var(--kh-accent-2)); color: #fff; } [data-kh-skin="fresh"] .kh-topbar { background: var(--kh-gold); color: #fff; border-radius: 0; } [data-kh-skin="fresh"] .kh-topbar__inner { color: rgba(255, 255, 255, .92); } /* --- eyebrow: فیروزه‌ای ملایم --- */ [data-kh-skin="fresh"] .kh-eyebrow { color: var(--kh-gold); } /* --- هیرو: بلوک گرافیکی بنفش --- */ [data-kh-skin="fresh"] .kh-hero-card { background: var(--kh-bg-soft); border-color: var(--kh-line); } [data-kh-skin="fresh"] .kh-hero-art { background: radial-gradient(circle at 30% 25%, rgba(109, 74, 224, .38), transparent 40%), linear-gradient(150deg, #6D4AE0, #4B2FB0); } [data-kh-skin="fresh"] .kh-hero-art::after { color: rgba(255, 255, 255, .1); } [data-kh-skin="fresh"] .kh-screen { background: linear-gradient(150deg, #1F2C36, #33444F); } /* --- کارت‌ها --- */ [data-kh-skin="fresh"] .kh-card, [data-kh-skin="fresh"] .kh-service, [data-kh-skin="fresh"] .kh-path, [data-kh-skin="fresh"] .kh-project, [data-kh-skin="fresh"] .kh-tool-card { box-shadow: var(--kh-shadow-xs); } [data-kh-skin="fresh"] .kh-card:hover, [data-kh-skin="fresh"] .kh-service:hover, [data-kh-skin="fresh"] .kh-path:hover, [data-kh-skin="fresh"] .kh-tool-card:hover { border-color: var(--kh-gold-light); box-shadow: var(--kh-shadow-card); } /* آیکن‌ها: فیروزه‌ای، در hover بنفش */ [data-kh-skin="fresh"] .kh-service__icon, [data-kh-skin="fresh"] .kh-path__icon, [data-kh-skin="fresh"] .kh-tool-card__icon, [data-kh-skin="fresh"] .kh-case-block__icon, [data-kh-skin="fresh"] .kh-contact-card__icon { background: var(--kh-gold-soft); color: var(--kh-gold); } [data-kh-skin="fresh"] .kh-service:hover .kh-service__icon, [data-kh-skin="fresh"] .kh-path:hover .kh-path__icon, [data-kh-skin="fresh"] .kh-tool-card:hover .kh-tool-card__icon { background: var(--kh-accent-2-soft); color: var(--kh-accent-2); } /* --- تامبنیل‌ها --- */ [data-kh-skin="fresh"] .kh-thumb { background: linear-gradient(150deg, #1F2C36, #33444F); } [data-kh-skin="fresh"] .kh-thumb--gold { background: linear-gradient(150deg, #0C4C42, #14806D); } [data-kh-skin="fresh"] .kh-thumb--green { background: linear-gradient(150deg, #2E2350, #4B2FB0); } [data-kh-skin="fresh"] .kh-play { color: var(--kh-gold); } [data-kh-skin="fresh"] .kh-play--gold { background: var(--kh-gold); color: #fff; } /* --- سطوح تیره: زغالی، بدون گرادیان طلایی --- */ [data-kh-skin="fresh"] .kh-cta, [data-kh-skin="fresh"] .kh-banner--dark, [data-kh-skin="fresh"] .kh-welcome, [data-kh-skin="fresh"] .kh-testimonial, [data-kh-skin="fresh"] .kh-service--featured, [data-kh-skin="fresh"] .kh-podcast-feature, [data-kh-skin="fresh"] .kh-audio-player, [data-kh-skin="fresh"] .kh-auth__visual { background: radial-gradient(circle at 88% 12%, rgba(109, 74, 224, .28), transparent 40%), linear-gradient(150deg, #232A31, #16212A); } /* --- بنتو --- */ [data-kh-skin="fresh"] .kh-bento__item--video { background: radial-gradient(circle at 75% 20%, rgba(109, 74, 224, .3), transparent 45%), linear-gradient(150deg, #1F2C36, #33444F); } [data-kh-skin="fresh"] .kh-bento__item--podcast { background: linear-gradient(140deg, var(--kh-accent-2-soft), #FFF); border-color: var(--kh-line); } /* --- نقل‌قول --- */ [data-kh-skin="fresh"] .kh-prose blockquote, [data-kh-skin="fresh"] .kh-prose .kh-quote, [data-kh-skin="fresh"] .kh-prose .wp-block-quote { background: var(--kh-gold-soft); border-inline-start-color: var(--kh-gold); color: #17544A; } /* --- ابزارهای سئو --- */ [data-kh-skin="fresh"] .kh-density__bar > i, [data-kh-skin="fresh"] .kh-tool__meter-bar > i { background: linear-gradient(90deg, var(--kh-gold), var(--kh-accent-2)); } /* --- نوار پیشرفت و مسیر --- */ [data-kh-skin="fresh"] .kh-path__bar > i, [data-kh-skin="fresh"] .kh-skill__fill, [data-kh-skin="fresh"] .kh-bar > i, [data-kh-skin="fresh"] .kh-progress-top > i { background: linear-gradient(90deg, var(--kh-gold), var(--kh-accent-2)); } /* --- فوکوس --- */ [data-kh-skin="fresh"] { --kh-focus: 0 0 0 3px rgba(15, 168, 140, .25); } /* ========================================================================== هیروی مینیمال (هر دو پوسته) -------------------------------------------------------------------------- قاب، پس‌زمینه و سایه حذف می‌شوند. آنچه می‌ماند تایپوگرافی و فضای سفید است — همان چیزی که یک هیرو واقعاً به آن نیاز دارد. ========================================================================== */ .kh-site .kh-hero-card--minimal { padding: var(--kh-s-9) 0 var(--kh-s-8); border: 0; border-radius: 0; background: none; min-block-size: 0; gap: 56px; align-items: center; } /* یک خط ظریف پایین، به‌جای قاب دور تا دور */ .kh-site .kh-hero-card--minimal { border-block-end: 1px solid var(--kh-line); } .kh-site .kh-hero-card--minimal .kh-title-xl { font-size: clamp(30px, 3.8vw, 54px); /* بدون letter-spacing — خط فارسی متصل است */ } .kh-site .kh-hero-card--minimal .kh-hero-card__desc { font-size: var(--kh-fs-md); max-inline-size: 56ch; } /* گرافیک کناری در حالت مینیمال سبک‌تر و کوتاه‌تر */ .kh-site .kh-hero-card--minimal .kh-hero-art { min-block-size: 280px; border-radius: var(--kh-r-panel); box-shadow: none; } /* شاخص‌ها بدون خط جداکننده عمودی — فقط فاصله */ .kh-site .kh-hero-card--minimal .kh-hero-metrics { gap: var(--kh-s-8); margin-block-start: var(--kh-s-8); } .kh-site .kh-hero-card--minimal .kh-metric { padding-inline-start: 0; border-inline-start: 0; } @media (max-width: 768px) { .kh-site .kh-hero-card--minimal { padding: var(--kh-s-7) 0 var(--kh-s-6); gap: var(--kh-s-6); } .kh-site .kh-hero-card--minimal .kh-hero-metrics { gap: var(--kh-s-5); } } /* ========================================================================== سکشن‌های متناوب (هر دو پوسته) کلاسی که می‌توانید به کانتینر Elementor بدهید. ========================================================================== */ .kh-site .kh-section-alt { background: var(--kh-bg-soft); } [data-kh-skin="calm"] .kh-section-alt { border-block: 1px solid var(--kh-line); } /* ========================================================================== سوییچر پیش‌نمایش (فقط برای مدیر) ========================================================================== */ .kh-skin-switch { position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 99; display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--kh-line); border-radius: var(--kh-r-pill); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--kh-shadow-card); font-family: var(--kh-font); } .kh-skin-switch__label { padding-inline: var(--kh-s-3); font-size: var(--kh-fs-nano); color: var(--kh-muted); } .kh-skin-switch a { padding: 7px 14px; border-radius: var(--kh-r-pill); font-size: var(--kh-fs-micro); font-weight: var(--kh-fw-semi); color: var(--kh-nav-link); } .kh-skin-switch a.is-active { background: var(--kh-navy); color: #fff; } @media (max-width: 768px) { .kh-skin-switch { inset-block-end: calc(66px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 12px; } .kh-skin-switch__label { display: none; } } /* --- چیدمان‌های ویترین در پوسته شاداب --- دو اکسنت داریم، پس نقش‌ها را تقسیم می‌کنیم: فیروزه‌ای برای «اقدام» (کارت پیشنهاد، خدمات) و بنفش برای «آدم» (نظرات) تا دو بخش پشت‌سرهم یک‌رنگ نشوند. */ [data-kh-skin="fresh"] body.kh-site .kh-offer__icon, [data-kh-skin="fresh"] body.kh-site .kh-service-strip__icon { background: var(--kh-gold-soft); color: var(--kh-gold); } [data-kh-skin="fresh"] body.kh-site .kh-service-strip:hover { border-color: var(--kh-gold); } [data-kh-skin="fresh"] body.kh-site .kh-voice__quote { color: var(--kh-accent-2); opacity: .55; } [data-kh-skin="fresh"] body.kh-site .kh-voice__link { color: var(--kh-accent-2); } [data-kh-skin="fresh"] body.kh-site .kh-voice__play { background: var(--kh-accent-2); } [data-kh-skin="fresh"] body.kh-site .kh-split--blob::before { background: linear-gradient(135deg, var(--kh-gold-soft), var(--kh-accent-2-soft)); } /* در پوسته آرام لکه پس‌زمینه عمداً بسیار کم‌رنگ است — کل منطق این پوسته کاهش نویز بصری است. */ [data-kh-skin="calm"] body.kh-site .kh-split--blob::before { background: var(--kh-bg-soft); } /* ========================================================================== پوسته «مرجع» — الهام از دیسیپلین سایت‌های مرجع این حوزه -------------------------------------------------------------------------- نکته‌ای که از neilpatel.com و امثالش باید برداشت، پالت رنگ نیست؛ «خویشتن‌داری» است. آن سایت‌ها تقریباً بی‌تزیین‌اند: سفید خالص، متن نزدیک به سیاه، یک اکسنت، گوشه‌های کم‌گرد، بدون سایه، بدون گرادیان، بدون شکل تزیینی. اعتبارشان از تایپوگرافی و فضای سفید می‌آید. طراحی قبلی ما برعکس عمل می‌کرد: با تزیین جبران می‌کرد. هرچه بیشتر تزیین کنی، بیشتر شبیه قالب آماده می‌شود — دقیقاً همان چیزی که نمی‌خواستیم. اکسنت اینجا نارنجی است نه طلایی. طلایی روی سفید کم‌کنتراست است و باید بزرگ و پررنگ استفاده شود تا دیده شود؛ همین باعث شده بود در کل سایت پخش شود. نارنجی حتی در سطح کوچک هم دیده می‌شود، پس می‌شود کم استفاده‌اش کرد — و «کم استفاده کردن اکسنت» همان چیزی است که یک صفحه را حرفه‌ای نشان می‌دهد. ========================================================================== */ [data-kh-skin="editorial"] body.kh-site { --kh-bg: #FFFFFF; --kh-bg-soft: #F7F7F8; --kh-paper: #FFFFFF; /* «navy» اینجا سرمه‌ای نیست، تقریباً سیاه است */ --kh-navy: #16181D; --kh-navy-2: #2A2E37; --kh-navy-deep: #0E1014; --kh-ink: #16181D; --kh-ink-soft: #2B3038; --kh-body-text: #3F444D; --kh-muted: #6B7280; --kh-nav-link: #3F444D; --kh-line: #E5E7EB; /* اکسنت: #D9480F روی سفید نسبت کنتراست حدود ۵:۱ می‌دهد، پس برای متن هم مجاز است — نه فقط برای پس‌زمینه دکمه. */ --kh-gold: #D9480F; --kh-gold-light: #F76707; --kh-gold-soft: #FFF1E8; --kh-accent-2: #D9480F; --kh-accent-2-soft: #FFF1E8; --kh-tag-bg: #F3F4F6; --kh-tag-text: #4B5563; --kh-field-bg: #FFFFFF; --kh-footer-bg: #16181D; --kh-footer-text: #9CA3AF; --kh-footer-title: #FFFFFF; --kh-footer-line: rgba(255,255,255,.10); --kh-footer-panel: rgba(255,255,255,.05); /* گوشه‌ها کوچک‌تر از پیش‌فرض */ --kh-r-sm: 6px; --kh-r-md: 8px; --kh-r-lg: 10px; --kh-r-btn: 8px; --kh-r-card: 10px; --kh-r-panel: 12px; --kh-r-section: 14px; /* سایه‌ها تقریباً حذف می‌شوند؛ مرزبندی با خط انجام می‌شود نه با سایه. سایه، عمق جعلی است — خط، مرز واقعی. */ --kh-shadow-xs: none; --kh-shadow-sm: 0 1px 2px rgba(16,24,40,.05); --kh-shadow-card: 0 1px 3px rgba(16,24,40,.07); --kh-shadow-nav: 0 4px 16px rgba(16,24,40,.08); --kh-shadow-deep: 0 8px 28px rgba(16,24,40,.10); /* فضای سفید بیشتر از همه پوسته‌ها */ --kh-section-y: clamp(72px, 8vw, 128px); --kh-focus: 0 0 0 3px rgba(217, 72, 15, .3); /* گرادیان پس‌زمینه حذف */ background-image: none; } /* --- خویشتن‌داری در اجزا --- */ /* برچسب بالای تیتر: قبلاً طلاییِ درشت با یک خط تزیینی بود و در صفحه اصلی نُه بار تکرار می‌شد. اینجا خاکستری و بی‌خط است — نقشش «دسته‌بندی» است نه جلب توجه. */ [data-kh-skin="editorial"] body.kh-site .kh-eyebrow { color: var(--kh-muted); font-weight: var(--kh-fw-bold); } [data-kh-skin="editorial"] body.kh-site .kh-eyebrow::before { display: none; } /* کارت‌ها تخت می‌شوند: خط به‌جای سایه */ [data-kh-skin="editorial"] body.kh-site .kh-card, [data-kh-skin="editorial"] body.kh-site .kh-voice, [data-kh-skin="editorial"] body.kh-site .kh-offer, [data-kh-skin="editorial"] body.kh-site .kh-service, [data-kh-skin="editorial"] body.kh-site .kh-tool-card { box-shadow: none; border: 1px solid var(--kh-line); } [data-kh-skin="editorial"] body.kh-site .kh-card:hover, [data-kh-skin="editorial"] body.kh-site .kh-service:hover { border-color: var(--kh-navy); box-shadow: none; transform: none; } /* لکه‌های تزیینی حذف؛ جدا کردن بخش‌ها با پس‌زمینه ساده */ [data-kh-skin="editorial"] body.kh-site .kh-split--blob::before { border-radius: var(--kh-r-section); background: var(--kh-bg-soft); } /* واترمارک و شکل‌های پشت هیرو در این پوسته دیده نمی‌شوند */ [data-kh-skin="editorial"] body.kh-site .kh-hero-art::before, [data-kh-skin="editorial"] body.kh-site .kh-hero-art::after { opacity: .35; } /* متن مقاله بزرگ‌تر — این پوسته برای خواندن ساخته شده */ [data-kh-skin="editorial"] body.kh-site .kh-prose { font-size: var(--kh-fs-md); } /* ========================================================================== پوسته «دقت» — Precision -------------------------------------------------------------------------- طرح تصویب‌شده در ۱۶ اوت ۲۰۲۶. مرجع بصری: Linear و Vercel برای حالت تیره، Stripe و Raycast برای حالت روشن. سه چیز این پوسته را از بقیه جدا می‌کند: ۱. **خط مو به‌جای بوردر.** لبه‌ها با `inset 0 0 0 1px` ساخته می‌شوند نه `border`. بوردر خاکستری ۱px همان چیزی است که طرح را ارزان می‌کند؛ خط موی نیمه‌شفاف روی هر زمینه‌ای درست می‌نشیند و در حالت تیره خودش برعکس می‌شود. ۲. **سایه رنگی.** سایه‌ها ته‌رنگ جوهر (۲۰,۲۰,۴۰) دارند نه سیاه خالص، و سایه دکمه اصلی هم‌خانواده اکسنت است. سایه سیاه روی زمینه رنگی کثیف به نظر می‌رسد. ۳. **یک اکسنت.** `--kh-accent-2` هم به همان خانواده ایندیگو می‌رود. پوسته «شاداب» دو اکسنت داشت (فیروزه‌ای + بنفش) که پراکندگی می‌ساخت. ========================================================================== */ [data-kh-skin="precision"] body.kh-site { --kh-bg: #FCFCFD; --kh-bg-soft: #F7F7FA; --kh-paper: #FFFFFF; --kh-field-bg: #F7F7FA; --kh-ink: #0C0C14; --kh-ink-soft: #2A2A38; --kh-body-text: #42424F; --kh-muted: #8A8A9C; --kh-nav-link: #42424F; --kh-line: #E9E9F0; --kh-tag-bg: #F2F2F7; --kh-tag-text: #42424F; /* «سرمه‌ای» اینجا زغالی خنثی با ته‌رنگ آبی است تا با ایندیگو هم‌خانواده بماند و کنارش سبز یا قهوه‌ای نزند. */ --kh-navy: #0C0C14; --kh-navy-2: #2A2A38; --kh-navy-deep: #08080E; /* اکسنت واحد: ایندیگو */ --kh-gold: #4F46E5; --kh-gold-light: #6366F1; --kh-gold-soft: #EEF0FF; /* اکسنت دوم عمداً هم‌خانواده است، نه رنگ سوم */ --kh-accent-2: #4338CA; --kh-accent-2-soft: #E9EAFF; --kh-success: #059669; --kh-footer-bg: #0C0C14; --kh-footer-text: #9A9AAA; --kh-footer-line: rgba(255, 255, 255, .09); --kh-footer-panel: rgba(255, 255, 255, .04); /* سایه‌ها با ته‌رنگ جوهر، نه سیاه */ --kh-shadow-xs: 0 1px 2px rgba(20, 20, 40, .05); --kh-shadow-sm: 0 1px 2px rgba(20, 20, 40, .05), 0 2px 6px rgba(20, 20, 40, .04); --kh-shadow-card: 0 1px 2px rgba(20, 20, 40, .05), 0 14px 30px -22px rgba(20, 20, 40, .30); --kh-shadow-nav: 0 1px 2px rgba(20, 20, 40, .04), 0 10px 26px -18px rgba(20, 20, 40, .30); --kh-shadow-deep: 0 24px 60px -30px rgba(20, 20, 40, .40); /* شعاع‌ها یک پله جمع‌تر — این پوسته دقیق است نه نرم */ --kh-r-card: 16px; --kh-r-panel: 20px; --kh-r-section: 24px; /* خط مو به‌عنوان توکن، تا در همه کامپوننت‌ها یکسان بماند */ --kh-hair: inset 0 0 0 1px rgba(20, 20, 40, .09); --kh-hair-hi: inset 0 1px 0 rgba(255, 255, 255, 1); } /* --- حالت تیره این پوسته --------------------------------------------- ویژگی عمداً (0,4,1) است: kh-dark.css بعد از این فایل بارگذاری می‌شود و انتخابگرش (0,3,1) است. بدون این یک درجه اضافه، مقادیر تیرهٔ پیش‌فرض روی پوسته می‌نشیند و ایندیگو از بین می‌رود. */ [data-kh-skin="precision"][data-kh-theme="dark"] body.kh-site { --kh-bg: #0A0A0C; --kh-bg-soft: #101014; --kh-paper: #141418; --kh-field-bg: #101014; --kh-ink: #F4F4F6; --kh-ink-soft: #D6D6DE; --kh-body-text: #A0A0AE; --kh-muted: #71717F; --kh-nav-link: #C2C2CE; --kh-line: #23232B; --kh-tag-bg: #1B1B22; --kh-tag-text: #C2C2CE; --kh-navy: #F4F4F6; /* در تیره معنایش برعکس می‌شود وگرنه تیتر ناپدید است */ --kh-navy-2: #C2C2CE; --kh-navy-deep: #08080A; /* اکسنت یک پله روشن‌تر — رنگ اشباع روی زمینه تیره کنتراست نمی‌دهد */ --kh-gold: #818CF8; --kh-gold-light: #A5B4FC; --kh-gold-soft: rgba(129, 140, 248, .13); --kh-accent-2: #A5B4FC; --kh-accent-2-soft: rgba(165, 180, 252, .12); --kh-success: #34D399; --kh-footer-bg: #08080A; --kh-footer-text: #8A8A98; --kh-footer-line: rgba(255, 255, 255, .08); --kh-footer-panel: rgba(255, 255, 255, .035); --kh-shadow-xs: 0 1px 2px rgba(0, 0, 0, .5); --kh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --kh-shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px -24px rgba(0, 0, 0, .9); --kh-shadow-nav: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -20px rgba(0, 0, 0, .85); --kh-shadow-deep: 0 26px 64px -30px rgba(0, 0, 0, .95); --kh-hair: inset 0 0 0 1px rgba(255, 255, 255, .075); --kh-hair-hi: inset 0 1px 0 rgba(255, 255, 255, .07); } /* --- سطوح: بوردر برداشته می‌شود و جایش خط مو می‌نشیند ------------------ */ [data-kh-skin="precision"] body.kh-site .kh-card, [data-kh-skin="precision"] body.kh-site .kh-panel, [data-kh-skin="precision"] body.kh-site .kh-service, [data-kh-skin="precision"] body.kh-site .kh-path, [data-kh-skin="precision"] body.kh-site .kh-project, [data-kh-skin="precision"] body.kh-site .kh-tool-card, [data-kh-skin="precision"] body.kh-site .kh-offer, [data-kh-skin="precision"] body.kh-site .kh-voice { border-color: transparent; box-shadow: var(--kh-hair), var(--kh-hair-hi), var(--kh-shadow-xs); } [data-kh-skin="precision"] body.kh-site .kh-card:hover, [data-kh-skin="precision"] body.kh-site .kh-service:hover, [data-kh-skin="precision"] body.kh-site .kh-path:hover, [data-kh-skin="precision"] body.kh-site .kh-project:hover, [data-kh-skin="precision"] body.kh-site .kh-tool-card:hover { border-color: transparent; box-shadow: var(--kh-hair), var(--kh-hair-hi), var(--kh-shadow-card); } /* --- هدر شیشه‌ای --- */ [data-kh-skin="precision"] body.kh-site .kh-navbar { border-color: transparent; background: color-mix(in srgb, var(--kh-bg) 74%, transparent); box-shadow: var(--kh-hair), var(--kh-hair-hi), var(--kh-shadow-nav); } /* نشان برند: تخت و تک‌رنگ، نه گرادیان دورنگ */ [data-kh-skin="precision"] body.kh-site .kh-brand__mark { background: var(--kh-gold); color: #fff; } [data-kh-skin="precision"][data-kh-theme="dark"] body.kh-site .kh-brand__mark { color: #0B0B14; } /* --- دکمه اصلی: سایه هم‌رنگ خودش --- */ [data-kh-skin="precision"] body.kh-site .kh-btn--gold { box-shadow: 0 1px 2px rgba(79, 70, 229, .36), 0 12px 30px -10px rgba(79, 70, 229, .50); } [data-kh-skin="precision"][data-kh-theme="dark"] body.kh-site .kh-btn--gold { color: #0B0B14; box-shadow: 0 12px 34px -12px rgba(129, 140, 248, .55); } [data-kh-skin="precision"] body.kh-site .kh-btn--soft { border-color: transparent; box-shadow: var(--kh-hair), var(--kh-shadow-xs); } /* --- eyebrow --- */ [data-kh-skin="precision"] body.kh-site .kh-eyebrow { color: var(--kh-gold); } /* --- لکه پس‌زمینه: هاله رادیال ایندیگو به‌جای رنگ تخت --- */ [data-kh-skin="precision"] body.kh-site .kh-split--blob::before { background: radial-gradient(circle, color-mix(in srgb, var(--kh-gold) 16%, transparent), transparent 62%); } /* --- بلوک گرافیکی هیرو --- */ [data-kh-skin="precision"] body.kh-site .kh-hero-art { background: radial-gradient(circle at 32% 24%, rgba(99, 102, 241, .40), transparent 44%), linear-gradient(150deg, #312E81, #1E1B4B); } [data-kh-skin="precision"] body.kh-site .kh-screen { background: linear-gradient(150deg, #14141A, #23232E); } /* --- نوار پایین موبایل، هماهنگ با سطح شیشه‌ای هدر --- */ [data-kh-skin="precision"] body.kh-site .kh-bottomnav { background: color-mix(in srgb, var(--kh-bg) 88%, transparent); box-shadow: none; }