Spaces:
Runtime error
Runtime error
| @import url('design-tokens.css'); | |
| /* ===== RESET & BASE ===== */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-family); | |
| background: linear-gradient(to bottom, | |
| rgb(255, 255, 255) 0%, | |
| rgb(255, 255, 255) 5%, | |
| rgb(226, 218, 250) 30%, | |
| rgb(219, 239, 253) 80%, | |
| rgb(255, 255, 255) 95%, | |
| rgb(255, 255, 255) 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: var(--space-sm); | |
| } | |
| /* ===== LAYOUT ===== */ | |
| /* Assessment container - keep original width for assessment/results */ | |
| .assessment-container { | |
| background: var(--bg-white); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-lg); | |
| box-shadow: var(--shadow-xl); | |
| max-width: 700px; | |
| width: 100%; | |
| animation: slideIn var(--transition-slow) ease; | |
| max-height: 95vh; | |
| overflow-y: auto; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ===== TYPOGRAPHY ===== */ | |
| h1 { | |
| color: var(--text-primary); | |
| font-size: var(--font-size-4xl); | |
| margin-bottom: var(--space-xs); | |
| text-align: center; | |
| font-weight: var(--font-weight-bold); | |
| } | |
| h2 { | |
| font-size: var(--font-size-2xl); /* or var(--font-size-2xl) for even smaller */ | |
| text-align: center; | |
| margin-bottom: var(--space-xs); | |
| } | |
| h3 { | |
| text-align: center; | |
| color: var(--text-primary); | |
| } | |
| /* ===== ICON STYLING ===== */ | |
| .fa-heart { | |
| color: var(--error); /* Red color for heart icons */ | |
| } | |
| p { | |
| color: var(--text-secondary); | |
| text-align: center; | |
| margin-bottom: var(--space-2xl); | |
| font-size: var(--font-size-base); | |
| } | |
| .subtitle { | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-base); | |
| text-align: center; | |
| margin-bottom: var(--space-xl); | |
| line-height: 1.6; | |
| max-width: 540px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* ===== FORM ELEMENTS ===== */ | |
| input[type="text"], input[type="password"], input[type="email"] { | |
| width: 100%; | |
| padding: var(--space-sm) var(--space-lg); | |
| font-size: var(--font-size-base); | |
| border: none; | |
| background: var(--bg-gray); | |
| border-radius: var(--radius-md); | |
| transition: all var(--transition-fast); | |
| outline: none; | |
| } | |
| input:focus { | |
| background: #EBEBEB; | |
| box-shadow: 0 0 0 2px #E5E5E5; | |
| } | |
| /* ===== BUTTONS ===== */ | |
| button, .btn, .nav-btn, .submit-btn { | |
| padding: var(--space-sm) var(--space-2xl); | |
| font-size: var(--font-size-base); | |
| background: var(--primary-dark); | |
| color: var(--text-inverse); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-weight: var(--font-weight-medium); | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| button:hover, .btn:hover, .nav-btn:hover, .submit-btn:hover { | |
| background: var(--primary-black); | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| button:active, .btn:active { | |
| transform: translateY(0); | |
| } | |
| button:disabled { | |
| background: #E5E5E5; | |
| color: #999; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .nav-btn:disabled { | |
| opacity: 0.3; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| /* Secondary Buttons */ | |
| .logout-btn, .reset-btn, .share-btn { | |
| background: var(--primary-light); | |
| padding: var(--space-xs) var(--space-md); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-regular); | |
| margin-top: var(--space-sm); | |
| } | |
| .logout-btn:hover, .reset-btn:hover, .share-btn:hover { | |
| background: #4B5563; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| /* Submit Button */ | |
| .submit-btn { | |
| width: 100%; | |
| padding: var(--space-md); | |
| font-size: var(--font-size-base); | |
| margin-top: var(--space-sm); | |
| } | |
| /* Auth Form */ | |
| /* Auth-specific container - narrower for login/signup/forgot-password */ | |
| .auth-container { | |
| background: var(--bg-white); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-lg); | |
| box-shadow: var(--shadow-xl); | |
| max-width: 400px; /* Narrower for auth forms */ | |
| width: 100%; | |
| animation: slideIn var(--transition-slow) ease; | |
| max-height: 95vh; | |
| overflow-y: auto; | |
| text-align: center; | |
| } | |
| .auth-form input { | |
| width: 100%; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .auth-form button { | |
| width: 100%; | |
| } | |
| /* Google Sign-In Button */ | |
| .google-signin-btn { | |
| width: 100%; | |
| padding: var(--space-sm) var(--space-lg); | |
| background: white; | |
| color: #444; | |
| border: 1px solid #ddd; | |
| border-radius: var(--radius-md); | |
| font-size: var(--font-size-base); | |
| font-weight: 500; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| transition: all var(--transition-fast); | |
| margin-bottom: var(--space-md); | |
| } | |
| .google-signin-btn:hover { | |
| background: #f8f8f8; | |
| border-color: #ccc; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .google-signin-btn svg { | |
| flex-shrink: 0; | |
| } | |
| /* Divider for "or" between Google and email/password */ | |
| .divider { | |
| display: flex; | |
| align-items: center; | |
| text-align: center; | |
| margin: var(--space-md) 0; | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-sm); | |
| } | |
| .divider::before, | |
| .divider::after { | |
| content: ''; | |
| flex: 1; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .divider span { | |
| padding: 0 var(--space-sm); | |
| } | |
| #result { | |
| margin-bottom: var(--space-md); /* 16px bottom margin only */ | |
| margin-top: 0; | |
| padding: 0; | |
| } | |
| .switch-link { | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| cursor: pointer; | |
| font-weight: var(--font-weight-regular); | |
| /* margin-top: 2px; */ | |
| display: block; | |
| text-align: center; | |
| transition: color var(--transition-fast); | |
| font-size: var(--font-size-sm); | |
| } | |
| .switch-link:hover { | |
| color: var(--primary-black); | |
| text-decoration: underline; | |
| } | |
| /* ===== QUESTION BLOCKS ===== */ | |
| .question-block { | |
| background: var(--bg-surface-alt); | |
| padding: var(--space-xl); | |
| border-radius: var(--radius-lg); | |
| margin-bottom: var(--space-lg); | |
| border: none; | |
| display: none; | |
| min-height: 400px; | |
| } | |
| .question-block.active { | |
| display: block; | |
| animation: fadeIn var(--transition-base) ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateX(20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .question-block h4 { | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-xl); | |
| font-weight: var(--font-weight-bold); | |
| font-size: var(--font-size-xl); | |
| line-height: 1.6; | |
| } | |
| .question-number { | |
| display: inline-block; | |
| background: var(--primary-dark); | |
| color: var(--text-inverse); | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-full); | |
| text-align: center; | |
| line-height: 32px; | |
| margin-right: var(--space-sm); | |
| font-size: var(--font-size-sm); | |
| } | |
| /* ===== OPTIONS ===== */ | |
| .option { | |
| display: flex; | |
| align-items: center; | |
| padding: var(--space-lg) var(--space-xl); | |
| margin-bottom: var(--space-sm); | |
| background: var(--bg-white); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-size: var(--font-size-base); | |
| color: var(--text-primary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .option:hover { | |
| background: var(--bg-gray); | |
| transform: translateX(5px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .option input[type="radio"] { | |
| margin-right: var(--space-sm); | |
| cursor: pointer; | |
| width: 16px; | |
| height: 16px; | |
| } | |
| .option input[type="radio"]:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.5; | |
| } | |
| .option:has(input[type="radio"]:disabled) { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .option:has(input[type="radio"]:disabled):hover { | |
| background: var(--bg-white); | |
| transform: none; | |
| } | |
| /* ===== PROGRESS & NAVIGATION ===== */ | |
| .question-counter { | |
| text-align: center; | |
| color: #999; | |
| font-size: var(--font-size-sm); | |
| margin-bottom: var(--space-sm); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| .progress-bar { | |
| background: var(--bg-gray); | |
| height: 6px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-bottom: var(--space-lg); | |
| } | |
| .progress-fill { | |
| background: var(--primary-dark); | |
| height: 100%; | |
| transition: width var(--transition-base); | |
| } | |
| .nav-buttons { | |
| display: flex; | |
| gap: var(--space-sm); | |
| justify-content: flex-start; | |
| margin-top: var(--space-lg); | |
| } | |
| .nav-btn.prev { | |
| background: transparent; | |
| color: #999; | |
| border: none; | |
| padding: 0; | |
| font-weight: var(--font-weight-medium); | |
| font-size: var(--font-size-sm); | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| transition: all var(--transition-base) ease; | |
| box-shadow: none; | |
| } | |
| .nav-btn.prev:hover { | |
| background: transparent; | |
| color: #666; | |
| transform: translateX(-3px); | |
| box-shadow: none; | |
| } | |
| .buttons-row { | |
| display: flex; | |
| gap: var(--space-sm); | |
| justify-content: center; | |
| margin-top: var(--space-lg); | |
| } | |
| /* ===== RESULTS ===== */ | |
| .results-explanation { | |
| max-width: 400px; /* Adjust this value as needed */ | |
| margin: 0 auto var(--space-sm); | |
| text-align: center; | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-sm); | |
| line-height: 1.5; | |
| } | |
| .result-card { | |
| padding: var(--space-xl); | |
| border-radius: var(--radius-lg); | |
| margin-bottom: var(--space-3xl); | |
| border: none; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .result-card.rank-1 { | |
| background: var(--rank-1); | |
| } | |
| .result-card.rank-2 { | |
| background: var(--rank-2); | |
| } | |
| .result-card.rank-3 { | |
| background: var(--rank-3); | |
| } | |
| .result-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .result-rank { | |
| color: var(--text-inverse); | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: var(--font-size-xl); | |
| font-weight: var(--font-weight-extrabold); | |
| background: var(--primary-dark); | |
| } | |
| .result-title { | |
| flex: 1; | |
| margin-left: var(--space-sm); | |
| } | |
| .result-title h3 { | |
| font-size: var(--font-size-3xl); | |
| margin-bottom: 5px; | |
| color: var(--text-primary); | |
| } | |
| .result-details h5 i { | |
| font-size: var(--font-size-sm); | |
| margin-right: var(--space-xs); | |
| } | |
| .result-percentage { | |
| font-size: var(--font-size-xl); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-secondary); | |
| } | |
| .result-description { | |
| color: #666; | |
| line-height: 1.6; | |
| margin-bottom: var(--space-sm); | |
| font-size: var(--font-size-base); | |
| } | |
| .result-details { | |
| background: rgba(255, 255, 255, 0.6); | |
| border: none; | |
| padding: var(--space-sm); | |
| border-radius: var(--radius-sm); | |
| margin-top: var(--space-sm); | |
| } | |
| .result-details h5 { | |
| color: var(--text-primary); | |
| font-size: var(--font-size-base); | |
| margin-bottom: var(--space-xs); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| .result-details p { | |
| color: #666; | |
| font-size: var(--font-size-sm); | |
| margin-bottom: var(--space-sm); | |
| text-align: left; | |
| } | |
| /* ===== MESSAGES & ICONS ===== */ | |
| .icon { | |
| font-size: var(--font-size-3xl); | |
| margin-right: var(--space-xs); | |
| } | |
| .success-msg { | |
| color: var(--text-primary); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| .error-msg { | |
| color: #666; | |
| font-weight: var(--font-weight-medium); | |
| text-align: center; | |
| padding: var(--space-sm); | |
| } | |
| /* ===== CHAT INTERFACE ===== */ | |
| .chat-toggle-btn { | |
| background: rgba(255, 255, 255, 0.8); | |
| color: var(--text-primary); | |
| border: none; | |
| padding: var(--space-sm) var(--space-lg); | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| margin-top: var(--space-sm); | |
| width: 100%; | |
| transition: background var(--transition-fast), color var(--transition-fast); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .chat-toggle-btn:hover { | |
| background: var(--primary-dark); | |
| color: var(--text-inverse); | |
| } | |
| .chat-window { | |
| display: none; | |
| background: rgba(255, 255, 255, 0.9); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| margin-top: var(--space-sm); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .chat-window.open { | |
| display: block; | |
| animation: slideDown var(--transition-base) ease; | |
| } | |
| @keyframes slideDown { | |
| from { opacity: 0; max-height: 0; } | |
| to { opacity: 1; max-height: 500px; } | |
| } | |
| .chat-messages { | |
| height: 250px; | |
| overflow-y: auto; | |
| padding: var(--space-sm); | |
| background: var(--bg-white); | |
| } | |
| .chat-message { | |
| margin-bottom: var(--space-sm); | |
| padding: var(--space-sm) var(--space-sm); | |
| border-radius: var(--radius-sm); | |
| max-width: 85%; | |
| line-height: 1.5; | |
| font-size: var(--font-size-base); | |
| } | |
| .chat-message.user { | |
| background: var(--primary-dark); | |
| color: var(--text-inverse); | |
| margin-left: auto; | |
| text-align: right; | |
| } | |
| .chat-message.bot { | |
| background: var(--bg-white); | |
| color: var(--text-primary); | |
| border: none; | |
| text-align: left; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .chat-message.bot ul { | |
| margin: var(--space-sm) 0 0 0; | |
| padding-left: var(--space-lg); | |
| } | |
| .chat-message.bot li { | |
| margin-bottom: 6px; | |
| line-height: 1.6; | |
| } | |
| .chat-input-area { | |
| display: flex; | |
| align-items: center; | |
| gap: 0; /* Remove gap since voice button is absolutely positioned */ | |
| padding: var(--space-sm); | |
| background: transparent; | |
| border-top: none; | |
| position: relative; | |
| } | |
| .chat-input { | |
| flex: 1; | |
| padding: var(--space-sm); /* Reduced right padding for better spacing */ | |
| border: none; | |
| background: var(--bg-white); | |
| border-radius: 999px; | |
| font-size: var(--font-size-sm); | |
| outline: none; | |
| color: var(--text-primary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .chat-input:focus { | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* Removed the plus icon ::before pseudo-element */ | |
| .chat-send-btn { | |
| padding: 0; | |
| width: 36px; | |
| height: 36px; | |
| min-width: 36px; | |
| margin-left: var(--space-xs); /* Add margin instead of gap */ | |
| background: var(--primary-dark); | |
| color: var(--text-inverse); | |
| border: none; | |
| border-radius: var(--radius-full); | |
| cursor: pointer; | |
| font-weight: var(--font-weight-medium); | |
| font-size: var(--font-size-sm); | |
| transition: background var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .chat-send-btn::after { | |
| content: '↑'; | |
| font-size: var(--font-size-base); | |
| line-height: 1; | |
| font-weight: var(--font-weight-bold); /* Make arrow thicker */ | |
| -webkit-text-stroke: 0.5px; /* Additional thickness */ | |
| } | |
| .chat-send-btn:hover { | |
| background: var(--primary-black); | |
| color: var(--text-inverse); | |
| } | |
| .chat-send-btn:disabled { | |
| background: var(--bg-gray); | |
| color: #999; | |
| } | |
| .voice-btn { | |
| padding: 0; | |
| width: auto; | |
| height: auto; | |
| background: transparent; /* Transparent to sit inside input visually */ | |
| color: var(--text-primary); /* Match input text color */ | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| font-size: var(--font-size-lg); | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: absolute; | |
| right: calc(16px + var(--space-xs) + var(--space-sm)); /* Position to left of send button */ | |
| } | |
| .voice-btn:hover { | |
| background: transparent; | |
| color: var(--text-primary); | |
| opacity: 0.7; | |
| } | |
| .voice-btn.recording { | |
| color: var(--error); | |
| animation: pulse 1s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .chat-typing { | |
| color: #999; | |
| font-style: italic; | |
| font-size: var(--font-size-sm); | |
| padding: var(--space-sm) var(--space-sm); | |
| } | |
| /* ===== NAVIGATION & UTILITIES ===== */ | |
| .nav-header { | |
| padding: 0 0 var(--space-lg) 0; | |
| margin-bottom: var(--space-lg); | |
| border-bottom: 1px solid var(--border-divider); | |
| } | |
| .back-link { | |
| color: #667eea; | |
| text-decoration: none; | |
| font-weight: var(--font-weight-medium); | |
| font-size: var(--font-size-sm); | |
| transition: all var(--transition-base) ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .back-link:hover { | |
| color: #5a6fd8; | |
| transform: translateX(-3px); | |
| } | |
| .results-spacing { | |
| margin-top: var(--space-3xl); | |
| } | |
| /* ===== MOBILE RESPONSIVE ===== */ | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: var(--space-sm); | |
| border-radius: var(--radius-lg); | |
| margin: 5px; | |
| } | |
| h1 { | |
| font-size: var(--font-size-3xl); | |
| } | |
| p { | |
| font-size: var(--font-size-lg); | |
| } | |
| .subtitle { | |
| font-size: var(--font-size-base); | |
| } | |
| input[type="text"], input[type="password"], input[type="email"] { | |
| padding: var(--space-md) var(--space-lg); | |
| font-size: var(--font-size-lg); | |
| } | |
| button, .btn, .nav-btn, .submit-btn { | |
| padding: var(--space-md) var(--space-2xl); | |
| font-size: var(--font-size-lg); | |
| } | |
| .question-block { | |
| padding: var(--space-lg); | |
| min-height: 350px; | |
| } | |
| .question-block h4 { | |
| font-size: var(--font-size-2xl); | |
| } | |
| .option { | |
| padding: var(--space-lg) var(--space-xl); | |
| margin-bottom: var(--space-md); | |
| font-size: var(--font-size-lg); | |
| } | |
| .option input[type="radio"] { | |
| width: 22px; | |
| height: 22px; | |
| margin-right: var(--space-md); | |
| } | |
| } | |
| /* Custom tooltip styles */ | |
| .custom-tooltip { | |
| position: absolute; | |
| background: var(--primary-dark); | |
| color: var(--text-inverse); | |
| padding: var(--space-xs) var(--space-sm); | |
| border-radius: var(--radius-sm); | |
| font-family: var(--font-family); | |
| font-size: 13px; | |
| font-weight: var(--font-weight-regular); | |
| white-space: nowrap; | |
| z-index: 10000; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity var(--transition-fast) ease-in-out; | |
| top: -50px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } |