:root { --bg-primary: #0B0C10; --bg-secondary: #15171E; --bg-card: #1F2833; --border: #2A3340; --accent: #45A29E; --accent-light: #66FCF1; --text-primary: #FFFFFF; --text-secondary: #C5C6C7; --text-muted: #8A8D93; --gradient: linear-gradient(135deg, #45A29E, #66FCF1); --font-main: 'Inter', 'Cairo', sans-serif; --font-mono: 'JetBrains Mono', monospace; --navbar-height: 50px; --container-padding: clamp(10px, 2vw, 20px); --section-gap: clamp(20px, 4vh, 40px); /* نسخ RGB (بلا #) ديال bg-primary/bg-card باش نقدرو نستعملوهم مع alpha فـ rgba() */ --bg-primary-rgb: 11,12,16; --bg-card-rgb: 31,40,51; /* overlay-rgb: اللون اللي كيدير "التلوين الخفيف" فوق السطوح (hover, borders خفاف...). فالـ dark: أبيض شفاف. فالـ light: كيولي كحل شفاف - شوف [data-theme="light"] تحت. */ --overlay-rgb: 255,255,255; /* ألوان الصناديق الخاصة بالدروس (exercice/exemple/solution) */ --exercice-bg: #1A2A2A; --exercice-title: #E8873A; --solution-bg: #1A2A1A; --solution-title: #A8FF78; --solution-border: #A8FF7844; /* أصفر واضح بحال بحال فـ dark، وكيولي أغمق (dark goldenrod) فـ light باش يبان مقروء فوق البيض */ --gold-text: #F4D03F; color-scheme: dark; } /* ============================================================ THEME: LIGHT MODE كيتفعل ملي عندها data-theme="light" (عبر assets/js/script.js) ============================================================ */ html[data-theme="light"] { --bg-primary: #F7F9FB; --bg-secondary: #FFFFFF; --bg-card: #FFFFFF; --border: #E1E6EB; --accent: #2F8F89; --accent-light: #17A398; --text-primary: #16202A; --text-secondary: #47535E; --text-muted: #6B7680; --gradient: linear-gradient(135deg, #2F8F89, #17A398); --bg-primary-rgb: 247,249,251; --bg-card-rgb: 255,255,255; --overlay-rgb: 15,23,30; /* صناديق الدروس فـ light: خلفية فاتحة بدل الأخضر/الكحل الغامق */ --exercice-bg: #FFF4E8; --exercice-title: #B85C00; --solution-bg: #EEFBEF; --solution-title: #2F8F3D; --solution-border: #2F8F3D33; --gold-text: #B8860B; color-scheme: light; } /* تبديل ناعم بين الوضعين، بلا وميض قاسي */ html[data-theme] body, html[data-theme] .navbar, html[data-theme] .sidebar, html[data-theme] .card, html[data-theme] .feature-card, html[data-theme] .command-card, html[data-theme] .code-block, html[data-theme] .search-box input, html[data-theme] .tab-btn, html[data-theme] .menu-toggle, html[data-theme] .theme-toggle { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{font-size:14px;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-main);line-height:1.7;overflow-x:hidden;min-height:100vh} img,svg{max-width:100%;height:auto} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{cursor:pointer;font-family:inherit} input{font-family:inherit;border:none;outline:none} * { -webkit-tap-highlight-color: transparent !important; outline: none !important; } a:focus, button:focus, input:focus, textarea:focus { outline: none !important; box-shadow: none !important; } a:active, button:active { opacity: 0.7; transition: opacity 0.1s ease; } .nav-links a:active, .btn:active, .tab-btn:active { opacity: 0.7; transform: scale(0.97); } .btn-primary:active { opacity: 0.8; transform: scale(0.97); } .card:active { transform: scale(0.98); } .toggle-sol:active { opacity: 0.7; transform: scale(0.95); } .back-btn:active, .next-btn:active { opacity: 0.7; transform: scale(0.95); } * { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { display: none; } .bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(69,162,158,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(69,162,158,0.03) 1px,transparent 1px);background-size:clamp(30px,5vw,60px) clamp(30px,5vw,60px)} .glow-orb{position:fixed;border-radius:50%;filter:blur(40px);z-index:0;pointer-events:none;opacity:0.08} .glow-orb-1{width:clamp(150px,30vw,300px);height:clamp(150px,30vw,300px);background:var(--accent);top:-10%;right:-10%;animation:orbFloat 8s ease-in-out infinite} .glow-orb-2{width:clamp(120px,25vw,250px);height:clamp(120px,25vw,250px);background:var(--accent-light);bottom:-10%;left:-10%;animation:orbFloat 10s ease-in-out infinite reverse} @keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(0.95)}} .navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(var(--bg-primary-rgb),0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(69,162,158,0.15);padding:0 var(--container-padding);height:var(--navbar-height);display:flex;align-items:center;justify-content:space-between;transition:all 0.3s ease} .navbar.scrolled{box-shadow:0 4px 20px rgba(0,0,0,0.3)} .nav-logo{display:flex;align-items:center;gap:clamp(6px,1vw,10px);text-decoration:none;flex-shrink:0} .nav-logo-icon{width:clamp(26px,4vw,32px);height:clamp(26px,4vw,32px);background:var(--gradient);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:900;font-size:clamp(12px,2vw,16px);color:var(--bg-primary)} .nav-logo-text{font-size:clamp(14px,2vw,18px);font-weight:900;color:var(--text-primary);white-space:nowrap} .nav-logo-text span{color:var(--accent-light)} .nav-links{display:flex;gap:clamp(3px,0.8vw,6px);align-items:center} .nav-links a{color:var(--text-secondary);text-decoration:none;font-size:clamp(10px,1.2vw,12px);font-weight:600;padding:clamp(4px,0.8vw,8px) clamp(8px,1.2vw,14px);border-radius:8px;transition:all 0.2s ease;display:flex;align-items:center;gap:4px;white-space:nowrap;position:relative} .nav-links a:hover{color:var(--accent-light);background:rgba(69,162,158,0.08)} .nav-links a:active{opacity:0.6;transform:scale(0.95)} .nav-links .btn-nav{background:var(--gradient);color:var(--bg-primary);font-weight:700} .nav-links .btn-nav:hover{color:var(--bg-primary);opacity:0.9;transform:translateY(-1px)} .nav-links .btn-nav:active{opacity:0.7;transform:scale(0.95)} @media(max-width:768px){:root{--navbar-height:44px}.nav-links a{font-size:10px;padding:3px 6px}} .hero{position:relative;z-index:1;text-align:center;padding:clamp(60px,12vh,100px) var(--container-padding) clamp(40px,6vh,60px);min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center} .hero-label{display:inline-flex;align-items:center;gap:6px;background:rgba(69,162,158,0.1);border:1px solid rgba(69,162,158,0.2);color:var(--accent-light);padding:clamp(4px,0.8vw,6px) clamp(12px,1.5vw,16px);border-radius:50px;font-size:clamp(10px,1.2vw,12px);font-weight:700;margin-bottom:clamp(14px,2vw,20px)} .hero-label .dot{width:6px;height:6px;background:#06D6A0;border-radius:50%;animation:dotPulse 2s ease-in-out infinite} @keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.8)}} .hero h1{font-size:clamp(24px,5vw,40px);font-weight:900;line-height:1.2;margin-bottom:clamp(10px,1.5vw,14px);max-width:700px;padding:0 10px} .hero h1 .gradient-text{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero .description{color:var(--text-muted);font-size:clamp(12px,1.5vw,15px);max-width:500px;margin:0 auto clamp(16px,2vw,24px);line-height:1.8;padding:0 10px} .hero-buttons{display:flex;gap:clamp(8px,1.5vw,12px);flex-wrap:wrap;justify-content:center;padding:0 10px} .btn{padding:clamp(6px,1vw,10px) clamp(14px,2vw,22px);border-radius:10px;font-size:clamp(12px,1.4vw,14px);font-weight:700;text-decoration:none;cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-main);border:none} .btn-primary{background:var(--gradient);color:var(--bg-primary);box-shadow:0 4px 20px rgba(69,162,158,0.2)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(69,162,158,0.3)} .btn-primary:active{transform:scale(0.95);opacity:0.8} @media(max-width:480px){.hero{padding:60px 12px 30px;min-height:60vh}.hero-buttons{flex-direction:column;width:100%}.hero-buttons .btn{width:100%;justify-content:center}} .features{position:relative;z-index:1;padding:var(--section-gap) var(--container-padding);max-width:1100px;margin:0 auto} .features h2{text-align:center;font-size:clamp(20px,3.5vw,28px);font-weight:900;margin-bottom:6px} .features .subtitle{text-align:center;color:var(--text-muted);font-size:clamp(12px,1.5vw,14px);margin-bottom:clamp(20px,3vw,30px)} .features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:clamp(10px,1.5vw,16px)} .feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:clamp(14px,2vw,20px) clamp(14px,2vw,20px);transition:all 0.3s ease;position:relative;overflow:hidden} .feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient);opacity:0;transition:opacity 0.3s} .feature-card:hover::before{opacity:1} .feature-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 30px rgba(69,162,158,0.08)} .feature-card:active{transform:scale(0.98)} .feature-icon{width:clamp(36px,5vw,44px);height:clamp(36px,5vw,44px);background:rgba(69,162,158,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:clamp(10px,1.5vw,14px);font-size:clamp(16px,2vw,20px);color:var(--accent-light)} .feature-card h3{font-size:clamp(14px,1.6vw,16px);font-weight:700;margin-bottom:4px} .feature-card p{color:var(--text-secondary);font-size:clamp(11px,1.2vw,12px);line-height:1.7} @media(max-width:480px){.features-grid{grid-template-columns:1fr}} .cta{position:relative;z-index:1;text-align:center;padding:var(--section-gap) var(--container-padding);background:linear-gradient(180deg,transparent,rgba(69,162,158,0.03),transparent);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .cta h2{font-size:clamp(20px,3.5vw,28px);font-weight:900;margin-bottom:6px} .cta p{color:var(--text-secondary);font-size:clamp(12px,1.5vw,14px);margin-bottom:clamp(14px,2vw,20px)} .footer{position:relative;z-index:1;text-align:center;padding:clamp(16px,3vw,24px) var(--container-padding);color:var(--text-muted);font-size:clamp(10px,1.2vw,12px)} .footer .divider{width:40px;height:2px;background:var(--gradient);margin:10px auto;border-radius:1px} .back-btn{display:inline-flex;align-items:center;gap:4px;color:var(--accent-light);text-decoration:none;font-weight:600;padding:4px 12px;border-radius:6px;transition:all 0.2s ease;margin-bottom:12px;font-size:11px;border:none;background:transparent;cursor:pointer} .back-btn:hover{background:rgba(69,162,158,0.08)} .back-btn:active{opacity:0.6;transform:scale(0.95)} .search-box{position:relative;margin-bottom:20px;max-width:400px;margin-left:auto;margin-right:auto} .search-box .search-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:14px} .search-box input{width:100%;padding:10px 44px 10px 16px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:12px;color:var(--text-primary);font-size:13px;font-family:var(--font-main);outline:none;transition:all 0.2s ease} .search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(69,162,158,0.08)} .search-box input::placeholder{color:var(--text-muted)} .search-box input:active{transform:scale(0.99)} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:clamp(10px,1.5vw,14px)} .card{background:var(--bg-card);border:1px solid var(--border);border-right:3px solid var(--accent);border-radius:12px;padding:clamp(12px,1.8vw,16px);cursor:pointer;transition:all 0.3s ease;text-align:center} .card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.2)} .card:active{transform:scale(0.97);opacity:0.8} .card .card-icon{position:relative;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:24px} .card .icon-glow{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0.5} .card h3{font-size:clamp(15px,1.8vw,18px);margin-bottom:4px;font-weight:700} .card p{color:var(--text-secondary);font-size:clamp(11px,1.2vw,12px);line-height:1.6;margin-bottom:8px} .card .card-badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap} .card .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:16px;font-size:clamp(10px,1.1vw,11px);font-weight:600} .card .badge:active{opacity:0.7;transform:scale(0.95)} .command-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:clamp(10px,1.5vw,14px);margin-bottom:clamp(8px,1.2vw,10px);cursor:pointer;transition:all 0.2s ease} .command-card:hover{border-color:var(--accent);transform:translateX(2px)} .command-card:active{transform:scale(0.98);opacity:0.8} .command-title{font-size:clamp(14px,1.6vw,16px);font-weight:700;margin-bottom:4px} .code-block{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;overflow:hidden} .code-content{padding:clamp(8px,1.2vw,12px);color:var(--accent-light);font-family:var(--font-mono);font-size:clamp(12px,1.3vw,14px);line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all} .no-data{text-align:center;padding:clamp(30px,5vw,40px);color:var(--text-muted);font-size:clamp(13px,1.5vw,14px)} .tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap;border-bottom:1.5px solid var(--border);padding-bottom:8px} .tab-btn{padding:6px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text-secondary);cursor:pointer;font-family:var(--font-main);font-weight:600;font-size:12px;transition:all 0.2s ease} .tab-btn:hover{border-color:var(--accent);color:var(--accent-light)} .tab-btn:active{opacity:0.6;transform:scale(0.95)} .tab-btn.active{background:var(--gradient);color:var(--bg-primary);border-color:transparent} .tab-btn i{margin-left:4px} .btn-primary:focus-visible, .btn-secondary:focus-visible, .tab-btn:focus-visible, .card:focus-visible, .command-card:focus-visible, .back-btn:focus-visible, .next-btn:focus-visible, .toggle-sol:focus-visible { outline: none !important; box-shadow: none !important; } .nav-links a.btn-nav:active { opacity: 0.7; transform: scale(0.95); } .hero-buttons .btn:active { transform: scale(0.95); opacity: 0.8; } .feature-card:active { transform: scale(0.97); opacity: 0.9; } html { scroll-behavior: smooth; } .smooth-scroll { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--bg-card); color: var(--text-primary); padding: 10px 20px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; z-index: 10001; opacity: 0; transition: all 0.3s ease; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.success { border-color: #4ECDC4; } .toast.error { border-color: #FF6B6B; } .code-content { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-word; padding: 10px 14px; } .code-content .keyword { color: #FF6B6B; } .code-content .string { color: var(--solution-title); } .code-content .comment { color: #666; font-style: italic; } .code-content .function { color: #4D9DE0; } details { cursor: pointer; } details summary { color: #4ECDC4; font-size: 11px; padding: 4px 0; transition: color 0.2s ease; list-style: none; } details summary::-webkit-details-marker { display: none; } details summary::before { content: '▶ '; font-size: 10px; transition: transform 0.2s ease; } details[open] summary::before { transform: rotate(90deg); } details summary:hover { color: #66FCF1; } details div { padding: 8px; margin-top: 4px; background: var(--bg-primary); border-radius: 6px; } @keyframes skeleton-loading { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } .loading-placeholder { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%); background-size: 200px 100%; animation: skeleton-loading 1.5s infinite; border-radius: 8px; } .toggle-sol { background: var(--bg-card); border: 1px solid var(--border); color: #4ECDC4; padding: 4px 14px; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 600; transition: all 0.3s ease; } .toggle-sol:hover { background: rgba(78, 205, 196, 0.1); border-color: #4ECDC4; transform: translateY(-1px); } .toggle-sol:active { transform: scale(0.95); } .toggle-sol.active { background: rgba(78, 205, 196, 0.15); border-color: #4ECDC4; } .progress-bar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--gradient); z-index: 10000; transition: width 0.1s linear; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap table { min-width: 280px; } @media (max-width: 480px) { .table-wrap table { font-size: 10px !important; min-width: 200px; } .table-wrap th, .table-wrap td { padding: 3px 6px !important; } } .scroll-top-btn.visible { opacity: 1; transform: translateY(0); } .scroll-top-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 30px rgba(69, 162, 158, 0.4); } .scroll-top-btn:active { transform: scale(0.9); } .page-transition { animation: fadeSlide 0.3s ease both; } @keyframes fadeSlide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ حماية الصور فقط - النصوص والصيغ بقات قابلة للتحديد والنسخ ============================================================ */ img, svg, canvas, video { -webkit-user-drag: none !important; -moz-user-drag: none !important; -ms-user-drag: none !important; user-drag: none !important; pointer-events: none !important; -webkit-touch-callout: none !important; touch-callout: none !important; -webkit-tap-highlight-color: transparent !important; } img, svg, canvas, video { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } img::selection, svg::selection, canvas::selection { background: transparent !important; color: transparent !important; } ::selection { background: rgba(78, 205, 196, 0.3); } a, button, .card, .command-card { -webkit-touch-callout: none !important; touch-callout: none !important; } body { -webkit-touch-callout: none !important; touch-callout: none !important; } input, textarea, [contenteditable="true"] { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } /* ============================================================ SIDEBAR - تصميم مبتكر بثلاثة أقسام ============================================================ */ .sidebar { position: fixed; top: 0; left: 0; width: 360px; height: 100%; background: rgba(var(--bg-card-rgb), 0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-right: 1px solid var(--border); box-shadow: 0 0 32px rgba(0, 0, 0, 0.6); transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; contain: layout style paint; overscroll-behavior: contain; pointer-events: none; z-index: 10001; display: flex; flex-direction: column; overflow: hidden; } .sidebar.open { transform: translateX(0); pointer-events: auto; } /* ====== منطقة السكرول المشتركة (Profile + Nav + Matières) ====== */ .sidebar-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } /* ====== خلفية زليج خاصة بالـ Sidebar ====== */ .sidebar-bg-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.4; } .sidebar-bg-pattern svg { width: 100%; height: 100%; } .sidebar-glow { position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; z-index: 0; } .sidebar-glow-1 { width: 200px; height: 200px; top: -60px; right: -60px; background: rgba(78, 205, 196, 0.08); } .sidebar-glow-2 { width: 150px; height: 150px; bottom: 100px; left: -50px; background: rgba(244, 208, 63, 0.06); } /* ====== Sections ====== */ .sidebar-section { position: relative; z-index: 1; padding: 0 20px; } /* ============================================================ القسم 1: Profil ============================================================ */ .sidebar-section-profile { padding-top: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04); } .profile-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: rgba(var(--overlay-rgb), 0.03); border-radius: 16px; border: 1px solid rgba(var(--overlay-rgb), 0.04); transition: all 0.3s ease; } .profile-card:hover { background: rgba(var(--overlay-rgb), 0.06); border-color: rgba(78, 205, 196, 0.15); } .profile-avatar { position: relative; flex-shrink: 0; } .profile-avatar-ring { width: 56px; height: 56px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #4ECDC4, #2ECC71, #4ECDC4); background-size: 200% 200%; animation: gradientRotate 4s ease infinite; } @keyframes gradientRotate { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .profile-avatar-inner { width: 100%; height: 100%; border-radius: 50%; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #4ECDC4; } .profile-status { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #2ECC71; border-radius: 50%; border: 2px solid var(--bg-card); animation: pulse 2s ease infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } } .profile-info { flex: 1; min-width: 0; } .profile-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 2px 0; } .profile-role { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 4px 0; } .profile-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6rem; font-weight: 600; color: var(--gold-text); background: rgba(244, 208, 63, 0.12); padding: 2px 10px; border-radius: 12px; border: 1px solid rgba(244, 208, 63, 0.15); } .profile-badge i { font-size: 0.5rem; } /* ============================================================ القسم 2: Navigation principale ============================================================ */ .sidebar-section-nav { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04); } .sidebar-nav { padding: 4px 0; } .sidebar-menu { list-style: none; padding: 0; margin: 0; } .sidebar-menu li { padding: 2px 0; } .sidebar-link { display: flex; align-items: center; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--text-secondary); transition: all 0.3s ease; position: relative; gap: 12px; } .sidebar-link:hover { background: rgba(78, 205, 196, 0.08); color: var(--text-primary); transform: translateX(4px); } .sidebar-link:active { transform: scale(0.97); } .sidebar-link-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(78, 205, 196, 0.1); color: #4ECDC4; font-size: 0.9rem; transition: all 0.3s ease; flex-shrink: 0; } .sidebar-link:hover .sidebar-link-icon { background: rgba(78, 205, 196, 0.2); transform: scale(1.05); } .sidebar-link.active .sidebar-link-icon { background: rgba(78, 205, 196, 0.2); color: #fff; } .sidebar-link-text { flex: 1; font-size: 0.9rem; font-weight: 500; } .sidebar-link-arrow { opacity: 0; transform: translateX(-8px); transition: all 0.3s ease; color: var(--text-muted); font-size: 0.7rem; } .sidebar-link:hover .sidebar-link-arrow { opacity: 1; transform: translateX(0); } .sidebar-link.active { background: rgba(78, 205, 196, 0.1); color: #4ECDC4; } .sidebar-link.active .sidebar-link-icon { background: rgba(78, 205, 196, 0.2); color: #4ECDC4; } /* ============================================================ القسم 3: Matières ============================================================ */ .sidebar-section-subjects { padding-top: 12px; padding-bottom: 12px; } .sidebar-subjects-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 10px 4px; } .sidebar-subjects-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); font-weight: 600; } .sidebar-subjects-count { font-size: 0.65rem; background: rgba(78, 205, 196, 0.1); color: #4ECDC4; padding: 1px 10px; border-radius: 12px; font-weight: 700; } .sidebar-subjects-grid { display: flex; flex-direction: column; gap: 8px; } .subject-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(var(--overlay-rgb), 0.02); border: 1px solid rgba(var(--overlay-rgb), 0.04); text-decoration: none; transition: all 0.3s ease; position: relative; overflow: hidden; } .subject-card:hover { transform: translateX(4px); border-color: rgba(var(--overlay-rgb), 0.08); } .subject-card:active { transform: scale(0.97); } .subject-card-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; background: rgba(var(--overlay-rgb), 0.04); } .subject-math .subject-card-icon { background: rgba(78, 205, 196, 0.12); color: #4ECDC4; } .subject-physique .subject-card-icon { background: rgba(255, 107, 107, 0.12); color: #FF6B6B; } .subject-chimie .subject-card-icon { background: rgba(244, 208, 63, 0.12); color: var(--gold-text); } .subject-card-info { flex: 1; min-width: 0; } .subject-card-name { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } .subject-card-count { display: block; font-size: 0.65rem; color: var(--text-muted); } .subject-card-progress { width: 60px; height: 4px; background: rgba(var(--overlay-rgb), 0.06); border-radius: 4px; overflow: hidden; flex-shrink: 0; } .subject-progress-bar { height: 100%; border-radius: 4px; transition: width 1s ease; } .subject-math .subject-progress-bar { background: linear-gradient(90deg, #4ECDC4, #2ECC71); } .subject-physique .subject-progress-bar { background: linear-gradient(90deg, #FF6B6B, #FF8A8A); } .subject-chimie .subject-progress-bar { background: linear-gradient(90deg, #F4D03F, #F7DC6F); } .sidebar-section-legal { flex-shrink: 0; } /* ============================================================ Sidebar Footer ============================================================ */ .sidebar-footer { padding: 12px 20px; border-top: 1px solid rgba(var(--overlay-rgb), 0.04); flex-shrink: 0; position: relative; z-index: 1; } .sidebar-footer-content { display: flex; justify-content: center; align-items: center; text-align: center; font-size: 0.65rem; color: var(--text-muted); } /* ============================================================ Overlay ============================================================ */ /* ============================================================ Responsive ============================================================ */ @media (max-width: 768px) { .sidebar { width: 320px; } .sidebar-section { padding: 0 16px; } .profile-avatar-ring { width: 48px; height: 48px; } .profile-avatar-inner { font-size: 1.2rem; } .profile-name { font-size: 0.9rem; } .sidebar-link { padding: 8px 12px; } .sidebar-link-icon { width: 30px; height: 30px; font-size: 0.8rem; } .sidebar-link-text { font-size: 0.85rem; } .subject-card { padding: 8px 12px; } .subject-card-icon { width: 32px; height: 32px; font-size: 0.9rem; } .subject-card-name { font-size: 0.8rem; } .subject-card-progress { width: 40px; } } @media (max-width: 480px) { .sidebar { width: 280px; } .sidebar-section { padding: 0 12px; } .sidebar-section-profile { padding-top: 16px; padding-bottom: 12px; } .profile-card { padding: 12px 14px; } .profile-avatar-ring { width: 40px; height: 40px; } .profile-avatar-inner { font-size: 1rem; } .profile-name { font-size: 0.85rem; } .profile-role { font-size: 0.65rem; } .profile-badge { font-size: 0.55rem; padding: 1px 8px; } .sidebar-link { padding: 6px 10px; gap: 10px; } .sidebar-link-icon { width: 26px; height: 26px; font-size: 0.7rem; border-radius: 8px; } .sidebar-link-text { font-size: 0.8rem; } .sidebar-subjects-label { font-size: 0.6rem; } .subject-card { padding: 6px 10px; gap: 10px; } .subject-card-icon { width: 28px; height: 28px; font-size: 0.8rem; border-radius: 8px; } .subject-card-name { font-size: 0.75rem; } .subject-card-count { font-size: 0.55rem; } .subject-card-progress { width: 30px; } .sidebar-footer { padding: 8px 16px; } .sidebar-footer-content { font-size: 0.55rem; } } @media (min-width: 1200px) { .sidebar { width: 380px; } } /* ============================================================ SIDEBAR - القائمة الجانبية ============================================================ */ /* ====== Menu Toggle (Hamburger animé) ====== */ .menu-toggle { width: 44px; height: 44px; background: rgba(var(--overlay-rgb), 0.04); border: 1px solid rgba(var(--overlay-rgb), 0.06); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; padding: 0; } .menu-toggle:hover { background: rgba(78, 205, 196, 0.1); border-color: rgba(78, 205, 196, 0.2); } .menu-toggle:active { transform: scale(0.92); } .menu-icon { display: flex; flex-direction: column; gap: 5px; width: 20px; transition: all 0.3s ease; } .menu-line { display: block; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all 0.3s ease; } .menu-line:nth-child(1) { width: 20px; } .menu-line:nth-child(2) { width: 16px; } .menu-line:nth-child(3) { width: 12px; } .menu-toggle:hover .menu-line { background: #4ECDC4; } /* script.js كيدير classList.add('active') + aria-expanded='true' ملي تفتح - كنغطيو الحالتين بجوج باش يخدم فكل الحالات */ .menu-toggle.active .menu-line:nth-child(1), .menu-toggle[aria-expanded="true"] .menu-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); width: 20px; } .menu-toggle.active .menu-line:nth-child(2), .menu-toggle[aria-expanded="true"] .menu-line:nth-child(2) { opacity: 0; } .menu-toggle.active .menu-line:nth-child(3), .menu-toggle[aria-expanded="true"] .menu-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); width: 20px; } /* ====== Menu Toggle - Responsive (موبايل صغير) ====== */ @media (max-width: 480px) { .menu-toggle { width: 38px; height: 38px; border-radius: 10px; } .menu-icon { gap: 4px; width: 17px; } .menu-line { height: 1.5px; } .menu-line:nth-child(1) { width: 17px; } .menu-line:nth-child(2) { width: 13px; } .menu-line:nth-child(3) { width: 9px; } } /* ====== Theme Toggle (Dark/Light) ====== */ .theme-toggle { width: 44px; height: 44px; background: rgba(var(--overlay-rgb), 0.04); border: 1px solid rgba(var(--overlay-rgb), 0.06); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; padding: 0; position: relative; color: var(--text-primary); font-size: 16px; margin-inline-end: 6px; } .theme-toggle:hover { background: rgba(78, 205, 196, 0.1); border-color: rgba(78, 205, 196, 0.2); color: var(--accent-light); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; transition: opacity 0.25s ease, transform 0.35s ease; } .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle .icon-sun { opacity: 0; transform: rotate(-60deg) scale(0.6); } html[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(60deg) scale(0.6); } html[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } @media (max-width: 480px) { .theme-toggle { width: 38px; height: 38px; border-radius: 10px; font-size: 14px; } } /* ====== PWA Install Button (مركزي - نفس ستايل .theme-toggle) ====== */ .pwa-install-btn { display: none; width: 44px; height: 44px; background: rgba(var(--overlay-rgb), 0.04); border: 1px solid rgba(var(--overlay-rgb), 0.06); border-radius: 12px; cursor: pointer; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; padding: 0; color: var(--gold-text); font-size: 16px; margin-inline-end: 6px; } .pwa-install-btn.show { display: flex; } .pwa-install-btn:hover { background: rgba(244, 208, 63, 0.1); border-color: rgba(244, 208, 63, 0.25); } .pwa-install-btn:active { transform: scale(0.92); } @media (max-width: 480px) { .pwa-install-btn { width: 38px; height: 38px; border-radius: 10px; font-size: 14px; } } /* فالـ light mode كنخففو الظلال السوداء باش ما تبانش ثقيلة فوق خلفية بيضة */ html[data-theme="light"] .navbar.scrolled { box-shadow: 0 4px 20px rgba(20, 30, 40, 0.08); } html[data-theme="light"] .card:hover { box-shadow: 0 8px 30px rgba(20, 30, 40, 0.10); } html[data-theme="light"] .sidebar { box-shadow: 0 0 60px rgba(20, 30, 40, 0.12); } html[data-theme="light"] .btn-primary { box-shadow: 0 4px 20px rgba(47, 143, 137, 0.18); } html[data-theme="light"] .btn-primary:hover { box-shadow: 0 6px 30px rgba(47, 143, 137, 0.25); } /* ====== Sidebar Overlay ====== */ .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .sidebar-overlay.active { opacity: 1; visibility: visible; } /* ====== Responsive ====== */ @media (max-width: 480px) { .sidebar { width: 260px; } } /* ============================================================ إضافات جديدة للـ Sidebar - زيدها فآخر assets/css/style.css 1) Profil مبسط (صورة بدل البطاقة الكاملة) 2) خلفية رياضية متحركة بـ GSAP ============================================================ */ /* ====== Profil مبسط ====== */ .profile-simple { display: flex; justify-content: center; padding: 10px 0 6px; position: relative; z-index: 1; } .profile-simple-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(78, 205, 196, 0.35); box-shadow: 0 0 24px rgba(78, 205, 196, 0.18); transition: transform 0.3s ease, box-shadow 0.3s ease; } .profile-simple-img:hover { transform: scale(1.05); box-shadow: 0 0 32px rgba(78, 205, 196, 0.3); } /* ====== خلفية رياضية متحركة (CSS خالص - بلا GSAP) ====== قبل: كانت كتعتمد على GSAP (navbar.html) باش تحرك، وكيما GSAP ماشي محملة فكل الصفحات (كاينة فالصفحات الجذرية لأنيميشن الدخول ديالها، وغالباً غير محملة فصفحات الدروس/التمارين/السلاسل)، كان التصرف كيختلف من صفحة لصفحة: تحرك فوحدين وثابتة فأخرين. دابا: أنيميشن CSS خفيف (transform + opacity)، متوقف بـ animation-play-state:paused مبدئياً، وكيتشغل غير مع .sidebar.open - بحال خدامة نفسها فكل صفحة، بلا ما تحتاج GSAP ولا سكريبت. */ .sidebar-math-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .sidebar-math-bg .math-symbol { position: absolute; color: rgba(78, 205, 196, 0.16); font-weight: 700; user-select: none; opacity: 0; transition: opacity 0.6s ease; animation-name: mathSymbolFloat; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: paused; } .sidebar.decor-ready .sidebar-math-bg .math-symbol { opacity: 0.12; animation-play-state: running; } @keyframes mathSymbolFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(var(--mx, 8px), var(--my, 14px)) rotate(var(--mr, 8deg)); } } .sidebar-math-bg .math-symbol:nth-child(1) { top: 8%; left: 12%; font-size: 34px; --mx: 8px; --my: 14px; --mr: 8deg; animation-duration: 4s; animation-delay: 0s; } .sidebar-math-bg .math-symbol:nth-child(2) { top: 22%; left: 70%; font-size: 26px; --mx: -8px; --my: 16px; --mr: -8deg; animation-duration: 5s; animation-delay: 0.15s; } .sidebar-math-bg .math-symbol:nth-child(3) { top: 40%; left: 25%; font-size: 30px; --mx: 8px; --my: 20px; --mr: 8deg; animation-duration: 6s; animation-delay: 0.3s; } .sidebar-math-bg .math-symbol:nth-child(4) { top: 55%; left: 60%; font-size: 38px; --mx: -8px; --my: 14px; --mr: -8deg; animation-duration: 7s; animation-delay: 0.45s; } .sidebar-math-bg .math-symbol:nth-child(5) { top: 68%; left: 15%; font-size: 24px; --mx: 8px; --my: 16px; --mr: 8deg; animation-duration: 4s; animation-delay: 0.6s; } .sidebar-math-bg .math-symbol:nth-child(6) { top: 78%; left: 78%; font-size: 28px; --mx: -8px; --my: 20px; --mr: -8deg; animation-duration: 5s; animation-delay: 0.75s; } .sidebar-math-bg .math-symbol:nth-child(7) { top: 88%; left: 35%; font-size: 22px; --mx: 8px; --my: 14px; --mr: 8deg; animation-duration: 6s; animation-delay: 0.9s; } .sidebar-math-bg .math-symbol:nth-child(8) { top: 15%; left: 45%; font-size: 20px; --mx: -8px; --my: 16px; --mr: -8deg; animation-duration: 7s; animation-delay: 1.05s; } /* ============================================================ THEME: LIGHT MODE — تصحيح وضوح الزليج المغربي والرموز الرياضية الألوان الأصلية (باستيل شفافة) مبنية على خلفية غامقة؛ فـ light mode كنغمقو ونزيدو فالشفافية باش الزخرفة تبقى بانة بلا ما "توسخ" القراءة. ============================================================ */ /* --- الزليج الرئيسي: index/subjects/subject + دروس/تمارين/سلاسل --- */ html[data-theme="light"] .moroccan-bg svg { filter: brightness(0.4) saturate(1.8) contrast(1.6); } html[data-theme="light"] .moroccan-bg svg [opacity="0.3"] { opacity: 0.55; } html[data-theme="light"] .moroccan-bg svg [opacity="0.2"] { opacity: 0.4; } html[data-theme="light"] .moroccan-bg svg [opacity="0.15"] { opacity: 0.32; } html[data-theme="light"] .moroccan-bg svg [opacity="0.1"] { opacity: 0.22; } html[data-theme="light"] .moroccan-bg svg [opacity="0.05"] { opacity: 0.14; } /* .moroccan-bg (الحاوية) كتحكم فيها GSAP عبر style.opacity inline فالصفحات الجذرية - خاصنا !important باش نربحو عليها. الباقي (shadow/star/geo) كيفهم، مثبتين مرة وحدة من GSAP بلا أنيميشن مستمرة. */ html[data-theme="light"] .moroccan-shadow { opacity: 0.16 !important; } html[data-theme="light"] .moroccan-star { color: #157F78; opacity: 0.08 !important; } html[data-theme="light"] .geo-pattern { color: #B8860B; opacity: 0.09 !important; } /* --- خلفية الزليج المبسطة فالـ Sidebar --- */ html[data-theme="light"] .sidebar-bg-pattern { opacity: 0.9; } html[data-theme="light"] .sidebar-bg-pattern svg { filter: brightness(0.4) saturate(2.2) contrast(1.8); } /* --- الرموز الرياضية المتحركة فالـ Sidebar --- */ html[data-theme="light"] .sidebar-math-bg .math-symbol { color: rgba(47, 143, 137, 0.4); } html[data-theme="light"] .sidebar.decor-ready .sidebar-math-bg .math-symbol { opacity: 0.32; }