5th

public/css/infoPanel.css

@@ -1,3 +1,27 @@
+/* ===============================
+   Variabili (scala tipografica pannello info)
+   Modifica qui per regolare tutto il pannello
+   =============================== */
+:root {
+  --info-font: 14px;      /* base testo pannello (prima ~16px) */
+  --info-line: 1.4;       /* interlinea per migliorare leggibilità */
+
+  --info-heading: 15px;   /* dimensione titoli h3 nel pannello */
+  --info-h3-mt: 6px;      /* margin-top h3 */
+  --info-h3-mb: 10px;     /* margin-bottom h3 */
+
+  --info-row-gap: 8px;    /* spazio verticale tra righe (era 10px) */
+  --info-label-w: 100px;  /* larghezza colonna etichette (era 110px) */
+
+  --info-map-h: 220px;    /* altezza mappa (era 250px) */
+  --info-map-mt: 15px;    /* spazio sopra la mappa */
+
+  --info-spacer-h: 16px;  /* altezza degli spacer */
+}
+
+/* ===============================
+   PANNELLO INFO
+   =============================== */
 .info-panel {
   position: fixed;
   top: 0;
@@ -11,34 +35,54 @@
   z-index: 10000;
   transform: translateX(100%);
   transition: transform 0.3s ease;
+
+  /* Scala tipografica via variabili */
+  font-size: var(--info-font);
+  line-height: var(--info-line);
 }
 
 .info-panel.open {
   transform: translateX(0);
 }
 
+/* Titoli un filo più compatti */
 .info-panel h3 {
-  margin-top: 0;
+  font-size: var(--info-heading);
+  margin: var(--info-h3-mt) 0 var(--info-h3-mb);
 }
 
+/* Righe e label */
 .info-row {
-  margin-bottom: 10px;
+  margin-bottom: var(--info-row-gap);
 }
 
 .info-row b {
   display: inline-block;
-  width: 110px;
+  width: var(--info-label-w);
 }
 
+/* Mappa nel pannello */
 .info-map {
   width: 100%;
-  height: 250px;
+  height: var(--info-map-h);
-  margin-top: 15px;
+  margin-top: var(--info-map-mt);
   border-radius: 6px;
   overflow: hidden;
   border: 1px solid #ccc;
 }
 
+/* Spacer verticali */
 .info-spacer {
-  height: 16px;   /* o 20px se vuoi più spazio */
+  height: var(--info-spacer-h);
 }
+
+/* ===============================
+   (Opzionale) Mobile: un filo più grande < 480px
+   Decommenta se vuoi mantenere leggibilità maggiore su schermi piccoli
+   =============================== */
+/*
+@media (max-width: 480px) {
+  .info-panel { font-size: 15px; }
+  .info-panel h3 { font-size: 16px; }
+}
+*/