/* ========================================================================== kh-v8 — هسته‌ی مشترک طراحی همه‌ی صفحه‌های سایت از همین یک فایل ارث می‌برند: توکن‌ها، تایپوگرافی، دکمه‌ها، هدر/فوتر، کارت‌ها، بنرها و اسلایدر عیناً از طرح v8 آمده‌اند و بقیه‌ی الگوها (آرشیو، تک‌محتوا، فرم، جدول، آکاردئون) با همان توکن‌ها ساخته شده‌اند تا زبان بصری یکی بماند. قواعد فارسی/RTL که در این پروژه گران تمام شده‌اند و اینجا رعایت شده: · letter-spacing روی متن فارسی حروف را از هم می‌گسلد — فقط روی لاتین. · line-height فارسی باید بازتر از لاتین باشد (~۱٫۸ تا ۲). · اعداد فارسی «عدد عربی» یونی‌کدند؛ دو عدد کنار هم را با flex+gap جدا کن، نه margin روی inline، وگرنه دوجهته به‌هم می‌چسباندشان. · ارقام جدول‌ها tabular-nums تا ستون‌ها نلرزند. · 100dvh به‌جای 100vh در موبایل. ========================================================================== */ /* ─────────────────────────── توکن‌ها ─────────────────────────── */ :root{ --navy:#1E3A8A; --navy-2:#2749A8; --navy-ink:#0F1F4D; --navy-soft:#EDF1FA; /* رنگ تأکید معنایی است، نه اسم رنگ — تعویض پالت فقط همین سه خط را عوض می‌کند و همه‌جای سایت دنبالش می‌آید. --gold* فقط نام مستعارند تا کدهای موجود نشکنند. */ /* پالت سایت: سرمه‌ای + بنفش. سرمه‌ای ستون هویت است و بنفش رنگ تأکید (دکمه‌ها، آیکون‌ها، نشان‌ها). #6D28D9 روی سفید کنتراست ۷٫۱ می‌دهد. */ --accent:#6D28D9; --accent-2:#5B21B6; --accent-soft:#F2EDFD; --accent-rgb:109,40,217; /* رنگ متنی که *روی* رنگ تأکید می‌نشیند. در حالت تیره رنگ تأکید روشن می‌شود، پس متن سفید رویش خوانا نیست و باید تیره شود. */ --on-accent:#FFFFFF; --on-red:#FFFFFF; --gold:var(--accent); --gold-2:var(--accent-2); --gold-soft:var(--accent-soft); --ink:#0F172A; --ink-2:#41506B; --muted:#8794AC; --bg:#F4F6FA; --card:#FFFFFF; --line:#E3E9F0; --ok:#0F7B4F; --red:#C6362C; --r:16px; --r-sm:11px; --pill:999px; --sh:0 14px 36px -20px rgba(15,31,77,.30); --sh-lg:0 26px 60px -30px rgba(15,31,77,.45); --wrap:1200px; --ease:cubic-bezier(.4,0,.2,1); } [data-theme="dark"]{ --navy:#7A9CFF; --navy-2:#93AEFF; --navy-ink:#080D18; --navy-soft:rgba(122,156,255,.11); /* بنفشِ کم‌اشباع‌تر: بنفش پررنگ روی زمینه‌ی تیره می‌درخشد و چشم را می‌زند */ --accent:#A78BFA; --accent-2:#BCA6FC; --accent-soft:rgba(167,139,250,.13); --accent-rgb:167,139,250; --on-accent:#0B1020; --on-red:#2A0A0A; --ink:#E9EEF8; --ink-2:#A6B2C8; --muted:#78859C; --bg:#080D18; --card:#111827; --line:#1F2A3E; --ok:#34D399; --red:#F87171; --sh:0 18px 44px -24px rgba(0,0,0,.95); --sh-lg:0 30px 66px -34px rgba(0,0,0,1); } /* ══════════════ پالت جایگزین: سرمه‌ای–برنزی ══════════════ فقط برای مقایسه در مرحله‌ی طراحی نگه داشته شده. با data-palette="bronze" روی فعال می‌شود. */ [data-palette="bronze"]{ --accent:#B45309; --accent-2:#96450A; --accent-soft:#FDF3E7; --accent-rgb:180,83,9; } [data-palette="bronze"][data-theme="dark"]{ --accent:#E8934A; --accent-2:#F0A868; --accent-soft:rgba(232,147,74,.12); --accent-rgb:232,147,74; } /* گرادیان‌های سطوح تیره — در هر دو حالت ثابت می‌مانند چون خودشان سطحِ تیره‌اند و متن سفید رویشان می‌نشیند. سبز عمداً در پالت نیست (کارفرما: سبز چشم را اذیت می‌کند). */ .g-navy {background:linear-gradient(150deg,#0F1F4D,#2749A8)} .g-steel {background:linear-gradient(150deg,#141C33,#33478C)} .g-slate {background:linear-gradient(150deg,#182238,#3B4D74)} .g-teal {background:linear-gradient(150deg,#0F2C48,#25607F)} /* دو سطح تیره‌ی هم‌خانواده با رنگ تأکید (جلد کارت، بنر، شماره‌ی مسیر) */ .g-accent {background:linear-gradient(150deg,#241243,#5B21B6)} .g-accent-2{background:linear-gradient(150deg,#2A1245,#6D28D9)} [data-palette="bronze"] .g-accent {background:linear-gradient(150deg,#3A2A12,#8A6428)} [data-palette="bronze"] .g-accent-2{background:linear-gradient(150deg,#3A2210,#96450A)} /* ─────────────────────────── پایه ─────────────────────────── */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink); font-family:"IRANSans",system-ui,sans-serif;font-size:16px;line-height:2; -webkit-font-smoothing:antialiased;overflow-x:clip; transition:background-color .4s ease,color .4s ease} h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:normal;line-height:1.6} p{margin:0;color:var(--ink-2)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} svg{flex:none} .wrap{width:min(var(--wrap),100% - 36px);margin-inline:auto} .sm{font-size:13.5px;line-height:1.9;color:var(--muted)} .num{font-variant-numeric:tabular-nums;direction:ltr;display:inline-block} .stack{display:flex;flex-direction:column} .center{text-align:center} /* فقط برای صفحه‌خوان — وقتی طرح جای تیتر بصری ندارد ولی صفحه به یک h1 معنادار نیاز دارد. `.screen-reader-text` نام قراردادی خودِ وردپرس است و هسته، ووکامرس و افزونه‌ها آن را همه‌جا چاپ می‌کنند: کلمه‌ی «الزامی» کنار فیلدهای فرم، برچسب جستجو، «صفحه‌ی» در صفحه‌بندی و…. تعریف‌نکردنش یعنی همه‌ی آن متن‌ها روی صفحه دیده می‌شوند — دقیقاً چیزی که در فرم ورود اتفاق افتاده بود. وردپرس این کلاس را خودش استایل نمی‌دهد؛ وظیفه‌ی قالب است. */ .vh, .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} /* استثنا: اگر خودِ عنصر فوکوس بگیرد باید دیده شود (لینک «پرش به محتوا» در برخی افزونه‌ها همین کلاس را دارد). */ .screen-reader-text:focus{ position:static;width:auto;height:auto;margin:0;overflow:visible; clip-path:none;white-space:normal; display:inline-block;padding:10px 18px; background:var(--card);color:var(--ink); border-radius:var(--r-sm);box-shadow:var(--sh-lg);z-index:100} /* پرش به محتوا — برای کاربر کیبورد */ .skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99; background:var(--navy);color:#fff;padding:10px 18px;border-radius:0 0 var(--r-sm) 0} .skip:focus{inset-inline-start:0} :focus-visible{outline:2.5px solid var(--navy);outline-offset:2px;border-radius:4px} /* ─────────────────────────── دکمه‌ها ─────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:var(--pill);border:0;cursor:pointer; font-family:inherit;font-size:14.5px;font-weight:700; transition:transform .18s var(--ease),background-color .18s var(--ease)} .btn:active{transform:scale(.98)} .btn--cta{background:var(--accent);color:var(--on-accent)} .btn--cta:hover{background:var(--accent-2)} .btn--navy{background:var(--navy);color:#fff} .btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)} .btn--line:hover{box-shadow:inset 0 0 0 1px var(--navy);color:var(--navy)} .btn--w{background:#fff;color:var(--navy-ink)} .btn--ghost-w{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34);color:#fff;background:transparent} .btn--sm{padding:9px 17px;font-size:13.5px;min-height:40px} .btn--block{width:100%} .btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none} /* ─────────────────────────── هدر ─────────────────────────── */ .top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:18px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px} .brand i{width:31px;height:31px;display:grid;place-items:center;border-radius:9px; background:var(--ink);color:var(--bg);font-size:11px;font-weight:800;font-style:normal;direction:ltr} .top nav{display:flex;gap:18px;font-size:14px;font-weight:600;color:var(--ink-2)} .top nav a:hover,.top nav a[aria-current="page"]{color:var(--navy)} .top nav a[aria-current="page"]{font-weight:800} .top__side{display:flex;gap:9px;align-items:center} .tgl{width:40px;height:40px;border-radius:var(--pill);border:1px solid var(--line);background:transparent; color:var(--ink-2);cursor:pointer;display:grid;place-items:center} .tgl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8} /* کلید پالت: نیم‌دایره‌ی پر، به رنگ تأکید فعلی — خودش پیش‌نمایش است */ .pal{color:var(--accent)} .pal[aria-pressed="true"]{border-color:var(--accent)} [data-theme="light"] .tgl .m{display:none} [data-theme="dark"] .tgl .s{display:none} /* ─────────────────────────── بخش‌ها ─────────────────────────── */ .sec{padding-block:clamp(32px,4.2vw,54px)} .sec--tight{padding-block:clamp(20px,2.4vw,30px)} .sec__h{display:flex;align-items:flex-end;justify-content:space-between;gap:18px; flex-wrap:wrap;margin-bottom:20px} .sec__h em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--muted); direction:ltr;display:block;margin-bottom:3px} /* لاتین است، پس letter-spacing مجاز */ .sec__h h2{font-size:clamp(20px,2.3vw,28px);line-height:1.55} .more{font-size:13.5px;font-weight:700;color:var(--navy);white-space:nowrap} /* ─────────────── کشوی منو و جستجو ─────────────── در موبایل منوی افقی پنهان می‌شود، پس بدون این کشو هیچ راهی برای رسیدن به بخش‌های سایت نمی‌ماند. */ .burger{display:none} .sheet{position:fixed;inset:0;z-index:80} .sheet[hidden]{display:none} .sheet__bd{position:absolute;inset:0;background:rgba(8,13,24,.55); backdrop-filter:blur(3px);animation:bdIn .2s ease} @keyframes bdIn{from{opacity:0}to{opacity:1}} .sheet__panel{position:absolute;inset-block:0;inset-inline-end:0; width:min(340px,86vw);background:var(--card); padding:18px;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;gap:16px; box-shadow:var(--sh-lg);animation:panIn .28s var(--ease)} @keyframes panIn{from{transform:translateX(-100%)}to{transform:none}} [dir="ltr"] .sheet__panel{animation-name:panInL} @keyframes panInL{from{transform:translateX(100%)}to{transform:none}} .sheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px} .sheet__search{display:flex;gap:8px} .sheet__search .inp{flex:1;min-width:0} .sheet__grp b{display:block;font-size:11.5px;font-weight:800;color:var(--muted); margin-bottom:7px} .sheet__grp ul{margin:0 0 4px;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px} .sheet__grp a{display:block;padding:11px 12px;border-radius:var(--r-sm); font-size:14.5px;font-weight:600;min-height:44px} .sheet__grp a:hover{background:var(--accent-soft);color:var(--accent)} /* جستجوی سریع از بالا می‌آید */ .sheet--top .sheet__panel{inset:0 0 auto 0;width:auto; border-radius:0 0 var(--r) var(--r);padding:22px;gap:14px; animation:panDown .26s var(--ease)} @keyframes panDown{from{transform:translateY(-100%)}to{transform:none}} .sheet__panel--search{max-width:none} .sheet__panel--search .inp{font-size:17px;min-height:54px} .sheet__hint{display:flex;align-items:center;gap:9px;flex-wrap:wrap} /* بازگشت به بالا */ .totop{position:fixed;inset-block-end:20px;inset-inline-start:20px;z-index:60; width:46px;height:46px;border-radius:var(--pill);border:0;cursor:pointer; background:var(--navy);color:#fff;display:grid;place-items:center; box-shadow:var(--sh);opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s} .totop.is-on{opacity:1;visibility:visible;transform:none} .totop svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2} .totop:hover{background:var(--navy-2)} /* وقتی لایه باز است، صفحه‌ی پشت نباید اسکرول شود */ body.is-locked{overflow:hidden} /* نوار پیشرفت مطالعه — فقط در صفحه‌های دارای متن بلند تزریق می‌شود */ .readbar{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:90; background:transparent;pointer-events:none} .readbar i{display:block;height:100%;width:0;background:var(--accent); transition:width .1s linear} /* دکمه‌ی کپی روی بلوک کد */ .prose pre{position:relative} .copy{position:absolute;inset-block-start:9px;inset-inline-end:9px; font-family:inherit;font-size:12px;font-weight:700;cursor:pointer; padding:6px 12px;min-height:34px;border-radius:var(--pill);border:0; background:rgba(255,255,255,.14);color:#DCE6FF; opacity:0;transition:opacity .18s linear,background-color .18s linear} .prose pre:hover .copy,.copy:focus-visible{opacity:1} .copy:hover{background:rgba(255,255,255,.26)} .copy.is-done{background:var(--ok);color:#fff} /* ─────────────────────── مسیر راهنما ─────────────────────── */ .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px; font-size:12.5px;color:var(--muted);padding-block:14px} .crumb a:hover{color:var(--navy)} .crumb span[aria-hidden]{opacity:.5} /* ─────────────────── سربرگ صفحه (آرشیوها) ─────────────────── */ .phero{position:relative;overflow:hidden;border-radius:var(--r);color:#fff; padding:clamp(24px,3.4vw,44px); /* تینت از رنگ تأکید می‌آید، پس با تعویض پالت خودش عوض می‌شود */ background:radial-gradient(ellipse 58% 70% at 86% 14%,rgba(var(--accent-rgb),.30),transparent 62%), linear-gradient(150deg,#0F1F4D,#1E3A8A)} .phero::before{content:"";position:absolute;inset-block-start:-44%;inset-inline-start:-8%; width:38%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.05)} .phero>*{position:relative} .phero em{font-style:normal;font-size:11.5px;font-weight:800;direction:ltr; color:rgba(255,255,255,.62);display:block;margin-bottom:6px} .phero h1{font-size:clamp(22px,2.9vw,34px);color:#fff} .phero p{color:rgba(255,255,255,.78);margin-top:9px;max-width:56ch;font-size:14.5px} .phero__stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:20px} .phero__stats b{display:block;font-size:22px;font-variant-numeric:tabular-nums} .phero__stats span{font-size:12.5px;color:rgba(255,255,255,.66)} /* ─────────────────────── شبکه‌ها ─────────────────────── */ .grid{display:grid;gap:15px} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} /* ستون اصلی + کناری، برای تک‌محتوا و ووکامرس */ .split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start} .split--r{grid-template-columns:320px minmax(0,1fr)} /* فرزند گرید به‌طور پیش‌فرض min-width:auto دارد، یعنی اجازه نمی‌دهد از عرض min-content محتوایش کوچک‌تر شود. یک جدول با min-width:520px یا یک بلوک کد بلند، ستون را از عرض صفحه بیرون می‌زند — حتی وقتی خودشان overflow:auto دارند. این خط جلوی آن را می‌گیرد. */ .split>*,.grid>*{min-width:0} /* کل ستون کناری یک واحد چسبان است، نه تک‌تک کارت‌هایش. اگر فقط فهرست مطالب چسبان باشد، کارت‌های بعدیِ همان ستون با صفحه بالا می‌آیند و چون در DOM بعد از آن‌اند، رویش می‌افتند و می‌پوشانندش. با چسباندن خودِ aside، محتوای ستون نسبت به هم ثابت می‌ماند و هم‌پوشانی اصلاً ممکن نیست. padding/margin قرینه فقط برای این است که بلندشدنِ کارت‌ها هنگام هاور از لبه‌ی ناحیه‌ی برش بیرون نزند. */ .split>aside{align-self:start;position:sticky;top:18px; max-height:calc(100dvh - 36px);overflow:auto;overscroll-behavior:contain; padding-block:8px;margin-block:-8px} /* ─────────────────────── کارت پایه ─────────────────────── */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column;position:relative; transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease)} a.card:hover,.card--hover:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:transparent} .card__b{padding:15px 17px 17px;display:flex;flex-direction:column;gap:8px;flex:1} .card__f{margin-top:auto;padding-top:12px;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .card h3{font-size:15.5px;line-height:1.75} .chip{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;color:var(--navy); background:var(--navy-soft);padding:3px 10px;border-radius:var(--pill)} .chip--gold{color:var(--gold);background:var(--gold-soft)} .go{font-size:12.5px;font-weight:700;color:var(--navy)} /* جلد تصویری کارت (بدون عکس واقعی: گرادیان + کد حرفی) */ .cover{display:grid;place-items:center;position:relative;overflow:hidden} .cover--16x9{aspect-ratio:16/9} .cover--16x10{aspect-ratio:16/10} .cover--1x1{aspect-ratio:1} .cover::after{content:"";position:absolute;inset:0; background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(255,255,255,.16),transparent 68%)} .cover b{position:relative;color:rgba(255,255,255,.30);font-size:26px;font-weight:800;direction:ltr; text-align:center;line-height:1.5;transition:transform .4s var(--ease)} .cover b.solid{color:#fff;font-size:15px} a.card:hover .cover b{transform:scale(1.06)} .cover__tag{position:absolute;inset-block-start:11px;inset-inline-end:11px;z-index:2; background:rgba(8,13,24,.7);color:#fff;font-size:12px;font-weight:700; padding:3px 10px;border-radius:var(--pill);backdrop-filter:blur(5px)} /* ─────────────────── کارت محصول (از v8) ─────────────────── */ .pcard__badge{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2; background:var(--red);color:var(--on-red);font-size:12px;font-weight:800;padding:4px 11px; border-radius:var(--pill)} .pcard__meta{display:flex;gap:12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .pcard__f{margin-top:auto;padding-top:13px;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:10px} /* قیمت‌ها flex‌اند نه inline: الگوریتم دوجهته ترتیب ارقام فارسی را عوض می‌کند و margin بین قیمت و قیمت خط‌خورده از بین می‌رفت. */ .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px} .price b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums} .price s{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .price u{text-decoration:none;font-size:11.5px;color:var(--muted);flex-basis:100%;line-height:1.4} .price--lg b{font-size:clamp(24px,2.8vw,32px)} .price--lg s{font-size:14px} /* ─────────────────── کارت پادکست/ویدیو ─────────────────── */ .play{position:absolute;inset:0;display:grid;place-items:center;z-index:2} .play i{width:52px;height:52px;border-radius:var(--pill);display:grid;place-items:center; background:rgba(255,255,255,.92);color:var(--navy-ink);font-style:normal; box-shadow:0 8px 24px -10px rgba(0,0,0,.6);transition:transform .24s var(--ease)} .play svg{width:17px;height:17px;fill:currentColor; margin-inline-start:3px} /* مثلث پخش کمی به مرکز نوری بیاید */ a.card:hover .play i{transform:scale(1.09)} .dur{position:absolute;inset-block-end:11px;inset-inline-start:11px;z-index:2; background:rgba(8,13,24,.78);color:#fff;font-size:11.5px;font-weight:700; padding:2px 9px;border-radius:var(--pill);font-variant-numeric:tabular-nums;direction:ltr} /* پادکست به‌صورت ردیفی */ .prow{display:flex;align-items:center;gap:14px;padding:13px 15px; background:var(--card);border:1px solid var(--line);border-radius:var(--r); transition:border-color .2s var(--ease),transform .2s var(--ease)} .prow:hover{border-color:var(--navy);transform:translateX(-3px)} .prow__n{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none; background:var(--navy-soft);color:var(--navy);font-weight:800;font-variant-numeric:tabular-nums} .prow__t{flex:1;min-width:0} .prow__t h3{font-size:14.5px} .prow__t span{font-size:12px;color:var(--muted)} /* ─────────────────── کارت ابزار / واژه‌نامه ─────────────────── */ .tool{display:flex;flex-direction:column;gap:9px;padding:19px; background:var(--card);border:1px solid var(--line);border-radius:var(--r); transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)} .tool:hover{border-color:transparent;transform:translateY(-4px);box-shadow:var(--sh)} .tool i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:var(--navy-soft);color:var(--navy);font-style:normal} .tool i svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9} .tool h3{font-size:15px} .tool p{font-size:13px;line-height:1.85} .tool span{margin-top:auto;padding-top:8px;font-size:12.5px;font-weight:700;color:var(--navy)} /* واژه‌نامه: فهرست الفبایی */ .gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:11px} .gterm{padding:14px 16px;background:var(--card);border:1px solid var(--line); border-radius:var(--r-sm);transition:border-color .2s var(--ease)} .gterm:hover{border-color:var(--navy)} .gterm b{display:block;font-size:14.5px} .gterm em{font-style:normal;font-size:11.5px;color:var(--muted);direction:ltr;display:block} /* ─────────────────── نمونه‌کار ─────────────────── */ .proj{position:relative;border-radius:var(--r);overflow:hidden;color:#fff; display:flex;flex-direction:column;justify-content:flex-end;min-height:240px;padding:20px; transition:transform .26s var(--ease),box-shadow .26s var(--ease)} .proj:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)} .proj::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(6,10,20,.82),rgba(6,10,20,.12) 62%)} .proj>*{position:relative;z-index:1} .proj h3{font-size:17px;color:#fff} .proj p{color:rgba(255,255,255,.74);font-size:13px;margin-top:4px} .proj__stats{display:flex;gap:18px;margin-top:13px;flex-wrap:wrap} .proj__stats b{display:block;font-size:16px;font-variant-numeric:tabular-nums;color:var(--gold-2)} [data-theme="dark"] .proj__stats b{color:var(--gold)} .proj__stats span{font-size:11.5px;color:rgba(255,255,255,.66)} .proj--wide{grid-column:span 2;min-height:300px} /* ─────────────────── خدمات ─────────────────── */ .svc{padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r); display:flex;flex-direction:column;gap:10px; transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)} .svc:hover{border-color:transparent;box-shadow:var(--sh);transform:translateY(-4px)} .svc__i{width:44px;height:44px;border-radius:13px;display:grid;place-items:center; background:var(--gold-soft);color:var(--gold)} .svc__i svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8} .svc h3{font-size:16.5px} .svc ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px} .svc li{font-size:13.5px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start;line-height:1.8} .svc li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold); margin-top:11px;flex:none} .svc__f{margin-top:auto;padding-top:14px;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:10px} /* ─────────────────── مسیر یادگیری ─────────────────── */ .path{display:flex;gap:16px;padding:18px;background:var(--card); border:1px solid var(--line);border-radius:var(--r)} .path__n{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center; font-size:18px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums} .path__b{flex:1;min-width:0} .path h3{font-size:16px} .path p{font-size:13.5px;margin-top:4px} .path__meta{display:flex;gap:14px;margin-top:10px;font-size:12px;color:var(--muted); font-variant-numeric:tabular-nums;flex-wrap:wrap} .bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:11px} .bar i{display:block;height:100%;border-radius:99px;background:var(--navy)} /* ─────────────────── بنرها (از v8) ─────────────────── */ .banner{position:relative;overflow:hidden;border-radius:var(--r);padding:clamp(22px,3vw,38px); display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center; background:radial-gradient(ellipse 55% 70% at 88% 20%,rgba(var(--accent-rgb),.32),transparent 62%), linear-gradient(150deg,#0F1F4D,#1E3A8A);color:#fff} .banner::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-start:-8%; width:38%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.05)} .banner>*{position:relative} .banner__off{display:inline-flex;align-items:baseline;gap:5px;background:var(--accent); color:var(--on-accent); padding:5px 13px;border-radius:var(--pill);font-size:12.5px;font-weight:800;margin-bottom:11px} .banner h3{font-size:clamp(19px,2.3vw,27px);line-height:1.55;color:#fff} .banner p{color:rgba(255,255,255,.76);margin-top:7px;max-width:48ch;font-size:14.5px} .banner__r{text-align:center} .banner__price{display:flex;align-items:baseline;gap:9px;justify-content:center;margin-bottom:11px} .banner__price b{font-size:clamp(24px,2.8vw,34px);font-weight:800;font-variant-numeric:tabular-nums;direction:ltr} .banner__price s{font-size:14px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;direction:ltr} .banner__t{font-size:11.5px;color:rgba(255,255,255,.6);margin-top:8px} .b2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .bmini{border-radius:var(--r);padding:24px;position:relative;overflow:hidden;color:#fff; display:flex;flex-direction:column;justify-content:space-between;min-height:150px} .bmini::after{content:"";position:absolute;inset-inline-end:-14%;inset-block-end:-42%; width:46%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.07)} .bmini>*{position:relative} .bmini h3{font-size:17px;line-height:1.65;color:#fff} .bmini p{color:rgba(255,255,255,.74);font-size:13.5px;margin-top:5px} .bmini span{font-size:13px;font-weight:700;margin-top:14px;display:inline-block} .bstrip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 26%,transparent); border-radius:var(--r);padding:14px 20px} .bstrip p{font-size:14px;color:var(--ink)} .bstrip b{color:var(--gold)} /* ─────────────────── اسلایدر (از v8) ─────────────────── اسکرول بومی به‌جای transform: در RTL آیتم‌های flex از راست به چپ داخل جعبه سرریز می‌نشینند و translateX درصدی رفتار قابل پیش‌بینی ندارد. اسکرول را مرورگر با هندسه‌ی واقعی حساب می‌کند و سوایپ لمسی هم رایگان به‌دست می‌آید. */ .slider{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg)} .slider__vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none} .slider__vp::-webkit-scrollbar{display:none} .slider__track{display:flex} .slide{min-width:100%;scroll-snap-align:center;position:relative; display:grid;grid-template-columns:1.05fr .95fr; gap:28px;align-items:center;padding:clamp(26px,3.6vw,48px);color:#fff} .s1{background:radial-gradient(ellipse 60% 60% at 82% 8%,rgba(122,156,255,.30),transparent 60%), linear-gradient(150deg,#0F1F4D,#2749A8)} .s2{background:radial-gradient(ellipse 60% 60% at 18% 12%,rgba(167,139,250,.30),transparent 60%), linear-gradient(150deg,#241243,#5B21B6)} [data-palette="bronze"] .s2{background:radial-gradient(ellipse 60% 60% at 18% 12%,rgba(232,147,74,.28),transparent 60%), linear-gradient(150deg,#3A2A12,#8A5A22)} .s3{background:radial-gradient(ellipse 60% 60% at 78% 84%,rgba(122,180,255,.24),transparent 60%), linear-gradient(150deg,#0F2C48,#25607F)} .slide__tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700; background:rgba(255,255,255,.16);padding:6px 14px;border-radius:var(--pill);margin-bottom:13px} .slide h3{font-size:clamp(20px,2.6vw,32px);line-height:1.55;color:#fff} .slide p{color:rgba(255,255,255,.78);margin-top:9px;max-width:44ch;font-size:15px} .slide__cta{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap} .slide__art{aspect-ratio:16/11;border-radius:var(--r-sm);background:rgba(255,255,255,.10); display:grid;place-items:center;overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .slide__art b{font-size:clamp(26px,3.4vw,44px);font-weight:800;color:rgba(255,255,255,.30);direction:ltr} .slide__art img{width:100%;height:100%;object-fit:cover;display:block} /* ── اسلاید با تصویر پس‌زمینه ────────────────────────────────────────── ترتیب لایه‌ها اینجا حساس است: `.slide>*{position:relative}` بعد از تعریف خود `.slide__bg` می‌آید و اگر هم‌ویژگی باشند، جایگاه absolute را خنثی می‌کند. برای همین انتخابگر پس‌زمینه عمداً فرزندی (0,2,0) نوشته شده تا از (0,1,0) قوی‌تر بماند. */ .slide>*{position:relative;z-index:1} .slide>.slide__bg{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden} .slide__bg img{width:100%;height:100%;object-fit:cover;display:block} /* پرده‌ی تیره. بدون آن، متن سفید روی تصویر روشن ناخوانا می‌شود. مقدارها طوری انتخاب شده که حتی روی تصویرِ کاملاً سفید هم نسبت کنتراست متن سفید ۶.۶ بماند (حداقل لازم ۴.۵ است). */ .slide__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,16,32,.68),rgba(11,16,32,.88))} /* بدون ستون تصویر، ارتفاع اسلاید تا اندازه‌ی متن جمع می‌شود و دکمه‌های ناوبری روی دکمه‌ی اسلاید می‌افتند — پس فضای نوار ناوبری رزرو می‌شود. */ .slide--bg{grid-template-columns:minmax(0,1fr); min-height:clamp(260px,32vw,400px); padding-block-end:clamp(78px,7vw,92px)} .slide--bg .slide__c{max-width:62ch} .slide--bg p{color:rgba(255,255,255,.88)} .slider__nav{position:absolute;inset-block-end:16px;inset-inline-start:20px; display:flex;align-items:center;gap:9px;z-index:2} .sbtn{width:40px;height:40px;border-radius:var(--pill);border:0;cursor:pointer; background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center; backdrop-filter:blur(6px);transition:background-color .2s var(--ease)} .sbtn:hover{background:rgba(255,255,255,.32)} .sbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2} /* نقطه‌ها باید ریز دیده شوند ولی هدف لمسی درشت داشته باشند: با content-box، عرض/ارتفاع همان نقطه‌ی دیداری است و padding فقط ناحیه‌ی کلیک را بزرگ می‌کند. نقطه‌ی دیداری در ::before کشیده می‌شود، نه روی خود دکمه. روش قبلی `background-clip:content-box` بود که رنگ را به مستطیل ۷×۷ می‌بُرید، ولی border-radius روی *جعبه‌ی بیرونی* اثر می‌گذارد و به آن مستطیل نمی‌رسد — یعنی نقطه‌ها در عمل مربع رندر می‌شدند. */ .dots{display:flex;gap:0;margin-inline-start:2px} .dots button{box-sizing:content-box;width:7px;height:7px;padding:16px 3px;border:0; background:none;cursor:pointer;display:block; transition:width .3s var(--ease)} .dots button::before{content:"";display:block;width:100%;height:100%; border-radius:99px;background:rgba(255,255,255,.34); transition:background-color .3s var(--ease)} .dots button[aria-current="true"]{width:22px} .dots button[aria-current="true"]::before{background:#fff} .dots button:focus-visible{outline:2px solid #fff;outline-offset:-14px;border-radius:99px} /* ─────────────────── متن مقاله ─────────────────── طول خط مهم‌ترین عامل خوانایی است. ستون این صفحه ۸۵۴ پیکسل بود که یعنی ۱۲۵ کاراکتر در هر خط — نزدیک دو برابر حد خوانا. چشم موقع برگشتن به ابتدای خط بعد، خط را گم می‌کند. ۶۸ کاراکتر (~۶۲۰ پیکسل) نقطه‌ی راحتی برای متن فارسی است. عناصر عریض (کد، جدول، تصویر) از این محدودیت مستثنا می‌شوند. */ .prose{font-size:17px;line-height:2.05;color:var(--ink-2)} /* ─────────── کارت خواندن ─────────── متن به‌جای شناور بودن روی زمینه‌ی صفحه، روی یک سطح کارتی می‌نشیند. چشم لبه‌ی کارت را به‌عنوان قاب می‌گیرد و متن جمع‌تر دیده می‌شود. با این کار طول خط از ۱۲۵ به ~۱۰۰ کاراکتر می‌رسد که هنوز از حد ایده‌آل بیشتر است؛ برای همین line-height را بازتر کرده‌ام — خط بلند به فاصله‌ی سطر بیشتری نیاز دارد وگرنه چشم موقع برگشت خط را گم می‌کند. */ .readcard{background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:clamp(20px,3vw,40px)} .readcard .prose{line-height:2.2} .readcard > *:first-child{margin-top:0} /* عناصر عریض تا لبه‌ی کارت می‌روند، بدون حاشیه‌ی اضافه */ .readcard .prose > pre,.readcard .prose > .tbl-wrap{ margin-inline:calc(clamp(20px,3vw,40px) * -1); border-radius:0} @media (max-width:560px){ .readcard .prose > pre,.readcard .prose > .tbl-wrap{margin-inline:-20px} } .prose>*+*{margin-top:18px} .prose h2{font-size:21px;color:var(--ink);margin-top:34px;line-height:1.7} .prose h3{font-size:17.5px;color:var(--ink);margin-top:26px;line-height:1.7} /* پرش لنگری نباید تیتر را بچسباند به لبه‌ی بالای پنجره */ .prose h2[id],.prose h3[id],section[id]{scroll-margin-top:24px} .prose ul,.prose ol{padding-inline-start:20px;display:flex;flex-direction:column;gap:9px} .prose li{line-height:1.95} .prose strong{color:var(--ink);font-weight:800} .prose blockquote{margin:0;padding:15px 19px;border-inline-start:3px solid var(--gold); background:var(--gold-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink)} .prose code{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;direction:ltr; background:var(--navy-soft);color:var(--navy);padding:2px 7px;border-radius:6px} .prose pre{background:#0F1F4D;color:#DCE6FF;padding:16px 18px;border-radius:var(--r-sm); overflow-x:auto;direction:ltr;font-size:13.5px;line-height:1.8} .prose pre code{background:none;color:inherit;padding:0} .prose figure{margin:0} .prose figcaption{font-size:12.5px;color:var(--muted);margin-top:7px;text-align:center} .prose a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:4px} /* ═══════════ لایه‌ی خوانایی متن بلند ═══════════ */ /* بند اول: کمی درشت‌تر، تا ورود به متن نرم باشد */ .prose__lead{font-size:19px;line-height:1.9;color:var(--ink);font-weight:500} /* خلاصه‌ی بالای مطلب — برای کسی که وقت خواندن کامل ندارد */ .takeaway{background:var(--navy-soft);border:1px solid color-mix(in srgb,var(--navy) 22%,transparent); border-radius:var(--r);padding:18px 20px} .takeaway b{display:block;font-size:13px;color:var(--navy);margin-bottom:10px} .takeaway ul{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:8px} .takeaway li{font-size:14.5px;line-height:1.85;color:var(--ink)} /* جعبه‌های کنارِ متن: نکته، هشدار، مثال */ .callout{display:flex;gap:13px;padding:16px 18px;border-radius:var(--r); border-inline-start:3px solid var(--navy);background:var(--navy-soft); font-size:14.5px;line-height:1.9;color:var(--ink)} .callout__i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:var(--navy);color:#fff;font-size:14px;font-weight:800;font-style:normal} .callout b{display:block;margin-bottom:3px} .callout--warn{border-inline-start-color:var(--red); background:color-mix(in srgb,var(--red) 8%,transparent)} .callout--warn .callout__i{background:var(--red)} .callout--tip{border-inline-start-color:var(--accent);background:var(--accent-soft)} .callout--tip .callout__i{background:var(--accent);color:var(--on-accent)} /* نقل‌قول برجسته — برای جمله‌ای که می‌خواهی یادش بماند */ .pull{margin:0;padding:22px 26px;border-radius:var(--r);background:var(--card); border:1px solid var(--line);position:relative} .pull p{font-size:19px;line-height:1.85;color:var(--ink);font-weight:700} .pull cite{display:block;margin-top:10px;font-style:normal;font-size:13px;color:var(--muted)} .pull::before{content:"";position:absolute;inset-inline-start:0;inset-block:18px; width:3px;border-radius:3px;background:var(--accent)} /* مراحل شماره‌دار */ .steps-n{counter-reset:s;display:flex;flex-direction:column;gap:14px; margin:0;padding:0;list-style:none} .steps-n li{counter-increment:s;display:flex;gap:14px;align-items:flex-start} .steps-n li::before{content:counter(s);flex:none;width:30px;height:30px;border-radius:50%; display:grid;place-items:center;background:var(--accent);color:var(--on-accent); font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:4px} .steps-n b{display:block;color:var(--ink);font-size:15.5px} .steps-n p{margin-top:3px;font-size:14.5px;line-height:1.85} /* بکن / نکن — مقایسه‌ی دوستونی */ .dodont{display:grid;grid-template-columns:1fr 1fr;gap:14px} .dodont > div{padding:17px 19px;border-radius:var(--r);border:1px solid var(--line); background:var(--card)} .dodont b{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:11px} .dodont ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .dodont li{font-size:14px;line-height:1.8;color:var(--ink-2); display:flex;gap:8px;align-items:flex-start} .dodont li::before{content:"—";color:var(--muted);flex:none} .dodont__do{border-color:color-mix(in srgb,var(--ok) 45%,transparent)} .dodont__do b{color:var(--ok)} .dodont__no{border-color:color-mix(in srgb,var(--red) 40%,transparent)} .dodont__no b{color:var(--red)} /* لینک لنگر روی تیترها — برای اشتراک‌گذاری بخش مشخص */ .prose h2,.prose h3{position:relative} .prose .anchor{position:absolute;inset-inline-end:100%;padding-inline-end:8px; opacity:0;color:var(--muted);font-weight:400;text-decoration:none; transition:opacity .18s linear} .prose h2:hover .anchor,.prose h3:hover .anchor,.prose .anchor:focus-visible{opacity:1} /* پانویس و منابع */ .fnotes{margin-top:34px;padding-top:18px;border-top:1px solid var(--line)} .fnotes b{display:block;font-size:13px;margin-bottom:11px} .fnotes ol{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:9px; font-size:13.5px;line-height:1.85;color:var(--ink-2)} /* بازخورد پایان مطلب */ .helpful{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:16px 19px;border-radius:var(--r);background:var(--card); border:1px solid var(--line);margin-top:26px} .helpful b{font-size:14px} .helpful button{font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer; padding:9px 18px;min-height:40px;border-radius:var(--pill); border:1px solid var(--line);background:transparent;color:var(--ink-2); transition:border-color .18s var(--ease),color .18s var(--ease)} .helpful button:hover{border-color:var(--accent);color:var(--accent)} .helpful.is-done button{display:none} .helpful__ok{display:none;font-size:14px;color:var(--ok);font-weight:700} .helpful.is-done .helpful__ok{display:block} @media (max-width:700px){ .dodont{grid-template-columns:1fr} } /* چسبندگی را ستون کناری فراهم می‌کند، نه خود فهرست */ .toc{padding:17px 19px;background:var(--card); border:1px solid var(--line);border-radius:var(--r)} .toc b{display:block;font-size:13px;margin-bottom:11px} .toc ol{margin:0;padding-inline-start:17px;display:flex;flex-direction:column;gap:8px; font-size:13.5px;color:var(--ink-2)} .toc a:hover,.toc a[aria-current="true"]{color:var(--navy);font-weight:700} /* جعبه‌ی نویسنده / اشتراک */ .abox{display:flex;gap:14px;align-items:center;padding:17px;background:var(--card); border:1px solid var(--line);border-radius:var(--r)} .abox__av{width:52px;height:52px;border-radius:var(--pill);flex:none;display:grid;place-items:center; background:var(--navy);color:#fff;font-weight:800;direction:ltr} /* ─────────────────── فرم‌ها ─────────────────── */ .field{display:flex;flex-direction:column;gap:7px} .field>label{font-size:13.5px;font-weight:700;color:var(--ink)} .field .hint{font-size:12px;color:var(--muted);line-height:1.7} .field .err{font-size:12.5px;color:var(--red);font-weight:700} .inp{width:100%;font-family:inherit;font-size:15px;color:var(--ink); background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); padding:12px 14px;min-height:46px; /* ≥۴۴ برای لمس */ transition:border-color .18s var(--ease),box-shadow .18s var(--ease)} .inp:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)} .inp[aria-invalid="true"]{border-color:var(--red)} textarea.inp{min-height:130px;line-height:1.9;resize:vertical} .req{color:var(--red)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px} .form-grid .full{grid-column:1/-1} .check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.8} .check input{width:19px;height:19px;margin-top:6px;flex:none;accent-color:var(--navy)} /* ─────────────────── جدول‌ها (سبد/سفارش) ─────────────────── */ .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)} .tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px} .tbl th,.tbl td{padding:14px 16px;text-align:start;border-bottom:1px solid var(--line)} .tbl th{font-size:12.5px;font-weight:800;color:var(--muted);background:var(--bg)} .tbl tr:last-child td{border-bottom:0} .tbl .n{font-variant-numeric:tabular-nums;white-space:nowrap} .tbl__item{display:flex;align-items:center;gap:12px} .tbl__thumb{width:52px;height:40px;border-radius:9px;flex:none} /* جمع فاکتور */ .totals{padding:19px;background:var(--card);border:1px solid var(--line);border-radius:var(--r); display:flex;flex-direction:column;gap:11px} .totals__row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2)} .totals__row b{font-variant-numeric:tabular-nums;color:var(--ink)} .totals__row--big{padding-top:11px;border-top:1px solid var(--line);font-size:16px;color:var(--ink);font-weight:800} .totals__row--big b{font-size:19px} /* مرحله‌شمار پرداخت */ .steps{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px} .steps i{width:26px;height:26px;border-radius:var(--pill);display:grid;place-items:center; background:var(--line);color:var(--muted);font-style:normal;font-weight:800;font-size:12.5px; font-variant-numeric:tabular-nums} .steps .on i{background:var(--navy);color:#fff} .steps .on{color:var(--ink);font-weight:700} .steps span{color:var(--muted)} /* ─────────────────── خروجی ابزارها ─────────────────── کد تولیدشده همیشه چپ‌به‌راست است، حتی وسط صفحه‌ی فارسی. */ .out{position:relative;background:#0F1F4D;color:#DCE6FF;border-radius:var(--r-sm); padding:16px 18px;direction:ltr;text-align:left;font-size:13.5px;line-height:1.85; font-family:ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap;word-break:break-word;overflow-x:auto;min-height:64px} [data-theme="dark"] .out{background:#0A1020;border:1px solid var(--line)} .out__copy{position:absolute;inset-block-start:9px;inset-inline-end:9px; font-family:inherit;font-size:12px;font-weight:700;cursor:pointer; padding:6px 12px;min-height:34px;border-radius:var(--pill);border:0; background:rgba(255,255,255,.14);color:#DCE6FF;transition:background-color .18s linear} .out__copy:hover{background:rgba(255,255,255,.26)} .out__copy.is-done{background:var(--ok);color:#fff} /* ردیف نتیجه — برای چگالی کلمات و بررسی ریدایرکت */ .rows{display:flex;flex-direction:column;gap:7px} .row{display:flex;align-items:center;gap:12px;padding:11px 14px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)} .row__k{flex:1;min-width:0;font-weight:700;font-size:14px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row__n{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);flex:none} .row__bar{flex:0 0 92px;height:6px;border-radius:99px;background:var(--line);overflow:hidden} .row__bar i{display:block;height:100%;background:var(--accent);border-radius:99px} .row--bad{border-color:var(--red)} .row--warn{border-color:var(--accent)} .row--ok{border-color:color-mix(in srgb,var(--ok) 55%,transparent)} .tag{font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:var(--pill);flex:none} .tag--bad{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)} .tag--warn{background:var(--accent-soft);color:var(--accent)} .tag--ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)} /* آمار کوچک بالای نتیجه */ .stats{display:flex;gap:22px;flex-wrap:wrap;padding:14px 16px; background:var(--card);border:1px solid var(--line);border-radius:var(--r)} .stats b{display:block;font-size:20px;font-variant-numeric:tabular-nums} .stats span{font-size:12.5px;color:var(--muted)} /* ─────────────────── تب‌ها ─────────────────── کنترل قطعه‌ای: دو حالت که کاربر بینشان جابه‌جا می‌شود. */ .tabs__list{display:flex;gap:5px;padding:5px;background:var(--bg); border:1px solid var(--line);border-radius:var(--pill)} .tabs__t{flex:1;min-height:44px;padding:0 16px;border:0;cursor:pointer; background:transparent;border-radius:var(--pill); font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink-2); transition:background-color .2s var(--ease),color .2s var(--ease), box-shadow .2s var(--ease)} .tabs__t:hover{color:var(--ink)} .tabs__t[aria-selected="true"]{background:var(--card);color:var(--accent); box-shadow:0 2px 10px -4px rgba(15,31,77,.28)} [data-theme="dark"] .tabs__t[aria-selected="true"]{box-shadow:0 2px 12px -4px rgba(0,0,0,.8)} .tabs__p{padding-top:22px} .tabs__p[hidden]{display:none} /* ─────────────────── چیدمان صفحه‌ی ورود ─────────────────── با .split معمولی، کارت فرم باریک می‌ماند و کنارش یک ستون خالی بزرگ می‌افتد. اینجا دو ستون هم‌ارتفاع و متمرکز داریم تا فضای خالی نماند و ستون کناری هم به‌جای چند کارت جدا، یک سطح یکپارچه باشد. */ .auth{display:grid;grid-template-columns:1fr .84fr;gap:20px;align-items:stretch; max-width:980px;margin-inline:auto} .auth__side{position:relative;overflow:hidden;border-radius:var(--r);color:#fff; padding:clamp(22px,3vw,32px);display:flex;flex-direction:column; justify-content:space-between;gap:22px} .auth__side::after{content:"";position:absolute;inset-inline-end:-18%;inset-block-end:-30%; width:56%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.07)} .auth__side>*{position:relative} .auth__side em{font-style:normal;font-size:11.5px;font-weight:800;direction:ltr; color:rgba(255,255,255,.62);display:block;margin-bottom:7px} .auth__side h2{font-size:clamp(18px,2.1vw,23px);color:#fff;line-height:1.6} .auth__list{margin:20px 0 0;padding:0;list-style:none; display:flex;flex-direction:column;gap:14px} .auth__list li{display:flex;gap:10px;align-items:flex-start; font-size:14px;color:rgba(255,255,255,.88);line-height:1.8} .auth__list svg{width:18px;height:18px;flex:none;margin-top:6px; stroke:currentColor;fill:none;stroke-width:2.4} .auth__note{font-size:12.5px;color:rgba(255,255,255,.68);line-height:1.85; padding-top:18px;border-top:1px solid rgba(255,255,255,.16)} .auth__note a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px} @media (max-width:860px){ .auth{grid-template-columns:1fr;max-width:520px} /* در موبایل مزایا بعد از فرم می‌آیند، نه قبلش */ .auth__side{order:2} } /* دکمه‌ای که مثل لینک دیده می‌شود — برای جابه‌جایی بین تب‌ها از داخل متن. عمداً button است نه a، چون به جایی ناوبری نمی‌کند. */ .linklike{border:0;background:none;padding:0;cursor:pointer;font-family:inherit; font-size:inherit;font-weight:700;color:var(--accent);text-decoration:underline; text-underline-offset:4px} .linklike:hover{color:var(--accent-2)} /* تیتر خوش‌آمد بالای هر پنل */ .hello{margin-bottom:18px} .hello h2{font-size:clamp(19px,2.3vw,24px);line-height:1.6} .hello p{margin-top:7px;font-size:14.5px;max-width:46ch} /* ─────────────────── آکاردئون (سوالات) ─────────────────── */ .acc{display:flex;flex-direction:column;gap:10px} .acc details{background:var(--card);border:1px solid var(--line);border-radius:var(--r); overflow:hidden} .acc summary{cursor:pointer;padding:15px 18px;font-weight:700;font-size:14.5px; display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"";width:9px;height:9px;flex:none; border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted); transform:rotate(45deg);transition:transform .22s var(--ease)} .acc details[open] summary::after{transform:rotate(-135deg)} .acc details[open] summary{color:var(--navy)} .acc__b{padding:0 18px 17px;font-size:14px;line-height:1.95;color:var(--ink-2)} /* ─────────────────── فیلتر و صفحه‌بندی ─────────────────── */ .filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px} .fchip{font-size:13px;font-weight:700;padding:8px 15px;border-radius:var(--pill); border:1px solid var(--line);color:var(--ink-2);background:var(--card);cursor:pointer; font-family:inherit;transition:all .18s var(--ease); min-height:40px;display:inline-flex;align-items:center} .fchip:hover{border-color:var(--navy);color:var(--navy)} .fchip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .pager{display:flex;gap:7px;justify-content:center;align-items:center;margin-top:28px;flex-wrap:wrap} .pager a,.pager span{min-width:38px;height:38px;padding:0 12px;display:grid;place-items:center; border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card); font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)} .pager a:hover{border-color:var(--navy);color:var(--navy)} .pager [aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff} /* ─────────────────── جعبه‌ی خالی / ۴۰۴ ─────────────────── */ .empty{text-align:center;padding:clamp(34px,6vw,72px) 22px;background:var(--card); border:1px solid var(--line);border-radius:var(--r)} .empty i{width:62px;height:62px;border-radius:var(--pill);display:grid;place-items:center; background:var(--navy-soft);color:var(--navy);margin:0 auto 16px;font-style:normal} .empty i svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.7} .empty h2{font-size:clamp(19px,2.4vw,25px)} .empty p{margin-top:9px;max-width:46ch;margin-inline:auto;font-size:14.5px} .empty__cta{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap} .big404{font-size:clamp(58px,12vw,120px);font-weight:800;line-height:1;color:var(--navy); font-variant-numeric:tabular-nums;direction:ltr;opacity:.16} /* ─────────────────── هشدار/اطلاع ─────────────────── */ .note{display:flex;gap:12px;padding:14px 17px;border-radius:var(--r);font-size:13.5px; line-height:1.9;background:var(--navy-soft);color:var(--ink); border:1px solid color-mix(in srgb,var(--navy) 22%,transparent)} .note--gold{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 26%,transparent)} .note i{flex:none;font-style:normal} /* ─────────────────── معرفی صفحه درباره ─────────────────── عکس بدون کارت و بدون قاب اضافه؛ خودِ عکس عنصر است. */ .eyebrow{font-style:normal;font-size:11.5px;font-weight:800;color:var(--muted); direction:ltr;display:block} .intro{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(22px,4vw,44px);align-items:center} .intro__ph{position:relative;border-radius:var(--r);overflow:hidden; box-shadow:var(--sh-lg)} .intro__ph img{width:100%;aspect-ratio:1;object-fit:cover} /* هاله‌ی رنگ تأکید پشت عکس، تا تخت به‌نظر نرسد */ .intro__ph::after{content:"";position:absolute;inset:0; background:linear-gradient(160deg,transparent 55%,rgba(var(--accent-rgb),.22)); pointer-events:none} .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .facts div{padding:18px;background:var(--card);border:1px solid var(--line); border-radius:var(--r)} .facts b{display:block;font-size:clamp(19px,2.2vw,25px);line-height:1.4; font-variant-numeric:tabular-nums} .facts span{font-size:12.5px;color:var(--muted)} @media (max-width:860px){ .intro{grid-template-columns:1fr} .intro__ph{max-width:300px} .facts{grid-template-columns:1fr 1fr} } /* ─────────────────── خبرنامه ─────────────────── */ .news{position:relative;overflow:hidden;border-radius:var(--r);color:#fff; padding:clamp(22px,3vw,32px); background:radial-gradient(ellipse 55% 70% at 88% 18%,rgba(var(--accent-rgb),.32),transparent 62%), linear-gradient(150deg,#0F1F4D,#1E3A8A)} .news::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-start:-8%; width:36%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.05)} .news>*{position:relative} .news h2{font-size:clamp(18px,2.2vw,24px);color:#fff} .news p{color:rgba(255,255,255,.78);margin-top:7px;max-width:52ch;font-size:14px} .news__f{display:flex;gap:10px;margin-top:17px;flex-wrap:wrap} .news__f .inp{flex:1;min-width:200px;background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22);color:#fff} .news__f .inp::placeholder{color:rgba(255,255,255,.5)} .news__f .inp:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)} .news small{display:block;margin-top:11px;font-size:12px;color:rgba(255,255,255,.6)} .news__ok{display:none;align-items:center;gap:9px;margin-top:15px; font-size:14.5px;font-weight:700;color:#fff} .news.is-sent .news__ok{display:flex} .news.is-sent .news__f{display:none} /* ─────────────────── اشتراک‌گذاری ─────────────────── */ .share{display:flex;align-items:center;gap:9px;flex-wrap:wrap; padding-block:16px;border-block:1px solid var(--line);margin-block:26px} .share b{font-size:13px;margin-inline-end:4px} .share a,.share button{width:40px;height:40px;border-radius:var(--pill);border:1px solid var(--line); background:transparent;color:var(--ink-2);cursor:pointer;display:grid;place-items:center; transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)} .share a:hover,.share button:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .share svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9} .share .is-done{border-color:var(--ok);color:var(--ok)} /* ─────────────────── خطای فرم ─────────────────── */ .field .err{display:none} .field.has-err .err{display:block} .field.has-err .inp{border-color:var(--red)} .formmsg{display:none;gap:10px;padding:13px 16px;border-radius:var(--r); font-size:14px;line-height:1.85;margin-bottom:16px} .formmsg.is-on{display:flex} .formmsg--err{background:color-mix(in srgb,var(--red) 12%,transparent); border:1px solid color-mix(in srgb,var(--red) 40%,transparent);color:var(--ink)} .formmsg--ok{background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ink)} /* ─────────────────── چاپ ─────────────────── فاکتور و مقاله باید تمیز چاپ شوند: بدون منو، بدون دکمه، بدون رنگ زمینه. */ @media print{ #kh-head,#kh-foot,.totop,.share,.news,.readbar,.sheet,.crumb,.pager, .bstrip,.bmini,.banner,.slider,.btn,.copy,.out__copy{display:none !important} body{background:#fff;color:#000;font-size:12pt;line-height:1.7} .wrap{width:100%} .split,.grid--2,.grid--3,.grid--4{display:block} .card,.out,.tbl-wrap{border:1px solid #ccc;box-shadow:none;break-inside:avoid} .toc{display:none} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555} h1,h2,h3{break-after:avoid} } /* ─────────────────── فوتر ─────────────────── */ footer{padding-block:34px 24px;margin-top:22px;border-top:1px solid var(--line)} .fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:26px;margin-bottom:26px} .fgrid h4{font-size:13.5px;margin-bottom:11px} .fgrid ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .fgrid a{font-size:13.5px;color:var(--ink-2)} .fgrid a:hover{color:var(--navy)} .ft{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; font-size:13px;color:var(--muted);padding-top:18px;border-top:1px solid var(--line)} /* ─────────────────── واکنش‌گرا ─────────────────── */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms !important;transition-duration:.01ms !important} } @media (max-width:1000px){ .split,.split--r{grid-template-columns:1fr} /* در موبایل ستون کناری زیر محتوا می‌آید؛ چسبندگی و محدودیت ارتفاع فقط یک جعبه‌ی اسکرولِ بی‌دلیل می‌سازد */ .split>aside{align-self:auto;position:static;max-height:none;overflow:visible; padding-block:0;margin-block:0} .toc,.totals{position:static;max-height:none;overflow:visible} .fgrid{grid-template-columns:1fr 1fr} } @media (max-width:960px){ .grid--3,.grid--4,.grid--2{grid-template-columns:1fr} /* ── باگ موبایل: ناوبری روی دکمه‌ی اسلاید می‌افتاد ────────────────── در دسکتاپ ستون تصویر اسلاید را بلند نگه می‌داشت و نوار ناوبری زیر متن جا می‌شد. در موبایل `.slide__art` پنهان می‌شود، ارتفاع تا اندازه‌ی متن جمع می‌شود و دکمه‌ی «خواندن مقاله» درست در همان ۱۶ تا ۵۶ پیکسلی می‌نشیند که فلش‌ها و نقطه‌ها اشغال کرده‌اند — هم عمودی و هم افقی، چون هر دو از لبه‌ی start شروع می‌شوند. رفع: نوار ناوبری باند خودش را می‌گیرد و متن تا آنجا نمی‌آید. */ .slide{grid-template-columns:1fr;gap:20px;padding-block-end:78px} .slide__art{display:none} /* اگر تصویر واقعی گذاشته شده، پنهان کردنش در موبایل یعنی حذف همان چیزی که کاربر آپلود کرده. فقط قاب حرفیِ تزئینی حذف می‌شود. */ .slide--sideimg .slide__art{display:grid;aspect-ratio:16/9} .slide--bg{min-height:clamp(300px,68vw,420px);padding-block-end:78px} .slider__nav{inset-block-end:18px} /* هدف لمسی استاندارد ۴۴ پیکسل است؛ ۴۰ پیکسل دسکتاپ برای انگشت کم است. */ .sbtn{width:44px;height:44px} .dots button{padding:16px 8px} .banner{grid-template-columns:1fr;gap:18px} .banner__r{text-align:start} .banner__price{justify-content:flex-start} .b2{grid-template-columns:1fr} .proj--wide{grid-column:auto} /* منوی افقی جایش را به کشو می‌دهد */ .top nav{display:none} .burger{display:grid} .cta-top{display:none} .form-grid{grid-template-columns:1fr} } @media (max-width:560px){ .wrap{width:calc(100% - 26px)} .fgrid{grid-template-columns:1fr;gap:20px} .phero__stats{gap:18px} }