`ِ تزئینی داشت؛ همهشان
اینجا `::before`/`::after` شدند و محتوا در بلوکهای بومیِ گوتنبرگ ماند
(تصویر، تیتر، پاراگراف، فهرست، دکمه). یعنی ویراستار میتواند متن را
عوض کند بدون اینکه به HTML دست بزند — قاعدهی ۱۲.
چیدمان: موبایل یک ستون (عکس بالا)، از ۶۴۰ به بعد دو ستون. */
.wp-block-group.emu-cta-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 0;
border-radius: var(--ds-radius-2xl);
padding: 0;
margin-block: var(--ds-space-7) var(--ds-space-8);
background: linear-gradient(135deg,
var(--ds-color-primary-dark) 0%,
var(--ds-color-primary) 60%,
var(--ds-color-primary-light) 100%);
/* ⚠️ سایه عمداً برداشته شد (۳۰ اوت، خواستِ کاربر) — روی هر دو سایت.
`--ds-shadow-xl` اینجا بود و کارت را از بومِ صفحه جدا میکرد؛
حالا فقط گرادیانِ خودش مرزش را میسازد. */
}
@media (min-width: 640px) {
/* ⚠️ `row` است نه `row-reverse`: ظرف RTL است، پس فرزندِ اول (عکس) خودش
سمتِ راست مینشیند و بدنه سمتِ چپ — دقیقاً مثل طرح. `row-reverse`
جایشان را عوض میکرد و ماسکِ محوشدگی از سمتِ غلط میخورد. */
.wp-block-group.emu-cta-card { flex-direction: row; align-items: stretch; }
}
/* عکس — نسبت ثابت دارد تا هیچوقت صفحه نپرد (CLS صفر). */
/* ---- محوشدنِ لبهی عکس: **یک تعریف، دو مصرفکننده** ----
⚠️ این متغیر عمداً اینجاست و نباید دوباره دو تکه شود. هم `
![]()
` و هم
لایهی رنگِ `::after` باید **دقیقاً** با یک ماسک محو شوند. تا امروز
فقط عکس ماسک داشت و لایهی رنگ نداشت — نتیجهاش خطِ تیرهی لبه بود:
درست جایی که عکس کاملاً محو شده، لایهی رنگ به بیشینهاش میرسید و
روی **پسزمینهی کارت** مینشست، بعد سرِ مرزِ جعبه ناگهان قطع میشد.
یعنی نواری تیرهتر از عکس و تیرهتر از کارت، با یک پله در دو طرف —
همان چیزی که مثلِ سایه دیده میشد و انگار کارت روی عکس سوار است. */
.emu-cta-card .emu-cta-card__media {
--emu-cta-fade: linear-gradient(to bottom, #000 84%, transparent 100%);
position: relative;
flex: none;
margin: 0;
aspect-ratio: 2 / 3;
overflow: hidden;
}
@media (min-width: 640px) {
.emu-cta-card .emu-cta-card__media {
/* جهت فیزیکی است نه منطقی. عکس سمتِ راست است، پس لبهی چپش (رو به
متن) باید محو شود: `to right` یعنی شفاف در چپ، پُر در راست. */
--emu-cta-fade: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 7%, rgba(0,0,0,.85) 17%, #000 30%);
width: 40%;
aspect-ratio: auto;
}
}
.emu-cta-card .emu-cta-card__media img,
.emu-cta-card .emu-cta-card__media::after {
-webkit-mask-image: var(--emu-cta-fade);
mask-image: var(--emu-cta-fade);
}
.emu-cta-card .emu-cta-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(.9);
}
/* لایهی رنگ روی عکس — عکس را به پالتِ کارت میبَرد.
⚠️ روی موبایل عکس **پرتره** است (۲:۳) و قبلاً این لایه از همان بالا
شروع میشد (۱۲٪) و تا ۵۵٪ میرفت — یعنی سرتاسرِ عکس، از جمله صورت،
زیرِ پردهی سرمهای میرفت. کارِ این لایه **پلِ بصری** بینِ عکس و
کارت است، نه پوشاندنِ عکس؛ پس تا ۵۸٪ کاملاً شفاف میماند و فقط
یکسومِ پایین وارد سرمهای میشود. روی دسکتاپ عکس افقی است و در کنارِ
متن مینشیند — آنجا قاعدهی خودش را دارد و دست نخورد. */
.emu-cta-card .emu-cta-card__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom,
transparent 0%,
transparent 58%,
color-mix(in srgb, var(--ds-color-primary-dark) 20%, transparent) 80%,
color-mix(in srgb, var(--ds-color-primary-dark) 55%, transparent) 100%);
}
@media (min-width: 640px) {
/* ⚠️ همان ایرادِ موبایل، ولی چرخیده: لایهی رنگ ۹۰٪ سرمهای را از لبهی
چپ شروع میکرد — جایی که عکس اصلاً دیده نمیشود — و تا ۱۰۰٪ عرض
۱۲٪ پرده روی **کلِ** عکس میکشید. حالا ماسکِ مشترک لبه را حل میکند
و خودِ گرادیان فقط در نوارِ محوشدگی رنگ میگذارد: از ۴۵٪ به بعد عکس
تقریباً بیپرده است. کارِ این لایه پیوند دادنِ عکس به پالتِ کارت است،
نه مات کردنش. */
.emu-cta-card .emu-cta-card__media::after {
background: linear-gradient(to right,
color-mix(in srgb, var(--ds-color-primary) 85%, transparent) 0%,
color-mix(in srgb, var(--ds-color-primary) 34%, transparent) 20%,
color-mix(in srgb, var(--ds-color-primary-dark) 6%, transparent) 45%,
transparent 100%);
}
}
/* ---- نشانِ «في أقل من ٣ أيام» ----
⚠️ خواهرِ عکس است نه فرزندش: بلوکِ `wp:image` هسته جایی برای فرزندِ
اضافه ندارد و بردنش داخلِ HTML خام یعنی خروج از ویرایشگر (قاعدهی ۱۲).
پس نسبت به کلِ کارت جایگذاری میشود و `inset-inline-start` در RTL
میبردش روی نیمهی راست — همانجا که عکس است.
زیر ۶۴۰px پنهان است چون کارت آنجا ستونی میشود و عکس بالای متن
میرود؛ نشان روی متن میافتاد. */
.emu-cta-card .emu-cta-card__badge {
display: none;
position: absolute;
inset-block-end: var(--ds-space-5);
inset-inline-start: var(--ds-space-5);
z-index: 1;
align-items: center;
gap: var(--ds-space-2);
margin: 0;
padding: var(--ds-space-2) var(--ds-space-3);
border-radius: var(--ds-radius-lg);
font-size: var(--ds-text-ui-sm);
font-weight: 700;
line-height: var(--ds-leading-tight);
color: var(--ds-color-accent-light);
background: color-mix(in srgb, var(--ds-color-accent) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--ds-color-accent) 40%, transparent);
backdrop-filter: blur(4px);
}
@media (min-width: 640px) { .emu-cta-card .emu-cta-card__badge { display: flex; } }
/* آیکنِ تیکِ داخلِ دایره. رنگ سختکد است چون `currentColor` در
`background-image` کار نمیکند — و اینجا همیشه طلاییِ روشن است. */
.emu-cta-card .emu-cta-card__badge::before {
content: "";
flex: none;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;utf8,
');
background-repeat: no-repeat;
background-size: contain;
}
.emu-cta-card .emu-cta-card__body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--ds-space-6);
}
@media (min-width: 640px) { .emu-cta-card .emu-cta-card__body { padding: var(--ds-space-7); } }
/* خطِ طلاییِ کوتاه بالای تیتر */
.emu-cta-card .emu-cta-card__body::before {
content: "";
height: 2px;
width: 64px;
margin-block-end: var(--ds-space-5);
border-radius: var(--ds-radius-pill);
background: linear-gradient(to left, transparent, var(--ds-color-accent));
}
.emu-pill {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
align-self: flex-start;
padding: var(--ds-space-1) var(--ds-space-3);
margin: 0 0 var(--ds-space-5);
border-radius: var(--ds-radius-pill);
font-size: var(--ds-text-ui-sm);
font-weight: 700;
color: var(--ds-color-accent-light);
background: color-mix(in srgb, var(--ds-color-accent) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--ds-color-accent) 28%, transparent);
}
.emu-pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--ds-radius-pill);
background: var(--ds-color-accent);
animation: emu-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes emu-pulse { 50% { opacity: .4; } }
/* ⚠️ `.entry-content` عمداً در سلکتور است. بخش ۱۰ همین فایل
`h2, .entry-content h2 { color: var(--ds-color-primary-dark) }` را
مینویسد — ویژگیِ (0,1,1) و **بعد از** اینجا. `.emu-cta-card h2` هم
(0,1,1) است، پس در تساوی میبازد و تیتر سرمهای روی سرمهای میشد.
سنجه گرفتش: `color: rgb(9, 30, 71)` روی زمینهی `rgb(13, 43, 94)`. */
.entry-content .emu-cta-card h2 {
margin: 0 0 var(--ds-space-4);
color: var(--ds-color-on-primary);
font-size: var(--ds-text-h3);
line-height: var(--ds-leading-tight);
}
.emu-cta-card p {
margin: 0 0 var(--ds-space-5);
font-size: var(--ds-text-ui);
line-height: var(--ds-leading-loose);
color: var(--ds-color-on-primary-dim);
}
/* سه بولت — روی موبایل پنهاناند: کارت آنجا باریک است و پاراگرافِ بالا
همین سه نکته را میگوید. تکرار در فضای تنگ، فقط دکمه را پایین میراند. */
.emu-cta-card .emu-cta-card__bullets {
display: none;
list-style: none;
margin: 0 0 var(--ds-space-5);
padding: 0;
}
@media (min-width: 640px) { .emu-cta-card .emu-cta-card__bullets { display: block; } }
.emu-cta-card .emu-cta-card__bullets li {
display: flex;
align-items: center;
gap: var(--ds-space-2);
margin-block-end: var(--ds-space-2);
font-size: var(--ds-text-ui-sm);
color: var(--ds-color-on-primary-dim);
}
.emu-cta-card .emu-cta-card__bullets li::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: var(--ds-radius-pill);
background: var(--ds-color-accent);
}
.emu-cta-card .wp-block-buttons { margin: 0; }
/* دکمهی این کارت همیشه طلاییِ پُر است — تنها مقصدِ صفحهی خانه که به
آپلودِ مدرک میرسد، و نباید هموزنِ دکمههای خطیِ آکاردئون دیده شود. */
.emu-cta-card .wp-block-button > .wp-block-button__link,
.emu-cta-card .wp-block-button > .wp-block-button__link:hover,
.emu-cta-card .wp-block-button > .wp-block-button__link:focus-visible {
background: linear-gradient(135deg, var(--ds-color-accent), var(--ds-color-accent-light));
/* ⚠️ بوردر **حذف** میشود، نه شفاف. `::before`ِ حلقهی نور با `inset: 0`
نسبت به **جعبهی پدینگ** جای میگیرد — یعنی داخلِ بوردر. با بوردرِ
۱٫۵pxِ شفاف، حلقه ۱٫۵px تو میرفت و نور «داخلِ دکمه» دیده میشد.
دکمههای هدر و فوتر این مشکل را نداشتند چون اصلاً بوردر ندارند. */
border: 0;
color: var(--ds-color-primary-dark);
box-shadow: 0 6px 24px color-mix(in srgb, var(--ds-color-accent) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.emu-pill::before { animation: none; }
}
/* ---- ردیف دکمه: بلوک `wp:buttons` هسته ----
این بلوک تا امروز **هیچ قاعدهای از ما نداشت** و نتیجهاش روی موبایل دو
دکمه با دو عرض (۲۸۵px و ۲۷۰٫۵px) و دو ارتفاع (۷۱٫۷px و ۴۸٫۹px) بود: هر
دکمه به اندازهی متنِ خودش کش میآمد و اولی چون بلندتر بود دو خطی میشد.
یک ردیف دکمه باید یک واحدِ بصری باشد، نه دو مستطیلِ بیربط. */
.wp-block-buttons.is-layout-flex {
gap: var(--ds-space-3);
align-items: stretch; /* همارتفاع، حتی وقتی یکی دو خطی شد */
}
/* روی موبایل دو دکمه هرگز کنار هم جا نمیشوند؛ ستونیِ تمامعرض تنها
چیدمانی است که هر دو را همعرض و هموزن نگه میدارد. */
@media (max-width: 767px) {
.wp-block-buttons.is-layout-flex { flex-direction: column; }
.wp-block-buttons.is-layout-flex > .wp-block-button { width: 100%; }
.wp-block-buttons.is-layout-flex > .wp-block-button > .wp-block-button__link {
width: 100%;
}
}
/* ---- دکمهی بومی ----
⚠️ سلکتور عمداً **کلاسمستقل** است: هر `wp:button`ی که هر کسی هر جای سایت
بگذارد این قواعد را میگیرد، حتی اگر یادش برود کلاس بزند. قبلاً پایه روی
`.emu-btn` بود و نتیجهاش این شد که سه صفحه (۹۹، ۱۰۱، ۱۰۵۹) دکمههای
بیکلاس و `is-style-outline` داشتند که **هیچ قاعدهای از ما نمیگرفتند**:
نه `min-height: 44px`، نه پسگرفتنِ فونت ۲۲٫۹pxِ آسترا. یعنی همان تلهی
۲۲ دوباره، در سکوت. قرارداد نباید به یادِ نویسنده تکیه کند.
`.emu-btn` هنوز کار میکند و برای خوانایی در محتوا نگه داشته میشود.
کلاس روی **wrapper** بلوک مینشیند (``)
نه روی
— وگرنه گوتنبرگ بلوک را نامعتبر اعلام میکند (تلهی ۱۸).
`--ds-tap-min` تضمین WCAG 2.5.5 است. */
.wp-block-button > .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-2);
min-height: var(--ds-tap-min);
/* آسترا با CSS درونخطی `1.42857rem` (≈۲۲٫۹px) روی دکمه مینشیند در حالی
که بدنه ۱۶px است. مقیاسِ ما باید صریحاً پس بگیردش — وگرنه دکمه از H3
هم بزرگتر میشود. لینت ما فقط فایلهای خودمان را میگردد، پس این را
هیچ تستی نمیگرفت؛ فقط اندازهگیریِ صفحهی زنده گرفتش. */
font-size: var(--ds-text-ui-lg);
line-height: var(--ds-leading-normal);
text-align: center;
padding: var(--ds-space-3) var(--ds-space-5);
/* پوستهی تازه: دکمهی پایه **خطی** است نه پُر. دلیلش سلسلهمراتب است —
هر پنل آکاردئون دو دکمه دارد و اگر هر دو پُر باشند، هیچکدام مقصدِ
اصلی به نظر نمیرسد. پُرشدگیِ طلایی مالِ `emu-btn-accent` است و بس. */
background: transparent;
color: var(--ds-color-primary);
border: 1.5px solid color-mix(in srgb, var(--ds-color-primary) 22%, transparent);
border-radius: var(--ds-radius-lg);
font-weight: 700;
text-decoration: none;
transition: transform var(--ds-motion-fast) var(--ds-ease),
border-color var(--ds-motion-fast) var(--ds-ease),
background-color var(--ds-motion-fast) var(--ds-ease);
}
.wp-block-button > .wp-block-button__link:hover,
.wp-block-button > .wp-block-button__link:focus-visible {
background: var(--ds-color-accent-soft);
border-color: var(--ds-color-primary);
color: var(--ds-color-primary);
transform: translateY(-2px);
}
.wp-block-button > .wp-block-button__link:active { transform: scale(.97); }
/* ثانویه — طلایی. `is-style-outline` هسته هم اینجا نگاشته میشود تا اگر
کسی از پنل گوتنبرگ سبکِ خطی را انتخاب کرد، بهجای ظاهرِ بیگانه ظاهرِ
ثانویهی خودمان را بگیرد. */
.emu-btn-accent > .wp-block-button__link,
.emu-btn-accent > .wp-block-button__link:hover,
.emu-btn-accent > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
background: linear-gradient(135deg, var(--ds-color-accent), var(--ds-color-accent-light));
border-color: transparent;
color: var(--ds-color-primary-dark);
box-shadow: 0 4px 16px color-mix(in srgb, var(--ds-color-accent) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.wp-block-button > .wp-block-button__link { transition: none; }
}
/* ---- دکمهی «عرض المزيد من الصور» زیرِ آلبوم ----
بلوکِ بومیِ `wp:buttons` است، پس همهی قواعدِ سیستمِ دکمه را از قبل
میگیرد و اینجا فقط پوستهی سرمهایِ طرح و نشانِ شمارش رویش مینشیند.
⚠️ کلاسِ `wp:button` روی **پوشش** مینشیند نه روی `` (تلهی ۱۸).
⚠️ جایش در فایل عمدی است: **بعد از** سیستمِ دکمه. سلکتورِ پایه
(`.wp-block-button > .wp-block-button__link`) هم (0,2,0) است و
`.emu-album__more > .wp-block-button__link` هم — گرهی ویژگی را ترتیبِ
فایل باز میکند. وقتی این قواعد بالاتر در فایل بودند، دکمه خطی و با
گوشهی ۱۲px میماند بهجای قرصِ پُرِ سرمهای.
⚠️ آدرسش هنوز خالی است — صفحهی گالری ساخته نشده. `wp:button` بدونِ
`url` اصلاً `href` نمینویسد، پس این یک لینکِ شکسته نیست: متنی است که
بهمحضِ ساختهشدنِ صفحه با یک ویرایش لینک میشود. */
.wp-block-buttons.emu-album__more-wrap {
justify-content: center;
margin-block-start: var(--ds-space-6);
}
.emu-album__more > .wp-block-button__link,
.emu-album__more > .wp-block-button__link:hover,
.emu-album__more > .wp-block-button__link:focus-visible {
border-radius: var(--ds-radius-pill);
border-color: transparent;
background: linear-gradient(135deg, var(--ds-color-primary), var(--ds-color-primary-light));
color: var(--ds-color-on-primary);
font-size: var(--ds-text-ui);
padding-inline: var(--ds-space-7);
}
/* فلش با CSS نه SVG — همان الگوی دکمهی ارسالِ فرم و ریلِ رشتهها. */
.emu-album__more > .wp-block-button__link::after {
content: "";
width: .45em;
height: .45em;
border: solid currentColor;
border-width: 0 0 2px 2px;
transform: rotate(45deg);
}
.emu-album__count {
padding: var(--ds-space-1) var(--ds-space-2);
border-radius: var(--ds-radius-pill);
font-size: var(--ds-text-ui-sm);
background: color-mix(in srgb, var(--ds-color-accent) 30%, transparent);
color: var(--ds-color-accent-light);
}
/* ---- آکاردئون: بلوک `wp:details` هسته ----
جایگزین `nested-accordion` المنتور پرو. / بومی است:
بدون جاوااسکریپت باز و بسته میشود، صفحهخوان وضعیت باز/بسته را خودش
اعلام میکند، و Ctrl+F مرورگر محتوای بسته را هم پیدا میکند. */
.wp-block-group.emu-accordion { padding: 0; }
.emu-accordion .wp-block-details {
border: 2px solid var(--ds-color-accent-soft-dk);
border-radius: var(--ds-radius-xl);
background: var(--ds-color-surface);
box-shadow: var(--ds-shadow-sm);
margin-block-end: var(--ds-space-4);
overflow: hidden;
transition: border-color var(--ds-motion-base) var(--ds-ease),
box-shadow var(--ds-motion-base) var(--ds-ease);
}
.emu-accordion .wp-block-details[open] {
border-color: color-mix(in srgb, var(--ds-color-accent) 55%, transparent);
box-shadow: var(--ds-shadow-lg);
}
/* سرِ آکاردئون: عکس + پردهی سرمهای، مثلِ طرح.
⚠️ این یادداشت قبلاً میگفت عکسها «عمداً نیامدند» چون پنج درخواستِ
شبکهی اضافیاند. کاربر (۳۰ اوت) عکسها را داد و انتخاب عوض شد — با
AVIF هر پنجتا روی هم **۸۶ کیلوبایت**اند، یعنی همان استدلالِ وزن دیگر
برقرار نیست. عکسها زیرِ خطِ افقاند و پردهی سرمهای رویشان تضمین
میکند متن همیشه خوانا بماند.
ترتیبِ لایهها مهم است: لایهی **اول** رویِ همه مینشیند، پس گرادیان
اول میآید و عکس دوم. اگر `--emu-fee-bg` تعریف نشده باشد (ردیفی که
عکس نگرفته) `none` میشود و فقط پرده میماند — همان ظاهرِ قبلی، بدونِ
هیچ خرابی.
⚠️ آدرسها اینجا سختکدند و نگهبانشان `scripts/asset-check.py` است که
پیشپرواز اجرا میکند؛ اگر رسانهای دوباره آپلود یا حذف شود، پیش از
استقرار داد میزند. بدونِ آن، خرابی بیصدا بود: پسزمینهی خالی، بی خطا.
⚠️ اعدادِ پرده از **مرجعِ زنده** آمدهاند نه از حافظه، و یک بار
اشتباه آمدند: نسخهی داخلِ ریپو کهنه بود و پردهی غلیظترِ قدیمی را
داشت. جهتش هم برعکسِ حدس است — **کمرنگ در ابتدا، غلیظ در انتها**.
پیش از دستزدن به این عددها `design-system/reference/` را دوباره
همگام کن (روشش در RESKIN.md).
سادهسازیِ آگاهانه: طرح هنگامِ باز شدن عکس را ۱٫۰۴ بزرگ میکند
(`transform` روی `![]()
`). اینجا عکس **پسزمینه** است نه عنصر، پس آن
بزرگنمایی نیامد؛ تغییرِ چگالیِ پرده و خطِ طلایی که معنادارترند آمدند. */
.emu-accordion .wp-block-details > summary {
display: flex;
align-items: center;
gap: var(--ds-space-4);
min-height: 140px;
padding: var(--ds-space-5);
/* ⚠️ تکیهگاهِ سرمهای زیرِ همهچیز — بدونِ آن، اگر عکس لود نشود (AVIF
روی سافاریِ زیر ۱۶٫۴، یا شبکهی ضعیف) پردهی نیمهشفافِ زیر روی
**سفیدِ خودِ پنل** مینشیند و متنِ سفید ناخوانا میشود. با این، بدترین
حالت همان کارتِ سرمهایِ قبلی است: عکس نیست ولی کارایی سرِ جایش است —
همان قاعدهای که کارتهای ریلِ رشتهها هم دارند.
عمداً روی **همهی** ردیفهاست نه فقط ردیفهای عکسدار: ردیفی که روزی
بیعکس اضافه شود هم باید خوانا بماند. */
background-color: var(--ds-color-primary);
background-image: linear-gradient(100deg,
color-mix(in srgb, var(--ds-color-primary-dark) 30%, transparent) 0%,
color-mix(in srgb, var(--ds-color-primary) 48%, transparent) 55%,
color-mix(in srgb, var(--ds-color-primary-dark) 74%, transparent) 100%),
var(--emu-fee-bg, none);
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
color: var(--ds-color-on-primary);
font-size: var(--ds-text-h4);
font-weight: 700;
line-height: var(--ds-leading-tight);
cursor: pointer;
list-style: none;
transition: color var(--ds-motion-base) var(--ds-ease);
}
@media (min-width: 640px) { .emu-accordion .wp-block-details > summary { padding-inline: var(--ds-space-6); } }
/* حالتِ باز: پرده غلیظتر میشود تا متنِ بازشده از پسزمینه جدا بماند —
عددها از طرح. */
.emu-accordion .wp-block-details[open] > summary {
color: var(--ds-color-accent-light);
background-image: linear-gradient(100deg,
color-mix(in srgb, var(--ds-color-primary) 45%, transparent) 0%,
color-mix(in srgb, var(--ds-color-primary) 60%, transparent) 55%,
color-mix(in srgb, var(--ds-color-primary-dark) 85%, transparent) 100%),
var(--emu-fee-bg, none);
}
/* ⚠️ خطِ طلاییِ زیرِ سر اینجا **ساخته نمیشود** و نباید ساخته شود:
از قبل پایینتر با `box-shadow: inset 0 -3px 0` روی خودِ `[open] > summary`
هست. یک بار همین را دوباره با `::after` نوشتم و `::after` از قبل مالِ
**قرصِ فلش** بود — نتیجهاش این شد که فلش روی سرِ بسته `opacity: 0`
گرفت و نامرئی شد، بی هیچ خطا. پیش از برداشتنِ یک شبهعنصر، `grep`
بزن ببین گرفته است یا نه.
عکسِ پسزمینهی هر ردیف. کلاسِ ردیف از محتوا میآید (`emu-fee--*`)،
دقیقاً همان کلاسی که آیکنش را هم تعیین میکند. */
.emu-accordion .emu-fee--programs > summary { --emu-fee-bg: url("https://emu-edu.ir/wp-content/uploads/2026/08/%D8%B3%D8%A7%D9%84%D9%86-%D8%B3%D8%AE%D9%86%D8%B1%D8%A7%D9%86%DB%8C-%D8%AF%D8%A7%D9%86%D8%B4%DA%AF%D8%A7%D9%87.avif"); }
.emu-accordion .emu-fee--housing > summary { --emu-fee-bg: url("https://emu-edu.ir/wp-content/uploads/2026/08/%D8%AE%D9%88%D8%A7%D8%A8%DA%AF%D8%A7%D9%87-%D8%AF%D8%A7%D9%86%D8%B4%D8%AC%D9%88%DB%8C%DB%8C-%D9%87%D9%86%DA%AF%D8%A7%D9%85-%D8%BA%D8%B1%D9%88%D8%A8.avif"); }
.emu-accordion .emu-fee--comfort > summary { --emu-fee-bg: url("https://emu-edu.ir/wp-content/uploads/2026/08/%D8%A7%D9%85%DA%A9%D8%A7%D9%86%D8%A7%D8%AA-%D9%BE%D8%B1%D8%AF%DB%8C%D8%B3-%D8%AF%D8%A7%D9%86%D8%B4%DA%AF%D8%A7%D9%87.avif"); }
.emu-accordion .emu-fee--accredit > summary { --emu-fee-bg: url("https://emu-edu.ir/wp-content/uploads/2026/08/%D8%AC%D8%B4%D9%86-%D9%81%D8%A7%D8%B1%D8%BA-%D8%A7%D9%84%D8%AA%D8%AD%D8%B5%DB%8C%D9%84%DB%8C-%D8%AF%D8%A7%D9%86%D8%B4%DA%AF%D8%A7%D9%87.avif"); }
.emu-accordion .emu-fee--english > summary { --emu-fee-bg: url("https://emu-edu.ir/wp-content/uploads/2026/08/%D8%B3%D8%A7%D9%84%D9%86-%D8%A2%D8%B2%D9%85%D9%88%D9%86-%D8%B2%D8%A8%D8%A7%D9%86-%D8%A7%D9%86%DA%AF%D9%84%DB%8C%D8%B3%DB%8C.avif"); }
.emu-accordion .wp-block-details > summary::-webkit-details-marker { display: none; }
/* ---- جعبهی آیکنِ ابتدای سر ----
⚠️ آیکن **در CSS** است نه در محتوا، چون بلوکِ `wp:details` هسته جایی
برای مارکاپِ اضافه در `` ندارد و ساختنِ بلوکِ خودمان برای
آکاردئون یعنی نقضِ قاعدهی ۱۲. پس هر ردیف یک کلاس میگیرد
(`emu-fee--programs`، `--housing`، …) و آیکنش را از همینجا میخواند.
ردیفی که کلاس نگیرد، جعبهی خالی میگیرد نه آیکنِ غلط.
رنگِ SVG سختکد است چون `currentColor` در `background-image` کار
نمیکند؛ همیشه سفیدِ روی سرمهای است، پس ثابت میماند. */
.emu-accordion .wp-block-details > summary::before {
content: "";
flex: none;
width: 48px;
height: 48px;
border-radius: var(--ds-radius-lg);
background-color: var(--ds-color-on-primary-fill);
background-image: var(--emu-fee-icon, none);
background-repeat: no-repeat;
background-position: center;
background-size: 22px 22px;
border: 1px solid var(--ds-color-on-primary-line);
transition: background-color var(--ds-motion-base) var(--ds-ease),
border-color var(--ds-motion-base) var(--ds-ease);
}
.emu-accordion .wp-block-details[open] > summary::before {
background-color: color-mix(in srgb, var(--ds-color-accent) 25%, transparent);
border-color: color-mix(in srgb, var(--ds-color-accent) 50%, transparent);
}
/* پنج آیکنِ بخشِ «الرسوم والسكن والخدمات». */
.emu-fee--programs { --emu-fee-icon: url('data:image/svg+xml;utf8,'); }
.emu-fee--housing { --emu-fee-icon: url('data:image/svg+xml;utf8,'); }
.emu-fee--comfort { --emu-fee-icon: url('data:image/svg+xml;utf8,'); }
.emu-fee--accredit { --emu-fee-icon: url('data:image/svg+xml;utf8,'); }
.emu-fee--english { --emu-fee-icon: url('data:image/svg+xml;utf8,'); }
/* ---- قرصِ فلش در انتهای سر ----
⚠️ `margin-inline-start: auto` تنها چیزی است که این را به لبهی دیگر
میبَرد. نسخهی قبلی فلش را `position: absolute` کرده بود و روی متنِ
عنوان میافتاد — روی سرِ اول حرفِ اولِ «البرامج» را میبُرید. */
.emu-accordion .wp-block-details > summary::after {
content: "";
flex: none;
margin-inline-start: auto;
width: 36px;
height: 36px;
border-radius: var(--ds-radius-pill);
background-color: var(--ds-color-on-primary-fill);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
border: 1px solid var(--ds-color-on-primary-line);
transition: transform var(--ds-motion-base) var(--ds-ease),
background-color var(--ds-motion-base) var(--ds-ease),
border-color var(--ds-motion-base) var(--ds-ease);
}
.emu-accordion .wp-block-details[open] > summary::after {
transform: rotate(180deg);
background-color: color-mix(in srgb, var(--ds-color-accent) 25%, transparent);
border-color: color-mix(in srgb, var(--ds-color-accent) 45%, transparent);
}
/* خطِ طلاییِ پایینِ سر — فقط وقتی باز است. */
.emu-accordion .wp-block-details[open] > summary {
box-shadow: inset 0 -3px 0 0 var(--ds-color-accent);
}
.emu-accordion .wp-block-details > summary:focus-visible {
outline: 3px solid var(--ds-color-accent);
outline-offset: -3px;
}
.emu-accordion .emu-details-body {
padding: var(--ds-space-5);
border-top: 1px solid var(--ds-color-accent-soft-dk);
}
@media (min-width: 640px) { .emu-accordion .emu-details-body { padding-inline: var(--ds-space-6); } }
@media (prefers-reduced-motion: reduce) {
.emu-accordion .wp-block-details,
.emu-accordion .wp-block-details > summary,
.emu-accordion .wp-block-details > summary::before,
.emu-accordion .wp-block-details > summary::after { transition: none; }
}
.emu-accordion .emu-details-body > :last-child { margin-block-end: 0; }
.emu-accordion .emu-details-body p {
line-height: var(--ds-leading-loose);
color: var(--ds-color-text);
}
/* ---- جدول: بلوک `wp:table` هسته ----
جدولهای شهریه و سکن قبلاً داخل ویجت HTML المنتور با CSS خودشان
بودند (سه نسخهی متفاوت از یک جدول). حالا یک نسخه. */
.emu-table.wp-block-table {
margin-block-end: var(--ds-space-5);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.emu-table table {
width: 100%;
border-collapse: collapse;
}
/* `min-width` فقط برای جدولهایی که واقعاً پهناند — یعنی **ستون سوم دارند**.
قبلاً بیقید روی همه مینشست و نتیجهاش این بود که یک جدولِ دوستونیِ
«مرفق / تفاصيل» هم روی موبایل افقی میلغزید و ستون دومش بریده میشد،
در حالی که راحت در ۳۳۵px جا میشد.
شمارش با `:has()` انجام میشود نه با کلاسِ دستی: کلاس را نویسندهی
صفحهی بعدی فراموش میکند، ستونِ سوم را نه. */
.emu-table:has(thead th:nth-child(3)) table { min-width: 640px; }
.emu-table th,
.emu-table td {
border: 1px solid var(--ds-color-border);
padding: var(--ds-space-3) var(--ds-space-2);
text-align: center;
vertical-align: middle;
}
.emu-table thead th {
background: var(--ds-color-primary);
color: var(--ds-color-on-primary);
font-weight: 700;
line-height: var(--ds-leading-normal);
}
.emu-table tbody td:first-child {
text-align: start;
background: var(--ds-color-surface-soft);
font-weight: 600;
}
.emu-table tbody tr:nth-child(even) td { background: var(--ds-color-surface-tint); }
.emu-table tbody tr:nth-child(even) td:first-child { background: var(--ds-color-surface-soft); }
/* ردیف عنوانِ گروه (نام هر خوابگاه). با `colspan` شناخته میشود نه با
کلاس: اسکیمای بلوک جدولِ هسته برای هیچ صفتی نگه نمیدارد، پس
`class` روی
بلوک را در ویرایشگر «نامعتبر» میکرد. */
/* تخصص عمداً برابرِ قاعدهی ردیف زوج است و بعد از آن میآید تا با
ترتیب برنده شود — نه با `!important` (تلهی Astra در UI.md). */
.emu-table tbody td[colspan],
.emu-table tbody td[colspan]:first-child {
background: var(--ds-color-accent-soft);
color: var(--ds-color-primary-dark);
font-weight: 700;
text-align: start;
}
/* ---- ریز-اشارهی زیر جدول و لیست امکانات ---- */
.emu-note {
color: var(--ds-color-muted);
margin-block-end: var(--ds-space-3);
}
.emu-facilities {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ds-space-2) var(--ds-space-5);
margin: 0 0 var(--ds-space-5);
padding: 0;
list-style: none;
}
/* همان تلهی `.entry-content ul` آسترا (شرحش در lite-blocks.css): قاعدهی
۰٬۲٬۰ی آسترا `padding: 0`ِ بالا را میبرد و ستونِ راستِ شبکه ۲۰px تو
میرود. اینجا بهجای بالابردنِ ویژگیِ خودِ قاعده، فقط همان یک ویژگی را
پس میگیریم تا اگر روزی این لیست بیرونِ محتوا رفت، چیزی نشکند. */
.entry-content .emu-facilities { padding-inline: 0; }
.emu-facilities li {
position: relative;
padding-inline-start: var(--ds-space-5);
line-height: var(--ds-leading-normal);
color: var(--ds-color-text);
}
.emu-facilities li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0.55em;
width: var(--ds-space-2);
height: var(--ds-space-2);
border-radius: var(--ds-radius-pill);
background: var(--ds-color-accent);
}
@media (max-width: 600px) { .emu-facilities { grid-template-columns: 1fr; } }
/* ---- بخش فرم مشاوره ----
تمامعرض و سرمهای (قاعدهی `calc(50% - 50vw)` بالای همین بخش). فرم
خودش از افزونهی `lite-forms` میآید و **افزونه دست نمیخورد**: پوستهی
سرمهای فقط اینجا و فقط داخلِ `.emu-consult` روی آن مینشیند. اگر جای
دیگری همان فرم روی زمینهی سفید بیاید، ظاهرِ عادیِ خودش را دارد. */
.wp-block-group.emu-consult {
position: relative;
overflow: hidden;
padding: var(--ds-space-9) var(--ds-space-4);
/* ⚠️ حاشیهی پایین صفر است و باید صفر بماند: این آخرین بخشِ صفحه است و
باید به فوتر بچسبد. یک فاصلهی سفیدِ نازک بینِ دو ناحیهی سرمهای،
هر دو را شکسته نشان میدهد. */
margin-block: 0;
scroll-margin-top: var(--ds-space-7);
background: linear-gradient(160deg,
var(--ds-color-primary-dark) 0%,
var(--ds-color-primary) 50%,
var(--ds-color-primary-light) 100%);
}
/* ⚠️ آسترا روی `.content-area` حاشیهی پایینِ ۶۰px میگذارد و بینِ این
بخشِ سرمهای و فوتر یک نوارِ کرمیِ نازک میماند — اندازهگیریشده، نه
حدس. فقط روی صفحهای که این بخش را دارد صفر میشود، تا بقیهی صفحات
فاصلهی همیشگیشان را نگه دارند. */
/* سلکتور عمداً پیچیده است. آسترا این را مینویسد:
`.ast-plain-container.ast-no-sidebar #primary { margin-bottom: 60px }`
یعنی ویژگیِ (1,2,0). `.emu-has-flush-end .content-area` (0,2,0) بود و
بیصدا باخت — فاصله سرِ جایش ماند. `body` + `[class]` ما را به (1,2,1)
میبَرد، و برخلافِ افزودنِ `.ast-plain-container` به نامِ کلاسهای
قالبِ مادر گره نمیخورد. */
body.emu-has-flush-end[class] #primary { margin-block-end: 0; }
/* ⚠️ قرینهی همان تله در **بالای** صفحه. همان قاعدهی آسترا
(`.ast-plain-container.ast-no-sidebar #primary`) ۶۰px حاشیهی **بالا**
هم میگذارد، و روی صفحهی خانه یک نوارِ کرمی بینِ ناوبری و ویدیو
میماند — در طرح، ویدیو مستقیم زیرِ ناوبری مینشیند. سنجه: ناوبری
تا ۱۶۹ و ویدیو از ۲۲۹ شروع میشد. ویژگی هم دقیقاً مثل قاعدهی بالا. */
body.emu-has-flush-start[class] #primary { margin-block-start: 0; }
/* خطِ طلاییِ بالای بخش */
.wp-block-group.emu-consult::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
height: 3px;
background: linear-gradient(to right, transparent, var(--ds-color-accent), transparent);
opacity: .7;
}
/* ⚠️ هر قاعدهای که پایینتر برای این فرزندها **شورتهندِ `margin`**
بنویسد، همین `auto` را صفر میکند و بخش راستچین میماند. یک بار
همین شد: تیتر و پاراگراف و قرص چسبیدند به لبهی راست در حالی که فرم
وسط بود. پس از اینجا به بعد فقط `margin-block` نوشته میشود. */
.emu-consult > * {
max-width: var(--ds-width-form);
margin-inline: auto;
}
/* همان تلهی بالا — تیتر روی سرمهای باید سفید بماند. */
/* قرصِ «استشارة مجانية» بالای تیتر — وسطچین. */
/* ⚠️ `margin-inline: auto` جعبهی **سطری** را وسط نمیآورد و `.emu-pill`
پیشفرض `inline-flex` است. `display: flex` + `width: fit-content`
بلوکیاش میکند بیآنکه اندازهاش عوض شود. */
/* ⚠️ رنگ و اندازه هم اینجا صریحاند و باید بمانند. `.emu-consult > p`
(0,2,0) و `.wp-block-group.emu-consult > p` (0,2,1) هر دو بر `.emu-pill`
(0,1,0) میچربیدند، پس قرص سفیدِ ۱۷px میشد در حالی که در طرح طلاییِ
۱۴px است. آن دو قاعده حالا `:not(.emu-pill)` دارند و اینها پدافندِ
دوماند. وزن ۵۰۰ و پدینگِ بازتر هم از خودِ طرح میآید
(`.emu-consult__badge .emu-pill`). */
.emu-consult .emu-pill {
display: flex;
width: fit-content;
margin-inline: auto;
margin-block: 0 var(--ds-space-5);
padding: var(--ds-space-2) var(--ds-space-4);
font-size: var(--ds-text-ui);
font-weight: 500;
color: var(--ds-color-accent-light);
}
.entry-content .emu-consult h2 {
margin-block: 0 var(--ds-space-3);
margin-inline: auto;
color: var(--ds-color-on-primary);
text-align: center;
}
/* سطر دومِ تیتر طلایی است — همان تأکیدِ دو-رنگیِ طرح. */
.emu-consult .emu-gold { color: var(--ds-color-accent); }
.emu-consult > p:not(.emu-pill) {
margin-block: 0 var(--ds-space-6);
margin-inline: auto;
color: var(--ds-color-on-primary-dim);
font-size: var(--ds-text-ui);
text-align: center;
}
.emu-consult > p a { color: var(--ds-color-accent-light); }
/* ---- پوستهی سرمهای روی فرمِ lite-forms ----
⚠️ هیچکدام از این قواعد نباید به افزونه منتقل شود: افزونه عام است و
روی زمینهی سفید هم استفاده میشود. اینجا فقط «فرمِ داخلِ بخشِ سرمهای»
هدف است. */
.emu-consult .lf-form {
max-width: var(--ds-width-form);
margin-inline: auto;
padding: var(--ds-space-5);
border-radius: var(--ds-radius-xl);
background: color-mix(in srgb, var(--ds-color-on-primary) 6%, transparent);
border: 1px solid var(--ds-color-on-primary-line);
}
@media (min-width: 640px) { .emu-consult .lf-form { padding: var(--ds-space-6); } }
.emu-consult .lf-form label,
.emu-consult .lf-label { color: var(--ds-color-on-primary-dim); }
.emu-consult .lf-required { color: var(--ds-color-accent); }
.emu-consult .lf-help { color: color-mix(in srgb, var(--ds-color-on-primary) 40%, transparent); }
.emu-consult .lf-form input,
.emu-consult .lf-form select,
.emu-consult .lf-form textarea {
color: var(--ds-color-on-primary);
background: color-mix(in srgb, var(--ds-color-on-primary) 8%, transparent);
border: 1px solid var(--ds-color-on-primary-line);
border-radius: var(--ds-radius-lg);
}
.emu-consult .lf-form input::placeholder,
.emu-consult .lf-form textarea::placeholder { color: color-mix(in srgb, var(--ds-color-on-primary) 35%, transparent); }
.emu-consult .lf-form input:focus,
.emu-consult .lf-form select:focus,
.emu-consult .lf-form textarea:focus {
border-color: color-mix(in srgb, var(--ds-color-accent) 50%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-color-accent) 30%, transparent);
outline: none;
}
/* منوی بازشوندهٔ `