.page-template-map-static #map {
height: 100vh;
height: 100dvh;
width: 100vw;
margin: 0;
padding: 0;
} section.group-map #map {
height: 70vh;
width: 100vw;
margin: 0;
padding: 0;
}
.leaflet-container {
font-family: 'Inter', sans-serif;
font-weight: 400;
} .leaflet-top {
top: 55px;
}
.leaflet-bottom {
z-index: 500;
}
.leaflet-touch .leaflet-bar {
border: 1px solid #dddddd;
border-radius: 0.4rem;
overflow: hidden;
}
.leaflet-bar a {
color: #232323;
} .marker-cluster div {
font-family: 'Inter', sans-serif;
font-weight: 600;
}
.marker-cluster-small {
background-color: rgba(212, 244, 252, 0.3);
}
.marker-cluster-small div {
background-color: rgba(212, 244, 252, 0.6);
}
.marker-cluster-medium {
background-color: rgba(212, 244, 252, 0.3);
}
.marker-cluster-medium div {
background-color: rgba(212, 244, 252, 0.6);
} .leaflet-marker-icon.is-active svg {
overflow: visible;
transform: scale(1.8);
transform-origin: 50% 100%;
animation: map-pin-jump .8s cubic-bezier(0.4, 0, 0.2, 1);
}
.leaflet-marker-icon.is-active path {
stroke: #fff;
stroke-width: 3;
}
@keyframes map-pin-jump {
0% { transform: scale(1); }
30% { transform: translateY(-14px) scale(1.8); }
55% { transform: scale(1.8); }
75% { transform: translateY(-6px) scale(1.8); }
100% { transform: scale(1.8); }
}
@media (prefers-reduced-motion: reduce) {
.leaflet-marker-icon.is-active svg {
animation: none;
}
} .map-bottom-card {
visibility: hidden;
position: fixed;
bottom: 90px;
left: 50%;
width: 100%;
max-width: 90%;
transform: translate(-50%, 150%);
transition: transform 280ms cubic-bezier(.2,.8,.2,1);
padding: 0;
z-index: 800;
}
.map-bottom-card.open {
visibility: visible;
transform: translate(-50%, 0);
} .map-bottom-card .close {
top: -15px;
right: -15px;
background-color: var(--color-primary);
}
.map-card.card-item {
width: 100%;
border-radius: var(--br-lg);
} .map-card.card-item.card-grid {
display: grid;
grid-template-columns: 140px 1fr;
gap: 0;
align-items: stretch;
}
.map-card.card-item.card-grid .card-img {
width: 140px;
}
.map-card.card-item.card-grid .card-img img {
width: 100%;
height: 100%;
object-fit: cover;
} .map-card.card-item .card-content {
display: block;
}
.map-card.card-item.card-text .card-content {
padding: var(--padding-sm) var(--padding-md);
}
.map-card.card-item .item-title,
.map-card.card-item .item-adress,
.map-card.card-item .item-more a {
margin: var(--margin-xs) 0 0 0;
font-size: var(--fs-xs);
}
.map-card.card-item .item-title {
font-size: var(--fs-sm);
}
.map-card.card-item .item-adress {
padding: 0;
line-height: var(--line-height-xs);
font-weight: var(--fw-regular);
}
.map-card.card-item .item-more a {
display:inline-block;
font-weight: var(--fw-title-medium);
color: var(--color-light);
padding: 0.3rem 0.5rem;
border-radius: var(--br-sm);
text-decoration: none;
} @media screen and (min-width: 680px) {
.map-bottom-card {
width: auto;
}
.map-card.card-item {
width: 600px;
}
.map-card.card-item.card-text {
width: 400px;
}
.map-card.card-item.card-grid {
grid-template-columns: 170px 1fr;
gap: var(--padding-sm);
}
.map-card.card-item.card-grid .card-img {
width: 170px;
}
} #geo-error {
display: none;
position: absolute;
top: 10px;
left: 10px;
z-index: 9999;
background: #cd1719;
color: white;
padding: 10px 15px;
border-radius: 8px;
font-family: sans-serif;
font-size: 0.9em;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
} .map-panel {
position: fixed;
z-index: 1001;
overflow-y: auto;
padding: 20px 24px 28px;
background: var(--color-light);
font-size: 15px;
}
.map-panel:not(.is-open) {
visibility: hidden;
}
.map-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.map-panel-title {
margin: 0;
padding: 0;
font-weight: var(--fw-semibold);
}
.map-panel-close {
min-height: 44px;
padding: 0 2px 0 12px;
border: 0;
background: none;
color: var(--color-main);
font: inherit;
text-decoration: underline;
cursor: pointer;
}
.map-search label,
.map-group legend {
display: block;
margin: 0 0 6px;
padding: 0;
color: #6b6b6b;
font-size: 12px;
font-weight: var(--fw-semibold);
letter-spacing: .05em;
text-transform: uppercase;
}
.map-search input {
width: 100%;
padding: 10px 12px;
border: 1px solid #8a8a8a;
border-radius: var(--br-sm);
background: var(--color-light);
color: var(--color-main);
font: inherit;
}
.map-results {
margin: 4px 0 0;
padding: 0;
list-style: none;
}
.map-results button {
display: block;
width: 100%;
padding: 8px 2px;
border: 0;
border-bottom: 1px solid var(--color-lightbeige);
background: none;
color: var(--color-main);
font: inherit;
text-align: left;
cursor: pointer;
transition: color .15s cubic-bezier(0.4, 0, 0.2, 1);
}
.map-results button:hover {
color: var(--color-red);
}
.map-results small {
display: block;
color: #6b6b6b;
font-size: 13px;
}
.map-empty {
padding: 8px 2px;
color: #6b6b6b;
}
.map-group {
margin: 24px 0 0;
padding: 18px 0 0;
border: 0;
border-top: 1px solid var(--color-lightbeige);
}
.map-group legend {
float: left;
width: 100%;
}
.map-group legend + * {
clear: both;
}
.map-row {
display: flex;
align-items: center;
gap: 10px;
min-height: 36px;
cursor: pointer;
}
.map-row input {
flex: none;
width: 17px;
height: 17px;
margin: 0;
accent-color: var(--color-main);
}
.map-dot {
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
}
.map-count {
margin-left: auto;
color: #6b6b6b;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.map-panel-tab {
position: fixed;
z-index: 1000;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--color-lightbeige);
background: var(--color-light);
color: var(--color-main);
font: inherit;
font-size: 15px;
font-weight: var(--fw-semibold);
cursor: pointer;
}
.map-panel-tab .chev {
flex: none;
width: 14px;
height: 14px;
transition: transform .45s ease;
} @media (max-width: 991px) {
.map-panel {
left: 0;
right: 0;
bottom: 0;
height: 80dvh;
border-top: 1px solid var(--color-lightbeige);
border-radius: var(--br-sm) var(--br-sm) 0 0;
transform: translateY(100%);
transition: transform .25s ease, visibility 0s .25s;
}
.map-panel.is-open {
transform: none;
transition: transform .25s ease;
}
.map-panel-tab {
top: 62px;
right: 10px;
min-height: 44px;
padding: 0 14px;
border-radius: var(--br-sm);
}
.map-panel-tab .chev {
transform: rotate(90deg);
}
} @media (min-width: 992px) {
:root {
--map-panel-w: 320px;
}
.map-panel {
top: 64px;
right: 0;
bottom: 0;
width: var(--map-panel-w);
border: 1px solid var(--color-lightbeige);
border-right: 0;
border-radius: var(--br-sm) 0 0 0;
transform: translateX(100%);
transition: transform .45s cubic-bezier(.4, 0, .2, 1), visibility 0s .45s;
}
.map-panel.is-open {
transform: none;
transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.map-panel-head {
display: none;
}
.map-panel-tab {
top: 50%;
right: 0;
flex-direction: column;
padding: 14px 8px;
border-right: 0;
border-radius: var(--br-sm) 0 0 var(--br-sm);
transform: translateY(-50%);
transition: right .45s cubic-bezier(.4, 0, .2, 1), color .15s;
}
.map-panel-tab:hover {
color: var(--color-red);
}
.map-panel-tab span {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.map-panel.is-open ~ .map-panel-tab {
right: var(--map-panel-w);
}
.map-panel.is-open ~ .map-panel-tab .chev {
transform: rotate(180deg);
}
}
@media (prefers-reduced-motion: reduce) {
.map-panel,
.map-panel.is-open,
.map-panel-tab,
.map-panel-tab .chev {
transition: none;
}
}