Spaces:
Runtime error
Runtime error
| .quizzes-hero { | |
| background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%); | |
| padding: 3rem 0; | |
| position: relative; | |
| overflow: hidden; | |
| color: white; | |
| margin-top: -1rem; | |
| margin-bottom: 3rem; | |
| } | |
| .quizzes-hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(circle at 30% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); | |
| animation: quizFloat 20s ease-in-out infinite; | |
| } | |
| @keyframes quizFloat { | |
| 0%, 100% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(1deg); } | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| text-align: center; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .hero-greeting { | |
| font-size: clamp(2rem, 4vw, 3rem); | |
| font-weight: 900; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(45deg, #fff, rgba(255,255,255,0.8)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| margin-bottom: 2rem; | |
| } | |
| .btn-hero-action { | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50px; | |
| padding: 0.75rem 2rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| display: inline-block; | |
| margin: 0.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .btn-hero-action::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); | |
| transition: left 0.5s; | |
| } | |
| .btn-hero-action:hover::before { | |
| left: 100%; | |
| } | |
| .btn-hero-action:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3); | |
| background: rgba(255, 255, 255, 0.3); | |
| border-color: rgba(255, 255, 255, 0.5); | |
| } | |
| /* Quiz Cards */ | |
| .quiz-card { | |
| background: var(--card-bg); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| animation: quizCardSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both; | |
| height: 100%; | |
| } | |
| .quiz-card:nth-child(1) { animation-delay: 0.1s; } | |
| .quiz-card:nth-child(2) { animation-delay: 0.2s; } | |
| .quiz-card:nth-child(3) { animation-delay: 0.3s; } | |
| .quiz-card:nth-child(4) { animation-delay: 0.4s; } | |
| .quiz-card:nth-child(5) { animation-delay: 0.5s; } | |
| .quiz-card:nth-child(6) { animation-delay: 0.6s; } | |
| @keyframes quizCardSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .quiz-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 25px 50px rgba(0,0,0,0.15); | |
| } | |
| .quiz-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| position: relative; | |
| overflow: hidden; | |
| background: linear-gradient(135deg, #8b5cf6, #7c3aed); | |
| } | |
| .quiz-icon::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1)); | |
| border-radius: inherit; | |
| } | |
| .quiz-icon i { | |
| position: relative; | |
| z-index: 1; | |
| color: white; | |
| } | |
| .quiz-title { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 0.5rem; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| line-clamp: 2; | |
| } | |
| .quiz-description { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 1rem; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| line-clamp: 3; | |
| } | |
| .quiz-stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| padding: 0.75rem; | |
| background: var(--background-light); | |
| border-radius: 10px; | |
| } | |
| .stat-value { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: #8b5cf6; | |
| margin-bottom: 0.25rem; | |
| } | |
| .stat-label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .quiz-status { | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-align: center; | |
| margin-bottom: 1rem; | |
| } | |
| .quiz-status.active { | |
| background: rgba(34, 197, 94, 0.1); | |
| color: #16a34a; | |
| } | |
| .quiz-status.inactive { | |
| background: rgba(107, 114, 128, 0.1); | |
| color: #6b7280; | |
| } | |
| .best-score { | |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); | |
| color: white; | |
| padding: 0.75rem; | |
| border-radius: 10px; | |
| text-align: center; | |
| margin-bottom: 1rem; | |
| } | |
| .best-score-label { | |
| font-size: 0.75rem; | |
| opacity: 0.9; | |
| margin-bottom: 0.25rem; | |
| } | |
| .best-score-value { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| } | |
| .quiz-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .btn-quiz-action { | |
| flex: 1; | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| text-decoration: none; | |
| text-align: center; | |
| transition: all 0.2s ease; | |
| } | |
| .btn-quiz-primary { | |
| background: linear-gradient(135deg, #8b5cf6, #7c3aed); | |
| color: white; | |
| border: none; | |
| } | |
| .btn-quiz-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3); | |
| } | |
| .btn-quiz-secondary { | |
| background: var(--background-light); | |
| color: var(--text-secondary); | |
| border: 2px solid var(--border-color); | |
| } | |
| .btn-quiz-secondary:hover { | |
| background: var(--border-color); | |
| color: var(--text-primary); | |
| } | |
| .quiz-meta { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-align: center; | |
| } | |
| .dropdown-menu { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| box-shadow: 0 8px 25px rgba(0,0,0,0.1); | |
| padding: 0.5rem 0; | |
| } | |
| .dropdown-item { | |
| color: var(--text-primary); | |
| padding: 0.5rem 1rem; | |
| font-size: 0.875rem; | |
| transition: all 0.2s ease; | |
| } | |
| .dropdown-item:hover { | |
| background: var(--background-light); | |
| color: var(--text-primary); | |
| } | |
| .dropdown-item i { | |
| width: 16px; | |
| margin-right: 0.5rem; | |
| } | |
| .dropdown-divider { | |
| margin: 0.25rem 0; | |
| border-color: var(--border-color); | |
| } | |
| /* Empty State */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| color: var(--text-secondary); | |
| } | |
| .empty-state-icon { | |
| font-size: 4rem; | |
| margin-bottom: 1.5rem; | |
| opacity: 0.5; | |
| color: #8b5cf6; | |
| } | |
| .empty-state-title { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| color: var(--text-primary); | |
| } | |
| .empty-state-text { | |
| font-size: 1.1rem; | |
| margin-bottom: 2rem; | |
| max-width: 500px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* Google Forms Links */ | |
| .google-form-links { | |
| margin: 1rem 0; | |
| padding: 0.75rem; | |
| background: rgba(139, 92, 246, 0.05); | |
| border-radius: 0.5rem; | |
| border-left: 3px solid var(--primary-color); | |
| } | |
| .form-link { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.9rem; | |
| } | |
| .form-link:last-child { | |
| margin-bottom: 0; | |
| } | |
| .form-link a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| transition: color 0.2s ease; | |
| } | |
| .form-link a:hover { | |
| color: var(--primary-dark); | |
| text-decoration: underline; | |
| } | |
| .form-link i { | |
| color: var(--primary-color); | |
| opacity: 0.7; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .quizzes-hero { | |
| padding: 2rem 0; | |
| } | |
| .hero-greeting { | |
| font-size: 2rem; | |
| } | |
| .hero-subtitle { | |
| font-size: 1rem; | |
| } | |
| .btn-hero-action { | |
| padding: 0.5rem 1.5rem; | |
| margin: 0.25rem; | |
| } | |
| .quiz-card { | |
| padding: 1.5rem; | |
| } | |
| .quiz-stats { | |
| grid-template-columns: 1fr; | |
| gap: 0.5rem; | |
| } | |
| } | |
| /* Question Modal Styles - Matching quiz generation page design */ | |
| .questions-list { | |
| counter-reset: question; | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| padding: 0; | |
| } | |
| .question-item { | |
| margin-bottom: 2rem; | |
| padding: 1.5rem; | |
| border: 1px solid var(--border-color, #e5e7eb); | |
| border-radius: var(--border-radius-lg, 0.75rem); | |
| background: linear-gradient(145deg, var(--background-light, #f9fafb), #ffffff); | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05); | |
| transition: var(--transition, all 0.2s ease); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .question-item::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(45deg, transparent 0%, rgba(16, 185, 129, 0.03) 25%, transparent 50%, rgba(16, 185, 129, 0.03) 75%, transparent 100%); | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .question-item:hover { | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); | |
| transform: translateY(-2px); | |
| border-color: var(--primary-color, #10b981); | |
| } | |
| .question-item:hover::after { | |
| opacity: 1; | |
| } | |
| .question-item::before { | |
| counter-increment: question; | |
| content: "Question " counter(question); | |
| display: inline-block; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(135deg, var(--primary-color, #10b981), var(--primary-dark, #059669)); | |
| color: white; | |
| padding: 0.35rem 0.85rem; | |
| border-radius: var(--border-radius-sm, 0.25rem); | |
| font-size: 0.875rem; | |
| position: absolute; | |
| top: -0.5rem; | |
| left: 1rem; | |
| box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); | |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); | |
| z-index: 2; | |
| } | |
| .question-text { | |
| font-size: 1.1rem; | |
| margin-bottom: 1.5rem; | |
| font-weight: 500; | |
| color: var(--text-primary, #111827); | |
| line-height: 1.6; | |
| margin-top: 1rem; | |
| } | |
| .choices-list { | |
| list-style: none; | |
| padding-left: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| .choice-item { | |
| margin-bottom: 0.75rem; | |
| padding: 0.875rem 1rem; | |
| border: 1px solid var(--border-color, #e5e7eb); | |
| border-radius: var(--border-radius, 0.5rem); | |
| background: linear-gradient(145deg, var(--card-bg, #ffffff), #fafafa); | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8); | |
| transition: var(--transition, all 0.2s ease); | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .choice-item:hover { | |
| border-color: var(--primary-color, #10b981); | |
| background: linear-gradient(145deg, var(--background-light, #f9fafb), #ffffff); | |
| box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9); | |
| transform: translateX(3px); | |
| } | |
| .choice-item.correct { | |
| border-color: var(--success-color, #059669); | |
| background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.05)); | |
| border-width: 2px; | |
| box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7); | |
| } | |
| .choice-item.correct:hover { | |
| background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.08)); | |
| box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8); | |
| } | |
| .choice-item.correct::after { | |
| content: "✓"; | |
| position: absolute; | |
| right: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--success-color, #059669); | |
| font-weight: bold; | |
| font-size: 1.2rem; | |
| text-shadow: 0 1px 2px rgba(5, 150, 105, 0.3); | |
| background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%); | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 1px 3px rgba(5, 150, 105, 0.2); | |
| } | |
| .explanation { | |
| margin-top: 1.5rem; | |
| padding: 1.25rem; | |
| background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #e0f2fe 100%); | |
| border-radius: var(--border-radius, 0.5rem); | |
| border-left: 4px solid var(--info-color, #0ea5e9); | |
| border-right: 1px solid rgba(14, 165, 233, 0.2); | |
| border-top: 1px solid rgba(14, 165, 233, 0.2); | |
| border-bottom: 1px solid rgba(14, 165, 233, 0.2); | |
| box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); | |
| font-style: italic; | |
| color: var(--text-secondary, #6b7280); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .explanation::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(45deg, transparent 0%, rgba(14, 165, 233, 0.05) 30%, transparent 60%, rgba(14, 165, 233, 0.05) 90%, transparent 100%); | |
| pointer-events: none; | |
| } | |
| .explanation:hover { | |
| background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 50%, #dbeafe 100%); | |
| box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9); | |
| transform: translateY(-1px); | |
| } | |
| .explanation::before { | |
| content: "💡"; | |
| position: absolute; | |
| top: 1rem; | |
| left: -0.25rem; | |
| font-size: 1.2rem; | |
| } | |
| .explanation strong { | |
| color: var(--text-primary, #111827); | |
| font-style: normal; | |
| } | |
| /* Modal Enhancements */ | |
| .modal-content { | |
| background-color: var(--card-bg, #ffffff); | |
| border: 1px solid var(--border-color, #e5e7eb); | |
| border-radius: var(--border-radius-lg, 0.75rem); | |
| box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)); | |
| } | |
| .modal-header.bg-primary { | |
| background: linear-gradient(135deg, var(--primary-color, #10b981), var(--primary-dark, #059669)) ; | |
| border-bottom: 1px solid var(--border-color, #e5e7eb); | |
| border-radius: var(--border-radius-lg, 0.75rem) var(--border-radius-lg, 0.75rem) 0 0; | |
| } | |
| .modal-body { | |
| background-color: var(--card-bg, #ffffff); | |
| color: var(--text-primary, #111827); | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| } | |
| .modal-footer { | |
| background-color: var(--card-bg, #ffffff); | |
| border-top: 1px solid var(--border-color, #e5e7eb); | |
| border-radius: 0 0 var(--border-radius-lg, 0.75rem) var(--border-radius-lg, 0.75rem); | |
| } | |
| /* Custom scrollbar for modal */ | |
| .modal-body::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .modal-body::-webkit-scrollbar-track { | |
| background: var(--background-light, #f9fafb); | |
| border-radius: 4px; | |
| } | |
| .modal-body::-webkit-scrollbar-thumb { | |
| background: var(--border-color, #e5e7eb); | |
| border-radius: 4px; | |
| } | |
| .modal-body::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-muted, #9ca3af); | |
| } | |
| /* Animation for showing results */ | |
| @keyframes slideInUpQuiz { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .question-item { | |
| animation: slideInUpQuiz 0.3s ease-out; | |
| } | |
| /* Dark mode specific adjustments */ | |
| [data-theme="dark"] .choice-item.correct { | |
| background-color: rgba(52, 211, 153, 0.15); | |
| } | |
| [data-theme="dark"] .explanation { | |
| background-color: var(--background-dark, #1f2937); | |
| } | |
| [data-theme="dark"] .modal-content { | |
| background-color: var(--card-bg, #1f2937); | |
| border-color: var(--border-color-dark, #374151); | |
| } | |
| /* Dark mode support for question items */ | |
| [data-theme="dark"] .question-item { | |
| background: linear-gradient(145deg, var(--card-bg, #1f2937), #111827); | |
| border-color: var(--border-color, #374151); | |
| color: var(--text-primary, #f9fafb); | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15); | |
| } | |
| [data-theme="dark"] .question-item::after { | |
| background: linear-gradient(45deg, transparent 0%, rgba(52, 211, 153, 0.05) 25%, transparent 50%, rgba(52, 211, 153, 0.05) 75%, transparent 100%); | |
| } | |
| [data-theme="dark"] .question-item:hover { | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.25); | |
| border-color: var(--primary-color, #34d399); | |
| } | |
| [data-theme="dark"] .question-item::before { | |
| background: linear-gradient(135deg, var(--primary-color, #34d399), var(--primary-dark, #10b981)); | |
| box-shadow: 0 2px 8px rgba(52, 211, 153, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); | |
| } | |
| [data-theme="dark"] .question-text { | |
| color: var(--text-primary, #f9fafb); | |
| } | |
| [data-theme="dark"] .choice-item { | |
| background: linear-gradient(145deg, var(--background-dark, #1f2937), #0f172a); | |
| border-color: var(--border-color, #374151); | |
| color: var(--text-secondary, #9ca3af); | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05); | |
| } | |
| [data-theme="dark"] .choice-item:hover { | |
| border-color: var(--primary-color, #34d399); | |
| background: linear-gradient(145deg, var(--background-light, #111827), var(--card-bg, #1f2937)); | |
| box-shadow: 0 2px 6px rgba(52, 211, 153, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); | |
| } | |
| [data-theme="dark"] .choice-item.correct { | |
| background: linear-gradient(135deg, rgba(52, 211, 153, 0.15), rgba(52, 211, 153, 0.08)); | |
| border-color: var(--success-color, #34d399); | |
| box-shadow: 0 2px 8px rgba(52, 211, 153, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); | |
| } | |
| [data-theme="dark"] .choice-item.correct:hover { | |
| background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(52, 211, 153, 0.12)); | |
| box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12); | |
| } | |
| [data-theme="dark"] .choice-item.correct::after { | |
| color: var(--success-color, #34d399); | |
| text-shadow: 0 1px 2px rgba(52, 211, 153, 0.4); | |
| background: radial-gradient(circle, rgba(52, 211, 153, 0.25) 0%, transparent 70%); | |
| box-shadow: 0 1px 3px rgba(52, 211, 153, 0.3); | |
| } | |
| [data-theme="dark"] .explanation { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1e3a8a 100%); | |
| border-left-color: var(--info-color, #38bdf8); | |
| border-right: 1px solid rgba(56, 189, 248, 0.3); | |
| border-top: 1px solid rgba(56, 189, 248, 0.3); | |
| border-bottom: 1px solid rgba(56, 189, 248, 0.3); | |
| color: var(--text-primary, #f9fafb); | |
| box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); | |
| } | |
| [data-theme="dark"] .explanation::after { | |
| background: linear-gradient(45deg, transparent 0%, rgba(56, 189, 248, 0.08) 30%, transparent 60%, rgba(56, 189, 248, 0.08) 90%, transparent 100%); | |
| } | |
| [data-theme="dark"] .explanation:hover { | |
| background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #1d4ed8 100%); | |
| box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15); | |
| } | |
| [dark-theme="dark"] .btn-document-action{ | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50px; | |
| padding: 0.75rem 2rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| display: inline-block; | |
| margin: 0.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| backdrop-filter: blur(10px); | |
| } | |
| [data-theme="dark"] .quizzes-hero { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); | |
| } |