.ark-map-component {
--ark-yellow: #ffc400;
--ark-ink: #0b0b0b;
--ark-paper: #f5f2ea;
--ark-muted: #6c6a64;
overflow: hidden;
border: 1px solid rgb(11 11 11 / 14%);
border-radius: 24px;
background: #fff;
box-shadow: 0 22px 70px rgb(11 11 11 / 9%);
color: var(--ark-ink);
font-family: Arial, Helvetica, sans-serif;
}
.ark-map-component * {
box-sizing: border-box;
}
.ark-map-toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 26px;
padding: 20px 22px;
border-bottom: 1px solid rgb(11 11 11 / 12%);
background: #fff;
}
.ark-map-kicker,
.ark-map-count {
margin: 0;
}
.ark-map-kicker {
font-size: 12px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.ark-map-count {
margin-top: 4px;
color: var(--ark-muted);
font-size: 13px;
}
.ark-map-filters {
display: flex;
overflow-x: auto;
gap: 8px;
max-width: 76%;
padding: 2px;
scrollbar-width: thin;
}
.ark-map-filters button {
min-height: 38px;
padding: 8px 14px;
border: 1px solid rgb(11 11 11 / 18%);
border-radius: 999px;
background: #fff;
color: var(--ark-ink);
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.ark-map-filters button:hover,
.ark-map-filters button:focus-visible,
.ark-map-filters button.is-active {
border-color: var(--ark-ink);
background: var(--ark-yellow);
outline: none;
}
.ark-map-filters button:focus-visible {
box-shadow: 0 0 0 3px rgb(255 196 0 / 35%);
}
.ark-filter-more,
.ark-filter-menu {
display: none;
}
.ark-map-canvas {
width: 100%;
height: 530px;
background: #dce3df;
}
.ark-map-component--full .ark-map-canvas {
height: min(720px, 75vh);
min-height: 560px;
}
.ark-map-footer {
display: flex;
justify-content: flex-end;
padding: 16px 22px;
border-top: 1px solid rgb(11 11 11 / 12%);
background: var(--ark-yellow);
}
.ark-map-footer a {
color: var(--ark-ink);
font-size: 13px;
font-weight: 900;
letter-spacing: .04em;
text-decoration: none;
text-transform: uppercase;
}
.ark-map-footer a:hover,
.ark-map-footer a:focus-visible {
text-decoration: underline;
text-underline-offset: 4px;
}
.ark-marker-shell,
.ark-cluster-shell {
background: transparent;
border: 0;
}
.ark-marker {
position: relative;
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 3px solid #fff;
border-radius: 50% 50% 50% 6px;
background: var(--ark-yellow);
box-shadow: 0 7px 20px rgb(0 0 0 / 32%);
transform: rotate(-45deg);
}
.ark-marker i {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--ark-ink);
}
.ark-cluster {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border: 4px solid #fff;
border-radius: 50%;
background: var(--ark-yellow);
box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
color: var(--ark-ink);
font-size: 15px;
font-weight: 900;
}
.ark-map-component .leaflet-popup-content-wrapper {
overflow: hidden;
padding: 0;
border-radius: 17px;
box-shadow: 0 18px 50px rgb(0 0 0 / 26%);
}
.ark-map-component .leaflet-popup-content {
width: 320px !important;
margin: 0;
}
.ark-map-component .leaflet-popup-close-button {
top: 8px;
right: 8px;
display: grid;
width: 30px;
height: 30px;
place-items: center;
border-radius: 50%;
background: rgb(255 255 255 / 94%);
color: var(--ark-ink);
font-size: 22px;
}
.ark-popup__image {
display: block;
width: 100%;
height: 158px;
object-fit: cover;
}
.ark-popup__body {
padding: 18px;
}
.ark-popup__types {
margin: 0 0 7px;
color: #6f5a00;
font-size: 10px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.ark-popup h3 {
margin: 0;
font-size: 21px;
line-height: 1.06;
letter-spacing: -.025em;
}
.ark-popup__place {
margin: 7px 0 0;
color: var(--ark-muted);
font-size: 12px;
}
.ark-popup__facts {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 8px;
margin: 15px 0;
}
.ark-popup__facts div {
padding: 9px 10px;
border-radius: 9px;
background: var(--ark-paper);
}
.ark-popup__facts dt {
color: var(--ark-muted);
font-size: 9px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.ark-popup__facts dd {
margin: 3px 0 0;
font-size: 12px;
font-weight: 800;
}
.ark-popup__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.ark-button {
display: grid;
min-height: 40px;
place-items: center;
padding: 9px 10px;
border: 2px solid var(--ark-ink);
border-radius: 9px;
font-size: 11px;
font-weight: 900;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.ark-button--dark {
background: var(--ark-ink);
color: #fff !important;
}
.ark-button--yellow {
background: var(--ark-yellow);
color: var(--ark-ink) !important;
}
.ark-button:hover,
.ark-button:focus-visible {
transform: translateY(-1px);
filter: brightness(.96);
outline: 3px solid rgb(255 196 0 / 35%);
}
.ark-map-error {
margin: 0;
padding: 30px;
border: 2px solid #b00020;
background: #fff;
color: #7b0016;
font-weight: 700;
}
@media (max-width: 820px) {
.ark-map-toolbar {
align-items: stretch;
flex-direction: column;
gap: 14px;
}
.ark-map-filters {
max-width: 100%;
}
.ark-map-filters {
position: relative;
overflow: visible;
flex-wrap: nowrap;
align-items: center;
}
.ark-map-filters button.is-overflow {
display: none;
}
.ark-map-filters .ark-filter-more {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
width: 40px;
padding: 8px;
font-size: 19px;
line-height: 1;
}
.ark-map-filters .ark-filter-more[hidden] {
display: none;
}
.ark-filter-menu {
display: none;
position: absolute;
z-index: 1200;
right: 0;
top: calc(100% + 7px);
min-width: 210px;
padding: 8px;
border: 1px solid rgb(11 11 11 / 14%);
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
}
.ark-filter-menu.is-open {
display: grid;
gap: 6px;
}
.ark-map-filters .ark-filter-menu button {
display: block;
width: 100%;
text-align: left;
}
.ark-map-canvas,
.ark-map-component--full .ark-map-canvas {
height: 68vh;
min-height: 490px;
max-height: 650px;
}
}
@media (max-width: 480px) {
.ark-map-component {
border-radius: 17px;
}
.ark-map-toolbar {
padding: 16px;
}
.ark-map-canvas,
.ark-map-component--full .ark-map-canvas {
height: 62vh;
min-height: 460px;
}
.ark-map-component .leaflet-popup-content {
width: min(290px, calc(100vw - 64px)) !important;
}
.ark-popup__image {
height: 135px;
}
}
@media (prefers-reduced-motion: reduce) {
.ark-map-component *,
.ark-map-component *::before,
.ark-map-component *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
.ark-marker--soon { background: #fff; border-color: var(--ark-yellow); }
.ark-marker--earth { background: #b68a5a; }
.ark-popup__placeholder { display:grid; height:158px; place-items:center; align-content:center; gap:4px; background:linear-gradient(135deg,#f5f2ea,#e5e1d8); color:var(--ark-ink); text-align:center; }
.ark-popup__placeholder span { font-size:18px; font-weight:900; letter-spacing:.08em; }
.ark-popup__placeholder small { color:var(--ark-muted); font-size:11px; }
.ark-popup__status { display:inline-block; margin:0 0 8px; padding:5px 8px; border-radius:999px; background:var(--ark-yellow); color:var(--ark-ink); font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.ark-popup__notice { margin:0 0 14px; padding:10px 11px; border-left:4px solid var(--ark-yellow); background:#fff8d9; color:#544600; font-size:11px; line-height:1.4; }
.ark-popup__actions--1 { grid-template-columns:1fr; } .ark-marker--pumptrack { background: #ffc400; }
.ark-marker--cancha { background: #1f6fd1; }
.ark-marker--tierra-mtb { background: #8a5a32; }
.ark-marker--skatepark { background: #7c838b; }
.ark-marker--proximamente { background: #2f3337; }
.ark-marker--neutro { background: #5b6168; }
.ark-marker--cancha i,
.ark-marker--tierra-mtb i,
.ark-marker--skatepark i,
.ark-marker--proximamente i,
.ark-marker--neutro i { background: #fff; }
.ark-cluster {
background: #ffc400;
color: #0b0b0b;
}
.ark-popup__placeholder {
display: grid;
width: 100%;
height: 158px;
place-items: center;
align-content: center;
gap: 3px;
background: #ece9e1;
color: #0b0b0b;
}
.ark-popup__placeholder span { font-size: 19px; font-weight: 900; letter-spacing: .04em; }
.ark-popup__placeholder small { color: #6c6a64; font-size: 11px; }
.ark-popup__description { margin: 12px 0 0; color: #333; font-size: 12px; line-height: 1.5; }
.ark-popup__notice { margin: 12px 0 0; padding: 10px 11px; border-radius: 9px; background: #f3f0e8; color: #555149; font-size: 11px; line-height: 1.45; }
.ark-popup__status { display: inline-block; margin: 0 0 8px; padding: 4px 8px; border-radius: 999px; background: #2f3337; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ark-popup__actions--1 { grid-template-columns: 1fr; } .ark-marker--private {
background: #ffc400 !important;
border-color: #fff !important;
}
.ark-marker--private .ark-marker__lock {
display: grid;
width: 18px;
height: 20px;
place-items: center;
color: #0b0b0b;
transform: rotate(45deg);
transform-origin: center;
}
.ark-marker--private .ark-marker__lock svg {
display: block;
width: 16px;
height: 18px;
}
.ark-popup__access {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0 0;
padding: 10px 11px;
border-radius: 10px;
font-size: 11px;
line-height: 1.35;
}
.ark-popup__access span:last-child { display: grid; gap: 2px; }
.ark-popup__access strong { color: #0b0b0b; font-size: 11px; }
.ark-popup__access small { color: #4f4d47; font-size: 10px; }
.ark-popup__access--public { background: #f3f0e8; }
.ark-popup__access--private { background: #fff3bd; border: 1px solid #f2d25a; }
.ark-popup__access-icon { font-size: 18px; line-height: 1; }
.ark-popup__access-dot {
width: 12px;
height: 12px;
flex: 0 0 12px;
border-radius: 999px;
background: #2d8a45;
}