3rd

public/css/header.css

@@ -1,84 +1,60 @@
-header {
-  padding: 10px 15px;
-  background: #333;
-  color: white;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: sticky;  /* o fixed se preferisci header sempre fisso */
-  top: 0;
-  z-index: 100;      /* > mappa (che sta a 50) */
-
-}
-
-.top-buttons {
-  display: flex;
-  gap: 10px;
-}
-
-.icon-btn {
-  background: none;
-  border: none;
-  font-size: 22px;
-  padding: 6px 10px;
-  cursor: pointer;
-  border-radius: 6px;
-}
-
-.icon-btn:hover {
-  background: rgba(255,255,255,0.15);
-}
-
-.icon-btn {
-  background: none;
-  border: none;
-  font-size: 22px;
-  padding: 6px 10px;
-  cursor: pointer;
-  border-radius: 6px;
-  color: white; /* 🔥 questo mancava */
-}
-
-/* Testo solo per screen reader */
-.sr-only {
-  position: absolute !important;
-  width: 1px; height: 1px;
-  padding: 0; margin: -1px;
-  overflow: hidden; clip: rect(0,0,1px,1px);
-  white-space: nowrap; border: 0;
-}
-
-/* Bottone */
-.icon-btn.logout-btn {
-  --size: 36px;
-  --bg-hover: rgba(255,255,255,0.12);   /* hover chiaro su sfondo nero */
-  --ring: rgba(255,255,255,0.35);       /* focus ring chiaro */
-
-  width: var(--size);
-  height: var(--size);
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
-}
-
-.icon-btn.logout-btn:hover { background: var(--bg-hover); }
-.icon-btn.logout-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
-.icon-btn.logout-btn:active { transform: translateY(1px); }
-
-/* PNG bianco: se l'originale è scuro/nero su trasparente */
-.logout-icon {
-  width: 22px;
-  height: 22px;
-  display: block;
-  filter: brightness(0) invert(1);   /* → bianco */
-  /* facoltativo, per nitidezza */
-  image-rendering: -webkit-optimize-contrast;
-}
-
-/* Se hai una versione retina 2x, usa srcset nell'HTML */
+/* Header più compatto (~50%) */
+header {
+  padding: 4px 10px;              /* era 10px 15px */
+  background: #333;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+/* Titolo più piccolo e senza margini extra */
+header h1 {
+  font-size: 18px;                /* ridotto */
+  line-height: 1.1;
+  margin: 0;
+}
+
+/* Icone più vicine tra loro */
+.top-buttons {
+  display: flex;
+  gap: 6px;                       /* era 10px */
+}
+
+/* Bottoni icona più compatti */
+.icon-btn {
+  background: none;
+  border: none;
+  font-size: 18px;                /* era 22px */
+  padding: 3px 6px;               /* era 6px 10px */
+  cursor: pointer;
+  border-radius: 6px;
+  color: white;
+  line-height: 1;
+  min-height: 32px;               /* tap target minimo desktop */
+  min-width: 32px;
+}
+
+.icon-btn:hover {
+  background: rgba(255,255,255,0.15);
+}
+
+/* Logout rotondo: riduciamo la “bolla” */
+.icon-btn.logout-btn {
+  --size: 28px;                   /* era 36px */
+  width: var(--size);
+  height: var(--size);
+  padding: 0;
+}
+
+/* PNG del logout in scala con l’header */
+.logout-icon {
+  width: 18px;                    /* era 22px */
+  height: 18px;
+  display: block;
+  filter: brightness(0) invert(1);
+  image-rendering: -webkit-optimize-contrast;
+}

public/index.html

@@ -52,8 +52,6 @@
           alt=""
           aria-hidden="true"
           width="22" height="22">
-        <!-- Testo accessibile (solo per screen reader) -->
-        <span class="sr-only">Logout</span>
       </button>
     </div>
   </header>