ahsaan-dev/AI-Interview-Simulator
0
1/* General Container Styling */2.gradio-container {3 font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;4}5 6#setup-card, #interview-card, #dashboard-card-container {7 background: rgba(30, 41, 59, 0.4) !important;8 border: 1px solid rgba(255, 255, 255, 0.08) !important;9 border-radius: 16px !important;10 padding: 24px !important;11 backdrop-filter: blur(12px) !important;12 box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;13 margin-bottom: 20px !important;14}15 16/* Custom Headers */17.gradient-header {18 background: linear-gradient(135deg, #a855f7, #6366f1);19 -webkit-background-clip: text;20 -webkit-text-fill-color: transparent;21 font-weight: 800 !important;22 font-size: 2.2rem !important;23 margin-bottom: 0.5rem !important;24 text-align: center;25}26 27.sub-header {28 color: #9ca3af !important;29 font-size: 1.1rem !important;30 text-align: center;31 margin-bottom: 2rem !important;32}33 34/* Analysis Cards */35.profile-card {36 background: rgba(15, 23, 42, 0.6);37 border: 1px solid rgba(255, 255, 255, 0.05);38 border-radius: 12px;39 padding: 20px;40 margin-top: 15px;41}42 43.profile-section-title {44 color: #818cf8;45 font-size: 15px;46 font-weight: 700;47 text-transform: uppercase;48 letter-spacing: 0.05em;49 margin-bottom: 10px;50 border-bottom: 1px solid rgba(129, 140, 248, 0.2);51 padding-bottom: 5px;52}53 54.profile-tag {55 display: inline-block;56 background: rgba(99, 102, 241, 0.15);57 color: #c7d2fe;58 padding: 4px 10px;59 border-radius: 6px;60 font-size: 13px;61 margin: 4px;62 border: 1px solid rgba(99, 102, 241, 0.3);63}64 65.profile-item {66 font-size: 14px;67 margin-bottom: 10px;68 color: #e2e8f0;69 line-height: 1.5;70}71 72/* Interview UI */73.question-box {74 background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1)) !important;75 border: 1px solid rgba(99, 102, 241, 0.2) !important;76 border-radius: 12px !important;77 padding: 24px !important;78 margin-bottom: 20px !important;79 text-align: center;80}81 82.question-text {83 font-size: 1.35rem !important;84 font-weight: 600 !important;85 color: #ffffff !important;86 line-height: 1.6 !important;87}88 89/* Dashboard Report Styling */90.dashboard {91 font-family: 'Inter', sans-serif;92 color: #f3f4f6;93 background: #0f172a;94 padding: 30px;95 border-radius: 16px;96 border: 1px solid rgba(255, 255, 255, 0.05);97}98 99.dashboard-header {100 display: flex;101 justify-content: space-between;102 align-items: center;103 border-bottom: 1px solid rgba(255, 255, 255, 0.1);104 padding-bottom: 20px;105 margin-bottom: 25px;106}107 108.dashboard-header h2 {109 font-size: 26px;110 margin: 0;111 background: linear-gradient(135deg, #a855f7, #6366f1);112 -webkit-background-clip: text;113 -webkit-text-fill-color: transparent;114 font-weight: 800;115}116 117.dashboard-header p {118 font-size: 14px;119 color: #9ca3af;120 margin: 5px 0 0 0;121}122 123.score-circle-container {124 width: 90px;125 height: 90px;126 position: relative;127}128 129.circular-chart {130 display: block;131 max-width: 100%;132 max-height: 100%;133}134 135.circle-bg {136 fill: none;137 stroke: rgba(255, 255, 255, 0.05);138 stroke-width: 3.8;139}140 141.circle {142 fill: none;143 stroke-width: 3.8;144 stroke-linecap: round;145}146 147.circle-green { stroke: #10b981; }148.circle-yellow { stroke: #f59e0b; }149.circle-red { stroke: #ef4444; }150 151.percentage {152 fill: #fff;153 font-family: sans-serif;154 font-size: 8px;155 font-weight: bold;156 text-anchor: middle;157}158 159.score-summary {160 display: flex;161 flex-direction: column;162}163 164.score-label {165 font-size: 11px;166 text-transform: uppercase;167 letter-spacing: 1px;168 color: #9ca3af;169}170 171.score-val {172 font-size: 32px;173 font-weight: 800;174 color: #fff;175}176 177.dashboard-grid {178 display: grid;179 grid-template-columns: 1fr 1.5fr;180 gap: 20px;181 margin-bottom: 25px;182}183 184@media (max-width: 768px) {185 .dashboard-grid {186 grid-template-columns: 1fr;187 }188 .dashboard-header {189 flex-direction: column;190 align-items: flex-start;191 gap: 20px;192 }193}194 195.dashboard-card {196 background: rgba(30, 41, 59, 0.7);197 border: 1px solid rgba(255, 255, 255, 0.08);198 border-radius: 12px;199 padding: 20px;200}201 202.card-title {203 font-size: 16px;204 font-weight: 700;205 margin-top: 0;206 margin-bottom: 15px;207 color: #e2e8f0;208 border-left: 4px solid #6366f1;209 padding-left: 10px;210}211 212.profile-info {213 display: flex;214 flex-direction: column;215 gap: 12px;216}217 218.info-item {219 display: flex;220 justify-content: space-between;221 font-size: 14px;222}223 224.info-label {225 color: #9ca3af;226}227 228.info-value {229 font-weight: 600;230 color: #e5e7eb;231}232 233.recommendations-list {234 margin: 0;235 padding-left: 20px;236 font-size: 14px;237 color: #d1d5db;238 line-height: 1.6;239}240 241.recommendations-list li {242 margin-bottom: 8px;243}244 245.q-title {246 font-size: 18px;247 font-weight: 700;248 margin: 25px 0 15px 0;249 color: #e2e8f0;250}251 252.qa-card {253 background: rgba(30, 41, 59, 0.4);254 border: 1px solid rgba(255, 255, 255, 0.05);255 border-radius: 12px;256 margin-bottom: 15px;257 overflow: hidden;258}259 260.qa-header {261 background: rgba(30, 41, 59, 0.8);262 padding: 15px 20px;263 display: flex;264 justify-content: space-between;265 align-items: center;266 border-bottom: 1px solid rgba(255, 255, 255, 0.05);267}268 269.qa-header-left {270 display: flex;271 align-items: center;272 gap: 12px;273}274 275.q-badge {276 background: #6366f1;277 color: #fff;278 font-size: 11px;279 font-weight: 700;280 padding: 3px 8px;281 border-radius: 6px;282 white-space: nowrap;283}284 285.q-heading {286 font-size: 15px;287 font-weight: 600;288 color: #f3f4f6;289}290 291.q-score {292 background: rgba(16, 185, 129, 0.1);293 color: #10b981;294 border: 1px solid rgba(16, 185, 129, 0.2);295 font-size: 13px;296 font-weight: 700;297 padding: 4px 10px;298 border-radius: 20px;299 white-space: nowrap;300}301 302.q-score.low {303 background: rgba(239, 68, 68, 0.1);304 color: #ef4444;305 border: 1px solid rgba(239, 68, 68, 0.2);306}307 308.q-score.medium {309 background: rgba(245, 158, 171, 0.1);310 color: #f59e0b;311 border: 1px solid rgba(245, 158, 171, 0.2);312}313 314.qa-body {315 padding: 20px;316}317 318.answer-box {319 background: rgba(255, 255, 255, 0.02);320 border-left: 3px solid #9ca3af;321 padding: 12px 15px;322 border-radius: 0 8px 8px 0;323 margin-bottom: 20px;324 font-size: 14px;325 color: #d1d5db;326}327 328.feedback-grid {329 display: grid;330 grid-template-columns: 1fr 1fr;331 gap: 15px;332 margin-bottom: 20px;333}334 335@media (max-width: 640px) {336 .feedback-grid {337 grid-template-columns: 1fr;338 }339}340 341.strength-card {342 background: rgba(16, 185, 129, 0.03);343 border: 1px solid rgba(16, 185, 129, 0.1);344 border-radius: 8px;345 padding: 12px 15px;346}347 348.strength-title {349 color: #10b981;350 font-size: 13px;351 font-weight: 700;352 text-transform: uppercase;353 margin-bottom: 8px;354}355 356.weakness-card {357 background: rgba(239, 68, 68, 0.03);358 border: 1px solid rgba(239, 68, 68, 0.1);359 border-radius: 8px;360 padding: 12px 15px;361}362 363.weakness-title {364 color: #ef4444;365 font-size: 13px;366 font-weight: 700;367 text-transform: uppercase;368 margin-bottom: 8px;369}370 371.model-answer-card {372 background: rgba(99, 102, 241, 0.05);373 border: 1px solid rgba(99, 102, 241, 0.1);374 border-radius: 8px;375 padding: 15px;376}377 378.model-answer-title {379 color: #818cf8;380 font-size: 13px;381 font-weight: 700;382 text-transform: uppercase;383 margin-bottom: 8px;384}385 386.box-text {387 font-size: 14px;388 line-height: 1.6;389 margin: 0;390 color: #e5e7eb;391}392