/* ========================================================================== Pax Memoria — Open-Source Investigations Unified Design System (shared tokens + components) --------------------------------------------------------------------- يُضاف بعد Tailwind CDN وخطوط جوجل في أي صفحة تحقيق. الهدف: توحيد الألوان والخطوط والمكوّنات المتكررة بدل ما يكون كل تحقيق بتصميم مستقل. Light mode = default (يطابق الموقع الرئيسي). Dark mode = class="dark" على ، بنفس آلية toggleTheme()/localStorage الموجودة بالموقع الرئيسي. ========================================================================== */ :root { /* -- Light (default) — مطابقة لهوية Pax الرسمية -- */ --pm-bg: #eeeff3; --pm-surface: #ffffff; --pm-headline: #073A43; /* عناوين */ --pm-text: #3a3a3a; /* نص المتن */ --pm-muted: #6b7280; /* تواريخ، وصف صور، نص ثانوي */ --pm-accent: #1E8395; /* روابط، نقاط الخط الزمني، تفاعل */ --pm-accent-soft: #9ADAE3; /* تظليل خفيف، حدود مضيئة */ --pm-highlight: #FFB3AB; /* استخدام زخرفي محدود */ --pm-border: #e2e4e8; --pm-card-bg: #ffffff; --pm-event-bg: #f4f5f8; /* خلفية أحداث الخط الزمني */ --pm-shadow: 0 10px 25px -5px rgba(7,58,67,0.08), 0 8px 10px -6px rgba(7,58,67,0.05); /* لون شريك موحّد (بدل 3 قيم أصفر متضاربة كانت مستخدمة سابقاً) */ --pm-partner: #b7791f; /* نص/حدود على خلفية فاتحة (تباين كافٍ) */ --pm-partner-bg: #fdf3d9; } html.dark { --pm-bg: #03171B; --pm-surface: #06262D; --pm-headline: #ffffff; --pm-text: #d7dade; --pm-muted: #9aa5a8; --pm-accent: #FFB3AB; --pm-accent-soft: #1E8395; --pm-highlight: #FFB3AB; --pm-border: #0A3B46; --pm-card-bg: #06262D; --pm-event-bg: #0A3B46; --pm-shadow: 0 10px 25px -5px rgba(0,0,0,0.35), 0 8px 10px -6px rgba(0,0,0,0.25); --pm-partner: #f2c869; --pm-partner-bg: rgba(242,200,105,0.12); } /* ------------------------------------------------------------------------ الأساسيات ------------------------------------------------------------------------ */ .pm-investigation { background: var(--pm-bg); color: var(--pm-text); font-family: 'IBM Plex Sans Arabic', 'Inria Sans', sans-serif; transition: background-color .3s ease, color .3s ease; } .pm-investigation h1, .pm-investigation h2, .pm-investigation h3, .pm-investigation .pm-headline { color: var(--pm-headline); font-weight: 700; } .pm-investigation .pm-brand-font { font-family: 'Inria Sans', sans-serif; } .pm-investigation a.pm-link { color: var(--pm-accent); text-decoration: underline; text-underline-offset: 3px; } .pm-investigation ::selection { background: var(--pm-accent); color: #fff; } .pm-investigation .pm-prose a, .pm-investigation figcaption a, .pm-investigation .pm-quote a, .pm-investigation .pm-callout a { color: var(--pm-accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } /* ------------------------------------------------------------------------ 1) الهيرو (Hero) — يقبل صورة ثابتة (Ken Burns) أو فيديو خلفية ------------------------------------------------------------------------ */ .pm-hero { position: relative; overflow: hidden; min-height: 60vh; display: flex; align-items: flex-end; } .pm-hero video, .pm-hero .pm-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .pm-hero .pm-hero-img.pm-kenburns { animation: pm-kenburns 22s ease-in-out infinite alternate; } @keyframes pm-kenburns { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.12) translate(-1.5%, -1.5%); } } .pm-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(3,23,27,0.92) 0%, rgba(3,23,27,0.55) 45%, rgba(3,23,27,0.15) 100%); } .pm-hero .pm-hero-content { position: relative; z-index: 2; padding: 2.5rem 1.5rem; width: 100%; max-width: 56rem; margin: 0 auto; } .pm-hero h1 { color: #fff; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.3; } .pm-hero .pm-dek { color: #e8e9ec; font-weight: 300; margin-top: .75rem; font-size: clamp(1rem, 2vw, 1.25rem); } /* ------------------------------------------------------------------------ 2) شريط البيانات الوصفية (Byline) ------------------------------------------------------------------------ */ .pm-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; max-width: 48rem; margin: -2.5rem auto 0; position: relative; z-index: 3; background: var(--pm-surface); border: 1px solid var(--pm-border); border-radius: 1rem; padding: 1.25rem 1.5rem; box-shadow: var(--pm-shadow); font-size: .875rem; color: var(--pm-muted); } .pm-byline img.pm-author-photo { width: 2.5rem; height: 2.5rem; border-radius: 9999px; object-fit: cover; } .pm-byline .pm-author-name { color: var(--pm-headline); font-weight: 700; } .pm-byline .pm-partner-credit { display: inline-flex; align-items: center; gap: .375rem; background: var(--pm-partner-bg); color: var(--pm-partner); padding: .25rem .75rem; border-radius: 9999px; font-weight: 700; font-size: .75rem; } /* ------------------------------------------------------------------------ 3) صندوق المنهجية — موقع ثابت دائماً (بعد شريط البيانات مباشرة، قبل المتن) المحتوى النصي يتغيّر لكل تحقيق، لكن الموضع والشكل موحّد دائماً. ------------------------------------------------------------------------ */ .pm-methodology { max-width: 48rem; margin: 1.5rem auto 0; padding: 1.5rem 1.75rem; background: var(--pm-event-bg); border-inline-start: 4px solid var(--pm-accent); border-radius: .5rem; display: flex; gap: 1rem; align-items: flex-start; } .pm-methodology .pm-methodology-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--pm-accent); color: #fff; display: flex; align-items: center; justify-content: center; } .pm-methodology h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .5rem; } .pm-methodology p { font-size: .9375rem; line-height: 1.8; color: var(--pm-text); } .pm-methodology p + p { margin-top: .75rem; } /* ------------------------------------------------------------------------ 4) متن المقال ------------------------------------------------------------------------ */ .pm-prose { max-width: 48rem; margin: 2.5rem auto; line-height: 2; font-size: 1.0625rem; } .pm-prose h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; } .pm-prose h3 { font-size: 1.125rem; margin: 2rem 0 .75rem; } .pm-prose p { margin-bottom: 1.25rem; } /* ------------------------------------------------------------------------ 5) الصور والتعليقات — object-fit: contain دائماً (لأهمية الحفاظ على الإطار الكامل للصورة في التحقق المفتوح المصدر) ------------------------------------------------------------------------ */ figure.pm-figure, .pm-gallery-item { max-width: 48rem; margin: 2rem auto; background: var(--pm-card-bg); border: 1px solid var(--pm-border); border-radius: .75rem; overflow: hidden; } figure.pm-figure img, .pm-gallery-item img { width: 100%; max-height: 32rem; object-fit: contain; background: #000; cursor: zoom-in; } figure.pm-figure figcaption { padding: .875rem 1.25rem; font-size: .8125rem; color: var(--pm-muted); line-height: 1.6; } figure.pm-figure.pm-figure-wide { max-width: 68rem; } figure.pm-figure.pm-figure-narrow { max-width: 32rem; } /* Lightbox */ .pm-lightbox-active { position: fixed; inset: 0; z-index: 100; background: rgba(3,23,27,.94); display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; } .pm-lightbox-active img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ------------------------------------------------------------------------ 6) سلايدر المقارنة التفاعلي (قبل/بعد) — المعيار الموحّد لكل مقارنات الصور ------------------------------------------------------------------------ */ .pm-compare { position: relative; max-width: 48rem; margin: 2rem auto; aspect-ratio: 16/10; border-radius: .75rem; overflow: hidden; border: 1px solid var(--pm-border); user-select: none; touch-action: pan-y; } .pm-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .pm-compare .pm-compare-after { z-index: 1; } .pm-compare .pm-compare-before-wrap { position: absolute; inset: 0; z-index: 2; overflow: hidden; clip-path: inset(0 0 0 50%); /* يُحدَّث بالـ JS، القيمة الافتراضية RTL-safe */ } .pm-compare .pm-compare-before-wrap img { position: absolute; inset: 0; } .pm-compare .pm-compare-handle { position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; z-index: 3; width: 3px; background: #fff; transform: translateX(-50%); cursor: ew-resize; box-shadow: 0 0 0 1px rgba(0,0,0,.2); } .pm-compare .pm-compare-handle::after { content: "⇔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 2.5rem; height: 2.5rem; background: #fff; color: var(--pm-headline); border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,0,0,.25); } .pm-compare .pm-compare-label { position: absolute; bottom: .75rem; z-index: 4; background: rgba(3,23,27,.72); color: #fff; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .25rem .625rem; border-radius: 9999px; } .pm-compare .pm-compare-label-before { inset-inline-start: .75rem; } .pm-compare .pm-compare-label-after { inset-inline-end: .75rem; } /* ------------------------------------------------------------------------ 7) الخط الزمني (Timeline / Rail) — عمود ملاصق (sticky) بالجانب ------------------------------------------------------------------------ */ .pm-timeline { max-width: 56rem; margin: 2.5rem auto; display: flex; gap: 2rem; } .pm-timeline .pm-rail { position: relative; flex-shrink: 0; width: 5.5rem; display: none; } @media (min-width: 768px) { .pm-timeline .pm-rail { display: block; } } .pm-timeline .pm-rail-line { position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 2px; background: var(--pm-border); } .pm-timeline .pm-stamp { position: sticky; top: 6rem; font-size: .75rem; font-weight: 700; color: var(--pm-accent); text-align: center; padding: .5rem 0; } .pm-timeline .pm-events { flex: 1; display: flex; flex-direction: column; gap: 1.5rem; } .pm-timeline .pm-event { position: relative; background: var(--pm-event-bg); border: 1px solid var(--pm-border); border-radius: .75rem; padding: 1.25rem 1.5rem; } .pm-timeline .pm-dot { position: absolute; top: 1.5rem; inset-inline-start: -2.35rem; width: .75rem; height: .75rem; border-radius: 9999px; background: var(--pm-accent); box-shadow: 0 0 0 4px var(--pm-bg); display: none; } @media (min-width: 768px) { .pm-timeline .pm-dot { display: block; } } /* ------------------------------------------------------------------------ 8) مشغّل صوت مخصّص ------------------------------------------------------------------------ */ .pm-audio { max-width: 48rem; margin: 2rem auto; background: var(--pm-card-bg); border: 1px solid var(--pm-border); border-radius: .75rem; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; } .pm-audio .pm-audio-play { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--pm-accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; } .pm-audio .pm-audio-track { flex: 1; height: 6px; background: var(--pm-border); border-radius: 9999px; cursor: pointer; position: relative; } .pm-audio .pm-audio-progress { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0%; background: var(--pm-accent); border-radius: 9999px; } .pm-audio .pm-audio-time { font-size: .75rem; color: var(--pm-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------ 9) غلاف إنفوجرافيك (تمرير أفقي للرسوم الكبيرة) ------------------------------------------------------------------------ */ .pm-infographic-wrapper { max-width: 68rem; margin: 2rem auto; overflow-x: auto; border-radius: .75rem; border: 1px solid var(--pm-border); background: var(--pm-card-bg); } .pm-infographic-wrapper img { display: block; max-width: none; height: auto; min-height: 20rem; } /* ------------------------------------------------------------------------ 10) شارة شريك (partner accent) — استخدام محدود وموحّد بدل ألوان متفرقة ------------------------------------------------------------------------ */ .pm-partner-box { max-width: 48rem; margin: 2rem auto; padding: 1rem 1.25rem; border-radius: .75rem; background: var(--pm-partner-bg); border: 1px solid var(--pm-partner); color: var(--pm-partner); font-size: .875rem; display: flex; align-items: center; gap: .75rem; } /* ------------------------------------------------------------------------ 4.1) اقتباس تمهيدي / وصف مشهد (Intro quote) — يُستخدم أعلى المتن غالباً ------------------------------------------------------------------------ */ .pm-quote { max-width: 48rem; margin: 2rem auto; padding: 1.5rem 1.75rem; background: var(--pm-card-bg); border: 1px solid var(--pm-border); border-inline-start: 6px solid var(--pm-accent-soft); border-radius: .5rem; } .pm-quote p { color: var(--pm-text); font-size: 1rem; line-height: 1.9; margin-bottom: .75rem; } .pm-quote p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------ 4.2) فقرة/اقتباس مُبرَز (استنتاج، شهادة، بيان رسمي) ------------------------------------------------------------------------ */ .pm-callout { max-width: 48rem; margin: 1.75rem auto; padding: 1.25rem 1.5rem; background: color-mix(in srgb, var(--pm-accent) 6%, var(--pm-bg)); border-inline-start: 4px solid var(--pm-accent); border-radius: .5rem; color: var(--pm-text); font-size: 1.0625rem; line-height: 1.9; } .pm-callout strong { color: var(--pm-headline); } .pm-callout.pm-callout-quote { font-style: normal; font-size: 1.125rem; } /* فاصل بصري بسيط بين أقسام التحقيق */ .pm-divider { max-width: 48rem; margin: 2.5rem auto; height: 3px; border: none; border-radius: 999px; background: linear-gradient(to left, var(--pm-accent), var(--pm-accent-soft)); opacity: .6; } /* ------------------------------------------------------------------------ 4.3) بطاقة قسم تحليلي — تجميع بصري لقسم فرعي كبير داخل تحقيق طويل ------------------------------------------------------------------------ */ .pm-section { max-width: 48rem; margin: 2.5rem auto; padding: 1.75rem 2rem; background: var(--pm-card-bg); border: 1px solid var(--pm-border); border-radius: 1rem; box-shadow: var(--pm-shadow); } .pm-section > h2:first-child, .pm-section > h3:first-child { margin-top: 0 !important; } .pm-prose h4 { font-size: 1rem; margin: 1.5rem 0 .5rem; color: var(--pm-headline); } .pm-credit-line { font-size: .8rem; color: var(--pm-muted); border-top: 1px solid var(--pm-border); padding-top: .75rem; margin-top: .75rem; }