/* Stili tile calendario "Eventi" e CONTATTI espansa. Attivati dalle classi feature-flag su : html.fc-flag-calendar-tile → mostra #eventi-card html.fc-flag-contatti-expanded → CONTATTI 2x con CTA sempre visibili (desktop) */ /* ============ Tile calendario ============ */ #eventi-card { display: none; background: linear-gradient(140deg, #1e2e36, #141f27); flex-direction: row; position: relative; overflow: hidden; isolation: isolate; cursor: pointer; color: #f4f7f7; text-decoration: none; } html.fc-flag-calendar-tile #eventi-card { display: flex; } #eventi-card .titolo-card { position: absolute; top: 18px; left: 24px; margin: 0; z-index: 4; text-shadow: 0 2px 8px rgba(6, 14, 18, .42); color: #f4f7f7; pointer-events: none; } .eventi-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; height: 100%; padding: 64px 18px 18px; box-sizing: border-box; } .eventi-calendar { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: 14px; min-width: 0; } .eventi-cal-header { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(244, 247, 247, .82); } .eventi-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .eventi-cal-weekday { font-size: 10.5px; font-weight: 700; text-align: center; color: rgba(244, 247, 247, .55); letter-spacing: .04em; } .eventi-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 2px; flex: 1 1 auto; min-height: 0; } .eventi-cal-day { appearance: none; border: 1px solid transparent; background: transparent; color: rgba(244, 247, 247, .85); border-radius: 8px; font: inherit; font-size: 12.5px; line-height: 1; font-weight: 600; cursor: pointer; padding: 0; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease; } .eventi-cal-day:hover, .eventi-cal-day:focus-visible { background: rgba(255, 255, 255, .12); outline: none; transform: scale(1.04); } .eventi-cal-day-outside { color: rgba(244, 247, 247, .28); } .eventi-cal-day-today { border-color: rgba(255, 255, 255, .65); color: #fff; } .eventi-cal-dot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: transparent; transition: background-color .14s ease, box-shadow .14s ease; } .eventi-cal-day-turno .eventi-cal-dot { background: #1cd8bc; box-shadow: 0 0 6px rgba(28, 216, 188, .55); } .eventi-cal-day-evento .eventi-cal-dot { background: #FFCB05; box-shadow: 0 0 6px rgba(255, 203, 5, .55); } .eventi-cal-day-ferie .eventi-cal-dot { background: #f8333c; box-shadow: 0 0 6px rgba(248, 51, 60, .5); } .eventi-cal-day-special .eventi-cal-dot { background: #b8c5cc; box-shadow: 0 0 4px rgba(184, 197, 204, .45); } /* Doppio marker: turno + evento sullo stesso giorno */ .eventi-cal-day-turno.eventi-cal-day-evento .eventi-cal-dot { background: linear-gradient(90deg, #1cd8bc 0 50%, #FFCB05 50% 100%); box-shadow: 0 0 6px rgba(28, 216, 188, .4), 0 0 6px rgba(255, 203, 5, .35); } /* ============ Preview a destra ============ */ .eventi-preview { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 8px 6px 8px 22px; gap: 6px; border-left: 1px solid rgba(244, 247, 247, .14); min-width: 0; transition: background-color .26s ease; } .eventi-preview-eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 247, 247, .68); } .eventi-preview-title { margin: 0; font-size: 22px; line-height: 1.16; font-weight: 800; letter-spacing: -.005em; color: #fff; text-wrap: balance; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .eventi-preview-meta { margin: 0; font-size: 14px; line-height: 1.3; font-weight: 600; color: rgba(244, 247, 247, .8); } .eventi-preview-summary { margin: 0; font-size: 12.5px; line-height: 1.4; color: rgba(244, 247, 247, .62); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .eventi-preview[data-tone="turno"] .eventi-preview-eyebrow { color: #b1f0e3; } .eventi-preview[data-tone="evento"] .eventi-preview-eyebrow { color: #FFCB05; } .eventi-preview[data-tone="ferie"] .eventi-preview-eyebrow { color: #f9a0a4; } .eventi-preview[data-tone="special"] .eventi-preview-eyebrow { color: #cfd9de; } .eventi-preview[data-tone="turno"] { background: radial-gradient(120% 80% at 100% 0%, rgba(28, 216, 188, .18), rgba(28, 216, 188, 0) 60%); } .eventi-preview[data-tone="evento"] { background: radial-gradient(120% 80% at 100% 0%, rgba(255, 203, 5, .16), rgba(255, 203, 5, 0) 62%); } .eventi-preview[data-tone="ferie"] { background: radial-gradient(120% 80% at 100% 0%, rgba(248, 51, 60, .14), rgba(248, 51, 60, 0) 60%); } /* ============ Layout responsive ============ */ @media (max-width: 928px) { .eventi-grid { grid-template-columns: 1fr; gap: 0; } /* Su mobile la tile è 1x1 (296x296): solo preview, niente calendario interattivo */ .eventi-calendar { display: none; } .eventi-preview { padding: 0; border-left: none; } } /* Su touch o senza pointer fine, il calendario serve solo come decorazione informativa: tap su qualunque punto = naviga a /calendario.html (gestito dal link wrapper) */ @media (hover: none), (pointer: coarse) { .eventi-cal-day { pointer-events: none; } } /* ============ CONTATTI espansa ============ */ html.fc-flag-contatti-expanded #contatti-card { /* Diventa una tile 2x come la mappa */ flex-basis: 600px; width: auto; /* Sfondo torna scuro uniforme per dare spazio ai bottoni */ } @media (max-width: 928px) { html.fc-flag-contatti-expanded #contatti-card { flex-basis: 296px; } } /* CTA sempre visibili su desktop quando expanded */ @media (hover: hover) and (min-width: 929px) { html.fc-flag-contatti-expanded #contatti-card #descrizione-contatti-card { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); pointer-events: auto; margin-top: 60px; max-width: 520px; margin-left: auto; margin-right: auto; } html.fc-flag-contatti-expanded #contatti-card #descrizione-contatti-card .contatti-quick-btn { opacity: 1; transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 6px 14px 2px rgba(4, 10, 12, .22); transition-delay: 0ms; } /* Sfondo Contatti.svg leggermente sfocato per dare risalto ai bottoni */ html.fc-flag-contatti-expanded #contatti-card #sfondo-contatti-card { opacity: .35; filter: blur(2.4px) saturate(.92); } }