Template:FrisardiHamburger.css

Versione del 13 set 2025 alle 16:52 di Gianni (discussione | contributi) (Creata pagina con "assicura che l'hero sia un riferimento posizionale (la tua cover class): .frisardi-nettuno-cover { position: relative; } contenitore hamburger, agganciato all'hero: .frisardi-hb { position: absolute; top: 18px; right: 18px; z-index: 10; } bottone tondo: .frisardi-hb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border: 1px solid #e...")
(diff) ← Versione meno recente | Versione attuale (diff) | Versione più recente → (diff)

/* assicura che l'hero sia un riferimento posizionale (la tua cover class) */ .frisardi-nettuno-cover { position: relative; }

/* contenitore hamburger, agganciato all'hero */ .frisardi-hb { position: absolute; top: 18px; right: 18px; z-index: 10; }

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

 display: inline-flex; align-items: center; gap: 8px;
 padding: 10px 14px; border-radius: 999px;
 background: rgba(255,255,255,.9); 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: absolute; top: 56px; right: 0;
 background: rgba(255,255,255,.98); border:1px solid #e9e9e9; border-radius: 16px;
 width: 280px; padding: 10px; box-shadow: 0 18px 36px rgba(0,0,0,.10);
 display: none;

} .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 CSS-only (checkbox hack) */

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

/* mobile: sposta un filo più in giù e allarga tappabile */ @media (max-width: 768px) {

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

}