From 6dd4d9be70d4db93495118c063d0b2f3dc3503fb Mon Sep 17 00:00:00 2001
From: Ubuntu <ubuntu@spurrinai-backend.blr.cloudtopiaa.com>
Date: Tue, 2 Sep 2025 17:43:35 +0530
Subject: [PATCH] ui

---
 .../propertyTemplateSelector.css              | 330 ++++++++++--------
 .../propertyTemplateSelector.html             |   6 +-
 2 files changed, 179 insertions(+), 157 deletions(-)

diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css
index 038f682..73a6ab0 100644
--- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css
+++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css
@@ -65,12 +65,12 @@
 
 /* Beautiful Purple Gradient Header for All Steps */
 .step-header-gradient {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 0 0 20px 20px;
-    padding: 40px 30px;
-    margin: 0 0 30px 0;
+    background: #e9edf2; /* New light blue-grey theme */
+    border-radius: 0 0 12px 12px;
+    padding: 15px 20px;
+    margin: 0 0 15px 0;
     text-align: center;
-    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
     position: relative;
     overflow: hidden;
 }
@@ -88,18 +88,18 @@
 
 .main-title {
     font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
-    /* International Standard: Display Large (3rem = 48px) */
-    font-size: 3rem;
+    /* Reduced font size for compact header */
+    font-size: 2rem;
     font-weight: 700;
-    margin: 0 0 1rem 0;
+    margin: 0 0 0.5rem 0;
     /* Optimal Letter Spacing for Large Headings */
     letter-spacing: -0.025em;
     position: relative;
     z-index: 3;
     /* WCAG AA Compliant Line Height for Headings */
     line-height: 1.2;
-    color: white;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    color: #000000; /* Black text color */
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     /* Variable Font Weight for Modern Browsers */
     font-variation-settings: 'wght' 700;
 }
@@ -110,17 +110,17 @@
 
 .subtitle {
     font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
-    /* International Standard: Title Medium (1.25rem = 20px) */
-    font-size: 1.25rem;
+    /* Reduced font size for compact header */
+    font-size: 1rem;
     font-weight: 400;
     margin: 0;
     position: relative;
     z-index: 3;
-    color: rgba(255, 255, 255, 0.9);
+    color: #000000; /* Black text color */
     /* Moderate Letter Spacing for Subheadings */
     letter-spacing: 0.015em;
     text-transform: uppercase;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     /* WCAG AA Line Height */
     line-height: 1.4;
     font-variation-settings: 'wght' 400;
@@ -180,11 +180,11 @@
 .step-navigation {
     display: flex;
     justify-content: center;
-    gap: 2rem;
-    padding: 2rem;
+    gap: 1.5rem; /* reduced from 2rem */
+    padding: 1rem 1.5rem; /* reduced from 2rem */
     background: rgba(255, 255, 255, 0.95);
     margin: 0 2rem 0 2rem;
-    border-radius: 20px;
+    border-radius: 15px; /* reduced from 20px */
     box-shadow: 
         0 1px 3px rgba(0, 0, 0, 0.12),
         0 8px 32px rgba(0, 0, 0, 0.04),
@@ -200,12 +200,12 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.3rem; /* reduced from 0.5rem */
     cursor: pointer;
-    padding: 1rem;
+    padding: 0.7rem; /* reduced from 1rem */
     border-radius: 8px;
     transition: all 0.3s ease;
-    min-width: 120px;
+    min-width: 100px; /* reduced from 120px */
 }
 
 .step-nav-item:hover {
@@ -213,7 +213,7 @@
 }
 
 .step-nav-item.active {
-    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     transform: translateY(-2px) scale(1.05);
     box-shadow: 
@@ -224,28 +224,29 @@
 }
 
 .step-number {
-    width: 40px;
-    height: 40px;
+    width: 32px; /* reduced from 40px */
+    height: 32px; /* reduced from 40px */
     border-radius: 50%;
     background: #e9ecef;
-    color: #6c757d;
+    color: #000000; /* Black text color */
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
-    font-size: 1.1rem;
+    font-size: 0.9rem; /* reduced from 1.1rem */
     transition: all 0.3s ease;
 }
 
 .step-nav-item.active .step-number {
     background: rgba(255, 255, 255, 0.2);
-    color: white;
+    color: #000000; /* Black text color */
 }
 
 .step-label {
-    font-size: 0.9rem;
+    font-size: 0.8rem; /* reduced from 0.9rem */
     font-weight: 500;
     text-align: center;
+    color: #000000; /* Black text color */
 }
 
 /* Step Content */
@@ -315,12 +316,13 @@
     letter-spacing: 0.01em;
 }
 
