Properties2 edit – Neli Arabi Villas

PROPERTIES

/* Base styles */
.property-card {
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
position: relative;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
background-color: #ffffff;
}
.property-card.visible {
opacity: 1;
transform: translateY(0);
}
.property-image {
display: block;
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
text-decoration: none;
background-color: #ffffff;
}
.image-container {
width: 100%;
height: 100%;
position: relative;
background-color: #ffffff;
transform: translateY(0);
transition: transform 0.1s linear;
will-change: transform;
}
.property-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: opacity 0.5s ease, transform 0.5s ease;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff ;
}
.default-image {
opacity: 1;
z-index: 1;
}
.hover-image {
opacity: 0;
z-index: 2;
}
.property-image:hover .default-image {
opacity: 0;
transform: scale(1.1);
}
.property-image:hover .hover-image {
opacity: 1;
transform: scale(1.1);
}
.property-overlay {
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
text-align: center;
width: 90%;
max-width: 800px;
z-index: 3;
transition: transform 0.1s linear;
will-change: transform;
transform-origin: center center;
}
.property-title {
font-size: 40px;
font-weight: 500;
color: white;
margin: 0 0 5px 0;
line-height: 1.3;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
letter-spacing: 1px;
}
.title-decoration {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.line {
width: 50px;
height: 2px;
background: white;
position: relative;
overflow: hidden;
}
.line::before {
content: ”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
animation: linePass 2s infinite;
}
.diamond-icon {
font-size: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
animation: diamondColorChange 2s infinite ease-in-out;
}
@keyframes linePass {
0% {
left: -100%;
}
50% {
left: 100%;
}
100% {
left: 100%;
}
}
@keyframes diamondColorChange {
0% {
color: #295758;
transform: scale(1);
}
50% {
color: #C19B76;
transform: scale(1.2);
}
100% {
color: #295758;
transform: scale(1);
}
}
/* Overlay to darken image slightly for better text visibility */
.property-image::after {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 2;
pointer-events: none;
}
/* ===== RESPONSIVE DESIGN ===== */
/* Large tablets and small desktops (992px and below) */
@media screen and (max-width: 992px) {
.property-image {
height: 350px;
}
.property-title {
font-size: 36px;
}
.line {
width: 45px;
}
.diamond-icon {
font-size: 18px;
}
.property-overlay {
top: 82%;
}
}
/* Tablets (768px and below) */
@media screen and (max-width: 768px) {
.property-image {
height: 300px;
}
.property-title {
font-size: 32px;
margin-bottom: 4px;
}
.line {
width: 40px;
height: 2px;
}
.title-decoration {
gap: 8px;
}
.diamond-icon {
font-size: 16px;
}
.property-overlay {
top: 80%;
width: 95%;
}
/* Disable parallax on tablets for better performance */
.image-container {
transition: none;
}
/* Reduce hover scale on tablets */
.property-image:hover .default-image,
.property-image:hover .hover-image {
transform: scale(1.05);
}
}
/* Mobile phones (576px and below) */
@media screen and (max-width: 576px) {
.property-image {
height: 250px;
}
.property-title {
font-size: 26px;
margin-bottom: 3px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.line {
width: 30px;
height: 1.5px;
}
.title-decoration {
gap: 6px;
}
.diamond-icon {
font-size: 14px;
animation: diamondColorChange 1.5s infinite ease-in-out; /* Faster animation on mobile */
}
.property-overlay {
top: 75%;
width: 95%;
}
/* Disable hover effects on mobile (better touch experience) */
.property-image:hover .default-image {
opacity: 1;
transform: none;
}
.property-image:hover .hover-image {
opacity: 0;
transform: none;
}
/* Simpler overlay for mobile */
.property-image::after {
background: rgba(0, 0, 0, 0.4); /* Slightly darker on mobile for better text visibility */
}
/* Adjust line animation speed for mobile */
.line::before {
animation: linePass 1.5s infinite;
}
/* Disable parallax completely on mobile */
.image-container {
transform: translateY(0) !important;
}
}
/* Small mobile phones (400px and below) */
@media screen and (max-width: 400px) {
.property-image {
height: 200px;
}
.property-title {
font-size: 22px;
}
.line {
width: 25px;
}
.diamond-icon {
font-size: 12px;
}
.property-overlay {
top: 70%;
}
}
/* Landscape orientation for mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
.property-image {
height: 180px;
}
.property-title {
font-size: 20px;
}
.property-overlay {
top: 70%;
}
.line {
width: 25px;
}
}
/* High-resolution screens */
@media screen and (min-width: 1600px) {
.property-image {
height: 500px;
}
.property-title {
font-size: 48px;
}
.line {
width: 70px;
}
.diamond-icon {
font-size: 26px;
}
.property-overlay {
max-width: 1000px;
}
}

Min Price

No preference
€100,000
€150,000
€200,000
€250,000
€300,000
€500,000
€750,000
€1,000,000

Max Price

No preference
€100,000
€150,000
€200,000
€250,000
€300,000
€500,000
€750,000
€1,000,000

Min Beds

No preference
1
2
3
4
5

Type

No preference
Villa
Apartment
Penthouse
Townhouse

.property-search {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 50px;
padding: 30px;
font-family: Arial, sans-serif;
flex-wrap: wrap;
width: 100%;
max-width: 95%;
box-sizing: border-box;
margin: 0 auto;
}
.search-field {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 150px;
}
.search-field label {
font-size: 14px;
color: #a67c52;
margin-bottom: 8px;
white-space: nowrap;
font-weight: 500;
}
.search-field select {
border: none;
border-bottom: 1px solid #ccc;
background: transparent;
padding: 8px 0;
font-size: 14px;
width: 100%;
min-width: 140px;
outline: none;
cursor: pointer;
transition: border-color 0.3s ease;
}
.search-field select:hover {
border-bottom-color: #a67c52;
}
.search-field select:focus {
border-bottom-color: #c19b76;
}
.search-button {
display: flex;
flex-direction: column;
flex: 0 0 auto;
}
.search-button button {
padding: 12px 35px;
border: 1px solid #c19b76;
background: white;
letter-spacing: 2px;
color: #c19b76;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
font-weight: 600;
border-radius: 4px;
}
.search-button button:hover {
background: #c19b76;
color: white;
}
.jet-listing-results {
width: 100%;
max-width: 95%;
margin: 30px auto 0;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
min-height: 200px;
font-family: Arial, sans-serif;
}
.listing-item {
padding: 15px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
background: white;
margin-bottom: 10px;
border-radius: 4px;
transition: transform 0.2s ease;
}
.listing-item:hover {
transform: translateX(5px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.listing-item:last-child {
border-bottom: none;
}
.listing-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.listing-price {
font-size: 18px;
font-weight: bold;
color: #295758;
}
.listing-details {
font-size: 14px;
color: #666;
margin-top: 5px;
}
.listing-location {
font-size: 13px;
color: #a67c52;
margin-top: 3px;
}
.loading-spinner {
text-align: center;
padding: 40px;
color: #c19b76;
}
.no-results {
text-align: center;
padding: 40px;
color: #999;
font-style: italic;
}
/* Loading state for the grid */
.jet-listing-grid-loading,
.luxury-filter-loading {
opacity: 0.5;
transition: opacity 0.3s;
position: relative;
pointer-events: none;
min-height: 200px;
}
.jet-listing-grid-loading::after,
.luxury-filter-loading::after {
content: ”;
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
border: 3px solid #f3f3f3;
border-top: 3px solid #c19b52;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 9999;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Full width on all screens */
@media screen and (max-width: 1200px) {
.property-search {
gap: 30px;
}
}
@media screen and (max-width: 992px) {
.property-search {
gap: 20px;
padding: 25px;
}
.search-field {
min-width: 130px;
}
.search-field select {
min-width: 120px;
}
}
@media screen and (max-width: 768px) {
.property-search {
gap: 15px;
padding: 20px;
}
.search-field {
min-width: 100%;
width: 100%;
}
.search-field select {
min-width: 100%;
width: 100%;
}
.search-button {
width: 100%;
}
.search-button button {
width: 100%;
}
.jet-listing-results {
padding: 15px;
}
}

/* Start custom CSS for heading, class: .elementor-element-e7032cb */.price {
color: #808080 !important;
}/* End custom CSS */.elementor-21786 .elementor-element.elementor-element-9baa157{–display:flex;–flex-direction:column;–container-widget-width:100%;–container-widget-height:initial;–container-widget-flex-grow:0;–container-widget-align-self:initial;–flex-wrap-mobile:wrap;–padding-top:0px;–padding-bottom:30px;–padding-left:0px;–padding-right:0px;}.elementor-21786 .elementor-element.elementor-element-d818966{–divider-border-style:solid;–divider-color:var( –e-global-color-secondary );–divider-border-width:2.5px;margin:-20px 0px calc(var(–kit-widget-spacing, 0px) + 0px) 20px;}.elementor-21786 .elementor-element.elementor-element-d818966 .elementor-divider-separator{width:15%;}.elementor-21786 .elementor-element.elementor-element-d818966 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-21786 .elementor-element.elementor-element-d818966.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-21786 .elementor-element.elementor-element-ed30027 .xpro-featured-image img{height:400px;}.elementor-21786 .elementor-element.elementor-element-ed30027{margin:-35px 0px calc(var(–kit-widget-spacing, 0px) + 0px) 0px;}.elementor-21786 .elementor-element.elementor-element-ed30027.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-21786 .elementor-element.elementor-element-9f14ada .xpro-post-title{font-family:”Lato”, Sans-serif;font-size:25px;text-transform:uppercase;}.elementor-21786 .elementor-element.elementor-element-9f14ada{margin:0px 0px calc(var(–kit-widget-spacing, 0px) + 0px) 20px;}.elementor-21786 .elementor-element.elementor-element-9f14ada.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-21786 .elementor-element.elementor-element-4001bf1{–divider-border-style:solid;–divider-color:var( –e-global-color-secondary );–divider-border-width:2px;margin:-20px 0px calc(var(–kit-widget-spacing, 0px) + 0px) 20px;}.elementor-21786 .elementor-element.elementor-element-4001bf1 .elementor-divider-separator{width:25%;}.elementor-21786 .elementor-element.elementor-element-4001bf1 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-21786 .elementor-element.elementor-element-4001bf1.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-21786 .elementor-element.elementor-element-e7032cb{text-align:start;margin:-15px 0px calc(var(–kit-widget-spacing, 0px) + 0px) 20px;width:100%;max-width:100%;}.elementor-21786 .elementor-element.elementor-element-e7032cb .elementor-heading-title{font-family:”Poppins”, Sans-serif;font-size:25px;font-weight:300;letter-spacing:2px;color:var( –e-global-color-1c5cefc );}.elementor-21786 .elementor-element.elementor-element-e7032cb.elementor-element{–align-self:flex-start;}.elementor-21786 .elementor-element.elementor-element-e7032cb.xpro-widget-bg-overlay:before{transition:background 0.3s;}div.onepage_scroll_nav{display:block;}@media(max-width:1024px){.elementor-21786 .elementor-element.elementor-element-9baa157{–padding-top:0px;–padding-bottom:35px;–padding-left:0px;–padding-right:0px;}.elementor-21786 .elementor-element.elementor-element-ed30027{padding:0px 0px 0px 0px;}.elementor-21786 .elementor-element.elementor-element-4001bf1 .elementor-divider-separator{width:20%;}}@media(max-width:767px){.elementor-21786 .elementor-element.elementor-element-9baa157{–padding-top:0px;–padding-bottom:30px;–padding-left:0px;–padding-right:0px;}.elementor-21786 .elementor-element.elementor-element-ed30027 .xpro-featured-image img{height:280px;}.elementor-21786 .elementor-element.elementor-element-9f14ada .xpro-post-title{font-size:20px;}.elementor-21786 .elementor-element.elementor-element-e7032cb .elementor-heading-title{font-size:20px;}}/* Start custom CSS for heading, class: .elementor-element-e7032cb */.price {
color: #808080 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9baa157 *//* =========================
MAIN ARCHITECTURAL CARD
========================= */
.elementor-21786 .elementor-element.elementor-element-9baa157{
background:#fbf9f5;
overflow:hidden;
display:flex;
flex-direction:column;
width:100%;
cursor:pointer;
position:relative;
/* architectural clean edges */
border-radius:0;
border-left:4px solid #295758;
/* smooth animation */
transition:
transform .55s cubic-bezier(.19,1,.22,1),
box-shadow .55s ease,
background .45s ease;
/* layered luxury shadow */
box-shadow:
0 10px 25px -10px rgba(41,87,88,.35),
0 30px 60px -25px rgba(0,0,0,.25);
}
/* =========================
GOLD TOP ACCENT
========================= */
.elementor-21786 .elementor-element.elementor-element-9baa157::before{
content:””;
position:absolute;
top:0;
left:0;
width:0%;
height:4px;
/* richer gold gradient */
background:linear-gradient(
90deg,
#C19B76,
#E6C9A8,
#C19B76
);
transition:width .6s cubic-bezier(.19,1,.22,1);
}
.elementor-21786 .elementor-element.elementor-element-9baa157:hover::before{
width:100%;
}
/* =========================
HOVER ELEVATION
========================= */
.elementor-21786 .elementor-element.elementor-element-9baa157:hover{
transform:translateY(-14px);
background:
linear-gradient(
180deg,
#fbf9f5 0%,
rgba(41,87,88,.05) 100%
);
/* deeper luxury shadow */
box-shadow:
0 20px 40px -10px rgba(41,87,88,.45),
0 45px 90px -30px rgba(193,155,118,.45);
}
/* =========================
IMAGE ZOOM
========================= */
.elementor-21786 .elementor-element.elementor-element-9baa157 img{
transition:transform 1.2s cubic-bezier(.19,1,.22,1);
}
.elementor-21786 .elementor-element.elementor-element-9baa157:hover img{
transform:scale(1.1);
}
/* =========================
LUXURY REFLECTION SWEEP
========================= */
.elementor-21786 .elementor-element.elementor-element-9baa157::after{
content:””;
position:absolute;
top:0;
left:-130%;
width:45%;
height:100%;
background:linear-gradient(
110deg,
transparent,
rgba(255,255,255,.45),
transparent
);
transition:left 1.1s cubic-bezier(.19,1,.22,1);
}
.elementor-21786 .elementor-element.elementor-element-9baa157:hover::after{
left:130%;
}
/* =========================
MOBILE OPTIMIZATION
========================= */
@media (max-width:767px){
.elementor-21786 .elementor-element.elementor-element-9baa157{
box-shadow:
0 8px 18px -6px rgba(41,87,88,.35),
0 20px 40px -20px rgba(0,0,0,.25);
}
.elementor-21786 .elementor-element.elementor-element-9baa157:hover{
transform:translateY(-6px);
}
}/* End custom CSS */

PROPERTIES

Mar de Pulpi

Torre de la Horadada

Playa Flamenca – Orihuela Costa

Ciudad Quesada

Torre de la Horadada

Ciudad Quesada

Benitachell – Cumbre del Sol

Altea

Altea

Ciudad Quesada

Benitachell – Cumbre del Sol

Benitachell – Cumbre del Sol

Las Colinas Golf

La Finca Golf

Torre de la Horadada