From ecb599fba754ff7ab707ea41838822a3420fb996 Mon Sep 17 00:00:00 2001
From: Peter Foster <peter@foster.net>
Date: Thu, 22 Jan 2026 21:14:20 +0000
Subject: [PATCH] fix: Replace --truecv- CSS variables with --realcv-
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed CSS variable references in Razor components that were still
using the old --truecv- prefix, causing score circles and other
styled elements to not render properly.

Also changed score-ring-value font to Inter for consistent numbers.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../Components/Layout/MainLayout.razor        |  4 +--
 src/RealCV.Web/Components/Pages/Check.razor   | 26 +++++++++----------
 .../Components/Pages/Dashboard.razor          | 22 ++++++++--------
 src/RealCV.Web/Components/Pages/Home.razor    |  4 +--
 src/RealCV.Web/Components/Pages/Report.razor  | 12 ++++-----
 5 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/RealCV.Web/Components/Layout/MainLayout.razor b/src/RealCV.Web/Components/Layout/MainLayout.razor
index 3822511..ab29a02 100644
--- a/src/RealCV.Web/Components/Layout/MainLayout.razor
+++ b/src/RealCV.Web/Components/Layout/MainLayout.razor
@@ -1,7 +1,7 @@
 @inherits LayoutComponentBase
 
 <div class="d-flex flex-column min-vh-100">
-    <nav class="navbar navbar-expand-lg navbar-light shadow-sm" style="background-color: var(--truecv-bg-surface);">
+    <nav class="navbar navbar-expand-lg navbar-light shadow-sm" style="background-color: var(--realcv-bg-surface);">
         <div class="container">
             <a class="navbar-brand fw-bold" href="/">
                 <img src="images/RealCV_Logo.png" alt="RealCV" style="height: 95px;" />
@@ -72,7 +72,7 @@
         @Body
     </main>
 
-    <footer class="text-light py-4 mt-auto" style="background-color: var(--truecv-footer-bg);">
+    <footer class="text-light py-4 mt-auto" style="background-color: var(--realcv-footer-bg);">
         <div class="container text-center">
             <p class="mb-0">&copy; @DateTime.Now.Year RealCV. All rights reserved.</p>
         </div>
