hint

backend/static/styles.css

@@ -1395,9 +1395,94 @@ body.has-route-modal {
   }
 }
 
+.location-video-card {
+  width: min(100%, 920px);
+  margin: 0 auto 1.1rem;
+  overflow: hidden;
+  border: 1px solid rgba(178, 137, 70, 0.24);
+  border-radius: 16px;
+  background: #1f3a2f;
+  box-shadow:
+    0 14px 30px rgba(31, 58, 47, 0.16),
+    0 1px 0 rgba(255, 255, 255, 0.22) inset;
+}
+
+.location-video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #1f3a2f;
+  object-fit: cover;
+}
+
+.location-slideshow {
+  position: relative;
+  isolation: isolate;
+  width: min(100%, 920px);
+  aspect-ratio: 16 / 9;
+  margin: 1rem auto 1.1rem;
+  overflow: hidden;
+  border: 1px solid rgba(178, 137, 70, 0.24);
+  border-radius: 16px;
+  background: #eadfce;
+  box-shadow:
+    0 14px 30px rgba(31, 58, 47, 0.14),
+    0 1px 0 rgba(255, 255, 255, 0.64) inset;
+}
+
+.location-slideshow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  background:
+    linear-gradient(180deg, rgba(22, 34, 28, 0.06), transparent 44%),
+    linear-gradient(0deg, rgba(22, 34, 28, 0.12), transparent 34%);
+}
+
+.location-slide {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transform: scale(1.03);
+  animation: location-slide-fade 36s ease-in-out infinite;
+  animation-delay: calc(var(--slide-index) * 6s);
+}
+
+@keyframes location-slide-fade {
+  0% {
+    opacity: 0;
+    transform: scale(1.03);
+  }
+  4%,
+  16% {
+    opacity: 1;
+  }
+  22%,
+  100% {
+    opacity: 0;
+    transform: scale(1.08);
+  }
+}
+
+.location-map-intro {
+  max-width: 58ch;
+  margin: 1rem auto 0.75rem;
+  color: rgba(31, 26, 23, 0.82);
+  line-height: 1.5;
+  text-align: center;
+}
+
 .map-consent {
   display: grid;
   gap: 0.7rem;
+  width: min(100%, 920px);
+  margin: 0 auto;
   padding: 0.9rem;
   border: 1px solid rgba(31, 58, 47, 0.12);
   border-radius: 12px;
@@ -1413,17 +1498,18 @@ body.has-route-modal {
 
 .map-preview {
   width: 100%;
-  aspect-ratio: 16 / 7;
+  aspect-ratio: 4 / 3;
   min-height: 0;
+  overflow: hidden;
   border: 1px solid rgba(39, 66, 53, 0.16);
   border-radius: 12px;
   cursor: pointer;
   background-color: rgba(221, 230, 225, 0.95);
   background-image:
-    linear-gradient(180deg, rgba(28, 45, 37, 0.22), rgba(28, 45, 37, 0.22)),
+    linear-gradient(180deg, rgba(22, 34, 28, 0.12), rgba(22, 34, 28, 0.2)),
     var(--map-preview-image);
-  background-size: contain;
-  background-position: top left;
+  background-size: cover;
+  background-position: center;
   background-repeat: no-repeat;
   display: grid;
   place-items: center;
@@ -1440,9 +1526,11 @@ body.has-route-modal {
 .map-preview-overlay {
   font-weight: 700;
   color: #fff;
-  background: rgba(39, 66, 53, 0.9);
+  background: rgba(31, 58, 47, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.26);
   border-radius: 999px;
-  padding: 0.48rem 0.82rem;
+  box-shadow: 0 8px 18px rgba(18, 31, 24, 0.2);
+  padding: 0.58rem 0.95rem;
 }
 
 .map-embed-target:not(:empty) {
@@ -1497,6 +1585,11 @@ body.has-route-modal {
     justify-content: center;
   }
 
+  .location-slideshow {
+    aspect-ratio: 4 / 3;
+    border-radius: 13px;
+  }
+
   .dashboard-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1555,6 +1648,15 @@ body.has-route-modal {
     animation: none;
     opacity: 0;
   }
+
+  .location-slide {
+    animation: none;
+  }
+
+  .location-slide:first-child {
+    opacity: 1;
+    transform: none;
+  }
 }
 
 @media (max-width: 380px) {