@import url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-Variable-font-face.css’);

body {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif;
direction: rtl;
text-align: right;
margin: 0;
padding: 0;
background-color: #F0F2F5; /* A slightly darker background for the whole page */
color: #333333;
}

.article-container {
max-width: 900px;
margin: 20px auto;
padding: 25px;
background-color: #F8F9FA;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
line-height: 1.8;
box-sizing: border-box; /* Include padding in element’s total width and height */
}

h1, h2, h3 {
color: #2C3E50; /* Dark Blue/Grayish Blue */
font-weight: bold;
margin-top: 1.5em;
margin-bottom: 0.8em;
line-height: 1.3;
}

h1 {
font-size: 2.5em; /* Approximately 40px */
text-align: center;
color: #2C3E50;
margin-bottom: 1.2em;
}

h2 {
font-size: 2em; /* Approximately 32px */
color: #34495E; /* Slightly Lighter Dark Blue */
border-bottom: 2px solid #EAECEE; /* Light Gray for separator */
padding-bottom: 8px;
margin-top: 2.5em;
}

h3 {
font-size: 1.5em; /* Approximately 24px */
color: #5D6D7E; /* Medium Grayish Blue */
margin-top: 2em;
border-right: 4px solid #27AE60; /* Emerald Green for a subtle accent */
padding-right: 10px;
}

p {
font-size: 1em; /* Approximately 16px */
color: #333333; /* Dark Gray */
margin-bottom: 1em;
text-align: justify;
}

ul {
list-style: none; /* Remove default bullet points */
padding: 0;
margin: 1em 0;
}

ul li {
position: relative;
padding-right: 25px;
margin-bottom: 0.8em;
font-size: 1em;
color: #333333;
}

ul li::before {
content: ‘•’; /* Custom bullet point */
color: #27AE60; /* Emerald Green accent */
position: absolute;
right: 0;
font-weight: bold;
font-size: 1.2em;
line-height: 1.8; /* Align with text */
}

table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
background-color: #FFFFFF;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners are applied to content */
}

th, td {
border: 1px solid #EAECEE;
padding: 12px 15px;
text-align: right;
vertical-align: top;
font-size: 0.95em;
color: #333333;
}

th {
background-color: #EBF5F0; /* Light green tint for table headers */
color: #2C3E50;
font-weight: bold;
font-size: 1.05em;
}

tr:nth-child(even) {
background-color: #FBFDFC; /* Slightly different background for even rows */
}

/* Infographic Styling – This will be a structured list styled to look like an infographic */
.infographic-section {
background-color: #EBF5F0; /* Light green background */
border-radius: 10px;
padding: 25px;
margin: 2.5em 0;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.infographic-section h2 {
text-align: center;
color: #27AE60; /* Green accent for infographic title */
border-bottom: none;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 1.5em;
}

.infographic-step {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
gap: 15px; /* Space between icon and text */
}

.infographic-step-icon {
flex-shrink: 0; /* Prevent icon from shrinking */
background-color: #27AE60;
color: #FFFFFF;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2em;
box-shadow: 0 2px 8px rgba(39, 174, 96, 0.4);
}

.infographic-step-content h3 {
margin-top: 0;
margin-bottom: 5px;
color: #34495E;
border-right: none;
padding-right: 0;
font-size: 1.3em;
}

.infographic-step-content p {
margin-bottom: 0;
font-size: 0.95em;
color: #4A4A4A;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.article-container {
margin: 10px;
padding: 15px;
}
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }
p, ul li, th, td { font-size: 0.9em; }
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin-bottom: 15px;
border: 1px solid #EAECEE;
border-radius: 8px;
overflow: hidden;
}
td {
border: none;
position: relative;
padding-right: 50%;
text-align: left; /* Changed from right for better mobile readability */
}
td::before {
content: attr(data-label);
position: absolute;
right: 6px; /* Adjust as needed */
width: 45%;
padding-left: 10px;
font-weight: bold;
color: #5D6D7E;
text-align: right;
}
.infographic-step {
flex-direction: column;
align-items: center;
text-align: center;
}
.infographic-step-content {
padding-right: 0;
}
}

@media (max-width: 480px) {
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
.infographic-step-icon {
width: 35px;
height: 35px;
font-size: 1.1em;
}
}

توضیحات تکمیلی برای استفاده در ویرایشگر بلوک یا سایت

محتوای فوق به صورت یک بلوک HTML کامل طراحی شده است تا پس از کپی در بخش ویرایشگر بلوک (مانند گوتنبرگ در وردپرس) یا ویرایشگرهای مشابه، ساختار و طراحی اولیه را حفظ کند.

نحوه استفاده:

• در ویرایشگر بلوک (مانند گوتنبرگ):
  • یک بلوک جدید از نوع “HTML سفارشی” (Custom HTML) ایجاد کنید.
  • کد HTML ارائه شده در بالا را به طور کامل در آن بلوک کپی و جایگذاری کنید.
  • با انتشار یا پیش‌نمایش صفحه، طرح و رنگ‌بندی اعمال شده را مشاهده خواهید کرد.
  • نکته: در برخی ویرایشگرها، ممکن است نیاز باشد بعد از جایگذاری، بلوک HTML را به بلوک‌های معمولی (مثلاً بلوک پاراگراف، عنوان، لیست) تبدیل کنید تا امکان ویرایش‌های جزئی‌تر فراهم شود. در این صورت، حتماً از ویرایشگر خود برای اعمال مجدد (یا تایید) استایل‌های H1, H2, H3 استفاده کنید.
• در ویرایشگر کلاسیک یا کد سایت:
  • کد HTML را به طور کامل در بخش HTML یا Source Code ویرایشگر خود قرار دهید.
  • توجه: بلاک <style>...</style> شامل تنظیمات CSS کلی و واکنش‌گرا (Responsive) است. بهترین روش برای استفاده از آن، قرار دادن محتوای داخل تگ <style> در فایل CSS قالب وب‌سایت شما یا بخش “CSS سفارشی” (Custom CSS) است تا عملکرد و پایداری بهتری داشته باشد. در غیر این صورت، در هر بار کپی-پیست، این استایل‌ها نیز تکرار خواهند شد.

واکنش‌گرایی (Responsive Design):

طراحی این مقاله به گونه‌ای است که بر روی انواع دستگاه‌ها (موبایل، تبلت، لپ‌تاپ، تلویزیون) به خوبی نمایش داده شود. استفاده از واحدهای em و max-width به همراه media queries (که در بلوک <style> تعریف شده‌اند) تضمین‌کننده این امر است. جدول برای نمایش بهتر در موبایل، به حالت پشته‌ای (stacked) تغییر می‌کند.

اینفوگرافیک:

“بخش بصری: مراحل تلفیق نظریه و عمل در پایان‌نامه کارآفرینی” به صورت یک ساختار متنی با آیکون‌های شماره‌گذاری شده و رنگ‌بندی خاص طراحی شده است تا در ویرایشگر بلوک ظاهری شبیه به یک اینفوگرافیک داشته باشد. در صورت تمایل می‌توانید این بخش را با یک تصویر اینفوگرافیک واقعی جایگزین کنید و سپس توضیحات متنی آن را به بخش “Alt Text” تصویر منتقل کنید.