diff --git a/src/RealCV.Web/Components/Pages/Check.razor b/src/RealCV.Web/Components/Pages/Check.razor
index ec754fa..c12a39f 100644
--- a/src/RealCV.Web/Components/Pages/Check.razor
+++ b/src/RealCV.Web/Components/Pages/Check.razor
@@ -177,21 +177,21 @@
 
 <style>
     .upload-area {
-        border: 2px dashed var(--truecv-gray-300);
+        border: 2px dashed var(--realcv-gray-300);
         border-radius: 16px;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        background: linear-gradient(180deg, var(--truecv-bg-surface) 0%, var(--truecv-bg-muted) 100%);
+        background: linear-gradient(180deg, var(--realcv-bg-surface) 0%, var(--realcv-bg-muted) 100%);
     }
 
     .upload-area:hover {
-        border-color: var(--truecv-primary);
+        border-color: var(--realcv-primary);
         background: linear-gradient(180deg, #e8f1fa 0%, #d4e4f4 100%);
         transform: translateY(-2px);
         box-shadow: 0 10px 25px -5px rgba(59, 111, 212, 0.1);
     }
 
     .upload-area.dragging {
-        border-color: var(--truecv-primary);
+        border-color: var(--realcv-primary);
         background: linear-gradient(180deg, #d4e4f4 0%, #c5d9ef 100%);
         border-style: solid;
         transform: scale(1.02);
@@ -200,7 +200,7 @@
     .upload-icon {
         width: 80px;
         height: 80px;
-        background: linear-gradient(135deg, var(--truecv-primary) 0%, var(--truecv-primary-dark) 100%);
+        background: linear-gradient(135deg, var(--realcv-primary) 0%, var(--realcv-primary-dark) 100%);
         border-radius: 20px;
         display: flex;
         align-items: center;
@@ -223,16 +223,16 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border: 1px solid var(--truecv-gray-200);
+        border: 1px solid var(--realcv-gray-200);
         border-radius: 12px;
         padding: 1rem;
         margin-bottom: 0.75rem;
-        background: var(--truecv-bg-surface);
+        background: var(--realcv-bg-surface);
         transition: all 0.2s ease;
     }
 
     .file-list-item:hover {
-        border-color: var(--truecv-primary);
+        border-color: var(--realcv-primary);
         box-shadow: 0 4px 12px rgba(59, 111, 212, 0.08);
     }
 
@@ -252,7 +252,7 @@
 
     .file-type-icon.docx {
         background: linear-gradient(135deg, #e3ecf7 0%, #d4e4f4 100%);
-        color: var(--truecv-primary);
+        color: var(--realcv-primary);
     }
 
     .file-type-icon.json {
@@ -269,14 +269,14 @@
         align-items: center;
         gap: 0.5rem;
         padding: 0.625rem 1rem;
-        background: var(--truecv-bg-muted);
-        border-radius: var(--truecv-radius);
+        background: var(--realcv-bg-muted);
+        border-radius: var(--realcv-radius);
         font-size: 0.875rem;
-        color: var(--truecv-gray-600);
+        color: var(--realcv-gray-600);
     }
 
     .security-badge svg {
-        color: var(--truecv-verified);
+        color: var(--realcv-verified);
     }
 
     @@media (max-width: 576px) {
diff --git a/src/RealCV.Web/Components/Pages/Dashboard.razor b/src/RealCV.Web/Components/Pages/Dashboard.razor
index fb1d445..92d9ad9 100644
--- a/src/RealCV.Web/Components/Pages/Dashboard.razor
+++ b/src/RealCV.Web/Components/Pages/Dashboard.razor
@@ -151,7 +151,7 @@
 
         <!-- Checks List -->
         <div class="card border-0 shadow-sm">
-            <div class="card-header py-3 border-bottom" style="background-color: var(--truecv-bg-surface);">
+            <div class="card-header py-3 border-bottom" style="background-color: var(--realcv-bg-surface);">
                 <div class="d-flex justify-content-between align-items-center">
                     <div class="d-flex align-items-center gap-3">
                         <h5 class="mb-0 fw-bold">Recent CV Checks</h5>
@@ -177,7 +177,7 @@
             <div class="table-responsive">
                 <table class="table table-hover align-middle mb-0">
                     <thead>
-                        <tr style="background-color: var(--truecv-bg-muted);">
+                        <tr style="background-color: var(--realcv-bg-muted);">
                             <th class="border-0 ps-3 py-3" style="width: 40px;">
                                 <input type="checkbox" class="form-check-input"
                                        checked="@IsAllSelected()"
@@ -395,7 +395,7 @@
         align-items: center;
         justify-content: center;
         margin: 0 auto;
-        color: var(--truecv-primary);
+        color: var(--realcv-primary);
     }
 
     .file-icon-wrapper {
@@ -424,7 +424,7 @@
 
     .score-ring-bg {
         fill: none;
-        stroke: var(--truecv-gray-200);
+        stroke: var(--realcv-gray-200);
         stroke-width: 3;
     }
 
@@ -436,20 +436,20 @@
         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-progress.high { stroke: var(--realcv-verified); }
+    .score-ring-progress.medium { stroke: var(--realcv-warning); }
+    .score-ring-progress.low { stroke: var(--realcv-danger); }
 
     .score-ring-value {
         position: absolute;
         font-size: 0.875rem;
         font-weight: 700;
-        font-family: 'JetBrains Mono', monospace;
+        font-family: 'Inter', system-ui, -apple-system, sans-serif;
     }
 
-    .text-verified { color: var(--truecv-verified); }
-    .text-warning-dark { color: var(--truecv-warning-dark); }
-    .text-danger { color: var(--truecv-danger); }
+    .text-verified { color: var(--realcv-verified); }
+    .text-warning-dark { color: var(--realcv-warning-dark); }
+    .text-danger { color: var(--realcv-danger); }
 
     @@media (max-width: 768px) {
         .d-flex.justify-content-between.align-items-center.mb-4 {
diff --git a/src/RealCV.Web/Components/Pages/Home.razor b/src/RealCV.Web/Components/Pages/Home.razor
index 9c578d0..e7a9f8f 100644
--- a/src/RealCV.Web/Components/Pages/Home.razor
+++ b/src/RealCV.Web/Components/Pages/Home.razor
@@ -63,7 +63,7 @@
 </section>
 
 <!-- Features Section -->
-<section id="features" class="py-5" style="background-color: var(--truecv-bg-page);">
+<section id="features" class="py-5" style="background-color: var(--realcv-bg-page);">
     <div class="container">
         <div class="text-center mb-5">
             <h2 class="fw-bold mb-3" style="font-size: 2.25rem;">How RealCV Works</h2>
@@ -183,7 +183,7 @@
 </section>
 
 <!-- Trust indicators -->
-<section class="py-4" style="background-color: var(--truecv-bg-muted); border-top: 1px solid var(--truecv-gray-200);">
+<section class="py-4" style="background-color: var(--realcv-bg-muted); border-top: 1px solid var(--realcv-gray-200);">
     <div class="container">
         <div class="row align-items-center justify-content-center text-center g-4">
             <div class="col-6 col-md-3">
diff --git a/src/RealCV.Web/Components/Pages/Report.razor b/src/RealCV.Web/Components/Pages/Report.razor
index 168e82a..a09e1e5 100644
--- a/src/RealCV.Web/Components/Pages/Report.razor
+++ b/src/RealCV.Web/Components/Pages/Report.razor
@@ -202,7 +202,7 @@
 
         <!-- Employment Verification -->
         <div class="card border-0 shadow-sm mb-4">
-            <div class="card-header py-3" style="background-color: var(--truecv-bg-surface);">
+            <div class="card-header py-3" style="background-color: var(--realcv-bg-surface);">
                 <h5 class="mb-0 fw-bold">
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-building me-2" viewBox="0 0 16 16">
                         <path d="M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM10.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z"/>
@@ -286,7 +286,7 @@
             <!-- Gaps -->
             <div class="col-md-6">
                 <div class="card border-0 shadow-sm h-100">
-                    <div class="card-header py-3" style="background-color: var(--truecv-bg-surface);">
+                    <div class="card-header py-3" style="background-color: var(--realcv-bg-surface);">
                         <h5 class="mb-0 fw-bold">
                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-clock-history me-2 text-warning" viewBox="0 0 16 16">
                                 <path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"/>
@@ -331,7 +331,7 @@
             <!-- Overlaps -->
             <div class="col-md-6">
                 <div class="card border-0 shadow-sm h-100">
-                    <div class="card-header py-3" style="background-color: var(--truecv-bg-surface);">
+                    <div class="card-header py-3" style="background-color: var(--realcv-bg-surface);">
                         <h5 class="mb-0 fw-bold">
                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-intersect me-2 text-danger" viewBox="0 0 16 16">
                                 <path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm5 10v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2v5a2 2 0 0 1-2 2H5zm6-8V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2V6a2 2 0 0 1 2-2h5z"/>
@@ -382,7 +382,7 @@
         @if (_report.Flags.Count > 0)
         {
             <div class="card border-0 shadow-sm mb-4">
-                <div class="card-header py-3" style="background-color: var(--truecv-bg-surface);">
+                <div class="card-header py-3" style="background-color: var(--realcv-bg-surface);">
                     <h5 class="mb-0 fw-bold">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-flag me-2 text-danger" viewBox="0 0 16 16">
                             <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001"/>
@@ -620,13 +620,13 @@
 
     .flag-item.flag-info {
         background-color: #f0f5fa;
-        border-left-color: var(--truecv-primary);
+        border-left-color: var(--realcv-primary);
     }
 
     .flag-title {
         font-weight: 600;
         margin-bottom: 0.25rem;
-        color: var(--truecv-gray-700);
+        color: var(--realcv-gray-700);
     }
 
     .flag-description {