/* تعريف المتغيرات للألوان (الوضع المظلم الافتراضي) */ :root { --bg: #0f2027; --card: #1e2a32; --text: #ffffff; --accent: #00c6ff; } /* تغيير الألوان عند تفعيل كلاس light عبر الجافاسكريبت */ body.light { --bg: #f4f4f4; --card: #ffffff; --text: #222; --accent: #0077ff; } /* تنسيقات عامة للجسم */ body { margin: 0; font-family: "Segoe UI", sans-serif; background: var(--bg); color: var(--text); transition: 0.4s; /* تنعيم التحول بين الألوان */ } /* تنسيق الحاوية الرئيسية */ .container { max-width: 400px; margin: auto; padding: 20px; text-align: center; } /* تنسيق صورة البروفايل وحركة الطفو */ .profile img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--accent); animation: float 3s ease-in-out infinite; } /* تأثير حركة الطفو للصورة */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } h1 { margin: 10px 0; } /* تنسيق أزرار الروابط */ .links a { display: flex; align-items: center; justify-content: center; gap: 15px; background: var(--card); margin: 12px 0; padding: 14px; border-radius: 12px; text-decoration: none; color: var(--text); font-size: 18px; transition: 0.3s; position: relative; overflow: hidden; font-weight: 500; } /* تأثير عند تمرير الماوس على الزر */ .links a:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } /* تمييز زر الـ CV */ .cv-btn { border: 2px solid var(--accent) !important; background: rgba(0, 198, 255, 0.1) !important; } /* تنسيق زر تبديل الوضع (Dark/Light) */ .toggle { margin: 15px; cursor: pointer; padding: 10px 15px; border-radius: 20px; border: none; background: var(--accent); color: white; font-weight: bold; } footer { margin-top: 30px; font-size: 14px; opacity: 0.7; } /* ألوان الأيقونات الخاصة بكل منصة */ .fa-whatsapp { color: #25D366; } .fa-facebook { color: #1877F2; } .fa-instagram { color: #E4405F; } .fa-snapchat { color: #FFFC00; text-shadow: 0 0 2px black; } .fa-telegram { color: #0088cc; } .fa-envelope { color: #EA4335; } .fa-linkedin { color: #0077B5; } .fa-x-twitter { color: #000000; } /* تعديل لون أيقونات معينة في الوضع الفاتح لتظل واضحة */ body.light .fa-x-twitter, body.light .fa-tiktok { color: #000; }