============== --iq-primary-soft: #eff6ff; /* Very light, calming Blue Tint */ --iq-text-main: #111827; /* Dark Slate for high readability */ --iq-text-muted: #4b5563; /* Body Text */ --iq-border: #d1d5db; /* Light grey border */ --iq-bg: #ffffff; --iq-shadow: 0 16px 40px rgba(26, 86, 219, 0.25); /* Shadow matching the new blue */ --iq-accent-icon: #3b82f6; /* Vibrant blue for icon/progress */ font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Overlay */ .iq-popup-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.7); /* Dark backdrop */ display: none; align-items: center; justify-content: center; z-index: 9999; padding: 16px; } .iq-popup-overlay.iq-visible { display: flex; animation: iqFadeInOverlay 0.24s ease-out; } /* Popup container */ .iq-popup { width: 100%; max-width: 600px; max-height: 90vh; background: var(--iq-bg); border-radius: 24px; box-shadow: var(--iq-shadow); padding: 24px 20px 20px; position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; color: var(--iq-text-main); transition: transform 0.3s ease-out; } @media (min-width: 640px) { .iq-popup { padding: 40px; } } /* Close button */ .iq-popup-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 999px; border: none; background: #f3f4f6; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--iq-text-muted); font-size: 18px; line-height: 1; transition: background 0.15s ease; } .iq-popup-close:hover { background: #e5e7eb; color: var(--iq-text-main); } .introvert-quiz-wrapper { font-size: 15px; } /* --- Cover Screen Specific Styles (data-step="0") --- */ .iq-cover-content { text-align: center; padding: 20px 0 10px; } .iq-graphic { width: 80px; height: 80px; margin: 0 auto 16px; } .iq-graphic svg { display: block; width: 100%; height: 100%; color: var(--iq-primary); /* Use primary color for main graphic */ } .iq-cover-content h2 { font-size: 2rem; font-weight: 800; margin-bottom: 12px; line-height: 1.1; color: var(--iq-primary); } .iq-cover-content p { font-size: 1.1rem; line-height: 1.6; color: var(--iq-text-muted); max-width: 450px; margin: 0 auto 30px; } /* Ensure h2 doesn't have default wrapper margin */ .introvert-quiz-wrapper h2 { margin: 0; } /* Progress bar */ .iq-progress { width: 100%; height: 6px; background: var(--iq-primary-soft); border-radius: 999px; overflow: hidden; margin: 18px 0 20px; display: none; /* Hidden by default, shown when quiz starts */ } .iq-progress.iq-visible { display: block; } .iq-progress-bar { height: 100%; width: 0%; background: var(--iq-primary); transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } /* Steps */ .iq-step { display: none; } .iq-step.active { display: block; animation: iqFadeIn 0.3s ease-out; } .iq-question { font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; color: var(--iq-text-main); } .iq-options { display: grid; gap: 10px; margin-bottom: 24px; } .iq-option-label { display: block; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--iq-border); cursor: pointer; font-size: 0.95rem; background: var(--iq-bg); transition: all 0.2s ease-out; position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .iq-option-label:hover { border-color: var(--iq-accent-icon); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } .iq-option-input { display: none; } .iq-option-input:checked + .iq-option-label { border-color: var(--iq-primary); background: var(--iq-primary-soft); color: var(--iq-primary); box-shadow: 0 0 0 2px var(--iq-primary-soft), 0 3px 6px rgba(0, 0, 0, 0.08); font-weight: 500; } /* Navigation & Messages */ .iq-message { height: 1.5em; color: #ef4444; /* Red for error */ font-size: 0.85rem; font-weight: 500; text-align: center; opacity: 0; transition: opacity 0.3s ease-in-out; margin-bottom: 8px; } .iq-nav { display: flex; justify-content: space-between; gap: 12px; } .iq-nav-center { justify-content: center; } .iq-btn { padding: 10px 20px; border-radius: 999px; border: none; font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; } .iq-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(26, 86, 219, 0.3); /* Match new shadow color */ } .iq-btn-primary { background: var(--iq-primary); color: var(--iq-primary-soft); } .iq-btn-secondary { background: #e5e7eb; color: var(--iq-text-main); } .iq-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Result styling */ .iq-result-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; color: var(--iq-primary); } .iq-result-tag { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; background: var(--iq-primary-soft); color: var(--iq-primary); } .iq-result-summary { font-size: 1.05rem; line-height: 1.6; color: var(--iq-text-main); margin-bottom: 24px; } /* Gemini Mantra specific styling */ #iqMantraContainer { margin-top: 24px; margin-bottom: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .iq-mantra-box { padding: 18px; border: 3px dashed var(--iq-accent-icon); border-radius: 16px; background: #f0f8ff; /* Lighter blue for mantra box */ font-size: 1.25rem; font-weight: 700; color: var(--iq-primary); line-height: 1.3; max-width: 90%; margin-top: 10px; animation: iqFadeIn 0.5s ease-out; } .iq-loading-spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-top: 3px solid var(--iq-primary-soft); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .iq-email-box { margin-top: 24px; padding: 18px; border: 1px solid var(--iq-primary-soft); border-radius: 16px; background: var(--iq-primary-soft); } .iq-email-box h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; color: var(--iq-primary); } .iq-email-box p { font-size: 0.9rem; margin-bottom: 12px; color: #2c499c; /* Darker shade of blue for contrast */ } .iq-email-input { width: 100%; padding: 10px 16px; border-radius: 12px; border: 1px solid #d1d5db; font-size: 0.95rem; margin: 8px 0; } .iq-email-btn { width: 100%; margin-top: 8px; padding: 12px 15px; border-radius: 12px; border: none; background: var(--iq-primary); color: var(--iq-primary-soft); font-size: 1rem; font-weight: 700; cursor: pointer; } .iq-note { font-size: 0.75rem; color: #3b82f6; /* Accent blue for note */ text-align: center; margin-top: 10px; } @keyframes iqFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes iqFadeInOverlay { from { opacity: 0; } to { opacity: 1; } } /* Mobile tweaks */ @media (max-width: 480px) { .iq-popup { padding: 20px 16px 16px; border-radius: 20px; } .iq-cover-content h2 { font-size: 1.6rem; } .iq-cover-content p { font-size: 1rem; } } Skip to Content

Home