/* این استایل‌ها به عنوان پیشنهاد برای نمایش در مرورگر و ویرایشگر بلوک ارائه شده‌اند.
پس از کپی در ویرایشگر بلوک، می‌توانید این استایل‌ها را به صورت دستی در بخش CSS سفارشی یا تنظیمات بلوک‌ها اعمال کنید تا جلوه بصری مدنظر حاصل شود. */
body {
font-family: ‘Vazirmatn’, ‘IranSans’, Arial, sans-serif; /* فونت پیشنهادی برای خوانایی بهتر فارسی */
line-height: 1.8;
color: #333; /* رنگ متن اصلی */
background-color: #f8f8f8; /* رنگ پس‌زمینه کلی مقاله */
margin: 0;
padding: 20px;
direction: rtl; /* جهت نوشتار راست به چپ */
text-align: justify; /* توجیه متن برای زیبایی */
}
.container {
max-width: 900px; /* حداکثر عرض محتوا برای خوانایی در دستگاه‌های بزرگ */
margin: 0 auto;
background-color: #fff; /* پس‌زمینه سفید برای محتوای اصلی */
padding: 30px 40px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
/* هدینگ H1 */
h1 {
font-size: 2.8em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 800; /* بسیار ضخیم */
color: #003366; /* رنگ آبی تیره آکادمیک */
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 3px solid #4A90E2; /* خط زیرین برای تاکید */
line-height: 1.3;
}
/* هدینگ H2 */
h2 {
font-size: 2em; /* سایز مناسب برای بخش‌های اصلی */
font-weight: 700; /* ضخیم */
color: #004080; /* آبی تیره کمی روشن‌تر */
margin-top: 45px;
margin-bottom: 25px;
position: relative;
padding-right: 15px; /* برای فضای آیکون یا نوار کنار */
}
h2::before {
content: ‘📚’; /* آیکون برای زیبایی */
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 0.8em;
color: #4A90E2;
}
/* هدینگ H3 */
h3 {
font-size: 1.5em; /* سایز برای زیربخش‌ها */
font-weight: 600; /* نیمه‌ضخیم */
color: #0050A0; /* آبی متوسط */
margin-top: 35px;
margin-bottom: 20px;
padding-right: 10px;
border-right: 4px solid #7DB97D; /* نوار کناری سبز ملایم */
}
p {
margin-bottom: 20px;
text-align: justify;
}
ul, ol {
margin-bottom: 20px;
padding-right: 25px;
}
li {
margin-bottom: 10px;
line-height: 1.7;
}
strong {
color: #003366; /* تاکید با رنگ آبی تیره */
}
.table-wrapper {
margin: 30px 0;
overflow-x: auto; /* برای جدول ریسپانسیو */
}
table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.95em;
text-align: right;
}
th, td {
border: 1px solid #ddd;
padding: 12px 15px;
}
th {
background-color: #e0eaf3; /* پس‌زمینه روشن برای هدر جدول */
color: #003366;
font-weight: 700;
}
td {
background-color: #fcfdff;
}
tr:nth-child(even) td {
background-color: #f7f9fb; /* رنگ متناوب برای ردیف‌های جدول */
}
.info-box {
background-color: #e6f7ff; /* پس‌زمینه روشن آبی برای نکات مهم */
border-right: 5px solid #4A90E2;
padding: 20px 25px;
margin: 30px 0;
border-radius: 5px;
line-height: 1.7;
text-align: justify;
}
.info-box strong {
color: #003366;
}
.infographic-alternative {
background-color: #f0f8f0; /* پس‌زمینه سبز ملایم برای اینفوگرافیک */
border-radius: 10px;
padding: 30px;
margin: 40px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
text-align: center;
position: relative;
}
.infographic-alternative h2 {
color: #006400; /* سبز تیره برای عنوان اینفوگرافیک */
margin-bottom: 30px;
text-align: center;
border-bottom: none;
padding-right: 0;
}
.infographic-alternative h2::before {
content: ‘💡’;
position: static;
transform: none;
margin-left: 10px;
}
.infographic-step {
display: flex;
align-items: center;
justify-content: flex-end; /* برای نمایش راست به چپ */
margin-bottom: 25px;
text-align: right;
}
.infographic-step:last-child {
margin-bottom: 0;
}
.infographic-icon {
font-size: 2.2em;
color: #7DB97D; /* آیکون‌های سبز */
margin-left: 15px;
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}
.infographic-text {
flex-grow: 1;
}
.infographic-text strong {
color: #006400; /* متن مهم سبز تیره */
display: block;
margin-bottom: 5px;
font-size: 1.1em;
}
.infographic-step-line {
width: 2px;
background-color: #c9e6c9; /* خطوط راهنما بین مراحل */
height: 30px;
margin: 0 auto; /* مرکز قرار گرفتن خط */
display: block;
}
/* ریسپانسیو برای موبایل و تبلت */
@media (max-width: 768px) {
body {
padding: 15px;
}
.container {
padding: 20px 25px;
}
h1 {
font-size: 2em;
margin-bottom: 30px;
}
h2 {
font-size: 1.6em;
margin-top: 35px;
margin-bottom: 20px;
}
h3 {
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 15px;
}
.infographic-step {
flex-direction: column-reverse; /* آیکون بالای متن در موبایل */
align-items: flex-end;
text-align: right;
}
.infographic-icon {
margin: 0 0 10px 0;
}
.infographic-step-line {
height: 20px;
}
}

/* ریسپانسیو برای تبلت و لپتاپ */
@media (min-width: 769px) and (max-width: 1200px) {
.container {
padding: 30px 35px;
}
}
/* برای تلویزیون و مانیتورهای بزرگ‌تر */
@media (min-width: 1201px) {
body {
font-size: 1.1em; /* افزایش اندازه فونت برای خوانایی از دور */
}
h1 {
font-size: 3.5em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.8em;
}
.container {
max-width: 1100px;
padding: 50px 60px;
}
}

<!– –>

“`