.tagline-container { position: relative; max-width: 900px; width:99%; margin:5px auto; padding: 0; overflow-x:hidden; overflow: hidden; background: var(--background); border-radius: 8px; backdrop-filter: blur(10px); } .tagline-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%); animation: shimmer 2s infinite; } .ec-tagline { display: inline-block; color: var(--light-text); font-size: 15px; white-space: nowrap; padding: 4px 6px; animation: mike-marquee 15s linear infinite; } @keyframes mike-marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .tagline-container:hover .ec-tagline { animation-play-state: paused; } .tagline-container.warning { background: var(--warning-gradient); } .tagline-container.success { background: var(--success-gradient); } .tagline-container.danger { background: var(--danger-gradient); } .tagline-slow { animation: mike-marquee 25s linear infinite; } .tagline-fast { animation: mike-marquee 8s linear infinite; } .tagline-bounce { animation: mike-marquee-bounce 12s ease-in-out infinite; } @keyframes mike-marquee-bounce { 0%, 100% { transform: translateX(100%); } 50% { transform: translateX(-100%); } } .sticky-category-header { position: sticky; top:50px; margin:5px 0 3px 0 ; z-index: 1100; background:var(--background); color: var(--light-text); padding:5px 0; } .category-scroll-container { position: relative; max-width: 100%; margin: 5px auto; overflow: hidden; } .category-scroll { display: flex; gap: 0.5rem; padding: 0.2rem; overflow-x: auto; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .category-scroll::-webkit-scrollbar { display: none; } .category-button { flex: 0 0 auto; padding: 5px 8px; border-radius: 20px; background:var(--card-bg); color: var(--light-text); font-size: 0.76rem; white-space: nowrap; transition: all 0.2s ease; text-decoration: none; } .category-button:hover { border:2px dashed var(--branding); background-color:var(--card-bg); transform: translateY(-0.5px); color:var(--branding); } .category-button.active { background: #0066ff; color: white; border-color: #0066ff; font-weight: 600; } .scroll-button { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--background); border:none; color:var(--light-text); cursor: pointer; z-index: 1100; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .scroll-button.left { left: 5px; } .scroll-button.right { right: 5px; } .scroll-button:hover { background: var(--branding); } .more-toggle-btn { background: var(--card-bg); color:var(--light-text); display:block; margin:3px auto; text-align:center; border: none; padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; font-weight:bold; cursor: pointer; } .expanded-categories-panel { display: none; background: var(--background); padding:3px 5px ; } .expanded-categories-panel h2 { font-size:1rem; font-weight:bold; text-align:center; margin:6px 2px; } .close-toggle-btn { padding: 5px 10px; text-align:center; background: #dc3838cc; color:#111; border: none; margin:3px auto; font-weight:bold; white-space:nowrap; border-radius: 10px; cursor: pointer; font-size: 0.75rem; } .category-subpanel { margin-bottom:4px; } .category-subpanel h4 { margin: 0 0 5px 0; color: var(--light-text); font-size: 0.7rem; } .subcategory-scroll { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; } .subcategory-scroll::-webkit-scrollbar { display: none; }