html, body {
background-color: #000 !important;
color-scheme: dark;
}
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-thumb {
background-color: rgb(171, 170, 170);
border-radius: 10px;
}
#galleryItemsList::-webkit-scrollbar {
height: 10px;
width: 10px;
}
#galleryItemsList::-webkit-scrollbar-track {
background: transparent;
}
#galleryItemsList::-webkit-scrollbar-thumb {
background-color: #3b82f6;
border-radius: 9999px;
border: 2px solid transparent;
background-clip: content-box;
}
#galleryItemsList::-webkit-scrollbar-thumb:hover {
background-color: #2563eb;
}
/* Default visible */
.heading-desktop {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
/* Hide or fade out when overlay is active */
body.overlay-active .heading-desktop {
opacity: 0;
pointer-events: none;
}
.device-rotation {
display: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.device-rotation {
display: flex;
}
}
/* Add these rules to your external stylesheet: ./css/style.css */
/* 1. Define the visual feedback for when the villa is clicked and held */
[id^="Villa_"]:active polygon {
/* Slightly different color/effect for the brief click moment */
fill: rgba(255, 255, 0, 0.45) !important; /* Brighter, e.g., yellow/amber */
stroke-width: 4; /* Even thicker border */
stroke-opacity: 1;
}
/* 2. Define the persistent 'Selected' or 'Active' state (likely set by JavaScript) */
/* Assuming your JavaScript adds the 'active' class to the SVG group when selected */
[id^="Villa_"].active polygon,
[id^="Villa_"].selected polygon { /* Use both to be safe, depending on JS naming */
/* Distinct color for the currently selected villa */
fill: rgba(255, 255, 255, 0.4) !important; /* Solid White/Light Grey fill */
stroke: #ffffff;
stroke-width: 4;
stroke-opacity: 1;
}
/* Ensure the hover effect still works when a villa is already active/selected */
/* This ensures the user can hover over the selected villa and see the hover state */
[id^="Villa_"].active:hover polygon,
[id^="Villa_"].selected:hover polygon {
fill: rgba(255, 255, 255, 0.5) !important; /* Slightly denser fill on hover of active state */
}
/* RETAIN YOUR EXISTING HOVER FOR NON-ACTIVE VILLAS: */
[id^="Villa_"]:hover polygon {
fill: rgba(0, 200, 200, 0.35) !important;
stroke: #fff;
stroke-width: 3;
stroke-opacity: 1;
}
/* Add this to your style.css or in a