/* ========================================================================== LSIF — Global Marquee/Ticker CSS Ensures CONSISTENT speed across ALL pages (index, about, gallery, programs, etc.) Last updated: 8 May 2026 This file uses !important to OVERRIDE any per-page inline marquee styles. Drop this in AFTER style.css and the speed will be unified everywhere. ========================================================================== */ /* Match BOTH naming conventions used across the site: - .lsf-ticker / .lsf-ticker-inner / @keyframes tickerScroll (gallery, about, harhaathcpr, hargharsehat) - .ticker / .ticker-inner / @keyframes ticker-scroll (index.php) - .marquee / .marquee-inner (defensive) */ .lsf-ticker, .ticker, .marquee, .news-ticker { background: #e63946 !important; color: #ffffff !important; padding: 8px 0 !important; font-size: 13px !important; font-weight: 500 !important; overflow: hidden !important; white-space: nowrap !important; } .lsf-ticker-inner, .ticker-inner, .marquee-inner, .news-ticker-inner { display: inline-block !important; /* SINGLE SOURCE OF TRUTH for marquee speed across the entire site. 45s feels readable on desktop; mobile gets a slightly faster value below. */ animation: lsf-marquee-scroll 45s linear infinite !important; padding-left: 100% !important; will-change: transform; } .lsf-ticker-inner span, .ticker-inner span, .marquee-inner span, .news-ticker-inner span { display: inline-block !important; padding: 0 40px !important; } .lsf-ticker-inner span::before, .ticker-inner span::before, .marquee-inner span::before, .news-ticker-inner span::before { content: '❤️ ' !important; } /* The unified keyframe — site uses THIS one, not per-page ones */ @keyframes lsf-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Override the OLD keyframe names so any leftover page-level rules that reference them get the same speed too. Safety net. */ @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Pause on hover — nice UX touch so people can read a message that catches their eye */ .lsf-ticker:hover .lsf-ticker-inner, .ticker:hover .ticker-inner, .marquee:hover .marquee-inner { animation-play-state: paused !important; } /* Mobile — slightly faster so it doesn't feel slow on smaller screens (less horizontal space to cover) */ @media (max-width: 600px) { .lsf-ticker-inner, .ticker-inner, .marquee-inner, .news-ticker-inner { animation-duration: 35s !important; font-size: 12px !important; } } /* Respect users who prefer reduced motion (accessibility) */ @media (prefers-reduced-motion: reduce) { .lsf-ticker-inner, .ticker-inner, .marquee-inner, .news-ticker-inner { animation: none !important; padding-left: 0 !important; } }