/* ============================================================ Sun Ray — ثيم موحّد لكل صفحات المنيو (مطابق للصفحة الرئيسية) يُحمّل آخر شيء في ليتغلّب على assets/styles.css وعلى الأنماط المضمّنة في كل صفحة. تنسيق فقط — لا يمسّ تخطيط بطاقات المنتجات (.grid / .card / .overlay). ============================================================ */ /* ---------- لوحة الألوان (افتراضي: ليلي) ---------- */ :root, .theme-dark { --bg: #1d1b19; /* قهوة سوداء / رمادي فاحم بدل الكحلي */ --card: #282420; --border: #3a3530; --text: #f0ece5; --muted: #b6b0a5; --gold: #f1d488; --gold-dark: #d8b061; --open: #86cfa6; --closed: #ef9f9f; --logo-filter: drop-shadow(0px 0px 15px rgba(241, 212, 136, 0.20)); --shadow: 0 4px 15px rgba(0, 0, 0, 0.35); } /* ---------- الوضع النهاري ---------- */ .light-mode { --bg: #fdf8ee; --card: #fffdf8; --border: #ece4d4; --text: #5b5765; --muted: #9b94a4; --gold: #c79236; --gold-dark: #a87a2a; --logo-filter: drop-shadow(0px 0px 15px rgba(199, 146, 54, 0.20)); --shadow: 0 4px 15px rgba(120, 100, 40, 0.06); } /* ---------- الجسم ---------- */ body { background: var(--bg); color: var(--text); font-family: "Cairo", sans-serif; overflow-x: hidden; transition: background .4s, color .4s; } a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } /* ---------- الهيدر ---------- */ .topbar { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 10%, transparent); transition: background 0.4s; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; max-width: 1200px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 12px; } .brand img, .logo { height: 44px; width: auto; opacity: 0.95; filter: var(--logo-filter); object-fit: contain; } .brand__en { font-weight: 900; font-size: 1.15rem; letter-spacing: 0.4px; } .brand__ar { font-size: 0.8rem; color: var(--muted); opacity: 0.85; font-weight: 700; } /* ---------- زر تبديل المود ---------- */ .switch { display: inline-grid; place-items: center; width: 52px; height: 28px; position: relative; cursor: pointer; gap: 0; } .switch input { position: absolute; inset: 0; opacity: 0; display: block; margin: 0; } .switch span { width: 100%; height: 100%; border-radius: 999px; background: var(--card); border: 1px solid var(--border); position: relative; transition: .3s; } .switch span::before { content: none; display: none; } .switch span::after { content: "🌙"; display: grid; place-items: center; font-size: 14px; position: absolute; top: 1px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #222; color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: transform .3s; } .switch input:checked + span { background: var(--card); } .switch input:checked + span::after { transform: translateX(22px); content: "☀️"; background: #fff; color: #000; } /* ---------- التبويبات ---------- */ .tabs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 24px 14px; scroll-behavior: smooth; max-width: 1200px; margin: 0 auto; } .tabs::-webkit-scrollbar { display: none; } .tabs a, .tabs .brand { white-space: nowrap; font-weight: 700; font-size: 0.9rem; color: var(--muted); padding: 8px 16px; border-radius: 999px; border: 1px solid transparent; background: transparent; box-shadow: none; transition: 0.25s; transform: none; } .tabs a:hover, .tabs .brand:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, transparent); transform: none; } .tabs a.active-tab { color: var(--bg); background: var(--gold); border-color: var(--gold); font-weight: 900; pointer-events: none; } /* ---------- المحتوى + عناوين الأقسام ---------- */ .view { padding: 20px 0 50px; } .section h2, .section-title { color: var(--gold); } /* ---------- الفوتر ---------- */ .legal { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); margin-top: auto; } /* يتغلّب على خلفية الفوتر الصلبة (#0f0f0f) في assets/styles.css بالوضع الداكن → شفاف مثل اللايت */ .theme-dark .legal { background: color-mix(in srgb, var(--bg) 72%, transparent); border-color: var(--border); } .legal__row { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 30px 24px; max-width: 1200px; margin: 0 auto; } .legal__row p { margin: 0; opacity: 0.7; } .footer-divider { width: 100%; max-width: 520px; height: 1px; background: var(--border); } .footer-icons { display: flex; gap: 12px; align-items: center; font-size: 1.12rem; } .footer-icons a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.12rem; color: var(--text); background: var(--card); border: 1px solid var(--border); transition: 0.25s; transform: none; } .footer-icons a:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); transform: translateY(-3px); box-shadow: var(--shadow); } /* زر الرئيسية: نفس شكل بقية الأيقونات (مطابق للرئيسية) */ .footer-icons a.home-btn { background: var(--card) !important; color: var(--text) !important; width: 44px; height: 44px; font-size: 1.12rem; box-shadow: none; } .footer-icons a.home-btn:hover { color: var(--gold) !important; transform: translateY(-3px); box-shadow: var(--shadow); } /* ---------- آيباد / تابلت ---------- */ @media (min-width: 768px) { .nav { padding: 18px 36px; } .brand img, .logo { height: 54px; } .brand__en { font-size: 1.35rem; } .brand__ar { font-size: 0.92rem; } .tabs { justify-content: center; flex-wrap: wrap; overflow-x: visible; padding: 14px 36px 18px; gap: 10px; } .tabs a, .tabs .brand { font-size: 1rem; padding: 10px 22px; } .legal__row { padding: 40px 36px; gap: 22px; } .footer-icons a, .footer-icons a.home-btn { width: 50px; height: 50px; font-size: 1.25rem; } } /* ============================================================ تلميح القلب — سهم دوّار يلمع على وجه كل بطاقة ليدل المستخدم أن خلفها تفاصيل (يطبَّق على كل بطاقات v60 في صفحات المنيو) ============================================================ */ .card-front::after { content: "للمزيد \f060"; /* للمزيد + fa-arrow-left (سهم مستقيم) */ font-family: 'Baloo Bhaijaan 2', "Font Awesome 6 Free", 'Cairo', sans-serif; font-weight: 900; font-size: 0.72rem; direction: rtl; position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); white-space: nowrap; z-index: 16; pointer-events: none; animation: flipHintPulse 2.2s ease-in-out infinite; } @keyframes flipHintPulse { 0%, 100% { transform: scale(1); opacity: 0.78; } 50% { transform: scale(1.06); opacity: 1; } } /* ============================================================ إصلاح iOS — انعكاس الوجه الأمامي خلف الخلفي عند القلب (backface-visibility: hidden يفشل على Safari/iOS مع التحويل 3D) الحل: نخفي الوجه غير المرئي بتبديل الشفافية عند منتصف القلب (90°) فلا يُرى أي وميض لأن البطاقة حينها على حافتها. ============================================================ */ .card-front, .card-back { transition: transform 0.8s, opacity 0s linear 0.4s, background-color 0.4s ease, color 0.4s ease; } .card-back { opacity: 0; } .card-container.flipped .card-front { opacity: 0; } .card-container.flipped .card-back { opacity: 1; } /* منع ظهور سلايد-بار عمودي عند القلب: قصّ نتوء المنظور 3D خارج البطاقة (overflow:clip لا يصنع حاوية تمرير، و overflow-clip-margin يُبقي الظل والحركة ظاهرة) */ .card-fit { overflow: hidden; overflow: clip; overflow-clip-margin: 45px; } /* ============================================================ حل الخط نهائياً — Comic Sans MS غير متوفر على iOS/أندرويد، فنُعرّفه كويب-فونت (Comic Neue، بديل مطابق لـ Comic Sans): - الأجهزة التي تملكه محلياً (ويندوز) تستعمله مباشرة (local). - غيرها (iOS/أندرويد/ماك) تُحمّله من الويب — فيتطابق الشكل في كل مكان. لا حاجة لتغيير أي تعريف font-family موجود. ============================================================ */ @font-face { font-family: 'Comic Sans MS'; src: local('Comic Sans MS'), local('ComicSansMS'), url('https://cdn.jsdelivr.net/npm/@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Comic Sans MS'; src: local('Comic Sans MS Bold'), local('Comic Sans MS'), url('https://cdn.jsdelivr.net/npm/@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }