Real Builders. Real Results.

.wb-break { --wb-green: #76bc43; --wb-slate: #3b4554; display: flex; align-items: center; gap: 14px; width: 100%; max-width: 900px; margin: 0 auto; padding: 16px 20px; box-sizing: border-box; } .wb-break *, .wb-break *::before, .wb-break *::after { border-radius: 0 !important; } /* Alternating green / slate dashes, like painted bay lines */ .wb-break__line { flex: 1; height: 3px; background: repeating-linear-gradient(90deg, var(--wb-green) 0 18px, transparent 18px 24px, var(--wb-slate) 24px 30px, transparent 30px 36px); transition: transform 0.9s cubic-bezier(.2, .7, .2, 1); } .wb-break__line--left { transform-origin: right center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); } .wb-break__line--right { transform-origin: left center; background-position: right center; -webkit-mask-image: linear-gradient(270deg, transparent, #000 55%); mask-image: linear-gradient(270deg, transparent, #000 55%); } /* Center: solid green bar between two slate squares */ .wb-break__center { display: flex; align-items: center; gap: 6px; } .wb-break__center i { display: block; transition: transform 0.5s cubic-bezier(.2, .7, .2, 1); } .wb-break__bar { width: 56px; height: 8px; background: var(--wb-green); } .wb-break__sq { width: 8px; height: 8px; background: var(--wb-slate); } /* Hidden state, applied only while waiting to scroll into view */ .wb-break.is-pending .wb-break__line { transform: scaleX(0); } .wb-break.is-pending .wb-break__bar { transform: scaleX(0); } .wb-break.is-pending .wb-break__sq { transform: scale(0); } .wb-break .wb-break__sq { transition-delay: 0.15s; } @media (max-width: 600px) { .wb-break { gap: 10px; padding: 12px 16px; } .wb-break__bar { width: 40px; height: 6px; } .wb-break__sq { width: 6px; height: 6px; } } @media (prefers-reduced-motion: reduce) { .wb-break .wb-break__line, .wb-break .wb-break__center i { transition: none; } } (function () { var breaks = document.querySelectorAll('.wb-break:not([data-wb-init])'); if (!('IntersectionObserver' in window)) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; var io = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { var el = entry.target; if (entry.intersectionRatio >= 0.6) { el.offsetWidth; // ensure the reset state is applied before replaying el.classList.remove('is-pending'); } else if (!entry.isIntersecting) { el.classList.add('is-pending'); // fully off screen: reset for next time } }); }, { threshold: [0, 0.6] }); breaks.forEach(function (el) { el.setAttribute('data-wb-init', ''); el.classList.add('is-pending'); io.observe(el); }); })();