/* =====================================================================
ARTICLE PRO STYLE — تنسيق احترافي لصفحات المقالات
الطريقة: ارفع هذا الملف إلى مجلد القالب ثم استدعه في
أو انسخ محتواه كاملاً داخل Appearance ► Customize ► Additional CSS
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{
--ap-ink: #0b1524; /* لون العناوين */
--ap-body: #3b4657; /* لون نص الفقرات */
--ap-accent: #0a9dff; /* الأزرق الأساسي للموقع */
--ap-accent-dark:#0468b6;
--ap-soft: #f2f8fd; /* خلفية البطاقات الفاتحة */
--ap-line: #e3ecf4; /* لون الحدود */
--ap-green: #12a150;
--ap-red: #d64545;
--ap-radius: 14px;
--ap-shadow: 0 10px 30px rgba(11,21,36,.08);
--ap-font-head: 'Sora', system-ui, sans-serif;
--ap-font-body: 'Inter', system-ui, sans-serif;
}
/* ============ 1) جسم المقال: عرض قراءة مريح وخط أنظف ============ */
article, .entry-content, .post-content, .single-content, .article-body{
font-family: var(--ap-font-body);
color: var(--ap-body);
max-width: 780px;
margin-inline: auto;
padding-inline: 20px;
font-size: 1.075rem;
line-height: 1.85;
}
article p, .entry-content p{ margin: 0 0 1.35em; }
::selection{ background: var(--ap-accent); color:#fff; }
html{ scroll-behavior: smooth; }
h1[id], h2[id], h3[id], h4[id]{ scroll-margin-top: 90px; }
/* ============ 2) عنوان المقال الرئيسي ============ */
article h1, .entry-title, .post-title{
font-family: var(--ap-font-head);
color: var(--ap-ink);
font-weight: 800;
font-size: clamp(1.7rem, 4vw, 2.5rem);
line-height: 1.25;
letter-spacing: -.02em;
margin: 1.2em 0 .7em;
}
/* خط سفلي متدرّج تحت العنوان الرئيسي */
article h1::after, .entry-title::after{
content:"";
display:block;
width: 88px; height: 5px;
margin-top: 14px;
border-radius: 99px;
background: linear-gradient(90deg, var(--ap-accent), #7fd0ff);
}
/* ============ 3) الصورة البارزة وكل صور المقال ============ */
article img, .entry-content img{
max-width: 100%;
height: auto;
border-radius: var(--ap-radius);
box-shadow: var(--ap-shadow);
display: block;
margin: 1.6em auto;
}
/* ============ 4) جدول المحتويات — يتحول إلى بطاقة أنيقة ============ */
/* يستهدف أشهر إضافات الفهرس + أي قائمة تلي عنوان Table of Contents */
#toc, .toc, #ez-toc-container, .lwptoc, #toc_container,
.article-toc{
background: linear-gradient(180deg, var(--ap-soft), #ffffff);
border: 1px solid var(--ap-line);
border-inline-start: 4px solid var(--ap-accent);
border-radius: var(--ap-radius);
padding: 22px 26px;
margin: 2em 0 2.4em;
box-shadow: var(--ap-shadow);
}
#toc h2, .toc h2, #toc_container .toc_title, .article-toc h2{
font-family: var(--ap-font-head);
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ap-ink);
margin: 0 0 12px;
}
#toc ul, .toc ul, #toc_container ul, .article-toc ul{
list-style: none;
margin: 0; padding: 0;
counter-reset: tocnum;
}
#toc > ul > li, .toc > ul > li, .article-toc > ul > li{
counter-increment: tocnum;
padding: 7px 0;
border-bottom: 1px dashed var(--ap-line);
}
#toc > ul > li:last-child, .toc > ul > li:last-child{ border-bottom: 0; }
#toc > ul > li::before, .toc > ul > li::before, .article-toc > ul > li::before{
content: counter(tocnum, decimal-leading-zero);
font-family: var(--ap-font-head);
font-weight: 700;
font-size: .8rem;
color: var(--ap-accent);
margin-inline-end: 10px;
}
#toc ul ul, .toc ul ul, .article-toc ul ul{
margin-top: 6px;
padding-inline-start: 34px;
}
#toc ul ul li, .toc ul ul li{
padding: 3px 0;
font-size: .95em;
border: 0;
}
#toc a, .toc a, #toc_container a, .article-toc a{
color: var(--ap-ink);
text-decoration: none;
transition: color .18s ease, padding .18s ease;
}
#toc a:hover, .toc a:hover, .article-toc a:hover{
color: var(--ap-accent);
padding-inline-start: 4px;
}
/* ============ 5) العناوين الفرعية H2 / H3 ============ */
article h2, .entry-content h2{
font-family: var(--ap-font-head);
color: var(--ap-ink);
font-weight: 700;
font-size: clamp(1.35rem, 3vw, 1.7rem);
line-height: 1.35;
margin: 2.2em 0 .8em;
padding-inline-start: 16px;
position: relative;
}
article h2::before, .entry-content h2::before{
content:"";
position:absolute;
inset-inline-start: 0; top: .18em; bottom: .18em;
width: 5px;
border-radius: 99px;
background: linear-gradient(180deg, var(--ap-accent), #7fd0ff);
}
article h3, .entry-content h3{
font-family: var(--ap-font-head);
color: var(--ap-ink);
font-weight: 600;
font-size: 1.22rem;
margin: 1.8em 0 .6em;
}
article h3::before, .entry-content h3::before{
content:"◆";
color: var(--ap-accent);
font-size: .65em;
margin-inline-end: 8px;
vertical-align: 2px;
}
/* ============ 6) الروابط داخل النص ============ */
article p a, .entry-content p a, article li a:not(#toc a):not(.toc a){
color: var(--ap-accent-dark);
font-weight: 600;
text-decoration: none;
background-image: linear-gradient(90deg, var(--ap-accent), var(--ap-accent));
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: 0 100%;
transition: color .2s, background-size .2s;
}
article p a:hover, .entry-content p a:hover{
color: var(--ap-accent);
background-size: 100% 35%;
background-image: linear-gradient(90deg, rgba(10,157,255,.18), rgba(10,157,255,.18));
}
/* ============ 7) القوائم العادية داخل المقال ============ */
.entry-content ul:not(#toc ul):not(.toc ul):not(.pros ul):not(.cons ul),
article ul.styled{
list-style: none;
padding-inline-start: 4px;
margin: 0 0 1.4em;
}
.entry-content ul:not(#toc ul):not(.toc ul) > li,
article ul.styled > li{
position: relative;
padding-inline-start: 26px;
margin-bottom: .55em;
}
.entry-content ul:not(#toc ul):not(.toc ul) > li::before,
article ul.styled > li::before{
content:"";
position:absolute;
inset-inline-start: 2px; top: .58em;
width: 9px; height: 9px;
border-radius: 3px;
transform: rotate(45deg);
background: linear-gradient(135deg, var(--ap-accent), #7fd0ff);
}
.entry-content ol{ padding-inline-start: 1.4em; }
.entry-content ol > li{ margin-bottom: .55em; }
.entry-content ol > li::marker{
color: var(--ap-accent);
font-weight: 700;
}
/* ============ 8) اقتباس مميز ============ */
article blockquote, .entry-content blockquote{
background: var(--ap-soft);
border: 1px solid var(--ap-line);
border-inline-start: 4px solid var(--ap-accent);
border-radius: var(--ap-radius);
padding: 20px 24px;
margin: 1.8em 0;
font-style: italic;
color: var(--ap-ink);
}
article blockquote p:last-child{ margin-bottom: 0; }
/* ============ 9) الجداول (مقارنة الأسعار مثلاً) ============ */
article table, .entry-content table{
width: 100%;
border-collapse: collapse;
margin: 1.8em 0;
border-radius: var(--ap-radius);
overflow: hidden;
box-shadow: var(--ap-shadow);
font-size: .98rem;
}
article table th{
background: linear-gradient(135deg, #0b1524, #14263f);
color: #fff;
font-family: var(--ap-font-head);
font-weight: 600;
padding: 13px 16px;
text-align: start;
}
article table td{
padding: 12px 16px;
border-bottom: 1px solid var(--ap-line);
background: #fff;
}
article table tr:nth-child(even) td{ background: #f8fbfe; }
article table tr:hover td{ background: #eef7ff; }
/* ============ 10) صناديق المميزات والعيوب ============
الاستعمال: ...
و ...
*/
.pros, .cons{
border-radius: var(--ap-radius);
padding: 20px 24px;
margin: 1.6em 0;
border: 1px solid;
}
.pros{ background:#f2fbf6; border-color:#c9ecd8; }
.cons{ background:#fdf4f4; border-color:#f3d3d3; }
.pros h3, .pros h4{ color: var(--ap-green); margin-top:0; }
.cons h3, .cons h4{ color: var(--ap-red); margin-top:0; }
.pros ul, .cons ul{ list-style:none; padding:0; margin:0; }
.pros li, .cons li{ padding: 6px 0 6px; padding-inline-start: 28px; position:relative; }
.pros li::before{
content:"✓"; position:absolute; inset-inline-start:0;
color:#fff; background:var(--ap-green);
width:19px; height:19px; border-radius:50%;
font-size:.7rem; display:grid; place-items:center; top:.45em;
}
.cons li::before{
content:"✕"; position:absolute; inset-inline-start:0;
color:#fff; background:var(--ap-red);
width:19px; height:19px; border-radius:50%;
font-size:.7rem; display:grid; place-items:center; top:.45em;
}
/* ============ 11) صناديق تنبيه ============
الاستعمال: ...
أو ...
*/
.note, .warn{
border-radius: var(--ap-radius);
padding: 16px 20px;
padding-inline-start: 52px;
margin: 1.6em 0;
position: relative;
border: 1px solid;
}
.note{ background:#f2f8fd; border-color:#cfe6f7; }
.warn{ background:#fff8ec; border-color:#f5e3bd; }
.note::before, .warn::before{
position:absolute; inset-inline-start:16px; top:14px;
font-size:1.25rem;
}
.note::before{ content:"💡"; }
.warn::before{ content:"⚠️"; }
/* ============ 12) زر دعوة لاتخاذ إجراء ============
الاستعمال: جرّب الآن */
.cta-btn{
display: inline-block;
font-family: var(--ap-font-head);
font-weight: 700;
color: #fff !important;
background: linear-gradient(135deg, var(--ap-accent), var(--ap-accent-dark));
padding: 14px 34px;
border-radius: 99px;
text-decoration: none !important;
box-shadow: 0 8px 22px rgba(10,157,255,.35);
transition: transform .18s ease, box-shadow .18s ease;
}
.cta-btn:hover{
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(10,157,255,.45);
}
/* ============ 13) شريط تقدم القراءة (يعمل مع ملف الجافاسكربت) ===== */
#reading-progress{
position: fixed;
top: 0; inset-inline-start: 0;
height: 4px; width: 0%;
background: linear-gradient(90deg, var(--ap-accent), #7fd0ff);
z-index: 9999;
transition: width .1s linear;
}
/* ============ 14) زر العودة للأعلى (يعمل مع ملف الجافاسكربت) ===== */
#back-to-top{
position: fixed;
bottom: 26px; inset-inline-end: 26px;
width: 46px; height: 46px;
border: 0; border-radius: 50%;
background: var(--ap-ink);
color: #fff;
font-size: 1.15rem;
cursor: pointer;
opacity: 0; pointer-events: none;
transform: translateY(8px);
transition: opacity .25s, transform .25s, background .25s;
box-shadow: 0 8px 22px rgba(11,21,36,.3);
z-index: 9998;
}
#back-to-top.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
#back-to-top:hover{ background: var(--ap-accent); }
/* ============ 15) ظهور تدريجي للأقسام أثناء التمرير ============ */
@media (prefers-reduced-motion: no-preference){
.fade-block{
opacity: 0;
transform: translateY(16px);
transition: opacity .55s ease, transform .55s ease;
}
.fade-block.visible{ opacity:1; transform:none; }
}
/* ============ 16) استجابة للهواتف ============ */
@media (max-width: 640px){
article, .entry-content{ font-size: 1.02rem; padding-inline: 16px; }
#toc, .toc{ padding: 18px 18px; }
article table{ display:block; overflow-x:auto; white-space:nowrap; }
.cta-btn{ display:block; text-align:center; }
}