/* ============================================ الثيمات العشرة — تُفعّل عبر data-theme على ============================================ */ /* ===== الثيم 1: سايبر داكن (الافتراضي) ===== */ html[data-theme="1"] { --bg: #0a0e17; --bg-2: #0d1421; --bg-3: #161d2b; --text: #e6edf3; --text-2: #9ca3af; --text-3: #6b7280; --primary: #00ff88; --primary-2: #00cc6e; --on-primary: #0a0e17; --border: #1f2937; --header-bg: rgba(10,14,23,.95); --footer-bg: #0d1421; --card-bg: #0d1421; --tag-bg: rgba(0,255,136,.12); --tag-color: #00ff88; --btn-radius: 6px; --radius: 12px; --shadow: 0 15px 40px rgba(0,255,136,.18); --glow: 0 0 12px rgba(0, 255, 136, 0.35); --hero-grad: radial-gradient(ellipse at 70% 20%, rgba(0,255,136,.08), transparent 60%); } /* ===== الثيم 2: عصري فاتح ===== */ html[data-theme="2"] { --bg: #f8fafc; --bg-2: #ffffff; --bg-3: #eff6ff; --text: #1e293b; --text-2: #64748b; --text-3: #94a3b8; --primary: #2563eb; --primary-2: #1d4ed8; --on-primary: #ffffff; --border: #e2e8f0; --header-bg: rgba(255,255,255,.95); --footer-bg: #0f172a; --card-bg: #ffffff; --tag-bg: #eff6ff; --tag-color: #2563eb; --btn-radius: 10px; --radius: 16px; --shadow: 0 18px 40px rgba(37,99,235,.13); --hero-grad: linear-gradient(180deg, #ffffff, #f8fafc); } html[data-theme="2"] footer.site-footer { color: #94a3b8; } html[data-theme="2"] .footer-grid h4 { color: #fff; } /* ===== الثيم 3: بنفسجي متدرج ===== */ html[data-theme="3"] { --bg: #13111c; --bg-2: #1c1929; --bg-3: #262136; --text: #ece9f7; --text-2: #a5a0b8; --text-3: #6e6889; --primary: #a78bfa; --primary-2: #8b5cf6; --on-primary: #13111c; --border: rgba(139,92,246,.2); --header-bg: rgba(19,17,28,.92); --footer-bg: #1c1929; --card-bg: #1c1929; --tag-bg: rgba(236,72,153,.13); --tag-color: #f9a8d4; --btn-radius: 30px; --radius: 20px; --shadow: 0 20px 50px rgba(139,92,246,.18); --hero-grad: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,.18), transparent 65%); } html[data-theme="3"] .btn { background: linear-gradient(90deg, #8b5cf6, #ec4899); color: #fff; } html[data-theme="3"] .logo { background: linear-gradient(90deg, #a78bfa, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="3"] .logo span { color: transparent; } html[data-theme="3"] .stat b { background: linear-gradient(90deg, #a78bfa, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ===== الثيم 4: مجلة تقنية ===== */ html[data-theme="4"] { --bg: #ffffff; --bg-2: #f7f7f7; --bg-3: #efefef; --text: #111111; --text-2: #555555; --text-3: #888888; --primary: #ff3b3b; --primary-2: #e22b2b; --on-primary: #ffffff; --border: #e5e5e5; --header-bg: #ffffff; --footer-bg: #111111; --card-bg: #ffffff; --tag-bg: #ff3b3b; --tag-color: #ffffff; --btn-radius: 4px; --radius: 6px; --shadow: 0 12px 30px rgba(0,0,0,.12); --hero-grad: none; } html[data-theme="4"] header.site-header { border-bottom: 3px solid #111; } html[data-theme="4"] footer.site-footer { color: #999; } html[data-theme="4"] .footer-grid h4 { color: #fff; } html[data-theme="4"] .section-title h2::before { background: #111; } /* ===== الثيم 5: أزرق ليلي ===== */ html[data-theme="5"] { --bg: #0b1220; --bg-2: #0e1729; --bg-3: #101d35; --text: #dbe4f3; --text-2: #8da2c0; --text-3: #5a6f92; --primary: #38bdf8; --primary-2: #7dd3fc; --on-primary: #0b1220; --border: #1d2c4a; --header-bg: rgba(14,23,41,.95); --footer-bg: #0e1729; --card-bg: #0e1729; --tag-bg: rgba(56,189,248,.1); --tag-color: #38bdf8; --btn-radius: 10px; --radius: 14px; --shadow: 0 25px 60px rgba(0,0,0,.4); --hero-grad: radial-gradient(ellipse at 30% 20%, rgba(56,189,248,.07), transparent 60%); } /* ===== الثيم 6: أخضر طبيعي ===== */ html[data-theme="6"] { --bg: #fafdf7; --bg-2: #ffffff; --bg-3: #f0fdf4; --text: #1a2e1a; --text-2: #52735a; --text-3: #7e9c85; --primary: #16a34a; --primary-2: #15803d; --on-primary: #ffffff; --border: #e3efe3; --header-bg: rgba(255,255,255,.96); --footer-bg: #14532d; --card-bg: #ffffff; --tag-bg: #dcfce7; --tag-color: #166534; --btn-radius: 50px; --radius: 20px; --shadow: 0 18px 40px rgba(22,163,74,.13); --hero-grad: linear-gradient(160deg, #f0fdf4, #fafdf7 70%); } html[data-theme="6"] footer.site-footer { color: #bbf7d0; } html[data-theme="6"] .footer-grid h4 { color: #fff; } html[data-theme="6"] .footer-grid a { color: #bbf7d0; } /* ===== الثيم 7: برتقالي جريء (Neo-Brutalism) ===== */ html[data-theme="7"] { --bg: #fffaf5; --bg-2: #ffffff; --bg-3: #ffedd5; --text: #27160a; --text-2: #7c4a23; --text-3: #a87547; --primary: #ea580c; --primary-2: #c2410c; --on-primary: #ffffff; --border: #27160a; --header-bg: #fffaf5; --footer-bg: #27160a; --card-bg: #ffffff; --tag-bg: #27160a; --tag-color: #ffffff; --btn-radius: 0; --radius: 0; --shadow: 8px 8px 0 #27160a; --hero-grad: none; } html[data-theme="7"] .card { box-shadow: 5px 5px 0 #27160a; border-width: 2px; } html[data-theme="7"] .card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #27160a; border-color: #27160a; } html[data-theme="7"] .btn { border: 2px solid #27160a; box-shadow: 4px 4px 0 #27160a; } html[data-theme="7"] .btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #27160a; } html[data-theme="7"] .stat { box-shadow: 5px 5px 0 #27160a; border-width: 2px; } html[data-theme="7"] .stat:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 #27160a; border-color: #27160a; } html[data-theme="7"] header.site-header { border-bottom: 2px solid #27160a; } html[data-theme="7"] .hero { background: #ffedd5; border-bottom: 2px solid #27160a; } html[data-theme="7"] footer.site-footer { color: #d9b99b; } html[data-theme="7"] .footer-grid h4 { color: #fff; } html[data-theme="7"] .footer-grid a { color: #d9b99b; } /* ===== الثيم 8: أسود وذهبي ===== */ html[data-theme="8"] { --bg: #0c0c0c; --bg-2: #14120c; --bg-3: #1c1810; --text: #f5f0e8; --text-2: #b8a98a; --text-3: #6e6450; --primary: #d4af37; --primary-2: #c39e2c; --on-primary: #0c0c0c; --border: #2a2416; --header-bg: rgba(12,12,12,.95); --footer-bg: #0c0c0c; --card-bg: #14120c; --tag-bg: transparent; --tag-color: #d4af37; --btn-radius: 0; --radius: 0; --shadow: 0 20px 50px rgba(212,175,55,.12); --hero-grad: radial-gradient(ellipse at 50% 30%, rgba(212,175,55,.1), transparent 60%); } html[data-theme="8"] .tag { border: 1px solid #d4af37; border-radius: 0; letter-spacing: 1px; } html[data-theme="8"] .logo { letter-spacing: 1px; } /* ===== الثيم 9: تركواز عصري ===== */ html[data-theme="9"] { --bg: #f1f5f9; --bg-2: #ffffff; --bg-3: #ecfeff; --text: #0f172a; --text-2: #64748b; --text-3: #94a3b8; --primary: #06b6d4; --primary-2: #0891b2; --on-primary: #ffffff; --border: #e2e8f0; --header-bg: #0f172a; --footer-bg: #0f172a; --card-bg: #ffffff; --tag-bg: #ecfeff; --tag-color: #0891b2; --btn-radius: 12px; --radius: 18px; --shadow: 0 15px 35px rgba(6,182,212,.15); --hero-grad: linear-gradient(120deg, #0f172a, #1e3a5f); } html[data-theme="9"] .nav-menu a { color: #94a3b8; } html[data-theme="9"] .nav-menu a:hover, html[data-theme="9"] .nav-menu a.active { color: #06b6d4; } html[data-theme="9"] .logo span { color: #ffffff; } html[data-theme="9"] .menu-toggle { color: #ffffff; } html[data-theme="9"] .theme-btn { background: #1e293b; border-color: #334155; color: #fff; } html[data-theme="9"] .hero { color: #ffffff; } html[data-theme="9"] .hero h1 { color: #ffffff; } html[data-theme="9"] .hero p { color: #94a3b8; } html[data-theme="9"] .nav-menu { background: var(--header-bg); } html[data-theme="9"] footer.site-footer { color: #94a3b8; } html[data-theme="9"] .footer-grid h4 { color: #fff; } /* ===== الثيم 10: زجاجي متدرج ===== */ html[data-theme="10"] { --bg: #1a1535; --bg-2: rgba(255,255,255,.06); --bg-3: rgba(255,255,255,.1); --text: #eef0ff; --text-2: #b9bdf0; --text-3: #8489c0; --primary: #22d3ee; --primary-2: #67e8f9; --on-primary: #0f0c29; --border: rgba(255,255,255,.12); --header-bg: rgba(15,12,41,.7); --footer-bg: rgba(255,255,255,.04); --card-bg: rgba(255,255,255,.06); --tag-bg: rgba(34,211,238,.15); --tag-color: #22d3ee; --btn-radius: 14px; --radius: 22px; --shadow: 0 25px 50px rgba(34, 211, 238, 0.15); --glow: 0 0 15px rgba(34, 211, 238, 0.4); --hero-grad: none; } html[data-theme="10"] body { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); background-attachment: fixed; } html[data-theme="10"] .card, html[data-theme="10"] .stat { backdrop-filter: blur(20px); } html[data-theme="10"] .btn { background: linear-gradient(90deg, #22d3ee, #a78bfa); color: #0f0c29; } html[data-theme="10"] .logo { background: linear-gradient(90deg, #22d3ee, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="10"] .logo span { color: transparent; } html[data-theme="10"] header.site-header { backdrop-filter: blur(20px); }