/* ============================================ QUIZ FRAMEWORK v1.0 Universal Reusable Quiz System for High-Engagement Conversions PURPOSE: - Pattern interrupt & stop the skim - Psychological engagement through micro-interactions - Conversion-optimized results with CTA integration - Reusable across all articles SIZE: ~12-15 KB AUTHOR: Joseph Nyamache CREATED: January 2, 2026 USAGE: 1. Link in : 2. Use .quiz-framework container 3. Apply theme: .theme-[trust|growth|wisdom|clarity] 4. Follow HTML template structure ============================================ */ /* ============================================ 1. CSS VARIABLES & THEME SYSTEM ============================================ */ :root { /* Base colors */ --quiz-white: #ffffff; --quiz-black: #1a1a1a; --quiz-gray-50: #f9fafb; --quiz-gray-100: #f3f4f6; --quiz-gray-200: #e5e7eb; --quiz-gray-300: #d1d5db; --quiz-gray-400: #9ca3af; --quiz-gray-500: #6b7280; --quiz-gray-600: #4b5563; --quiz-gray-700: #374151; --quiz-gray-800: #1f2937; /* Default theme variables */ --quiz-primary: #3b82f6; --quiz-primary-light: #60a5fa; --quiz-primary-dark: #2563eb; --quiz-primary-bg: #eff6ff; --quiz-secondary: #8b5cf6; --quiz-success: #10b981; --quiz-warning: #f59e0b; --quiz-danger: #ef4444; /* Spacing */ --quiz-space-xs: 0.5rem; --quiz-space-sm: 0.75rem; --quiz-space-md: 1rem; --quiz-space-lg: 1.5rem; --quiz-space-xl: 2rem; --quiz-space-2xl: 3rem; /* Border radius */ --quiz-radius-sm: 8px; --quiz-radius-md: 12px; --quiz-radius-lg: 16px; --quiz-radius-xl: 20px; /* Shadows */ --quiz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --quiz-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --quiz-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --quiz-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); /* Transitions */ --quiz-transition-fast: 0.15s ease; --quiz-transition-base: 0.3s ease; --quiz-transition-slow: 0.5s ease; } /* Theme: Trust (Blue) - Foundational Clarity */ .quiz-framework.theme-trust { --quiz-primary: #3b82f6; --quiz-primary-light: #60a5fa; --quiz-primary-dark: #2563eb; --quiz-primary-bg: #eff6ff; } /* Theme: Growth (Green) - Directional Clarity */ .quiz-framework.theme-growth { --quiz-primary: #10b981; --quiz-primary-light: #34d399; --quiz-primary-dark: #059669; --quiz-primary-bg: #d1fae5; } /* Theme: Wisdom (Purple) - Identity Clarity */ .quiz-framework.theme-wisdom { --quiz-primary: #8b5cf6; --quiz-primary-light: #a78bfa; --quiz-primary-dark: #7c3aed; --quiz-primary-bg: #ede9fe; } /* Theme: Clarity (Cyan) - Insights */ .quiz-framework.theme-clarity { --quiz-primary: #06b6d4; --quiz-primary-light: #22d3ee; --quiz-primary-dark: #0891b2; --quiz-primary-bg: #cffafe; } /* Theme: Warning (Amber) - Attention */ .quiz-framework.theme-warning { --quiz-primary: #f59e0b; --quiz-primary-light: #fbbf24; --quiz-primary-dark: #d97706; --quiz-primary-bg: #fef3c7; } /* Theme: Urgent (Red) - Critical */ .quiz-framework.theme-urgent { --quiz-primary: #ef4444; --quiz-primary-light: #f87171; --quiz-primary-dark: #dc2626; --quiz-primary-bg: #fee2e2; } /* Theme: Neutral (Gray) - Default */ .quiz-framework.theme-neutral { --quiz-primary: #6b7280; --quiz-primary-light: #9ca3af; --quiz-primary-dark: #4b5563; --quiz-primary-bg: #f3f4f6; } /* ============================================ 2. QUIZ CONTAINER & LAYOUT ============================================ */ .quiz-framework { max-width: 780px; margin: var(--quiz-space-2xl) auto; padding: 0 var(--quiz-space-lg); } .quiz-container { background: var(--quiz-white); border-radius: var(--quiz-radius-xl); box-shadow: var(--quiz-shadow-lg); overflow: hidden; border: 2px solid var(--quiz-gray-200); } /* Quiz Header */ .quiz-header { background: linear-gradient(135deg, var(--quiz-primary-bg) 0%, var(--quiz-white) 100%); padding: var(--quiz-space-2xl) var(--quiz-space-xl); border-bottom: 2px solid var(--quiz-gray-200); text-align: center; } .quiz-title { font-size: 1.75rem; font-weight: 700; color: var(--quiz-black); margin: 0 0 var(--quiz-space-sm) 0; line-height: 1.3; } .quiz-subtitle { font-size: 1rem; color: var(--quiz-gray-600); margin: 0 0 var(--quiz-space-lg) 0; line-height: 1.6; text-align: left; } .quiz-meta { display: flex; justify-content: center; align-items: center; gap: var(--quiz-space-lg); font-size: 0.875rem; color: var(--quiz-gray-500); } .quiz-meta-item { display: flex; align-items: center; gap: var(--quiz-space-xs); } .quiz-icon { font-size: 1.125rem; } /* ============================================ 3. PROGRESS SYSTEM ============================================ */ .quiz-progress-wrapper { padding: var(--quiz-space-lg) var(--quiz-space-xl); background: var(--quiz-gray-50); border-bottom: 1px solid var(--quiz-gray-200); } .quiz-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--quiz-space-sm); } .quiz-progress-label { font-size: 0.875rem; font-weight: 600; color: var(--quiz-gray-700); } .quiz-progress-count { font-size: 0.875rem; color: var(--quiz-gray-500); } .quiz-progress-bar-container { height: 8px; background: var(--quiz-gray-200); border-radius: 999px; overflow: hidden; position: relative; } .quiz-progress-bar { height: 100%; background: linear-gradient(90deg, var(--quiz-primary) 0%, var(--quiz-primary-light) 100%); border-radius: 999px; transition: width var(--quiz-transition-slow); position: relative; } /* Progress bar shimmer effect */ .quiz-progress-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Category indicators (real-time tracking) */ .quiz-category-indicators { display: flex; gap: var(--quiz-space-sm); margin-top: var(--quiz-space-md); } .quiz-category-indicator { flex: 1; text-align: center; } .quiz-category-label { font-size: 0.75rem; font-weight: 600; color: var(--quiz-gray-600); margin-bottom: var(--quiz-space-xs); text-transform: uppercase; letter-spacing: 0.5px; } .quiz-category-bar { height: 4px; background: var(--quiz-gray-200); border-radius: 999px; overflow: hidden; } .quiz-category-fill { height: 100%; background: var(--quiz-primary); border-radius: 999px; transition: width var(--quiz-transition-base); } /* Pulse animation when category updates */ .quiz-category-indicator.pulse .quiz-category-fill { animation: pulse 0.5s ease; } @keyframes pulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.5); } } /* ============================================ 4. QUESTION COMPONENTS ============================================ */ .quiz-questions { padding: var(--quiz-space-xl); } .quiz-question { display: none; animation: slideIn 0.4s ease; } .quiz-question.active { display: block; } @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .quiz-question-text { font-size: 1.25rem; font-weight: 600; color: var(--quiz-black); margin: 0 0 var(--quiz-space-xl) 0; line-height: 1.5; } /* Answer options */ .quiz-answers { display: flex; flex-direction: column; gap: var(--quiz-space-md); } .quiz-answer-option { position: relative; background: var(--quiz-white); border: 2px solid var(--quiz-gray-200); border-radius: var(--quiz-radius-md); padding: var(--quiz-space-lg); cursor: pointer; transition: all var(--quiz-transition-base); display: flex; align-items: center; gap: var(--quiz-space-md); } /* Radio button */ .quiz-answer-radio { position: relative; width: 24px; height: 24px; border: 2px solid var(--quiz-gray-300); border-radius: 50%; flex-shrink: 0; transition: all var(--quiz-transition-base); } .quiz-answer-radio::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 12px; height: 12px; background: var(--quiz-primary); border-radius: 50%; transition: transform var(--quiz-transition-fast); } /* Answer text */ .quiz-answer-text { flex: 1; font-size: 1rem; color: var(--quiz-gray-700); line-height: 1.6; } /* Hover state - THE MAGNETIC EFFECT */ .quiz-answer-option:hover { border-color: var(--quiz-primary-light); background: var(--quiz-primary-bg); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 4px var(--quiz-primary-bg); } .quiz-answer-option:hover .quiz-answer-radio { border-color: var(--quiz-primary); transform: scale(1.1); } /* Selected state - THE SATISFACTION */ .quiz-answer-option.selected { border-color: var(--quiz-primary); background: var(--quiz-primary-bg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 4px var(--quiz-primary-bg); } .quiz-answer-option.selected .quiz-answer-radio { border-color: var(--quiz-primary); background: var(--quiz-primary-bg); } .quiz-answer-option.selected .quiz-answer-radio::after { transform: translate(-50%, -50%) scale(1); } .quiz-answer-option.selected .quiz-answer-text { color: var(--quiz-black); font-weight: 500; } /* Active/clicking state */ .quiz-answer-option:active { transform: translateY(0); } /* Disabled state */ .quiz-answer-option.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ============================================ 5. NAVIGATION & CONTROLS ============================================ */ .quiz-navigation { display: flex; justify-content: space-between; align-items: center; gap: var(--quiz-space-md); padding: var(--quiz-space-xl); border-top: 2px solid var(--quiz-gray-200); background: var(--quiz-gray-50); } .quiz-btn { padding: 0.875rem 1.75rem; font-size: 1rem; font-weight: 600; border: none; border-radius: var(--quiz-radius-md); cursor: pointer; transition: all var(--quiz-transition-base); display: inline-flex; align-items: center; gap: var(--quiz-space-xs); text-decoration: none; } .quiz-btn-primary { background: linear-gradient(135deg, var(--quiz-primary) 0%, var(--quiz-primary-dark) 100%); color: var(--quiz-white); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .quiz-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } .quiz-btn-primary:active { transform: translateY(0); } .quiz-btn-secondary { background: var(--quiz-white); color: var(--quiz-gray-700); border: 2px solid var(--quiz-gray-300); } .quiz-btn-secondary:hover { background: var(--quiz-gray-50); border-color: var(--quiz-gray-400); } .quiz-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } .quiz-btn-icon { font-size: 1.125rem; } /* ============================================ 6. RESULTS DISPLAY - CONVERSION OPTIMIZED ============================================ */ .quiz-results { display: none; animation: fadeIn 0.6s ease; } .quiz-results.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Results header */ .quiz-results-header { background: linear-gradient(135deg, var(--quiz-primary) 0%, var(--quiz-primary-dark) 100%); color: var(--quiz-white); padding: var(--quiz-space-2xl) var(--quiz-space-xl); text-align: center; position: relative; overflow: hidden; } .quiz-results-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); animation: rotate 20s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .quiz-results-eyebrow { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; margin: 0 0 var(--quiz-space-sm) 0; position: relative; z-index: 1; } .quiz-results-title { font-size: 2rem; font-weight: 700; margin: 0 0 var(--quiz-space-md) 0; position: relative; z-index: 1; } .quiz-results-badge { display: inline-block; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.2); border: 3px solid var(--quiz-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: var(--quiz-space-lg) auto 0; position: relative; z-index: 1; animation: bounce 1s ease; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Results content */ .quiz-results-content { padding: var(--quiz-space-2xl) var(--quiz-space-xl); } .quiz-results-description { font-size: 1.125rem; color: var(--quiz-gray-700); line-height: 1.7; margin: 0 0 var(--quiz-space-2xl) 0; text-align: center; } /* Score breakdown */ .quiz-results-scores { background: var(--quiz-gray-50); border-radius: var(--quiz-radius-lg); padding: var(--quiz-space-xl); margin: 0 0 var(--quiz-space-2xl) 0; } .quiz-results-scores-title { font-size: 1.125rem; font-weight: 600; color: var(--quiz-black); margin: 0 0 var(--quiz-space-lg) 0; text-align: center; } .quiz-score-item { margin-bottom: var(--quiz-space-lg); } .quiz-score-item:last-child { margin-bottom: 0; } .quiz-score-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--quiz-space-xs); } .quiz-score-label { font-size: 0.9375rem; font-weight: 600; color: var(--quiz-gray-700); } .quiz-score-value { font-size: 0.9375rem; font-weight: 700; color: var(--quiz-primary); } .quiz-score-bar { height: 12px; background: var(--quiz-gray-200); border-radius: 999px; overflow: hidden; } .quiz-score-fill { height: 100%; background: linear-gradient(90deg, var(--quiz-primary) 0%, var(--quiz-primary-light) 100%); border-radius: 999px; transition: width 1s ease; } /* CTA Actions - THE CONVERSION ZONE */ .quiz-results-actions { display: flex; flex-direction: column; gap: var(--quiz-space-md); } .quiz-cta-card { background: var(--quiz-white); border: 2px solid var(--quiz-gray-200); border-radius: var(--quiz-radius-lg); padding: var(--quiz-space-lg); transition: all var(--quiz-transition-base); display: flex; align-items: flex-start; gap: var(--quiz-space-md); text-decoration: none; color: inherit; } .quiz-cta-card:hover { border-color: var(--quiz-primary); background: var(--quiz-primary-bg); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); } .quiz-cta-icon { flex-shrink: 0; width: 48px; height: 48px; background: linear-gradient(135deg, var(--quiz-primary-bg) 0%, var(--quiz-white) 100%); border-radius: var(--quiz-radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .quiz-cta-content { flex: 1; } .quiz-cta-title { font-size: 1.0625rem; font-weight: 600; color: var(--quiz-black); margin: 0 0 var(--quiz-space-xs) 0; } .quiz-cta-description { font-size: 0.9375rem; color: var(--quiz-gray-600); margin: 0; line-height: 1.5; } .quiz-cta-badge { display: inline-block; padding: 0.25rem 0.625rem; background: var(--quiz-primary); color: var(--quiz-white); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px; margin-top: var(--quiz-space-xs); } .quiz-cta-arrow { flex-shrink: 0; font-size: 1.5rem; color: var(--quiz-gray-400); transition: all var(--quiz-transition-base); } .quiz-cta-card:hover .quiz-cta-arrow { color: var(--quiz-primary); transform: translateX(4px); } /* Primary CTA - MAIN CONVERSION */ .quiz-cta-card.primary { border-color: var(--quiz-primary); background: linear-gradient(135deg, var(--quiz-primary-bg) 0%, var(--quiz-white) 100%); } .quiz-cta-card.primary:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } /* ============================================ 7. UTILITY CLASSES ============================================ */ .quiz-hidden { display: none !important; } .quiz-text-center { text-align: center; } .quiz-mb-0 { margin-bottom: 0 !important; } .quiz-mb-sm { margin-bottom: var(--quiz-space-sm); } .quiz-mb-md { margin-bottom: var(--quiz-space-md); } .quiz-mb-lg { margin-bottom: var(--quiz-space-lg); } .quiz-mb-xl { margin-bottom: var(--quiz-space-xl); } /* ============================================ 8. RESPONSIVE DESIGN ============================================ */ @media (max-width: 768px) { .quiz-framework { padding: 0 var(--quiz-space-md); margin: var(--quiz-space-xl) auto; } .quiz-header { padding: var(--quiz-space-xl) var(--quiz-space-lg); } .quiz-title { font-size: 1.5rem; } .quiz-subtitle { font-size: 0.9375rem; } .quiz-meta { flex-direction: column; gap: var(--quiz-space-sm); } .quiz-progress-wrapper { padding: var(--quiz-space-md) var(--quiz-space-lg); } .quiz-questions { padding: var(--quiz-space-lg); } .quiz-question-text { font-size: 1.125rem; } .quiz-answer-option { padding: var(--quiz-space-md); } .quiz-answer-text { font-size: 0.9375rem; } .quiz-navigation { padding: var(--quiz-space-lg); flex-direction: column; } .quiz-btn { width: 100%; justify-content: center; } .quiz-results-header { padding: var(--quiz-space-xl) var(--quiz-space-lg); } .quiz-results-title { font-size: 1.5rem; } .quiz-results-content { padding: var(--quiz-space-xl) var(--quiz-space-lg); } .quiz-results-description { font-size: 1rem; } .quiz-category-indicators { flex-direction: column; } } @media (max-width: 480px) { .quiz-title { font-size: 1.25rem; } .quiz-question-text { font-size: 1rem; } .quiz-results-title { font-size: 1.25rem; } .quiz-cta-card { flex-direction: column; } .quiz-btn { padding: 0.75rem 1.25rem; font-size: 0.9375rem; } } /* ============================================ 9. ACCESSIBILITY ============================================ */ /* Focus styles */ .quiz-answer-option:focus, .quiz-btn:focus { outline: 3px solid var(--quiz-primary); outline-offset: 2px; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .quiz-container { border-width: 3px; } .quiz-answer-option { border-width: 3px; } } /* ============================================ 10. QUIZ VARIANT 2: INLINE SIMPLE ASSESSMENT Lightweight inline quiz for product fit assessment ============================================ */ .interactive-quiz { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 12px; padding: 2rem; margin: 2rem 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .interactive-quiz h3 { color: #2c3e50; margin-bottom: 0.5rem; font-size: 1.75rem; } .quiz-intro { color: #5a6c7d; margin-bottom: 2rem; font-size: 1.1rem; } .quiz-question { background: white; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); min-height: 280px; transition: opacity 0.3s ease; } .quiz-question-label { display: block; font-weight: 600; color: #2c3e50; margin-bottom: 1rem; font-size: 1.1rem; } .question-number { display: inline-block; background: #3498db; color: white; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; margin-right: 0.5rem; font-size: 0.9rem; } .quiz-options { display: flex; flex-direction: column; gap: 0.75rem; } .quiz-option { display: flex; align-items: center; padding: 1rem; border: 2px solid #e0e6ed; border-radius: 6px; cursor: pointer; transition: all 0.2s; } .quiz-option:hover { border-color: #3498db; background: #f8f9fa; } .quiz-option input[type="radio"] { margin-right: 0.75rem; width: 18px; height: 18px; cursor: pointer; } .quiz-option span { color: #2c3e50; font-size: 1rem; } .quiz-submit-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: 600; border-radius: 8px; cursor: pointer; width: 100%; transition: transform 0.2s; margin-top: 1rem; } .quiz-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .quiz-result { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .quiz-result-score { text-align: center; padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; margin-bottom: 2rem; color: white; } .score-label { display: block; font-size: 0.9rem; opacity: 0.9; margin-bottom: 0.5rem; } .score-value { font-size: 3rem; font-weight: bold; } .score-max { font-size: 1.5rem; opacity: 0.8; } .result-category-badge { text-align: center; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; } .badge-success { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; } .badge-warning { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; } .badge-danger { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: #333; } .result-emoji { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; } .quiz-result-content { line-height: 1.7; } .quiz-result-content ul { margin: 1rem 0; padding-left: 1.5rem; } .quiz-result-content li { margin-bottom: 0.5rem; } .quiz-cta-btn, .quiz-cta-btn-outline { display: inline-block; padding: 0.875rem 1.75rem; border-radius: 6px; font-weight: 600; text-decoration: none; transition: all 0.2s; margin-top: 1rem; } .quiz-cta-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .quiz-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .quiz-cta-btn-outline { border: 2px solid #667eea; color: #667eea; background: white; } .quiz-cta-btn-outline:hover { background: #667eea; color: white; } .quiz-retake-btn { background: #95a5a6; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; margin-top: 1.5rem; font-weight: 600; transition: background 0.2s; } .quiz-retake-btn:hover { background: #7f8c8d; } /* ============================================ END OF QUIZ FRAMEWORK ============================================ */