/* ============================================ إصلاحات شاملة لمنصة آفاق - الهاتف والتصميم أضف هذا الملف في بعد style.css: ============================================ */ /* ============================================ إصلاح 1: الـ nav الرئيسية على الهاتف المشكلة: القائمة تتكدس وزر الدخول يختفي ============================================ */ .landing-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .nav-container { max-width: 1400px; margin: 0 auto; padding: 0.75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0; flex-wrap: nowrap; } /* اللوجو والهامبرجر في نفس الصف */ .nav-logo { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .nav-logo-icon { width: 44px; height: 44px; } .nav-logo-text { font-size: 1.4rem; font-weight: 800; } /* الهامبرجر */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: space-between; align-items: center; width: 36px; height: 28px; z-index: 1002; padding: 2px; order: -1; } .menu-toggle span { display: block; width: 100%; height: 2.5px; background: var(--primary); border-radius: 3px; transition: all 0.3s ease; transform-origin: center; } .menu-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .menu-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* روابط النافيجيشن (desktop) */ .nav-links { display: flex; gap: 2rem; align-items: center; } .nav-links a { color: var(--gray-600); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: color 0.3s; white-space: nowrap; } .nav-links a:hover { color: var(--primary); } /* ============================================ إصلاح 2: Hero Section على الهاتف المشكلة: الصورة كبيرة جداً + نص يخرج عن الشاشة ============================================ */ .hero { padding: 5rem 1.25rem 3rem; min-height: auto; } .hero-container { gap: 2rem; } .hero-title { font-size: clamp(1.8rem, 6vw, 3.5rem); line-height: 1.25; } .hero-desc { font-size: clamp(0.95rem, 3vw, 1.25rem); } /* ============================================ إصلاح 3: شاشة المصادقة على الهاتف المشكلة: الكروت تخرج عن الشاشة + Overflow ============================================ */ .auth-screen { padding: 1rem; align-items: flex-start; overflow-y: auto; overflow-x: hidden; min-height: 100dvh; } .auth-glass-card { width: 100%; max-width: 100%; margin: 0 auto; padding: 1.5rem 1.25rem; border-radius: 28px; position: relative; } .auth-glass-card .btn-back { position: static; display: inline-flex; margin-bottom: 1rem; padding: 0.5rem 1rem; font-size: 0.85rem; } .auth-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding: 0.4rem; gap: 0.25rem; } .auth-tabs::-webkit-scrollbar { display: none; } .auth-tab { flex-shrink: 0; padding: 0.65rem 0.75rem; font-size: 0.8rem; gap: 0.3rem; } .auth-tab i { font-size: 0.85rem; } /* حقول النموذج */ #auth-screen .form-group input, #auth-screen .form-group select, #auth-screen .form-group textarea { font-size: 16px; /* يمنع الـ zoom على iOS */ padding: 0.85rem 1rem; border-radius: 16px; } #auth-screen .form-row { grid-template-columns: 1fr; gap: 0; } #auth-screen .phone-wrapper { display: flex; flex-direction: row; gap: 0.5rem; } #auth-screen .phone-wrapper select { width: 100px; flex-shrink: 0; } #auth-screen .phone-wrapper input { flex: 1; } /* ============================================ إصلاح 4: لوحة التحكم على الهاتف المشكلة: محتوى يختفي خلف الـ bottom nav ============================================ */ @media (max-width: 768px) { /* الـ sidebar مخفية دائماً على الهاتف */ .sidebar { display: none !important; } .main-content { margin-right: 0 !important; width: 100% !important; padding-bottom: 70px !important; } .pages-container { padding: 1rem 0.875rem 70px !important; } /* Header اللوحة */ .content-header { padding: 0.875rem 1rem; position: sticky; top: 0; background: white; z-index: 100; border-bottom: 1px solid var(--gray-100); box-shadow: 0 1px 8px rgba(0,0,0,0.04); } .content-header h2 { font-size: 1.1rem; font-weight: 700; } /* ============================================ إصلاح 5: Bottom Navigation المشكلة: الأيقونات صغيرة + مساحة غير كافية ============================================ */ .bottom-nav { position: fixed !important; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(0,0,0,0.06); box-shadow: 0 -4px 24px rgba(0,0,0,0.08); display: flex !important; justify-content: space-around; align-items: center; padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom)) !important; z-index: 1000; height: auto; min-height: 48px; } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 44px; padding: 0.25rem 0.2rem; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; background: none; border: none; color: var(--gray-400); font-size: 0.6rem; font-weight: 500; font-family: 'Cairo', sans-serif; position: relative; } .bottom-nav-item i { font-size: 1.2rem; line-height: 1; transition: transform 0.2s, color 0.2s; } .bottom-nav-item span { font-size: 0.55rem; font-weight: 600; line-height: 1; } .bottom-nav-item.active { color: var(--primary) !important; background: rgba(17, 49, 90, 0.08); } .bottom-nav-item.active i { color: var(--primary) !important; transform: translateY(-1px); } .bottom-nav-item:active { transform: scale(0.93); } /* تقليل حجم عناصر الـ bottom-nav على الشاشات الصغيرة جدًا */ @media (max-width: 420px) { .bottom-nav { padding: 0.25rem 0.15rem calc(0.25rem + env(safe-area-inset-bottom)) !important; min-height: 44px; } .bottom-nav-item { padding: 0.15rem 0.12rem; min-height: 36px; gap: 0.08rem; font-size: 0.5rem; border-radius: 10px; } .bottom-nav-item i { font-size: 1rem; } .bottom-nav-item span { font-size: 0.45rem; } } /* ============================================ إصلاح 6: البطاقات والجداول المشكلة: overflow أفقي ============================================ */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; } .stat-card { padding: 1rem 0.875rem; } .stat-icon { width: 42px; height: 42px; font-size: 1.1rem; flex-shrink: 0; } .stat-info h4 { font-size: 0.72rem; } .stat-info span { font-size: 1.3rem; } .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; border-radius: var(--radius-lg); } .data-table th, .data-table td { padding: 0.6rem 0.75rem; font-size: 0.82rem; } /* ============================================ إصلاح 7: كروت الجلسات المشكلة: تتراص بشكل غير منظم ============================================ */ .sessions-grid, .cards-grid { grid-template-columns: 1fr !important; gap: 0.875rem; } .session-card { border-radius: var(--radius-lg); } .session-card-header { padding: 1rem; } .session-card-header h4 { font-size: 1rem; } /* ============================================ إصلاح 8: نماذج لوحة التحكم ============================================ */ #dashboard .form-group input, #dashboard .form-group select, #dashboard .form-group textarea { font-size: 16px; /* يمنع zoom على iOS */ } .builder-form { padding: 1.25rem; } .builder-header { flex-wrap: wrap; gap: 0.75rem; } .builder-header h2 { font-size: 1.1rem; } /* ============================================ إصلاح 9: الـ Welcome Card ============================================ */ .welcome-card { padding: 1.5rem 1.25rem; border-radius: var(--radius-xl); } .welcome-text h1 { font-size: 1.3rem; line-height: 1.4; } .welcome-text p { font-size: 0.875rem; } /* ============================================ إصلاح 10: المودالات المشكلة: تخرج عن الشاشة على الهاتف ============================================ */ .modal { padding: 1rem; align-items: flex-end; } .modal-box { width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; padding: 1.5rem 1.25rem; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ============================================ إصلاح 11: شريط البحث والفلاتر ============================================ */ .page-header { flex-direction: column; align-items: stretch; gap: 0.75rem; } .page-header h3 { font-size: 1.1rem; } .search-input { width: 100%; } .search-input input { font-size: 16px; width: 100%; } /* ============================================ إصلاح 12: المحادثات (Chat) ============================================ */ #page-chat { height: calc(100dvh - 60px); overflow: hidden; } .chat-layout { height: 100%; } .chat-input-row textarea { font-size: 16px; /* يمنع zoom على iOS */ } /* ============================================ إصلاح 13: الـ Footer في الصفحة الرئيسية ============================================ */ .main-footer { padding: 2.5rem 1.25rem 1.5rem; } .footer-content { flex-direction: column; gap: 2rem; } .footer-brand { max-width: 100%; } .footer-links { flex-direction: column; gap: 1.5rem; } /* ============================================ إصلاح 14: قسم about في الصفحة الرئيسية ============================================ */ .about-grid { grid-template-columns: 1fr; gap: 2rem; } .stats-floating-cards { position: static; margin-top: 1.5rem; flex-wrap: wrap; gap: 0.75rem; } .stat-floating { padding: 0.6rem 1rem; } /* ============================================ إصلاح 15: الـ notifications modal ============================================ */ .notifications-modal { top: auto; bottom: 70px; left: 0.75rem; right: 0.75rem; max-width: none; max-height: 60dvh; border-radius: 20px; } } /* ============================================ إصلاح خاص للشاشات الصغيرة جداً (< 400px) ============================================ */ @media (max-width: 400px) { .bottom-nav-item span { display: none; } .bottom-nav-item { min-height: 48px; gap: 0; } .bottom-nav-item i { font-size: 1.5rem; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .hero-title { font-size: 1.6rem; } .auth-glass-card { padding: 1.25rem 1rem; border-radius: 20px; } } /* ============================================ إصلاح 16: Navbar على الهاتف (القائمة المنزلقة) ============================================ */ @media (max-width: 992px) { .menu-toggle { display: flex !important; order: -1; } .desktop-only { display: none !important; } .nav-container { padding: 0.75rem 1.25rem; justify-content: space-between; flex-wrap: nowrap; } .nav-links { position: fixed; top: 0; right: -100%; width: min(300px, 85vw); height: 100dvh; background: white; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 5rem 1.5rem 2rem; box-shadow: -4px 0 24px rgba(0,0,0,0.1); z-index: 1001; transition: right 0.3s ease; gap: 0; border-left: 1px solid var(--gray-100); overflow-y: auto; } .nav-links.open { right: 0; } .nav-links a { width: 100%; padding: 1rem 0; border-bottom: 1px solid var(--gray-100); font-size: 1.05rem; color: var(--gray-800); } /* overlay خلف القائمة */ .nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .nav-overlay.active { opacity: 1; pointer-events: auto; } /* زر تسجيل الدخول داخل القائمة المنزلقة */ .btn-nav-login-mobile { width: 100%; margin-top: 1.5rem; padding: 0.875rem; background: var(--primary); color: white; border: none; border-radius: 40px; font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } /* Hero section padding تحت الـ nav */ .hero { padding-top: 5rem; } } /* ============================================ إصلاح 17: إصلاح overflow الأفقي العام ============================================ */ html, body { overflow-x: hidden; max-width: 100vw; } * { max-width: 100%; min-width: 0; } img { max-width: 100%; height: auto; display: block; } /* ============================================ إصلاح 18: safe-area لأجهزة iPhone الحديثة ============================================ */ .bottom-nav { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); } .auth-screen { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } /* ============================================ إصلاح 19: تحسين touch targets كل عنصر قابل للنقر يجب أن يكون 44x44 كحد أدنى ============================================ */ button, a, [role="button"] { -webkit-tap-highlight-color: transparent; } .btn-primary, .btn-secondary, .btn-hero-main, .btn-hero-secondary, .btn-submit, .btn-cta-main { min-height: 44px; } /* ============================================ إصلاح 20: الـ toast notifications المشكلة: تظهر في مكان خاطئ على الهاتف ============================================ */ @media (max-width: 768px) { #toast-container { top: auto; bottom: 75px; left: 0.75rem; right: 0.75rem; width: auto; } .toast { min-width: auto; max-width: 100%; width: 100%; } } /* ============================================ إصلاح 21: الـ features grid في الصفحة الرئيسية ============================================ */ @media (max-width: 768px) { .features-section { padding: 3rem 1.25rem; } .features-grid { grid-template-columns: 1fr !important; gap: 1rem; } .feature-box { padding: 1.5rem; } .section-header h2 { font-size: 1.8rem; } .section-header p { font-size: 0.95rem; } /* CTA Section */ .cta-section { padding: 3rem 1.25rem; } .cta-box h2 { font-size: 1.8rem; } .cta-box p { font-size: 1rem; } .btn-cta-main { width: 100%; justify-content: center; padding: 1rem; } } /* ============================================ اللمسات النهائية للتجربة على الهاتف ============================================ */ @media (max-width: 768px) { body { background: #f6f8fb; overscroll-behavior-x: none; } #dashboard { min-height: 100dvh; } #dashboard .pages-container { padding-top: 1rem !important; padding-left: 0.875rem !important; padding-right: 0.875rem !important; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important; } #dashboard .content-header { min-height: 58px; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #dashboard .content-header h2 { max-width: calc(100% - 3rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-header, .builder-header { margin-bottom: 1rem; } .page-header h2, .page-header h3, .builder-header h2 { line-height: 1.45; overflow-wrap: anywhere; } .stats-grid { align-items: stretch; } .stat-card, .welcome-card, .session-card, .feature-box, .teacher-request-card, .grade-subject-card { min-width: 0; } .stat-info, .welcome-text, .session-card-content { min-width: 0; } .stat-info h4, .stat-info span, .session-card h4, .session-card p { overflow-wrap: anywhere; } /* Keep the bottom bar calm: secondary pages stay in More. */ .bottom-nav { min-height: 62px; padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom)) !important; gap: 0.25rem; } .bottom-nav-item { flex: 1 1 0; max-width: 88px; min-width: 0; min-height: 46px; } .bottom-nav-item.secondary-nav-item { display: none; } .bottom-nav-item[data-page="sessions"] { display: flex; } .bottom-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-chat { height: calc(100dvh - 58px - env(safe-area-inset-bottom)); min-height: 420px; margin: -1rem -0.875rem 0; } #page-chat .chat-layout { border-radius: 0; box-shadow: none; } #page-chat .chat-input { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); } .modal-box { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); } .notifications-modal, .more-menu, .profile-modal { max-width: calc(100vw - 1.5rem); } } @media (max-width: 400px) { .bottom-nav-item { min-height: 46px; } .bottom-nav-item i { font-size: 1.15rem; } .bottom-nav-item span { display: block; font-size: 0.52rem; } .stats-grid { gap: 0.625rem; } .stat-card { padding: 0.8rem 0.7rem; } } /* ============================================ تصميم نهائي موحد للـ navigation وشاشة الدخول ============================================ */ body.menu-open { overflow: hidden; } /* The navigation is populated only after authentication. */ .bottom-nav:not(.active) { display: none !important; } .nav-overlay { display: none; } .auth-screen { isolation: isolate; height: 100dvh; min-height: 100dvh; padding: 1.5rem; background: radial-gradient(circle at 12% 18%, rgba(226, 173, 51, 0.18), transparent 26%), radial-gradient(circle at 88% 80%, rgba(37, 99, 235, 0.24), transparent 30%), linear-gradient(135deg, #081b35 0%, #11315a 54%, #17477a 100%); overflow: hidden; } .auth-bg-animation { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .auth-bg-circle { opacity: 0.16; filter: blur(70px); } .auth-glass-card { width: min(100%, 620px); max-height: calc(100dvh - 3rem); overflow-y: auto; padding: clamp(2rem, 4vw, 3rem); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 28px; background: rgba(255, 255, 255, 0.12); box-shadow: 0 28px 70px rgba(3, 15, 32, 0.38); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; } .auth-glass-card:hover { transform: none; } .auth-glass-card .btn-back { position: static; width: fit-content; margin: 0 0 1.5rem auto; min-height: 44px; } .auth-logo { margin-bottom: 1.75rem; } .auth-logo-wrapper { width: 78px; height: 78px; } .auth-logo h1 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); } .auth-tabs-wrapper { margin-bottom: 1.5rem; } .auth-tabs { gap: 0.35rem; padding: 0.35rem; } .auth-tab { min-height: 48px; padding: 0.75rem 0.7rem; } .auth-study-icon { position: absolute; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 18px; color: white; background: rgba(255, 255, 255, 0.12); box-shadow: 0 14px 30px rgba(3, 15, 32, 0.22); backdrop-filter: blur(10px); animation: authStudyFloat 6s ease-in-out infinite; z-index: 1; } .auth-study-icon i { font-size: 1.4rem; } .auth-study-icon-pen { top: 12%; right: 3%; color: #ffd978; } .auth-study-icon-book { top: 29%; left: 3%; color: #9ed0ff; animation-delay: -1.5s; } .auth-study-icon-cap { bottom: 18%; right: 3%; color: #b8f1d2; animation-delay: -3s; } .auth-study-icon-ruler { bottom: 12%; left: 3%; color: #ffc2d1; animation-delay: -4.5s; } @keyframes authStudyFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } } @media (max-width: 992px) { .auth-study-icon { display: none; } .nav-container { flex-wrap: nowrap; } .nav-links { display: flex; } .nav-overlay { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(4, 15, 29, 0.48); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .nav-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } } @media (min-width: 993px) { .nav-links { position: static; width: auto; height: auto; padding: 0; background: transparent; box-shadow: none; flex-direction: row; } .menu-toggle { display: none !important; } } @media (max-width: 768px) { .auth-screen { align-items: flex-start; height: 100dvh; min-height: 100dvh; padding: 1rem; padding-top: max(1rem, env(safe-area-inset-top)); } .auth-glass-card { max-height: calc(100dvh - 2rem - env(safe-area-inset-top)); padding: 1.25rem; border-radius: 24px; } .auth-glass-card .btn-back { margin: 0 0 1rem auto; } .auth-study-icon { width: 44px; height: 44px; border-radius: 14px; opacity: 0.7; } .auth-study-icon i { font-size: 1rem; } .auth-study-icon-pen { top: 10%; right: 4%; } .auth-study-icon-book { top: 18%; left: 4%; } .auth-study-icon-cap { bottom: 12%; right: 4%; } .auth-study-icon-ruler { bottom: 8%; left: 4%; } } @media (max-width: 480px) { .auth-study-icon { display: none; } .auth-glass-card { padding: 1rem; } .auth-tabs { overflow: hidden; flex-wrap: nowrap; scrollbar-width: none; } .auth-tabs::-webkit-scrollbar { display: none; } .auth-tab { flex: 1 1 0; min-width: 0; padding-left: 0.25rem; padding-right: 0.25rem; font-size: 0.7rem; white-space: nowrap; } .auth-tab i { font-size: 0.75rem; } } /* ============================================ Open book authentication experience ============================================ */ .auth-glass-card { position: relative; z-index: 2; width: min(100%, 1080px); max-width: 1080px; max-height: calc(100dvh - 3rem); padding: 1.25rem; background: rgba(7, 24, 48, 0.5); border: 1px solid rgba(226, 173, 51, 0.22); border-radius: 24px; box-shadow: 0 30px 90px rgba(2, 12, 28, 0.45), 0 0 0 1px rgba(255,255,255,0.06); } .auth-glass-card .btn-back { position: relative; z-index: 4; margin: 0 0 0.9rem auto; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); } .auth-book { position: relative; display: grid; direction: ltr; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: 610px; max-height: calc(100dvh - 7rem); perspective: 1800px; transform-origin: center; } .auth-book-brand, .auth-book-page { position: relative; direction: rtl; min-width: 0; overflow: hidden; } .auth-book-brand { display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); color: white; background: linear-gradient(145deg, rgba(17,49,90,0.98), rgba(13,37,70,0.98)), radial-gradient(circle at 20% 20%, rgba(226,173,51,0.2), transparent 35%); border-radius: 18px 4px 4px 18px; box-shadow: inset -18px 0 28px rgba(0,0,0,0.08); } .auth-book-brand::before, .auth-book-brand::after { position: absolute; content: ''; pointer-events: none; } .auth-book-brand::before { width: 220px; height: 220px; top: -90px; left: -90px; border: 1px solid rgba(226,173,51,0.18); border-radius: 50%; } .auth-book-brand::after { right: 2rem; bottom: 2rem; width: 110px; height: 1px; background: linear-gradient(90deg, transparent, rgba(226,173,51,0.75)); } .auth-book-brand-topline, .auth-book-page-label { display: inline-flex; align-items: center; gap: 0.5rem; color: #f4d889; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; } .auth-book-brand-topline i, .auth-book-page-label i { font-size: 0.9rem; } .auth-book-brand .auth-logo { position: relative; z-index: 1; margin: 2rem 0 0; text-align: right; } .auth-book-brand .auth-logo-wrapper { width: 88px; height: 88px; margin: 0 0 1rem; } .auth-book-brand .auth-logo h1 { max-width: 280px; color: white; background: none; -webkit-text-fill-color: white; font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1.35; } .auth-book-brand .auth-tagline { color: rgba(255,255,255,0.72); } .auth-book-message { position: relative; z-index: 1; max-width: 320px; margin-top: 2rem; padding-top: 2rem; } .auth-book-kicker { display: block; margin-bottom: 0.65rem; color: #f4d889; font-size: 0.8rem; font-weight: 700; } .auth-book-message h2 { margin: 0 0 0.75rem; color: white; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.35; } .auth-book-message p { color: rgba(255,255,255,0.68); font-size: 0.9rem; line-height: 1.9; } .auth-book-mark { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; color: rgba(255,255,255,0.62); font-size: 0.75rem; } .auth-book-mark i { color: var(--secondary); } .auth-book-quote { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.7rem; max-width: 320px; margin-top: 2rem; padding: 0.9rem 1rem; border: 1px solid rgba(226,173,51,0.2); border-radius: 12px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.72); font-size: 0.8rem; } .auth-book-quote i { color: #f4d889; font-size: 0.9rem; } .auth-book-benefits { position: relative; z-index: 1; display: grid; gap: 0.65rem; margin-top: 1.5rem; } .auth-book-benefits div { display: flex; align-items: center; gap: 0.65rem; color: rgba(255,255,255,0.78); font-size: 0.78rem; } .auth-book-benefits i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(226,173,51,0.35); border-radius: 8px; color: #f4d889; font-size: 0.7rem; } .auth-book-page { z-index: 1; padding: clamp(1.5rem, 3vw, 2.75rem); padding-top: 1.25rem; color: var(--gray-800); background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-radius: 4px 18px 18px 4px; box-shadow: inset 18px 0 28px rgba(15,23,42,0.04), 0 16px 35px rgba(2,12,28,0.14); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; } .auth-book-page::after { position: absolute; inset: 0.9rem; border: 1px solid rgba(226,173,51,0.12); border-radius: 10px 14px 14px 10px; pointer-events: none; content: ''; } .auth-book-page > * { position: relative; z-index: 1; } .auth-book-page-header { display: none !important; } .auth-book-page-number { display: none; } /* Keep the educational copy for registration, but keep login focused. */ .auth-book[data-auth-tab="login"] .auth-book-message, .auth-book[data-auth-tab="login"] .auth-book-benefits, .auth-book[data-auth-tab="login"] .auth-book-quote, .auth-book[data-auth-tab="login"] .auth-book-mark { display: none; } .auth-book-page .auth-tabs-wrapper { margin-bottom: 1.35rem; } .auth-book-page .auth-tabs { background: var(--gray-100); } .auth-book-page .auth-tab { color: var(--gray-500); } .auth-book-page .auth-tab.active { color: var(--primary); background: white; box-shadow: 0 5px 14px rgba(15,23,42,0.1); } .auth-book-page #auth-screen .form-group label, #auth-screen .auth-book-page .form-group label { color: var(--gray-700); } #auth-screen .auth-book-page .form-group input, #auth-screen .auth-book-page .form-group select, #auth-screen .auth-book-page .form-group textarea { color: var(--gray-900); background: white; border: 1px solid var(--gray-300); border-radius: 11px; box-shadow: 0 2px 8px rgba(15,23,42,0.03); } #auth-screen .auth-book-page .form-group input:focus, #auth-screen .auth-book-page .form-group select:focus, #auth-screen .auth-book-page .form-group textarea:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(17,49,90,0.1), 0 5px 15px rgba(15,23,42,0.06); } #auth-screen .auth-book-page .form-group input::placeholder, #auth-screen .auth-book-page .form-group textarea::placeholder { color: var(--gray-400); } #auth-screen .auth-book-page .form-group select { color: var(--gray-900); background-image: none; } #auth-screen .auth-book-page .toggle-pass { color: var(--gray-400); } #auth-screen .auth-book-page .checkbox-label { color: var(--gray-600); } #auth-screen .auth-book-page .checkbox-label a { color: var(--primary); } .auth-book-page .btn-submit { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 11px; box-shadow: 0 9px 18px rgba(17,49,90,0.18); } .auth-book-page .btn-submit:hover { background: linear-gradient(135deg, #174577, var(--primary-dark)); box-shadow: 0 12px 24px rgba(17,49,90,0.25), 0 0 0 1px rgba(226,173,51,0.3); } .auth-book-page .auth-footer { margin-top: 1.35rem; padding-top: 1rem; border-color: var(--gray-200); color: var(--gray-500); } .auth-book-page .auth-footer a { color: var(--primary); } .auth-book-spine { display: none; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3; width: 18px; pointer-events: none; transform: translateX(-50%); background: linear-gradient(90deg, rgba(15,23,42,0.2), rgba(255,255,255,0.45) 45%, rgba(15,23,42,0.18)); filter: blur(0.2px); } .auth-pencil { position: absolute; right: calc(50% - 28px); bottom: 16px; z-index: 5; display: grid; place-items: center; width: 48px; height: 48px; color: var(--secondary); font-size: 1.35rem; filter: drop-shadow(0 5px 5px rgba(15,23,42,0.2)); transform: rotate(-28deg); transition: right 0.45s ease, bottom 0.45s ease, transform 0.45s ease; } /* On login, keep the pencil below the brand copy instead of on the gutter. */ .auth-book[data-auth-tab="login"] .auth-pencil { top: 58%; right: auto; bottom: auto; left: 27%; } .auth-book[data-auth-tab="register"] .auth-pencil, .auth-book[data-auth-tab="teacher-register"] .auth-pencil { display: none; } .auth-book:has(#login-email:focus) .auth-pencil { right: 23%; bottom: 52%; transform: rotate(-8deg); } .auth-book:has(#login-password:focus) .auth-pencil { right: 20%; bottom: 35%; transform: rotate(-8deg); } .auth-book.is-writing .auth-pencil { transform: rotate(-8deg) translate(5px, -3px); } .auth-book.has-error .auth-pencil { animation: authPencilCheck 420ms ease-out; } @keyframes authPencilCheck { 0%, 100% { transform: rotate(-28deg); } 45% { transform: rotate(-18deg) translateX(-4px); } } .auth-book.is-flipping .auth-book-page { animation: authPageFlip 650ms cubic-bezier(0.2, 0.75, 0.25, 1) both; } @keyframes authPageFlip { 0% { transform: perspective(1200px) rotateY(0deg); opacity: 1; } 45% { transform: perspective(1200px) rotateY(-5deg) translateX(-4px); opacity: 0.82; } 100% { transform: perspective(1200px) rotateY(0deg); opacity: 1; } } @media (max-width: 900px) and (min-width: 769px) { .auth-glass-card { max-width: 820px; } .auth-book { min-height: 560px; } .auth-book-brand, .auth-book-page { padding: 1.5rem; } } @media (max-width: 768px) { .auth-glass-card { width: min(100%, 560px); max-height: calc(100dvh - 2rem); padding: 0.7rem; border-radius: 20px; } .auth-book { display: flex; flex-direction: column; min-height: 0; height: calc(100dvh - 7.5rem); max-height: calc(100dvh - 7.5rem); } .auth-book-brand { flex: 0 0 auto; min-height: 205px; padding: 1.25rem 1.35rem; border-radius: 15px 15px 5px 5px; } .auth-book-brand .auth-logo { display: grid; grid-template-columns: auto 1fr; column-gap: 0.85rem; align-items: center; margin: 1.25rem 0 0; text-align: right; } .auth-book-brand .auth-logo-wrapper { grid-row: span 2; width: 58px; height: 58px; margin: 0; } .auth-book-brand .auth-logo h1 { font-size: 1.15rem; } .auth-book-brand .auth-tagline { font-size: 0.75rem; } .auth-book-message { display: none; } .auth-book-benefits, .auth-book-quote { display: none; } .auth-book-mark { margin-top: 0.9rem; } .auth-book-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.25rem; border-radius: 5px 5px 15px 15px; } .auth-book-spine { top: calc(205px - 1px); bottom: auto; left: 0; right: 0; width: auto; height: 12px; transform: translateY(-50%); background: linear-gradient(180deg, rgba(15,23,42,0.2), rgba(255,255,255,0.55), rgba(15,23,42,0.12)); } .auth-pencil { display: none; } } @media (prefers-reduced-motion: reduce) { .auth-study-icon, .auth-book.is-flipping .auth-book-page { animation: none; } .auth-pencil, .auth-glass-card, .auth-tab, .btn-submit { transition: none; } }