-/* Template Grid - Enhanced styling with A4 proportions */
+/* Template Grid - Masonry Layout with Zigzag Heights */
 .template-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
-    gap: 35px;
-    padding: 40px 20px;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    grid-auto-rows: 160px; /* reduced from 200px */
+    gap: 20px; /* reduced from 25px */
+    padding: 25px 20px; /* reduced from 30px 20px */
     max-width: 1600px;
     margin: 0 auto;
 }
@@ -332,11 +334,12 @@
     padding: 20px; /* Further reduced padding to increase content width more */
     cursor: pointer;
     transition: all 0.4s ease;
+    /* Masonry positioning */
     position: relative;
-    border: 2px solid transparent;
+    border: 1px solid transparent; /* Thinner border */
     box-shadow: 0 8px 25px rgba(0,0,0,0.12);
     overflow: hidden;
-    min-height: 420px; /* A4-like height */
+    min-height: 320px; /* reduced from 420px */
     display: flex;
     flex-direction: column;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -346,29 +349,45 @@
 .template-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0,0,0,0.18);
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
 }
 
 .template-card.selected {
-    border-color: #667eea;
+    border: 3px solid #e9edf2 !important; /* Thicker selected border */
     box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
     transform: translateY(-6px);
 }
 
-/* Template Heights with A4 proportions */
+/* Template Heights - Masonry Zigzag Layout */
 .template-tall {
-    min-height: 800px; /* Increased from 700px */
-    padding: 25px 20px; /* Further reduced padding to increase content width more */
+    grid-row: span 5; /* 5 rows = 800px (5 * 160px) - tallest */
+    min-height: 800px;
+    padding: 20px 18px;
 }
 
 .template-medium {
-    min-height: 650px; /* Increased from 550px */
-    padding: 20px 15px; /* Further reduced padding to increase content width more */
+    grid-row: span 3; /* 3 rows = 480px (3 * 160px) - medium */
+    min-height: 500px;
+    padding: 18px 15px;
 }
 
 .template-small {
-    min-height: 550px; /* Increased from 480px */
-    padding: 15px 10px; /* Further reduced padding to increase content width more */
+    grid-row: span 2; /* 2 rows = 320px (2 * 160px) - smallest */
+    min-height: 350px;
+    padding: 12px 8px;
+}
+
+/* Masonry Zigzag Effect - Alternating Heights */
+.template-card:nth-child(odd) {
+    transform: translateY(10px);
+}
+
+.template-card:nth-child(even) {
+    transform: translateY(-5px);
+}
+
+.template-card:hover {
+    transform: translateY(-8px) !important;
 }
 
 /* Enhanced Template Content Styles */
@@ -404,7 +423,7 @@
     right: 0;
     width: 120px;
     height: 120px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     border-radius: 50%;
     transform: translate(30px, -30px);
     opacity: 0.1;
@@ -417,7 +436,7 @@
 }
 
 .newsletter-header h2 {
-    color: #667eea;
+    color: #e9edf2; /* New light blue-grey theme */
     font-size: 22px;
     margin-bottom: 25px;
     font-weight: 700;
@@ -445,7 +464,7 @@
 }
 
 .newsletter-section h4 {
-    color: #667eea;
+    color: #e9edf2; /* New light blue-grey theme */
     font-size: 20px;
     margin-bottom: 18px;
     font-weight: 600;
@@ -466,7 +485,7 @@
 }
 
 .cta-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     border: none;
     padding: 15px 35px;
