/* این CSS برای شبیه‌سازی ظاهر مورد نظر در یک ویرایشگر بلوک یا محیط وب طراحی شده است.
ممکن است نیاز به تنظیمات اضافی در محیط ویرایشگر شما داشته باشد تا کاملاً به شکل دلخواه نمایش داده شود.
هدینگ‌ها (h1, h2, h3) با تگ‌های HTML و استایل‌های inline ارائه شده‌اند تا امکان تشخیص خودکار در ویرایشگر بلوک را افزایش دهند.
این کد HTML به گونه‌ای طراحی شده که قابلیت ریسپانسیو بودن را از طریق flexbox و media query (برای اینفوگرافیک) پشتیبانی کند. */
body {
font-family: ‘Vazirmatn’, sans-serif; /* فونت پیشنهادی برای نمایش بهینه فارسی */
line-height: 1.8;
color: #333;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
h1, h2, h3 {
font-weight: bold;
color: #004d40; /* رنگ سبز تیره برای تیترها */
margin-top: 2em;
margin-bottom: 1em;
}
h1 {
font-size: 2.5em; /* سایز بزرگ برای تیتر اصلی */
text-align: center;
color: #00796b; /* سبز آبی برای تیتر اصلی */
border-bottom: 3px solid #e0f2f1; /* خط زیر تیتر */
padding-bottom: 15px;
margin-bottom: 1.5em;
}
h2 {
font-size: 1.8em; /* سایز متوسط برای تیترهای اصلی بخش‌ها */
color: #00695c; /* سبز متوسط */
border-left: 8px solid #80cbc4; /* حاشیه کناری برای جلوه بصری */
padding-left: 15px;
background-color: #e0f2f1; /* پس‌زمینه روشن برای تیتر h2 */
padding-top: 10px;
padding-bottom: 10px;
border-radius: 5px;
}
h3 {
font-size: 1.4em; /* سایز کوچکتر برای زیرتیترها */
color: #004d40; /* سبز تیره */
border-bottom: 2px dashed #b2dfdb; /* خط زیرین نقطه‌چین */
padding-bottom: 5px;
}
p {
margin-bottom: 1em;
text-align: justify;
}
ul, ol {
list-style-type: disc;
margin-right: 20px; /* برای راست‌چین کردن لیست‌ها */
margin-bottom: 1em;
}
ol {
list-style-type: decimal;
}
li {
margin-bottom: 0.5em;
}
table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
font-size: 0.95em;
}
th, td {
border: 1px solid #b2dfdb;
padding: 12px 15px;
text-align: right; /* راست‌چین برای زبان فارسی */
}
th {
background-color: #00796b;
color: #fff;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #e0f2f1; /* رنگ متناوب برای ردیف‌های جدول */
}
.highlight-box {
background-color: #f0f8f7; /* پس‌زمینه برای باکس‌های هایلایت */
border-left: 5px solid #00796b;
padding: 15px 20px;
margin: 2em 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.call-to-action {
background-color: #26a69a; /* رنگ سبز روشن برای فراخوان عمل */
color: #fff;
padding: 20px;
text-align: center;
border-radius: 10px;
margin-top: 3em;
font-size: 1.2em;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.call-to-action a {
color: #fff;
text-decoration: underline;
font-weight: bold;
}
.infographic-block {
background-color: #f2f7fb;
border: 1px dashed #a7d9f7;
padding: 25px;
margin: 3em 0;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
text-align: center;
font-size: 1.1em;
}
.infographic-block > div {
display: flex; /* استفاده از فلکس‌باکس برای چیدمان ریسپانسیو آیتم‌ها */
flex-wrap: wrap;
justify-content: center;
gap: 20px; /* فاصله بین آیتم‌ها */
}
.infographic-item {
flex: 1 1 45%; /* آیتم‌ها در دو ستون قرار می‌گیرند */
max-width: 48%;
min-width: 280px; /* حداقل عرض برای جلوگیری از بهم ریختگی */
background-color: #e1f5fe;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
text-align: right;
}
.infographic-item:hover {
background-color: #bbdefb;
transform: translateY(-3px); /* افکت هاور برای جلوه بصری */
transition: all 0.3s ease;
}
.infographic-icon {
font-size: 2em;
color: #2196f3;
margin-bottom: 10px;
display: block;
}
.infographic-title {
font-weight: bold;
color: #1976d2;
font-size: 1.2em;
margin-bottom: 8px;
}
.infographic-description {
color: #424242;
}
/* ریسپانسیو برای موبایل و تبلت */
@media (max-width: 768px) {
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
.infographic-item {
width: 98%; /* آیتم‌های اینفوگرافیک روی موبایل به صورت تک ستونی نمایش داده می‌شوند */
max-width: none;
flex-basis: 100%;
}
.container {
padding: 10px;
}
ul, ol {
margin-right: 15px;
}
}