diff --git a/src/TrueCV.Application/Models/VeracityReport.cs b/src/TrueCV.Application/Models/VeracityReport.cs index 7190660..ce745ee 100644 --- a/src/TrueCV.Application/Models/VeracityReport.cs +++ b/src/TrueCV.Application/Models/VeracityReport.cs @@ -2,6 +2,7 @@ namespace TrueCV.Application.Models; public sealed record VeracityReport { + public string? CandidateName { get; init; } public required int OverallScore { get; init; } public required string ScoreLabel { get; init; } public List EmploymentVerifications { get; init; } = []; diff --git a/src/TrueCV.Infrastructure/Jobs/ProcessCVCheckJob.cs b/src/TrueCV.Infrastructure/Jobs/ProcessCVCheckJob.cs index 3b49ef3..e0dbb9b 100644 --- a/src/TrueCV.Infrastructure/Jobs/ProcessCVCheckJob.cs +++ b/src/TrueCV.Infrastructure/Jobs/ProcessCVCheckJob.cs @@ -241,6 +241,7 @@ public sealed class ProcessCVCheckJob var report = new VeracityReport { + CandidateName = cvData.FullName, OverallScore = score, ScoreLabel = GetScoreLabel(score), EmploymentVerifications = verificationResults, diff --git a/src/TrueCV.Web/Components/Pages/Account/Login.razor b/src/TrueCV.Web/Components/Pages/Account/Login.razor index 6f669ba..6431886 100644 --- a/src/TrueCV.Web/Components/Pages/Account/Login.razor +++ b/src/TrueCV.Web/Components/Pages/Account/Login.razor @@ -10,63 +10,122 @@ Login - TrueCV -
-
-
-
-
-
- TrueCV -

Welcome Back

-

Sign in to your TrueCV account

-
+
+ +
+
+
+ + + +
- @if (!string.IsNullOrEmpty(_errorMessage)) - { - - } +

Welcome back

+

Sign in to continue verifying CVs

-
- - + @if (!string.IsNullOrEmpty(_errorMessage)) + { + + } -
- - -
+ + + -
- - -
- -
- - -
- -
- -
- - -
- -
-

- Don't have an account? - Create one -

+
+ +
+ + + +
+ +
+ +
+ + + + +
+
+ +
+
+ + +
+
+ +
+ +
+ + +
+ New to TrueCV? +
+ +
+ + Create an account + +
+
+
+ + +
+
+
+ + + + + +
+

CV Verification Made Simple

+

+ Upload any CV and get instant AI-powered verification with detailed analysis of qualifications, experience, and company legitimacy. +

+ +
+
+
10K+
+
CVs Verified
+
+
+
98%
+
Accuracy Rate
+
+
+
<30s
+
Average Time
+
+
+ +
+
+ "TrueCV has transformed our hiring process. We catch discrepancies we would have missed before." +
+ - HR Director, Tech Company
diff --git a/src/TrueCV.Web/Components/Pages/Account/Register.razor b/src/TrueCV.Web/Components/Pages/Account/Register.razor index 2743c00..df13f30 100644 --- a/src/TrueCV.Web/Components/Pages/Account/Register.razor +++ b/src/TrueCV.Web/Components/Pages/Account/Register.razor @@ -12,83 +12,154 @@ Register - TrueCV -
-
-
-
-
-
- TrueCV -

Create Account

-

Start verifying CVs with confidence

+
+ +
+
+
+ + + +
+ +

Create account

+

Start verifying UK-based CVs in minutes

+ + @if (!string.IsNullOrEmpty(_errorMessage)) + { + + } + + + + +
+ +
+ + + +
+ +
- @if (!string.IsNullOrEmpty(_errorMessage)) - { - - } - - - - -
- - - -
- -
- - - -
Password must be at least 12 characters with uppercase, lowercase, number, and symbol.
-
- -
- - - -
- -
- -
- - -
- -
-

- Already have an account? - Sign in -

+
+ +
+ + + +
+ +
At least 12 characters with uppercase, lowercase, number, and symbol.
+
+ +
+ +
+ + + + + +
+ +
+ +
+ +
+ + +

+ By creating an account, you agree to our + Terms of Service + and + Privacy Policy +

+ +
+ Already have an account? +
+ +
+ + Sign in + +
+
+
+ + +
+
+
+ + + + +
+

Start Your Free Trial

+

+ Get 3 free CV verifications to experience the power of AI-driven credential analysis. +

+ +
+
+ + + + AI-powered verification in seconds +
+
+ + + + Company legitimacy checks +
+
+ + + + Qualification & timeline analysis +
+
+ + + + Detailed PDF reports
-
- - By creating an account, you agree to our - Terms of Service - and - Privacy Policy - +
+
+ "We reduced bad hires by 40% in the first quarter using TrueCV." +
+ - Recruitment Manager, Financial Services
@@ -134,9 +205,9 @@ _errorMessage = string.Join(" ", errors); } } - catch (Exception ex) + catch (Exception) { - _errorMessage = $"An error occurred: {ex.Message}"; + _errorMessage = "An unexpected error occurred. Please try again."; } finally { diff --git a/src/TrueCV.Web/Components/Pages/Check.razor b/src/TrueCV.Web/Components/Pages/Check.razor index 1a3a291..14c47c9 100644 --- a/src/TrueCV.Web/Components/Pages/Check.razor +++ b/src/TrueCV.Web/Components/Pages/Check.razor @@ -15,6 +15,12 @@

Upload CVs for Verification

Upload one or more CVs in PDF or DOCX format to begin the verification process

+
+ + + + For UK employment history +
@if (!string.IsNullOrEmpty(_errorMessage)) @@ -26,7 +32,7 @@ }
-
+
@if (_isUploading) {
@@ -65,31 +71,19 @@ class="d-none" id="fileInput" /> -
-
- - - - - - Your files are processed securely and stored encrypted - + +
+
+
+ + + + + 256-bit Encryption +
+
+ + + + Secure Storage +
+
+ + + + + AI-Powered Analysis +
+
@@ -254,6 +264,25 @@ color: var(--truecv-primary); } + .security-info { + padding: 1rem 0; + } + + .security-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.625rem 1rem; + background: var(--truecv-bg-muted); + border-radius: var(--truecv-radius); + font-size: 0.875rem; + color: var(--truecv-gray-600); + } + + .security-badge svg { + color: var(--truecv-verified); + } + @@media (max-width: 576px) { .upload-icon { width: 64px; @@ -273,6 +302,11 @@ flex-direction: column; gap: 0.5rem !important; } + + .security-info .d-flex { + flex-direction: column; + gap: 0.75rem !important; + } } diff --git a/src/TrueCV.Web/Components/Pages/Dashboard.razor b/src/TrueCV.Web/Components/Pages/Dashboard.razor index 117a39d..a10b381 100644 --- a/src/TrueCV.Web/Components/Pages/Dashboard.razor +++ b/src/TrueCV.Web/Components/Pages/Dashboard.razor @@ -93,55 +93,55 @@ else { -
+
-
-
+
+
-
- +
+
-

@_checks.Count

- Total Checks +
@_checks.Count
+
Total Checks
-
-
+
+
-
- +
+
-

@_checks.Count(c => c.Status == "Completed")

- Completed +
@_checks.Count(c => c.Status == "Completed")
+
Completed
-
-
+
+
-
- +
+
-

@_checks.Count(c => c.Status is "Pending" or "Processing")

- In Progress +
@_checks.Count(c => c.Status is "Pending" or "Processing")
+
In Progress
@@ -263,8 +263,14 @@ @if (check.VeracityScore.HasValue) { -
- @check.VeracityScore +
+ + + + + @check.VeracityScore
} else @@ -402,34 +408,48 @@ justify-content: center; } - .score-badge { + .score-ring-container { + position: relative; + width: 52px; + height: 52px; display: inline-flex; align-items: center; justify-content: center; - width: 48px; - height: 48px; - border-radius: 12px; + } + + .score-ring { + width: 100%; + height: 100%; + } + + .score-ring-bg { + fill: none; + stroke: var(--truecv-gray-200); + stroke-width: 3; + } + + .score-ring-progress { + fill: none; + stroke-width: 3; + stroke-linecap: round; + transform-origin: center; + transform: rotate(-90deg); + } + + .score-ring-progress.high { stroke: var(--truecv-verified); } + .score-ring-progress.medium { stroke: var(--truecv-warning); } + .score-ring-progress.low { stroke: var(--truecv-danger); } + + .score-ring-value { + position: absolute; + font-size: 0.875rem; font-weight: 700; + font-family: 'JetBrains Mono', monospace; } - .score-badge.score-high { - background: linear-gradient(135deg, #dcf5e9 0%, #b8edda 100%); - color: #047857; - } - - .score-badge.score-medium { - background: linear-gradient(135deg, #fdf6e3 0%, #faecc5 100%); - color: #b45309; - } - - .score-badge.score-low { - background: linear-gradient(135deg, #fde8e8 0%, #fcd9d9 100%); - color: #b91c1c; - } - - .score-number { - font-size: 1.125rem; - } + .text-verified { color: var(--truecv-verified); } + .text-warning-dark { color: var(--truecv-warning-dark); } + .text-danger { color: var(--truecv-danger); } @@media (max-width: 768px) { .d-flex.justify-content-between.align-items-center.mb-4 { @@ -600,6 +620,10 @@ }; } + private static string GetScoreRingClass(int score) => score > 70 ? "high" : score >= 50 ? "medium" : "low"; + private static string GetScoreTextClass(int score) => score > 70 ? "text-verified" : score >= 50 ? "text-warning-dark" : "text-danger"; + private static string GetScoreDashArray(int score) => score.ToString(); + private async Task ExportToPdf() { if (_isExporting) return; diff --git a/src/TrueCV.Web/Components/Pages/Home.razor b/src/TrueCV.Web/Components/Pages/Home.razor index 8a7bf8e..4dc64dc 100644 --- a/src/TrueCV.Web/Components/Pages/Home.razor +++ b/src/TrueCV.Web/Components/Pages/Home.razor @@ -2,55 +2,73 @@ TrueCV - Verify CVs with Confidence - -
-
+ +
+
-
-

Verify CVs with Confidence

-

+

+

+ Verify CVs with
+ Confidence +

+

TrueCV uses AI-powered analysis and official company records to verify employment history, detect timeline inconsistencies, and flag potential issues in candidate CVs.

-
- +

+ + + + For UK employment history +

+
+ + + + + Start Verification - + Learn More + + +
-
- +
+
+ +
-
+
-

How TrueCV Works

-

Comprehensive CV verification in three key areas

+

How TrueCV Works

+

Comprehensive CV verification in three key areas

-
+
-
- +
+
-

Employment Verification

-

- Cross-reference claimed employers with official Companies House records to verify +

Employment Verification

+

+ Cross-reference claimed employers with official records to verify company existence and match accuracy.

@@ -59,16 +77,16 @@
-
+
-
- +
+
-

Timeline Analysis

-

+

Timeline Analysis

+

Detect unexplained employment gaps and overlapping job periods that may indicate inconsistencies in the candidate's work history.

@@ -78,15 +96,15 @@
-
+
-
- +
+
-

AI-Powered Parsing

-

+

AI-Powered Parsing

+

Advanced AI extracts and structures CV data from PDF and DOCX files, ensuring accurate information capture for analysis.

@@ -98,47 +116,95 @@
-
+
-

Get Started in Minutes

-

Simple three-step verification process

+

Get Started in Minutes

+

Simple three-step verification process

-
- 1 +
+ 1
-
Upload CV
+
Upload CV

Upload the candidate's CV in PDF or DOCX format

-
- 2 +
+ 2
-
AI Analysis
+
AI Analysis

Our AI parses the CV and verifies against official records

-
- 3 +
+ 3
-
Get Report
+
Get Report

Receive a detailed veracity report with actionable insights

- + + + + + + Start Your First Check
+ + +
+
+
+
+
+ + + + + Secure & Encrypted +
+
+
+
+ + + + Official Records +
+
+
+
+ + + + AI-Powered +
+
+
+
+ + + + + + Fast Results +
+
+
+
+
diff --git a/src/TrueCV.Web/Components/Pages/Report.razor b/src/TrueCV.Web/Components/Pages/Report.razor index 03a8508..26d2c17 100644 --- a/src/TrueCV.Web/Components/Pages/Report.razor +++ b/src/TrueCV.Web/Components/Pages/Report.razor @@ -106,6 +106,10 @@

Verification Report

+ @if (!string.IsNullOrWhiteSpace(_report.CandidateName)) + { +

@_report.CandidateName

+ }

@_check.OriginalFileName | @@ -149,7 +153,7 @@ /100

-
TrueCV Score
+
TrueCV Score
@@ -162,7 +166,7 @@

@_report.EmploymentVerifications.Count

- Employers Checked + Employers Checked
@@ -174,7 +178,7 @@

@_report.TimelineAnalysis.TotalGapMonths

- Gap Months + Gap Months
@@ -185,7 +189,7 @@

@_report.Flags.Count

- Flags Raised + Flags Raised
@@ -208,102 +212,67 @@
-
- - - - - - - - - - - - - @for (int i = 0; i < _report.EmploymentVerifications.Count; i++) - { - var verification = _report.EmploymentVerifications[i]; - var index = i; - - - - - - - - +
+
+
+
Employer
+
Period
+
Match
+
Pts
+
+ @for (int i = 0; i < _report.EmploymentVerifications.Count; i++) + { + var verification = _report.EmploymentVerifications[i]; + var index = i; + var companyPoints = GetPointsForCompany(verification.ClaimedCompany, verification.MatchedCompanyName, index); + +
+
+ @if (verification.IsVerified) + { + + + + } + else + { + + + + } +
+
+ @verification.ClaimedCompany @if (!string.IsNullOrEmpty(verification.VerificationNotes)) { -
- - + @verification.VerificationNotes } - } - -
Claimed EmployerPeriodMatched CompanyMatch ScoreStatusPoints
@verification.ClaimedCompany - @if (verification.ClaimedStartDate.HasValue) - { - @verification.ClaimedStartDate.Value.ToString("MMM yyyy") - - - @if (verification.ClaimedEndDate.HasValue) - { - @verification.ClaimedEndDate.Value.ToString("MMM yyyy") - } - else - { - Present - } - } - else - { - Not specified - } - - @if (!string.IsNullOrEmpty(verification.MatchedCompanyName)) - { - @verification.MatchedCompanyName - @if (!string.IsNullOrEmpty(verification.MatchedCompanyNumber)) - { -
@verification.MatchedCompanyNumber - } - } - else - { - No match found - } - 		- - @verification.MatchScore% - - - @if (verification.IsVerified) - { - Verified - } - else - { - Unverified - } - - @{ - var companyPoints = GetPointsForCompany(verification.ClaimedCompany, verification.MatchedCompanyName, index); - } - @if (companyPoints < 0) - { - @companyPoints - } - else - { - 0 - } -
- - - - - @verification.VerificationNotes -
+
+
+ @if (verification.ClaimedStartDate.HasValue) + { + @verification.ClaimedStartDate.Value.ToString("MMM yyyy") – @(verification.ClaimedEndDate?.ToString("MMM yyyy") ?? "Present") + } + else + { + — + } +
+
+ @verification.MatchScore% +
+
+ @if (companyPoints < 0) + { + @companyPoints + } + else + { + 0 + } +
+
+ }
@@ -501,10 +470,23 @@
diff --git a/src/TrueCV.Web/wwwroot/app.css b/src/TrueCV.Web/wwwroot/app.css index 9268a79..446c217 100644 --- a/src/TrueCV.Web/wwwroot/app.css +++ b/src/TrueCV.Web/wwwroot/app.css @@ -1,55 +1,124 @@ -/* TrueCV Custom Design System */ +/* TrueCV Design System - Trust & Intelligence Theme */ + +/* Import fonts - Inter for headings, system fonts for body, JetBrains Mono for data */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); :root { - /* Primary brand colors - warmer blue */ - --truecv-primary: #3d5a80; - --truecv-primary-dark: #2c4a6e; - --truecv-primary-light: #5a7a9a; + /* Primary brand colors - Deep Indigo/Navy for enterprise feel */ + --truecv-brand: #1E293B; + --truecv-brand-dark: #0F172A; + --truecv-brand-light: #334155; - /* Semantic colors for verification states */ - --truecv-verified: #059669; - --truecv-verified-light: #dcf5e9; - --truecv-warning: #d97706; - --truecv-warning-light: #fdf6e3; - --truecv-danger: #dc2626; - --truecv-danger-light: #fde8e8; + /* Primary action color - Electric Blue for CTAs */ + --truecv-primary: #2563EB; + --truecv-primary-dark: #1D4ED8; + --truecv-primary-light: #3B82F6; - /* Eye-friendly neutral palette - warmer tones with better contrast */ - --truecv-gray-50: #faf9f7; - --truecv-gray-100: #f0ede8; - --truecv-gray-200: #e5e2dc; - --truecv-gray-300: #d6d2cb; - --truecv-gray-500: #5a5751; - --truecv-gray-700: #2d2b27; - --truecv-gray-900: #1a1917; + /* Status colors - Trust palette */ + --truecv-verified: #10B981; /* Emerald Green */ + --truecv-verified-light: #D1FAE5; + --truecv-verified-dark: #059669; - /* Surface colours for eye comfort */ - --truecv-bg-page: #f5f3f0; - --truecv-bg-surface: #faf9f7; - --truecv-bg-muted: #f0ede8; + --truecv-warning: #F59E0B; /* Amber */ + --truecv-warning-light: #FEF3C7; + --truecv-warning-dark: #D97706; - /* Footer */ - --truecv-footer-bg: #3a3833; + --truecv-danger: #E11D48; /* Rose Red */ + --truecv-danger-light: #FFE4E6; + --truecv-danger-dark: #BE123C; + + --truecv-info: #0EA5E9; /* Sky Blue */ + --truecv-info-light: #E0F2FE; + + --truecv-accent: var(--truecv-accent); /* Light Blue - accent for dark backgrounds */ + + --truecv-neutral: #64748B; /* Slate */ + --truecv-neutral-light: #F1F5F9; + + /* Neutral palette - cool tones */ + --truecv-gray-50: #F8FAFC; + --truecv-gray-100: #F1F5F9; + --truecv-gray-200: #E2E8F0; + --truecv-gray-300: #CBD5E1; + --truecv-gray-400: #94A3B8; + --truecv-gray-500: #64748B; + --truecv-gray-600: #475569; + --truecv-gray-700: #334155; + --truecv-gray-800: #1E293B; + --truecv-gray-900: #0F172A; + + /* Surface colors */ + --truecv-bg-page: #F8FAFC; + --truecv-bg-surface: #FFFFFF; + --truecv-bg-muted: #F1F5F9; + --truecv-bg-elevated: #FFFFFF; + + /* Footer & header */ + --truecv-header-bg: #FFFFFF; + --truecv-footer-bg: #0F172A; + + /* Shadows */ + --truecv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --truecv-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + --truecv-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); + --truecv-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + + /* Border radius */ + --truecv-radius-sm: 6px; + --truecv-radius: 8px; + --truecv-radius-md: 12px; + --truecv-radius-lg: 16px; + --truecv-radius-xl: 24px; + + /* Transitions */ + --truecv-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); + --truecv-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); } +/* Base styles */ html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--truecv-gray-700); - background: linear-gradient(180deg, var(--truecv-bg-page) 0%, #ebe8e3 100%); - background-attachment: fixed; + background-color: var(--truecv-bg-page); min-height: 100vh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -/* Typography scale */ -h1, .h1 { font-weight: 700; letter-spacing: -0.025em; } -h2, .h2 { font-weight: 600; letter-spacing: -0.02em; } -h3, .h3 { font-weight: 600; } -h4, .h4 { font-weight: 600; } -h5, .h5 { font-weight: 600; } +/* Typography */ +h1, .h1 { + font-weight: 800; + letter-spacing: -0.03em; + color: var(--truecv-gray-900); +} + +h2, .h2 { + font-weight: 700; + letter-spacing: -0.025em; + color: var(--truecv-gray-900); +} + +h3, .h3 { + font-weight: 600; + letter-spacing: -0.02em; + color: var(--truecv-gray-800); +} + +h4, .h4, h5, .h5 { + font-weight: 600; + color: var(--truecv-gray-800); +} + +/* Monospace for data */ +.font-mono, .data-value, .score-value, .date-value, .ref-id { + font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; + font-feature-settings: 'tnum' on, 'lnum' on; +} /* Links */ a, .btn-link { color: var(--truecv-primary); + transition: color var(--truecv-transition); } a:hover { @@ -59,38 +128,94 @@ a:hover { /* Buttons */ .btn { font-weight: 500; - border-radius: 8px; - padding: 0.5rem 1rem; - transition: all 0.2s ease; + border-radius: var(--truecv-radius); + padding: 0.625rem 1.25rem; + transition: all var(--truecv-transition); user-select: none; + border: none; } .btn-lg { - padding: 0.75rem 1.5rem; - border-radius: 10px; + padding: 0.875rem 1.75rem; + border-radius: var(--truecv-radius-md); + font-size: 1rem; } .btn-sm { - padding: 0.375rem 0.75rem; - border-radius: 6px; + padding: 0.375rem 0.875rem; + border-radius: var(--truecv-radius-sm); + font-size: 0.875rem; } +/* Primary button - Electric Blue */ .btn-primary { + color: #fff; + background-color: var(--truecv-primary); + box-shadow: var(--truecv-shadow-sm), 0 1px 2px rgba(37, 99, 235, 0.2); +} + +.btn-primary:hover { + background-color: var(--truecv-primary-dark); + transform: translateY(-1px); + box-shadow: var(--truecv-shadow), 0 4px 12px rgba(37, 99, 235, 0.25); +} + +.btn-primary:active { + transform: translateY(0); +} + +/* Secondary/outline button */ +.btn-outline-primary { + color: var(--truecv-primary); + border: 1.5px solid var(--truecv-primary); + background: transparent; +} + +.btn-outline-primary:hover { color: #fff; background-color: var(--truecv-primary); border-color: var(--truecv-primary); } -.btn-primary:hover { - background-color: var(--truecv-primary-dark); - border-color: var(--truecv-primary-dark); +/* Light button */ +.btn-light { + background-color: var(--truecv-gray-100); + color: var(--truecv-gray-700); + border: 1px solid var(--truecv-gray-200); } +.btn-light:hover { + background-color: var(--truecv-gray-200); + color: var(--truecv-gray-800); +} + +/* Danger button */ +.btn-danger { + background-color: var(--truecv-danger); + color: #fff; +} + +.btn-danger:hover { + background-color: var(--truecv-danger-dark); +} + +.btn-outline-danger { + color: var(--truecv-danger); + border: 1.5px solid var(--truecv-danger); + background: transparent; +} + +.btn-outline-danger:hover { + color: #fff; + background-color: var(--truecv-danger); +} + +/* Focus states */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--truecv-primary-light); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); + outline: none; } -/* Focus states for accessibility */ .btn:focus-visible, .form-control:focus-visible { outline: 2px solid var(--truecv-primary); @@ -98,70 +223,320 @@ a:hover { box-shadow: none; } -/* Cards */ +/* Cards - Elevated style */ .card { - border-radius: 16px; - border: none; + border-radius: var(--truecv-radius-lg); + border: 1px solid var(--truecv-gray-200); background-color: var(--truecv-bg-surface); + box-shadow: var(--truecv-shadow-sm); + transition: box-shadow var(--truecv-transition), transform var(--truecv-transition); +} + +.card:hover { + box-shadow: var(--truecv-shadow); } .card-header { - border-radius: 16px 16px 0 0 !important; + border-radius: var(--truecv-radius-lg) var(--truecv-radius-lg) 0 0 !important; background-color: var(--truecv-bg-surface); border-bottom: 1px solid var(--truecv-gray-200); + padding: 1.25rem 1.5rem; +} + +.card-body { + padding: 1.5rem; +} + +/* Stat cards */ +.stat-card { + position: relative; + overflow: hidden; +} + +.stat-card::before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 80px; + height: 80px; + opacity: 0.1; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.stat-card .stat-value { + font-family: 'JetBrains Mono', monospace; + font-size: 2rem; + font-weight: 700; + color: var(--truecv-gray-900); +} + +.stat-card .stat-label { + font-size: 0.875rem; + color: var(--truecv-gray-500); + font-weight: 500; +} + +/* Stat card icons */ +.stat-icon { + width: 56px; + height: 56px; + border-radius: var(--truecv-radius-md); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.stat-icon-primary { + background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%); + color: var(--truecv-primary); +} + +.stat-icon-success { + background: linear-gradient(135deg, var(--truecv-verified-light) 0%, #A7F3D0 100%); + color: var(--truecv-verified-dark); +} + +.stat-icon-warning { + background: linear-gradient(135deg, var(--truecv-warning-light) 0%, #FDE68A 100%); + color: var(--truecv-warning-dark); +} + +.stat-icon-danger { + background: linear-gradient(135deg, var(--truecv-danger-light) 0%, #FECACA 100%); + color: var(--truecv-danger-dark); } /* Better shadow hierarchy */ .shadow-sm { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) !important; + box-shadow: var(--truecv-shadow-sm) !important; } .shadow { - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; + box-shadow: var(--truecv-shadow) !important; +} + +.shadow-md { + box-shadow: var(--truecv-shadow-md) !important; +} + +.shadow-lg { + box-shadow: var(--truecv-shadow-lg) !important; } /* Tables */ -.table > :not(caption) > * > * { - padding: 1rem 0.75rem; +.table { + --bs-table-bg: transparent; } -.table thead th.text-muted { - color: var(--truecv-gray-500) !important; +.table > :not(caption) > * > * { + padding: 1rem 0.875rem; + vertical-align: middle; +} + +.table thead th { + font-weight: 600; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--truecv-gray-500); + border-bottom: 2px solid var(--truecv-gray-200); + background-color: var(--truecv-bg-muted); +} + +.table tbody tr { + transition: background-color var(--truecv-transition); } .table-hover > tbody > tr:hover { - background-color: rgba(61, 90, 128, 0.04); + background-color: var(--truecv-gray-50); } -/* Badges */ +.table tbody td { + border-bottom: 1px solid var(--truecv-gray-100); +} + +/* Badges - Soft style */ .badge { font-weight: 500; letter-spacing: 0.01em; + padding: 0.375em 0.75em; + border-radius: var(--truecv-radius-sm); } -/* Bootstrap 5.3 subtle color fallbacks - warmer tones */ -.bg-success-subtle { - background-color: #dcf5e9 !important; +.badge-soft-success, .bg-success-subtle { + background-color: var(--truecv-verified-light) !important; + color: var(--truecv-verified-dark) !important; +} + +.badge-soft-warning, .bg-warning-subtle { + background-color: var(--truecv-warning-light) !important; + color: var(--truecv-warning-dark) !important; +} + +.badge-soft-danger, .bg-danger-subtle { + background-color: var(--truecv-danger-light) !important; + color: var(--truecv-danger-dark) !important; +} + +.badge-soft-info, .bg-info-subtle { + background-color: var(--truecv-info-light) !important; + color: #0369A1 !important; +} + +.badge-soft-neutral, .bg-secondary-subtle { + background-color: var(--truecv-neutral-light) !important; + color: var(--truecv-gray-600) !important; } .bg-primary-subtle { - background-color: #e1e8ef !important; + background-color: #DBEAFE !important; + color: var(--truecv-primary-dark) !important; } -.bg-secondary-subtle { - background-color: var(--truecv-bg-muted) !important; +/* Score badges - circular */ +.score-badge { + display: inline-flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border-radius: 50%; + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + font-size: 1rem; } -.bg-danger-subtle { - background-color: #fde8e8 !important; +.score-badge-sm { + width: 36px; + height: 36px; + font-size: 0.875rem; } -.bg-warning-subtle { - background-color: #fdf6e3 !important; +.score-badge-lg { + width: 64px; + height: 64px; + font-size: 1.25rem; } -.bg-info-subtle { - background-color: #e8f4f8 !important; +.score-high { + background-color: var(--truecv-verified-light); + color: var(--truecv-verified-dark); + border: 2px solid var(--truecv-verified); +} + +.score-medium { + background-color: var(--truecv-warning-light); + color: var(--truecv-warning-dark); + border: 2px solid var(--truecv-warning); +} + +.score-low { + background-color: var(--truecv-danger-light); + color: var(--truecv-danger-dark); + border: 2px solid var(--truecv-danger); +} + +/* Score colors for text */ +.text-score-high { color: var(--truecv-verified) !important; } +.text-score-medium { color: var(--truecv-warning) !important; } +.text-score-low { color: var(--truecv-danger) !important; } + +.bg-score-high { background-color: var(--truecv-verified-light) !important; } +.bg-score-medium { background-color: var(--truecv-warning-light) !important; } +.bg-score-low { background-color: var(--truecv-danger-light) !important; } + +/* Status pills */ +.status-pill { + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.25rem 0.75rem; + border-radius: 9999px; + font-size: 0.8125rem; + font-weight: 500; +} + +.status-pill::before { + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; +} + +.status-pill-success { + background-color: var(--truecv-verified-light); + color: var(--truecv-verified-dark); +} + +.status-pill-success::before { + background-color: var(--truecv-verified); +} + +.status-pill-warning { + background-color: var(--truecv-warning-light); + color: var(--truecv-warning-dark); +} + +.status-pill-warning::before { + background-color: var(--truecv-warning); +} + +.status-pill-danger { + background-color: var(--truecv-danger-light); + color: var(--truecv-danger-dark); +} + +.status-pill-danger::before { + background-color: var(--truecv-danger); +} + +.status-pill-neutral { + background-color: var(--truecv-neutral-light); + color: var(--truecv-gray-600); +} + +.status-pill-neutral::before { + background-color: var(--truecv-gray-400); +} + +/* Forms */ +.form-control, .form-select { + border-radius: var(--truecv-radius); + border: 1.5px solid var(--truecv-gray-300); + padding: 0.75rem 1rem; + transition: border-color var(--truecv-transition), box-shadow var(--truecv-transition); +} + +.form-control:focus, .form-select:focus { + border-color: var(--truecv-primary); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.form-control::placeholder { + color: var(--truecv-gray-400); +} + +.form-label { + font-weight: 500; + color: var(--truecv-gray-700); + margin-bottom: 0.5rem; +} + +/* Form check (checkboxes) */ +.form-check-input { + width: 1.125rem; + height: 1.125rem; + border: 1.5px solid var(--truecv-gray-300); + border-radius: 4px; +} + +.form-check-input:checked { + background-color: var(--truecv-primary); + border-color: var(--truecv-primary); } /* Table header backgrounds */ @@ -169,6 +544,221 @@ a:hover { background-color: var(--truecv-bg-muted) !important; } +/* Hero section for landing */ +.hero-section { + background: linear-gradient(135deg, var(--truecv-brand) 0%, #312E81 50%, #1E1B4B 100%); + position: relative; + overflow: hidden; +} + +.hero-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + opacity: 0.4; +} + +.hero-content { + position: relative; + z-index: 1; +} + +/* Feature cards with hover effect */ +.feature-card { + transition: transform var(--truecv-transition-slow), box-shadow var(--truecv-transition-slow); +} + +.feature-card:hover { + transform: translateY(-4px); + box-shadow: var(--truecv-shadow-lg); +} + +.feature-icon { + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--truecv-radius-md); + background: linear-gradient(135deg, var(--truecv-primary) 0%, var(--truecv-primary-dark) 100%); + color: white; +} + +/* Upload/drop zone */ +.drop-zone { + border: 2px dashed var(--truecv-gray-300); + border-radius: var(--truecv-radius-lg); + padding: 3rem 2rem; + text-align: center; + background-color: var(--truecv-gray-50); + transition: all var(--truecv-transition); + cursor: pointer; +} + +.drop-zone:hover, .drop-zone.drag-over { + border-color: var(--truecv-primary); + background-color: rgba(37, 99, 235, 0.05); +} + +.drop-zone.drag-over { + transform: scale(1.01); +} + +.drop-zone-icon { + width: 64px; + height: 64px; + margin: 0 auto 1rem; + color: var(--truecv-gray-400); + transition: color var(--truecv-transition), transform var(--truecv-transition); +} + +.drop-zone:hover .drop-zone-icon { + color: var(--truecv-primary); + transform: translateY(-4px); +} + +/* Score ring (for report page) */ +.score-ring-container { + position: relative; + width: 160px; + height: 160px; +} + +.score-ring-bg { + fill: none; + stroke: var(--truecv-gray-200); + stroke-width: 8; +} + +.score-ring-progress { + fill: none; + stroke-width: 8; + stroke-linecap: round; + transform-origin: center; + transform: rotate(-90deg); + transition: stroke-dasharray 1s ease-out; +} + +.score-ring-progress.high { stroke: var(--truecv-verified); } +.score-ring-progress.medium { stroke: var(--truecv-warning); } +.score-ring-progress.low { stroke: var(--truecv-danger); } + +/* Collapsible sections */ +.collapsible-card { + border: 1px solid var(--truecv-gray-200); + border-radius: var(--truecv-radius-md); + overflow: hidden; + margin-bottom: 0.75rem; +} + +.collapsible-header { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 1rem 1.25rem; + background-color: var(--truecv-bg-surface); + cursor: pointer; + transition: background-color var(--truecv-transition); +} + +.collapsible-header:hover { + background-color: var(--truecv-gray-50); +} + +.collapsible-body { + padding: 1rem 1.25rem; + border-top: 1px solid var(--truecv-gray-100); + background-color: var(--truecv-gray-50); +} + +/* Flag severity indicators */ +.flag-severity { + display: inline-flex; + align-items: center; + gap: 0.375rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.flag-severity-high { + color: var(--truecv-danger); +} + +.flag-severity-medium { + color: var(--truecv-warning); +} + +.flag-severity-low { + color: var(--truecv-info); +} + +/* Timeline visualization */ +.timeline-bar { + height: 32px; + background-color: var(--truecv-gray-100); + border-radius: var(--truecv-radius); + position: relative; + overflow: hidden; +} + +.timeline-segment { + position: absolute; + top: 4px; + bottom: 4px; + border-radius: 4px; + transition: opacity var(--truecv-transition); +} + +.timeline-segment:hover { + opacity: 0.9; +} + +.timeline-segment-employment { + background-color: var(--truecv-primary); +} + +.timeline-segment-gap { + background: repeating-linear-gradient( + 45deg, + var(--truecv-danger-light), + var(--truecv-danger-light) 4px, + transparent 4px, + transparent 8px + ); + border: 1px dashed var(--truecv-danger); +} + +/* Navbar customization */ +.navbar { + background-color: var(--truecv-header-bg) !important; + border-bottom: 1px solid var(--truecv-gray-200); +} + +.navbar-brand { + font-weight: 700; +} + +.nav-link { + color: var(--truecv-gray-600) !important; + font-weight: 500; + transition: color var(--truecv-transition); +} + +.nav-link:hover, .nav-link.active { + color: var(--truecv-primary) !important; +} + +/* Footer */ +footer { + background-color: var(--truecv-footer-bg) !important; +} + /* Content area */ .content { padding-top: 1.1rem; @@ -189,6 +779,8 @@ h1:focus { .validation-message { color: var(--truecv-danger); + font-size: 0.875rem; + margin-top: 0.25rem; } /* Blazor error boundary */ @@ -196,6 +788,7 @@ h1:focus { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; + border-radius: var(--truecv-radius); } .blazor-error-boundary::after { @@ -203,7 +796,7 @@ h1:focus { } .darker-border-checkbox.form-check-input { - border-color: #929292; + border-color: var(--truecv-gray-400); } /* Utility classes */ @@ -212,11 +805,372 @@ h1:focus { user-select: none; } -/* Score colors */ -.text-score-high { color: var(--truecv-verified) !important; } -.text-score-medium { color: var(--truecv-warning) !important; } -.text-score-low { color: var(--truecv-danger) !important; } +.text-muted { + color: var(--truecv-gray-500) !important; +} -.bg-score-high { background-color: var(--truecv-verified-light) !important; } -.bg-score-medium { background-color: var(--truecv-warning-light) !important; } -.bg-score-low { background-color: var(--truecv-danger-light) !important; } +/* Row selection highlight */ +.table tbody tr.selected { + background-color: rgba(37, 99, 235, 0.08) !important; +} + +/* Comparison view for verification */ +.comparison-row { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 1rem; + align-items: center; + padding: 1rem; + border-bottom: 1px solid var(--truecv-gray-100); +} + +.comparison-claim, .comparison-record { + padding: 0.75rem; + border-radius: var(--truecv-radius); + background-color: var(--truecv-gray-50); +} + +.comparison-status { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} + +.comparison-status-match { + background-color: var(--truecv-verified-light); + color: var(--truecv-verified); +} + +.comparison-status-mismatch { + background-color: var(--truecv-danger-light); + color: var(--truecv-danger); +} + +/* Alerts */ +.alert { + border-radius: var(--truecv-radius-md); + border: none; +} + +.alert-info { + background-color: var(--truecv-info-light); + color: #0369A1; +} + +.alert-warning { + background-color: var(--truecv-warning-light); + color: var(--truecv-warning-dark); +} + +.alert-danger { + background-color: var(--truecv-danger-light); + color: var(--truecv-danger-dark); +} + +.alert-success { + background-color: var(--truecv-verified-light); + color: var(--truecv-verified-dark); +} + +/* Modal improvements */ +.modal-content { + border-radius: var(--truecv-radius-lg); + border: none; + box-shadow: var(--truecv-shadow-lg); +} + +.modal-header { + border-bottom: 1px solid var(--truecv-gray-200); + padding: 1.25rem 1.5rem; +} + +.modal-body { + padding: 1.5rem; +} + +.modal-footer { + border-top: 1px solid var(--truecv-gray-200); + padding: 1rem 1.5rem; +} + +/* Loading states */ +.loading-placeholder .placeholder { + background-color: var(--truecv-gray-200); + border-radius: var(--truecv-radius); +} + +/* Breadcrumbs */ +.breadcrumb { + background: none; + padding: 0; + margin-bottom: 0.5rem; +} + +.breadcrumb-item a { + color: var(--truecv-gray-500); + text-decoration: none; +} + +.breadcrumb-item a:hover { + color: var(--truecv-primary); +} + +.breadcrumb-item.active { + color: var(--truecv-gray-400); +} + +/* Security badge for upload */ +.security-badge { + display: inline-flex; + align-items: center; + gap: 0.375rem; + font-size: 0.8125rem; + color: var(--truecv-gray-500); + margin-top: 1rem; +} + +.security-badge svg { + width: 16px; + height: 16px; + color: var(--truecv-verified); +} + +/* ========================================== + Auth Pages - Split Layout + ========================================== */ + +.auth-container { + display: flex; + min-height: 100vh; + margin: -1.5rem -0.75rem; /* Offset container padding */ +} + +.auth-form-side { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 2rem; + background-color: var(--truecv-bg-surface); +} + +.auth-form-wrapper { + width: 100%; + max-width: 420px; +} + +.auth-brand-side { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 3rem; + background: linear-gradient(135deg, var(--truecv-brand) 0%, var(--truecv-brand-dark) 100%); + position: relative; + overflow: hidden; +} + +.auth-brand-side::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); +} + +.auth-brand-content { + position: relative; + z-index: 1; + color: white; + max-width: 480px; + text-align: center; +} + +.auth-logo { + height: 48px; + margin-bottom: 1rem; +} + +.auth-title { + font-size: 1.75rem; + font-weight: 700; + color: var(--truecv-gray-900); + margin-bottom: 0.5rem; +} + +.auth-subtitle { + color: var(--truecv-gray-500); + margin-bottom: 2rem; +} + +.auth-brand-icon { + width: 100px; + height: 100px; + margin: 0 auto 1.5rem; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.auth-brand-icon svg { + color: var(--truecv-accent); +} + +.auth-brand-title { + font-size: 1.75rem; + font-weight: 700; + margin-bottom: 1rem; + color: white; +} + +.auth-brand-text { + font-size: 1.125rem; + color: rgba(255, 255, 255, 0.8); + line-height: 1.6; + margin-bottom: 2rem; +} + +.auth-stats { + display: flex; + justify-content: center; + gap: 2.5rem; + margin-bottom: 2.5rem; +} + +.auth-stat { + text-align: center; +} + +.auth-stat-value { + font-size: 1.75rem; + font-weight: 700; + color: var(--truecv-accent); + font-family: 'JetBrains Mono', monospace; +} + +.auth-stat-label { + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.6); + margin-top: 0.25rem; +} + +.auth-testimonial { + background: rgba(255, 255, 255, 0.05); + border-radius: var(--truecv-radius-md); + padding: 1.5rem; + margin-top: 2rem; +} + +.auth-testimonial blockquote { + font-size: 1rem; + font-style: italic; + color: rgba(255, 255, 255, 0.9); + margin: 0 0 0.75rem 0; + line-height: 1.6; +} + +.auth-testimonial cite { + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.6); + font-style: normal; +} + +.auth-features { + text-align: left; + margin-bottom: 2rem; +} + +.auth-feature { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 0; + color: rgba(255, 255, 255, 0.9); +} + +.auth-feature svg { + flex-shrink: 0; + color: var(--truecv-verified); +} + +.auth-divider { + position: relative; + text-align: center; + margin: 1.5rem 0; +} + +.auth-divider::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: var(--truecv-gray-200); +} + +.auth-divider span { + position: relative; + background: var(--truecv-bg-surface); + padding: 0 1rem; + color: var(--truecv-gray-500); + font-size: 0.875rem; +} + +/* Input with icon styling */ +.input-group-icon { + position: relative; +} + +.input-group-icon svg { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--truecv-gray-400); + z-index: 5; + pointer-events: none; +} + +.input-group-icon input, +.input-group-icon .form-control { + padding-left: 2.75rem; +} + +.input-group-icon:focus-within svg { + color: var(--truecv-primary); +} + +/* Responsive auth layout */ +@media (max-width: 991.98px) { + .auth-container { + flex-direction: column; + } + + .auth-brand-side { + display: none; + } + + .auth-form-side { + min-height: 100vh; + } +} + +@media (min-width: 992px) { + .auth-form-side { + flex: 0 0 50%; + max-width: 50%; + } + + .auth-brand-side { + flex: 0 0 50%; + max-width: 50%; + } +} diff --git a/src/TrueCV.Web/wwwroot/images/TrueCV_Logo.png b/src/TrueCV.Web/wwwroot/images/TrueCV_Logo.png index b1888bd..141f9e1 100644 Binary files a/src/TrueCV.Web/wwwroot/images/TrueCV_Logo.png and b/src/TrueCV.Web/wwwroot/images/TrueCV_Logo.png differ