Spaces:
Running
Running
| /** | |
| * @license | |
| * SPDX-License-Identifier: Apache-2.0 | |
| */ | |
| /* Reset and Global Styles */ | |
| :root { | |
| --font-primary: 'Lato', sans-serif; | |
| --font-headings: 'Playfair Display', serif; | |
| --color-background: #F4F7FC; /* Lighter, more modern background */ | |
| --color-surface: #FFFFFF; | |
| --color-primary-text: #121826; /* Darker for better contrast */ | |
| --color-secondary-text: #5A6475; | |
| --color-accent: #4A6CFF; /* A more modern, vibrant blue accent */ | |
| --color-accent-dark: #3550D5; | |
| --color-accent-light: #E9EDFF; /* Very light for backgrounds */ | |
| --color-accent-light-translucent: rgba(74, 108, 255, 0.1); | |
| --color-border: #E1E6EF; | |
| --color-input-bg: #FFFFFF; | |
| --color-error: #D93025; | |
| --color-error-bg: #FDF0EF; | |
| --color-success: #1E8E3E; | |
| --color-warning: #F9AB00; | |
| --border-radius-sm: 6px; | |
| --border-radius-md: 10px; | |
| --box-shadow-light: 0 2px 4px rgba(18, 24, 38, 0.05); | |
| --box-shadow-md: 0 4px 12px rgba(18, 24, 38, 0.08); | |
| --box-shadow-focus: 0 0 0 3px rgba(74, 108, 255, 0.25); | |
| --transition-speed: 0.25s ease-in-out; | |
| --transition-speed-fast: 0.15s ease-in-out; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| font-size: 16px; | |
| } | |
| body { | |
| font-family: var(--font-primary); | |
| background-color: var(--color-background); | |
| color: var(--color-primary-text); | |
| line-height: 1.6; | |
| } | |
| #root { | |
| width: 100%; | |
| } | |
| /* App Container & Main Layout */ | |
| .app-container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .app-header { | |
| color: white; | |
| padding: 1.5rem 2rem; | |
| text-align: left; | |
| background: linear-gradient(135deg, #1e3a5f, #2b5797); | |
| box-shadow: var(--box-shadow-md); | |
| z-index: 100; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .app-header h1 { | |
| font-family: var(--font-headings); | |
| font-size: 1.75rem; | |
| letter-spacing: 1px; | |
| } | |
| .app-header p { | |
| font-size: 0.9rem; | |
| opacity: 0.9; | |
| font-weight: 300; | |
| } | |
| /* New 3-Column Grid */ | |
| .app-content-grid { | |
| display: grid; | |
| grid-template-columns: minmax(350px, 1.2fr) 2fr minmax(320px, 1fr); | |
| gap: 1.5rem; | |
| padding: 1.5rem; | |
| flex-grow: 1; | |
| height: calc(100vh - 80px); /* Adjust based on header height */ | |
| overflow: hidden; | |
| } | |
| .control-column, .resume-column, .dashboard-column { | |
| overflow-y: auto; | |
| height: 100%; | |
| padding-right: 10px; /* For scrollbar */ | |
| } | |
| /* Custom Scrollbar */ | |
| .control-column::-webkit-scrollbar, | |
| .resume-column::-webkit-scrollbar, | |
| .dashboard-column::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .control-column::-webkit-scrollbar-track, | |
| .resume-column::-webkit-scrollbar-track, | |
| .dashboard-column::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .control-column::-webkit-scrollbar-thumb, | |
| .resume-column::-webkit-scrollbar-thumb, | |
| .dashboard-column::-webkit-scrollbar-thumb { | |
| background: #ccc; | |
| border-radius: 4px; | |
| } | |
| .control-column::-webkit-scrollbar-thumb:hover, | |
| .resume-column::-webkit-scrollbar-thumb:hover, | |
| .dashboard-column::-webkit-scrollbar-thumb:hover { | |
| background: #aaa; | |
| } | |
| /* Control Panel (Left Column) */ | |
| .control-panel { | |
| background-color: var(--color-surface); | |
| border-radius: var(--border-radius-md); | |
| box-shadow: var(--box-shadow-light); | |
| padding: 1rem; | |
| } | |
| .control-panel-tabs { | |
| display: flex; | |
| border-bottom: 1px solid var(--color-border); | |
| margin-bottom: 1.5rem; | |
| } | |
| .control-panel-tab { | |
| padding: 0.75rem 1rem; | |
| cursor: pointer; | |
| border: none; | |
| background: none; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--color-secondary-text); | |
| position: relative; | |
| transition: color var(--transition-speed-fast); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .control-panel-tab::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background-color: var(--color-accent); | |
| transform: scaleX(0); | |
| transition: transform var(--transition-speed); | |
| } | |
| .control-panel-tab.active { | |
| color: var(--color-accent); | |
| } | |
| .control-panel-tab.active::after { | |
| transform: scaleX(1); | |
| } | |
| .control-panel-tab:disabled { | |
| color: #ccc; | |
| cursor: not-allowed; | |
| } | |
| .tab-content { | |
| animation: fadeIn 0.3s ease; | |
| } | |
| /* Initial Input Form */ | |
| .initial-input-form h2 { | |
| font-family: var(--font-headings); | |
| font-size: 1.5rem; | |
| color: var(--color-primary-text); | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 0.5rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1.25rem; | |
| } | |
| .form-group label { | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: var(--color-secondary-text); | |
| font-size: 0.9rem; | |
| display: block; | |
| } | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--border-radius-sm); | |
| font-size: 0.95rem; | |
| transition: border-color var(--transition-speed), box-shadow var(--transition-speed); | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--color-accent); | |
| box-shadow: var(--box-shadow-focus); | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 70px; | |
| } | |
| .form-group input[type="file"] { | |
| padding: 0.5rem; | |
| font-size: 0.9rem; | |
| } | |
| .form-text.text-muted { | |
| font-size: 0.8rem; | |
| color: #6c757d; | |
| margin-top: 0.25rem; | |
| } | |
| /* AI Co-pilot Panel */ | |
| .ai-copilot-panel h3 { | |
| font-family: var(--font-headings); | |
| font-size: 1.25rem; | |
| margin-bottom: 1rem; | |
| } | |
| .copilot-placeholder { | |
| font-style: italic; | |
| color: var(--color-secondary-text); | |
| text-align: center; | |
| padding: 2rem 1rem; | |
| border: 2px dashed var(--color-border); | |
| border-radius: var(--border-radius-sm); | |
| } | |
| .copilot-actions { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| /* Resume Preview (Center Column) - Digital Paper */ | |
| .resume-preview-paper { | |
| background-color: var(--color-surface); | |
| box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07); | |
| padding: 2.5rem 3rem; /* Generous padding like a real doc */ | |
| border-radius: 3px; | |
| min-height: 100%; | |
| outline: none; /* remove focus ring from main container */ | |
| } | |
| /* Editable Section */ | |
| .editable-section { | |
| padding: 0.5rem 0; | |
| position: relative; | |
| margin-bottom: 1.5rem; | |
| } | |
| .editable-section:focus-within { | |
| background-color: var(--color-accent-light-translucent); | |
| border-radius: var(--border-radius-sm); | |
| } | |
| .editable-section.active { | |
| background-color: var(--color-accent-light-translucent); | |
| box-shadow: inset 3px 0 0 var(--color-accent); /* Left border highlight */ | |
| padding-left: 10px; | |
| margin-left: -10px; | |
| } | |
| .section-title { | |
| font-family: var(--font-headings); | |
| font-size: 1.5rem; | |
| color: var(--color-primary-text); | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 2px solid var(--color-primary-text); | |
| } | |
| .section-content { | |
| font-size: 1rem; | |
| color: var(--color-secondary-text); | |
| line-height: 1.7; | |
| white-space: pre-wrap; /* Preserve whitespace and newlines */ | |
| outline: none; /* No focus outline on the content itself */ | |
| min-height: 30px; /* ensure there's a clickable area */ | |
| } | |
| .section-content:focus { | |
| box-shadow: none; /* ensure no weird focus effects */ | |
| } | |
| .section-content[contenteditable="true"]::before { | |
| content: 'Type here or use the AI Co-pilot...'; | |
| color: #ccc; | |
| display: none; | |
| font-style: italic; | |
| } | |
| .section-content[contenteditable="true"]:empty::before { | |
| display: block; | |
| } | |
| /* Job Match Dashboard (Right Column) */ | |
| .dashboard { | |
| background-color: var(--color-surface); | |
| border-radius: var(--border-radius-md); | |
| box-shadow: var(--box-shadow-light); | |
| padding: 1.5rem; | |
| } | |
| .dashboard h2 { | |
| font-family: var(--font-headings); | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Score Gauge */ | |
| .score-gauge { | |
| position: relative; | |
| width: 150px; | |
| height: 75px; /* Half circle */ | |
| overflow: hidden; | |
| margin: 1rem auto; | |
| } | |
| .score-gauge-bg, .score-gauge-fill { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| border: 20px solid; | |
| } | |
| .score-gauge-bg { | |
| border-color: var(--color-border); | |
| } | |
| .score-gauge-fill { | |
| clip: rect(0, 150px, 75px, 0); | |
| border-color: var(--color-accent); | |
| transform: rotate(var(--gauge-rotation, 0deg)); | |
| transition: transform 0.5s ease-out; | |
| } | |
| .score-text { | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--color-primary-text); | |
| } | |
| .score-text span { | |
| font-size: 1.2rem; | |
| font-weight: 400; | |
| color: var(--color-secondary-text); | |
| } | |
| /* AI Suggestions List */ | |
| .suggestions-list { | |
| list-style: none; | |
| padding: 0; | |
| margin-top: 2rem; | |
| } | |
| .suggestions-list h3 { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--color-secondary-text); | |
| margin-bottom: 1rem; | |
| border-top: 1px solid var(--color-border); | |
| padding-top: 1.5rem; | |
| } | |
| .suggestion-item { | |
| background-color: var(--color-accent-light); | |
| padding: 1rem; | |
| border-radius: var(--border-radius-sm); | |
| margin-bottom: 0.75rem; | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.75rem; | |
| } | |
| .suggestion-item i { | |
| font-size: 1.2rem; | |
| color: var(--color-accent-dark); | |
| margin-top: 2px; | |
| } | |
| /* Buttons */ | |
| .submit-button, .clear-button, .copilot-button { | |
| width: 100%; | |
| padding: 0.8rem 1.5rem; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| border-radius: var(--border-radius-sm); | |
| cursor: pointer; | |
| transition: all var(--transition-speed-fast); | |
| text-align: center; | |
| border: 1px solid transparent; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .submit-button { | |
| background-color: var(--color-accent); | |
| color: white; | |
| border-color: var(--color-accent); | |
| } | |
| .submit-button:hover:not(:disabled) { | |
| background-color: var(--color-accent-dark); | |
| } | |
| .clear-button { | |
| background-color: #F8F9FA; | |
| color: var(--color-secondary-text); | |
| border-color: var(--color-border); | |
| } | |
| .clear-button:hover:not(:disabled) { | |
| background-color: #f1f3f5; | |
| border-color: var(--color-secondary-text); | |
| } | |
| .copilot-button { | |
| background-color: var(--color-accent-light); | |
| color: var(--color-accent-dark); | |
| justify-content: flex-start; | |
| font-weight: 600; | |
| } | |
| .copilot-button:hover:not(:disabled) { | |
| background-color: rgba(74, 108, 255, 0.2); | |
| color: var(--color-accent-dark); | |
| } | |
| button:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .submit-button.is-loading span { visibility: hidden; } | |
| .submit-button.is-loading::after { | |
| content: ""; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid rgba(255, 255, 255, 0.5); | |
| border-top-color: #fff; | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { 100% { transform: rotate(360deg); } } | |
| /* Global Loading & Error */ | |
| .global-loading-overlay { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: rgba(255,255,255,0.7); | |
| z-index: 1000; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .error-message { | |
| background-color: var(--color-error-bg); | |
| color: var(--color-error); | |
| border: 1px solid var(--color-error); | |
| padding: 1rem 1.5rem; | |
| border-radius: var(--border-radius-sm); | |
| margin: 1.5rem; | |
| box-shadow: var(--box-shadow-light); | |
| } | |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } | |
| .placeholder-text { | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| color: var(--color-secondary-text); | |
| border: 2px dashed var(--color-border); | |
| border-radius: var(--border-radius-md); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100%; | |
| min-height: 250px; | |
| } | |
| .placeholder-text::before { | |
| content: '📄'; | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| } | |