pascalx/careerplus
0
1/* Add any custom premium CSS styles here */2body {3 /* Example: Add a subtle background pattern */4 /* background-image: url('/static/images/subtle-pattern.png'); */5} 6 7/* CareerPulse AI - Premium CSS Styles */8 9/* Base Elements */10body {11 color: #1a202c;12 line-height: 1.6;13 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;14 scroll-behavior: smooth;15 overflow-x: hidden;16}17 18h1, h2, h3, h4, h5, h6 {19 font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;20 line-height: 1.3;21}22 23a {24 text-decoration: none;25 transition: all 0.3s ease;26}27 28/* Gradient Backgrounds */29.gradient-bg {30 background: linear-gradient(135deg, #0ea5e9 0%, #6d28d9 100%);31}32 33.gradient-text {34 background: linear-gradient(135deg, #0ea5e9 0%, #6d28d9 100%);35 -webkit-background-clip: text;36 background-clip: text;37 color: transparent;38}39 40/* Premium Cards & Effects */41.premium-card {42 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);43 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);44 overflow: hidden;45}46 47.premium-card:hover {48 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);49 transform: translateY(-2px);50}51 52.hover-lift {53 transition: all 0.3s ease;54}55 56.hover-lift:hover {57 transform: translateY(-5px);58}59 60/* Form Elements */61input:focus, 62textarea:focus, 63select:focus {64 outline: none;65 box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);66 border-color: #0ea5e9 !important;67}68 69.custom-file-input-wrapper {70 position: relative;71 overflow: hidden;72}73 74.custom-file-label {75 position: absolute;76 top: 0;77 right: 0;78 left: 0;79 bottom: 0;80 z-index: 1;81 height: 100%;82 padding: 0.5rem 1rem;83 line-height: 1.5;84 color: #6b7280;85 background-color: #f9fafb;86 border: 1px solid #d1d5db;87 border-radius: 0.375rem;88 font-weight: 500;89 overflow: hidden;90 white-space: nowrap;91 text-overflow: ellipsis;92}93 94.custom-file-input:focus ~ .custom-file-label {95 border-color: #0ea5e9;96 box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);97}98 99/* Buttons and Interactive Elements */100.btn {101 position: relative;102 overflow: hidden;103 transition: all 0.3s ease;104}105 106.btn::after {107 content: '';108 position: absolute;109 top: 50%;110 left: 50%;111 width: 5px;112 height: 5px;113 background: rgba(255, 255, 255, 0.5);114 opacity: 0;115 border-radius: 100%;116 transform: scale(1, 1) translate(-50%, -50%);117 transform-origin: 50% 50%;118}119 120.btn:hover::after {121 animation: ripple 1s ease-out;122}123 124@keyframes ripple {125 0% {126 transform: scale(0, 0);127 opacity: 0.5;128 }129 100% {130 transform: scale(100, 100);131 opacity: 0;132 }133}134 135/* Loaders and Progress Indicators */136.loader {137 border-top-color: #0ea5e9;138 animation: loader-spin 1s linear infinite;139}140 141@keyframes loader-spin {142 0% { transform: rotate(0deg); }143 100% { transform: rotate(360deg); }144}145 146.progress-bar {147 height: 8px;148 background-color: #e2e8f0;149 border-radius: 0.25rem;150 overflow: hidden;151}152 153.progress-bar-fill {154 height: 100%;155 background: linear-gradient(90deg, #0ea5e9, #6d28d9);156 width: 0;157 transition: width 0.5s ease;158 border-radius: 0.25rem;159}160 161/* Analysis Results Display */162.tab-pane {163 opacity: 0;164 visibility: hidden;165 height: 0;166 overflow: hidden;167 transition: all 0.3s ease;168}169 170.tab-pane:not(.hidden) {171 opacity: 1;172 visibility: visible;173 height: auto;174 overflow: visible;175}176 177.result-tab {178 position: relative;179 transition: all 0.3s ease;180}181 182.result-tab::after {183 content: '';184 position: absolute;185 bottom: -2px;186 left: 0;187 width: 100%;188 height: 2px;189 background: transparent;190 transition: all 0.3s ease;191}192 193.result-tab.active::after {194 background: #0ea5e9;195}196 197/* Prose for Markdown Content */198.prose {199 max-width: 65ch;200 color: #374151;201}202 203.prose p {204 margin-top: 1.25em;205 margin-bottom: 1.25em;206}207 208.prose ul {209 margin-top: 1.25em;210 margin-bottom: 1.25em;211 padding-left: 1.625em;212}213 214.prose li {215 margin-top: 0.5em;216 margin-bottom: 0.5em;217}218 219.prose strong {220 font-weight: 600;221 color: #111827;222}223 224.prose a {225 color: #0ea5e9;226 text-decoration: underline;227 font-weight: 500;228}229 230/* Hero section enhancements */231.hero-section {232 position: relative;233 overflow: hidden;234}235 236.hero-section::before {237 content: '';238 position: absolute;239 top: -10%;240 right: -5%;241 width: 500px;242 height: 500px;243 border-radius: 50%;244 background: radial-gradient(rgba(255, 255, 255, 0.1), transparent);245 z-index: 0;246}247 248.hero-section::after {249 content: '';250 position: absolute;251 bottom: -10%;252 left: -5%;253 width: 300px;254 height: 300px;255 border-radius: 50%;256 background: radial-gradient(rgba(255, 255, 255, 0.1), transparent);257 z-index: 0;258}259 260/* Feature card hover effects */261.feature-card {262 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);263 z-index: 1;264 position: relative;265 overflow: hidden;266}267 268.feature-card::before {269 content: '';270 position: absolute;271 top: 0;272 left: 0;273 width: 100%;274 height: 100%;275 background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(109, 40, 217, 0.15) 100%);276 opacity: 0;277 z-index: -1;278 transition: opacity 0.3s ease;279 border-radius: inherit;280}281 282.feature-card:hover::before {283 opacity: 1;284}285 286.feature-card:hover {287 transform: translateY(-5px);288 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);289}290 291/* Responsive adjustments */292@media (max-width: 640px) {293 .premium-card {294 padding: 1.25rem !important;295 }296 297 .tab-navigation {298 overflow-x: auto;299 white-space: nowrap;300 -webkit-overflow-scrolling: touch;301 padding-bottom: 0.5rem;302 }303}304 305/* Print styles for PDF report */306@media print {307 body {308 background: white;309 font-size: 12pt;310 }311 312 .no-print {313 display: none !important;314 }315 316 .premium-card {317 box-shadow: none !important;318 border: 1px solid #e5e7eb;319 }320 321 .prose {322 max-width: none;323 }324}325 326/* --- General --- */327:root {328 --primary-color: #4A90E2; /* A modern blue */329 --secondary-color: #50E3C2; /* A vibrant teal/mint */330 --dark-color: #2c3e50; /* A deep slate blue */331 --light-color: #f8f9fa; /* A very light grey */332 --text-color: #34495e; /* A softer black */333 --border-radius: 8px;334 --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);335 --transition-speed: 0.3s;336}337 338body {339 font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;340 background-color: #fdfdff;341 color: var(--text-color);342 margin: 0;343 line-height: 1.6;344 display: flex;345 flex-direction: column;346 min-height: 100vh;347}348 349.container {350 width: 90%;351 max-width: 1200px;352 margin: 0 auto;353 padding: 20px;354}355 356/* --- Header --- */357.header {358 background: #fff;359 padding: 15px 0;360 border-bottom: 1px solid #e9ecef;361 box-shadow: 0 2px 4px rgba(0,0,0,0.04);362 text-align: center;363}364 365.header h1 {366 color: var(--primary-color);367 font-weight: 800;368 margin: 0;369 font-size: 2em;370 letter-spacing: -1px;371}372 373.header h1 span {374 color: var(--secondary-color);375}376 377/* --- Main Content --- */378.main-content {379 flex: 1;380 display: flex;381 flex-direction: column;382 justify-content: center;383 padding: 40px 0;384}385 386/* --- Form --- */387.form-section {388 background: #fff;389 padding: 40px;390 border-radius: var(--border-radius);391 box-shadow: var(--box-shadow);392 max-width: 700px;393 margin: 0 auto;394}395 396.form-group {397 margin-bottom: 25px;398}399 400.form-group label {401 display: block;402 font-weight: 600;403 margin-bottom: 8px;404 color: var(--dark-color);405}406 407.form-control,408.form-control-file {409 width: 100%;410 padding: 12px 15px;411 border: 1px solid #ced4da;412 border-radius: var(--border-radius);413 transition: border-color var(--transition-speed), box-shadow var(--transition-speed);414 box-sizing: border-box; /* Important for padding */415}416 417.form-control:focus {418 border-color: var(--primary-color);419 box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);420 outline: none;421}422 423textarea.form-control {424 min-height: 150px;425 resize: vertical;426}427 428/* --- Button --- */429.btn {430 display: inline-block;431 background-color: var(--primary-color);432 color: #fff;433 padding: 15px 30px;434 font-size: 1.1em;435 font-weight: 600;436 border: none;437 border-radius: var(--border-radius);438 cursor: pointer;439 transition: background-color var(--transition-speed), transform var(--transition-speed);440 text-align: center;441 width: 100%;442}443 444.btn:hover {445 background-color: #357ABD; /* Darker blue */446 transform: translateY(-2px);447}448 449.btn:disabled {450 background-color: #a0c3ed;451 cursor: not-allowed;452 transform: none;453}454 455/* --- Results --- */456.results-section {457 display: none; /* Hidden by default */458 background-color: #fff;459 margin-top: 40px;460 padding: 20px;461 border-radius: var(--border-radius);462 box-shadow: var(--box-shadow);463}464 465.results-grid {466 display: grid;467 grid-template-columns: 1fr 1fr;468 gap: 20px;469 height: 70vh; /* Make it tall */470}471 472.analysis-container,473.editor-container {474 display: flex;475 flex-direction: column;476 border: 1px solid #e9ecef;477 border-radius: var(--border-radius);478 overflow: hidden; /* Important for child elements */479}480 481.panel-header {482 background-color: var(--light-color);483 padding: 15px;484 border-bottom: 1px solid #e9ecef;485 font-weight: 600;486 color: var(--dark-color);487}488 489.analysis-output,490#resume-editor {491 padding: 20px;492 overflow-y: auto;493 height: 100%; /* Make it fill the container */494}495 496/* Editor specific styles */497#resume-editor {498 width: 100%;499 height: 100%;500 border: none;501 resize: none;502 font-family: 'Menlo', 'Consolas', monospace;503 font-size: 0.9em;504 line-height: 1.7;505 background-color: #fdfdfd;506 color: var(--text-color);507 box-sizing: border-box;508}509 510#resume-editor:focus {511 outline: none;512}513 514/* Analysis output specific styles */515.analysis-output h1,516.analysis-output h2,517.analysis-output h3 {518 margin-top: 20px;519 color: var(--primary-color);520}521.analysis-output h1:first-child,522.analysis-output h2:first-child,523.analysis-output h3:first-child {524 margin-top: 0;525}526.analysis-output ul {527 padding-left: 20px;528}529.analysis-output li {530 margin-bottom: 10px;531}532 533/* --- Loader --- */534.loader-container {535 text-align: center;536 padding: 50px;537 display: none; /* Hidden by default */538}539 540.loader {541 border: 5px solid #f3f3f3;542 border-top: 5px solid var(--primary-color);543 border-radius: 50%;544 width: 50px;545 height: 50px;546 animation: spin 1s linear infinite;547 margin: 0 auto 20px auto;548}549 550@keyframes spin {551 0% { transform: rotate(0deg); }552 100% { transform: rotate(360deg); }553}554 555/* --- Footer --- */556.footer {557 text-align: center;558 padding: 20px;559 margin-top: 40px;560 color: #777;561 font-size: 0.9em;562}563 564/* --- Utility & Responsive --- */565.hidden {566 display: none !important;567}568 569@media (max-width: 992px) {570 .results-grid {571 grid-template-columns: 1fr;572 height: auto;573 }574}575 576@media (max-width: 768px) {577 .container {578 width: 95%;579 }580 .form-section {581 padding: 20px;582 }583 .btn {584 padding: 12px 20px;585 }586}