V1.0.0-rc
This commit is contained in:
Ubuntu
parent
0b3e11ac6a
commit
9bb7f6a727
@ -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 */
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user