/* ========================================================================= Metzger®Fest HORECA — tema della pagina evento (lunedì 5 ottobre). È il fest, per chi lavora nell'ospitalità: stessa carta crema, rosso e nero, "METZGER" slab e FEST a lampadine. In più la targa HORECA, nera con le lampadine accese come un'insegna da locale, e sulla locandina la fascia con la data. Si applica sopra styles.css con . ========================================================================= */ .tema-horeca { --acceso: #ffc24a; --spento: #5a4a33; } /* ---------------------------------------------------------------- hero */ .hero--horeca .hero__fest { width: min(100%, 300px); margin: 12px 0 16px; } /* Targa HORECA: fondo nero, lampadine accese; un'onda le spegne per un attimo, colonna per colonna (l'opposto di FEST, che si accende). */ .targa { display: block; width: min(100%, 480px); margin: 0 0 26px; padding: 16px 20px; background: var(--nero); border: 3px solid var(--nero); border-radius: 12px; box-shadow: 6px 6px 0 var(--rosso); transform: rotate(-1.5deg); } .targa .insegna { filter: drop-shadow(0 0 5px rgba(255, 194, 74, 0.55)); } .targa .bulbo__vetro { fill: var(--acceso); animation-name: targa; } .targa .bulbo__riflesso { opacity: 0.55; } @keyframes targa { 0%, 58%, 100% { fill: var(--acceso); } 64%, 72% { fill: var(--spento); } } .hero--horeca .hero__date { margin-bottom: 8px; } /* ------------------------------------------------------------ locandina */ /* Fascia con la data sulla locandina del fest, come un'aggiunta incollata sopra la stampa. */ .fascia { position: absolute; left: -9%; right: -9%; bottom: 17%; padding: 11px 10px 9px; background: var(--rosso); color: #fff; border: 3px solid var(--nero); box-shadow: 5px 5px 0 var(--nero); transform: rotate(-7deg); font-family: var(--display); font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; white-space: nowrap; } .fascia b { font-family: var(--slab); font-weight: 900; letter-spacing: 0.02em; } .bollino--nero { background: var(--nero); color: var(--crema); box-shadow: 4px 4px 0 var(--rosso); } .bollino--nero b { font-size: 1.55rem; color: var(--acceso); } /* -------------------------------------------------------------- prenota */ /* Un giorno solo, senza linguette: l'etichetta sopra gli orari dice il giorno, quindi è in evidenza. */ .tema-horeca .picker__label { color: var(--nero); } @media (max-width: 560px) { .targa { padding: 12px 14px; } .bollino--nero b { font-size: 1.3rem; } }