diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css index 73a6ab0..6871a42 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css @@ -1,14 +1,12 @@ .property-brochure-generator { /* International Standard Font Stack - 2024 Best Practices */ font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, 'Roboto', 'Helvetica Neue', Arial, sans-serif; - background: - radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%), - linear-gradient(135deg, #f8fafc 0%, #f1f5f9 25%, #e2e8f0 50%, #cbd5e1 100%); + background: transparent; min-height: 100vh; padding: 0; margin: 0; + max-width: 95%; + margin: 0 auto; /* Industry Standard Base Font Size - 16px (1rem) */ font-size: 1rem; /* Optimal Line Height for Readability (WCAG AA) */ @@ -25,25 +23,26 @@ text-rendering: optimizeLegibility; } +/* Hide Salesforce page title and icon */ +.slds-page-header, +.slds-page-header__title, +.slds-page-header__name, +.slds-page-header__meta { + display: none !important; +} + /* Header Section */ .header-section { - background: - linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%), - linear-gradient(135deg, #4f46e5 0%, #7c3aed 25%, #ec4899 75%, #f97316 100%); + background: #f8f9fa !important; + color: #000000 !important; padding: 4rem 2rem; text-align: center; margin-bottom: 0; position: relative; overflow: hidden; border-radius: 24px; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 8px 32px rgba(79, 70, 229, 0.15), - 0 20px 60px rgba(124, 58, 237, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.1); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border: 1px solid #e9ecef; } @@ -63,16 +62,17 @@ -/* Beautiful Purple Gradient Header for All Steps */ +/* Consistent Header for All Steps */ .step-header-gradient { - background: #e9edf2; /* New light blue-grey theme */ + background: #f8f9fa !important; border-radius: 0 0 12px 12px; padding: 15px 20px; margin: 0 0 15px 0; text-align: center; - box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; + border: 1px solid #e9ecef; } .step-header-gradient::before { @@ -95,11 +95,11 @@ /* Optimal Letter Spacing for Large Headings */ letter-spacing: -0.025em; position: relative; - z-index: 3; + z-index: 100; /* WCAG AA Compliant Line Height for Headings */ line-height: 1.2; - color: #000000; /* Black text color */ - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + color: #000000 !important; /* Black text color */ + text-shadow: none !important; /* Variable Font Weight for Modern Browsers */ font-variation-settings: 'wght' 700; } @@ -116,7 +116,7 @@ margin: 0; position: relative; z-index: 3; - color: #000000; /* Black text color */ + color: #000000 !important; /* Black text color */ /* Moderate Letter Spacing for Subheadings */ letter-spacing: 0.015em; text-transform: uppercase; @@ -180,73 +180,81 @@ .step-navigation { display: flex; justify-content: center; - 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: 15px; /* reduced from 20px */ - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 8px 32px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); + gap: 0; + padding: 0; + background: #f8f9fa !important; + margin: 0 auto; + border-radius: 6px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border: 1px solid #e9ecef; + border: 1px solid #e0e0e0; + backdrop-filter: none; + -webkit-backdrop-filter: none; margin-top: 0; margin-bottom: 0; + overflow: hidden; + max-width: 50%; } .step-nav-item { display: flex; flex-direction: column; align-items: center; - gap: 0.3rem; /* reduced from 0.5rem */ + gap: 0.25rem; cursor: pointer; - padding: 0.7rem; /* reduced from 1rem */ - border-radius: 8px; + padding: 0.75rem 1rem; + border-radius: 0; transition: all 0.3s ease; - min-width: 100px; /* reduced from 120px */ + flex: 1; + position: relative; + background: #ffffff !important; + border-right: 1px solid #e9ecef; } .step-nav-item:hover { - background: #f8f9fa; + background: #f8f9fa !important; +} +late particularay +.step-nav-item.active { + background: #6b7280 !important; + color: white !important; + transform: none; + box-shadow: none; + border: none; } -.step-nav-item.active { - background: #e9edf2; /* New light blue-grey theme */ - color: white; - transform: translateY(-2px) scale(1.05); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.15), - 0 8px 32px rgba(79, 70, 229, 0.25), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - border: 1px solid rgba(255, 255, 255, 0.1); +.step-nav-item:last-child { + border-right: none; } .step-number { - width: 32px; /* reduced from 40px */ - height: 32px; /* reduced from 40px */ + width: 20px; + height: 20px; border-radius: 50%; - background: #e9ecef; - color: #000000; /* Black text color */ + background: rgba(255, 255, 255, 0.3); + color: #000000 !important; display: flex; align-items: center; justify-content: center; font-weight: 600; - font-size: 0.9rem; /* reduced from 1.1rem */ + font-size: 0.8rem; transition: all 0.3s ease; + position: relative; + z-index: 2; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .step-nav-item.active .step-number { background: rgba(255, 255, 255, 0.2); - color: #000000; /* Black text color */ + color: #000000 !important; } .step-label { - font-size: 0.8rem; /* reduced from 0.9rem */ + font-size: 0.7rem; font-weight: 500; text-align: center; - color: #000000; /* Black text color */ + color: #000000 !important; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; } /* Step Content */ @@ -255,6 +263,7 @@ max-width: 1400px; margin: 0 auto 0 auto; padding: 0 3rem 2rem 3rem; + background: transparent; } .step-content.active { @@ -316,45 +325,47 @@ letter-spacing: 0.01em; } -/* Template Grid - Masonry Layout with Zigzag Heights */ +/* Template Grid - Enhanced Modern Layout */ .template-grid { display: grid; - 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; + grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); + grid-auto-rows: 200px; + gap: 35px; + padding: 30px 25px; + max-width: 1800px; margin: 0 auto; + background: transparent; } /* Template Cards - Enhanced with A4 proportions and better visibility */ .template-card { - background: white; - border-radius: 20px; - padding: 20px; /* Further reduced padding to increase content width more */ + background: #ffffff; + border-radius: 24px; + padding: 25px; cursor: pointer; - transition: all 0.4s ease; - /* Masonry positioning */ + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; - border: 1px solid transparent; /* Thinner border */ - box-shadow: 0 8px 25px rgba(0,0,0,0.12); + border: 2px solid #e9ecef; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); overflow: hidden; - min-height: 320px; /* reduced from 420px */ + min-height: 200px; display: flex; flex-direction: column; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - width: 100%; /* Ensure full width usage */ + width: 100%; + backdrop-filter: blur(10px); } .template-card:hover { - transform: translateY(-10px); - box-shadow: 0 15px 40px rgba(0,0,0,0.18); - border-color: #e9edf2; /* New light blue-grey theme */ + transform: translateY(-12px) scale(1.02); + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); + border-color: #C0A062; + background: #ffffff; } .template-card.selected { - border: 3px solid #e9edf2 !important; /* Thicker selected border */ - box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); + border: 3px solid #000000 !important; /* Black selected border */ + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transform: translateY(-6px); } @@ -408,9 +419,10 @@ flex-direction: column; justify-content: center; height: 100%; - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + background: #f8f9fa; + border: 0.5px dashed #dee2e6; border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ + padding: 40px 20px; position: relative; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; @@ -423,7 +435,7 @@ right: 0; width: 120px; height: 120px; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border-radius: 50%; transform: translate(30px, -30px); opacity: 0.1; @@ -436,37 +448,37 @@ } .newsletter-header h2 { - color: #e9edf2; /* New light blue-grey theme */ - font-size: 22px; - margin-bottom: 25px; - font-weight: 700; + color: #6c757d; + font-size: 16px; + margin-bottom: 20px; + font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .newsletter-main h1 { - color: #2c3e50; - font-size: 32px; - margin-bottom: 25px; - font-weight: 800; + color: #212529; + font-size: 24px; + margin-bottom: 30px; + font-weight: 700; line-height: 1.2; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .newsletter-main p { - color: #5a6c7d; - font-size: 17px; - margin-bottom: 30px; - font-weight: 500; + color: #6c757d; + font-size: 14px; + margin-bottom: 35px; + font-weight: 400; line-height: 1.6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .newsletter-section h4 { - color: #e9edf2; /* New light blue-grey theme */ - font-size: 20px; - margin-bottom: 18px; + color: #495057; + font-size: 14px; + margin-bottom: 20px; font-weight: 600; text-transform: uppercase; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; @@ -474,18 +486,34 @@ .newsletter-section p { color: #6c757d; - font-size: 16px; + font-size: 12px; margin-bottom: 30px; - line-height: 1.6; + line-height: 1.5; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .cta-buttons { - margin-top: auto; + margin-top: 20px; } .cta-btn { - background: #e9edf2; /* New light blue-grey theme */ + background: #007bff; + color: white; + border: none; + padding: 12px 24px; + border-radius: 6px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.cta-btn:hover { + background: #0056b3; +} + +.cta-btn { + background: #007bff; color: white; border: none; padding: 15px 35px; @@ -507,156 +535,209 @@ /* Modern Home Template - Enhanced with Image */ .modern-home-preview { - background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ + background: #ffffff; + border-radius: 8px; + padding: 0; height: 100%; position: relative; overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.modern-home-preview::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 100px; - height: 100px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.modern-home-preview > * { - position: relative; - z-index: 1; -} - -.preview-hero-section { - position: relative; - height: 160px; - border-radius: 12px; - overflow: hidden; - margin-bottom: 30px; - 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: #e9edf2; /* New light blue-grey theme */ - position: relative; -} - -.preview-hero-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0,0,0,0.2); + font-family: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; - justify-content: center; - align-items: center; - color: white; - text-align: center; - padding: 30px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); } -.preview-property-name { - font-size: 22px; - font-weight: 700; - margin-bottom: 10px; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} -.preview-property-address { - font-size: 16px; - opacity: 0.9; - margin-bottom: 12px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} -.preview-price { - font-size: 24px; - font-weight: 800; - color: #ffd700; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-content-section { - flex: 1; +/* Hero Section */ +.hero { + height: 45%; + background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200'); + background-size: cover; + background-position: center; + position: relative; + color: #ffffff; display: flex; flex-direction: column; - gap: 20px; + justify-content: flex-end; + border-radius: 8px 8px 0 0; } -.preview-stats { +.hero-overlay { + background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 100%); + padding: 15px; +} + +.property-name { + font-size: 1.6rem; + font-weight: 900; + margin: 0; + line-height: 1.1; + color: #ffffff; +} + +.property-address { + font-size: 12px; + font-weight: 400; + margin: 4px 0 12px 0; + color: #ffffff; + border-left: 2px solid #f39c12; + padding-left: 8px; +} + +.hero-details { display: flex; - justify-content: space-around; gap: 15px; - margin-bottom: 20px; + align-items: center; + flex-wrap: wrap; } -.preview-stat { - background: #f8f9fa; - padding: 12px 18px; - border-radius: 20px; - font-size: 15px; - font-weight: 600; - color: #495057; - border: 1px solid #e9ecef; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-description { - background: #f8f9fa; - padding: 20px; - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); -} - -.preview-title { +.price { font-size: 18px; font-weight: 700; - color: #495057; - margin-bottom: 12px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: #f39c12; } -.preview-text { - font-size: 16px; - color: #6c757d; - line-height: 1.5; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-features { +.stats { display: flex; - justify-content: space-around; - gap: 15px; - margin-top: auto; + gap: 10px; + font-size: 9px; + font-weight: 700; } -.feature-item { +.stat-item { + display: flex; + align-items: center; + gap: 4px; +} + +.content { + padding: 20px; + flex-grow: 1; display: flex; flex-direction: column; - align-items: center; - gap: 8px; - text-align: center; + justify-content: space-between; } -.feature-icon { - font-size: 24px; +.description h2 { + font-size: 16px; + font-weight: 700; + color: #212529; + margin: 0 0 8px 0; } +.description p { + font-size: 12px; + line-height: 1.5; + color: #6c757d; + margin: 0 0 15px 0; +} + +.specs-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + margin: 15px 0; +} + +.spec-item { + display: flex; + justify-content: space-between; + padding: 4px 0; + font-size: 11px; + border-bottom: 1px solid #eee; +} + +.spec-item strong { + font-weight: 700; + color: #333333; +} + +.spec-item span { + color: #666666; +} + +.amenities-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 6px; + margin: 15px 0; +} + +.amenity-item { + background-color: #ffffff; + padding: 6px 10px; + display: flex; + align-items: center; + gap: 6px; + border: 1px solid #e8e8e8; + border-radius: 4px; + font-size: 8px; +} + +.amenity-item .icon { + width: 12px; + height: 12px; + background-color: #f39c12; + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 6px; + flex-shrink: 0; +} + +.agent-footer { + border-top: 2px solid #f39c12; + padding-top: 12px; + margin-top: 15px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.agent-info h3 { + margin: 0 0 3px 0; + font-size: 12px; + font-weight: 700; + color: #333333; +} + +.agent-info p { + margin: 0; + font-size: 9px; + color: #666666; +} + +.agent-contact-details { + text-align: right; +} + +.agent-contact-details p { + font-size: 9px; + font-weight: 700; + color: #003366; + margin: 2px 0; +} + +.page-footer { + margin-top: auto; + background-color: #003366; + color: #ffffff; + padding: 12px 20px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 8px; +} + +.page-footer strong { + color: #f39c12; +} + + + .feature-text { font-size: 14px; font-weight: 600; @@ -666,80 +747,293 @@ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } -/* Asgar1 Template - Enhanced with Image and Fixed Viewport */ + + +/* Grand Oak Villa Template - Exact Match to Preview */ .asgar1-preview { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ + background: #ffffff; + border-radius: 8px; + padding: 0; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: 'Montserrat', sans-serif; + gap: 10px; + min-height: 320px; + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); } -.asgar1-preview::before { - content: ''; - position: absolute; - top: 20px; - right: 20px; - width: 120px; - height: 120px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.asgar1-preview > * { - position: relative; - z-index: 1; -} - -.preview-hero { - height: auto; - background: none; /* Removed background completely */ - border-radius: 0; - margin-bottom: 30px; - position: relative; - overflow: visible; - box-shadow: none; /* Removed shadow */ - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 20px; /* Added top margin to bring title into viewport */ - padding: 20px 0; -} - -.preview-hero-overlay { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - color: white; - text-align: center; - padding: 20px; +/* Grand Oak Villa Styles */ +.asgar1-preview .brochure-page { width: 100%; height: 100%; + background-color: #ffffff; + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + overflow: hidden; + border-radius: 8px; } -.preview-property-name { - font-size: 28px; - font-weight: 800; - margin-bottom: 15px; - text-shadow: none; /* Removed shadow since no background */ - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #e9edf2; /* New light blue-grey theme */ /* Our theme color */ - line-height: 1.2; - padding: 0 10px; - word-wrap: break-word; - max-width: 100%; +.asgar1-preview .cover-page { + position: relative; + background-image: url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200'); + background-size: cover; + background-position: center; + color: #ffffff; + justify-content: space-between; + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.asgar1-preview .cover-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(180deg, rgba(18, 18, 18, 0.8) 0%, rgba(18, 18, 18, 0.3) 100%); +} + +.asgar1-preview .cover-header { + position: relative; + padding: 30px; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 2; +} + +.asgar1-preview .logo { + font-family: 'Playfair Display', serif; + font-size: 1.2rem; + font-weight: 700; + letter-spacing: 1px; + border: 2px solid #ffffff; + padding: 6px 12px; +} + +.property-status { + background-color: #C0A062; + color: #ffffff; + padding: 8px 16px; + font-weight: 600; + font-size: 0.8rem; + text-transform: uppercase; +} + +.asgar1-preview .cover-content { + position: relative; + padding: 30px; + max-width: 70%; + z-index: 2; +} + +.asgar1-preview .cover-title { + font-family: 'Playfair Display', serif; + font-size: 3rem; + font-weight: 700; + line-height: 1.1; + margin: 0 0 10px 0; + color: #ffffff; +} + +.asgar1-preview .cover-address { + font-size: 1rem; + font-weight: 400; + display: flex; + align-items: center; + gap: 8px; + color: #ffffff; + margin: 0; +} + +.cover-address i { + color: #C0A062; +} + +.asgar1-preview .cover-footer { + position: relative; + background-color: rgba(18, 18, 18, 0.9); + padding: 20px 30px; + z-index: 2; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 15px; + text-align: center; +} + +.feature-item { + border-right: 1px solid #2a2a2a; +} + +.feature-item:last-child { + border-right: none; +} + +.feature-item .value { + font-size: 1.2rem; + font-weight: 600; + color: #ffffff; + margin-bottom: 4px; +} + +.feature-item .label { + font-size: 0.7rem; + color: #ffffff; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.content-body { + background-color: #121212; + color: #ffffff; + flex-grow: 1; + padding: 30px; + display: flex; + flex-direction: column; +} + +.page-header { + display: flex; + justify-content: space-between; + align-items: baseline; + padding-bottom: 15px; + margin-bottom: 20px; + border-bottom: 1px solid #2a2a2a; +} + +.page-header .title { + font-family: 'Playfair Display', serif; + font-size: 1.6rem; + color: #ffffff; +} + +.page-header .title span { + color: #C0A062; +} + +.page-header .property-name { + font-size: 0.8rem; + font-weight: 600; + color: #ffffff; +} + +.section-title { + font-weight: 600; + font-size: 0.9rem; + color: #ffffff; + margin: 0 0 15px 0; text-transform: uppercase; letter-spacing: 1px; + position: relative; + padding-bottom: 6px; } +.section-title::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 30px; + height: 2px; + background-color: #C0A062; +} + +.main-content { + flex-grow: 1; +} + +.details-grid { + display: flex; + flex-direction: column; + gap: 10px; +} + +.description p { + font-size: 0.6rem; + line-height: 1.6; + margin: 0 0 8px 0; + color: #ffffff; +} + +.specs-and-amenities { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; +} + +.spec-list .item { + display: flex; + justify-content: space-between; + font-size: 0.6rem; + padding: 4px 0; + border-bottom: 1px solid #2a2a2a; +} + +.spec-list .item:first-child { + padding-top: 0; +} + +.spec-list .item .key { + font-weight: 600; + color: #ffffff; +} + +.spec-list .item .value { + font-weight: 400; + color: #ffffff; +} + +.amenities-list { + list-style: none; + padding: 0; + margin: 0; + columns: 1; + gap: 4px; +} + +.amenities-list li { + font-size: 0.6rem; + margin-bottom: 4px; + display: flex; + align-items: center; +} + +.amenities-list i { + color: #C0A062; + margin-right: 8px; + font-size: 0.8rem; +} + +.page-footer { + background-color: #0A0A0A; + padding: 15px 30px; + font-size: 0.8rem; + color: #ffffff; + border-top: 1px solid #2a2a2a; + display: flex; + justify-content: space-between; + align-items: center; +} + +.page-footer strong { + color: #C0A062; + font-weight: 600; +} + + + + + + + + + .preview-property-address { font-size: 15px; opacity: 0.95; @@ -792,80 +1086,187 @@ gap: 15px; } -/* Sample Template - Enhanced with Image and Orange Text */ +/* Serenity House Template - Enhanced with Elegant Design */ .sample-preview { - background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); /* Our theme colors */ - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ + background: #ffffff; + border-radius: 8px; + padding: 0; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + gap: 10px; + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } -.sample-preview::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 100px; - height: 100px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.sample-preview > * { +/* Serenity House Styles */ +.sample-preview .brochure-page { + width: 100%; + height: 48%; + background-color: #ffffff; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + overflow: hidden; position: relative; - z-index: 1; + border-radius: 6px; } -.preview-header { - text-align: center; - margin-bottom: 30px; - position: relative; - 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); +.sample-preview .p1-container { + display: flex; + height: 100%; } -.preview-triangle { - width: 0; - height: 0; - border-left: 20px solid transparent; - border-right: 20px solid transparent; - border-bottom: 26px solid #e9edf2; /* New light blue-grey theme */ - margin: 0 auto 20px; +.sample-preview .p1-image-side { + flex: 1.2; + background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200'); + background-size: cover; + background-position: center; + border-radius: 6px 0 0 6px; } -.preview-company-name { - font-size: 22px; - font-weight: 800; - color: #000000 !important; /* Black text for better visibility on light background */ - line-height: 1.2; - text-transform: uppercase; +.sample-preview .p1-content-side { + flex: 1; + padding: 20px 15px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.sample-preview .p1-header .collection { + font-size: 0.4rem; letter-spacing: 1px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - text-shadow: 0 1px 2px rgba(255,255,255,0.8); /* Light shadow for contrast */ + color: #777777; + text-transform: uppercase; + margin-bottom: 4px; } -.preview-title { - font-size: 24px; - font-weight: 700; - color: #000000 !important; /* Black text for better visibility on light background */ +.sample-preview .p1-main-title { + font-family: 'Cormorant Garamond', serif; + font-size: 2.2rem; + font-weight: 600; + line-height: 1.1; + color: #333333; margin: 15px 0; - text-transform: uppercase; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - text-shadow: 0 1px 2px rgba(255,255,255,0.8); /* Light shadow for contrast */ } +.sample-preview .p1-address { + font-size: 0.5rem; + color: #777777; + border-left: 2px solid #D4C7B8; + padding-left: 6px; + margin: 0 0 6px 0; +} + +.sample-preview .p1-ref-id { + font-size: 0.4rem; + color: #777777; + margin-top: 4px; + padding-left: 10px; +} + +.sample-preview .p1-footer { + font-size: 0.4rem; + color: #777777; + margin-top: 8px; +} + +.p1-footer strong { + color: #333333; +} + +.sample-preview .p1-footer .area { + font-size: 0.5rem; + color: #333333; + font-weight: 700; + margin-bottom: 3px; +} + +.sample-preview .page-layout { + padding: 20px; + display: flex; + flex-direction: column; + height: 100%; + box-sizing: border-box; +} + +.sample-preview .page-number { + position: absolute; + top: 15px; + right: 15px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 0.5rem; + color: #777777; +} + +.sample-preview .page-title-main { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 1.0rem; + font-weight: 700; + color: #333333; + margin: 0 0 4px 0; + line-height: 1; +} + +.sample-preview .page-title-sub { + font-size: 0.5rem; + color: #777777; + margin-bottom: 12px; +} + +.sample-preview .p2-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; + flex-grow: 1; +} + +.sample-preview .p2-image { + background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); + background-size: cover; + background-position: center; + border-radius: 6px; +} + +.sample-preview .p2-text p { + font-size: 0.5rem; + line-height: 1.5; + color: #777777; +} + +.p2-text p:first-of-type::first-letter { + font-family: 'Cormorant Garamond', serif; + font-size: 1.5rem; + float: left; + line-height: 1; + margin-right: 6px; + color: #D4C7B8; +} + +.pull-quote { + border-left: 2px solid #D4C7B8; + padding-left: 10px; + margin: 10px 0; + font-family: 'Cormorant Garamond', serif; + font-size: 0.7rem; + font-style: italic; + color: #333333; +} + + + + + + + + + .preview-for-sale { font-size: 16px; font-weight: 600; - color: #000000; /* Black text for better visibility on light background */ + color: #000000 !important; /* Black text for better visibility on light background */ text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; @@ -909,41 +1310,260 @@ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); } -/* Luxury Template - Enhanced with Better Text Visibility */ +/* Design System Variables - LWC Compatible */ + +/* The Vertice Template - Enhanced with Modern Urban Design */ .luxury-preview { - background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ + background: #d8d8d8; + border-radius: 8px; + padding: 8px; height: 100%; + width: 100%; display: flex; flex-direction: column; + align-items: center; position: relative; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + gap: 15px; + box-sizing: border-box; } -.luxury-preview::before { +/* The Vertice Styles */ +.luxury-preview .brochure-page { + width: 100%; + height: 220px; + background-color: #ffffff; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + border-radius: 6px; +} + +.luxury-preview .cover-page { + background-image: url('https://plus.unsplash.com/premium_photo-1677474827617-6a7269f97574?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); + background-size: cover; + background-position: center; + color: #ffffff; + border-radius: 6px 6px 0 0; + justify-content: center; + align-items: center; + text-align: center; + position: relative; + flex: 1; +} + +.luxury-preview .cover-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)); + border-radius: 6px 6px 0 0; +} + +.luxury-preview .cover-content { + position: relative; + z-index: 2; + padding: 15px; +} + +.luxury-preview .cover-content .subtitle { + font-size: 0.4rem; + font-weight: 500; + letter-spacing: 1.2px; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.8); +} + +.luxury-preview .cover-content .main-title { + font-size: 2.2rem; + font-weight: 800; + line-height: 1.1; + margin: 8px 0 15px 0; + text-shadow: 0 4px 10px rgba(0,0,0,0.3); + word-wrap: break-word; + overflow-wrap: break-word; + color: #ffffff; +} + +.luxury-preview .cover-content .address { + font-size: 0.4rem; + font-weight: 400; + border-top: 1px solid #0A6847; + display: inline-block; + padding-top: 6px; + word-wrap: break-word; + overflow-wrap: break-word; + max-width: 100%; +} + +.luxury-preview .cover-footer { + position: absolute; + bottom: 12px; + left: 12px; + right: 12px; + z-index: 2; + display: flex; + justify-content: space-between; + font-size: 0.3rem; + font-weight: 500; + word-wrap: break-word; + overflow-wrap: break-word; +} + +.luxury-preview .page-container { + padding: 20px; + height: 100%; + display: flex; + flex-direction: column; + box-sizing: border-box; +} + +.luxury-preview .page-header { + display: flex; + justify-content: space-between; + align-items: baseline; + border-bottom: 1px solid #DDDDDD; + margin-bottom: 6px; +} + +.luxury-preview .page-title { + font-size: 0.8rem; + font-weight: 800; + color: #111111; +} + +.luxury-preview .page-title span { + color: #0A6847; +} + +.luxury-preview .page-subtitle { + font-size: 0.4rem; + font-weight: 500; + color: #ffffff; +} + +.luxury-preview .page-footer-bar { + margin-top: auto; + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 8px; + border-top: 1px solid #DDDDDD; + font-size: 0.4rem; + font-weight: 500; + color: #ffffff; +} + +.page-footer-bar .property-name { + color: #111111; +} + +.luxury-preview .vision-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + flex-grow: 1; + margin-bottom: 6px; +} + +.luxury-preview .vision-image { + background-image: url('https://images.unsplash.com/photo-1626704359446-0de90350b4e7?q=80&w=736&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); + background-size: cover; + background-position: center; + border-radius: 4px; +} + +.luxury-preview .vision-text h3 { + font-size: 0.6rem; + font-weight: 700; + color: #111111; + margin-bottom: 6px; +} + +.luxury-preview .vision-text p { + font-size: 0.4rem; + line-height: 1.4; + color: #ffffff; + margin-bottom: 4px; +} + +.luxury-preview .gallery-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 35px 35px 35px; + gap: 4px; + flex-grow: 1; + padding-top: 3px; +} + +.luxury-preview .gallery-item { + background-size: cover; + background-position: center; + position: relative; + display: flex; + align-items: flex-end; + border-radius: 3px; + color: #ffffff; + padding: 4px; +} + +.luxury-preview .gallery-item::after { content: ''; position: absolute; top: 0; - right: 0; - width: 120px; - height: 120px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); + border-radius: 3px; } -.luxury-preview > * { - position: relative; - z-index: 1; +.luxury-preview .gallery-item span { + font-weight: 600; + z-index: 2; + font-size: 0.25rem; +} + +.g-item-1 { + grid-column: 1 / 3; + grid-row: 1 / 2; + background-image: url('https://images.unsplash.com/photo-1616046229478-9901c5536a45?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); +} + +.g-item-2 { + grid-column: 3 / 4; + grid-row: 1 / 3; + background-image: url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); +} + +.g-item-3 { + grid-column: 1 / 2; + grid-row: 2 / 4; + background-image: url('https://images.unsplash.com/photo-1600121848594-d8644e57abab?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); +} + +.g-item-4 { + grid-column: 2 / 3; + grid-row: 2 / 3; + background-image: url('https://images.unsplash.com/photo-1595526114035-0d45ed16433d?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); +} + +.g-item-5 { + grid-column: 2 / 4; + grid-row: 3 / 4; + background-image: url('https://images.unsplash.com/photo-1512918728675-ed5a71a580a9?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); } .preview-luxury-header { text-align: center; margin-bottom: 35px; padding: 20px; /* Reduced padding to increase width */ - background: #e9edf2; /* New light blue-grey theme */ /* Changed to blue-purple gradient to match 4th grid */ + background: #C0A062; /* Gold accent 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); @@ -1161,7 +1781,7 @@ } .newsletter-header h2 { - color: #e9edf2; /* New light blue-grey theme */ + color: #ffffff; /* Changed to white for better visibility on images */ font-size: 18px; margin-bottom: 15px; font-weight: 600; @@ -1197,7 +1817,7 @@ } .preview-header { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; padding: 20px; border-radius: 12px; @@ -1248,7 +1868,7 @@ } .preview-section-title { - color: #e9edf2; /* New light blue-grey theme */ + color: #ffffff; /* Changed to white for better visibility on images */ font-size: 10px; font-weight: bold; margin-bottom: 6px; @@ -1270,7 +1890,7 @@ .preview-icon { width: 16px; height: 16px; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border-radius: 50%; display: flex; align-items: center; @@ -1280,7 +1900,7 @@ } .preview-contact { - color: #e9edf2; /* New light blue-grey theme */ + color: #ffffff; /* Changed to white for better visibility on images */ font-size: 8px; font-weight: bold; } @@ -1305,7 +1925,7 @@ } .preview-price-section { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; padding: 12px; border-radius: 6px; @@ -1557,8 +2177,8 @@ position: absolute; top: 20px; right: 20px; - background: #e9edf2; /* New light blue-grey theme */ - color: white; + background: #ffffff; /* White background for black text */ + color: #000000 !important; padding: 10px 15px; border-radius: 25px; font-size: 0.85rem; @@ -1575,11 +2195,11 @@ .selected-icon { font-size: 1.1rem; - color: white; + color: #000000 !important; } .selected-text { - color: white; + color: #000000 !important; font-weight: 600; } @@ -1659,11 +2279,11 @@ } .btn-primary { - background: #e9edf2; /* New light blue-grey theme */ + background: #007bff; /* Consistent blue color */ color: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), - 0 8px 32px rgba(79, 70, 229, 0.15), + 0 8px 32px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.1); } @@ -1672,9 +2292,9 @@ transform: translateY(-1px) scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), - 0 12px 40px rgba(79, 70, 229, 0.25), + 0 12px 40px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2); - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #f472b6 100%); + background: #0056b3; /* Darker blue on hover */ } .btn-primary:active { @@ -1691,24 +2311,24 @@ } .btn-secondary { - background: rgba(255, 255, 255, 0.9); - color: #374151; - border: 1px solid rgba(0, 0, 0, 0.08); + background: #007bff; /* Same blue color as primary */ + color: white; + border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.9); + 0 8px 32px rgba(59, 130, 246, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-secondary:hover { - background: rgba(255, 255, 255, 1); - color: #1f2937; + background: #0056b3; /* Darker blue on hover */ + color: white; transform: translateY(-1px) scale(1.02); - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), - 0 2px 4px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 1); + 0 12px 40px rgba(59, 130, 246, 0.25), + inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn-secondary:active { @@ -1807,7 +2427,7 @@ } .source-tab.active { - color: #e9edf2; /* New light blue-grey theme */ + color: #ffffff; /* White text for better visibility */ background: rgba(79, 70, 229, 0.05); } @@ -1818,7 +2438,7 @@ left: 0; right: 0; height: 2px; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border-radius: 1px; } @@ -1849,9 +2469,9 @@ } .category-btn-replacement.active { - background: #e9edf2; /* New light blue-grey theme */ + background: #007bff; /* Blue theme */ color: white; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #007bff; /* Blue theme */ } /* Image Grid */ @@ -1874,7 +2494,7 @@ } .replacement-image-item:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ transform: translateY(-2px); box-shadow: 0 8px 25px rgba(79, 70, 229, 0.15); } @@ -1923,7 +2543,7 @@ } .upload-dropzone:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ background: #f0f4ff; } @@ -2103,7 +2723,7 @@ .template-name-input:focus { outline: none; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } @@ -2127,7 +2747,7 @@ } .saved-template-item:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ background: #f0f4ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15); @@ -2212,7 +2832,7 @@ .html-textarea:focus { outline: none; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } @@ -2353,19 +2973,22 @@ .step2-content { display: flex; flex-direction: column; - gap: 1.5rem; - margin-bottom: 1rem; + gap: 0.5rem; + margin-bottom: 0.5rem; max-width: 1400px; - margin: 0 auto 1rem auto; + margin: 2rem auto 0.5rem auto; padding: 0 1rem; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + font-size: 0.875rem; + color: #000000 !important; } /* Step 2 Grid Row 1 - Property Selection and Market Analysis */ .step2-grid-row-1 { display: grid; grid-template-columns: 1fr 1fr; - gap: 2rem; - margin-bottom: 1.5rem; + gap: 1rem; + margin-bottom: 0.5rem; align-items: start; } @@ -2432,7 +3055,7 @@ .featured-description h5 { font-size: 1.5rem !important; - color: #667eea !important; + color: #000000 !important; margin-bottom: 2rem !important; display: flex; align-items: center; @@ -2481,12 +3104,12 @@ /* Property Section Groups */ .property-section-group { - background: white; + background: transparent; border-radius: 6px; - padding: 1.5rem; - border: 1px solid #e1e5e9; - margin-bottom: 1rem; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + padding: 0.5rem; + border: none; + margin-bottom: 0.5rem; + box-shadow: none; transition: all 0.2s ease; } @@ -2495,13 +3118,13 @@ } .property-section-group h5 { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1.2rem; - font-weight: 700; - color: #2c3e50; - margin: 0 0 1.5rem 0; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + font-size: 0.875rem; + font-weight: 600; + color: #000000 !important; + margin: 0 0 0.5rem 0; text-transform: uppercase; - letter-spacing: 1px; + letter-spacing: 0.5px; line-height: 1.3; } @@ -2537,7 +3160,7 @@ } .property-field:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); } @@ -2600,16 +3223,12 @@ } .image-review-section h3 { - font-family: 'Playfair Display', Georgia, serif; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; font-size: 2.8rem; font-weight: 800; margin: 0 0 1.5rem 0; - color: #2c3e50; + color: #000000 !important; text-align: center; - background: #e9edf2; /* New light blue-grey theme */ - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; letter-spacing: -0.02em; line-height: 1.2; } @@ -2646,9 +3265,9 @@ .category-btn-step2 { font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); - border: 1px solid rgba(226, 232, 240, 0.6); - color: #475569; + background: transparent; + border: 1px solid #e0e0e0; + color: #495057; padding: 0.875rem 1.75rem; border-radius: 12px; font-size: 0.875rem; @@ -2687,27 +3306,27 @@ } .category-btn-step2:hover { - background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); - border-color: rgba(99, 102, 241, 0.3); - color: #334155; + background: #f8f9fa; + border-color: #adb5bd; + color: #495057; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), - 0 10px 15px -3px rgba(99, 102, 241, 0.1); + 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .category-btn-step2.active { - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - border-color: #6366f1; + background: #007bff; + border-color: #007bff; color: white; font-weight: 600; font-variation-settings: 'wght' 600; transform: translateY(-1px); box-shadow: - 0 4px 6px -1px rgba(99, 102, 241, 0.4), - 0 2px 4px -1px rgba(99, 102, 241, 0.2), - 0 10px 15px -3px rgba(99, 102, 241, 0.2), + 0 4px 6px -1px rgba(59, 130, 246, 0.4), + 0 2px 4px -1px rgba(59, 130, 246, 0.2), + 0 10px 15px -3px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); } @@ -2869,7 +3488,7 @@ } .nav-btn-step2 { - background: linear-gradient(135deg, #64748b 0%, #475569 100%); + background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); border: none; color: white; padding: 0.875rem 1.125rem; @@ -2886,8 +3505,8 @@ position: relative; overflow: hidden; box-shadow: - 0 4px 6px -1px rgba(100, 116, 139, 0.4), - 0 2px 4px -1px rgba(100, 116, 139, 0.2); + 0 4px 6px -1px rgba(0, 123, 255, 0.4), + 0 2px 4px -1px rgba(0, 123, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); } @@ -2907,18 +3526,18 @@ } .nav-btn-step2:hover:not(:disabled) { - background: linear-gradient(135deg, #475569 0%, #334155 100%); + background: linear-gradient(135deg, #0056b3 0%, #004085 100%); transform: translateY(-2px) scale(1.05); box-shadow: - 0 10px 15px -3px rgba(100, 116, 139, 0.4), - 0 4px 6px -2px rgba(100, 116, 139, 0.25); + 0 10px 15px -3px rgba(0, 123, 255, 0.4), + 0 4px 6px -2px rgba(0, 123, 255, 0.25); } .nav-btn-step2:active:not(:disabled) { transform: translateY(0) scale(0.98); box-shadow: - 0 4px 6px -1px rgba(100, 116, 139, 0.4), - 0 2px 4px -1px rgba(100, 116, 139, 0.2); + 0 4px 6px -1px rgba(0, 123, 255, 0.4), + 0 2px 4px -1px rgba(0, 123, 255, 0.2); } .nav-btn-step2:disabled { @@ -2958,12 +3577,12 @@ } .property-section, .market-analysis-section { - background: white; - padding: 2rem; - border-radius: 6px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - border: 1px solid #e1e5e9; - margin-bottom: 1.5rem; + background: #ffffff; + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border: 1px solid #e0e0e0; + margin-bottom: 1rem; transition: all 0.2s ease; height: 100%; display: flex; @@ -2975,22 +3594,22 @@ } .property-section h3, .market-analysis-section h3 { - font-family: 'Playfair Display', Georgia, serif; - font-size: 2.2rem; - font-weight: 700; - margin: 0 0 1.5rem 0; - color: #2c3e50; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + font-size: 1.5rem; + font-weight: 600; + margin: 0 0 0.5rem 0; + color: #000000 !important; letter-spacing: -0.01em; line-height: 1.3; } .property-section p, .market-analysis-section p { - font-family: 'Inter', sans-serif; - color: #6c757d; - margin-bottom: 2rem; - line-height: 1.7; - font-size: 1.1rem; - font-weight: 500; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + color: #000000 !important; + margin-bottom: 0.5rem; + line-height: 1.4; + font-size: 0.875rem; + font-weight: 400; letter-spacing: 0.01em; } @@ -3006,16 +3625,17 @@ align-items: center; gap: 0.8rem; cursor: pointer; - padding: 1rem; + padding: 0.75rem; border-radius: 8px; transition: all 0.3s ease; border: 1px solid #e9ecef; background: #f8f9fa; + font-size: 0.875rem; } .checkbox-item:hover { background: white; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ transform: translateY(-1px); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); } @@ -3035,8 +3655,8 @@ } .checkbox-item input[type="checkbox"]:checked + .checkmark { - background: #e9edf2; /* New light blue-grey theme */ - border-color: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ + border-color: #C0A062; /* Gold accent theme */ } .checkbox-item input[type="checkbox"]:checked + .checkmark::after { @@ -3213,7 +3833,7 @@ .property-dropdown:focus { outline: none; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ } /* Editor Container */ @@ -3227,8 +3847,8 @@ .editor-toolbar.left { width: 300px; flex-shrink: 0; - background: #f8f9fa; - border: 1px solid #dee2e6; + background: #000000; + border: 1px solid #333333; border-radius: 8px; padding: 20px; height: fit-content; @@ -3244,7 +3864,7 @@ .toolbar-section-title { font-weight: 600; - color: #495057; + color: #000000 !important; margin-bottom: 15px; font-size: 14px; text-transform: uppercase; @@ -3363,11 +3983,12 @@ /* Right Editor Area */ .editor-right { flex: 1; - background: white; + background: transparent !important; border: 1px solid #dee2e6; border-radius: 8px; - padding: 20px; - min-height: 600px; + padding: 15px; + height: calc(85vh - 120px); + max-height: calc(85vh - 120px); } /* Preview frame with exact A4 dimensions for accurate PDF generation */ @@ -3437,7 +4058,7 @@ top: -30px; left: 50%; transform: translateX(-50%); - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; padding: 5px 15px; border-radius: 15px; @@ -3453,7 +4074,7 @@ .preview-header { margin-bottom: 20px; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; padding: 20px; border-radius: 12px; @@ -3532,7 +4153,7 @@ .preview-price { font-size: 18px; font-weight: 700; - color: #e9edf2; /* New light blue-grey theme */ /* Our theme color */ + color: #ffffff; /* Changed to white for better visibility on images */ margin-bottom: 10px; } @@ -3569,24 +4190,19 @@ /* A4 Page Break Indicators */ .a4-page-break { - page-break-before: always; - break-before: page; - height: 0; - margin: 0; - padding: 0; - border: none; - position: relative; + display: none !important; + visibility: hidden !important; + height: 0 !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; + position: absolute !important; + left: -9999px !important; } .a4-page-break div { - text-align: center; - color: #999; - font-size: 12px; - margin: 10px 0; - background: #f8f9fa; - padding: 5px; - border-radius: 4px; - border: 1px dashed #ddd; + display: none !important; + visibility: hidden !important; } /* A4 Content Overflow Handling */ @@ -3602,15 +4218,10 @@ margin-right: auto; } -/* Additional Template Preview Styles */ -.asgar1-preview { - height: 100%; - display: flex; - flex-direction: column; -} + .preview-hero { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; padding: 20px; border-radius: 8px; @@ -4026,10 +4637,10 @@ } .template-grid { - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - grid-auto-rows: 180px; - gap: 20px; - padding: 25px 15px; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + grid-auto-rows: 200px; + gap: 30px; + padding: 30px 20px; } .step-content { @@ -4061,9 +4672,9 @@ .template-grid { grid-template-columns: 1fr; - grid-auto-rows: 160px; - gap: 15px; - padding: 20px 15px; + grid-auto-rows: 180px; + gap: 25px; + padding: 25px 20px; } .template-card { @@ -4375,7 +4986,7 @@ .property-detail-label { font-weight: 600; - color: #e9edf2; /* New light blue-grey theme */ + color: #ffffff; /* Changed to white for better visibility on images */ margin-bottom: 5px; font-size: 0.9rem; } @@ -4422,7 +5033,7 @@ } .editable-area:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ } .editable-area h3 { @@ -4572,7 +5183,7 @@ } .template-preview-frame::-webkit-scrollbar-thumb { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border-radius: 4px; } @@ -4581,7 +5192,7 @@ } .pdf-preview-header { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; padding: 20px 30px; display: flex; @@ -4693,22 +5304,22 @@ } .property-selector label { - font-family: 'Inter', sans-serif; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; display: block; - margin-bottom: 12px; - font-weight: 700; - color: #2c3e50; - font-size: 1.2rem; + margin-bottom: 8px; + font-weight: 600; + color: #000000 !important; + font-size: 0.875rem; letter-spacing: 0.02em; } .property-selector select { - font-family: 'Inter', sans-serif; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; width: 100%; - padding: 16px 20px; + padding: 12px 16px; border: 2px solid #e0e0e0; - border-radius: 12px; - font-size: 1.1rem; + border-radius: 8px; + font-size: 0.875rem; font-weight: 500; background: white; transition: all 0.3s ease; @@ -4718,7 +5329,7 @@ .property-selector select:focus { outline: none; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } @@ -4808,12 +5419,14 @@ } .page-break { - page-break-after: always; - break-after: page; - height: 297mm; - width: 210mm; - position: relative; - margin-bottom: 10mm; + display: none !important; + visibility: hidden !important; + height: 0 !important; + width: 0 !important; + position: absolute !important; + left: -9999px !important; + margin: 0 !important; + padding: 0 !important; } .page-indicator { @@ -4829,7 +5442,7 @@ .export-pdf-btn { background: transparent; - color: #e9edf2; /* New light blue-grey theme */ + color: #ffffff; /* White text for better visibility */ border: 2px solid #667eea; padding: 12px 24px; border-radius: 25px; @@ -4849,7 +5462,7 @@ } .export-pdf-btn:hover { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); @@ -4918,7 +5531,7 @@ } .field-item:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); } @@ -4944,7 +5557,7 @@ } .progress-message { - color: #007bff; + color: #ffffff; font-weight: 500; font-size: 11px; padding: 6px 12px; @@ -4994,14 +5607,14 @@ width: 20px; height: 20px; border: 3px solid #f3f3f3; - border-top: 3px solid #007bff; + border-top: 3px solid #6b7280; border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; } .pdf-progress-indicator .progress-text { - color: #007bff; + color: #ffffff; font-weight: 500; font-size: 14px; margin: 0; @@ -5140,7 +5753,7 @@ } .image-review-header { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; padding: 20px 30px; display: flex; @@ -5184,8 +5797,8 @@ .category-btn:hover, .category-btn.active { - background: #e9edf2; /* New light blue-grey theme */ - border-color: #e9edf2; /* New light blue-grey theme */ + background: #007bff; /* Blue theme */ + border-color: #007bff; /* Blue theme */ color: white; transform: translateY(-1px); } @@ -5205,8 +5818,8 @@ /* Editor Toolbar - Fixed Layout */ .editor-toolbar { - background: #f8f9fa; - border: 1px solid #dee2e6; + background: #000000; + border: 1px solid #333333; border-radius: 8px; padding: 15px; margin-bottom: 20px; @@ -5224,9 +5837,9 @@ .toolbar-section { margin-bottom: 20px; padding: 10px; - background: white; + background: transparent; border-radius: 6px; - border: 1px solid #e9ecef; + border: 1px solid #333333; } .toolbar-section:last-child { @@ -5235,7 +5848,7 @@ .toolbar-section-title { font-weight: 600; - color: #495057; + color: #000000 !important; margin-bottom: 10px; font-size: 14px; text-transform: uppercase; @@ -5296,7 +5909,7 @@ /* Form Controls */ .toolbar-group label { font-size: 12px; - color: #6c757d; + color: #ffffff; margin-right: 8px; white-space: nowrap; } @@ -5340,9 +5953,89 @@ .step3 { display: block; position: relative; - height: calc(100vh - 160px); + height: calc(100vh - 80px); overflow: hidden; padding-bottom: 1rem; + background: transparent !important; +} + +/* Force ALL step 3 elements to be transparent */ +.step3 * { + background: transparent !important; +} + +/* Exception for specific elements that need backgrounds */ +.step3 .template-card, +.step3 .btn-primary, +.step3 .btn-secondary, +.step3 .generate-pdf-btn, +.step3 .page-size-btn, +.step3 .page-size-btn.selected { + background: initial !important; +} + +/* Consistent color scheme for all interface elements */ +.property-brochure-generator { + background: #f8f9fa !important; +} + +.step-content { + background: #f8f9fa !important; +} + +/* Force consistent colors for all top-level elements */ +.property-brochure-generator * { + color: inherit !important; +} + +/* Override any gradient backgrounds in top sections */ +.header-section, +.step-header-gradient, +.step-navigation { + background: #f8f9fa !important; + color: #000000 !important; +} + +/* Ensure all text in headers is black */ +.header-section h1, +.header-section h2, +.header-section h3, +.header-section p, +.step-header-gradient h1, +.step-header-gradient h2, +.step-header-gradient h3, +.step-header-gradient p { + color: #000000 !important; +} + +/* Standardize all container backgrounds */ +.template-card, +.preview-section, +.image-replacement-modal, +.modal-content { + background: #ffffff !important; +} + +/* Standardize all button backgrounds */ +.btn-primary, +.btn-secondary, +.generate-pdf-btn, +.page-size-btn.selected { + background: #007bff !important; +} + +.btn-secondary:hover, +.btn-primary:hover { + background: #0056b3 !important; +} + +/* Standardize all section backgrounds */ +.property-section, +.market-analysis-section, +.enhanced-toolbar .toolbar-section, +.property-insert-section { + background: #ffffff !important; + border: 1px solid #e9ecef !important; } .step3.hidden { @@ -5359,21 +6052,30 @@ box-sizing: border-box; margin-bottom: 0; max-height: calc(100vh - 180px); + background: transparent; +} + +.editor-left { + background: transparent; + border: none; + padding: 0; + margin: 0; } /* Quill Editor Container - Replaces Left Toolbar */ .quill-editor-container { width: 340px; flex-shrink: 0; - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); + background: transparent !important; border: 1px solid #dee2e6; border-radius: 12px; padding: 15px; - height: calc(100vh - 180px); - max-height: calc(100vh - 180px); + height: calc(100vh - 120px); + max-height: calc(100vh - 120px); overflow-y: auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); position: relative; + z-index: 10; } /* Hide default scrollbar */ @@ -5394,7 +6096,7 @@ right: 10px; width: 4px; height: 30px; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border-radius: 2px; opacity: 0; transition: opacity 0.3s ease; @@ -5408,7 +6110,7 @@ right: 10px; width: 4px; height: 30px; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border-radius: 2px; opacity: 0; transition: opacity 0.3s ease; @@ -5429,13 +6131,9 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.2rem; font-weight: 700; - color: #2c3e50; + color: #000000 !important; margin-bottom: 15px; text-align: center; - background: #e9edf2; /* New light blue-grey theme */ - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; letter-spacing: 0.02em; } @@ -5443,11 +6141,11 @@ .enhanced-toolbar-sticky { position: sticky; top: 0; - z-index: 100; - background: white; + z-index: 1000; + background: transparent; border-bottom: 2px solid #e9ecef; - padding: 15px 20px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + padding: 25px 20px; + box-shadow: none; margin-bottom: 20px; } @@ -5484,18 +6182,19 @@ /* Enhanced Toolbar - Sidebar Style */ .enhanced-toolbar { - height: calc(100vh - 200px); + height: calc(100vh - 120px); display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; padding: 1rem; - background: #ffffff; + background: transparent !important; border: 1px solid #e1e5e9; border-radius: 8px; + position: relative; + z-index: 10; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-height: 800px; - position: relative; } /* Custom scroll indicator */ @@ -5507,7 +6206,7 @@ transform: translateY(-50%); width: 4px; height: 40px; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border-radius: 2px; opacity: 0; transition: opacity 0.3s ease; @@ -5527,7 +6226,7 @@ .enhanced-toolbar .toolbar-section { margin-bottom: 20px; padding: 15px; - background: #f8f9fa; + background: transparent !important; border-radius: 8px; border: 1px solid #e9ecef; } @@ -5561,7 +6260,7 @@ .enhanced-toolbar .toolbar-button { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - background: #ffffff; + background: transparent !important; border: 1px solid #dee2e6; border-radius: 6px; padding: 8px 12px; @@ -5608,7 +6307,7 @@ } .enhanced-toolbar .toolbar-group select:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } @@ -5622,7 +6321,7 @@ } .enhanced-toolbar .toolbar-group input[type="color"]:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } @@ -5642,11 +6341,13 @@ justify-content: flex-start; } + + /* Property Insert Section */ .property-insert-section { margin-bottom: 25px; padding: 20px; - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); + background: transparent !important; border-radius: 12px; border: 1px solid #e9ecef; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); @@ -5673,8 +6374,8 @@ } .property-insert-btn { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - background: white; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + background: #ffffff; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px 12px; @@ -5690,11 +6391,11 @@ } .property-insert-btn:hover { - background: #28a745; - border-color: #28a745; - color: white; + background: #e9ecef; + border-color: #adb5bd; + color: #495057; transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Document Actions Section */ @@ -5727,8 +6428,8 @@ } .doc-action-btn { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - background: white; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + background: #ffffff; border: 1px solid #e9ecef; border-radius: 8px; padding: 12px 15px; @@ -5756,8 +6457,8 @@ } .doc-action-btn.load-btn:hover { - background: #007bff; - border-color: #007bff; + background: #C0A062; + border-color: #C0A062; color: white; } @@ -5768,8 +6469,8 @@ } .doc-action-btn.preview-btn:hover { - background: #e9edf2; /* New light blue-grey theme */ - border-color: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ + border-color: #C0A062; /* Gold accent theme */ color: white; } @@ -5781,7 +6482,7 @@ .doc-action-btn.undo-btn:hover { background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); - border-color: #6b7280; + border-color: #007bff; color: #111827; } @@ -5793,7 +6494,7 @@ .doc-action-btn.redo-btn:hover { background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); - border-color: #6b7280; + border-color: #007bff; color: #111827; } @@ -5804,7 +6505,7 @@ } .generate-pdf-btn { - background: #e9edf2; /* New light blue-grey theme */ + background: #007bff; color: white; border: none; padding: 12px 24px; @@ -5820,7 +6521,8 @@ .generate-pdf-btn:hover { transform: translateY(-1px); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); + box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); + background: #0056b3; } .generate-pdf-btn:disabled { @@ -5831,12 +6533,12 @@ /* Enhanced Editor Content Area */ .enhanced-editor-content { - background: white; + background: transparent !important; border: 1px solid #dee2e6; border-radius: 12px; - height: calc(100vh - 200px); - max-height: calc(100vh - 200px); - padding: 20px; + height: calc(85vh - 120px); + max-height: calc(85vh - 120px); + padding: 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.6; @@ -5844,6 +6546,7 @@ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); overflow-y: auto; position: relative; + z-index: 10; scroll-behavior: smooth; user-select: text; -webkit-user-select: text; @@ -6073,11 +6776,12 @@ -ms-user-select: text; user-select: text; cursor: text; + border: none !important; } .draggable-element:hover, .draggable-element.selected { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ background: rgba(102, 126, 234, 0.1); box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); } @@ -6095,7 +6799,7 @@ /* Resize Handles */ .resize-handle { position: absolute; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border: 1px solid white; width: 8px; height: 8px; @@ -6139,11 +6843,14 @@ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.4; + color: rgba(51, 51, 51, 0.6); + border: none !important; } .draggable-text:focus { - outline: 2px solid #667eea; + outline: 2px solid #007bff; background: rgba(255, 255, 255, 1); + color: #333; } /* Loading Spinner */ @@ -6170,7 +6877,7 @@ .enhanced-editor-content:focus { outline: none; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } @@ -6353,12 +7060,12 @@ /* Right Editor Area - Takes Remaining Space */ .editor-right { flex: 1; - background: white; + background: transparent !important; border: 1px solid #dee2e6; border-radius: 8px; - padding: 20px; - height: 100%; - max-height: calc(100vh - 250px); + padding: 15px; + height: calc(85vh - 120px); + max-height: calc(85vh - 120px); overflow: hidden; display: flex; flex-direction: column; @@ -6390,7 +7097,7 @@ } .export-pdf-btn { - background: #e9edf2; /* New light blue-grey theme */ + background: #007bff; /* Blue theme */ color: white; border: none; padding: 12px 24px; @@ -6427,7 +7134,7 @@ .editor-right { order: 1; - height: 500px; + height: 400px; } } @@ -6455,7 +7162,7 @@ } .export-pdf-btn { - background: #e9edf2; /* New light blue-grey theme */ + background: #007bff; /* Blue theme */ color: white; border: none; padding: 12px 24px; @@ -6525,12 +7232,12 @@ /* Enhanced visual feedback for scrollable areas */ .enhanced-toolbar-scroll:hover, .enhanced-editor-content:hover { - background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%); + background: #ffffff; } /* Subtle border animation on hover */ .enhanced-toolbar:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1); } @@ -6568,11 +7275,11 @@ gap: 8px; cursor: pointer; padding: 8px 16px; - background: #f8f9fa; - border: 2px solid #e9ecef; + background: transparent; + border: 2px solid transparent; border-radius: 10px; transition: all 0.3s ease; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; font-weight: 500; color: #495057; min-width: 60px; @@ -6581,9 +7288,9 @@ .page-size-option:hover { background: #e9ecef; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #007bff; /* Blue theme */ transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); + box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1); } .page-size-option input[type="radio"] { @@ -6595,10 +7302,10 @@ } .page-size-option:has(input:checked) { - background: #e9edf2; /* New light blue-grey theme */ - border-color: #e9edf2; /* New light blue-grey theme */ + background: #007bff; + border-color: #007bff; color: white; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); + box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); } .page-size-text { @@ -6655,7 +7362,7 @@ } .popup-header { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; padding: 20px; border-radius: 12px 12px 0 0; @@ -6720,7 +7427,7 @@ .form-control:focus { outline: none; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } @@ -6761,7 +7468,7 @@ } .popup-actions .btn-primary { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; } @@ -6866,7 +7573,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { right: -8px; width: 24px; height: 24px; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; border-radius: 50%; cursor: se-resize; @@ -6989,14 +7696,6 @@ button, .btn, .toolbar-button, .export-pdf-btn { padding: 30px 25px; } -.asgar1-preview { - display: flex; - flex-direction: column; - height: 100%; - min-height: 200px; - gap: 15px; -} - .preview-hero { background: linear-gradient(135deg, #003366, #004080); color: white; @@ -7132,7 +7831,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { /* Sample Template Preview Styles */ .template-sample { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border: 1px solid #5a6fd8; box-shadow: 0 6px 20px rgba(102,126,234,0.15); padding: 30px 25px; @@ -7147,7 +7846,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { } .preview-header { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; padding: 20px; border-radius: 8px; @@ -7204,7 +7903,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { } .preview-section-title { - color: #e9edf2; /* New light blue-grey theme */ + color: #ffffff; /* Changed to white for better visibility on images */ font-size: 11px; font-weight: bold; margin-bottom: 6px; @@ -7226,7 +7925,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .preview-icon { width: 20px; height: 20px; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border-radius: 50%; display: flex; align-items: center; @@ -7577,7 +8276,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .preview-hero-section { height: 65%; - background: #e9edf2; /* New light blue-grey theme */ /* Our theme color */ + background: #C0A062; /* Gold accent theme */ /* Our theme color */ position: relative; border-radius: 12px 12px 0 0; overflow: hidden; @@ -7637,7 +8336,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .preview-stat { font-size: 11px; - color: #000000; + color: #000000 !important; font-weight: 600; text-align: center; } @@ -7649,7 +8348,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .preview-title { font-size: 14px; font-weight: 700; - color: #000000; + color: #000000 !important; margin-bottom: 8px; } @@ -7665,8 +8364,8 @@ button, .btn, .toolbar-button, .export-pdf-btn { border: none; position: relative; overflow: hidden; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); min-height: 320px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .template-asgar1::before { @@ -7680,17 +8379,9 @@ button, .btn, .toolbar-button, .export-pdf-btn { pointer-events: none; } -.asgar1-preview { - position: relative; - z-index: 1; - height: 100%; - display: flex; - flex-direction: column; -} - .preview-hero { height: 50%; - background: #e9edf2; /* New light blue-grey theme */ /* Our theme color */ + background: #C0A062; /* Gold accent theme */ /* Our theme color */ position: relative; border-radius: 12px 12px 0 0; overflow: hidden; @@ -7736,7 +8427,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .preview-section-title { font-size: 14px; font-weight: 700; - color: #000000; + color: #000000 !important; margin-bottom: 8px; } @@ -7771,7 +8462,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .feature-text { font-size: 10px; font-weight: 600; - color: #000000; + color: #000000 !important; text-align: center; } @@ -7806,7 +8497,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .preview-header { height: 50%; - background: #e9edf2; /* New light blue-grey theme */ /* Our theme color */ + background: #C0A062; /* Gold accent theme */ /* Our theme color */ position: relative; border-radius: 12px 12px 0 0; overflow: hidden; @@ -7867,7 +8558,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .preview-section-title { font-size: 14px; font-weight: 700; - color: #000000; + color: #000000 !important; margin-bottom: 8px; } @@ -7919,7 +8610,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .preview-luxury-header { height: 45%; - background: #e9edf2; /* New light blue-grey theme */ /* Our theme color */ + background: #C0A062; /* Gold accent theme */ /* Our theme color */ position: relative; border-radius: 12px 12px 0 0; overflow: hidden; @@ -7973,7 +8664,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { border-radius: 6px; font-size: 12px; font-weight: 600; - color: #000000; + color: #000000 !important; border-left: 3px solid #f39c12; } @@ -8020,7 +8711,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .feature-text { font-size: 10px; font-weight: 600; - color: #000000; + color: #000000 !important; text-align: center; } @@ -8105,7 +8796,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { .table-input:focus { outline: none; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } @@ -8215,7 +8906,7 @@ button, .btn, .toolbar-button, .export-pdf-btn { } .editable-table-container:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15); } @@ -8358,7 +9049,7 @@ img[draggable="true"] { position: absolute; width: 8px; height: 8px; - background: #007bff; + background: #C0A062; border: 1px solid white; z-index: 1001; } @@ -8397,7 +9088,7 @@ img[draggable="true"] { top: 10px; right: 10px; background: white; - border: 2px solid #007bff; + border: 2px solid #6b7280; border-radius: 8px; padding: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); @@ -8412,7 +9103,7 @@ img[draggable="true"] { left: 50%; transform: translate(-50%, -50%); background: white; - border: 2px solid #007bff; + border: 2px solid #6b7280; border-radius: 8px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); @@ -8505,7 +9196,7 @@ ol li:before { padding: 12px 20px; border: none; background: transparent; - color: #6b7280; + color: #374151; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; @@ -8513,13 +9204,13 @@ ol li:before { } .tab-btn.active { - color: #e9edf2; /* New light blue-grey theme */ - border-bottom-color: #4f46e5; - background: #f0f4ff; + color: #1f2937; /* Dark text for better visibility */ + border-bottom-color: #007bff; + background: #e3f2fd; } .tab-btn:hover { - color: #e9edf2; /* New light blue-grey theme */ + color: #1f2937; /* Dark text for better visibility */ background: #f9fafb; } @@ -8547,9 +9238,9 @@ ol li:before { } .category-btn.active { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ color: white; - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ } .category-btn:hover { @@ -8576,12 +9267,12 @@ ol li:before { } .property-image-item:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ transform: scale(1.02); } .property-image-item.selected { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2); } @@ -8628,12 +9319,12 @@ ol li:before { } .upload-area:hover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ background: #f0f4ff; } .upload-area.dragover { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ background: #e0e7ff; } @@ -8679,7 +9370,7 @@ ol li:before { } .draggable-image-container.selected { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2); } @@ -8692,7 +9383,7 @@ ol li:before { .resize-handle { position: absolute; - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent theme */ border: 2px solid white; border-radius: 50%; width: 12px; @@ -8749,7 +9440,7 @@ ol li:before { } .draggable-table-container.selected { - border-color: #e9edf2; /* New light blue-grey theme */ + border-color: #C0A062; /* Gold accent theme */ box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2); } @@ -8813,6 +9504,88 @@ ol li:before { +/* Hide Editor Controls in PDF Output */ +.pdf-output .delete-template-btn, +.pdf-output .close-btn, +.pdf-output .delete-image-btn, +.pdf-output .delete-handle, +.pdf-output .resize-handle, +.pdf-output .table-control-btn.delete, +.pdf-output .draggable-element:hover, +.pdf-output .draggable-element.selected, +.pdf-output .enhanced-editor-content img:hover, +.pdf-output .enhanced-editor-content .draggable-element:has(img):hover { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; +} + +/* Hide all interactive elements in PDF output */ +.pdf-output .draggable-element { + position: static !important; + border: none !important; + cursor: default !important; + user-select: text !important; +} + +.pdf-output .enhanced-editor-content { + cursor: default !important; + user-select: text !important; +} + +.pdf-output .enhanced-editor-content img { + cursor: default !important; + transform: none !important; + box-shadow: none !important; +} + +/* Hide resize handles and delete buttons in PDF output */ +.pdf-output .resize-handle, +.pdf-output .delete-handle, +.pdf-output .delete-image-btn { + display: none !important; +} + +/* Hide hover effects in PDF output */ +.pdf-output .draggable-element:hover, +.pdf-output .draggable-element.selected { + border: none !important; + background: transparent !important; + box-shadow: none !important; +} + +/* Hide all editor controls and interactive elements in PDF output */ +.pdf-output *[class*="delete"], +.pdf-output *[class*="remove"], +.pdf-output *[class*="close"], +.pdf-output *[class*="cross"], +.pdf-output *[class*="resize"], +.pdf-output *[class*="handle"], +.pdf-output *[class*="control"], +.pdf-output *[class*="btn-close"], +.pdf-output *[class*="btn-delete"], +.pdf-output *[class*="btn-remove"] { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; +} + +/* Ensure text and images are selectable in PDF output */ +.pdf-output .enhanced-editor-content * { + user-select: text !important; + -webkit-user-select: text !important; + -moz-user-select: text !important; + -ms-user-select: text !important; +} + +/* Remove all interactive styling in PDF output */ +.pdf-output .enhanced-editor-content *:hover { + transform: none !important; + box-shadow: none !important; + border: none !important; + background: transparent !important; +} + /* PDF Download Modal Styles */ .pdf-download-modal-overlay { position: fixed; @@ -8829,7 +9602,7 @@ ol li:before { } .pdf-download-modal { - background: #e9edf2; /* New light blue-grey theme */ + background: #C0A062; /* Gold accent 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 10fde46..b5ca48b 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html @@ -22,29 +22,10 @@ - -
-
-
1
-
Choose Template
-
-
-
2
-
Property & Analysis
-
-
-
3
-
Design & Export
-
-
+
- -
-

Property Brochure

-

Professional Template

-
@@ -82,44 +63,63 @@
- -
-
-
-
MODERN HOME
-
Premium Location
-
$1,300,000
+ +
+
+

Modern Villa

+

123 Luxury Lane, Prestige City, PC 45678

+
+
$2,500,000
+
+ 4 Beds + 3 Baths + 3,200 sq. ft. +
+
- -
-
- 🏠 4 Beds - 🛁 3 Baths - 📏 2,500 sq ft + +
+
+

About this Property

+

This stunning modern villa offers contemporary living with premium finishes and an open-concept design perfect for entertaining.

-
-
About this Property
-
Modern design with clean layout, contemporary styling & - premium amenities for sophisticated living. Features open concept design with - high-end finishes.
+ +
+
Status: For Sale
+
Type: Single-Family
+
Year Built: 2023
+
Parking: 2-Car Garage
-
-
- 🏡 - Modern + +
+
Gourmet Kitchen
+
Master Suite
+
Open Floor Plan
+
Private Garden
+
+ +
+
+

Sarah Johnson

+

Your Real Estate Professional

-
- ✨ - Premium -
-
- 🌿 - Eco-Friendly +
+

(555) 123-4567

+

sarah@realestate.com

+ +
+
+ Reference ID: MH-2024-001 +
+
+ Owner Info: John Smith, (555) 987-6543 +
+