Map Popup

<div class="nuda-mappop">
  <div class="nuda-mappop__card">
    <div class="nuda-mappop__title">Plaza Mayor</div>
    <div class="nuda-mappop__meta">★ 4.8 · 1.2 km away</div>
  </div>
  <div class="nuda-mappop__tail"></div>
  <div class="nuda-mappop__pin"><span></span></div>
</div>

.nuda-mappop {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  animation: _popIn .5s cubic-bezier(.34,1.56,.64,1);
}

.nuda-mappop__card {
  padding: 8px 12px;
  background: #fafafa;
  color: #09090b;
  border-radius: 8px;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.5);
}

.nuda-mappop__title {
  font-size: 12px;
  font-weight: 700;
}

.nuda-mappop__meta {
  font-size: 10px;
  color: #63636e;
  margin-top: 1px;
}

.nuda-mappop__tail {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #fafafa;
  margin-top: -1px;
}

.nuda-mappop__pin {
  margin-top: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e4ff54;
  border: 2px solid #fafafa;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}

.nuda-mappop__pin span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: _popPing 2s ease-out infinite;
  background: #e4ff54;
  opacity: .5;
}

@keyframes _popIn {
  0% {
    transform: translateY(8px) scale(.92);
    opacity: 0;
  }
  60% {
    transform: translateY(-2px) scale(1.04);
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes _popPing {
  from {
    transform: scale(1);
    opacity: .5;
  }
  to {
    transform: scale(2.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-mappop,.nuda-mappop__pin span {
    animation: none;
  }
}