.mm-announcement { background-color: transparent; display: flex; align-items: center; overflow-x: hidden; overflow-y: visible; padding: 10px 16px; box-sizing: border-box; white-space: nowrap; position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; } .mm-announcement-track { display: inline-flex; animation: mm-scroll 18s linear infinite; } .mm-announcement:hover .mm-announcement-track { animation-play-state: paused; } .mm-announcement-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 48px; font-family: var(--font-body); font-size: 0.9rem; color: var(--color-warm-white, #FBF8F2); line-height: 1; } .mm-announcement-item svg { flex-shrink: 0; } .mm-announcement-item a { color: var(--color-warm-white, #FBF8F2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } @keyframes mm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Desktop / tablet: plenty of room, so centre a single static line instead of scrolling. The duplicate copy (needed for the seamless mobile loop) is hidden here since there's nothing to loop. */ @media (min-width: 700px) { .mm-announcement { justify-content: center; white-space: normal; } .mm-announcement-track { display: inline-flex; animation: none; transform: none; } .mm-announcement-duplicate { display: none; } .mm-announcement-item { padding: 0; } } /* Mobile: text is too long for the width, so it scrolls continuously. Smaller type and tighter spacing so it doesn't feel oversized. */ @media (max-width: 699px) { .mm-announcement-item { gap: 8px; padding: 0 28px; font-size: 0.8rem; } .mm-announcement-item svg { width: 16px; height: 16px; flex-shrink: 0; } } @media (prefers-reduced-motion: reduce) { .mm-announcement-track { animation: none; } .mm-announcement-duplicate { display: none; } }
Book a Session
Book Now