/* ============================================================ FitCheck PRO — نظام الأنماط الموحّد (عادي / ليلي / نهاري / وردي) يُطبَّق عبر السمة data-theme على وسم القيم: "normal" (افتراضي) | "night" (OLED أسود خالص) | "day" (نهاري فاتح) | "pink" (وردي أنثوي) ============================================================ */ /* ─── نمط الليل (OLED أسود خالص) ─── */ html[data-theme="night"] { --bg: #000000; --glass: rgba(5,5,5,0.97); } html[data-theme="night"] body { background-image: none !important; } /* ─── نمط النهار (فاتح) ─── */ html[data-theme="day"] { --bg: #eef0f2; --glass: rgba(255,255,255,0.85); } html[data-theme="day"] body { background-image: linear-gradient(rgba(255,255,255,0.9),rgba(238,240,242,0.96)),url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=1000&auto=format&fit=crop') !important; color: #1f2937; } /* عناوين وأبيض ← داكن */ html[data-theme="day"] [class*="text-white"] { color:#111827 !important; } /* درجات الرمادي ← رمادي داكن مقروء */ html[data-theme="day"] [class*="text-gray-"] { color:#4b5563 !important; } /* الصناديق الداكنة الشفافة ← فاتحة */ html[data-theme="day"] [class*="bg-black/"] { background-color: rgba(17,24,39,0.05) !important; } /* حدود رمادية داكنة ← فاتحة */ html[data-theme="day"] [class*="border-gray-"] { border-color: rgba(17,24,39,0.12) !important; } /* حقول الإدخال والاختيار */ html[data-theme="day"] input, html[data-theme="day"] select, html[data-theme="day"] textarea { color:#111827 !important; background-color: rgba(17,24,39,0.04) !important; } html[data-theme="day"] input::placeholder { color: rgba(17,24,39,0.35) !important; } /* الحاويات الزجاجية والبطاقات */ html[data-theme="day"] .glass-box, html[data-theme="day"] .glass, html[data-theme="day"] .ex-card, html[data-theme="day"] .bento-card, html[data-theme="day"] .rest-card, html[data-theme="day"] .cardio-card, html[data-theme="day"] .tip-card, html[data-theme="day"] .streak-card, html[data-theme="day"] .predict-badge, html[data-theme="day"] .export-modal, html[data-theme="day"] .cta-card { border-color: rgba(17,24,39,0.1) !important; } /* الشريط السفلي والهيدر */ html[data-theme="day"] .bottom-nav { background: rgba(255,255,255,0.92) !important; border-top-color: rgba(17,24,39,0.1) !important; } html[data-theme="day"] header.glass-box, html[data-theme="day"] header.glass { border-bottom-color: rgba(17,24,39,0.1) !important; } html[data-theme="day"] footer { border-top-color: rgba(17,24,39,0.1) !important; } html[data-theme="day"] .nav-link { color:#6b7280 !important; } html[data-theme="day"] .nav-link.active { color: var(--accent) !important; } /* أزرار التحديد */ html[data-theme="day"] .sel-btn { border-color: rgba(17,24,39,0.12) !important; } html[data-theme="day"] .day-tab { border-color: rgba(17,24,39,0.12) !important; } /* مودال الفيديو يبقى داكناً دوماً لراحة العين أثناء المشاهدة */ html[data-theme="day"] .video-overlay { background: rgba(0,0,0,0.96) !important; } /* ─── نمط وردي أنثوي (Feminine Pink) ─── لوحة الألوان: Soft Blush #FFDBDA | Old Rose #DB7F8E | Pale Slate #D5C5C8 Cool Steel #9DA3A4 | Taupe Grey #604D53 */ html[data-theme="pink"] { --bg: #2a1f22; --glass: rgba(96,77,83,0.55); --accent: #db7f8e; --accent2: rgba(219,127,142,0.12); } html[data-theme="pink"] body { background-color: #2a1f22 !important; background-image: linear-gradient(rgba(42,31,34,0.88),rgba(42,31,34,0.95)), linear-gradient(135deg,#604d53 0%,#9da3a4 45%,#db7f8e 75%,#ffdbda 100%) !important; background-attachment: fixed !important; color: #ffdbda; } /* عناوين وأبيض ← وردي فاتح ناعم */ html[data-theme="pink"] [class*="text-white"] { color:#ffe9e8 !important; } /* درجات الرمادي ← Pale Slate / Cool Steel دافئة */ html[data-theme="pink"] [class*="text-gray-"] { color:#d5c5c8 !important; } /* العنصر المميز الأخضر الليموني الأساسي (#ccff00) ← Old Rose */ html[data-theme="pink"] [class*="text-[#ccff00]"], html[data-theme="pink"] #themeToggleBtn:hover, html[data-theme="pink"] .nav-link.active, html[data-theme="pink"] .day-tab.active, html[data-theme="pink"] .sel-btn.active { color: #db7f8e !important; } html[data-theme="pink"] .day-tab.active, html[data-theme="pink"] .sel-btn.active { background: rgba(219,127,142,0.18) !important; border-color: #db7f8e !important; } /* الصناديق الداكنة الشفافة ← دافئة Taupe */ html[data-theme="pink"] [class*="bg-black/"] { background-color: rgba(96,77,83,0.35) !important; } /* حدود رمادية داكنة ← Cool Steel شفافة */ html[data-theme="pink"] [class*="border-gray-"] { border-color: rgba(157,163,164,0.25) !important; } /* حقول الإدخال والاختيار */ html[data-theme="pink"] input, html[data-theme="pink"] select, html[data-theme="pink"] textarea { color:#ffe9e8 !important; background-color: rgba(96,77,83,0.4) !important; border-color: rgba(219,127,142,0.3) !important; } html[data-theme="pink"] input::placeholder { color: rgba(255,219,218,0.4) !important; } /* الحاويات الزجاجية والبطاقات */ html[data-theme="pink"] .glass-box, html[data-theme="pink"] .glass, html[data-theme="pink"] .ex-card, html[data-theme="pink"] .bento-card, html[data-theme="pink"] .rest-card, html[data-theme="pink"] .cardio-card, html[data-theme="pink"] .tip-card, html[data-theme="pink"] .streak-card, html[data-theme="pink"] .predict-badge, html[data-theme="pink"] .export-modal, html[data-theme="pink"] .cta-card, html[data-theme="pink"] .cta-workout-card { background: rgba(96,77,83,0.45) !important; border-color: rgba(219,127,142,0.25) !important; } html[data-theme="pink"] .cta-workout-icon { background: rgba(219,127,142,0.2) !important; color:#db7f8e !important; } /* الشريط السفلي والهيدر */ html[data-theme="pink"] .bottom-nav { background: rgba(42,31,34,0.92) !important; border-top-color: rgba(219,127,142,0.2) !important; } html[data-theme="pink"] header.glass-box, html[data-theme="pink"] header.glass { border-bottom-color: rgba(219,127,142,0.2) !important; } html[data-theme="pink"] footer { border-top-color: rgba(219,127,142,0.2) !important; background: rgba(42,31,34,0.7) !important; } html[data-theme="pink"] .nav-link { color:#d5c5c8 !important; } /* أزرار التحديد وتبويبات الأيام */ html[data-theme="pink"] .sel-btn { border-color: rgba(219,127,142,0.25) !important; } html[data-theme="pink"] .day-tab { border-color: rgba(219,127,142,0.25) !important; } /* أزرار CTA الرئيسية (لون أخضر ليموني ← وردي) */ html[data-theme="pink"] #calcBtn, html[data-theme="pink"] [class*="bg-[#ccff00]"] { background: #db7f8e !important; color: #2a1f22 !important; } html[data-theme="pink"] [class*="hover:bg-[#b5ee00]"]:hover { background:#c96d7d !important; } /* أزرار hover ليموني ← وردي */ html[data-theme="pink"] [class*="hover:border-lime-400"]:hover { border-color:#db7f8e !important; } html[data-theme="pink"] [class*="focus:border-lime-400"]:focus { border-color:#db7f8e !important; } /* زر الفيديو */ html[data-theme="pink"] .video-btn { background: linear-gradient(135deg, rgba(219,127,142,0.18), rgba(219,127,142,0.05)) !important; border-color: rgba(219,127,142,0.5) !important; color: #db7f8e !important; } html[data-theme="pink"] .video-title-text { color:#db7f8e !important; } /* مودال الفيديو يبقى داكناً دوماً لراحة العين أثناء المشاهدة */ html[data-theme="pink"] .video-overlay { background: rgba(20,14,16,0.96) !important; } /* شريط BMI والعناصر الملونة الأخرى تبقى واضحة فوق الخلفية الوردية */ html[data-theme="pink"] .streak-dot.active { background:#db7f8e !important; box-shadow:0 0 6px rgba(219,127,142,0.6) !important; } /* زر الحفظ في الملف الرئيسي وزر إضافة الوقت (مؤقت الراحة) وأزرار حدود Lime */ html[data-theme="pink"] [class*="border-lime-400"] { border-color: rgba(219,127,142,0.4) !important; } html[data-theme="pink"] [class*="bg-lime-400"] { background-color: rgba(219,127,142,0.15) !important; } html[data-theme="pink"] [class*="border-[#ccff00]"] { border-color: rgba(219,127,142,0.3) !important; } html[data-theme="pink"] [class*="bg-[#ccff00]"] { background-color: rgba(219,127,142,0.1) !important; } /* ─── زر تبديل النمط في الهيدر ─── */ .theme-toggle-btn { position: relative; overflow: hidden; } .theme-toggle-btn i { transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; } .theme-toggle-btn.spin i { transform: rotate(280deg) scale(1.15); } /* شارة صغيرة توضح النمط الحالي (اختياري تحت الأيقونة على الشاشات الكبيرة) */ .theme-label { font-size: 8px; color: rgba(255,255,255,0.35); text-align: center; margin-top: 2px; letter-spacing: .02em; } html[data-theme="day"] .theme-label { color: rgba(17,24,39,0.4); }