@@ -520,14 +539,14 @@
     border-radius: 12px;
     overflow: hidden;
     margin-bottom: 30px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
 .preview-hero-image {
     width: 100%;
     height: 100%;
-    background: linear-gradient(45deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     position: relative;
 }
 
@@ -712,7 +731,7 @@
     margin-bottom: 15px;
     text-shadow: none; /* Removed shadow since no background */
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    color: #ff8c00; /* Orange color for title */
+    color: #e9edf2; /* New light blue-grey theme */ /* Our theme color */
     line-height: 1.2;
     padding: 0 10px;
     word-wrap: break-word;
@@ -775,7 +794,7 @@
 
 /* Sample Template - Enhanced with Image and Orange Text */
 .sample-preview {
-    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); /* Our theme colors */
     border-radius: 16px;
     padding: 20px; /* Further reduced padding to increase content width more */
     height: 100%;
@@ -807,7 +826,7 @@
     text-align: center;
     margin-bottom: 30px;
     position: relative;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Changed from black to beautiful blue-purple gradient */
+    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); /* Darker background for better text visibility */
     border-radius: 12px;
     padding: 20px; /* Reduced padding to increase width more */
     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
@@ -818,39 +837,39 @@
     height: 0;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
-    border-bottom: 26px solid #ff8c00; /* Changed to orange to match text color */
+    border-bottom: 26px solid #e9edf2; /* New light blue-grey theme */
     margin: 0 auto 20px;
 }
 
 .preview-company-name {
     font-size: 22px;
     font-weight: 800;
-    color: #ffffff; /* Changed to white as requested */
+    color: #000000 !important; /* Black text for better visibility on light background */
     line-height: 1.2;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    text-shadow: 0 1px 2px rgba(255,255,255,0.8); /* Light shadow for contrast */
 }
 
 .preview-title {
     font-size: 24px;
     font-weight: 700;
-    color: #ffffff !important; /* Changed to white as requested with !important */
+    color: #000000 !important; /* Black text for better visibility on light background */
     margin: 15px 0;
     text-transform: uppercase;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    text-shadow: 0 1px 2px rgba(255,255,255,0.8); /* Light shadow for contrast */
 }
 
 .preview-for-sale {
     font-size: 16px;
     font-weight: 600;
-    color: #ffffff; /* Changed to white for better contrast on gradient */
+    color: #000000; /* Black text for better visibility on light background */
     text-transform: uppercase;
     letter-spacing: 0.5px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
+    text-shadow: 0 1px 2px rgba(255,255,255,0.8); /* Light shadow for contrast */
 }
 
 .preview-content {
@@ -864,7 +883,7 @@
     background: white;
     padding: 20px;
     border-radius: 12px;
-    border: 1px solid #fed7d7;
+    border: 1px solid #e2e8f0; /* Our theme color */
     box-shadow: 0 3px 10px rgba(0,0,0,0.08);
 }
 
@@ -924,7 +943,7 @@
     text-align: center;
     margin-bottom: 35px;
     padding: 20px; /* Reduced padding to increase width */
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Changed to blue-purple gradient to match 4th grid */
+    background: #e9edf2; /* New light blue-grey theme */ /* Changed to blue-purple gradient to match 4th grid */
     border-radius: 12px;
     color: white;
     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
@@ -1090,8 +1109,8 @@
 }
 
 .template-saintbarts {
-    background: #fff5f5;
-    border: 1px solid #fed7d7;
+    background: #f8fafc; /* Our theme color */
+    border: 1px solid #e2e8f0; /* Our theme color */
     box-shadow: 0 7px 22px rgba(0,0,0,0.11);
     padding: 35px 30px;
 }
@@ -1142,7 +1161,7 @@
 }
 
 .newsletter-header h2 {
-    color: #667eea;
+    color: #e9edf2; /* New light blue-grey theme */
     font-size: 18px;
     margin-bottom: 15px;
     font-weight: 600;
@@ -1178,7 +1197,7 @@
 }
 
 .preview-header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     padding: 20px;
     border-radius: 12px;
