Files
fuz-site/src/styles/map-google.css

150 lines
2.3 KiB
CSS

/* PODSTAWY */
.fuz-map {
@apply w-full;
}
/* Pełna mapa (zasięg) */
.fuz-map--full {
@apply absolute inset-0 w-full h-full mt-4 md:mt-0;
}
/* Mapa na stronie kontaktu */
.fuz-map--contact {
@apply w-full h-[350px] md:h-[450px] overflow-hidden shadow-lg;
}
/* Mała karta mapy (inne sekcje) */
/* .fuz-map--card {
@apply w-full h-[350px] overflow-hidden mt-8;
} */
/*
.map-range-container {
@apply sticky top-[67px] z-[999] flex justify-center w-full pointer-events-auto;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9000;
display: flex;
justify-content: center;
}
*/
/* Pulsująca obwódka budynku */
.pulse-marker {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(0, 170, 255, 0.55);
position: absolute;
transform: translate(-50%, -50%);
animation: pulseAnim 1.3s ease-out forwards;
}
@keyframes pulseAnim {
0% {
transform: translate(-50%, -50%) scale(0.2);
opacity: 1;
}
80% {
transform: translate(-50%, -50%) scale(1.6);
opacity: 0.3;
}
100% {
opacity: 0;
}
}
/* Animacja markera */
.marker-bounce {
animation: markerBounce 0.35s ease-out forwards;
}
@keyframes markerBounce {
0% {
transform: translateY(-18px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Info window */
.f-info-window {
@apply p-3;
}
/* HEADER */
.f-info-header {
margin-bottom: 10px;
}
.f-info-heading {
@apply text-lg uppercase;
.ok {
color: green;
}
.no {
color: #d00;
}
}
.f-info-city,
.f-info-street {
@apply text-xl ml-3;
}
.gm-style {
background: var(--f--background) !important;
}
.gm-style-iw-c {
background: var(--f-background) !important;
border-radius: 14px !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12) !important;
padding: 0 !important;
}
.gm-style-iw-d {
overflow: visible !important;
padding: 0 !important;
background: transparent !important;
}
.fuz-cities-box {
background: var(--f-background);
color: var(--f-text);
padding: 16px;
}
.fuz-cities-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 12px;
}
.fuz-cities-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 6px 14px;
font-size: 0.95rem;
line-height: 1.4;
}
.fuz-city-item {
color: var(--f-text);
}