V1.0.0-rc

force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css

@@ -638,12 +638,315 @@ late particularay
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
     border-color: #C0A062;
     background: #ffffff;
+    animation: templateHoverPulse 0.6s ease-in-out;
+}
+
+/* Enhanced hover animation */
+@keyframes templateHoverPulse {
+    0% {
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+    }
+    50% {
+        box-shadow: 0 25px 60px rgba(192, 160, 98, 0.25);
+    }
+    100% {
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+    }
+}
+
+/* Additional hover effects for template content */
+.template-card:hover .template-content {
+    transform: translateY(-2px);
+    transition: transform 0.3s ease;
+}
+
+/* Hover effect for template titles */
+.template-card:hover h1,
+.template-card:hover h2,
+.template-card:hover h3 {
+    color: #C0A062;
+    transition: color 0.3s ease;
+}
+
+/* Hover effect for template preview images */
+.template-card:hover .gallery-item,
+.template-card:hover .hero,
+.template-card:hover .p1-image-side,
+.template-card:hover .p2-image,
+.template-card:hover .vision-image {
+    transform: scale(1.05);
+    transition: transform 0.3s ease;
+    filter: brightness(1.1);
+}
+
+/* Hover effect for buttons within templates */
+.template-card:hover .cta-btn,
+.template-card:hover .btn {
+    background: #C0A062 !important;
+    color: white !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(192, 160, 98, 0.3);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for property stats */
+.template-card:hover .stat-item,
+.template-card:hover .feature-item {
+    color: #C0A062;
+    transform: translateX(5px);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for amenities and lists */
+.template-card:hover .amenity-item,
+.template-card:hover .amenities-list li {
+    color: #C0A062;
+    transform: translateX(8px);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for icons */
+.template-card:hover .fa-solid,
+.template-card:hover .fa-check {
+    color: #C0A062;
+    transform: scale(1.2);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for property details */
+.template-card:hover .spec-item,
+.template-card:hover .item {
+    border-left: 3px solid #C0A062;
+    padding-left: 8px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for contact info */
+.template-card:hover .agent-info,
+.template-card:hover .contact-info {
+    background: rgba(192, 160, 98, 0.1);
+    border-radius: 8px;
+    padding: 8px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for cover elements */
+.template-card:hover .cover-title,
+.template-card:hover .main-title,
+.template-card:hover .p1-main-title {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    transition: text-shadow 0.3s ease;
+}
+
+/* Hover effect for gallery items */
+.template-card:hover .gallery-item span {
+    background: rgba(192, 160, 98, 0.9);
+    color: white;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for page numbers and footers */
+.template-card:hover .page-number,
+.template-card:hover .page-footer-bar {
+    color: #C0A062;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for newsletter-style template */
+.template-card:hover .newsletter-header h2 {
+    background: linear-gradient(135deg, #C0A062, #8B6914);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for modern home template elements */
+.template-card:hover .property-name,
+.template-card:hover .property-address {
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    transition: text-shadow 0.3s ease;
+}
+
+/* Hover effect for grand oak template */
+.template-card:hover .cover-title,
+.template-card:hover .p1-main-title {
+    background: linear-gradient(135deg, #C0A062, #8B6914);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for vertice template */
+.template-card:hover .main-title {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    transition: text-shadow 0.3s ease;
+}
+
+/* Hover effect for serenity template */
+.template-card:hover .p1-main-title {
+    color: #C0A062;
+    transform: translateY(-2px);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for price displays */
+.template-card:hover .price,
+.template-card:hover .priceDisplay {
+    color: #C0A062;
+    font-weight: 700;
+    transform: scale(1.05);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for reference IDs */
+.template-card:hover .reference-id,
+.template-card:hover .p1-ref-id {
+    background: rgba(192, 160, 98, 0.1);
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for collection badges */
+.template-card:hover .collection {
+    background: #C0A062;
+    color: white;
+    padding: 4px 12px;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for area displays */
+.template-card:hover .area {
+    color: #C0A062;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for section titles */
+.template-card:hover .section-title {
+    border-bottom: 2px solid #C0A062;
+    padding-bottom: 4px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for description text */
+.template-card:hover .description p,
+.template-card:hover .pull-quote {
+    color: #555;
+    line-height: 1.7;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for pull quotes */
+.template-card:hover .pull-quote {
+    border-left: 4px solid #C0A062;
+    padding-left: 16px;
+    font-style: italic;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for floor plan stats */
+.template-card:hover .floorplan-stats-p5 .stat {
+    background: rgba(192, 160, 98, 0.1);
+    border-radius: 8px;
+    padding: 8px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for highlights list */
+.template-card:hover .highlights-list-p6 li {
+    background: rgba(192, 160, 98, 0.05);
+    padding: 4px 8px;
+    border-radius: 4px;
+    margin: 2px 0;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for property field displays */
+.template-card:hover .property-field {
+    background: rgba(192, 160, 98, 0.05);
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for owner info */
+.template-card:hover .owner-info {
+    background: rgba(192, 160, 98, 0.1);
+    padding: 8px;
+    border-radius: 8px;
+    border-left: 3px solid #C0A062;
+    transition: all 0.3s ease;
 }
 
 .template-card.selected {
     border: 3px solid #000000 !important; /* Black selected border */
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     transform: translateY(-6px);
+    animation: selectedPulse 2s ease-in-out infinite;
+}
+
+/* Selected state animation */
+@keyframes selectedPulse {
+    0%, 100% {
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    }
+    50% {
+        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+    }
+}
+
+/* Enhanced selected indicator */
+.selected-indicator {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: linear-gradient(135deg, #C0A062, #8B6914);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    box-shadow: 0 4px 12px rgba(192, 160, 98, 0.4);
+    animation: selectedIndicatorBounce 0.6s ease-out;
+    z-index: 10;
+}
+
+@keyframes selectedIndicatorBounce {
+    0% {
+        transform: scale(0) rotate(-180deg);
+        opacity: 0;
+    }
+    50% {
+        transform: scale(1.2) rotate(-90deg);
+        opacity: 0.8;
+    }
+    100% {
+        transform: scale(1) rotate(0deg);
+        opacity: 1;
+    }
+}
+
+.selected-icon {
+    font-size: 14px;
+    animation: checkmarkPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes checkmarkPulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
 }
 
 /* Template Heights - Masonry Zigzag Layout */