.au-scroll-banner { width: 100%; overflow: hidden; background: #363636; border-radius: 9px; border-left: 4px solid #F4A261; border-right: 4px solid #F4A261; padding: 11px 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; position: relative; } /* Subtle top & bottom highlight */ .au-scroll-banner::before, .au-scroll-banner::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(244, 162, 97, 0.25); } .au-scroll-banner::before { top: 0; } .au-scroll-banner::after { bottom: 0; } .au-scroll-track { display: flex; width: max-content; animation: auScroll 28s linear infinite; will-change: transform; } .au-scroll-item { display: flex; align-items: center; white-space: nowrap; padding: 0 30px; height: 22px; font-size: 12px; letter-spacing: 0.4px; } .au-scroll-icon { font-size: 16px; margin-right: 8px; } .au-scroll-label { color: #FFFFFF; font-weight: 800; } .au-scroll-line { width: 28px; height: 1px; background: #F4A261; margin: 0 14px; opacity: 0.8; } .au-scroll-highlight { color: #F4A261; font-weight: 800; letter-spacing: 0.5px; } .au-scroll-dot { color: #F4A261; font-size: 7px; margin-left: 30px; } /* Smooth continuous movement */ @keyframes auScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Desktop */ @media (min-width: 1200px) { .au-scroll-item { padding-left: 45px; padding-right: 45px; font-size: 13px; } .au-scroll-track { animation-duration: 32s; } } /* Mobile */ @media (max-width: 600px) { .au-scroll-banner { border-left-width: 3px; border-right-width: 3px; border-radius: 7px; padding: 8px 0; } .au-scroll-item { padding: 0 18px; height: 20px; font-size: 10px; letter-spacing: 0.2px; } .au-scroll-icon { font-size: 13px; margin-right: 5px; } .au-scroll-line { width: 18px; margin: 0 8px; } .au-scroll-dot { margin-left: 18px; font-size: 6px; } .au-scroll-track { animation-duration: 22s; } }