Template:FrisardiHamburger: differenze tra le versioni

Versione attuale delle 16:59, 13 set 2025

/* Tienilo in alto a destra sopra la cover, stile home (senza JS) */ .frisardi-hb { position: fixed; top: 86px; right: 18px; z-index: 9999; }

/* Bottone tondo */ .frisardi-hb-btn{

 display:inline-flex; align-items:center; gap:8px;
 padding:10px 14px; border-radius:999px;
 background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
 border:1px solid #e9e9e9; text-decoration:none; cursor:pointer;
 font-weight:600; font-size:14px; box-shadow:0 6px 18px rgba(0,0,0,.06);

} .frisardi-hb-btn .bars{ display:inline-block; width:16px; height:12px; position:relative; } .frisardi-hb-btn .bars::before, .frisardi-hb-btn .bars::after, .frisardi-hb-btn .bar{

 content:""; display:block; height:2px; background:#333; border-radius:2px; position:absolute; left:0; right:0;

} .frisardi-hb-btn .bar{ top:5px; } .frisardi-hb-btn .bars::before{ top:0; } .frisardi-hb-btn .bars::after{ bottom:0; }

/* Pannello */ .frisardi-hb-panel{

 position: fixed; top: 130px; right: 18px;
 background:#fff; border:1px solid #e9e9e9; border-radius:16px;
 width:280px; padding:10px; box-shadow:0 18px 36px rgba(0,0,0,.10);
 display:none; z-index:10000;

} .frisardi-hb-panel ul{ list-style:none; margin:6px 0; padding:0;} .frisardi-hb-panel li a{

 display:block; padding:10px 12px; border-radius:10px; text-decoration:none; border:1px solid #eee;

} .frisardi-hb-panel li a:hover{ box-shadow:0 8px 24px rgba(0,0,0,.06); }

/* Toggle senza JS */

fr-hb-toggle{ display:none; }
fr-hb-toggle:checked + label + .frisardi-hb-panel{ display:block; }

/* Mobile: abbassa un filo */ @media (max-width:768px){

 .frisardi-hb{ top: 70px; right: 12px; }
 .frisardi-hb-panel{ top: 112px; right:12px; width: 88vw; }

}

@@ Riga 1: / Riga 1: @@
-<div class="frisardi-hb">
+/* Tienilo in alto a destra sopra la cover, stile home (senza JS) */
-  <input type="checkbox" id="fr-hb-toggle" />
+.frisardi-hb { position: fixed; top: 86px; right: 18px; z-index: 9999; }
-  <label for="fr-hb-toggle" class="frisardi-hb-btn">
-    <span class="bars"><span class="bar"></span></span>
-    Brand Frisardi
-  </label>
-  <div class="frisardi-hb-panel">
-    <ul>
-      <!-- VERSIONE con ancore nella stessa pagina -->
-      <li>[[#founders|👥 Founders]]</li>
-      <li>[[#clinica|🏥 Clinica]]</li>
-      <li>[[#casi|📚 Casi clinici]]</li>
-      <li>[[#eventi|📅 Eventi]]</li>
-      <li>[[#contatti|✉️ Contatti]]</li>
-      <!-- IN ALTERNATIVA, linka sottopagine:
+/* Bottone tondo */
-      <li>[[Frisardi:Founders|👥 Founders]]</li>
+.frisardi-hb-btn{
-      <li>[[Frisardi:Clinica|🏥 Clinica]]</li>
+  display:inline-flex; align-items:center; gap:8px;
-      <li>[[Frisardi:Casi_Clinici/Indice|📚 Casi clinici]]</li>
+  padding:10px 14px; border-radius:999px;
-      <li>[[Frisardi:Eventi|📅 Eventi]]</li>
+  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
-      <li>[[Frisardi:Contatti|✉️ Contatti]]</li>
+  border:1px solid #e9e9e9; text-decoration:none; cursor:pointer;
-      -->
+  font-weight:600; font-size:14px; box-shadow:0 6px 18px rgba(0,0,0,.06);
-    </ul>
+}
-   </div>
+.frisardi-hb-btn .bars{ display:inline-block; width:16px; height:12px; position:relative; }
-</div>
+.frisardi-hb-btn .bars::before, .frisardi-hb-btn .bars::after, .frisardi-hb-btn .bar{
+  content:""; display:block; height:2px; background:#333; border-radius:2px; position:absolute; left:0; right:0;
+}
+.frisardi-hb-btn .bar{ top:5px; } .frisardi-hb-btn .bars::before{ top:0; } .frisardi-hb-btn .bars::after{ bottom:0; }
+/* Pannello */
+.frisardi-hb-panel{
+  position: fixed; top: 130px; right: 18px;
+  background:#fff; border:1px solid #e9e9e9; border-radius:16px;
+  width:280px; padding:10px; box-shadow:0 18px 36px rgba(0,0,0,.10);
+  display:none; z-index:10000;
+}
+.frisardi-hb-panel ul{ list-style:none; margin:6px 0; padding:0;}
+.frisardi-hb-panel li a{
+  display:block; padding:10px 12px; border-radius:10px; text-decoration:none; border:1px solid #eee;
+}
+.frisardi-hb-panel li a:hover{ box-shadow:0 8px 24px rgba(0,0,0,.06); }
+/* Toggle senza JS */
+#fr-hb-toggle{ display:none; }
+#fr-hb-toggle:checked + label + .frisardi-hb-panel{ display:block; }
+/* Mobile: abbassa un filo */
+@media (max-width:768px){
+  .frisardi-hb{ top: 70px; right: 12px; }
+   .frisardi-hb-panel{ top: 112px; right:12px; width: 88vw; }
+}