/* theme.css — مصدر واحد لألوان الموقع كله. يُحمَّل قبل أي ملف أنماط آخر في كل صفحة، بما فيها لوحة التحكم. غيّر اللون هنا فقط ← يتغيّر في الموقع واللوحة معًا. القيم الخاصة بكل ملف (نصف القطر، عرض الحاوية، الظل) تبقى في مكانها لأنها تختلف فعلًا بين الموقع واللوحة. ══════════════════════ المظاهر (الثيمات) ══════════════════════ المظهر يُختار من لوحة التحكم ← صفحة الإعدادات ← تبويب «المظهر»، فتكتب اللوحة السمة data-theme على وسم في كل صفحة. بلا سمة = المظهر الذهبي الافتراضي أدناه. لماذا كل الألوان متغيّرات وليست قيمًا مكتوبة؟ لأن التوهّج والظلال كانت تستعمل rgba(216,180,90,…) حرفيًا، فلو غُيّر الذهبي وحده تبقى كل الهالات ذهبية والمظهر الجديد نصف مطبَّق. لذلك يوجد --gold-rgb بجانب --gold: الأول للشفافية والثاني للّون الصريح. */ :root { /* ---- الخلفيات ---- */ --bg: #08080b; --bg2: #0d0d12; --card: #131319; --card2: #1a1a22; /* ---- الحدود ---- */ --line: #26262f; --line2: #33333f; /* ---- النصوص ---- */ --txt: #f4f2ec; --muted: #a5a199; /* ---- الهوية: الذهبي ---- */ --gold: #d8b45a; --gold2: #f2dc9e; --gold-dim: rgba(216, 180, 90, .13); /* مكوّنات اللون للشفافية — تُستعمل هكذا: rgba(var(--gold-rgb), .3) */ --gold-rgb: 216, 180, 90; --gold2-rgb: 242, 220, 158; /* لون النص فوق الأزرار الذهبية (تباين عالٍ مع اللون المميّز) */ --on-gold: #141008; /* ---- حالات ---- */ --ok: #4caf7d; --err: #e0574d; /* ---- الحركة ---- */ --e: cubic-bezier(.22, 1, .36, 1); } /* ═══════════════════════ ٢ · غرفة السينما ═══════════════════════ أسود دافئ مائل للعنّابي + ضوء بروجيكتور كهرماني. الحركة كلها في آخر الملف (شعاع · غبار · حبيبات فيلم · ستائر). */ [data-theme="cinema"] { --bg: #0a0507; --bg2: #11070a; --card: #180a0e; --card2: #210f14; --line: #37171d; --line2: #4d2028; --txt: #f7efe6; --muted: #b39a90; --gold: #e8b25c; --gold2: #ffdca4; --gold-dim: rgba(232, 178, 92, .14); --gold-rgb: 232, 178, 92; --gold2-rgb: 255, 220, 164; --on-gold: #1b0d04; --ok: #5cbb86; --err: #f06a5e; } /* ═══════════════════════ ٣ · أزرق ليلي ═══════════════════════ */ [data-theme="midnight"] { --bg: #05080f; --bg2: #080d17; --card: #0e1420; --card2: #151d2c; --line: #1f2a3d; --line2: #2c3b54; --txt: #eef3fb; --muted: #93a3b9; --gold: #58c8e8; --gold2: #aae7f8; --gold-dim: rgba(88, 200, 232, .13); --gold-rgb: 88, 200, 232; --gold2-rgb: 170, 231, 248; --on-gold: #041420; --ok: #46c58d; --err: #ef6a63; } /* ═══════════════════════ ٤ · زمرّدي ═══════════════════════ */ [data-theme="emerald"] { --bg: #040a08; --bg2: #071310; --card: #0c1a16; --card2: #12241e; --line: #1c3329; --line2: #274637; --txt: #eff8f2; --muted: #99b6a7; --gold: #4fd3a2; --gold2: #a8f2d4; --gold-dim: rgba(79, 211, 162, .13); --gold-rgb: 79, 211, 162; --gold2-rgb: 168, 242, 212; --on-gold: #03150e; --ok: #4fd3a2; --err: #ef6a63; } /* ═══════════════════════ ٥ · بنفسجي ملكي ═══════════════════════ */ [data-theme="royal"] { --bg: #07050e; --bg2: #0c0817; --card: #140e22; --card2: #1c142e; --line: #2b2140; --line2: #3c2d58; --txt: #f3effa; --muted: #a99ec1; --gold: #bb8cf2; --gold2: #ddc7ff; --gold-dim: rgba(187, 140, 242, .14); --gold-rgb: 187, 140, 242; --gold2-rgb: 221, 199, 255; --on-gold: #120720; --ok: #55c894; --err: #ef6a63; } /* ════════════════════════════════════════════════════════════════ حركة غرفة السينما ════════════════════════════════════════════════════════════════ أربع طبقات بلا أي وسم HTML جديد — عناصر زائفة على و: html::before شعاع البروجيكتور (خلف المحتوى) body::before ذرّات الغبار في الضوء (خلف المحتوى) body::after ستائر المسرح جانبًا (خلف المحتوى) html::after حبيبات الفيلم والإطار المعتم (فوق كل شيء) لماذا عناصر زائفة؟ صفحات الموقع ملفات ثابتة مفحوصة، وإضافة وسوم زخرفية داخلها تعني تعديل تسع صفحات وزيادة حجمها بلا فائدة. والعناصر الزائفة تعمل أيضًا بلا جافاسكربت. ترتيب الطبقات: الخلفية على والجسم شفاف، فتظهر الطبقات ذات z-index السالب فوق الخلفية وتحت المحتوى بلا أي تدخّل في ترتيب العناصر الحالي (الهيدر ١٠٠ · صندوق العرض ٣٠٠ · شاشة التحميل ٤٠٠). */ [data-theme="cinema"] { background: var(--bg); } [data-theme="cinema"] body { background: transparent; } /* ---- شعاع البروجيكتور: مخروط من أعلى الوسط يتمايل ببطء ---- */ [data-theme="cinema"]::before { content: ""; position: fixed; inset: -10% -30% 0; z-index: -1; pointer-events: none; background: linear-gradient(177deg, rgba(var(--gold2-rgb), .20) 0%, rgba(var(--gold-rgb), .09) 32%, rgba(var(--gold-rgb), .03) 62%, transparent 85%); /* المخروط: ضيّق عند العدسة فوق، متسع على الشاشة تحت */ clip-path: polygon(47.5% 0%, 52.5% 0%, 88% 100%, 12% 100%); transform-origin: 50% 0; animation: ci-beam 14s ease-in-out infinite alternate; will-change: transform; } /* ---- ذرّات الغبار العالقة في الضوء ---- */ [data-theme="cinema"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-repeat: repeat; background-size: 340px 340px; background-image: radial-gradient(1.4px 1.4px at 38px 52px, rgba(var(--gold2-rgb), .55), transparent 100%), radial-gradient(1.1px 1.1px at 152px 118px, rgba(var(--gold2-rgb), .40), transparent 100%), radial-gradient(1.7px 1.7px at 268px 38px, rgba(var(--gold2-rgb), .30), transparent 100%), radial-gradient(1.2px 1.2px at 92px 246px, rgba(var(--gold2-rgb), .45), transparent 100%), radial-gradient(1.5px 1.5px at 214px 292px, rgba(var(--gold2-rgb), .25), transparent 100%), radial-gradient(1px 1px at 306px 196px, rgba(var(--gold2-rgb), .38), transparent 100%); animation: ci-dust 34s linear infinite; will-change: background-position; } /* ---- ستائر المسرح + الإطار المعتم ---- الاثنان في طبقة واحدة: العناصر الزائفة الأربعة كلها مشغولة، والإطار يجب أن يظهر في كل الصفحات لا في التي تحوي قسم الهيرو وحدها. */ [data-theme="cinema"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: /* الإطار المعتم حول الشاشة */ radial-gradient(120% 95% at 50% 42%, transparent 42%, rgba(0, 0, 0, .32) 76%, rgba(0, 0, 0, .64) 100%), /* الستارة اليمنى */ linear-gradient(to left, rgba(74, 12, 22, .95) 0, rgba(74, 12, 22, .55) 40%, transparent 100%) right / 190px 100% no-repeat, /* الستارة اليسرى */ linear-gradient(to right, rgba(74, 12, 22, .95) 0, rgba(74, 12, 22, .55) 40%, transparent 100%) left / 190px 100% no-repeat; /* طيّات القماش — ظلال داخلية متدرّجة على حافتي الستارتين */ box-shadow: inset 38px 0 34px -30px rgba(0, 0, 0, .85), inset 92px 0 34px -30px rgba(0, 0, 0, .70), inset 146px 0 34px -30px rgba(0, 0, 0, .55), inset -38px 0 34px -30px rgba(0, 0, 0, .85), inset -92px 0 34px -30px rgba(0, 0, 0, .70), inset -146px 0 34px -30px rgba(0, 0, 0, .55); } /* ---- حبيبات الفيلم + الإطار المعتم: الطبقة العليا ---- الضوضاء مولَّدة بـfeTurbulence داخل SVG مضمّن كـdata: وسياسة أمان المحتوى تسمح بـimg-src 'self' data: فتعمل بلا استثناء. */ [data-theme="cinema"]::after { content: ""; position: fixed; inset: -60px; /* هامش يمنع ظهور الحواف أثناء الاهتزاز */ z-index: 9999; pointer-events: none; /* لا يعترض أي نقرة */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); opacity: .10; mix-blend-mode: overlay; animation: ci-grain .7s steps(1, end) infinite; will-change: transform; } @keyframes ci-beam { from { transform: rotate(-1.6deg); opacity: .85; } 50% { opacity: 1; } to { transform: rotate( 1.6deg); opacity: .88; } } @keyframes ci-dust { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 40px -340px, -30px -340px, 55px -340px, -48px -340px, 22px -340px, -18px -340px; } } /* اهتزاز الحبيبات: قفزات حادّة لا انتقال ناعم — هكذا تبدو حبيبة الفيلم */ @keyframes ci-grain { 0% { transform: translate(0, 0); } 10% { transform: translate(-6%, -4%); } 20% { transform: translate(-9%, 3%); } 30% { transform: translate( 5%, -7%); } 40% { transform: translate(-3%, 8%); } 50% { transform: translate(-8%, 4%); } 60% { transform: translate( 7%, 0); } 70% { transform: translate(0, 6%); } 80% { transform: translate( 4%, -3%); } 90% { transform: translate(-5%, 5%); } 100% { transform: translate(0, 0); } } /* شاشة صغيرة: الستائر تأكل عرض المحتوى — يبقى الإطار المعتم وحده */ @media (max-width: 900px) { [data-theme="cinema"] body::after { background: radial-gradient(125% 95% at 50% 42%, transparent 46%, rgba(0, 0, 0, .30) 78%, rgba(0, 0, 0, .58) 100%); box-shadow: none; } [data-theme="cinema"]::before { inset: -10% -10% 0; } } /* من يطلب تقليل الحركة يحصل على ألوان السينما بلا أي تحريك */ @media (prefers-reduced-motion: reduce) { [data-theme="cinema"]::before, [data-theme="cinema"]::after, [data-theme="cinema"] body::before { animation: none; } [data-theme="cinema"]::after { opacity: .06; } }