/*
Theme Name: Amuli Child
Theme URI: https://example.com
Description: Дочірня тема для Amuli
Author: Max Prokofiev
Author URI: https://example.com
Template: amuli
Version: 1.0.0
Text Domain: amuli-child
*/
.logo_image{
max-width: 115px!important; /* або бажана ширина */
height: auto!important; /* зберігає пропорції */
object-fit: contain!important; /* запобігає деформації */
transition: all 0.3s ease!important;
}
.properties_page_title_meta{
display: none !important;
}
.sc_properties_slider_data_price{
display: none !important;
}
/* Modern Card Styles for Dark Scheme Elementor Columns */
.elementor-column.scheme_dark {
transition: box-shadow 0.3s ease; /* Modified to remove transform transitions */
/*border-radius: 12px;*/
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
}
.elementor-column.scheme_dark:hover {
/* transform: translateY(-10px); -- Removed zoom effect as requested */
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}
/* Add a subtle glow effect on hover */
.elementor-column.scheme_dark:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 12px;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.elementor-column.scheme_dark:hover:after {
opacity: 1;
}
/* Style the content inside the card */
.elementor-column.scheme_dark .elementor-widget-wrap {
padding: 25px !important;
}
.elementor-column.scheme_dark h1,
.elementor-column.scheme_dark h2,
.elementor-column.scheme_dark h3,
.elementor-column.scheme_dark h4,
.elementor-column.scheme_dark h5,
.elementor-column.scheme_dark h6 {
color: #ffffff;
margin-bottom: 15px;
position: relative;
}
.elementor-column.scheme_dark h3:after,
.elementor-column.scheme_dark h4:after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #4CAF50, #8BC34A);
transition: width 0.3s ease;
}
.elementor-column.scheme_dark:hover h3:after,
.elementor-column.scheme_dark:hover h4:after {
width: 60px;
}
.elementor-column.scheme_dark p {
color: #e0e0e0;
line-height: 1.6;
margin-bottom: 20px;
}
/* Style buttons inside the card */
.elementor-column.scheme_dark .elementor-button {
background: linear-gradient(90deg, #4CAF50, #8BC34A);
border: none;
border-radius: 30px;
padding: 12px 25px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: box-shadow 0.3s ease, background 0.3s ease; /* Modified to remove transform transitions */
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.elementor-column.scheme_dark .elementor-button:hover {
/* transform: translateY(-3px); - removed zoom effect */
box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
}
/* Add a subtle pattern overlay */
.elementor-column.scheme_dark:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
/* Add a subtle border */
.elementor-column.scheme_dark {
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* Style icons inside the card */
.elementor-column.scheme_dark .elementor-icon {
background: linear-gradient(135deg, #4CAF50, #8BC34A);
border-radius: 50%;
padding: 20px;
box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
transition: box-shadow 0.3s ease; /* Modified to remove transform transitions */
}
.elementor-column.scheme_dark .elementor-icon i {
color: white !important;
/* transition: transform 0.3s ease; - removed transform transition */
}
.elementor-column.scheme_dark:hover .elementor-icon {
box-shadow: 0 12px 25px rgba(76, 175, 80, 0.4);
}
.elementor-column.scheme_dark:hover .elementor-icon i {
/* transform: scale(1.1); - removed zoom effect */
}
/* Style images inside the card */
.elementor-column.scheme_dark img {
border-radius: 8px;
transition: box-shadow 0.3s ease; /* Modified to remove transform transitions */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.elementor-column.scheme_dark:hover img {
/* transform: scale(1.03); - removed zoom effect */
}
/* Add a cool hover effect for links */
.elementor-column.scheme_dark a:not(.elementor-button) {
color: #8BC34A;
position: relative;
text-decoration: none;
transition: all 0.3s ease;
}
.elementor-column.scheme_dark a:not(.elementor-button):after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #4CAF50;
transition: width 0.3s ease;
}
.elementor-column.scheme_dark a:not(.elementor-button):hover {
color: #4CAF50;
}
.elementor-column.scheme_dark a:not(.elementor-button):hover:after {
width: 100%;
}
/* Add a cool list style */
.elementor-column.scheme_dark ul {
list-style: none;
padding-left: 0;
}
.elementor-column.scheme_dark ul li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
color: #e0e0e0;
}
.elementor-column.scheme_dark ul li:before {
content: '✓';
position: absolute;
left: 0;
color: #4CAF50;
font-weight: bold;
}
.khvoya-floor-selector {
padding-bottom: 45px!important;
}
.featherlight-content{
border-radius: 10px;
}
/* Responsive adjustments */
/* Modern Section Styles for Elementor Sections with Parallax */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited {
position: relative;
overflow: hidden;
box-shadow: none; /* Removed shadow as requested */
border-radius: 16px;
margin: 30px auto;
transition: all 0.3s ease;
background: linear-gradient(135deg, #f8f9fa, #ffffff);
border: 1px solid rgba(76, 175, 80, 0.1);
}
/* Add a subtle green glow effect */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
box-shadow: none; /* Removed green glow shadow as requested */
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 1;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover:after {
opacity: 1;
}
/* Add a subtle pattern overlay */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234CAF50' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 20L20 0L40 20L20 40z'/%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
}
/* Style the content inside the section */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-container {
padding: 40px 30px;
position: relative;
z-index: 2;
}
/* Style headings inside the section */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h1,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h2,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h3,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h4,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h5,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h6 {
color: #333333;
position: relative;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover h2,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover h3 {
transform: translateY(-5px);
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h2:after,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h3:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
/*background: linear-gradient(90deg, #4CAF50, #8BC34A);*/
transition: width 0.3s ease;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover h2:after,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover h3:after {
width: 100px;
}
/* Style paragraphs inside the section */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited p {
color: #ffffff;
line-height: 1.7;
margin-bottom: 20px;
}
/* Style buttons inside the section */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-button {
background: linear-gradient(90deg, #4CAF50, #8BC34A);
border: none;
border-radius: 30px;
padding: 14px 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
color: white;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-button:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
}
/* Style icons inside the section */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-icon {
background: linear-gradient(135deg, #4CAF50, #8BC34A);
border-radius: 50%;
padding: 25px;
box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
transition: all 0.3s ease;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-icon i {
color: white !important;
transition: transform 0.3s ease;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover .elementor-icon {
box-shadow: 0 12px 30px rgba(76, 175, 80, 0.4);
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover .elementor-icon i {
transform: scale(1.1);
}
/* Style images inside the section */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited img {
border-radius: 10px;
transition: all 0.4s ease;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover img {
transform: scale(1.03);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
/* Add a cool hover effect for links */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited a:not(.elementor-button) {
color: #4CAF50;
position: relative;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited a:not(.elementor-button):after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -3px;
left: 0;
background-color: #4CAF50;
transition: width 0.3s ease;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited a:not(.elementor-button):hover {
color: #8BC34A;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited a:not(.elementor-button):hover:after {
width: 100%;
}
/* Add a cool list style */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited ul {
list-style: none;
padding-left: 5px;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited ul li {
position: relative;
padding-left: 30px;
margin-bottom: 15px;
color: #555555;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited ul li:before {
content: '✓';
position: absolute;
left: 0;
color: #4CAF50;
font-weight: bold;
font-size: 1.2em;
}
/* Disabled zoom and shadow effects on hover as requested */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover {
transform: none;
box-shadow: none;
}
/* Performance optimizations for element-bd0a1df to improve scrolling FPS */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited {
will-change: transform; /* Optimize for animations by creating a new compositing layer */
backface-visibility: hidden; /* Reduce visual glitches */
-webkit-backface-visibility: hidden;
transform: translateZ(0); /* Force GPU acceleration */
-webkit-transform: translateZ(0);
perspective: 1000px; /* Improve 3D rendering */
-webkit-perspective: 1000px;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transitions */
overflow: hidden; /* Prevent content overflow */
contain: paint; /* Reduce paint operations during scrolling */
z-index: 1; /* Ensure proper stacking context for contain property */
}
/* Optimize child elements for better scrolling performance */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-container,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-widget-container {
backface-visibility: hidden; /* Reduce visual glitches */
-webkit-backface-visibility: hidden;
transform: translateZ(0); /* Force GPU acceleration */
-webkit-transform: translateZ(0);
}
/* Responsive adjustments for tablet */
/* Responsive adjustments for mobile */
/* Global Font Settings */
body,
h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, textarea, select, option,
li, ul, ol, table, th, td, blockquote, pre, code {
font-family: 'Nunito', sans-serif !important;
}
/* Ensure Nunito is applied to all elements, even those with !important declarations */
html {
--e-global-typography-primary-font-family: 'Nunito';
--e-global-typography-secondary-font-family: 'Nunito';
--e-global-typography-text-font-family: 'Nunito';
--e-global-typography-accent-font-family: 'Nunito';
}
/* Enhanced Typewriter effect styles */
.after-full-title {
display: inline-flex;
align-items: center;
min-height: 1.5em;
margin-top: 0.5em;
margin-bottom: 1em;
font-size: 1.8em; /* Increased size for more impact */
font-weight: 700; /* Bolder text */
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.3);
text-align: center;
width: 100%;
justify-content: center;
padding: 0 15px;
position: relative;
overflow: visible; /* Allow elements to be visible outside the container */
z-index: 3; /* Establish stacking context */
border-radius: 5px; /* Rounded corners */
/* Animated gradient background */
background: rgba(0, 0, 0, 0.2); /* Base background color */
background-image: linear-gradient(90deg,
rgba(76, 175, 80, 0) 0%,
rgba(76, 175, 80, 0.1) 25%,
rgba(139, 195, 74, 0.2) 50%,
rgba(76, 175, 80, 0.1) 75%,
rgba(76, 175, 80, 0) 100%);
background-size: 300% 100%;
background-position: 0% 0%;
animation: gradient-slide 8s linear infinite;
}
@keyframes gradient-slide {
0% { background-position: 0% 0%; }
100% { background-position: 100% 0%; }
}
.typewriter-text {
display: inline-block;
padding: 0 0.2em;
position: relative;
color: #ffffff;
font-family: 'Nunito', sans-serif;
letter-spacing: 0.05em;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 2px 2px 4px rgba(0, 0, 0, 0.7);
z-index: 5;
}
.typewriter-cursor {
display: inline-block;
margin-left: 2px;
font-weight: bold;
color: #4CAF50;
text-shadow: 0 0 8px rgba(76, 175, 80, 1), 0 0 12px rgba(255, 255, 255, 0.7);
font-size: 1.2em;
position: relative;
animation: cursor-blink 0.8s ease-in-out infinite alternate;
z-index: 5; /* Match the text z-index */
}
@keyframes cursor-blink {
0%, 45% {
opacity: 1;
transform: scaleY(1);
}
50%, 95% {
opacity: 0.8;
transform: scaleY(0.8);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
/* Add fixed leaf icons on both sides of the typewriter text */
.after-full-title::after {
content: '🍃';
font-size: 0.8em;
opacity: 0.8;
animation: leaf-sway 3s ease-in-out infinite;
position: absolute;
left: 20px; /* Fixed position on the left */
top: 0; /* Positioned at the top */
transform-origin: bottom;
z-index: 2; /* Above the gradient but below the text */
}
/* Add a right leaf with a different animation phase using a pseudo-element on the after-full-title */
.after-full-title::before {
content: '🍃';
font-size: 0.8em;
opacity: 0.8;
animation: leaf-sway-right 3s ease-in-out infinite;
position: absolute;
right: 20px; /* Fixed position on the right */
top: 0;
transform-origin: bottom;
z-index: 2; /* Same z-index as the left leaf */
}
@keyframes leaf-sway {
0%, 100% { transform: rotate(0deg) translateY(0); }
50% { transform: rotate(10deg) translateY(-5px); }
}
/* Animation for the right leaf with a slight delay for a more natural look */
@keyframes leaf-sway-right {
0%, 100% { transform: rotate(0deg) translateY(0); }
50% { transform: rotate(-10deg) translateY(-5px); } /* Negative rotation for mirror effect */
}
/* Front page section title caption and description - improved readability on green background and white house */
.front_page_section_title_caption,
.front_page_section_title_description {
color: #ffffff; /* White text for better contrast on green background */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.3); /* Enhanced shadow for better readability on both green and white backgrounds */
font-weight: 700; /* Bolder font for better visibility */
}
.front_page_section_title_caption {
font-size: 6.8em!important; /* Larger font size for the caption */
letter-spacing: 0.02em; /* Slightly increased letter spacing */
}
.front_page_section_title_description {
font-size: 4.2em!important; /* Slightly larger font size for the description */
line-height: 1.8em; /* Increased line height for better readability */
max-width: 800px; /* Limit width for better readability */
margin-left: auto;
margin-right: auto;
}
/* Responsive styles for typewriter effect */
/* News Cards Styles - Enhanced visual design */
.post_item,
.sc_blogger_item,
.post_layout_excerpt,
.post_layout_band {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
transition: all 0.4s ease;
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(76, 175, 80, 0.1);
position: relative;
padding-right: 25px;
padding-left: 25px;
padding-top: 0;
margin-bottom: 30px;
}
/* Enhanced hover effect */
.post_item:hover,
.sc_blogger_item:hover,
.post_layout_excerpt:hover,
.post_layout_band:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(76, 175, 80, 0.15);
border-color: rgba(76, 175, 80, 0.3);
}
/* Make the content wrapper take up all available space */
.post_item .post_content_wrap,
.sc_blogger_item .post_content_wrap,
.post_layout_excerpt .post_content_wrap,
.post_layout_band .post_content_wrap {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
}
/* Enhanced featured image styling */
.post_item .post_featured,
.sc_blogger_item .post_featured,
.post_layout_excerpt .post_featured,
.post_layout_band .post_featured {
height: 220px;
overflow: hidden;
position: relative;
border-radius: 12px 12px 0 0;
}
.post_item .post_featured:after,
.sc_blogger_item .post_featured:after,
.post_layout_excerpt .post_featured:after,
.post_layout_band .post_featured:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
opacity: 0.5;
transition: opacity 0.4s ease;
z-index: 1;
}
.post_item:hover .post_featured:after,
.sc_blogger_item:hover .post_featured:after,
.post_layout_excerpt:hover .post_featured:after,
.post_layout_band:hover .post_featured:after {
opacity: 0.7;
}
.post_item .post_featured img,
.sc_blogger_item .post_featured img,
.post_layout_excerpt .post_featured img,
.post_layout_band .post_featured img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.post_item:hover .post_featured img,
.sc_blogger_item:hover .post_featured img,
.post_layout_excerpt:hover .post_featured img,
.post_layout_band:hover .post_featured img {
/* transform: scale(1.05); - removed zoom effect */
}
/* Enhanced title styling with limit to 2 lines */
.post_item .post_title,
.sc_blogger_item .post_title,
.post_layout_excerpt .post_title,
.post_layout_band .post_title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 2.6em;
line-height: 1.3em;
margin-bottom: 1.2em;
font-weight: 600;
font-size: 1.2em;
color: #333;
transition: color 0.3s ease;
position: relative;
padding-bottom: 0.6em;
}
.post_item .post_title:after,
.sc_blogger_item .post_title:after,
.post_layout_excerpt .post_title:after,
.post_layout_band .post_title:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(90deg, #4CAF50, #8BC34A);
transition: width 0.3s ease;
}
.post_item:hover .post_title,
.sc_blogger_item:hover .post_title,
.post_layout_excerpt:hover .post_title,
.post_layout_band:hover .post_title {
color: #4CAF50;
}
.post_item:hover .post_title:after,
.sc_blogger_item:hover .post_title:after,
.post_layout_excerpt:hover .post_title:after,
.post_layout_band:hover .post_title:after {
width: 60px;
}
.post_item .post_title a,
.sc_blogger_item .post_title a,
.post_layout_excerpt .post_title a,
.post_layout_band .post_title a {
color: inherit;
text-decoration: none;
}
/* Enhanced excerpt styling with limit to 2 lines - decreased size */
.post_item .post_content_inner,
.sc_blogger_item .post_content_inner,
.post_layout_excerpt .post_content_inner,
.post_layout_band .post_content_inner,
.post_item .post_excerpt,
.sc_blogger_item .post_excerpt,
.post_layout_excerpt .post_excerpt,
.post_layout_band .post_excerpt {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 3em;
line-height: 1.5em;
margin-bottom: 1.5em;
color: #666;
font-size: 0.9em;
font-weight: 400;
letter-spacing: 0.01em;
}
/* Add category badges */
.post_item .post_featured .post_categories,
.sc_blogger_item .post_featured .post_categories,
.post_layout_excerpt .post_featured .post_categories,
.post_layout_band .post_featured .post_categories {
position: absolute;
top: 15px;
left: 15px;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.excerpt_1{
margin-top: 5em;
}
.post_item .post_featured .post_categories a,
.sc_blogger_item .post_featured .post_categories a,
.post_layout_excerpt .post_featured .post_categories a,
.post_layout_band .post_featured .post_categories a {
display: inline-block;
padding: 5px 10px;
background: linear-gradient(90deg, #4CAF50, #8BC34A);
color: #fff !important;
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 30px;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.post_item .post_featured .post_categories a:hover,
.sc_blogger_item .post_featured .post_categories a:hover,
.post_layout_excerpt .post_featured .post_categories a:hover,
.post_layout_band .post_featured .post_categories a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
background: linear-gradient(90deg, #3d9140, #7cb342);
}
/* Enhanced meta information styling */
.post_item .post_meta,
.sc_blogger_item .post_meta,
.post_layout_excerpt .post_meta,
.post_layout_band .post_meta {
margin-top: auto;
padding-top: 1.2em;
padding-bottom: 0.4em;
border-top: 1px solid rgba(76, 175, 80, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.85em;
}
/* Style the date consistently */
.post_meta_item.post_date,
.post_date,
.post_meta_item.post_date a,
.post_date a {
font-style: normal !important;
font-weight: 600;
color: #4CAF50 !important;
display: flex;
align-items: center;
}
/* Add calendar icon before date */
.post_meta_item.post_date:before,
.post_date:before {
content: "\f133" !important; /* Font Awesome calendar icon */
font-family: 'FontAwesome' !important;
display: inline-block !important;
margin-right: 5px;
color: #4CAF50;
font-size: 1.1em;
}
/* Add a read more link */
.post_item .more-link,
.sc_blogger_item .more-link,
.post_layout_excerpt .more-link,
.post_layout_band .more-link {
display: inline-flex;
align-items: center;
color: #4CAF50;
font-weight: 600;
font-size: 0.9em;
text-decoration: none;
transition: all 0.3s ease;
margin-top: 0.8em;
margin-bottom: 0.8em;
padding: 0.3em 0;
}
.post_item .more-link:after,
.sc_blogger_item .more-link:after,
.post_layout_excerpt .more-link:after,
.post_layout_band .more-link:after {
content: "\f061"; /* Font Awesome arrow right icon */
font-family: 'FontAwesome';
margin-left: 5px;
transition: transform 0.3s ease;
}
.post_item .more-link:hover,
.sc_blogger_item .more-link:hover,
.post_layout_excerpt .more-link:hover,
.post_layout_band .more-link:hover {
color: #8BC34A;
}
.post_item .more-link:hover:after,
.sc_blogger_item .more-link:hover:after,
.post_layout_excerpt .more-link:hover:after,
.post_layout_band .more-link:hover:after {
transform: translateX(3px);
}
/* Ensure consistent spacing in the cards */
.post_item .post_header,
.sc_blogger_item .post_header,
.post_layout_excerpt .post_header,
.post_layout_band .post_header {
padding: 0;
margin-top: 0;
margin-bottom: 1em;
}
.post_item .post_content,
.sc_blogger_item .post_content,
.post_layout_excerpt .post_content,
.post_layout_band .post_content {
padding: 2em;
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* Enhanced responsive adjustments */
@media (max-width: 1023px) {
/* Tablet adjustments */
.post_item,
.sc_blogger_item,
.post_layout_excerpt,
.post_layout_band {
border-radius: 10px;
margin-bottom: 25px;
}
.post_item .post_featured,
.sc_blogger_item .post_featured,
.post_layout_excerpt .post_featured,
.post_layout_band .post_featured {
height: 200px;
border-radius: 10px 10px 0 0;
}
.post_item:hover,
.sc_blogger_item:hover,
.post_layout_excerpt:hover,
.post_layout_band:hover {
transform: translateY(-6px);
}
.post_item .post_title,
.sc_blogger_item .post_title,
.post_layout_excerpt .post_title,
.post_layout_band .post_title {
font-size: 1.1em;
padding-bottom: 0.3em;
}
.post_item .post_title:after,
.sc_blogger_item .post_title:after,
.post_layout_excerpt .post_title:after,
.post_layout_band .post_title:after {
width: 35px;
}
.post_item:hover .post_title:after,
.sc_blogger_item:hover .post_title:after,
.post_layout_excerpt:hover .post_title:after,
.post_layout_band:hover .post_title:after {
width: 50px;
}
.post_item .post_featured .post_categories,
.sc_blogger_item .post_featured .post_categories,
.post_layout_excerpt .post_featured .post_categories,
.post_layout_band .post_featured .post_categories {
top: 12px;
left: 12px;
}
.post_item .post_featured .post_categories a,
.sc_blogger_item .post_featured .post_categories a,
.post_layout_excerpt .post_featured .post_categories a,
.post_layout_band .post_featured .post_categories a {
padding: 4px 8px;
font-size: 0.7em;
}
.post_item .post_content,
.sc_blogger_item .post_content,
.post_layout_excerpt .post_content,
.post_layout_band .post_content {
padding: 1.6em;
}
}
/* Optimized styles for parallax section with lag issue */
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 {
pointer-events: none !important; /* Disable mouse events on the parallax container */
will-change: transform; /* Optimize for animations by creating a new compositing layer */
backface-visibility: hidden; /* Reduce visual glitches */
-webkit-backface-visibility: hidden;
transform: translateZ(0); /* Force GPU acceleration */
-webkit-transform: translateZ(0);
perspective: 1000px; /* Improve 3D rendering */
-webkit-perspective: 1000px;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transitions */
overflow: hidden; /* Prevent content overflow */
}
/* Re-enable pointer events for child elements that need interaction */
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 a,
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 button,
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 .elementor-button,
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 input,
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 select,
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 textarea,
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 .elementor-widget-container {
pointer-events: auto !important; /* Re-enable pointer events for interactive elements */
}
/* Optimize parallax blocks inside the section */
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 .sc_parallax_block {
will-change: transform; /* Optimize for animations */
transform: translateZ(0); /* Force GPU acceleration */
-webkit-transform: translateZ(0);
backface-visibility: hidden; /* Reduce visual glitches */
-webkit-backface-visibility: hidden;
}
/* Reduce animation complexity for better performance on mobile */
@media (max-width: 767px) {
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 {
transform: none !important; /* Disable parallax effect on mobile for better performance */
-webkit-transform: none !important;
}
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 .sc_parallax_block {
transform: none !important; /* Disable parallax effect on mobile for better performance */
-webkit-transform: none !important;
opacity: 1 !important; /* Ensure content is visible */
}
}
/*
* Admin Panel Header Template Styles
* These styles are for the custom admin panel header template
*/
/* Main container for admin panel header */
.top_panel_custom_admin_panel {
background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 100;
}
/* Admin panel header layout container */
.admin_panel_header_layout {
width: 100%;
padding: 0;
margin: 0;
}
/* Admin panel header container */
.admin_panel_header_container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Admin panel header row */
.admin_panel_header_row {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
}
/* Admin panel header logo section */
.admin_panel_header_logo {
flex: 0 0 auto;
margin-right: 30px;
}
/* Admin panel header navigation section */
.admin_panel_header_nav {
flex: 1 1 auto;
}
/* Admin panel header controls section */
.admin_panel_header_controls {
flex: 0 0 auto;
margin-left: 30px;
display: flex;
align-items: center;
}
/* Admin panel user menu */
.admin_panel_user_menu,
.admin_panel_login_menu {
display: flex;
align-items: center;
gap: 15px;
}
/* Admin panel links */
.admin_panel_admin_link,
.admin_panel_logout_link,
.admin_panel_login_link,
.admin_panel_register_link {
display: inline-flex;
align-items: center;
padding: 8px 15px;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
}
/* Admin link */
.admin_panel_admin_link {
background-color: #4CAF50;
color: #ffffff;
}
.admin_panel_admin_link:hover {
background-color: #3d9140;
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}
/* Logout link */
.admin_panel_logout_link {
background-color: #f5f5f5;
color: #333333;
}
.admin_panel_logout_link:hover {
background-color: #e0e0e0;
color: #000000;
}
/* Login link */
.admin_panel_login_link {
background-color: #4CAF50;
color: #ffffff;
}
.admin_panel_login_link:hover {
background-color: #3d9140;
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}
/* Register link */
.admin_panel_register_link {
background-color: #f5f5f5;
color: #333333;
}
.admin_panel_register_link:hover {
background-color: #e0e0e0;
color: #000000;
}
/* Icons in admin panel links */
.admin_panel_admin_link i,
.admin_panel_logout_link i,
.admin_panel_login_link i,
.admin_panel_register_link i {
margin-right: 5px;
}
/* Responsive styles for admin panel header */
@media (max-width: 1023px) {
/* Tablet adjustments */
.admin_panel_header_row {
height: 70px;
}
.admin_panel_header_container {
padding: 0 15px;
}
.admin_panel_admin_link,
.admin_panel_logout_link,
.admin_panel_login_link,
.admin_panel_register_link {
padding: 6px 12px;
font-size: 13px;
}
.admin_panel_user_menu,
.admin_panel_login_menu {
gap: 10px;
}
}
/* ==============================
Khvoya: Property status badges
==============================
Improve visibility and styling of the “Вільно / Продано” labels
without touching parent/plugin files. These rules target TRX Addons
Properties components and ensure the text never appears hidden.
*/
/* Generic status pill */
.properties_page_title .properties_page_status > a,
.sc_properties_item_status > a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
font-size: 12px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #ffffff !important; /* Ensure readable text */
background-color: #2e7d32; /* Default: eco green (Available) */
font-family: inherit !important; /* Avoid icon-font inheritance */
white-space: nowrap; /* Keep short and tidy */
}
/* Hover keeps contrast */
.properties_page_title .properties_page_status > a:hover,
.sc_properties_item_status > a:hover {
color: #ffffff !important;
opacity: 0.95;
}
/* Sold state variations (match typical slugs) */
.properties_page_title .properties_page_status > a[href*="sold"],
.sc_properties_item_status > a[href*="sold"],
.properties_page_title .properties_page_status > a[href*="prodano"],
.sc_properties_item_status > a[href*="prodano"],
.properties_page_title .properties_page_status > a[href*="sold-out"],
.sc_properties_item_status > a[href*="sold-out"] {
background-color: #2b2f36; /* Dark slate for Sold */
color: #ffffff !important;
}
/* Available / Free state variations */
.properties_page_title .properties_page_status > a[href*="available"],
.sc_properties_item_status > a[href*="available"],
.properties_page_title .properties_page_status > a[href*="free"],
.sc_properties_item_status > a[href*="free"],
.properties_page_title .properties_page_status > a[href*="vilno"],
.sc_properties_item_status > a[href*="vilno"] {
background-color: #2e7d32; /* Eco green */
color: #ffffff !important;
}
/* Ensure status in lists has some spacing */
.sc_properties_item_status { margin-top: 0.3em; }
/* Responsive touch-ups (inherit defaults; keep pill readable) */
@media (max-width: 768px) {
.properties_page_title .properties_page_status > a,
.sc_properties_item_status > a { font-size: 11px; padding: 5px 10px; }
}
/* Khvoya: ensure button text is perfectly centered in popups (e.g., "Детальніше") */
.mfp-content .sc_button,
.mfp-content a.sc_button,
.mfp-content button.sc_button,
.mfp-content .sc_button.sc_button_bordered,
.mfp-content .sc_button.sc_button_simple {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.2; /* override parent fixed 22px line-height */
text-align: center;
}
/* ================================================
Khvoya Floor Selector (green & white modern style)
Usage: [khvoya_floor_selector]
================================================ */
.khvoya-floor-selector {
--khvoya-green-700: #1d652e;
--khvoya-green-600: #2e7d32;
--khvoya-green-500: #4CAF50;
--khvoya-green-400: #66BB6A;
--khvoya-green-300: #81C784;
--khvoya-gray-50: #f9fbf9;
--khvoya-gray-100: #f3f7f3;
--khvoya-shadow: 0 8px 24px rgba(29, 101, 46, 0.12);
margin: 2rem 0;
padding: 1.5rem;
background: #ffffff;
border-radius: 16px;
border: 1px solid rgba(76, 175, 80, 0.15);
box-shadow: var(--khvoya-shadow);
}
.khvoya-floor-selector__title {
margin: 0 0 1rem;
font-weight: 700;
font-size: 1.25rem;
line-height: 1.3;
text-align: center;
color: var(--khvoya-green-700);
}
.khvoya-floor-selector__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.khvoya-floor-selector__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
min-height: 48px;
text-decoration: none;
font-weight: 700;
color: var(--khvoya-green-700);
background: var(--khvoya-gray-100);
border-radius: 12px;
border: 2px solid transparent;
box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.15);
transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.khvoya-floor-selector__button:hover {
background: #ffffff;
color: var(--khvoya-green-700);
border-color: var(--khvoya-green-400);
box-shadow: 0 6px 16px rgba(76, 175, 80, 0.20);
transform: translateY(-1px);
}
.khvoya-floor-selector__button:focus-visible {
outline: none;
border-color: var(--khvoya-green-500);
box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.25);
}
.khvoya-floor-selector__button:active {
transform: translateY(0);
box-shadow: 0 3px 10px rgba(76, 175, 80, 0.18);
}
.khvoya-floor-selector__button-text {
letter-spacing: 0.2px;
}
/* Responsive tweaks per project breakpoints */
@media (min-width: 1024px) {
.khvoya-floor-selector { padding: 2rem; }
.khvoya-floor-selector__title { font-size: 1.35rem; }
.khvoya-floor-selector__grid { gap: 14px; }
}
@media (max-width: 768px) {
.khvoya-floor-selector__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.khvoya-floor-selector__button { min-height: 44px; padding: 10px 14px; font-weight: 600; }
}
/* Popup-specific overrides for Floor Selector to avoid double card inside modal */
.mfp-content .khvoya-floor-selector,
.sc_popup .khvoya-floor-selector {
background: transparent;
border: 0;
box-shadow: none;
padding: 0 0 12px;
margin: 0;
}
/* In popup, render buttons in responsive grid (side-by-side on wide, stacked on mobile) */
.mfp-content .khvoya-floor-selector__grid,
.sc_popup .khvoya-floor-selector__grid {
display: grid !important;
gap: 16px;
grid-template-columns: repeat(2, minmax(160px, 1fr));
width: 100%;
}
@media (min-width: 1024px) {
.mfp-content .khvoya-floor-selector__grid,
.sc_popup .khvoya-floor-selector__grid {
grid-template-columns: repeat(3, minmax(160px, 1fr));
}
}
@media (max-width: 768px) {
.mfp-content .khvoya-floor-selector__grid,
.sc_popup .khvoya-floor-selector__grid {
grid-template-columns: 1fr;
}
}
.mfp-content .khvoya-floor-selector__button,
.sc_popup .khvoya-floor-selector__button {
min-height: 48px;
font-weight: 700;
}
/* Keep regular layout elsewhere */
.khvoya-floor-selector { max-width: 780px; margin-left: auto; margin-right: auto; }
/* Robustness: if editors add
between items, hide them so they don't occupy grid cells */
.khvoya-floor-selector__grid > br,
.mfp-content .khvoya-floor-selector__grid > br,
.sc_popup .khvoya-floor-selector__grid > br { display: none !important; }
/* Khvoya: Red action button when apartment status is "Продано" */
.khvoya-apartment-slide .khvoya-apartment-button.khvoya-btn--sold,
.khvoya-apartment-button.khvoya-btn--sold {
background-color: #e53935;
color: #ffffff;
border: 2px solid #e53935;
box-shadow: 0 4px 12px rgba(229, 57, 53, 0.25);
transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .12s ease;
}
.khvoya-apartment-slide .khvoya-apartment-button.khvoya-btn--sold:hover,
.khvoya-apartment-button.khvoya-btn--sold:hover {
background-color: #c62828;
border-color: #c62828;
box-shadow: 0 6px 16px rgba(198, 40, 40, 0.32);
transform: translateY(-1px);
}
.khvoya-apartment-slide .khvoya-apartment-button.khvoya-btn--sold:focus-visible,
.khvoya-apartment-button.khvoya-btn--sold:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.25);
}
.khvoya-apartment-slide .khvoya-apartment-button.khvoya-btn--sold:active,
.khvoya-apartment-button.khvoya-btn--sold:active {
transform: translateY(0);
box-shadow: 0 3px 10px rgba(229, 57, 53, 0.28);
}
/* Floor Selector: Red button when floor's property is "Продано" */
.khvoya-floor-selector__button.khvoya-floor-selector__button--sold,
.mfp-content .khvoya-floor-selector__button.khvoya-floor-selector__button--sold,
.sc_popup .khvoya-floor-selector__button.khvoya-floor-selector__button--sold {
background-color: #e53935;
color: #ffffff;
border-color: #e53935;
box-shadow: 0 4px 12px rgba(229, 57, 53, 0.25);
transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .12s ease;
pointer-events: none; /* prevent clicks to avoid accidental overlay actions */
cursor: not-allowed;
}
.khvoya-floor-selector__button.khvoya-floor-selector__button--sold:hover,
.mfp-content .khvoya-floor-selector__button.khvoya-floor-selector__button--sold:hover,
.sc_popup .khvoya-floor-selector__button.khvoya-floor-selector__button--sold:hover {
background-color: #c62828;
border-color: #c62828;
box-shadow: 0 6px 16px rgba(198, 40, 40, 0.32);
transform: none; /* keep stable since disabled */
}
.khvoya-floor-selector__button.khvoya-floor-selector__button--sold:focus-visible,
.mfp-content .khvoya-floor-selector__button.khvoya-floor-selector__button--sold:focus-visible,
.sc_popup .khvoya-floor-selector__button.khvoya-floor-selector__button--sold:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.25);
}
.khvoya-floor-selector__button.khvoya-floor-selector__button--sold:active,
.mfp-content .khvoya-floor-selector__button.khvoya-floor-selector__button--sold:active,
.sc_popup .khvoya-floor-selector__button.khvoya-floor-selector__button--sold:active {
transform: none;
box-shadow: 0 3px 10px rgba(229, 57, 53, 0.28);
}
/* Avoid duplicate status overlays inside property cards/popups */
/* If our custom red SOLD button is visible, hide the default TRX Addons status pill inside the same popup/card */
.sc_popup .properties_page_title .properties_page_status,
.mfp-content .properties_page_title .properties_page_status {
display: none !important;
}
/* In sliders/cards, ensure our action button doesn't overlap the default status */
.khvoya-apartment-slide .sc_properties_item_status { display: none !important; }
/* About Us Title: dark overlay behind text for better readability over images */
.about-us-title,
.about-us__title {
position: relative;
display: inline-block; /* keep background snug to the text */
color: #ffffff; /* ensure white text */
z-index: 0; /* create a stacking context for the overlay */
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); /* extra readability on busy photos */
}
.about-us-title::before,
.about-us__title::before {
content: '';
position: absolute;
inset: -6px -12px; /* slight padding around text */
background: rgba(0, 0, 0, 0.35); /* semi-transparent dark backdrop */
border-radius: 12px; /* soft corners to match modern style */
z-index: -1; /* place behind the text */
}
/* Increase contrast on small screens where text overlaps more of the image */
@media (max-width: 768px) {
.about-us-title::before,
.about-us__title::before {
background: rgba(0, 0, 0, 0.48);
}
}
/* ==============================
Khvoya Metrics (Semi-circle Gauges)
============================== */
.khv-metrics {
--khv-green: #4CAF50;
--khv-green-2: #2e7d32;
--khv-bg: #ffffff;
--khv-muted: #7a8a7a;
color: #1c1c1c;
text-align: center;
clear: both;
display: block;
}
.khv-metrics-title {
margin: 0 0 24px 0;
font-weight: 700;
color: #1f3b1f;
text-align: center;
}
.khv-metrics-grid {
display: flex;
gap: 24px;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
}
.khv-metrics-grid.cols-1 { grid-template-columns: 1fr; }
.khv-metrics-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.khv-metrics-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.khv-metrics-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Responsive breakpoints per guideline */
@media (max-width: 1023px) {
.khv-metrics-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.khv-metrics-grid.cols-4,
.khv-metrics-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.khv-metrics-grid [class^="cols-"] { grid-template-columns: 1fr; }
.khv-metrics-grid { grid-template-columns: 1fr !important; }
}
.khv-metric {
background: var(--khv-bg);
border: 1px solid rgba(76, 175, 80, 0.15);
border-radius: 14px;
padding: 22px 18px 18px;
box-shadow: 0 6px 24px rgba(76, 175, 80, 0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 240px;
width: 280px;
}
.khv-metric:hover {
/* Remove vertical shift to avoid layout jitter */
box-shadow: 0 10px 34px rgba(76, 175, 80, 0.18);
}
.khv-metric-gauge {
position: relative;
width: 180px;
height: 110px;
margin: 0 auto 10px;
}
.khv-metric-svg { display: block; width: 180px; height: 100px; }
.khv-metric-arc-bg { stroke: #e9f5ea; }
.khv-metric-arc {
stroke: var(--khv-green);
stroke-linecap: round;
transition: stroke-dashoffset 0.3s ease;
}
.khv-metric-center {
position: absolute;
left: 50%;
top: 42%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.khv-metric-center i {
color: var(--khv-green-2);
font-size: 28px;
}
.khv-metric-value {
margin: 0 0 40px 10px;
font-weight: 800;
font-size: 24px;
color: #2a3d2a;
}
.post_meta{
display: inline-table;
}
.khv-metric-label {
text-align: center;
font-weight: 600;
color: #2a3d2a;
}
/* Dark backgrounds compatibility */
.scheme_dark .khv-metric {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.1);
}
.scheme_dark .khv-metric-label,
.scheme_dark .khv-metric-value { color: #f5fff5; }
.scheme_dark .khv-metric-arc-bg { stroke: rgba(255,255,255,0.15); }
/* ==============================
Khvoya Stats (shortcode [kh_stat] / [kh_stats])
============================== */
.kh-stats { color: #1f2d22; }
.kh-stats-title {
margin: 0 0 18px 0;
font-weight: 700;
color: #1f2d22;
}
.kh-stats-grid {
display: grid;
gap: 18px;
}
.kh-stats-grid.cols-1 { grid-template-columns: 1fr; }
.kh-stats-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.kh-stats-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kh-stats-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.kh-stat {
--kh-stat-accent: #2e7d32;
--kh-stat-accent-soft: rgba(46,125,50,0.12);
position: relative;
background: #ffffff;
border: 1px solid #e4efe7;
border-radius: 16px;
padding: 18px 18px 16px;
box-shadow: 0 10px 30px rgba(46,125,50,0.08);
overflow: hidden;
min-height: 200px;
}
.kh-stat::before {
content: '';
position: absolute;
width: 140px;
height: 140px;
right: -60px;
top: -60px;
border-radius: 50%;
background: radial-gradient(circle, var(--kh-stat-accent-soft), rgba(46,125,50,0));
}
.kh-stat-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.kh-stat-icon {
width: 46px;
height: 46px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--kh-stat-accent-soft);
color: var(--kh-stat-accent);
font-size: 20px;
}
.kh-stat-value {
font-size: 34px;
font-weight: 800;
color: #1f2d22;
letter-spacing: -0.02em;
display: flex;
align-items: baseline;
gap: 4px;
}
.kh-stat-value small {
font-size: 16px;
font-weight: 700;
color: #496050;
}
.kh-stat-label {
font-weight: 700;
color: #2a3a2e;
margin-bottom: 6px;
}
.kh-stat-note {
font-size: 13px;
color: #6b7b70;
margin-bottom: 10px;
}
.kh-stat-bar {
height: 8px;
background: #eef5ef;
border-radius: 999px;
overflow: hidden;
}
.kh-stat-bar span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--kh-stat-accent), #8fd49b);
border-radius: 999px;
transition: width 1.2s ease;
}
.kh-stat.is-animated .kh-stat-bar span {
width: calc(var(--kh-stat-value, 0) * 1%);
}
.kh-stat--tone-forest { --kh-stat-accent: #1f6a3a; --kh-stat-accent-soft: rgba(31,106,58,0.14); }
.kh-stat--tone-lime { --kh-stat-accent: #5da83f; --kh-stat-accent-soft: rgba(93,168,63,0.18); }
.kh-stat--tone-earth { --kh-stat-accent: #4b7d5b; --kh-stat-accent-soft: rgba(75,125,91,0.16); }
.kh-stat--tone-leaf { --kh-stat-accent: #2e7d32; --kh-stat-accent-soft: rgba(46,125,50,0.12); }
@media (max-width: 1023px) {
.kh-stats-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.kh-stats-grid.cols-4,
.kh-stats-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.kh-stats-grid { grid-template-columns: 1fr; }
}
/* ==============================
Khvoya About + Metrics (shortcode [kh_about_metrics])
============================== */
.kh-about-metrics {
--kh-am-green: #2e7d32;
--kh-am-green-2: #7CB67A;
--kh-am-border: #e1eee5;
--kh-am-text: #1f2d22;
--kh-am-muted: #58695d;
position: relative;
border: 1px solid var(--kh-am-border);
border-radius: 22px;
padding: 40px;
background: linear-gradient(135deg, #f6fbf7 0%, #ffffff 55%, #eef7f0 100%);
box-shadow: 0 20px 60px rgba(46, 125, 50, 0.08);
overflow: hidden;
}
.kh-about-metrics::before,
.kh-about-metrics::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
opacity: 0.6;
}
.kh-about-metrics::before {
width: 320px;
height: 320px;
top: -140px;
right: -120px;
background: radial-gradient(circle, rgba(124,182,122,0.35), rgba(124,182,122,0));
}
.kh-about-metrics::after {
width: 240px;
height: 240px;
bottom: -120px;
left: -80px;
background: radial-gradient(circle, rgba(46,125,50,0.22), rgba(46,125,50,0));
}
.kh-am-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 32px;
align-items: center;
}
.kh-am-content { color: var(--kh-am-text); }
.kh-am-kicker {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kh-am-green);
margin: 0 0 8px 0;
}
.kh-am-title {
margin: 0 0 12px 0;
font-size: 30px;
line-height: 1.2;
color: var(--kh-am-text);
}
.kh-am-lead {
margin: 0 0 12px 0;
font-size: 16px;
color: var(--kh-am-muted);
}
.kh-am-text p {
margin: 0 0 12px 0;
color: var(--kh-am-muted);
}
.kh-am-text p:last-child { margin-bottom: 0; }
.kh-am-text ul {
margin: 14px 0 0 0;
padding-left: 18px;
color: var(--kh-am-muted);
}
.kh-am-text li { margin: 0 0 6px 0; }
.kh-am-metrics {
background: rgba(255,255,255,0.85);
border: 1px solid var(--kh-am-border);
border-radius: 18px;
padding: 22px;
backdrop-filter: blur(6px);
box-shadow: 0 16px 36px rgba(46,125,50,0.08);
}
.kh-am-metrics-title {
margin: 0 0 14px 0;
font-weight: 700;
color: var(--kh-am-text);
}
.kh-about-metrics .khv-metrics-grid {
display: grid;
gap: 16px;
justify-items: stretch;
}
.kh-about-metrics .khv-metrics-grid.cols-1 { grid-template-columns: 1fr; }
.kh-about-metrics .khv-metrics-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.kh-about-metrics .khv-metrics-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kh-about-metrics .khv-metrics-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.kh-about-metrics .khv-metric {
width: 100%;
min-height: 210px;
border-radius: 16px;
border-color: rgba(46,125,50,0.15);
box-shadow: 0 12px 28px rgba(46,125,50,0.1);
}
.kh-about-metrics .khv-metric:hover {
box-shadow: 0 16px 36px rgba(46,125,50,0.16);
}
.kh-about-metrics .khv-metric-value { margin: 0 0 34px 0; }
.kh-about-metrics .khv-metric-label { font-weight: 700; }
.kh-about-metrics .kh-stat { min-height: 210px; }
.kh-about-metrics .kh-stat-bar { margin-top: 6px; }
.kh-about-metrics .kh-stats { margin: 0; }
.kh-about-metrics .kh-stats-title { margin: 0 0 12px 0; }
.kh-about-metrics .kh-stats-grid { margin: 0; }
.kh-am-full .kh-am-inner {
grid-template-columns: 1fr;
}
.kh-am-full .kh-am-metrics {
margin-top: 18px;
width: 100%;
}
.kh-am-metrics-list {
margin: 14px 0 0 0;
padding-left: 18px;
color: var(--kh-am-muted);
display: grid;
gap: 6px;
}
.kh-am-metrics-list strong {
color: var(--kh-am-text);
}
.kh-am-fullbleed {
width: 100vw;
margin-left: calc(50% - 50vw);
border-radius: 0;
}
.kh-am-fullbleed .kh-am-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
}
.kh-about-metrics.kh-am-fullbleed {
padding-bottom: 120px;
}
.kh-about-metrics.kh-am-fullbleed + .kh-gallery-slider {
margin-top: -80px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-color: transparent;
}
/* ==============================
Khvoya Gallery Slider (shortcode [kh_gallery_slider_static])
============================== */
.kh-gallery-slider {
--kh-gal-green: #2e7d32;
--kh-gal-green-2: #7CB67A;
--kh-gal-bg: #f6fbf7;
--kh-gal-border: #e3efe6;
--kh-gal-text: #1f2d22;
--kh-gal-muted: #6c7d72;
background: transparent;
border: 0;
border-radius: 0;
padding: 18px 28px 22px;
box-sizing: border-box;
box-shadow: none;
}
.kh-gallery-slider *,
.kh-gallery-slider *::before,
.kh-gallery-slider *::after {
box-sizing: border-box;
}
.kh-gallery-head {
text-align: center;
padding: 12px 16px 20px;
}
.kh-gallery-kicker {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kh-gal-green);
margin-bottom: 6px;
}
.kh-gallery-title {
margin: 0 0 8px 0;
font-size: 30px;
color: var(--kh-gal-text);
}
.kh-gallery-subtitle {
margin: 0 auto;
max-width: 560px;
color: var(--kh-gal-muted);
font-size: 15px;
}
.kh-gallery-stage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
border-radius: 18px;
overflow: hidden;
background: transparent;
border: 0;
}
.kh-gallery-stage.is-moving-next .kh-gallery-card {
animation: khGallerySlideNext 0.86s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.kh-gallery-stage.is-moving-prev .kh-gallery-card {
animation: khGallerySlidePrev 0.86s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.kh-gallery-card {
position: relative;
display: block !important;
width: 100% !important;
height: 460px !important;
margin: 0;
padding: 0;
border: 0 !important;
background: #f3f8f4 !important;
background-image: none !important;
overflow: hidden !important;
cursor: zoom-in;
appearance: none;
line-height: 0;
}
.kh-gallery-card img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
transform: scale(1);
transition: transform 6s ease;
}
.kh-gallery-card--main img {
transform: scale(1.03);
}
.kh-gallery-card:hover img,
.kh-gallery-card:focus-visible img {
transform: scale(1.055);
}
.kh-gallery-empty {
padding: 40px;
text-align: center;
color: var(--kh-gal-muted);
}
.kh-gallery-controls {
position: absolute;
inset: 0;
pointer-events: none;
}
.kh-gallery-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 44px !important;
height: 44px !important;
padding: 0;
border-radius: 14px;
background: linear-gradient(135deg, #ffffff, #f6fbf7) !important;
background-image: linear-gradient(135deg, #ffffff, #f6fbf7) !important;
border: 1px solid var(--kh-gal-border);
color: var(--kh-gal-text);
box-shadow: 0 10px 24px rgba(46,125,50,0.12);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .3s ease;
overflow: hidden !important;
pointer-events: auto;
z-index: 2;
cursor: pointer;
line-height: 1;
}
.kh-gallery-button--prev {
left: 18px;
}
.kh-gallery-button--next {
right: 18px;
}
.kh-gallery-button svg {
width: 17px;
height: 17px;
}
.kh-gallery-button::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(124,182,122,0.18), rgba(124,182,122,0));
opacity: 0;
transition: opacity .25s ease;
}
.kh-gallery-button:hover,
.kh-gallery-button:focus-visible {
transform: translateY(calc(-50% - 1px));
box-shadow: 0 14px 30px rgba(46,125,50,0.18);
border-color: rgba(46,125,50,0.25);
}
.kh-gallery-button:hover::before,
.kh-gallery-button:focus-visible::before {
opacity: 1;
}
.kh-gallery-button:active {
transform: translateY(-50%);
box-shadow: 0 8px 18px rgba(46,125,50,0.14);
}
@keyframes khGallerySlideNext {
from {
opacity: 0.68;
transform: translateX(16px) scale(0.992);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes khGallerySlidePrev {
from {
opacity: 0.68;
transform: translateX(-16px) scale(0.992);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.kh-gallery-stage.is-moving-next .kh-gallery-card,
.kh-gallery-stage.is-moving-prev .kh-gallery-card {
animation: none;
}
}
.kh-gallery-full {
width: 100vw;
margin-left: calc(50% - 50vw);
border-radius: 0;
}
.kh-gallery-full .kh-gallery-head,
.kh-gallery-full .kh-gallery-body {
max-width: 1320px;
margin: 0 auto;
}
.kh-gallery-full .kh-gallery-body {
max-width: none;
width: 100%;
margin: 0;
padding: 0;
}
/* ==============================
Khvoya Docs & Permits (shortcode [kh_docs_permits_static])
============================== */
.kh-docs {
--kh-doc-green: #2f7b45;
--kh-doc-green-2: #79b979;
--kh-doc-surface: #ffffff;
--kh-doc-surface-2: #eef7f0;
--kh-doc-border: #dfece2;
--kh-doc-text: #17221b;
--kh-doc-muted: #64746a;
--kh-doc-soft: #8fa796;
--kh-doc-dark: #0d151c;
--kh-doc-shadow: 0 22px 60px rgba(28, 82, 44, .10);
background:
linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(247,251,248,.96) 45%, rgba(238,247,240,.9) 100%);
border-top: 1px solid rgba(223, 236, 226, .85);
border-bottom: 1px solid rgba(223, 236, 226, .85);
padding: 52px 0 46px;
color: var(--kh-doc-text);
}
.kh-docs-fullbleed {
width: 100vw;
margin-left: calc(50% - 50vw);
border-radius: 0;
}
.kh-docs *,
.kh-docs *::before,
.kh-docs *::after {
box-sizing: border-box;
}
.kh-docs-inner {
width: min(1180px, calc(100% - 40px));
max-width: none;
margin: 0 auto;
}
.kh-docs-head {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
gap: 36px;
align-items: end;
margin-bottom: 30px;
padding: 0;
text-align: left;
}
.kh-docs-copy {
max-width: 680px;
}
.kh-docs-title {
margin: 0 0 12px;
color: var(--kh-doc-text);
font-size: clamp(32px, 4vw, 52px);
font-weight: 800;
line-height: 1.06;
letter-spacing: 0;
}
.kh-docs-subtitle {
margin: 0;
max-width: 620px;
color: var(--kh-doc-muted);
font-size: 18px;
line-height: 1.55;
}
.kh-docs-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.kh-docs-summary__item {
min-height: 94px;
padding: 16px 14px;
border: 1px solid var(--kh-doc-border);
border-radius: 10px;
background: rgba(255, 255, 255, .78);
}
.kh-docs-summary__value {
display: block;
margin-bottom: 4px;
color: var(--kh-doc-green);
font-size: 27px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
overflow-wrap: normal;
word-break: normal;
}
.kh-docs-summary__label {
display: block;
color: var(--kh-doc-muted);
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}
.kh-docs-layout {
display: grid;
grid-template-columns: minmax(330px, .86fr) minmax(0, 1.14fr);
gap: 22px;
align-items: stretch;
}
.kh-docs-featured,
.kh-docs-registry {
border: 1px solid var(--kh-doc-border);
border-radius: 16px;
background: rgba(255, 255, 255, .92);
box-shadow: var(--kh-doc-shadow);
}
.kh-docs-featured {
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
.kh-docs-featured__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px 22px 0;
}
.kh-docs-section-note {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--kh-doc-green);
font-size: 13px;
font-weight: 900;
letter-spacing: .08em;
line-height: 1.2;
text-transform: uppercase;
}
.kh-docs-section-note svg,
.kh-docs-preview__badge svg,
.kh-docs-btn svg,
.kh-docs-icon-action svg {
flex: 0 0 auto;
}
.kh-docs-section-note svg {
width: 18px;
height: 18px;
}
.kh-docs-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 5px 10px;
border: 1px solid rgba(47, 123, 69, .22);
border-radius: 999px;
color: var(--kh-doc-green);
background: rgba(121, 185, 121, .12);
font-size: 12px;
font-weight: 900;
line-height: 1.2;
white-space: nowrap;
}
.kh-docs-chip--neutral {
border-color: rgba(81, 97, 89, .18);
color: #516159;
background: #f3f6f4;
}
.kh-docs-preview {
position: relative;
display: grid;
place-items: center;
min-height: 330px;
margin: 24px 22px 18px;
border-radius: 14px;
background: linear-gradient(145deg, #eef7f0, #fff 46%, #eaf4ed);
overflow: hidden;
}
.kh-docs-preview::before {
position: absolute;
inset: 18px;
content: "";
border: 1px solid rgba(47, 123, 69, .12);
border-radius: 12px;
pointer-events: none;
}
.kh-docs-preview img {
position: relative;
width: min(72%, 270px);
max-height: 292px;
object-fit: cover;
object-position: top center;
border: 1px solid rgba(15, 21, 28, .12);
border-radius: 4px;
background: #fff;
box-shadow: 0 18px 45px rgba(13, 21, 28, .18);
}
.kh-docs-preview__badge {
position: absolute;
right: 22px;
bottom: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border-radius: 999px;
color: #fff;
background: var(--kh-doc-dark);
font-size: 12px;
font-weight: 900;
box-shadow: 0 10px 24px rgba(13, 21, 28, .24);
}
.kh-docs-preview__badge svg {
width: 15px;
height: 15px;
}
.kh-docs-featured__content {
padding: 0 22px 22px;
}
.kh-docs-featured__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 13px;
}
.kh-docs-stage {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 4px 8px;
border-radius: 999px;
color: #fff;
background: var(--kh-doc-dark);
font-size: 11px;
font-weight: 900;
line-height: 1.2;
white-space: nowrap;
}
.kh-docs-featured__title {
margin: 0 0 12px;
color: var(--kh-doc-text);
font-size: clamp(23px, 2vw, 27px);
font-weight: 800;
line-height: 1.14;
letter-spacing: 0;
overflow-wrap: normal;
word-break: normal;
}
.kh-docs-featured__desc {
margin: 0;
color: var(--kh-doc-muted);
font-size: 15px;
line-height: 1.55;
}
.kh-docs-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 18px 0 0;
}
.kh-docs-fact {
padding: 11px 10px;
border: 1px solid rgba(223, 236, 226, .9);
border-radius: 8px;
background: #fbfdfb;
}
.kh-docs-fact dt,
.kh-docs-fact dd {
margin: 0;
}
.kh-docs-fact dt {
color: var(--kh-doc-muted);
font-size: 11px;
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
}
.kh-docs-fact dd {
margin-top: 3px;
color: var(--kh-doc-text);
font-size: 13px;
font-weight: 900;
line-height: 1.25;
}
.kh-docs-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 0 22px 22px;
}
.kh-docs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 11px 17px;
border: 1px solid var(--kh-doc-green);
border-radius: 999px;
color: #fff !important;
background: var(--kh-doc-green) !important;
font-size: 14px;
font-weight: 900;
line-height: 1.2;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.kh-docs .kh-docs-btn,
.kh-docs .kh-docs-btn:visited,
.kh-docs .kh-docs-btn svg {
color: #fff !important;
}
.kh-docs-btn:hover,
.kh-docs-btn:focus-visible {
transform: translateY(-1px);
border-color: #245f35 !important;
color: #fff !important;
background: #245f35 !important;
box-shadow: 0 12px 24px rgba(47, 123, 69, .22);
}
.kh-docs-btn--secondary {
border-color: rgba(47, 123, 69, .32) !important;
color: var(--kh-doc-green) !important;
background: #fff !important;
}
.kh-docs .kh-docs-btn--secondary,
.kh-docs .kh-docs-btn--secondary:visited,
.kh-docs .kh-docs-btn--secondary svg {
color: var(--kh-doc-green) !important;
}
.kh-docs-btn--secondary:hover,
.kh-docs-btn--secondary:focus-visible {
border-color: var(--kh-doc-green) !important;
color: #fff !important;
background: var(--kh-doc-green) !important;
box-shadow: none;
}
.kh-docs .kh-docs-btn--secondary:hover,
.kh-docs .kh-docs-btn--secondary:focus-visible,
.kh-docs .kh-docs-btn--secondary:hover svg,
.kh-docs .kh-docs-btn--secondary:focus-visible svg {
color: #fff !important;
}
.kh-docs-btn svg {
width: 17px;
height: 17px;
}
.kh-docs-registry {
display: grid;
grid-template-rows: auto auto 1fr auto;
padding: 20px;
}
.kh-docs-registry__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 16px;
}
.kh-docs-registry__head > .kh-docs-chip {
flex: 0 0 auto;
white-space: nowrap;
}
.kh-docs-registry__title {
margin: 0 0 4px;
color: var(--kh-doc-text);
font-size: 22px;
font-weight: 800;
line-height: 1.15;
letter-spacing: 0;
}
.kh-docs-registry__copy {
margin: 0;
color: var(--kh-doc-muted);
font-size: 14px;
line-height: 1.45;
}
.kh-docs-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.kh-docs-tab {
min-height: 35px;
padding: 8px 13px;
border: 1px solid var(--kh-doc-green) !important;
border-radius: 999px;
color: var(--kh-doc-green) !important;
background: #fff !important;
font-family: inherit;
font-size: 13px;
font-weight: 900;
line-height: 1.2;
cursor: pointer;
transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.kh-docs-tab:hover,
.kh-docs-tab:focus-visible,
.kh-docs-tab[aria-selected="true"] {
border-color: var(--kh-doc-green) !important;
color: #fff !important;
background: var(--kh-doc-green) !important;
box-shadow: 0 10px 22px rgba(47, 123, 69, .18);
}
.kh-docs .kh-docs-tabs .kh-docs-tab,
.kh-docs .kh-docs-tabs .kh-docs-tab:visited {
border-color: var(--kh-doc-green) !important;
color: var(--kh-doc-green) !important;
background: #fff !important;
}
.kh-docs .kh-docs-tabs .kh-docs-tab:hover,
.kh-docs .kh-docs-tabs .kh-docs-tab:focus-visible,
.kh-docs .kh-docs-tabs .kh-docs-tab[aria-selected="true"] {
border-color: var(--kh-doc-green) !important;
color: #fff !important;
background: var(--kh-doc-green) !important;
}
.kh-docs-list {
display: grid;
gap: 10px;
max-height: 420px;
overflow-y: auto;
padding-right: 8px;
scrollbar-color: rgba(47, 123, 69, .55) rgba(238, 246, 240, .9);
scrollbar-width: thin;
}
.kh-docs-list::-webkit-scrollbar {
width: 8px;
}
.kh-docs-list::-webkit-scrollbar-track {
background: rgba(238, 246, 240, .9);
border-radius: 999px;
}
.kh-docs-list::-webkit-scrollbar-thumb {
background: rgba(47, 123, 69, .55);
border-radius: 999px;
}
.kh-docs-list::-webkit-scrollbar-thumb:hover {
background: var(--kh-doc-green);
}
.kh-docs-row {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
min-height: 104px;
padding: 13px;
border: 1px solid rgba(223, 236, 226, .9);
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.kh-docs-row[hidden] {
display: none;
}
.kh-docs-row:hover,
.kh-docs-row:focus-visible,
.kh-docs-row.is-active {
transform: translateY(-1px);
border-color: rgba(47, 123, 69, .30);
background: #fcfffc;
box-shadow: 0 12px 26px rgba(28, 82, 44, .08);
outline: none;
}
.kh-docs-row__thumb {
width: 64px;
height: 78px;
border: 1px solid rgba(13, 21, 28, .13);
border-radius: 7px;
background: #fff;
overflow: hidden;
box-shadow: 0 7px 18px rgba(13, 21, 28, .08);
}
.kh-docs-row__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.kh-docs-row__body {
min-width: 0;
}
.kh-docs-row__meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 6px;
}
.kh-docs-row__title {
margin: 0 0 5px;
color: var(--kh-doc-text);
font-size: 16px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow-wrap: normal;
word-break: normal;
}
.kh-docs-row__details {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin: 0;
color: var(--kh-doc-muted);
font-size: 13px;
line-height: 1.35;
}
.kh-docs-row__actions {
display: flex;
align-items: center;
gap: 8px;
}
.kh-docs-icon-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid rgba(47, 123, 69, .22) !important;
border-radius: 999px;
color: var(--kh-doc-green) !important;
background: #f8fcf9 !important;
text-decoration: none;
transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.kh-docs .kh-docs-icon-action,
.kh-docs .kh-docs-icon-action:visited,
.kh-docs .kh-docs-icon-action svg {
color: var(--kh-doc-green) !important;
}
.kh-docs-icon-action:hover,
.kh-docs-icon-action:focus-visible {
border-color: var(--kh-doc-green) !important;
color: #fff !important;
background: var(--kh-doc-green) !important;
}
.kh-docs .kh-docs-icon-action:hover,
.kh-docs .kh-docs-icon-action:focus-visible,
.kh-docs .kh-docs-icon-action:hover svg,
.kh-docs .kh-docs-icon-action:focus-visible svg {
color: #fff !important;
}
.kh-docs-icon-action svg {
width: 17px;
height: 17px;
}
.kh-docs .kh-docs-icon-action--view,
.kh-docs .kh-docs-icon-action--view:visited,
.kh-docs .kh-docs-icon-action--view svg {
border-color: var(--kh-doc-green) !important;
color: #fff !important;
background: var(--kh-doc-green) !important;
}
.kh-docs .kh-docs-icon-action--view:hover,
.kh-docs .kh-docs-icon-action--view:focus-visible,
.kh-docs .kh-docs-icon-action--view:hover svg,
.kh-docs .kh-docs-icon-action--view:focus-visible svg {
border-color: #245f35 !important;
color: #fff !important;
background: #245f35 !important;
}
.kh-docs .kh-docs-icon-action--download,
.kh-docs .kh-docs-icon-action--download:visited,
.kh-docs .kh-docs-icon-action--download svg {
border-color: rgba(47, 123, 69, .22) !important;
color: var(--kh-doc-green) !important;
background: #f8fcf9 !important;
}
.kh-docs-timeline {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--kh-doc-border);
}
.kh-docs-timeline__step {
position: relative;
display: grid;
gap: 4px;
padding: 12px;
border-radius: 10px;
background: var(--kh-doc-surface-2);
}
.kh-docs-timeline__step::before {
content: "";
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--kh-doc-green);
}
.kh-docs-timeline__step strong {
color: var(--kh-doc-text);
font-size: 14px;
line-height: 1.1;
}
.kh-docs-timeline__step span {
color: var(--kh-doc-muted);
font-size: 12px;
font-weight: 700;
line-height: 1.25;
}
@media (max-width: 1024px) {
.kh-docs-head,
.kh-docs-layout {
grid-template-columns: 1fr;
}
.kh-docs-head {
gap: 22px;
}
}
@media (max-width: 640px) {
.kh-docs {
padding: 34px 0 30px;
}
.kh-docs-inner {
width: min(100% - 28px, 1180px);
}
.kh-docs-title {
font-size: 34px;
}
.kh-docs-subtitle {
font-size: 16px;
}
.kh-docs-summary,
.kh-docs-facts,
.kh-docs-timeline {
grid-template-columns: 1fr;
}
.kh-docs-featured__top {
padding: 18px 16px 0;
}
.kh-docs-preview {
min-height: 270px;
margin: 18px 16px 16px;
}
.kh-docs-preview img {
width: min(72%, 220px);
max-height: 238px;
}
.kh-docs-featured__content,
.kh-docs-actions {
padding-left: 16px;
padding-right: 16px;
}
.kh-docs-featured__title {
font-size: 23px;
}
.kh-docs-registry {
padding: 16px;
}
.kh-docs-registry__head {
display: grid;
}
.kh-docs-row {
grid-template-columns: auto minmax(0, 1fr);
}
.kh-docs-row__actions {
grid-column: 1 / -1;
padding-left: 78px;
}
}
.kh-gallery-lightbox {
position: fixed;
inset: 0;
background: rgba(15, 20, 18, 0.78);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 24px;
}
.kh-gallery-lightbox.is-open { display: flex; }
.kh-gallery-lightbox-inner {
position: relative;
max-width: 1200px;
width: 100%;
max-height: 90vh;
border-radius: 18px;
overflow: hidden;
background: #0f1412;
box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.kh-gallery-lightbox-inner img {
width: 100%;
height: 100%;
max-height: 90vh;
object-fit: contain;
display: block;
background: #0f1412;
}
.kh-gallery-lightbox-close {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 0;
background: rgba(255,255,255,0.12);
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.kh-gallery-lock { overflow: hidden; }
@media (max-width: 1024px) {
.kh-gallery-card { height: 380px; }
}
@media (max-width: 768px) {
.kh-gallery-slider { padding: 20px; }
.kh-gallery-title { font-size: 26px; }
.kh-gallery-stage { display: block; }
.kh-gallery-card { height: 320px; }
.kh-gallery-card--side { display: none !important; }
.kh-gallery-button { width: 40px; height: 40px; }
.kh-gallery-button--prev { left: 10px; }
.kh-gallery-button--next { right: 10px; }
}
.kh-am-reverse .kh-am-content { order: 2; }
.kh-am-reverse .kh-am-metrics { order: 1; }
@media (max-width: 1023px) {
.kh-am-inner { grid-template-columns: 1fr; }
.kh-about-metrics .khv-metrics-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
.kh-am-reverse .kh-am-content,
.kh-am-reverse .kh-am-metrics { order: initial; }
}
@media (max-width: 768px) {
.kh-about-metrics { padding: 24px; }
.kh-am-title { font-size: 26px; }
.kh-about-metrics .khv-metrics-grid.cols-4,
.kh-about-metrics .khv-metrics-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.kh-about-metrics .khv-metrics-grid { grid-template-columns: 1fr; }
}
/* Khvoya Build Info block (for use inside tabs) */
.kh-build-info{--kh-green:#3FAE4D;--kh-green-700:#2D8E3B;--kh-bg:#fff;--kh-border:#E6F2E9;--kh-text:#1b2a1e; background:var(--kh-bg); border:1px solid var(--kh-border); border-radius:14px; padding:20px; color:var(--kh-text); font-family:inherit}
.kh-build-info .kh-bi-header{display:flex; flex-direction:column; gap:4px; margin-bottom:14px}
.kh-build-info .kh-bi-title{margin:0; font-weight:700; font-size:20px; color:var(--kh-text)}
.kh-build-info .kh-bi-address{margin:0; color:#4b5a4f}
.kh-build-info .kh-bi-phase{color:var(--kh-green-700); font-weight:600}
.kh-build-info .kh-bi-permit{display:flex; align-items:center; gap:10px; background:#f7fbf8; border:1px dashed var(--kh-border); padding:10px 12px; border-radius:10px; margin:8px 0 16px}
.kh-build-info .kh-bi-permit-badge{background:var(--kh-green); color:#fff; font-weight:700; padding:4px 10px; border-radius:999px; font-size:12px; letter-spacing:.02em; width: 12%}
.kh-build-info .kh-bi-permit-text{font-size:14px}
.kh-build-info .kh-bi-subtitle{margin:10px 0 10px; font-size:18px; color:var(--kh-green-700)}
.kh-build-info dl{margin:0}
.kh-build-info .kh-bi-row{display:grid; grid-template-columns: 1fr 1.2fr; gap:12px; padding:10px 0; border-top:1px solid var(--kh-border)}
.kh-build-info .kh-bi-row:first-child{border-top:0}
.kh-build-info dt{font-weight:600; color:#3b4a3f}
.kh-build-info dd{margin:0}
.kh-build-info code{background:#f1f7f3; padding:2px 6px; border-radius:6px; border:1px solid var(--kh-border)}
@media (max-width:1024px){
.kh-build-info .kh-bi-title{font-size:19px}
}
@media (max-width:768px){
.kh-build-info{padding:16px}
.kh-build-info .kh-bi-row{grid-template-columns:1fr; gap:6px}
}
/* ==============================
Khvoya: Build Info component (shortcode [kh_build_info])
Modern eco-friendly design — green & white palette
============================== */
.kh-build-info {
--kh-green: #2e7d32; /* primary green */
--kh-green-600: #1b5e20;
--kh-green-100: #e7f3ea;
--kh-text: #1a1f1c;
--kh-muted: #5a6a60;
--kh-border: #e6ece8;
--kh-bg: #ffffff;
background: var(--kh-bg);
border: 1px solid var(--kh-border);
border-radius: 16px;
box-shadow: 0 6px 24px rgba(27, 94, 32, 0.08);
padding: 20px;
}
/* Header */
.kh-build-info .kh-bi-header {
background: linear-gradient(135deg, rgba(46,125,50,0.08), rgba(27,94,32,0.04));
border: 1px solid var(--kh-border);
border-radius: 12px;
padding: 16px 16px;
margin: 0 0 12px 0;
}
.kh-build-info .kh-bi-title-row { display: flex; align-items: center; gap: 12px; }
.kh-build-info .kh-bi-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
.kh-build-info .kh-bi-title {
margin: 0;
font-size: 20px;
line-height: 1.25;
color: var(--kh-text);
}
.kh-build-info .kh-bi-address {
margin: 6px 0 0 0;
color: var(--kh-muted);
font-size: 14px;
}
.kh-build-info .kh-bi-phase { color: var(--kh-green); font-weight: 600; }
/* Permit */
.kh-build-info .kh-bi-permit {
display: flex;
align-items: center;
gap: 12px;
background: rgba(46,125,50,0.06);
border: 1px dashed rgba(46,125,50,0.35);
padding: 12px 14px;
border-radius: 12px;
margin: 0 0 12px 0; /* tightened spacing below permit */
}
.kh-build-info .kh-bi-permit.kh-glass { backdrop-filter: blur(4px); }
.kh-build-info .kh-bi-permit-badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(--kh-green);
color: #fff;
padding: 8px 10px;
border-radius: 999px;
font-weight: 600; font-size: 12px; letter-spacing: .02em;
width: 12%;
}
.kh-build-info .kh-bi-permit-text { color: var(--kh-text); font-size: 14px; }
/* Sections */
.kh-build-info .kh-bi-section { margin: 10px 0 0; }
.kh-build-info .kh-bi-subtitle {
margin: 50px 0 10px 0 !important; /* tighten subtitle spacing, override parent margins if any */
font-size: 15px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--kh-green-600);
}
/* Lists → grid cards */
.kh-build-info .kh-bi-list { margin: 0; padding: 0; }
.kh-build-info .kh-bi-list .kh-bi-item {
display: grid;
grid-template-columns: 220px 1fr;
gap: 10px 16px;
align-items: start;
padding: 8px 0;
border-top: 1px solid var(--kh-border);
}
.kh-build-info .kh-bi-list .kh-bi-item:first-child { border-top: 0; }
.kh-build-info .kh-bi-list dt { margin: 0; color: var(--kh-muted); font-weight: 600; font-size: 14px; }
.kh-build-info .kh-bi-list dd { margin: 0; color: var(--kh-text); font-size: 15px; }
/* Code chip */
.kh-build-info .kh-chip {
background: var(--kh-green-100);
color: var(--kh-green-600);
border: 1px solid rgba(46,125,50,0.25);
padding: 4px 8px;
border-radius: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 13px;
}
/* Focus states */
.kh-build-info a:focus-visible,
.kh-build-info button:focus-visible,
.kh-build-info .kh-chip:focus-visible {
outline: 2px solid var(--kh-green);
outline-offset: 2px;
}
/* ==============================
Khvoya Build Info: Variants & Densities modifiers
Allow easy switching via shortcode attributes:
[kh_build_info variant="flat|striped|card" density="compact|cozy|comfortable"]
============================== */
/* Density: compact (tighter spacing to avoid large gaps) */
.kh-build-info.kh-density-compact { padding: 14px; }
.kh-build-info.kh-density-compact .kh-bi-header { padding: 12px 12px; margin: 0 0 8px 0; }
.kh-build-info.kh-density-compact .kh-bi-title { font-size: 19px; }
.kh-build-info.kh-density-compact .kh-bi-address { margin-top: 4px; font-size: 13px; }
.kh-build-info.kh-density-compact .kh-bi-permit { gap: 10px; padding: 10px 12px; margin-bottom: 8px; }
.kh-build-info.kh-density-compact .kh-bi-permit-badge { padding: 6px 8px; font-size: 11px; }
.kh-build-info.kh-density-compact .kh-bi-section { margin-top: 8px; }
.kh-build-info.kh-density-compact .kh-bi-subtitle { margin-bottom: 4px !important; font-size: 14px; }
.kh-build-info.kh-density-compact .kh-bi-list .kh-bi-item { gap: 8px 12px; padding: 6px 0; }
.kh-build-info.kh-density-compact .kh-bi-list dt { font-size: 13px; }
.kh-build-info.kh-density-compact .kh-bi-list dd { font-size: 14px; }
@media (max-width: 768px) {
.kh-build-info.kh-density-compact { padding: 12px; }
.kh-build-info.kh-density-compact .kh-bi-list .kh-bi-item { padding: 4px 0; gap: 6px 10px; }
}
/* Density: comfortable (aerated spacing) */
.kh-build-info.kh-density-comfortable { padding: 24px; }
.kh-build-info.kh-density-comfortable .kh-bi-header { padding: 18px 18px; margin-bottom: 16px; }
.kh-build-info.kh-density-comfortable .kh-bi-title { font-size: 21px; }
.kh-build-info.kh-density-comfortable .kh-bi-address { margin-top: 8px; }
.kh-build-info.kh-density-comfortable .kh-bi-permit { padding: 14px 16px; margin-bottom: 16px; }
.kh-build-info.kh-density-comfortable .kh-bi-section { margin-top: 14px; }
.kh-build-info.kh-density-comfortable .kh-bi-subtitle { margin-bottom: 8px !important; }
.kh-build-info.kh-density-comfortable .kh-bi-list .kh-bi-item { padding: 10px 0; gap: 12px 18px; }
/* Variant: flat (no card chrome, for embedding in sections) */
.kh-build-info.kh-variant-flat {
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
}
.kh-build-info.kh-variant-flat .kh-bi-header { background: transparent; border-color: var(--kh-border); }
.kh-build-info.kh-variant-flat .kh-bi-permit { background: rgba(46,125,50,0.05); border-style: solid; border-color: rgba(46,125,50,0.25); }
/* Variant: striped (zebra rows for easier scanning) */
.kh-build-info.kh-variant-striped .kh-bi-list .kh-bi-item:nth-child(odd) {
background: rgba(46,125,50,0.05);
}
.kh-build-info.kh-variant-striped .kh-bi-list .kh-bi-item { padding: 10px 12px; margin: 0 -12px; }
/* Adjust zebra on mobile */
@media (max-width: 768px) {
.kh-build-info.kh-variant-striped .kh-bi-list .kh-bi-item { margin: 0 -8px; }
}
.drawattention .da-image, .drawattention .da-img {
display: block;
max-width: 100%;
height: auto;
}
.drawattention .da-map, .drawattention .da-canvas {
position: relative;
}
.drawattention .da-link, .drawattention .da-area {
outline: none;
}
.drawattention .da-link:focus-visible, .drawattention .da-area:focus-visible {
box-shadow: 0 0 0 3px rgba(76,175,80,0.35);
}
.drawattention .da-highlight {
fill: rgba(76,175,80,0.15);
stroke: rgba(76,175,80,0.9);
stroke-width: 2;
transition: fill 180ms ease, stroke 180ms ease, opacity 180ms ease, filter 250ms ease;
opacity: 1;
pointer-events: none;
}
.drawattention .da-link:hover .da-highlight,
.drawattention .da-link:focus .da-highlight,
.drawattention .da-area:hover + .da-highlight,
.drawattention .da-highlight:hover,
.drawattention .is-hover .da-highlight,
.drawattention .is-active .da-highlight {
fill: rgba(76,175,80,0.22);
stroke: rgba(76,175,80,1);
filter: drop-shadow(0 0 10px rgba(76,175,80,0.45));
}
.drawattention .da-link[aria-current="true"] .da-highlight,
.drawattention .da-link.active .da-highlight {
fill: rgba(76,175,80,0.28);
stroke: rgba(76,175,80,1);
}
.drawattention .da-hotspot, .drawattention .da-pin {
transition: opacity 180ms ease, box-shadow 200ms ease, background-color 200ms ease;
box-shadow: 0 0 0 0 rgba(76,175,80,0);
}
.drawattention .da-hotspot:hover, .drawattention .da-pin:hover,
.drawattention .da-hotspot:focus, .drawattention .da-pin:focus {
box-shadow: 0 0 0 6px rgba(76,175,80,0.18);
}
.drawattention .da-tooltip {
position: absolute;
background: rgba(255,255,255,0.82) !important;
border: 1px solid rgba(76,175,80,0.22) !important;
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
padding: 14px 16px;
max-width: 360px;
line-height: 1.55;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
transition: opacity 220ms ease, box-shadow 300ms ease, background-color 220ms ease, backdrop-filter 220ms ease;
opacity: 0.98;
will-change: opacity, backdrop-filter;
}
.drawattention .da-tooltip:hover {
box-shadow: 0 14px 40px rgba(0,0,0,0.16);
}
.drawattention .da-tooltip-title {
font-weight: 700;
margin: 0 0 6px 0;
color: inherit;
}
.drawattention .da-tooltip-body, .drawattention .da-tooltip-content {
margin: 0;
}
.drawattention .da-tooltip a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(76,175,80,0.35);
}
.drawattention .da-tooltip a:hover {
border-bottom-color: rgba(76,175,80,0.6);
}
.drawattention .da-close, .drawattention .da-tooltip-close {
position: absolute;
top: 8px;
right: 10px;
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
background: rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.06);
transition: background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.drawattention .da-close:hover, .drawattention .da-tooltip-close:hover,
.drawattention .da-close:focus, .drawattention .da-tooltip-close:focus {
background: rgba(76,175,80,0.12);
box-shadow: 0 0 0 3px rgba(76,175,80,0.18);
}
.drawattention .da-listing, .drawattention .da-caption {
margin-top: 10px;
}
.drawattention .da-loading, .drawattention .da-spinner {
border-color: rgba(76,175,80,0.35);
}
.drawattention .da-tooltip-media img, .drawattention .da-tooltip img {
border-radius: 8px;
display: block;
max-width: 100%;
height: auto;
}
.drawattention .da-sr-only:focus {
position: static;
}
/* Draw Attention (generic) */
.drawattention .da-image, .drawattention .da-img { display:block; max-width:100%; height:auto; }
.drawattention .da-map, .drawattention .da-canvas { position:relative; }
.drawattention .da-link, .drawattention .da-area { outline:none; }
.drawattention .da-link:focus-visible, .drawattention .da-area:focus-visible { box-shadow:0 0 0 3px rgba(76,175,80,0.35); }
.drawattention .da-highlight { fill:rgba(76,175,80,0.15); stroke:rgba(76,175,80,0.9); stroke-width:2; transition:fill 180ms ease, stroke 180ms ease, opacity 180ms ease, filter 250ms ease; opacity:1; pointer-events:none; }
.drawattention .da-link:hover .da-highlight,
.drawattention .da-link:focus .da-highlight,
.drawattention .da-highlight:hover,
.drawattention .is-hover .da-highlight,
.drawattention .is-active .da-highlight { fill:rgba(76,175,80,0.22); stroke:rgba(76,175,80,1); filter:drop-shadow(0 0 10px rgba(76,175,80,0.45)); }
.drawattention .da-link[aria-current="true"] .da-highlight,
.drawattention .da-link.active .da-highlight { fill:rgba(76,175,80,0.28); stroke:rgba(76,175,80,1); }
.drawattention .da-hotspot, .drawattention .da-pin { transition:opacity 180ms ease, box-shadow 200ms ease, background-color 200ms ease; box-shadow:0 0 0 0 rgba(76,175,80,0); }
.drawattention .da-hotspot:hover, .drawattention .da-pin:hover,
.drawattention .da-hotspot:focus, .drawattention .da-pin:focus { box-shadow:0 0 0 6px rgba(76,175,80,0.18); }
.drawattention .da-tooltip { position:absolute; background:rgba(255,255,255,0.82); border:1px solid rgba(76,175,80,0.22); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,0.18); padding:14px 16px; max-width:360px; line-height:1.55; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:opacity 220ms ease, box-shadow 300ms ease, background-color 220ms ease, backdrop-filter 220ms ease; opacity:0.98; will-change:opacity, backdrop-filter; }
.drawattention .da-tooltip:hover { box-shadow:0 14px 40px rgba(0,0,0,0.16); }
.drawattention .da-tooltip-title { font-weight:700; margin:0 0 6px 0; color:inherit; }
.drawattention .da-tooltip-body, .drawattention .da-tooltip-content { margin:0; }
.drawattention .da-tooltip a { color:inherit; text-decoration:none; border-bottom:1px solid rgba(76,175,80,0.35); }
.drawattention .da-tooltip a:hover { border-bottom-color:rgba(76,175,80,0.6); }
.drawattention .da-close, .drawattention .da-tooltip-close { position:absolute; top:8px; right:10px; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:inherit; background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.06); transition:background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease; }
.drawattention .da-close:hover, .drawattention .da-tooltip-close:hover,
.drawattention .da-close:focus, .drawattention .da-tooltip-close:focus { background:rgba(76,175,80,0.12); box-shadow:0 0 0 3px rgba(76,175,80,0.18); }
.drawattention .da-tooltip-media img, .drawattention .da-tooltip img { border-radius:8px; display:block; max-width:100%; height:auto; }
/* Draw Attention Pro (Leaflet/Hotspots mode) */
/* Base container */
#hotspot-4114.hotspots-container, .hotspots-container { position:relative; }
#hotspot-4114 .hotspots-image-container img, .hotspots-container .hotspots-image { display:block; max-width:100%; height:auto; }
/* Polygons/overlays */
#hotspot-4114 [class^="hotspot-"],
#hotspot-4114 [class*=" hotspot-"],
.hotspots-container [class^="hotspot-"],
.hotspots-container [class*=" hotspot-"] {
transition: fill 180ms ease, stroke 180ms ease, opacity 180ms ease, filter 220ms ease;
}
#hotspot-4114 [class^="hotspot-"]:hover,
#hotspot-4114 [class*=" hotspot-"]:hover,
#hotspot-4114 [class^="hotspot-"].hotspot-active,
#hotspot-4114 [class*=" hotspot-"].hotspot-active,
.hotspots-container [class^="hotspot-"]:hover,
.hotspots-container [class*=" hotspot-"]:hover,
.hotspots-container [class^="hotspot-"].hotspot-active,
.hotspots-container [class*=" hotspot-"].hotspot-active {
filter: drop-shadow(0 0 10px rgba(147,185,152,0.55));
}
/* Focus ring for accessibility on image map areas */
#hotspot-4114 area:focus-visible, .hotspots-container area:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(147,185,152,0.35);
}
/* Tooltip/Popup (Leaflet + Rrose) */
#hotspot-4114 .leaflet-tooltip,
#hotspot-4114 .leaflet-rrose-content-wrapper,
.hotspots-container .leaflet-tooltip,
.hotspots-container .leaflet-rrose-content-wrapper {
background: rgba(255,255,255,0.82) !important;
color: inherit;
border: 1px solid rgba(147,185,152,0.30) !important;
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
padding: 12px 14px;
line-height: 1.55;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
transition: opacity 220ms ease, box-shadow 300ms ease, background-color 220ms ease, backdrop-filter 220ms ease;
will-change: opacity, backdrop-filter;
}
#hotspot-4114 .leaflet-tooltip:hover,
.hotspots-container .leaflet-tooltip:hover {
box-shadow: 0 14px 40px rgba(0,0,0,0.16);
}
#hotspot-4114 .leaflet-rrose-tip,
.hotspots-container .leaflet-rrose-tip { background: #ffffff; }
/* Close button */
#hotspot-4114 a.leaflet-rrose-close-button,
.hotspots-container a.leaflet-rrose-close-button {
color: inherit;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.06);
transition: background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
#hotspot-4114 a.leaflet-rrose-close-button:hover,
#hotspot-4114 a.leaflet-rrose-close-button:focus,
.hotspots-container a.leaflet-rrose-close-button:hover,
.hotspots-container a.leaflet-rrose-close-button:focus {
background: rgba(147,185,152,0.15);
box-shadow: 0 0 0 3px rgba(147,185,152,0.18);
}
/* Lightbox (Featherlight) */
.featherlight .featherlight-content[class*="lightbox-"] {
background: #ffffff;
border-radius: 12px;
border: 1px solid rgba(147,185,152,0.25);
box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
/* Hotspot info (inline content mode) */
.hotspot-info { background:#ffffff; border:1px solid rgba(147,185,152,0.25); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.12); padding:14px 16px; line-height:1.55; }
.hotspot-info .hotspot-title { margin:0 0 6px 0; font-weight:700; }
/* Responsive */
/* Draw Attention — Modern hover + tooltip effects (static, no zoom) */
.drawattention .da-highlight {
transition: opacity 0.3s ease-in-out, filter 0.35s ease-in-out;
}
.drawattention .da-link:hover .da-highlight,
.drawattention .da-link:focus .da-highlight,
.drawattention .da-area:hover + .da-highlight,
.drawattention .da-highlight:hover,
.drawattention .is-hover .da-highlight,
.drawattention .is-active .da-highlight {
opacity: 1;
filter: drop-shadow(0 0 8px rgba(76,175,80,0.35)) drop-shadow(0 0 14px rgba(76,175,80,0.25));
}
/* Add a soft gradient-like overlay effect via stroke and fill contrast (no transforms) */
.drawattention .da-highlight { fill: rgba(76,175,80,0.16); stroke: rgba(76,175,80,0.9); }
.drawattention .da-link:hover .da-highlight,
.drawattention .da-link:focus .da-highlight,
.drawattention .is-hover .da-highlight,
.drawattention .is-active .da-highlight { fill: rgba(76,175,80,0.24); stroke: rgba(76,175,80,1); }
/* Hotspots (Draw Attention Pro) */
.hotspots-container [class^="hotspot-"],
.hotspots-container [class*=" hotspot-"] {
transition: opacity 0.3s ease-in-out, filter 0.35s ease-in-out;
}
.hotspots-container [class^="hotspot-"]:hover,
.hotspots-container [class*=" hotspot-"]:hover,
.hotspots-container [class^="hotspot-"].hotspot-active,
.hotspots-container [class*=" hotspot-"].hotspot-active {
filter: drop-shadow(0 0 8px rgba(76,175,80,0.35)) drop-shadow(0 0 14px rgba(76,175,80,0.25));
}
/* Tooltip (bubble) — glassmorphism */
@keyframes da-fade-in { from { opacity: 0; } to { opacity: 1; } }
.drawattention .da-tooltip {
background: rgba(255,255,255,0.78) !important;
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.14) !important;
border: 1px solid rgba(76,175,80,0.22) !important;
text-align: center;
color: inherit;
transition: opacity 0.3s ease-in-out, filter 0.35s ease-in-out;
animation: da-fade-in 0.28s ease-in-out both;
}
.drawattention .da-tooltip-title { color: inherit; }
.drawattention .da-tooltip a { color: inherit; }
/* Leaflet/Rrose tooltips/popups (Pro) */
.hotspots-container .leaflet-tooltip,
.hotspots-container .leaflet-rrose-content-wrapper {
background: rgba(255,255,255,0.78) !important;
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.14) !important;
border: 1px solid rgba(76,175,80,0.22) !important;
text-align: center;
color: inherit;
transition: opacity 0.3s ease-in-out, filter 0.35s ease-in-out;
animation: da-fade-in 0.28s ease-in-out both;
}
/* Close buttons remain subtle; do not move or scale */
.drawattention .da-tooltip-close,
.hotspots-container a.leaflet-rrose-close-button {
transition: opacity 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
/* Dark theme support */
@media (prefers-color-scheme: dark) {
.drawattention .da-tooltip {
background: rgba(22,24,29,0.65) !important;
border-color: rgba(76,175,80,0.28) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
color: inherit;
}
.hotspots-container .leaflet-tooltip,
.hotspots-container .leaflet-rrose-content-wrapper {
background: rgba(22,24,29,0.65) !important;
border-color: rgba(76,175,80,0.28) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
color: inherit;
}
.drawattention .da-link:focus-visible, .drawattention .da-area:focus-visible,
.hotspots-container area:focus-visible { box-shadow: 0 0 0 3px rgba(76,175,80,0.35); }
}
/* Accessibility: ensure hidden states can fade in */
.drawattention .da-tooltip[aria-hidden="true"],
.hotspots-container .leaflet-tooltip.leaflet-tooltip-hidden {
opacity: 0;
}
/* Page-specific reinforcement for Choose Apartment (page-id-3735, #hotspot-4114) */
body.page-id-3735 #hotspot-4114 [class^="hotspot-"],
body.page-id-3735 #hotspot-4114 [class*=" hotspot-"] {
transition: opacity 0.3s ease-in-out, filter 0.35s ease-in-out !important;
}
body.page-id-3735 #hotspot-4114 [class^="hotspot-"]:hover,
body.page-id-3735 #hotspot-4114 [class*=" hotspot-"]:hover,
body.page-id-3735 #hotspot-4114 [class^="hotspot-"].hotspot-active,
body.page-id-3735 #hotspot-4114 [class*=" hotspot-"].hotspot-active {
filter: drop-shadow(0 0 8px rgba(76,175,80,0.35)) drop-shadow(0 0 14px rgba(76,175,80,0.25)) !important;
}
/* Tooltip glassmorphism override with higher specificity */
body.page-id-3735 #hotspot-4114 .leaflet-tooltip,
body.page-id-3735 #hotspot-4114 .leaflet-rrose-content-wrapper {
background: rgba(255,255,255,0.78) !important;
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.14) !important;
border: 1px solid rgba(76,175,80,0.22) !important;
text-align: center;
color: inherit;
transition: opacity 0.3s ease-in-out, filter 0.35s ease-in-out;
animation: da-fade-in 0.28s ease-in-out both;
}
body.page-id-3735 #hotspot-4114 .leaflet-tooltip.leaflet-tooltip-hidden { opacity: 0 !important; }
@media (prefers-color-scheme: dark) {
body.page-id-3735 #hotspot-4114 .leaflet-tooltip,
body.page-id-3735 #hotspot-4114 .leaflet-rrose-content-wrapper {
background: rgba(22,24,29,0.65) !important;
border-color: rgba(76,175,80,0.28) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
}
:root{
--kh-green:#2fbf71;
--kh-green-2:#19a65c;
--kh-glass:#ffffff1a;
--kh-glass-strong:#ffffff26;
--kh-dark:#0b1912;
--kh-shadow:0 10px 30px rgba(0,0,0,.18),0 20px 60px rgba(0,0,0,.12);
--da-frame-radius:18px;
--da-frame-border:2px;
--da-ambient:rgba(47,191,113,.35);
--da-ambient-2:rgba(25,166,92,.35);
--da-glow:0 0 24px rgba(47,191,113,.35),0 0 48px rgba(25,166,92,.25);
--da-glow-strong:0 0 30px rgba(47,191,113,.55),0 0 70px rgba(25,166,92,.35);
--da-stroke:rgba(47,191,113,.8);
--da-stroke-soft:rgba(47,191,113,.5);
--da-overlay:rgba(47,191,113,.18);
--da-overlay-strong:rgba(47,191,113,.28);
--da-tooltip-bg:rgba(14,25,18,.55);
--da-tooltip-border:rgba(255,255,255,.22);
--da-tooltip-shadow:0 10px 30px rgba(0,0,0,.25);
--da-blur:10px;
--da-glow-x:0px;
--da-glow-y:0px;
}
@keyframes daBreath {
0% { box-shadow: var(--da-glow); filter: brightness(1); }
50% { box-shadow: var(--da-glow-strong); filter: brightness(1.03); }
100% { box-shadow: var(--da-glow); filter: brightness(1); }
}
@keyframes daSoftPulse {
0% { filter: brightness(1) drop-shadow(0 0 0 rgba(47,191,113,0)); }
50% { filter: brightness(1.06) drop-shadow(0 0 10px rgba(47,191,113,.35)); }
100% { filter: brightness(1) drop-shadow(0 0 0 rgba(47,191,113,0)); }
}
@keyframes daTooltipFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* 1. Overall Map Frame */
.drawattention-container{
position: relative;
border-radius: var(--da-frame-radius);
isolation: isolate;
--frame-light-x: var(--da-glow-x);
--frame-light-y: var(--da-glow-y);
}
.drawattention-container::before{
content:"";
position:absolute; inset:0;
border-radius: inherit;
padding: var(--da-frame-border);
background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.05)),
radial-gradient(1200px 1200px at calc(50% + var(--frame-light-x)) calc(50% + var(--frame-light-y)), var(--da-ambient), transparent 70%),
linear-gradient(135deg, rgba(47,191,113,.55), rgba(25,166,92,.35));
background-clip: content-box, border-box, border-box;
border: var(--da-frame-border) solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box, border-box;
pointer-events:none;
}
.drawattention-container::after{
content:"";
position:absolute; inset:0;
border-radius: inherit;
background: linear-gradient(180deg, var(--kh-glass), transparent 40%);
backdrop-filter: blur(var(--da-blur));
-webkit-backdrop-filter: blur(var(--da-blur));
box-shadow: var(--kh-shadow);
pointer-events:none;
z-index:-1;
}
.drawattention-container .leaflet-container,
.drawattention-container .image-map{ /* safety */
border-radius: calc(var(--da-frame-radius) - 2px);
}
.drawattention-container:hover::before{
filter: brightness(1.06);
}
.drawattention-container .da-ambient-breath{
animation: daBreath 3.6s ease-in-out infinite;
}
/* Floating shadow beneath */
.drawattention-container{ box-shadow: 0 18px 45px rgba(0,0,0,.18); }
/* 2. Interactive Sections */
.more-info-area{ position: relative; }
.more-info-area path,
.more-info-area polygon,
.more-info-area rect,
.more-info-area circle{
transition: opacity .4s ease-in-out, filter .4s ease-in-out, stroke .4s ease-in-out, fill-opacity .4s ease-in-out;
stroke: transparent;
vector-effect: non-scaling-stroke;
}
/* Base soft presence */
.drawattention-container .more-info-area path,
.drawattention-container .more-info-area polygon,
.drawattention-container .more-info-area rect,
.drawattention-container .more-info-area circle{
filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
/* Focus behavior: dim siblings on hover */
.drawattention-container:hover .more-info-area path,
.drawattention-container:hover .more-info-area polygon,
.drawattention-container:hover .more-info-area rect,
.drawattention-container:hover .more-info-area circle{
opacity:.75;
}
.drawattention-container .more-info-area:hover path,
.drawattention-container .more-info-area:hover polygon,
.drawattention-container .more-info-area:hover rect,
.drawattention-container .more-info-area:hover circle{
opacity:1;
fill-opacity:.95;
stroke: var(--da-stroke);
stroke-width: 1.25px;
filter: brightness(1.08) drop-shadow(0 0 10px rgba(47,191,113,.35)) drop-shadow(0 0 18px rgba(25,166,92,.25));
animation: daSoftPulse 2.8s ease-in-out infinite;
}
/* Soft color overlay on hover without moving shapes */
.drawattention-container .more-info-area:hover path{ fill: var(--da-overlay); }
.drawattention-container .more-info-area:hover polygon{ fill: var(--da-overlay); }
.drawattention-container .more-info-area:hover rect{ fill: var(--da-overlay); }
.drawattention-container .more-info-area:hover circle{ fill: var(--da-overlay); }
/* 3. Tooltip / Bubble */
.leaflet-tooltip,
.leaflet-rrose-content-wrapper{
background: var(--da-tooltip-bg);
color: #eaf7ef;
border:1px solid var(--da-tooltip-border);
border-radius:12px;
box-shadow: var(--da-tooltip-shadow), 0 0 24px rgba(47,191,113,.15);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
padding:.7rem .9rem;
animation: daTooltipFade .25s ease-out both;
}
.leaflet-tooltip strong, .leaflet-tooltip b{ color:#ffffff; }
.leaflet-tooltip em, .leaflet-tooltip i{ color:#d5f2e3; }
.leaflet-tooltip a{ color: var(--kh-green); text-decoration: none; border-bottom:1px dashed rgba(47,191,113,.45); transition: opacity .25s ease; }
.leaflet-tooltip a:hover{ opacity:.85; }
.leaflet-rrose-tip{ background: var(--da-tooltip-bg); border:1px solid var(--da-tooltip-border); }
/* Micro pulse on hover using shadow only */
.leaflet-tooltip:hover{ box-shadow: var(--da-tooltip-shadow), 0 0 32px rgba(47,191,113,.25); filter: brightness(1.04); }
/* 4. Map frame brightness increase on any area hover */
.drawattention-container:has(.more-info-area:hover)::before{ filter: brightness(1.1) contrast(1.02); }
/* 5. Responsiveness and clipping safety */
@media (max-width:1024px){
:root{ --da-blur:9px; }
.drawattention-container{ box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.leaflet-tooltip, .leaflet-rrose-content-wrapper{ box-shadow: 0 10px 24px rgba(0,0,0,.2), 0 0 16px rgba(47,191,113,.12); }
}
@media (max-width:768px){
:root{ --da-blur:8px; }
.drawattention-container::before{ padding: 1.5px; }
.drawattention-container{ box-shadow: 0 10px 26px rgba(0,0,0,.15); }
.leaflet-tooltip, .leaflet-rrose-content-wrapper{ border-radius:10px; padding:.6rem .8rem; }
}
/* 6. Optional mouse-reactive light using custom properties set by JS */
.drawattention-container{
box-shadow: var(--kh-shadow), calc(var(--frame-light-x)) calc(var(--frame-light-y)) 40px rgba(47,191,113,.18) inset;
}
/* Devvn Image Hotspot: apply the same luxurious frame and interactive effects */
.hotspots-container{
position: relative;
border-radius: var(--da-frame-radius);
isolation: isolate;
--frame-light-x: var(--da-glow-x);
--frame-light-y: var(--da-glow-y);
box-shadow: var(--kh-shadow);
}
.hotspots-container::before{
content:"";
position:absolute; inset:0;
border-radius: inherit;
padding: var(--da-frame-border);
background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.05)),
radial-gradient(1200px 1200px at calc(50% + var(--frame-light-x)) calc(50% + var(--frame-light-y)), var(--da-ambient), transparent 70%),
linear-gradient(135deg, rgba(47,191,113,.55), rgba(25,166,92,.35));
border: var(--da-frame-border) solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box, border-box;
pointer-events:none;
}
.hotspots-container::after{
content:"";
position:absolute; inset:0;
border-radius: inherit;
background: linear-gradient(180deg, var(--kh-glass), transparent 40%);
backdrop-filter: blur(var(--da-blur));
-webkit-backdrop-filter: blur(var(--da-blur));
box-shadow: 0 18px 45px rgba(0,0,0,.18);
pointer-events:none;
z-index:-1;
}
.hotspots-container:hover::before{ filter: brightness(1.06); }
.hotspots-container .hotspots-image-container,
.hotspots-container .leaflet-container{ border-radius: calc(var(--da-frame-radius) - 2px); overflow: hidden; }
/* Focus behavior + interactive glow for hotspot shapes */
.hotspots-container [class^="hotspot-"],
.hotspots-container [class*=" hotspot-"]{
transition: opacity .4s ease-in-out, filter .4s ease-in-out, stroke .4s ease-in-out, fill-opacity .4s ease-in-out;
vector-effect: non-scaling-stroke;
filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.hotspots-container:hover [class^="hotspot-"],
.hotspots-container:hover [class*=" hotspot-"]{ opacity:.75; }
.hotspots-container [class^="hotspot-"]:hover,
.hotspots-container [class*=" hotspot-"]:hover{
opacity:1; fill-opacity:.95;
stroke: var(--da-stroke); stroke-width:1.25px;
filter: brightness(1.08) drop-shadow(0 0 10px rgba(47,191,113,.35)) drop-shadow(0 0 18px rgba(25,166,92,.25));
animation: daSoftPulse 2.8s ease-in-out infinite;
}
/* Slightly brighten frame when any hotspot hovered */
.hotspots-container:hover::before{ filter: brightness(1.1) contrast(1.02); }
/* Tooltip glassmorphism already defined; ensure it applies within hotspots too */
.hotspots-container .leaflet-tooltip,
.hotspots-container .leaflet-rrose-content-wrapper{ background: var(--da-tooltip-bg); border-color: var(--da-tooltip-border); box-shadow: var(--da-tooltip-shadow), 0 0 24px rgba(47,191,113,.15); }
/* Mobile safety for hotspot container */
@media (max-width:768px){
.hotspots-container::before{ padding: 1.5px; }
.hotspots-container{ box-shadow: 0 10px 26px rgba(0,0,0,.15); }
}
/* --- Khvoya: Enhanced hotspot outlines, tooltips & accessibility (Devvn & Draw Attention) --- */
@keyframes khvoyaDash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -100; }
}
/* Animated eco-dashed outline on hover/active without moving shapes */
.hotspots-container svg path,
.hotspots-container svg polygon,
.drawattention-container svg path,
.drawattention-container svg polygon {
stroke-linecap: round;
}
.hotspots-container svg path:hover,
.hotspots-container svg polygon:hover,
.drawattention-container .more-info-area:hover svg path,
.drawattention-container .more-info-area:hover svg polygon {
stroke-dasharray: 8 8;
animation: khvoyaDash 3s linear infinite;
}
/* Neon green dashed outline for Khvoya hotspots (keep fill as-is) */
/* Targets Draw Attention/Devvn overlays generated for page hotspots */
body.page-id-3735 #hotspot-4114 [class^="hotspot-"],
body.page-id-3735 #hotspot-4114 [class*=" hotspot-"] { transition: stroke 160ms ease, filter 200ms ease; }
body.page-id-3735 #hotspot-4114 [class^="hotspot-"]:hover,
body.page-id-3735 #hotspot-4114 [class*=" hotspot-"]:hover,
body.page-id-3735 #hotspot-4114 [class^="hotspot-"].hotspot-active,
body.page-id-3735 #hotspot-4114 [class*=" hotspot-"].hotspot-active,
body.page-id-3735 #hotspot-4114 [class^="hotspot-"]:focus-visible,
body.page-id-3735 #hotspot-4114 [class*=" hotspot-"]:focus-visible {
/* DO NOT change fill: keep whatever plugin sets */
stroke: #39ff14 !important; /* neon green */
stroke-opacity: 1 !important;
stroke-width: 2px !important;
stroke-dasharray: 6 6 !important; /* dashed contour */
stroke-linecap: round !important;
filter: drop-shadow(0 0 6px rgba(57,255,20,.65)) drop-shadow(0 0 14px rgba(57,255,20,.45));
}
/* Stronger, consistent glass tooltip capsule with readable type */
body.page-id-3735 #hotspot-4114 .leaflet-tooltip,
body.page-id-3735 #hotspot-4114 .leaflet-rrose-content-wrapper,
.drawattention-container .leaflet-tooltip,
.drawattention-container .leaflet-rrose-content-wrapper,
.hotspots-container .leaflet-tooltip,
.hotspots-container .leaflet-rrose-content-wrapper {
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)) , var(--da-tooltip-bg) !important;
border: 1px solid var(--da-tooltip-border) !important;
box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 0 24px rgba(47,191,113,.18) !important;
color: #eaf7ef !important;
font: 600 14px/1.25 var(--e-global-typography-text-font-family, Nunito), system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
letter-spacing: .2px;
}
body.page-id-3735 #hotspot-4114 .leaflet-tooltip:before,
.hotspots-container .leaflet-tooltip:before,
.drawattention-container .leaflet-tooltip:before { display:none !important; }
/* Tooltip subtle inner highlight */
body.page-id-3735 #hotspot-4114 .leaflet-tooltip,
.hotspots-container .leaflet-tooltip,
.drawattention-container .leaflet-tooltip { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--da-tooltip-shadow), 0 0 24px rgba(47,191,113,.15) !important; }
/* Keyboard accessibility: focus rings on interactive areas (anchors/areas) */
.hotspots-container area.url-area:focus-visible,
.hotspots-container [class^="hotspot-"]:focus-visible,
.drawattention-container .more-info-area:focus-visible {
outline: 2px solid rgba(47,191,113,.85) !important;
outline-offset: 2px;
filter: brightness(1.08) drop-shadow(0 0 10px rgba(47,191,113,.35));
}
/* Brighten frame when a hotspot is keyboard-focused */
.hotspots-container:has(:focus-visible)::before,
.drawattention-container:has(.more-info-area:focus-visible)::before {
filter: brightness(1.1) contrast(1.03);
}
/* Ensure dashed outline is visible even if plugin sets its own stroke */
.hotspots-container [class^="hotspot-"]:hover path,
.hotspots-container [class*=" hotspot-"]:hover path,
.hotspots-container [class^="hotspot-"]:hover polygon,
.hotspots-container [class*=" hotspot-"]:hover polygon {
stroke: var(--da-stroke) !important;
}
/* ==============================
Khvoya Popup: remove stacked "windows" in property modals
Goal: keep a single clean content panel (apartments), flatten nested wrappers
Scope: only inside Magnific/SC Popup to avoid side effects site‑wide
============================== */
.mfp-content .sc_popup .sc_item_container,
.mfp-content .sc_popup .sc_item_content,
.mfp-content .sc_popup .trx_addons_tabs,
.mfp-content .sc_popup .trx_addons_tabs_content,
.mfp-content .sc_popup .trx_addons_tabs_inner,
.mfp-content .sc_popup .sc_content_container {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Remove extra internal spacing that visually creates layered cards */
.mfp-content .sc_popup .trx_addons_tabs_content,
.mfp-content .sc_popup .trx_addons_tabs_inner,
.mfp-content .sc_popup .sc_item_content {
padding: 0 !important;
}
/* If tabs rendered with a single title, hide titles bar to avoid a fake second header */
.mfp-content .sc_popup .trx_addons_tabs_titles:has(> *:only-child) {
display: none !important;
}
/* Ensure only the main popup content keeps its rounded panel; nested wrappers stay flat */
.mfp-content .sc_popup .sc_popup_content {
border-radius: 14px;
/* keep theme/default background & shadow; do not override here */
}
/* ==============================
Khvoya Popup (Featherlight/Devvn): remove stacked inner "windows"
Scope: only inside Featherlight lightboxes created by Devvn Image Hotspot
============================== */
/* Flatten nested wrappers inside Featherlight content to avoid layered cards */
.featherlight .featherlight-content .hotspot-info,
.featherlight .featherlight-content .hotspot-content,
.featherlight .featherlight-content .sc_item_container,
.featherlight .featherlight-content .sc_item_content,
.featherlight .featherlight-content .trx_addons_tabs,
.featherlight .featherlight-content .trx_addons_tabs_content,
.featherlight .featherlight-content .trx_addons_tabs_inner,
.featherlight .featherlight-content .sc_content_container {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Remove extra internal spacing that visually creates layers */
.featherlight .featherlight-content .trx_addons_tabs_content,
.featherlight .featherlight-content .trx_addons_tabs_inner,
.featherlight .featherlight-content .sc_item_content,
.featherlight .featherlight-content .hotspot-content {
padding: 0 !important;
}
/* Hide single tab titles bar if only one tab rendered */
.featherlight .featherlight-content .trx_addons_tabs_titles:has(> *:only-child) {
display: none !important;
}
/* Floor Selector inside Featherlight: transparent card and responsive grid */
.featherlight .featherlight-content .khvoya-floor-selector {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 0 12px !important;
margin: 0 !important;
}
.featherlight .featherlight-content .khvoya-floor-selector__grid {
display: grid !important;
gap: 16px;
grid-template-columns: repeat(2, minmax(160px, 1fr));
width: 100%;
}
@media (min-width: 1024px) {
.featherlight .featherlight-content .khvoya-floor-selector__grid {
grid-template-columns: repeat(3, minmax(160px, 1fr));
}
}
@media (max-width: 768px) {
.featherlight .featherlight-content .khvoya-floor-selector__grid {
grid-template-columns: 1fr;
}
}
/* Robustness: editors sometimes insert
between items; hide them inside Featherlight */
.featherlight .featherlight-content .khvoya-floor-selector__grid > br { display: none !important; }
/* ==============================
Khvoya: Hover "jump" animation for building outlines on the plan
Applies to Devvn Image Hotspot (.hotspots-container) and Draw Attention (.drawattention-container)
Effect: a subtle upward jump on hover that returns smoothly
Accessibility: disabled if user prefers reduced motion
============================== */
@keyframes khvoyaHoverJump {
0% { transform: translateY(0); }
35% { transform: translateY(-4px); }
100% { transform: translateY(0); }
}
/* Devvn Hotspots: apply to each hotspot wrapper so the whole section moves */
.hotspots-container [class^="hotspot-"],
.hotspots-container [class*=" hotspot-"]{
will-change: transform;
transition: transform 280ms cubic-bezier(.22,1,.36,1);
}
/* On hover: run the short jump once, while keeping the existing soft pulse */
.hotspots-container [class^="hotspot-"]:hover,
.hotspots-container [class*=" hotspot-"]:hover{
animation: khvoyaHoverJump 420ms cubic-bezier(.22,1,.36,1) 0s 1,
daSoftPulse 2.8s ease-in-out infinite;
}
/* Draw Attention: move the clickable area (wraps the SVG region) */
.drawattention-container .more-info-area{
will-change: transform;
transition: transform 280ms cubic-bezier(.22,1,.36,1);
}
.drawattention-container .more-info-area:hover{
animation: khvoyaHoverJump 420ms cubic-bezier(.22,1,.36,1) 0s 1;
}
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
.hotspots-container [class^="hotspot-"],
.hotspots-container [class*=" hotspot-"],
.drawattention-container .more-info-area{
transition: none !important;
animation: none !important;
}
}
/* Consolidated responsive media queries for Khvoya child theme
Breakpoints: 1024px (tablet/desktop), 768px (tablet/mobile)
Notes: These consolidated blocks collect scattered rules to improve maintainability.
Order of declarations preserved as per their first appearance to avoid cascade changes.
*/
/* === Consolidated @media (max-width: 1024px) === */
@media (max-width: 1024px) {
/* Khvoya Build Info */
.kh-build-info { padding: 18px; }
.kh-build-info .kh-bi-list .kh-bi-item { grid-template-columns: 200px 1fr; }
/* Draw Attention tooltip */
.drawattention .da-tooltip { max-width: 420px; }
/* Leaflet/Hotspots tooltip */
#hotspot-4114 .leaflet-tooltip, .hotspots-container .leaflet-tooltip { max-width: 420px; }
/* Elementor dark column (tablet tweaks) */
.elementor-column.scheme_dark { border-radius: 10px; }
.elementor-column.scheme_dark .elementor-widget-wrap { padding: 22px !important; }
.elementor-column.scheme_dark:hover { transform: translateY(-7px); }
.elementor-column.scheme_dark .elementor-icon { padding: 15px; }
.elementor-column.scheme_dark h3:after,
.elementor-column.scheme_dark h4:after { width: 35px; }
.elementor-column.scheme_dark:hover h3:after,
.elementor-column.scheme_dark:hover h4:after { width: 50px; }
/* Elementor parallax section (tablet) */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited {
border-radius: 14px;
margin: 25px auto;
/* Performance optimizations for tablet */
transform: translateZ(0);
-webkit-transform: translateZ(0);
transition: transform 0.2s ease;
will-change: auto;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-container { padding: 30px 25px; }
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover { transform: none; }
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-icon { padding: 20px; }
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h2:after,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h3:after { width: 50px; }
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover h2:after,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover h3:after { width: 80px; }
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-button { padding: 12px 25px; }
/* Posts list/cards (tablet) */
.post_item,
.sc_blogger_item,
.post_layout_excerpt,
.post_layout_band { border-radius: 10px; margin-bottom: 25px; }
.post_item .post_featured,
.sc_blogger_item .post_featured,
.post_layout_excerpt .post_featured,
.post_layout_band .post_featured { height: 200px; border-radius: 10px 10px 0 0; }
.post_item:hover,
.sc_blogger_item:hover,
.post_layout_excerpt:hover,
.post_layout_band:hover { transform: translateY(-6px); }
.post_item .post_title,
.sc_blogger_item .post_title,
.post_layout_excerpt .post_title,
.post_layout_band .post_title { font-size: 1.1em; padding-bottom: 0.3em; }
.post_item .post_title:after,
.sc_blogger_item .post_title:after,
.post_layout_excerpt .post_title:after,
.post_layout_band .post_title:after { width: 35px; }
.post_item:hover .post_title:after,
.sc_blogger_item:hover .post_title:after,
.post_layout_excerpt:hover .post_title:after,
.post_layout_band:hover .post_title:after { width: 50px; }
.post_item .post_featured .post_categories,
.sc_blogger_item .post_featured .post_categories,
.post_layout_excerpt .post_featured .post_categories,
.post_layout_band .post_featured .post_categories { top: 12px; left: 12px; }
.post_item .post_featured .post_categories a,
.sc_blogger_item .post_featured .post_categories a,
.post_layout_excerpt .post_featured .post_categories a,
.post_layout_band .post_featured .post_categories a { padding: 4px 8px; font-size: 0.7em; }
.post_item .post_content,
.sc_blogger_item .post_content,
.post_layout_excerpt .post_content,
.post_layout_band .post_content { padding: 1.6em; }
/* Admin panel header (tablet) */
.admin_panel_header_row { height: 70px; }
.admin_panel_header_container { padding: 0 15px; }
.admin_panel_admin_link,
.admin_panel_logout_link,
.admin_panel_login_link,
.admin_panel_register_link { padding: 6px 12px; font-size: 13px; }
.admin_panel_user_menu,
.admin_panel_login_menu { gap: 10px; }
/* Metrics grid (tablet) */
.khv-metrics-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
/* Khvoya Build Info title (tablet size) */
.kh-build-info .kh-bi-title { font-size: 19px; }
}
/* === Consolidated @media (max-width: 768px) === */
@media (max-width: 768px) {
/* News Cards: mobile adjustments */
.post_item,
.sc_blogger_item,
.post_layout_excerpt,
.post_layout_band { border-radius: 8px; margin-bottom: 20px; width: calc(100% - 30px); overflow: hidden; max-width: 100%; }
.post_item .post_featured,
.sc_blogger_item .post_featured,
.post_layout_excerpt .post_featured,
.post_layout_band .post_featured { height: 180px; border-radius: 8px 8px 0 0; }
.post_item:hover,
.sc_blogger_item:hover,
.post_layout_excerpt:hover,
.post_layout_band:hover { transform: translateY(-4px); }
.post_item .post_title,
.sc_blogger_item .post_title,
.post_layout_excerpt .post_title,
.post_layout_band .post_title { font-size: 0.95em; margin-bottom: 1em; padding-bottom: 0.4em; line-height: 1.4em; max-height: 2.8em; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; padding-right: 5px; width: 100%; box-sizing: border-box; }
.post_item .post_title:after,
.sc_blogger_item .post_title:after,
.post_layout_excerpt .post_title:after,
.post_layout_band .post_title:after { width: 30px; height: 1.5px; }
.post_item:hover .post_title:after,
.sc_blogger_item:hover .post_title:after,
.post_layout_excerpt:hover .post_title:after,
.post_layout_band:hover .post_title:after { width: 40px; }
.post_item .post_content_inner,
.sc_blogger_item .post_content_inner,
.post_layout_excerpt .post_content_inner,
.post_layout_band .post_content_inner,
.post_item .post_excerpt,
.sc_blogger_item .post_excerpt,
.post_layout_excerpt .post_excerpt,
.post_layout_band .post_excerpt { font-size: 0.8em; margin-bottom: 1.2em; line-height: 1.4em; -webkit-line-clamp: 2; max-height: 2.8em; word-break: break-word; }
.post_item .post_featured .post_categories,
.sc_blogger_item .post_featured .post_categories,
.post_layout_excerpt .post_featured .post_categories,
.post_layout_band .post_featured .post_categories { top: 10px; left: 10px; }
.post_item .post_featured .post_categories a,
.sc_blogger_item .post_featured .post_categories a,
.post_layout_excerpt .post_featured .post_categories a,
.post_layout_band .post_featured .post_categories a { padding: 3px 7px; font-size: 0.65em; letter-spacing: 0.3px; }
/* News Cards: minor spacing/meta tweaks */
.post_item .post_content,
.sc_blogger_item .post_content,
.post_layout_excerpt .post_content,
.post_layout_band .post_content { padding: 1.5em 1.2em; box-sizing: border-box; }
.post_item .post_meta,
.sc_blogger_item .post_meta,
.post_layout_excerpt .post_meta,
.post_layout_band .post_meta { font-size: 0.8em; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 1em; }
.post_meta_item.post_date,
.post_date,
.post_meta_item.post_date a,
.post_date a { white-space: normal; word-break: break-word; line-height: 1.4; display: inline-flex; align-items: center; flex-wrap: wrap; max-width: 100%; font-size: 0.95em; margin-bottom: 5px; }
.post_meta_item.post_date:before,
.post_date:before { margin-right: 5px; margin-left: 0px; font-size: 1em; }
.post_meta_item.post_date span,
.post_date span { max-width: calc(100% - 25px); }
.post_item .more-link,
.sc_blogger_item .more-link,
.post_layout_excerpt .more-link,
.post_layout_band .more-link { margin-top: 0.5em; margin-bottom: 0.5em; font-size: 0.85em; }
/* Elementor dark column tweaks */
.elementor-column.scheme_dark { border-radius: 8px; margin-bottom: 20px; }
.elementor-column.scheme_dark .elementor-widget-wrap { padding: 20px !important; }
.elementor-column.scheme_dark:hover { transform: translateY(-5px); }
.elementor-column.scheme_dark .elementor-icon { padding: 12px; }
.elementor-column.scheme_dark h1,
.elementor-column.scheme_dark h2,
.elementor-column.scheme_dark h3,
.elementor-column.scheme_dark h4,
.elementor-column.scheme_dark h5,
.elementor-column.scheme_dark h6 { margin-bottom: 12px; }
.elementor-column.scheme_dark h3:after,
.elementor-column.scheme_dark h4:after { width: 30px; height: 2px; }
.elementor-column.scheme_dark:hover h3:after,
.elementor-column.scheme_dark:hover h4:after { width: 40px; }
.elementor-column.scheme_dark p { margin-bottom: 15px; }
.elementor-column.scheme_dark .elementor-button { padding: 10px 20px; font-size: 0.9em; }
.elementor-column.scheme_dark ul li { padding-left: 20px; margin-bottom: 8px; }
/* After full title adjustments */
.after-full-title { font-size: 1.3em; margin-top: 0.3em; margin-bottom: 0.8em; padding: 4px 10px; background-color: rgba(0, 0, 0, 0.3); }
.after-full-title::after { left: 10px; font-size: 0.7em; opacity: 0.7; }
.after-full-title::before { right: 10px; font-size: 0.7em; opacity: 0.7; }
.typewriter-text { text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.8); letter-spacing: 0.03em; }
.typewriter-cursor { font-size: 1.1em; }
.front_page_section_title_caption { font-size: 2em; }
.front_page_section_title_description { font-size: 1em; line-height: 1.6em; }
/* Khvoya Build Info */
.kh-build-info { padding: 16px; border-radius: 14px; }
.kh-build-info .kh-bi-title { font-size: 18px; }
.kh-build-info .kh-bi-list .kh-bi-item { grid-template-columns: 1fr; padding: 6px 0; }
.kh-build-info .kh-bi-list dt { font-size: 13px; }
.kh-build-info .kh-bi-list dd { font-size: 14px; }
.kh-build-info .kh-bi-permit { flex-direction: column; align-items: flex-start; }
.kh-build-info.kh-density-compact { padding: 12px; }
.kh-build-info.kh-density-compact .kh-bi-list .kh-bi-item { padding: 4px 0; gap: 6px 10px; }
.kh-build-info.kh-variant-striped .kh-bi-list .kh-bi-item { margin: 0 -8px; }
/* Draw Attention tooltip */
.drawattention .da-tooltip { max-width: 90vw; padding: 12px 14px; border-radius: 10px; }
.drawattention .da-close, .drawattention .da-tooltip-close { top: 6px; right: 8px; width: 32px; height: 32px; }
/* Hotspots tooltip */
#hotspot-4114 .leaflet-tooltip, .hotspots-container .leaflet-tooltip { max-width: 90vw; padding: 12px 14px; }
#hotspot-4114 a.leaflet-rrose-close-button, .hotspots-container a.leaflet-rrose-close-button { width: 32px; height: 32px; }
/* Featherlight floor selector grid */
.featherlight .featherlight-content .khvoya-floor-selector__grid { grid-template-columns: 1fr; }
/* Popup floor selector grid */
.mfp-content .khvoya-floor-selector__grid,
.sc_popup .khvoya-floor-selector__grid { grid-template-columns: 1fr; }
/* Metrics grid (mobile) */
.khv-metrics-grid.cols-4,
.khv-metrics-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
/* Properties status badges (mobile size) */
.properties_page_title .properties_page_status > a,
.sc_properties_item_status > a { font-size: 11px; padding: 5px 10px; }
/* Parallax section with lag fix (specific block) */
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 { transform: none !important; -webkit-transform: none !important; }
.sc_parallax.sc_parallax_blocks.elementor-section.elementor-top-section.elementor-element.elementor-element-5f5ed62 .sc_parallax_block { transform: none !important; -webkit-transform: none !important; opacity: 1 !important; }
/* Admin panel header: mobile adjustments */
.admin_panel_header_row { height: 60px; flex-wrap: wrap; }
.admin_panel_header_container { padding: 0 10px; }
.admin_panel_header_nav { order: 3; width: 100%; margin-top: 10px; }
.admin_panel_header_controls { margin-left: auto; }
.admin_panel_admin_link,
.admin_panel_logout_link,
.admin_panel_login_link,
.admin_panel_register_link { padding: 5px 10px; font-size: 12px; }
.admin_panel_user_menu,
.admin_panel_login_menu { gap: 8px; }
/* Elementor parallax section mobile adjustments */
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited {
border-radius: 12px;
margin: 20px auto;
/* Performance optimizations for mobile */
transform: none !important; /* Disable transformations for better performance */
-webkit-transform: none !important;
transition: none !important; /* Disable transitions for better performance */
will-change: auto; /* Reset will-change to avoid unnecessary memory usage */
perspective: none; /* Disable 3D perspective for better performance */
-webkit-perspective: none;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-container {
padding: 25px 20px;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover {
transform: none; /* Disabled zoom effect on hover for mobile */
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-icon {
padding: 15px;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h1,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h2,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h3,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h4,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h5,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h6 {
margin-bottom: 15px;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h2:after,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited h3:after {
width: 40px;
height: 2px;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover h2:after,
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited:hover h3:after {
width: 60px;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited p {
margin-bottom: 15px;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited .elementor-button {
padding: 10px 20px;
font-size: 0.9em;
}
.elementor-section.elementor-top-section.elementor-element.elementor-element-bd0a1df.elementor-section-stretched.elementor-section-full_width.elementor-section-content-middle.elementor-section-height-default.elementor-section-height-default.sc_fly_static.trx_addons_parallax_layers_inited.trx_addons_parallax_blocks_inited ul li {
padding-left: 25px;
margin-bottom: 10px;
}
.logo_image{
max-width: 115px!important; /* або бажана ширина */
margin-left: 13%;
}
}
/* =====================================================
Khvoya: Properties selection (listing) — mobile adaptive
Target: TRX Addons properties grids/archives/shortcodes
Notes:
- Do NOT edit parent theme. These overrides live in child style.css
- Breakpoints per project: 1024px (tablet), 768px (mobile)
- Keep eco green + white aesthetic, minimal invasive changes
===================================================== */
/* Base: ensure property items can flow in a CSS grid we control */
.sc_properties .sc_properties_item { width: auto !important; float: none !important; }
/* Establish a grid only for known TRX Addons layouts to avoid side effects */
.sc_properties.sc_properties_default .sc_properties_items,
.sc_properties.sc_properties_modern .sc_properties_items,
.sc_properties.sc_properties_default .sc_properties_content,
.sc_properties.sc_properties_modern .sc_properties_content {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
/* Ensure images scale nicely inside cards */
.sc_properties .sc_properties_item .sc_properties_item_image img { width: 100%; height: auto; object-fit: cover; display:block; }
/* Make status pill and meta wrap gracefully on narrow widths */
.sc_properties .sc_properties_item .sc_properties_item_info,
.sc_properties .sc_properties_item .sc_properties_item_body { row-gap: 10px; }
.sc_properties .sc_properties_item .sc_properties_item_title { word-wrap: break-word; overflow-wrap: anywhere; }
/* Prevent horizontal overflow from inner carousels or long filters */
.sc_properties.sc_properties_default,
.sc_properties.sc_properties_modern { overflow: hidden; }
/* Filters: allow horizontal scroll on mobile without breaking layout */
.sc_properties .sc_item_filters,
.sc_properties .sc_properties_filters,
.sc_properties .trx_addons_properties_filters {
display: flex;
gap: 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.sc_properties .sc_item_filters > *,
.sc_properties .sc_properties_filters > *,
.sc_properties .trx_addons_properties_filters > * { flex: 0 0 auto; }
/* Tablet breakpoint: 2 columns */
@media (max-width: 1024px) {
.sc_properties.sc_properties_default .sc_properties_items,
.sc_properties.sc_properties_modern .sc_properties_items,
.sc_properties.sc_properties_default .sc_properties_content,
.sc_properties.sc_properties_modern .sc_properties_content {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
}
/* Mobile breakpoint: 1 column, comfy touch sizes */
@media (max-width: 768px) {
.sc_properties.sc_properties_default .sc_properties_items,
.sc_properties.sc_properties_modern .sc_properties_items,
.sc_properties.sc_properties_default .sc_properties_content,
.sc_properties.sc_properties_modern .sc_properties_content {
grid-template-columns: 1fr;
gap: 12px;
}
/* Card padding adjustments if theme provides tight spacing */
.sc_properties .sc_properties_item .sc_properties_item_info { padding: 14px; }
.sc_properties .sc_properties_item .sc_properties_item_title { font-size: 18px; line-height: 1.25; }
/* Buttons full width inside item actions if present */
.sc_properties .sc_properties_item .sc_properties_item_options .sc_properties_item_row,
.sc_properties .sc_properties_item .sc_properties_item_options .sc_properties_item_option { width: 100%; }
.sc_properties .sc_properties_item .sc_properties_item_options .sc_button { width: 100%; text-align: center; }
}
/* Small fix: avoid double gutters when parent uses margins */
.sc_properties .sc_properties_item { margin-left: 0 !important; margin-right: 0 !important; }
/* Khvoya: Related free apartments (single property) */
.khv-related-apartments {
--khv-accent: var(--kh-green-1, #7CB67A);
--khv-text: var(--kh-text, #1f2937);
--khv-muted: var(--kh-muted, #6b7280);
--khv-border: var(--kh-border, #e5e7eb);
--khv-bg: #f7faf8;
padding: 20px 24px 28px;
border-top: 1px solid var(--khv-border);
background: var(--khv-bg);
}
.khv-related-apartments__inner {
width: 100%;
margin: 0;
}
.khv-related-apartments__header {
display: grid;
gap: 6px;
margin-bottom: 16px;
}
.khv-related-apartments__eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
color: var(--khv-muted);
margin: 0;
}
.khv-related-apartments__title {
margin: 0;
font-size: 24px;
color: var(--khv-text);
}
.khv-related-apartments__subtitle {
margin: 0;
color: var(--khv-muted);
}
.khv-related-apartments__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.khv-related-card {
background: #fff;
border: 1px solid var(--khv-border);
border-radius: 16px;
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
box-shadow: 0 8px 24px rgba(31, 41, 55, 0.06);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.khv-related-card:hover {
box-shadow: 0 16px 40px rgba(31, 41, 55, 0.12);
transform: translateY(-2px);
}
.khv-related-card__thumb {
background: #fff;
border-bottom: 1px solid var(--khv-border);
padding: 10px;
min-height: 180px;
display: grid;
place-items: center;
}
.khv-related-card__thumb img {
width: 100%;
height: 180px;
object-fit: contain;
display: block;
}
.khv-related-card__thumb-placeholder {
font-size: 12px;
color: var(--khv-muted);
text-align: center;
}
.khv-related-card__body {
padding: 16px;
display: grid;
gap: 10px;
}
.khv-related-card__badges {
display: flex;
gap: 8px;
}
.khv-related-card__badge {
font-size: 11px;
padding: 2px 10px;
border-radius: 999px;
background: rgba(124, 182, 122, 0.15);
color: #1f6f2a;
border: 1px solid rgba(46, 125, 50, 0.25);
}
.khv-related-card__title {
font-size: 18px;
margin: 0;
}
.khv-related-card__title a {
color: var(--khv-text);
text-decoration: none;
}
.khv-related-card__meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
color: var(--khv-muted);
font-size: 14px;
}
.khv-related-card__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
background: linear-gradient(135deg, var(--khv-accent), #6fbf76);
border: 0;
box-shadow: 0 8px 24px rgba(124, 182, 122, 0.35);
color: #fff !important;
text-decoration: none;
font-weight: 700;
letter-spacing: 0.02em;
text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.khv-related-card__button:visited { color: #fff !important; }
.khv-related-card__button:hover,
.khv-related-card__button:focus {
background: linear-gradient(135deg, #5aa96a, #4e9a5f);
color: #fff !important;
box-shadow: 0 12px 30px rgba(124, 182, 122, 0.45);
}
@media (max-width: 1024px) {
.khv-related-apartments__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.khv-related-apartments { padding: 18px 12px 22px; }
.khv-related-apartments__grid {
grid-template-columns: 1fr;
}
.khv-related-card__thumb img { height: 160px; }
}