/* =========================================================================
Cliento Design System
-------------------------------------------------------------------------
یک لایه‌ی مستقل و بدون وابستگی خارجی روی کل سایت.
- RTL-first: از ویژگی‌های منطقی (inline-start/end) استفاده می‌کند.
- Light/Dark: با prefers-color-scheme و data-theme روی .
- بدون CDN، بدون فونت خارجی، بدون جاوااسکریپت اجباری.
========================================================================= */
/* ---------- 1. Fonts ---------------------------------------------------- */
@font-face {
font-family: 'IranYekan';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/2-IranYekan/iranyekanweblight.woff2') format('woff2'),
url('../fonts/2-IranYekan/iranyekanweblight.woff') format('woff');
}
@font-face {
font-family: 'IranYekan';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/2-IranYekan/iranyekanwebregular.woff2') format('woff2'),
url('../fonts/2-IranYekan/iranyekanwebregular.woff') format('woff');
}
@font-face {
font-family: 'IranYekan';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/2-IranYekan/iranyekanwebbold.woff2') format('woff2'),
url('../fonts/2-IranYekan/iranyekanwebbold.woff') format('woff');
}
/* ---------- 2. Tokens --------------------------------------------------- */
:root {
/* Brand - بر پایه‌ی بنفش اصلی برند #6A49F2 */
--c-brand-50: #F4F1FE;
--c-brand-100: #EDE9FE;
--c-brand-200: #DFDAF3;
--c-brand-300: #C3B7F9;
--c-brand-400: #9B84F6;
--c-brand-500: #6A49F2;
--c-brand-600: #5734D8;
--c-brand-700: #4526AE;
--c-brand-800: #32236F;
--c-brand-900: #221749;
/* Accent - نارنجی برند */
--c-accent-400: #FFB245;
--c-accent-500: #FC9400;
--c-accent-600: #DB7A00;
/* Semantic */
--c-success-500: #12A150;
--c-success-100: #DCF5E7;
--c-warn-500: #C97A00;
--c-warn-100: #FDF0DA;
--c-danger-500: #D42B44;
--c-danger-100: #FBE1E5;
/* Neutrals */
--c-ink-900: #14121F;
--c-ink-800: #221F33;
--c-ink-700: #3E3F66;
--c-ink-600: #56547A;
--c-ink-500: #74729A;
--c-ink-400: #9E9CBB;
--c-ink-300: #C7C5DA;
--c-ink-200: #E4E2EF;
--c-ink-100: #F1F0F7;
--c-ink-50: #F8F8FC;
/* Surfaces (light) */
--bg: #FFFFFF;
--bg-subtle: var(--c-ink-50);
--bg-muted: var(--c-brand-50);
--surface: #FFFFFF;
--surface-2: var(--c-ink-50);
--surface-inset: var(--c-ink-100);
--border: var(--c-ink-200);
--border-strong: var(--c-ink-300);
--text: var(--c-ink-900);
--text-muted: var(--c-ink-600);
--text-subtle: var(--c-ink-500);
--text-invert: #FFFFFF;
--brand: var(--c-brand-500);
--brand-hover: var(--c-brand-600);
--brand-soft: var(--c-brand-100);
--on-brand: #FFFFFF;
/* Glass */
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-border: rgba(255, 255, 255, 0.6);
/* Typography - سیال بین موبایل و دسکتاپ */
--font-sans: 'IranYekan', 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
--fs-xs: 0.78rem;
--fs-sm: 0.875rem;
--fs-base: 1rem;
--fs-md: clamp(1.05rem, 0.99rem + 0.30vw, 1.19rem);
--fs-lg: clamp(1.20rem, 1.09rem + 0.55vw, 1.50rem);
--fs-xl: clamp(1.45rem, 1.25rem + 1.00vw, 2.00rem);
--fs-2xl: clamp(1.80rem, 1.45rem + 1.75vw, 2.75rem);
--fs-3xl: clamp(2.15rem, 1.60rem + 2.75vw, 3.75rem);
/* پله‌ی «نمایشی» - فقط برای تیتر اصلی صفحه‌ی خانه.
یک پله بالاتر از 3xl که در بقیه‌ی صفحات بزرگ‌ترین است. اگر همان 3xl
می‌ماند، هیرو از یک سربرگ بخش قابل تشخیص نبود؛ و همین «همه‌چیز هم‌اندازه»
است که یک صفحه را شبیه قالب آماده می‌کند. */
--fs-display: clamp(2.4rem, 1.35rem + 4.6vw, 4.75rem);
--lh-tight: 1.25;
--lh-snug: 1.45;
--lh-base: 1.85;
/* متن‌های بزرگ (لید هیرو، توضیح سربرگ بخش) با ۱.۸۵ خیلی باز می‌شوند و بند
به‌جای یک بلوک، چند سطر جدا از هم دیده می‌شود. هرچه فونت بزرگ‌تر، فاصله‌ی
سطر کمتر. */
--lh-lede: 1.7;
/* Spacing */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
/* بخش‌های «پیوسته» - بخشی که ادامه‌ی بخش قبل است و نباید مثل یک فصل تازه
از آن فاصله بگیرد (مثل نوار آمار زیر هیرو). */
--section-y-sm: clamp(2rem, 1.25rem + 3vw, 3.5rem);
--container: 1200px;
--container-narrow: 820px;
/* قاب پهن - فقط برای ردیف کارت‌های پلن.
یک ردیف چهارتایی داخل ۱۲۰۰ پیکسل به کارت‌های ۲۷۰ پیکسلی می‌رسد و «قیمت +
چند سقف عددی» در آن عرض دو خطی می‌شکند. با ۱۳۶۰ همان ردیف به کارت ۳۱۰
پیکسلی می‌رسد، که عرضِ متعارف صفحه‌های تعرفه‌ی SaaS است. */
--container-wide: 1360px;
--gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
/* Radius */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-full: 999px;
/* Shadows - نرم و لایه‌ای.
هر پله یک سایه‌ی «تماس» تنگ دارد و یک سایه‌ی «ارتفاع» باز؛ همان چیزی که
یک سطح را روی سطح دیگر می‌نشاند به‌جای اینکه فقط تارش کند. رنگ سایه از
بنفشِ برند گرفته شده، نه از مشکی خالص. */
--sh-xs: 0 1px 2px rgba(34, 23, 73, 0.06);
--sh-sm: 0 2px 8px rgba(34, 23, 73, 0.06), 0 1px 2px rgba(34, 23, 73, 0.04);
--sh-md: 0 8px 24px rgba(34, 23, 73, 0.08), 0 2px 6px rgba(34, 23, 73, 0.04);
--sh-lg: 0 20px 48px rgba(34, 23, 73, 0.12), 0 4px 12px rgba(34, 23, 73, 0.06);
--sh-xl: 0 32px 64px rgba(34, 23, 73, 0.16), 0 8px 20px rgba(34, 23, 73, 0.07);
--sh-brand: 0 10px 24px rgba(106, 73, 242, 0.26), 0 2px 6px rgba(106, 73, 242, 0.18);
--sh-brand-lift: 0 18px 38px rgba(106, 73, 242, 0.34), 0 4px 10px rgba(106, 73, 242, 0.22);
/* خط نور بالای سطوح روشن. جزئیات کوچکی که لبه‌ی کارت را به‌جای یک خط خشک،
یک لبه‌ی نوردیده نشان می‌دهد. در تم تیره کنار گذاشته می‌شود. */
--edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.85);
/* Motion - یک ریتم واحد برای کل سایت */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 140ms;
--dur: 260ms;
--dur-slow: 520ms;
--dur-reveal: 620ms; /* ظاهرشدن هنگام اسکرول */
--stagger: 80ms; /* فاصله‌ی زمانی بین عناصر یک گروه */
--header-h: 76px;
}
/* Dark theme - هم با تنظیم سیستم و هم با data-theme دستی */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--bg: #0D0B16;
--bg-subtle: #12101E;
--bg-muted: #171429;
--surface: #181530;
--surface-2: #201C3B;
--surface-inset: #262147;
--border: #2E2952;
--border-strong: #3D3768;
--text: #F3F1FB;
--text-muted: #B9B4D6;
--text-subtle: #8F8AB4;
--text-invert: #14121F;
--brand: #9B84F6;
--brand-hover: #B09DF8;
--brand-soft: #262147;
--on-brand: #14121F;
--glass-bg: rgba(24, 21, 48, 0.72);
--glass-border: rgba(255, 255, 255, 0.08);
--sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--sh-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
--sh-md: 0 8px 24px rgba(0, 0, 0, 0.45);
--sh-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
--sh-xl: 0 32px 64px rgba(0, 0, 0, 0.62);
--sh-brand: 0 10px 24px rgba(106, 73, 242, 0.32);
--sh-brand-lift: 0 18px 38px rgba(106, 73, 242, 0.42);
/* روی سطح تیره، خط نورِ سفید مثل یک خط چرک دیده می‌شود؛ به‌جایش لبه فقط
کمی روشن‌تر از خود سطح می‌شود. */
--edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
}
:root[data-theme='dark'] {
--bg: #0D0B16;
--bg-subtle: #12101E;
--bg-muted: #171429;
--surface: #181530;
--surface-2: #201C3B;
--surface-inset: #262147;
--border: #2E2952;
--border-strong: #3D3768;
--text: #F3F1FB;
--text-muted: #B9B4D6;
--text-subtle: #8F8AB4;
--text-invert: #14121F;
--brand: #9B84F6;
--brand-hover: #B09DF8;
--brand-soft: #262147;
--on-brand: #14121F;
--glass-bg: rgba(24, 21, 48, 0.72);
--glass-border: rgba(255, 255, 255, 0.08);
--sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--sh-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
--sh-md: 0 8px 24px rgba(0, 0, 0, 0.45);
--sh-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
--sh-xl: 0 32px 64px rgba(0, 0, 0, 0.62);
--sh-brand: 0 10px 24px rgba(106, 73, 242, 0.32);
--sh-brand-lift: 0 18px 38px rgba(106, 73, 242, 0.42);
/* روی سطح تیره، خط نورِ سفید مثل یک خط چرک دیده می‌شود؛ به‌جایش لبه فقط
کمی روشن‌تر از خود سطح می‌شود. */
--edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* ---------- 3. Base ----------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
body.cl {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* فارسی خط متصل است: فاصله‌ی منفی بین حروف، اتصال‌ها را روی هم می‌آورد و در
اندازه‌های بزرگ به‌وضوح دیده می‌شود. پس letter-spacing دست‌نخورده می‌ماند و
فشردگیِ تیتر فقط از line-height می‌آید.
`text-wrap: balance` سطرهای تیتر را هم‌اندازه می‌کند و جلوی «یک واژه در سطر
آخر» را می‌گیرد - همان چیزی که بیش از هر چیز، تیتر را دست‌ساز نشان می‌دهد. */
.cl h1, .cl h2, .cl h3, .cl h4, .cl h5, .cl h6 {
margin: 0 0 var(--s-3);
line-height: var(--lh-tight);
font-weight: 700;
color: var(--text);
letter-spacing: normal;
text-wrap: balance;
}
.cl h1 { font-size: var(--fs-3xl); }
.cl h2 { font-size: var(--fs-2xl); }
.cl h3 { font-size: var(--fs-xl); }
.cl h4 { font-size: var(--fs-lg); }
/* تیترهای کوتاه‌تر (h3 و پایین‌تر) به فضای تنفس بیشتری نیاز دارند تا با متنِ
زیرشان یکی نشوند. */
.cl h3, .cl h4, .cl h5, .cl h6 { line-height: var(--lh-snug); }
.cl p { margin: 0 0 var(--s-4); color: var(--text-muted); text-wrap: pretty; }
.cl a { color: var(--brand); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.cl a:hover { color: var(--brand-hover); }
.cl img, .cl svg { max-width: 100%; height: auto; display: block; }
.cl ul, .cl ol { margin: 0; padding: 0; list-style: none; }
.cl strong, .cl b { font-weight: 700; color: var(--text); }
/* اعداد فارسی در متن جاری با tabular-nums بهتر می‌نشینند */
.cl .num { font-variant-numeric: tabular-nums; }
/* دسترس‌پذیری: حالت فوکوس واضح و یکسان */
.cl :focus-visible {
outline: 3px solid var(--brand);
outline-offset: 2px;
border-radius: var(--r-sm);
}
.skip-link {
position: absolute;
inset-inline-start: var(--s-4);
top: -100px;
z-index: 2000;
padding: var(--s-3) var(--s-5);
background: var(--brand);
color: var(--on-brand);
border-radius: 0 0 var(--r-md) var(--r-md);
font-weight: 700;
transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; color: var(--on-brand); }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ---------- 4. Layout --------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }
/* حاشیه‌ی کناری هم کمتر می‌شود: قاب پهن برای این است که کارت‌ها جا باز کنند،
نه اینکه همان کارت‌ها را با درز بیشتری نگه دارد. */
.container-wide {
max-width: var(--container-wide);
padding-inline: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}
.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: var(--section-y-sm); }
.section-subtle { background: var(--bg-subtle); }
.section-muted { background: var(--bg-muted); }
/* درز بین دو نوارِ هم‌رنگ.
وقتی یک بخشِ سفید و یک بخشِ خاکستری کنار هم می‌نشینند، خودِ تغییر رنگ مرز
را نشان می‌دهد. ولی دو بخشِ هم‌رنگِ پشت‌سرهم به یک بلوکِ بلندِ بی‌ریتم
تبدیل می‌شوند. یک خط مو در محل تماس، بی‌آنکه به چشم بیاید، مرز را
برمی‌گرداند. */
.section:not(.section-subtle):not(.section-muted) + .section:not(.section-subtle):not(.section-muted),
.section-subtle + .section-subtle {
border-block-start: 1px solid var(--border);
}
.stack > * + * { margin-block-start: var(--s-4); }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.flex { display: flex; gap: var(--s-4); }
.flex-center { align-items: center; }
.flex-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
@media (max-width: 900px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- 4b. Breadcrumbs ---------------------------------------------- */
/* مسیر راهنما بالای صفحات داخلی. ارتفاعش ثابت است و پیش از تیتر رندر می‌شود،
پس چیزی را جابه‌جا نمی‌کند (بدون CLS). */
.breadcrumbs { margin-block-end: var(--s-4); }
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--s-2); }
.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs [aria-current="page"] { color: var(--text); }
/* ناوبری دسته‌های وبلاگ */
.blog-cats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-2);
margin-block-start: var(--s-5);
}
.blog-cats a { text-decoration: none; }
.blog-cats a:hover { border-color: var(--brand); }
/* ---------- 5. Section headers ------------------------------------------ */
.section-head {
max-width: 720px;
margin-inline: auto;
margin-block-end: var(--s-7);
text-align: center;
}
.section-head.is-start { text-align: start; margin-inline: 0; }
.section-head p {
font-size: var(--fs-md);
line-height: var(--lh-lede);
/* بند توضیح از تیتر باریک‌تر است تا سطرها به هم نچسبند و بلوک متن یک شکل
مشخص داشته باشد، نه یک مستطیل پر. */
max-width: 58ch;
margin-inline: auto;
margin-block-end: 0;
}
.section-head.is-start p { margin-inline: 0; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 0.4rem 0.9rem;
margin-block-end: var(--s-4);
border-radius: var(--r-full);
background: var(--brand-soft);
color: var(--brand);
font-size: var(--fs-sm);
font-weight: 700;
border: 1px solid transparent;
}
:root[data-theme='dark'] .eyebrow { border-color: var(--border); }
.text-gradient {
background: linear-gradient(120deg, var(--c-brand-500), var(--c-brand-400) 45%, var(--c-accent-500));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
:root[data-theme='dark'] .text-gradient {
background: linear-gradient(120deg, #B09DF8, #9B84F6 45%, var(--c-accent-400));
-webkit-background-clip: text;
background-clip: text;
}
/* ---------- 6. Buttons -------------------------------------------------- */
.btn {
--btn-bg: var(--brand);
--btn-fg: var(--on-brand);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: 0.8rem 1.6rem;
border: 1px solid transparent;
border-radius: var(--r-full);
background: var(--btn-bg);
color: var(--btn-fg);
font-family: inherit;
font-size: var(--fs-base);
font-weight: 700;
line-height: 1.4;
cursor: pointer;
text-align: center;
transition: transform var(--dur-fast) var(--ease),
box-shadow var(--dur) var(--ease),
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(0); }
/* قاعده‌ی `.cl a` ویژگی (0,1,1) دارد و از `.btn-secondary` با ویژگی (0,1,0)
قوی‌تر است؛ به همین دلیل هر دکمه‌ای که با تگ ساخته می‌شد رنگ عمومی لینک
(بنفش برند) را می‌گرفت، نه رنگ خودش. روی پس‌زمینه‌ی سفید این یعنی نسبت
کنتراست ۲.۹۹ که از حد WCAG AA پایین‌تر است.
هر واریانت رنگ متن خود را در `--btn-fg` می‌گذارد و این قاعده با ویژگی
بالاتر آن را اعمال می‌کند، فارغ از اینکه دکمه باشد یا