<!-- Smooth Webador Ticker Banner - 2 Message Version --> <div class="ticker-wrap" role="region" aria-label="Scrolling announcement banner"> <div class="ticker-viewport"> <div class="ticker-track" id="comfreyTickerTrack"> <div class="ticker-group" id="comfreyTickerGroup1"> <span class="ticker-link">🌿 Convenient, Dried Plantae Crafting Supplies</span> <span class="ticker-link">✨ Environmentally Sourced...  📦 Bulk Sizes: Gallon • Quart • Pint</span> <a class="ticker-btn" href="/shop" target="_self" aria-label="Shop now"> Shop Now </a> </div> <div class="ticker-group" aria-hidden="true"> <span class="ticker-link">🌿 Convenient, Dried Plantae Crafting Supplies</span> <span class="ticker-link">✨ Environmentally Sourced...  📦 Bulk Sizes: Gallon • Quart • Pint</span> <a class="ticker-btn" href="/shop" target="_self" tabindex="-1" aria-label="Shop now"> Shop Now </a> </div> </div> </div> </div> <style> .ticker-wrap { width: 100%; background: linear-gradient(90deg, #1f7a5c, #2ea37d); color: #fff; border-top: 2px solid rgba(255,255,255,0.2); border-bottom: 2px solid rgba(255,255,255,0.2); font-family: Arial, sans-serif; box-sizing: border-box; position: relative; } .ticker-viewport { width: 100%; overflow: hidden; } .ticker-track { display: flex; width: max-content; will-change: transform; transform: translate3d(0, 0, 0); } .ticker-group { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; padding: 10px 0; } .ticker-group > * { margin-right: 20px; } .ticker-group > *:first-child { margin-left: 20px; } .ticker-link { display: inline-block; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.1px; padding: 6px 4px; border-radius: 8px; } .ticker-btn { display: inline-block; text-decoration: none; color: #1f7a5c; background: #fff; border: 2px solid rgba(255,255,255,0.9); font-size: 14px; font-weight: 800; padding: 7px 14px; border-radius: 999px; line-height: 1; box-shadow: 0 1px 0 rgba(0,0,0,0.08); transition: transform 0.15s ease, box-shadow 0.15s ease; } .ticker-btn:hover, .ticker-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.15); outline: none; } @media (max-width: 768px) { .ticker-link { font-size: 14px; } .ticker-btn { font-size: 13px; padding: 6px 12px; } .ticker-group > * { margin-right: 14px; } .ticker-group > *:first-child { margin-left: 14px; } } </style> <script> (function () { const wrap = document.querySelector('.ticker-wrap'); const track = document.getElementById('comfreyTickerTrack'); const group1 = document.getElementById('comfreyTickerGroup1'); if (!wrap || !track || !group1) return; let x = 0; let lastTime = null; let paused = false; let speed = window.innerWidth <= 768 ? 45 : 55; function getGroupWidth() { return group1.getBoundingClientRect().width; } let groupWidth = getGroupWidth(); function step(timestamp) { if (lastTime == null) lastTime = timestamp; const delta = (timestamp - lastTime) / 1000; lastTime = timestamp; if (!paused && groupWidth > 0) { x -= speed * delta; while (Math.abs(x) >= groupWidth) { x += groupWidth; } track.style.transform = 'translate3d(' + x + 'px, 0, 0)'; } requestAnimationFrame(step); } function recalc() { groupWidth = getGroupWidth(); speed = window.innerWidth <= 768 ? 45 : 55; } wrap.addEventListener('mouseenter', function () { paused = true; }); wrap.addEventListener('mouseleave', function () { paused = false; }); window.addEventListener('resize', recalc); window.addEventListener('load', recalc); recalc(); requestAnimationFrame(step); })(); </script>