/* ==========================================================================
أَعْيَادُ السَّيِّدَةِ الْعَذْرَاء — ورقة الأنماط الرئيسية
تربية مسيحية · الصف الخامس · الدرس ١٥
--------------------------------------------------------------------------
الفهرس:
1. المتغيّرات (Design tokens)
2. إعادة الضبط والأساسيات
3. الاتجاه العربي (RTL) والخطوط
4. عناصر النموذج والأزرار وإمكانية الوصول
5. نظام الأيقونات (SVG masks)
6. الحركات (Animations)
7. الوسائط والصور
8. نظام الطباعة
========================================================================== */
/* ── 1. المتغيّرات ───────────────────────────────────────────────────────── */
:root {
--navy: #16264a;
--navy-soft: #23335e;
--gold: #c9a227;
--gold-light: #e8d59a;
--cream: #faf5ea;
--sand: #f3ead6;
--line: #ddcba4;
--ok: #3f7d55;
--bad: #b3503f;
--font-body: 'Baloo Bhaijaan 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: 'Aref Ruqaa', 'Amiri', serif;
--font-scripture: 'Amiri', 'Aref Ruqaa', serif;
--radius-sm: 12px;
--radius-md: 18px;
--radius-lg: 24px;
--tap: 46px; /* أصغر مساحة لمس مقبولة */
}
/* ── 2. إعادة الضبط والأساسيات ──────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
html {
/* يمنع تكبير الخط تلقائيًا عند تدوير الجهاز */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
background: var(--navy);
font-family: var(--font-body);
color: var(--cream);
-webkit-tap-highlight-color: transparent;
overflow-wrap: break-word;
}
/* ارتفاع الشاشة الحقيقي على الجوال (شريط المتصفح المتحرك) */
.app-shell {
min-height: 100vh;
min-height: 100svh;
background: var(--navy);
}
.screen {
min-height: 100vh;
min-height: 100svh;
}
/* الشريط العلوي الثابت */
.app-bar {
position: sticky;
top: 0;
z-index: 5;
background: rgba(22, 38, 74, 0.94);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(232, 213, 154, 0.22);
}
/* ── 3. الاتجاه العربي والخطوط ──────────────────────────────────────────── */
/* الاتجاه يُضبط على — هذه القواعد تعالج الحالات المختلطة */
/* أي رقم أو نص لاتيني داخل جملة عربية يبقى في مكانه الصحيح */
.ltr {
direction: ltr;
unicode-bidi: isolate;
}
/* عزل الأيقونات والرموز حتى لا تقلب ترتيب الكلمات حولها */
.bidi-isolate {
unicode-bidi: isolate;
}
a {
color: var(--gold);
text-decoration: none;
}
a:hover {
color: var(--gold-light);
}
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 700;
}
.scripture {
font-family: var(--font-scripture);
}
/* ── 4. النماذج والأزرار وإمكانية الوصول ────────────────────────────────── */
button,
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
}
button {
/* الأزرار في النموذج تستخدم أنماطًا سطرية؛ هذه القواعد المشتركة فقط */
appearance: none;
-webkit-appearance: none;
}
textarea {
resize: vertical;
}
/* حلقة تركيز واضحة لمستخدمي لوحة المفاتيح فقط — كانت مفقودة تمامًا */
:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 3px;
border-radius: 6px;
}
button:focus-visible,
a:focus-visible {
outline: 3px solid var(--gold-light);
outline-offset: 3px;
}
/* على الخلفية الفاتحة نحتاج تباينًا أعلى */
[data-paper] :focus-visible,
.panel :focus-visible {
outline-color: var(--navy);
}
/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ── 5. نظام الأيقونات ──────────────────────────────────────────────────── */
/* أيقونات SVG أحادية اللون ترث لون النص المحيط بها.
تحلّ محلّ الإيموجي الذي كان يختلف شكله من متصفّح لآخر
ويقلب اتجاه النص العربي أحيانًا. */
.ico {
display: inline-block;
inline-size: 1.15em;
block-size: 1.15em;
flex: none;
vertical-align: -0.2em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
unicode-bidi: isolate;
}
.ico-book {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-doc {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-video {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-mic {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-image {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-open {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-print {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-bulb {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-headphones {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-sound-on {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-sound-off {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-guide {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* أيقونات شريط التنقّل — الأسهم معكوسة لتناسب الاتجاه من اليمين إلى اليسار */
.ico-back {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-map {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* «السابقة» في RTL تشير إلى اليمين */
.ico-prev {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* «التالية» في RTL تشير إلى اليسار */
.ico-next {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* في المتصفحات القديمة التي لا تدعم mask نُخفي الأيقونة بدل إظهار مربّع أسود */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
.ico {
display: none;
}
}
/* ── 5ب. شريط التنقّل — قطعةٌ عائمةٌ موحَّدةٌ على كلِّ الأجهزة ────────────
قطعةٌ صغيرةٌ عائمةٌ في وسطِ الأسفل بحوافٍّ دائريّةٍ وزجاجٍ ضبابيّ.
مرفوعةٌ عن حافّةِ الشَّاشةِ فيسهُلُ الوصولُ إليها بالإبهام، وتتخطّى
شريطَ الهومِ في الآيفون تلقائيًّا، والمحتوى يمرُّ تحتَها فتبدو الشَّاشةُ أخفّ.
العرضُ يتبعُ المحتوى: يتَّسِعُ ويضيقُ حسبَ عددِ الأزرارِ الظّاهرة. */
.bottom-nav {
position: fixed;
inset-inline: 0;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
z-index: 40;
width: max-content;
max-width: calc(100% - 20px);
margin-inline: auto;
display: flex;
align-items: stretch;
justify-content: center;
gap: 5px;
padding: 8px;
border-radius: 999px;
background: rgba(19, 32, 63, 0.74);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(232, 213, 154, 0.22);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.44), 0 2px 8px rgba(0, 0, 0, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
/* المتصفّحاتُ التي لا تدعمُ الزُّجاجَ الضَّبابيّ تحصلُ على خلفيّةٍ معتمة */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.bottom-nav {
background: rgba(19, 32, 63, 0.97);
}
}
/* الأزرار أفقيّةٌ افتراضيًّا على كلِّ الأجهزة: الأيقونةُ والكلمةُ جنبَ بعضِهما،
وهو أوضحُ وأوسعُ من وضعِ الكلمةِ تحتَ الأيقونة */
.nav-btn {
flex: 0 1 auto;
min-width: 0;
min-height: 48px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 17px;
border: 0;
border-radius: 999px;
background: transparent;
color: rgba(250, 245, 234, 0.75);
font-weight: 700;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.nav-btn:hover {
background: rgba(255, 255, 255, 0.11);
color: var(--cream);
}
.nav-btn:active {
transform: scale(0.94);
}
.nav-btn .ico {
inline-size: 20px;
block-size: 20px;
vertical-align: 0;
}
.nav-txt {
font-size: 13.5px;
line-height: 1.2;
white-space: nowrap;
}
.nav-pos {
align-self: center;
flex: none;
padding: 0 9px;
font-size: 13px;
font-weight: 800;
color: var(--gold);
direction: ltr;
unicode-bidi: isolate;
white-space: nowrap;
}
/* الشاشات تترك مساحةً أسفلها حتى لا يغطّي الشريطُ آخرَ المحتوى */
.app-shell:has(.bottom-nav) .screen {
padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
}
/* بديل للمتصفّحات التي لا تدعم :has */
@supports not selector(:has(*)) {
.screen {
padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ── 5ج. الحاسوب واللابتوب: القطعةُ أبعدُ عن الحافّةِ وأوسعُ قليلًا ───────── */
@media (min-width: 901px) {
.bottom-nav {
bottom: 24px;
max-width: min(760px, calc(100% - 48px));
}
.nav-btn {
padding: 0 19px;
min-height: 46px;
}
.nav-txt {
font-size: 14px;
}
/* حركةٌ لطيفةٌ شبيهةٌ بارتفاعِ أيقوناتِ الـDock */
.nav-btn:hover {
transform: translateY(-2px);
}
.app-shell:has(.bottom-nav) .screen {
padding-bottom: 110px !important;
}
}
/* ── 5د. عارض الصفحات (بديل PDF) ────────────────────────────────────────
صفحاتُ الكتابِ وشرائحُ المُلخَّصِ مُصيَّرةٌ مسبقًا كصورٍ webp، لأنَّ عرضَ
ملفِّ PDF داخلَ