@@ -1229,7 +1248,7 @@
 }
 
 .preview-section-title {
-    color: #667eea;
+    color: #e9edf2; /* New light blue-grey theme */
     font-size: 10px;
     font-weight: bold;
     margin-bottom: 6px;
@@ -1251,7 +1270,7 @@
 .preview-icon {
     width: 16px;
     height: 16px;
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -1261,7 +1280,7 @@
 }
 
 .preview-contact {
-    color: #667eea;
+    color: #e9edf2; /* New light blue-grey theme */
     font-size: 8px;
     font-weight: bold;
 }
@@ -1286,7 +1305,7 @@
 }
 
 .preview-price-section {
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     padding: 12px;
     border-radius: 6px;
@@ -1334,7 +1353,7 @@
     background: #2c3e50;
     border: 1px solid #34495e;
     box-shadow: 0 8px 25px rgba(0,0,0,0.2);
-    padding: 30px 25px;
+    padding: 20px 18px; /* reduced from 30px 25px */
     color: white;
 }
 
@@ -1538,7 +1557,7 @@
     position: absolute;
     top: 20px;
     right: 20px;
-    background: #667eea;
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     padding: 10px 15px;
     border-radius: 25px;
@@ -1640,7 +1659,7 @@
 }
 
 .btn-primary {
-    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     box-shadow: 
         0 1px 3px rgba(0, 0, 0, 0.12),
@@ -1788,7 +1807,7 @@
 }
 
 .source-tab.active {
-    color: #4f46e5;
+    color: #e9edf2; /* New light blue-grey theme */
     background: rgba(79, 70, 229, 0.05);
 }
 
@@ -1799,7 +1818,7 @@
     left: 0;
     right: 0;
     height: 2px;
-    background: #4f46e5;
+    background: #e9edf2; /* New light blue-grey theme */
     border-radius: 1px;
 }
 
@@ -1830,9 +1849,9 @@
 }
 
 .category-btn-replacement.active {
-    background: #4f46e5;
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
 }
 
 /* Image Grid */
@@ -1855,7 +1874,7 @@
 }
 
 .replacement-image-item:hover {
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(79, 70, 229, 0.15);
 }
@@ -1904,7 +1923,7 @@
 }
 
 .upload-dropzone:hover {
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     background: #f0f4ff;
 }
 
@@ -2084,7 +2103,7 @@
 
 .template-name-input:focus {
     outline: none;
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }
 
@@ -2108,7 +2127,7 @@
 }
 
 .saved-template-item:hover {
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     background: #f0f4ff;
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
@@ -2193,7 +2212,7 @@
 
 .html-textarea:focus {
     outline: none;
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }
 
@@ -2518,7 +2537,7 @@
 }
 
 .property-field:hover {
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
 }
 
@@ -2587,7 +2606,7 @@
     margin: 0 0 1.5rem 0;
     color: #2c3e50;
     text-align: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -2996,7 +3015,7 @@
 
 .checkbox-item:hover {
     background: white;
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
 }
@@ -3016,8 +3035,8 @@
 }
 
 .checkbox-item input[type="checkbox"]:checked + .checkmark {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-color: #667eea;
+    background: #e9edf2; /* New light blue-grey theme */
+    border-color: #e9edf2; /* New light blue-grey theme */
 }
 
 .checkbox-item input[type="checkbox"]:checked + .checkmark::after {
@@ -3194,7 +3213,7 @@
 
 .property-dropdown:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
 }
 
 /* Editor Container */
@@ -3418,7 +3437,7 @@
     top: -30px;
     left: 50%;
     transform: translateX(-50%);
-    background: #667eea;
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     padding: 5px 15px;
     border-radius: 15px;
