/*
* ═══════════════════════════════════════════════
* _base.css — استایل‌های پایه مشترک BaseV5
* این فایل باید در هر صفحه گزارش لینک شود
* ═══════════════════════════════════════════════
*
* شامل:
* - import توکن‌های طراحی (_tokens.css)
* - ریست CSS
* - فونت Vazirmatn
* - سیستم کانتینر (EMcontainer)
* - انیمیشن‌های مشترک
* - جداکننده‌ی تمام‌عرضِ بین بخش‌ها (EM-divider)
* ═══════════════════════════════════════════════
*/
@import url('./_tokens.css');
@import url('./fonts.css');
/* ══ RESET ══ */
* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body {
background: var(--c-white, #ffffff);
min-height: 100vh;
font-family: var(--font-family, 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif);
color: var(--c-text, #343A40);
/* اعداد فارسی پیش‌فرض — هر فونتی که OpenType ss01/ss02 داشته باشد
اعداد لاتین را به فارسی رندر می‌کند. فونت Vazirmatn-FD ذاتاً اعداد
فارسی دارد، این تنظیم برای fallbackها / فونت‌های الترناتیو است. */
font-feature-settings: "ss01" on, "ss02" on;
}
/* خنثی‌کننده — جاهایی که صراحتاً متن انگلیسی می‌خواهیم (URL, brand, code) */
.en, .ltr {
direction: ltr;
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
font-feature-settings: normal;
}
/* ══ CONTAINER SYSTEM ══ */
.EMcontainer { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 33px }
.EMcontainer__content { width: 100%; max-width: 900px; margin: 0 auto }
/* ══ SHARED ANIMATIONS ══ */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(8px) }
to { opacity: 1; transform: translateY(0) }
}
@keyframes drawCurve {
from { stroke-dashoffset: 1400 }
to { stroke-dashoffset: 0 }
}
@keyframes barGrow {
from { transform: scaleY(0) }
to { transform: scaleY(1) }
}
/* ═══════════════════════════════════════════════
LIST STYLES — لیست‌های خوانای خودکار (مینیمال)
روی هر ul/ol داخل EMcontainer__content اعمال میشه
طراحی: بدون باکس، با یک خط عمودی کمرنگ سمت راست
و مارکر دایره‌ای کوچک، برای خوانایی طولانی
═══════════════════════════════════════════════ */
.EMcontainer__content ul,
.EMcontainer__content ol {
list-style: none;
padding: 10px 18px 10px 0;
margin: 20px 0 26px;
display: flex;
flex-direction: column;
gap: 18px;
border-right: 2px solid #F1F3F4;
}
.EMcontainer__content ul li,
.EMcontainer__content ol li {
position: relative;
padding: 0 22px 0 4px;
color: #343A40;
font-size: 16px;
font-weight: 400;
line-height: 34px;
text-align: justify;
}
/* مارکر ul — نقطه کوچک سبز روی خط عمودی (وسط‌چین عمودی آیتم) */
.EMcontainer__content ul li::before {
content: '';
position: absolute;
top: 50%;
right: -26px;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
border: 2.5px solid #12B886;
box-shadow: 0 0 0 3px #fff;
transition: background .25s ease, border-color .25s ease;
}
.EMcontainer__content ul li:hover::before {
background: #12B886;
}
/* مارکر ol — عدد دایره‌ای (وسط‌چین عمودی آیتم) */
.EMcontainer__content ol { counter-reset: em-list }
.EMcontainer__content ol li { counter-increment: em-list; padding-right: 10px }
.EMcontainer__content ol li::before {
content: counter(em-list);
position: absolute;
top: 50%;
right: -32px;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
border: 1.5px solid #12B886;
color: #12B886;
font-size: 12px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 3px #fff;
transition: background .25s ease, color .25s ease;
}
.EMcontainer__content ol li:hover::before {
background: #12B886;
color: #fff;
}
/* لیست تودرتو */
.EMcontainer__content li > ul,
.EMcontainer__content li > ol {
margin: 10px 0 4px;
padding: 6px 14px 6px 0;
gap: 10px;
border-right-color: #F7F8F9;
}
.EMcontainer__content li > ul li,
.EMcontainer__content li > ol li {
font-size: 15px;
line-height: 30px;
color: #4B5563;
}
.EMcontainer__content li > ul li::before { border-color: #9CA3AF; width: 8px; height: 8px; right: -18px }
/* responsive */
@media screen and (max-width: 768px) {
.EMcontainer__content ul,
.EMcontainer__content ol { gap: 14px; padding-right: 14px }
.EMcontainer__content ul li,
.EMcontainer__content ol li { font-size: 15px; line-height: 30px }
.EMcontainer__content ul li::before { right: -19px; width: 9px; height: 9px }
.EMcontainer__content ol li::before { right: -28px; width: 24px; height: 24px; font-size: 11px }
}
@media screen and (max-width: 576px) {
.EMcontainer__content ul,
.EMcontainer__content ol { gap: 12px; padding-right: 12px; margin: 16px 0 20px }
.EMcontainer__content ul li,
.EMcontainer__content ol li { font-size: 14px; line-height: 28px }
.EMcontainer__content ul li::before { right: -17px }
.EMcontainer__content ol li::before { right: -26px }
}
/* کلاس خنثی‌کننده — اگر جایی لیست بدون استایل خواستیم */
.EM-list-plain,
.EM-list-plain ul,
.EM-list-plain ol { list-style: none; padding: 0; margin: 0; gap: 0; border: none !important }
.EM-list-plain li {
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
.EM-list-plain li::before { display: none !important }
/* ══ RESPONSIVE CONTAINER ══ */
@media screen and (max-width: 576px) {
.EMcontainer { padding: 0 15px }
}
/* ═══════════════════════════════════════════════
SECTION TITLE — عنوان بخش (مشترک همه تست‌ها)
فاصله سکشن‌ها از اینجا تنظیم میشه تا یکپارچه بمونه
تست‌ها می‌تونن با override محلی تغییرش بدن
═══════════════════════════════════════════════ */
.section-main-title { margin-bottom: 28px; padding-top: 96px }
.section-main-title.is-first { padding-top: 30px }
.section-main-title h2 {
color: #343A40;
font-size: 28px;
font-weight: 800;
line-height: 38px;
border-radius: 8px 0 0 8px;
background: #E6FCF5;
padding: 0 5px 0 12px;
position: relative;
display: inline-block;
margin-bottom: 18px;
text-align: right;
}
.section-main-title h2 > div {
position: absolute;
top: -26px;
right: 0;
display: flex;
align-items: center;
gap: 4px;
}
.section-main-title h2 div[data-title]::before {
content: attr(data-title);
color: #12B886;
font-size: 17px;
font-weight: 700;
line-height: 23px;
background-color: #E6FCF5;
display: inline-block;
padding: 0 6px;
border-radius: 8px;
}
.section-main-title p {
color: #343A40;
text-align: justify;
font-size: 18px;
font-weight: 400;
line-height: 34px;
}
@media screen and (max-width: 768px) {
.section-main-title { padding-top: 72px }
.section-main-title h2 { font-size: 22px; line-height: 32px }
.section-main-title p { font-size: 16px; line-height: 30px }
}
@media screen and (max-width: 576px) {
.section-main-title { padding-top: 56px }
.section-main-title h2 { font-size: 20px; line-height: 28px }
.section-main-title h2 div[data-title]::before { font-size: 13px }
}
/* ═══════════════════════════════════════════════
SECTION DIVIDER — نوارِ خاکستریِ تمام‌عرض بین بخش‌ها
استفاده: درست قبل از div بخشِ بعدی
(داخلِ همان @if/@isset که بخش را می‌پوشاند → نوارِ تکراری نمی‌ماند؛
بخشِ اول جداکننده ندارد؛ پیوست‌ها: )
داخلِ EMcontainer__content هم تا دو لبه‌ی صفحه کشیده می‌شود:
box-shadow پهن + clip-path که فقط بالا/پایین را می‌بُرد — بدونِ اسکرولِ افقی.
فاصله‌ی بالای عنوانِ بخشِ بعدی (به‌جای ۹۶px) از اینجا کم می‌شود.
═══════════════════════════════════════════════ */
.EM-divider {
height: 20px;
margin-top: 72px;
background: #F8F9FA;
box-shadow: 0 0 0 100vmax #F8F9FA;
clip-path: inset(0 -100vmax);
}
.EM-divider + .section-main-title,
.EM-divider + * > .section-main-title:first-child { padding-top: 72px }
@media screen and (max-width: 768px) {
.EM-divider { margin-top: 56px }
.EM-divider + .section-main-title,
.EM-divider + * > .section-main-title:first-child { padding-top: 60px }
}
@media screen and (max-width: 576px) {
.EM-divider { height: 14px; margin-top: 44px }
.EM-divider + .section-main-title,
.EM-divider + * > .section-main-title:first-child { padding-top: 52px }
}