.marquee-section { padding: 20px 0; overflow: hidden; margin-top: 60px; } .marquee-section + .marquee-section { margin-top: 0; padding-top: 10px; padding-bottom: 60px; } .marquee-section:first-of-type { padding-top: 40px; } .marquee-title { text-align: center; margin-bottom: 32px; } .marquee-track { width: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } .marquee-track:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; } .marquee-inner { display: flex; gap: 60px; align-items: center; animation: marqueeScroll 30s linear infinite; width: max-content; } .marquee-section:hover .marquee-inner, .marquee-section:focus-within .marquee-inner { animation-play-state: paused; } .marquee-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 44px; opacity: 0.7; transition: opacity var(--transition-fast); } .marquee-dark .marquee-item { filter: none; } .marquee-light .marquee-item { filter: none; } .marquee-item:hover { opacity: 1; } .marquee-item img { height: 40px; max-height: 40px; width: auto; max-width: 200px; object-fit: contain; } /* Light variant background */ .marquee-light { background: rgba(240, 240, 240, 0.95); border-top: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .marquee-light .marquee-title { color: #555; } .marquee-light .marquee-text-logo { color: #333; } .marquee-item img { height: 36px; width: auto; object-fit: contain; } .marquee-text-logo { font-size: 1.1rem; font-weight: var(--font-weight-semibold); color: var(--text-secondary); white-space: nowrap; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-33.33%); } }