@@ -3434,7 +3453,7 @@
 
 .preview-header {
     margin-bottom: 20px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     padding: 20px;
     border-radius: 12px;
@@ -3513,7 +3532,7 @@
 .preview-price {
     font-size: 18px;
     font-weight: 700;
-    color: #ff6b35;
+    color: #e9edf2; /* New light blue-grey theme */ /* Our theme color */
     margin-bottom: 10px;
 }
 
@@ -3591,7 +3610,7 @@
 }
 
 .preview-hero {
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     padding: 20px;
     border-radius: 8px;
@@ -4007,9 +4026,10 @@
     }
     
     .template-grid {
-        /* Grid removed - using default layout */
-        gap: 25px;
-        padding: 30px 15px;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-auto-rows: 180px;
+        gap: 20px;
+        padding: 25px 15px;
     }
     
     .step-content {
@@ -4041,7 +4061,8 @@
     
     .template-grid {
         grid-template-columns: 1fr;
-        gap: 20px;
+        grid-auto-rows: 160px;
+        gap: 15px;
         padding: 20px 15px;
     }
     
@@ -4354,7 +4375,7 @@
 
 .property-detail-label {
     font-weight: 600;
-    color: #667eea;
+    color: #e9edf2; /* New light blue-grey theme */
     margin-bottom: 5px;
     font-size: 0.9rem;
 }
@@ -4401,7 +4422,7 @@
 }
 
 .editable-area:hover {
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
 }
 
 .editable-area h3 {
@@ -4443,16 +4464,16 @@
 
 @media (max-width: 768px) {
     .step-header-gradient {
-        padding: 30px 20px;
-        margin: -15px -15px 25px -15px;
+        padding: 12px 15px;
+        margin: -15px -15px 15px -15px;
     }
     
     .main-title {
-        font-size: 3rem;
+        font-size: 1.8rem;
     }
     
     .subtitle {
-        font-size: 1.3rem;
+        font-size: 0.9rem;
 }
 
     .step-navigation {
@@ -4468,6 +4489,7 @@
     
     .template-grid {
         grid-template-columns: 1fr;
+        grid-auto-rows: 150px;
         gap: 1.5rem;
 }
 
@@ -4486,7 +4508,7 @@
     }
     
     .subtitle {
-        font-size: 1.2rem;
+        font-size: 0.85rem;
 }
     
 
@@ -4550,7 +4572,7 @@
 }
 
 .template-preview-frame::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     border-radius: 4px;
 }
 
@@ -4559,7 +4581,7 @@
 }
 
 .pdf-preview-header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     padding: 20px 30px;
     display: flex;
@@ -4696,7 +4718,7 @@
 
 .property-selector select:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
@@ -4807,7 +4829,7 @@
 
 .export-pdf-btn {
     background: transparent;
-    color: #667eea;
+    color: #e9edf2; /* New light blue-grey theme */
     border: 2px solid #667eea;
     padding: 12px 24px;
     border-radius: 25px;
@@ -4827,7 +4849,7 @@
 }
 
 .export-pdf-btn:hover {
-    background: #667eea;
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     transform: translateY(-2px);
     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
@@ -4896,7 +4918,7 @@
 }
 
 .field-item:hover {
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
 }
 
@@ -5118,7 +5140,7 @@
 }
 
 .image-review-header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     padding: 20px 30px;
     display: flex;
@@ -5162,8 +5184,8 @@
 
 .category-btn:hover,
 .category-btn.active {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-color: #667eea;
+    background: #e9edf2; /* New light blue-grey theme */
+    border-color: #e9edf2; /* New light blue-grey theme */
     color: white;
     transform: translateY(-1px);
 }
@@ -5372,7 +5394,7 @@
     right: 10px;
     width: 4px;
     height: 30px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     border-radius: 2px;
     opacity: 0;
     transition: opacity 0.3s ease;
@@ -5386,7 +5408,7 @@
     right: 10px;
     width: 4px;
     height: 30px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     border-radius: 2px;
     opacity: 0;
     transition: opacity 0.3s ease;
@@ -5410,7 +5432,7 @@
     color: #2c3e50;
     margin-bottom: 15px;
     text-align: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -5485,7 +5507,7 @@
     transform: translateY(-50%);
     width: 4px;
     height: 40px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     border-radius: 2px;
     opacity: 0;
     transition: opacity 0.3s ease;
