/* ========================================================= منصّة إتقان — أحكام التجويد نظام التصميم: الألوان، الطباعة، والتخطيط ========================================================= */ /* الخطوط تُحمَّل عبر رابط في ملف index.html (أسرع من @import) */ :root{ /* ألوان أساسية */ --navy-950:#0A1B1F; --navy-900:#10262A; --navy-800:#173339; --green-800:#1B4332; --green-700:#235347; --green-600:#2D6A4F; --green-500:#3A7D5C; --gold-600:#B08A1E; --gold-500:#C9A227; --gold-300:#E3C567; --gold-100:#F3E6BB; --cream-50:#FAF6EA; --cream-100:#F1EAD6; --ink-900:#1C2620; --ink-700:#3A4740; --ink-500:#6B776E; --white:#FFFFFF; /* ألوان أحكام التجويد (نظام الموقع الخاص للتلوين) */ --tj-idhhar:#173339; /* إظهار: تسطير كحلي */ --tj-idgham:#2D6A4F; /* إدغام: أخضر */ --tj-iqlab:#B08A1E; /* إقلاب: ذهبي */ --tj-ikhfa:#A3591F; /* إخفاء: برتقالي محروق */ --tj-madd:#8C2F2F; /* مد: عنّابي */ --tj-qalqalah:#3D5A80; /* قلقلة: أزرق فولاذي */ --radius-sm:6px; --radius-md:14px; --radius-lg:26px; --shadow-1:0 2px 10px rgba(10,27,31,.06); --shadow-2:0 14px 34px rgba(10,27,31,.14); --font-display:'Amiri', serif; --font-body:'Tajawal', sans-serif; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;} } body{ margin:0; font-family:var(--font-body); background:var(--cream-50); color:var(--ink-900); line-height:1.85; direction:rtl; } h1,h2,h3,h4{ font-family:var(--font-display); color:var(--navy-950); margin:0 0 .5em; line-height:1.4; } p{margin:0 0 1em;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} ul{margin:0; padding:0; list-style:none;} button{font-family:inherit; cursor:pointer;} :focus-visible{ outline:3px solid var(--gold-500); outline-offset:3px; border-radius:4px; } .container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; } .section-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--gold-600); background:var(--gold-100); padding:6px 16px; border-radius:999px; margin-bottom:16px; } .section-head{ max-width:680px; margin:0 auto 48px; text-align:center; } .section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);} .section-head p{color:var(--ink-700); font-size:1.05rem;} section{padding:88px 0;} /* ===== نمط زخرفي هندسي إسلامي (يُستخدم كإشارة بصرية متكررة) ===== */ .motif-divider{ height:46px; width:100%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='46' viewBox='0 0 64 46'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1' opacity='0.55'%3E%3Cpath d='M32 2 L48 12 L48 30 L32 40 L16 30 L16 12 Z'/%3E%3Cpath d='M32 2 L32 40 M16 12 L48 30 M48 12 L16 30'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat-x; background-position:center; opacity:.9; } /* =========================== شريط التنقل =========================== */ .navbar{ position:sticky; top:0; z-index:40; background:var(--navy-950); border-bottom:1px solid rgba(201,162,39,.25); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; } .brand{ display:flex; align-items:center; gap:10px; color:var(--gold-300); } .brand-mark{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--gold-500),var(--gold-300)); display:flex; align-items:center; justify-content:center; color:var(--navy-950); font-family:var(--font-display); font-weight:700; font-size:1.15rem; } .brand-text{font-family:var(--font-display); font-size:1.35rem; color:var(--white);} .brand-text span{color:var(--gold-300);} .nav-links{ display:flex; align-items:center; gap:6px; } .nav-links a{ color:var(--cream-100); padding:10px 16px; border-radius:999px; font-size:.98rem; font-weight:500; transition:background .2s, color .2s; } .nav-links a:hover, .nav-links a.active{ background:rgba(201,162,39,.15); color:var(--gold-300); } .nav-reciter{ display:flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid rgba(201,162,39,.4); border-radius:999px; font-size:.85rem; } .nav-reciter label{color:var(--gold-300); font-weight:600; white-space:nowrap;} .nav-reciter select{ background:transparent; color:var(--cream-100); border:none; font-family:var(--font-body); font-size:.85rem; cursor:pointer; } .nav-reciter select option{color:var(--navy-950);} .profile-card{ max-width:640px; margin:0 auto; background:var(--white); border:1px solid rgba(27,67,50,.15); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); padding:28px 26px; } .profile-id{display:flex; align-items:center; gap:14px; margin-bottom:24px;} .profile-avatar{ width:56px; height:56px; flex:none; border-radius:50%; background:var(--navy-950); color:var(--gold-300); display:flex; align-items:center; justify-content:center; font-size:1.6rem; } .profile-id h3{margin:0 0 4px;} .profile-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:20px; } .profile-stat{ text-align:center; background:var(--cream-50); border-radius:var(--radius-md); padding:14px 8px; } .profile-stat b{display:block; font-size:1.4rem; color:var(--navy-950); font-family:var(--font-display);} .profile-stat span{font-size:.78rem; color:var(--ink-500);} .profile-progress-track{ height:10px; border-radius:999px; background:var(--cream-50); overflow:hidden; } .profile-progress-fill{height:100%; background:var(--gold-500); width:0%; transition:width .4s;} .profile-progress-label{font-size:.8rem; color:var(--ink-500); margin-top:6px; text-align:center;} .audio-quiz-card{ max-width:640px; margin:44px auto 0; text-align:center; background:var(--white); border:1px solid rgba(27,67,50,.15); border-radius:var(--radius-lg); padding:24px 22px; box-shadow:var(--shadow-1); } .audio-quiz-options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:16px; } .audio-quiz-options button{ background:var(--cream-50); border:1px solid rgba(27,67,50,.2); border-radius:var(--radius-md); padding:12px 10px; font-size:.9rem; cursor:pointer; transition:.2s; } .audio-quiz-options button:hover{background:rgba(201,162,39,.15); border-color:var(--gold-500);} .audio-quiz-options button.correct{background:#e4f3e9; border-color:var(--green-600); color:var(--green-800);} .audio-quiz-options button.incorrect{background:#fbe4e4; border-color:#c0392b; color:#c0392b;} .audio-quiz-feedback{margin-top:12px; font-size:.9rem; min-height:1.4em;} .experimental-badge{ display:inline-block; font-size:.65rem; font-weight:700; color:#8a5a00; background:#fff3d6; border:1px solid #e0b352; border-radius:999px; padding:2px 10px; vertical-align:middle; margin-inline-start:6px; } .nav-cta{ background:var(--gold-500); color:var(--navy-950) !important; font-weight:700 !important; padding:10px 20px !important; } .nav-cta:hover{background:var(--gold-300) !important;} .nav-login-btn{ background:none; border:1px solid rgba(201,162,39,.5); color:var(--gold-300); padding:9px 18px; border-radius:999px; font-size:.92rem; font-weight:600; margin-inline-start:6px; transition:background .18s, color .18s; } .nav-login-btn:hover{ background:rgba(201,162,39,.15); } .nav-user{ display:flex; align-items:center; gap:10px; margin-inline-start:6px; padding:6px 8px 6px 14px; border:1px solid rgba(201,162,39,.3); border-radius:999px; } .nav-user-name{ color:var(--gold-300); font-size:.9rem; font-weight:600; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav-user-logout{ background:var(--gold-500); color:var(--navy-950); font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:999px; border:none; cursor:pointer; } .nav-user-logout:hover{background:var(--gold-300);} .nav-toggle{ display:none; background:none; border:1px solid rgba(201,162,39,.4); border-radius:8px; padding:8px 10px; color:var(--gold-300); } .nav-toggle span{ display:block; width:22px; height:2px; background:var(--gold-300); margin:4px 0; border-radius:2px; } /* =========================== قسم البداية (Hero) =========================== */ .hero{ position:relative; background: radial-gradient(ellipse at 15% 0%, rgba(201,162,39,.16), transparent 55%), linear-gradient(180deg, var(--navy-950), var(--navy-900) 65%, var(--green-800)); color:var(--cream-100); overflow:hidden; padding:100px 0 0; } .hero-pattern{ position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='.6' opacity='0.18'%3E%3Cpath d='M60 4 L104 32 L104 88 L60 116 L16 88 L16 32 Z'/%3E%3Cpath d='M60 4 L60 116 M16 32 L104 88 M104 32 L16 88'/%3E%3Ccircle cx='60' cy='60' r='20'/%3E%3C/g%3E%3C/svg%3E"); background-size:220px; pointer-events:none; } .hero-inner{ position:relative; max-width:1180px; margin:0 auto; padding:64px 24px 0; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; } .hero h1{ color:var(--white); font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.35; margin-bottom:20px; } .hero h1 em{ font-style:normal; color:var(--gold-300); } .hero p.lead{ font-size:1.15rem; color:var(--cream-100); opacity:.9; max-width:520px; margin-bottom:32px; } .hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px;} .btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:999px; font-weight:700; font-size:1rem; border:2px solid transparent; transition:transform .18s ease, background .2s, color .2s, border-color .2s; } .btn:hover{transform:translateY(-2px);} .btn-primary{background:var(--gold-500); color:var(--navy-950);} .btn-primary:hover{background:var(--gold-300);} .btn-outline{border-color:rgba(250,246,234,.4); color:var(--cream-50);} .btn-outline:hover{border-color:var(--gold-300); color:var(--gold-300);} .btn-dark{background:var(--navy-950); color:var(--gold-300);} .btn-dark:hover{background:var(--navy-800);} .hero-ayah{ position:relative; background:rgba(250,246,234,.06); border:1px solid rgba(201,162,39,.35); border-radius:var(--radius-lg); padding:36px 28px; text-align:center; backdrop-filter:blur(2px); } .hero-ayah p{ font-family:var(--font-display); font-size:1.9rem; color:var(--gold-100); margin-bottom:10px; line-height:1.9; } .hero-ayah span{ font-size:.85rem; color:var(--cream-100); opacity:.75; } .hero-stats{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(201,162,39,.2); margin-top:20px; } .hero-stats div{ padding:26px 12px; text-align:center; border-inline-start:1px solid rgba(201,162,39,.2); } .hero-stats div:first-child{border-inline-start:none;} .hero-stats strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--gold-300); } .hero-stats span{font-size:.85rem; color:var(--cream-100); opacity:.8;} /* =========================== ملخص المستويات =========================== */ .levels{background:var(--cream-50);} .levels-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .level-card{ background:var(--white); border-radius:var(--radius-md); padding:26px 24px; box-shadow:var(--shadow-1); border-top:4px solid var(--green-600); transition:transform .2s, box-shadow .2s; } .level-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-2);} .level-num{ font-family:var(--font-display); font-size:.95rem; color:var(--gold-600); font-weight:700; margin-bottom:10px; display:block; } .level-card h3{font-size:1.2rem; margin-bottom:8px;} .level-card p{color:var(--ink-700); font-size:.95rem; margin-bottom:0;} /* =========================== تتبّع التقدم =========================== */ .progress-widget{ max-width:640px; margin:0 auto 40px; background:var(--white); border:1px solid rgba(27,67,50,.1); border-radius:var(--radius-md); padding:20px 24px; box-shadow:var(--shadow-1); display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .progress-widget-text{ display:flex; flex-direction:column; gap:2px; min-width:160px; } .progress-widget-text strong{font-size:.98rem; color:var(--navy-950);} .progress-widget-text span{font-size:.85rem; color:var(--ink-500);} .progress-track{ flex:1; min-width:120px; height:10px; background:var(--cream-100); border-radius:999px; overflow:hidden; } .progress-fill-global{ height:100%; width:0%; background:linear-gradient(90deg,var(--green-600),var(--gold-500)); border-radius:999px; transition:width .35s ease; } .progress-pct{ font-weight:700; color:var(--green-700); font-size:.95rem; min-width:44px; text-align:left; } /* شارة التقدم داخل عنوان كل مستوى */ .lg-progress-badge{ display:inline-block; margin-inline-start:8px; font-size:.78rem; color:var(--gold-300); opacity:.9; } /* مربع "أنهيت هذا الدرس" */ .lesson-check{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-700); cursor:pointer; padding-top:10px; border-top:1px dashed rgba(27,67,50,.15); margin-top:4px; } .lesson-check-input{ width:17px; height:17px; accent-color:var(--green-600); cursor:pointer; } .lesson-card.is-complete{ border-color:var(--green-500); background:linear-gradient(180deg, rgba(45,106,79,.06), var(--cream-50)); } /* =========================== بحث سريع داخل الدروس =========================== */ .lesson-search-wrap{ max-width:480px; margin:0 auto 20px; } .lesson-search{ width:100%; padding:14px 20px; border-radius:999px; border:1px solid rgba(27,67,50,.2); background:var(--white); font-family:inherit; font-size:.98rem; } .lesson-search:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.18); } .lesson-search-empty{ text-align:center; color:var(--ink-500); display:none; margin:0 0 20px; } .lesson-search-empty.show{display:block;} /* =========================== فلاتر الأحكام =========================== */ .filter-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px; } .chip{ background:var(--white); border:1px solid rgba(27,67,50,.2); color:var(--ink-700); padding:9px 20px; border-radius:999px; font-size:.9rem; font-weight:500; transition:background .18s, color .18s, border-color .18s; } .chip:hover{border-color:var(--green-600);} .chip.active{ background:var(--green-700); border-color:var(--green-700); color:var(--white); } .lesson-card.is-hidden{display:none;} .level-group.is-hidden{display:none;} /* =========================== المعجم =========================== */ .glossary{background:var(--cream-50);} .glossary-search-wrap{ max-width:520px; margin:0 auto 36px; } .glossary-search{ width:100%; padding:15px 20px; border-radius:999px; border:1px solid rgba(27,67,50,.2); background:var(--white); font-family:inherit; font-size:1rem; } .glossary-search:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.18); } .glossary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; } .glossary-card{ background:var(--white); border-radius:var(--radius-md); padding:20px 22px; box-shadow:var(--shadow-1); border-inline-start:4px solid var(--green-600); } .glossary-card h4{ font-size:1.1rem; margin-bottom:10px; color:var(--navy-950); } .glossary-def{margin-bottom:8px; font-size:.92rem; color:var(--ink-700);} .glossary-def b{ display:inline-block; color:var(--gold-600); font-weight:700; margin-inline-end:6px; } .glossary-empty{ text-align:center; color:var(--ink-500); display:none; margin-top:12px; } .glossary-empty.show{display:block;} /* =========================== الدروس =========================== */ .lessons{background:var(--cream-100);} .level-group{ background:var(--white); border-radius:var(--radius-md); margin-bottom:18px; box-shadow:var(--shadow-1); overflow:hidden; border:1px solid rgba(27,67,50,.08); } .level-group summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; background:var(--navy-950); color:var(--cream-50); } .level-group summary::-webkit-details-marker{display:none;} .level-group summary .lg-title{ display:flex; align-items:center; gap:14px; } .level-group summary .lg-badge{ width:38px; height:38px; border-radius:50%; background:var(--gold-500); color:var(--navy-950); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; flex-shrink:0; } .level-group summary h3{color:var(--cream-50); margin:0; font-size:1.15rem;} .level-group summary .lg-sub{color:var(--gold-300); font-size:.85rem; display:block; margin-top:2px; font-family:var(--font-body);} .lg-chevron{ width:26px; height:26px; border:1px solid rgba(201,162,39,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-300); transition:transform .25s; flex-shrink:0; } .level-group[open] .lg-chevron{transform:rotate(180deg);} .lg-body{ padding:28px; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; } .lesson-card{ border:1px solid rgba(27,38,32,.08); border-radius:var(--radius-md); padding:22px; background:var(--cream-50); } .lesson-card h4{ font-size:1.08rem; display:flex; align-items:center; gap:8px; margin-bottom:10px; } .rule-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; display:inline-block; } .lesson-card p{color:var(--ink-700); font-size:.95rem; margin-bottom:14px;} .ayah-box{ background:var(--white); border:1px dashed rgba(27,67,50,.35); border-radius:var(--radius-sm); padding:16px 18px; text-align:center; margin-bottom:10px; } .ayah-box p{ font-family:var(--font-display); font-size:1.55rem; color:var(--navy-950); margin-bottom:6px; direction:rtl; } .ayah-box .ref{ font-family:var(--font-body); font-size:.78rem; color:var(--ink-500); margin:0; } /* تلوين أحكام التجويد */ .tj-idhhar{ text-decoration:underline; text-decoration-color:var(--tj-idhhar); text-decoration-thickness:3px; } .tj-idgham{ color:var(--tj-idgham); font-weight:700; } .tj-iqlab{ color:var(--tj-iqlab); font-weight:700; } .tj-ikhfa{ color:var(--tj-ikhfa); font-weight:700; } .tj-madd{ color:var(--tj-madd); font-weight:700; } .tj-qalqalah{ color:var(--tj-qalqalah); font-weight:700; } .legend{ display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center; background:var(--white); border-radius:var(--radius-md); padding:18px 22px; margin:0 auto 40px; max-width:900px; box-shadow:var(--shadow-1); } .legend-item{display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--ink-700);} /* =========================== التمارين =========================== */ .quiz-wrap{background:var(--navy-950); color:var(--cream-50);} .quiz-wrap .section-head h2{color:var(--white);} .quiz-wrap .section-head p{color:var(--cream-100); opacity:.85;} .quiz-wrap .section-eyebrow{background:rgba(201,162,39,.15); color:var(--gold-300);} .quiz-card{ max-width:720px; margin:0 auto; background:var(--navy-800); border:1px solid rgba(201,162,39,.25); border-radius:var(--radius-lg); padding:36px; } .quiz-progress{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; font-size:.85rem; color:var(--gold-300); } .quiz-progress-bar{ flex:1; height:6px; background:rgba(250,246,234,.15); border-radius:999px; margin:0 16px; overflow:hidden; } .quiz-progress-fill{ height:100%; background:var(--gold-500); width:0%; transition:width .3s ease; } .quiz-question-ayah{ font-family:var(--font-display); font-size:1.9rem; text-align:center; color:var(--gold-100); margin-bottom:8px; line-height:1.9; } .quiz-question-text{ text-align:center; font-weight:700; font-size:1.15rem; margin-bottom:26px; color:var(--white); } .quiz-options{ display:grid; gap:12px; margin-bottom:20px; } .quiz-option{ text-align:right; background:rgba(250,246,234,.06); border:1px solid rgba(250,246,234,.18); color:var(--cream-50); padding:15px 18px; border-radius:var(--radius-sm); font-size:1rem; transition:background .18s, border-color .18s; } .quiz-option:hover:not(:disabled){border-color:var(--gold-300); background:rgba(201,162,39,.12);} .quiz-option.correct{background:rgba(45,106,79,.35); border-color:var(--green-500); color:var(--gold-100);} .quiz-option.incorrect{background:rgba(140,47,47,.35); border-color:var(--tj-madd);} .quiz-option:disabled{cursor:default;} .quiz-feedback{ border-radius:var(--radius-sm); padding:16px 18px; font-size:.95rem; margin-bottom:20px; display:none; } .quiz-feedback.show{display:block;} .quiz-feedback.ok{background:rgba(45,106,79,.25); border:1px solid var(--green-500);} .quiz-feedback.bad{background:rgba(140,47,47,.25); border:1px solid var(--tj-madd);} .quiz-actions{display:flex; justify-content:flex-end; gap:10px;} .quiz-score{ text-align:center; display:none; } .quiz-score.show{display:block;} .quiz-score h3{color:var(--gold-300); font-size:2rem;} .quiz-score p{color:var(--cream-100);} /* =========================== الموارد =========================== */ .resources-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; } .resource-card{ background:var(--white); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:10px; border-inline-start:4px solid var(--gold-500); } .resource-icon{ width:44px; height:44px; border-radius:12px; background:var(--cream-100); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.2rem; color:var(--green-700); } .resource-card h4{font-size:1.05rem; margin-bottom:0;} .resource-card p{color:var(--ink-700); font-size:.9rem; margin-bottom:6px;} .resource-tag{ font-size:.75rem; color:var(--gold-600); font-weight:700; } .resource-link{ margin-top:auto; color:var(--green-700); font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; } .resource-card.is-soon{ opacity:.72; } .resource-soon-badge{ margin-top:auto; align-self:flex-start; background:var(--cream-100); color:var(--ink-500); font-size:.8rem; font-weight:700; padding:6px 14px; border-radius:999px; } /* =========================== من نحن وتواصل =========================== */ .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; } .about-text h2{text-align:right; font-size:clamp(1.6rem,3vw,2.1rem);} .about-text p{color:var(--ink-700);} .about-values{ display:grid; gap:14px; margin-top:24px; } .about-values li{ display:flex; gap:12px; align-items:flex-start; background:var(--white); border-radius:var(--radius-sm); padding:14px 16px; box-shadow:var(--shadow-1); } .about-values b{display:block; margin-bottom:2px;} .about-values span{color:var(--ink-500); font-size:.88rem;} .contact-form{ background:var(--white); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-1); } .field{margin-bottom:18px;} .field label{display:block; font-weight:700; margin-bottom:8px; font-size:.92rem;} .field input, .field textarea{ width:100%; padding:13px 14px; border:1px solid rgba(27,38,32,.18); border-radius:var(--radius-sm); font-family:inherit; font-size:.98rem; background:var(--cream-50); resize:vertical; } .field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.18); } .form-note{ font-size:.82rem; color:var(--ink-500); margin-top:10px; } .form-success{ display:none; background:rgba(45,106,79,.12); border:1px solid var(--green-500); color:var(--green-800); padding:14px 16px; border-radius:var(--radius-sm); margin-top:14px; font-size:.92rem; } .form-success.show{display:block;} .form-success.is-error{ background:rgba(140,47,47,.12); border-color:#8C2F2F; color:#8C2F2F; } /* =========================== التذييل =========================== */ footer{ background:var(--navy-950); color:var(--cream-100); padding:56px 0 24px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(201,162,39,.2); } .footer-brand p{color:var(--cream-100); opacity:.75; font-size:.92rem; max-width:320px;} footer h5{color:var(--gold-300); font-family:var(--font-body); font-size:.95rem; margin-bottom:14px;} footer ul li{margin-bottom:10px;} footer a{color:var(--cream-100); opacity:.85; font-size:.92rem;} footer a:hover{color:var(--gold-300); opacity:1;} .footer-bottom{ padding-top:20px; text-align:center; font-size:.82rem; color:var(--cream-100); opacity:.6; } /* =========================== استجابة الشاشات =========================== */ @media (max-width:960px){ .hero-inner{grid-template-columns:1fr;} .levels-grid{grid-template-columns:repeat(2,1fr);} .about-grid{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;} } @media (max-width:720px){ .nav-links{ position:absolute; top:100%; inset-inline:0; background:var(--navy-950); flex-direction:column; align-items:stretch; padding:10px 20px 20px; border-bottom:1px solid rgba(201,162,39,.25); display:none; } .nav-links.open{display:flex;} .nav-links a{padding:14px 10px; border-radius:8px;} .nav-toggle{display:block;} .levels-grid{grid-template-columns:1fr;} .hero-stats{grid-template-columns:1fr; } .hero-stats div{border-inline-start:none; border-top:1px solid rgba(201,162,39,.2);} .hero-stats div:first-child{border-top:none;} section{padding:60px 0;} .footer-grid{grid-template-columns:1fr;} .quiz-card{padding:24px 18px;} } /* =========================== أزرار الطباعة =========================== */ .print-all-wrap{ display:flex; justify-content:center; margin-bottom:36px; } .lesson-print-btn{ margin-top:8px; background:none; border:1px solid rgba(27,67,50,.25); color:var(--green-700); font-size:.82rem; font-weight:600; padding:8px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; transition:background .18s, border-color .18s; } .lesson-print-btn:hover{ background:rgba(45,106,79,.08); border-color:var(--green-600); } /* =========================== إعدادات الطباعة =========================== */ #printableArea{ display:none; } @media print{ body > *:not(#printableArea){ display:none !important; } body{ background:#fff; } #printableArea{ display:block !important; } .print-header{ text-align:center; margin-bottom:26px; border-bottom:2px solid var(--gold-500); padding-bottom:10px; } .print-header h1{ color:var(--navy-950); font-size:1.4rem; margin:0 0 4px; } .print-header p{ color:#555; font-size:.85rem; margin:0; } .print-level:not(:last-of-type){ page-break-after:always; } .print-level h2{ color:var(--navy-950); border-bottom:1px solid var(--gold-500); padding-bottom:6px; margin-bottom:16px; } .print-lesson{ break-inside:avoid; page-break-inside:avoid; margin-bottom:22px; padding-bottom:16px; border-bottom:1px dashed #ccc; } .print-lesson h3{ color:var(--navy-950); margin-bottom:6px; } .print-rule{ margin-bottom:10px; line-height:1.9; } .print-ayah{ text-align:center; border:1px solid #ccc; border-radius:8px; padding:12px; margin-bottom:8px; } .print-ayah p:first-child{ font-family:var(--font-display); font-size:1.3rem; margin:0 0 6px; } .print-ref{ font-size:.8rem; color:#555; margin:0; } .print-memory{ font-size:.9rem; background:#faf6ea; padding:8px 12px; border-radius:6px; margin:0; } } /* =========================== زر فتح الدرس التفصيلي =========================== */ .lesson-open-btn{ margin-top:10px; margin-inline-start:8px; background:var(--green-600); border:1px solid var(--green-600); color:var(--cream-50); font-size:.82rem; font-weight:700; padding:8px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; transition:background .18s, transform .18s; } .lesson-open-btn:hover{ background:var(--green-700); transform:translateY(-1px); } /* =========================== نافذة تفاصيل الدرس =========================== */ .lesson-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(10,27,31,.72); backdrop-filter:blur(3px); z-index:200; align-items:flex-start; justify-content:center; padding:min(6vh,60px) 16px 40px; overflow-y:auto; } .lesson-modal-overlay.open{ display:flex; } .lesson-modal{ width:100%; max-width:760px; background:linear-gradient(180deg, var(--navy-950), var(--navy-900) 70%, var(--green-800)); color:var(--cream-100); border:1px solid rgba(201,162,39,.28); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); padding:28px 26px 32px; position:relative; } .lm-topbar{ display:flex; justify-content:flex-end; margin-bottom:4px; } .lm-close{ width:38px; height:38px; border-radius:12px; border:1px solid rgba(243,230,187,.25); background:rgba(255,255,255,.04); color:var(--cream-50); font-size:1rem; line-height:1; } .lm-close:hover{ background:rgba(255,255,255,.1); } .lm-header{ margin-bottom:14px; } .lm-eyebrow{ display:block; font-size:.78rem; color:var(--gold-300); font-weight:700; margin-bottom:8px; } .lm-header .tag{ display:inline-flex; margin-bottom:10px; background:rgba(201,162,39,.16); color:var(--gold-300); border-radius:999px; padding:4px 12px; font-size:.78rem; font-weight:700; } .lesson-modal h1{ font-family:var(--font-display); font-size:clamp(1.8rem, 4vw, 2.6rem); margin:4px 0 10px; color:var(--white); } .lm-lead{ color:var(--cream-100); opacity:.88; line-height:1.9; margin:0; } .lm-ayah-box{ font-family:var(--font-display); font-size:clamp(1.5rem, 4vw, 2.1rem); text-align:center; background:rgba(0,0,0,.18); border:1px solid rgba(201,162,39,.25); border-radius:var(--radius-md); padding:22px 16px; margin:18px 0 8px; color:var(--gold-100); line-height:2; } .lm-ayah-box span[class^="tj-"]{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; color:var(--gold-300); } .lm-ref{ text-align:center; font-size:.82rem; color:var(--cream-100); opacity:.7; margin:0 0 18px; } .lm-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; } .lm-info-card{ background:rgba(255,255,255,.04); border:1px solid rgba(243,230,187,.14); border-radius:var(--radius-md); padding:16px 18px; } .lm-info-card h3{ margin:0 0 8px; font-size:.95rem; color:var(--gold-300); } .lm-info-card p{ margin:0; font-size:.88rem; color:var(--cream-100); opacity:.92; line-height:1.9; } .lm-check{ color:var(--cream-100); border-top:1px dashed rgba(243,230,187,.2); margin-bottom:20px; } .lm-check .lesson-check-input{ accent-color:var(--gold-500); } .lm-quiz-card{ background:rgba(0,0,0,.2); border:1px solid rgba(201,162,39,.22); border-radius:var(--radius-md); padding:18px 18px 8px; margin-bottom:20px; } .lm-quiz-card h3{ margin:0 0 10px; font-size:1rem; color:var(--gold-300); } .lm-quiz-ayah{ font-family:var(--font-display); font-size:1.3rem; color:var(--gold-100); margin:0 0 8px; } .lm-nav{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; } .lm-nav .btn{ flex:1 1 auto; text-align:center; } @media (max-width:640px){ .lm-two{ grid-template-columns:1fr; } .lesson-modal{ padding:22px 16px 26px; } } /* ========================================================= إضافات: استماع صوتي حقيقي، بطاقات مراجعة، XP وأيام متتالية، الإنجازات، والتنبيه الشرعي — بنفس نظام الألوان والخطوط أعلاه ========================================================= */ /* زر الاستماع (مضاف تلقائيًا داخل كل .ayah-box و .lm-ayah-box عبر script.js) */ .ayah-listen-group{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px; } .ayah-listen-btn{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid var(--green-600); background:var(--cream-50); color:var(--green-700); font-family:var(--font-body); font-size:.8rem; font-weight:700; cursor:pointer; transition:.2s; } .ayah-listen-btn:hover{background:var(--green-800); color:var(--cream-50); border-color:var(--green-800);} .ayah-listen-btn:disabled{opacity:.6; cursor:default;} .ayah-listen-btn.playing{background:#8a1f1f; color:#fff; border-color:#8a1f1f;} .lm-ayah-box .ayah-listen-btn{ border-color:var(--gold-300); background:transparent; color:var(--gold-300); } .lm-ayah-box .ayah-listen-btn:hover{background:var(--gold-300); color:var(--navy-950);} .lm-ayah-box .ayah-listen-btn.playing{background:#8a1f1f; color:#fff; border-color:#8a1f1f;} /* تنبيه توست صغير أسفل الشاشة لرسائل الاستماع (تلاوة حقيقية / نطق آلي) */ .itqan-toast{ position:fixed; bottom:22px; right:50%; transform:translateX(50%); max-width:min(92vw,420px); background:var(--navy-950); color:var(--cream-100); border:1px solid rgba(201,162,39,.4); border-radius:var(--radius-md); padding:12px 18px; font-size:.85rem; text-align:center; box-shadow:var(--shadow-2); z-index:200; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; } .itqan-toast.show{opacity:1; transform:translateX(50%) translateY(-6px);} /* تنبيه شرعي/أخلاقي */ .teacher-note{ max-width:760px; margin:36px auto 0; background:var(--gold-100); border:1px solid var(--gold-300); border-radius:var(--radius-md); padding:18px 22px; font-size:.88rem; line-height:1.9; color:var(--ink-900); text-align:center; } .teacher-note b{color:var(--gold-600);} /* بطاقة XP والأيام المتتالية — تعرض بجانب شريط تقدم الدروس */ .xp-streak-widget{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:520px; margin:16px auto 0; } .xp-pill{ display:flex; align-items:center; gap:8px; background:var(--navy-950); color:var(--gold-300); border-radius:999px; padding:9px 18px; font-size:.85rem; font-weight:700; } .xp-pill b{color:var(--cream-50); font-size:1rem;} /* شريط الإنجازات */ .achievements-strip{ max-width:920px; margin:34px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; } .ach-badge{ background:var(--white); border:1px solid rgba(27,67,50,.18); border-radius:var(--radius-md); padding:14px 10px; text-align:center; opacity:.42; transition:.2s; } .ach-badge.unlocked{opacity:1; border-color:var(--gold-300); box-shadow:var(--shadow-1);} .ach-badge .ach-icon{font-size:1.6rem; display:block; margin-bottom:6px;} .ach-badge .ach-label{font-size:.78rem; color:var(--ink-700); display:block;} /* بطاقات المراجعة التفاعلية — قلب 3D، مع ألوان صريحة على كل وجه لتفادي مشكلة اللون السابقة */ .flashcards-block{ max-width:640px; margin:56px auto 0; text-align:center; } .flashcards-block .section-eyebrow{display:inline-block; margin-bottom:10px;} .flash-counter{font-size:.8rem; color:var(--ink-500); margin-bottom:14px;} .flashcard{ perspective:1200px; height:190px; cursor:pointer; margin-bottom:18px; } .flashcard-inner{ position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; } .flashcard.showing-answer .flashcard-inner{transform:rotateY(180deg);} .flashcard-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; box-shadow:var(--shadow-2); } .flashcard-front{ background:var(--navy-950); color:var(--cream-50); border:1px solid var(--gold-500); } .flashcard-back{ background:var(--gold-100); color:var(--navy-950); transform:rotateY(180deg); border:1px solid var(--gold-500); } .flashcard-tag{font-size:.72rem; color:var(--gold-300); margin-bottom:8px; display:block;} .flashcard-back .flashcard-tag{color:var(--gold-600);} .flashcard-face h4{font-family:var(--font-display); font-size:1.35rem; margin:0; line-height:1.7;} .flashcard-front h4{color:var(--cream-50);} .flashcard-back h4{color:var(--navy-950);} .flashcard-hint{font-size:.72rem; opacity:.7; margin-top:10px; display:block;} .flash-actions{display:flex; gap:10px; justify-content:center;} @media (max-width:640px){ .flashcard{height:220px;} }