:root { --background-color: #222225; --font-color: #e8e9ed; --primary-color: #62c4ff; --secondary-color: #8a919f; --tech-color: #62c4ff; --community-color: #ffd166; --plenary-color: #90ee90; } table.programma { width: 100%; border-collapse: collapse; } table.programma th, table.programma td { border-top: 1px solid #5a5a61; padding: 0.75rem; vertical-align: top; } table.programma thead th { border-bottom: 2px solid #888; } #map { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } #map .markup-title { color: black; } .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 0.4rem; font-size: 0.85rem; } .badge.community { background: var(--community-color); color: #111; } .badge.plenary { background: var(--plenary-color); color: #111; } .badge.tech { background: var(--tech-color); color: #111; } .container { max-width: 980px; } .filters { display: flex; gap: 0.5rem; flex-wrap: wrap; } .filters .btn { white-space: nowrap; } .js-share-native { /* Nascosto di default */ display: none; } .legend { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } .logo-ld { width: 250px; height: auto; } .lug-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5em; } /* Quando la condivisione nativa è disponibile, il JS aggiungerà questa classe al */ .native-share-supported .js-share-native { /* Mostra il pulsante nativo */ display: inline-block; } .native-share-supported .js-share-fallback { /* Nascondi la griglia di icone */ display: none; } .slot { border-left: 0.35rem solid transparent; padding-left: 0.6rem; } .slot.community { border-left-color: var(--community-color); } .slot-empty { opacity: 0.7; font-style: italic; } .slot-meta { font-size: 0.9rem; color: var(--secondary-color); margin-top: 0.25rem; } .slot.plenary { border-left-color: var(--plenary-color); text-align: center; } .slot.tech { border-left-color: var(--tech-color); } .slot-title { font-weight: 700; cursor: pointer; color: var(--primary-color); text-decoration: underline; } .slot-title:not([data-abstract]) { text-decoration: none; cursor: default; } .social-icons { display: flex; gap: 1.5em; flex-wrap: wrap; align-items: center; } .social-icons a { color: var(--secondary-color); transition: color 0.3s ease; } .social-icons a:hover { color: var(--primary-color); } .social-icons img { width: 32px; height: 32px; fill: currentColor; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .terminal-card { background-color: #3f3f44; } .terminal-card header a { color: var(--font-color); text-decoration: none; border-bottom: 2px solid var(--primary-color); transition: color 0.2s, border-color 0.2s; } .terminal-logo { display: flex; align-items: center; margin-right: 30px; } @media (max-width: 700px) { .hide-sm { display: none; } } /* Stili per il modal popup */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); } .modal-content { background-color: #1e1e1e; color: #e8e9ed; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; border-radius: 4px; font-family: monospace; box-shadow: 0 0 10px rgba(98, 196, 255, 0.5); } .modal-abstract { white-space: pre-line; } .modal-title { display: flex; align-items: start; margin-bottom: 1rem; } .modal-content h3 { color: var(--primary-color); } .close { color: #aaa; font-size: 28px; font-weight: bold; margin-left: auto; } .close:hover, .close:focus { color: var(--font-color); text-decoration: none; cursor: pointer; } #countdown { font-size: 1.2rem; color: var(--primary-color); margin: 1rem 0; text-align: center; } /* Responsive table */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 700px) { table.programma th:first-child, table.programma td:first-child { min-width: 100px; } } /* Stili per i tab */ .tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 2px solid var(--secondary-color); margin-bottom: 1rem; } .tab-button { padding: 0.5rem 1rem; cursor: pointer; background: none; border: none; color: var(--secondary-color); font-size: 1rem; border-bottom: 3px solid transparent; transform: translateY(2px); } .tab-button.active { color: var(--primary-color); border-bottom-color: var(--primary-color); } .tab-content { display: none; width: 100%; padding: 1rem 0; } .tab-content.active { display: block; } /* Countdown – centrato e con neon RGB */ #countdown { display: block; width: fit-content; /* si adatta al testo */ margin: 1rem auto; /* centrato orizzontalmente */ text-align: center; } /* Effetto neon RGB durante l’evento */ #countdown.neon { padding: 0.5rem 0.9rem; border-radius: 0.5rem; font-weight: 800; color: #fff; letter-spacing: 0.2px; /* alone “neon” multistrato */ text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.7); /* bagliore esterno che cambia colore */ box-shadow: 0 0 10px rgba(255, 0, 72, 0.35), 0 0 22px rgba(255, 0, 72, 0.25), inset 0 0 8px rgba(255, 255, 255, 0.15); position: relative; isolation: isolate; /* per separare il glow dal resto */ /* animazioni */ animation: rgbPulse 2.2s ease-in-out infinite, rgbHue 6s linear infinite; } /* Strato di glow “morbido” che segue il testo */ #countdown.neon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; filter: blur(12px); z-index: -1; opacity: 0.9; background: radial-gradient( 120% 120% at 50% 50%, rgba(255, 0, 72, 0.45) 0%, rgba(0, 224, 255, 0.45) 50%, rgba(124, 255, 0, 0.45) 100% ); animation: rgbShift 8s linear infinite; } /* Ciclo dei colori primari sul glow */ @keyframes rgbHue { 0% { text-shadow: 0 0 6px rgba(255, 0, 72, 0.9), 0 0 14px rgba(255, 0, 72, 0.8), 0 0 28px rgba(255, 0, 72, 0.7); box-shadow: 0 0 10px rgba(255, 0, 72, 0.35), 0 0 22px rgba(255, 0, 72, 0.25), inset 0 0 8px rgba(255, 255, 255, 0.15); } 33% { text-shadow: 0 0 6px rgba(124, 255, 0, 0.9), 0 0 14px rgba(124, 255, 0, 0.8), 0 0 28px rgba(124, 255, 0, 0.7); box-shadow: 0 0 10px rgba(124, 255, 0, 0.35), 0 0 22px rgba(124, 255, 0, 0.25), inset 0 0 8px rgba(255, 255, 255, 0.15); } 66% { text-shadow: 0 0 6px rgba(0, 224, 255, 0.9), 0 0 14px rgba(0, 224, 255, 0.8), 0 0 28px rgba(0, 224, 255, 0.7); box-shadow: 0 0 10px rgba(0, 224, 255, 0.35), 0 0 22px rgba(0, 224, 255, 0.25), inset 0 0 8px rgba(255, 255, 255, 0.15); } 100% { text-shadow: 0 0 6px rgba(255, 0, 72, 0.9), 0 0 14px rgba(255, 0, 72, 0.8), 0 0 28px rgba(255, 0, 72, 0.7); box-shadow: 0 0 10px rgba(255, 0, 72, 0.35), 0 0 22px rgba(255, 0, 72, 0.25), inset 0 0 8px rgba(255, 255, 255, 0.15); } } /* Respiro del neon */ @keyframes rgbPulse { 0%, 100% { transform: scale(1); opacity: 0.98; } 50% { transform: scale(1.02); opacity: 1; } } /* Sposta lentamente il gradiente di sfondo del glow */ @keyframes rgbShift { 0% { transform: translate3d(-2%, 0, 0); } 50% { transform: translate3d(2%, 0, 0); } 100% { transform: translate3d(-2%, 0, 0); } } /* Accessibilità: riduci/ferma animazioni se preferito dall’utente */ @media (prefers-reduced-motion: reduce) { #countdown.neon { animation: none; } #countdown.neon::after { animation: none; } }