@@ -5586,7 +5608,7 @@
 }
 
 .enhanced-toolbar .toolbar-group select:hover {
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
@@ -5600,7 +5622,7 @@
 }
 
 .enhanced-toolbar .toolbar-group input[type="color"]:hover {
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
@@ -5746,8 +5768,8 @@
 }
 
 .doc-action-btn.preview-btn:hover {
-    background: #667eea;
-    border-color: #667eea;
+    background: #e9edf2; /* New light blue-grey theme */
+    border-color: #e9edf2; /* New light blue-grey theme */
     color: white;
 }
 
@@ -5782,7 +5804,7 @@
 }
 
 .generate-pdf-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     border: none;
     padding: 12px 24px;
@@ -6055,7 +6077,7 @@
 
 .draggable-element:hover,
 .draggable-element.selected {
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     background: rgba(102, 126, 234, 0.1);
     box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
 }
@@ -6073,7 +6095,7 @@
 /* Resize Handles */
 .resize-handle {
     position: absolute;
-    background: #667eea;
+    background: #e9edf2; /* New light blue-grey theme */
     border: 1px solid white;
     width: 8px;
     height: 8px;
@@ -6148,7 +6170,7 @@
 
 .enhanced-editor-content:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
@@ -6368,7 +6390,7 @@
 }
 
 .export-pdf-btn {
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     border: none;
     padding: 12px 24px;
@@ -6433,7 +6455,7 @@
 }
 
 .export-pdf-btn {
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     border: none;
     padding: 12px 24px;
@@ -6508,7 +6530,7 @@
 
 /* Subtle border animation on hover */
 .enhanced-toolbar:hover {
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
 }
 
@@ -6559,7 +6581,7 @@
 
 .page-size-option:hover {
     background: #e9ecef;
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
 }
@@ -6573,8 +6595,8 @@
 }
 
 .page-size-option:has(input:checked) {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-color: #667eea;
+    background: #e9edf2; /* New light blue-grey theme */
+    border-color: #e9edf2; /* New light blue-grey theme */
     color: white;
     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
@@ -6633,7 +6655,7 @@
 }
 
 .popup-header {
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     padding: 20px;
     border-radius: 12px 12px 0 0;
@@ -6698,7 +6720,7 @@
 
 .form-control:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
@@ -6739,7 +6761,7 @@
 }
 
 .popup-actions .btn-primary {
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
 }
 
@@ -6844,7 +6866,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
     right: -8px;
     width: 24px;
     height: 24px;
-    background: #667eea;
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     border-radius: 50%;
     cursor: se-resize;
@@ -7110,7 +7132,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 
 /* Sample Template Preview Styles */
 .template-sample {
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     border: 1px solid #5a6fd8;
     box-shadow: 0 6px 20px rgba(102,126,234,0.15);
     padding: 30px 25px;
@@ -7125,7 +7147,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 }
 
 .preview-header {
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
     padding: 20px;
     border-radius: 8px;
@@ -7182,7 +7204,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 }
 
 .preview-section-title {
-    color: #667eea;
+    color: #e9edf2; /* New light blue-grey theme */
     font-size: 11px;
     font-weight: bold;
     margin-bottom: 6px;
@@ -7204,7 +7226,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 .preview-icon {
     width: 20px;
     height: 20px;
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #e9edf2; /* New light blue-grey theme */
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -7555,7 +7577,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 
 .preview-hero-section {
     height: 65%;
-    background: linear-gradient(135deg, #000000 0%, #333333 100%);
+    background: #e9edf2; /* New light blue-grey theme */ /* Our theme color */
     position: relative;
     border-radius: 12px 12px 0 0;
     overflow: hidden;
@@ -7668,7 +7690,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 
 .preview-hero {
     height: 50%;
-    background: linear-gradient(135deg, #000000 0%, #333333 100%);
+    background: #e9edf2; /* New light blue-grey theme */ /* Our theme color */
     position: relative;
     border-radius: 12px 12px 0 0;
     overflow: hidden;
@@ -7784,7 +7806,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 
 .preview-header {
     height: 50%;
-    background: linear-gradient(135deg, #000000 0%, #333333 100%);
+    background: #e9edf2; /* New light blue-grey theme */ /* Our theme color */
     position: relative;
     border-radius: 12px 12px 0 0;
     overflow: hidden;
@@ -7897,7 +7919,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 
 .preview-luxury-header {
     height: 45%;
-    background: linear-gradient(135deg, #000000 0%, #333333 100%);
+    background: #e9edf2; /* New light blue-grey theme */ /* Our theme color */
     position: relative;
     border-radius: 12px 12px 0 0;
     overflow: hidden;
@@ -8083,7 +8105,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 
 .table-input:focus {
     outline: none;
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }
 
@@ -8193,7 +8215,7 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 }
 
 .editable-table-container:hover {
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
 }
 
@@ -8491,13 +8513,13 @@ ol li:before {
 }
 
 .tab-btn.active {
-    color: #4f46e5;
+    color: #e9edf2; /* New light blue-grey theme */
     border-bottom-color: #4f46e5;
     background: #f0f4ff;
 }
 
 .tab-btn:hover {
-    color: #4f46e5;
+    color: #e9edf2; /* New light blue-grey theme */
     background: #f9fafb;
 }
 
@@ -8525,9 +8547,9 @@ ol li:before {
 }
 
 .category-btn.active {
-    background: #4f46e5;
+    background: #e9edf2; /* New light blue-grey theme */
     color: white;
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
 }
 
 .category-btn:hover {
@@ -8554,12 +8576,12 @@ ol li:before {
 }
 
 .property-image-item:hover {
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     transform: scale(1.02);
 }
 
 .property-image-item.selected {
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
 }
 
@@ -8606,12 +8628,12 @@ ol li:before {
 }
 
 .upload-area:hover {
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     background: #f0f4ff;
 }
 
 .upload-area.dragover {
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     background: #e0e7ff;
 }
 
@@ -8657,7 +8679,7 @@ ol li:before {
 }
 
 .draggable-image-container.selected {
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
 }
 
@@ -8670,7 +8692,7 @@ ol li:before {
 
 .resize-handle {
     position: absolute;
-    background: #4f46e5;
+    background: #e9edf2; /* New light blue-grey theme */
     border: 2px solid white;
     border-radius: 50%;
     width: 12px;
@@ -8727,7 +8749,7 @@ ol li:before {
 }
 
 .draggable-table-container.selected {
-    border-color: #4f46e5;
+    border-color: #e9edf2; /* New light blue-grey theme */
     box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
 }
 
@@ -8807,7 +8829,7 @@ ol li:before {
 }
 
 .pdf-download-modal {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #e9edf2; /* New light blue-grey theme */
     border-radius: 20px;
     padding: 30px;
     max-width: 600px;
diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html
index 1c7746a..10fde46 100644
--- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html
+++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html
@@ -199,8 +199,8 @@
                         <div class="preview-header">
                             <div class="preview-triangle"></div>
                             <div class="preview-company">
-                                <div class="preview-company-name" style="color: #ff6b35;">THE SERENITY</div>
-                                <div class="preview-company-name" style="color: #ff6b35;">HOUSE</div>
+                                <div class="preview-company-name" style="color: #000000;">THE SERENITY</div>
+                                <div class="preview-company-name" style="color: #000000;">HOUSE</div>
                             </div>
                             <div class="preview-title">PEACEFUL RETREAT</div>
                             <div class="preview-for-sale">LUXURY HOUSE</div>
@@ -247,7 +247,7 @@
                     onclick={handleTemplateSelect}>
                     <div class="template-content luxury-preview">
                         <div class="preview-luxury-header">
-                            <div class="preview-luxury-logo" style="color: #ff6b35;">THE VERTICE</div>
+                            <div class="preview-luxury-logo" style="color: #e9edf2;">THE VERTICE</div>
                             <div class="preview-luxury-title" style="color: white;">Modern Urban Residence</div>
                             <div class="preview-luxury-subtitle" style="color: white;">Contemporary Living</div>
                         </div>