/* Sunny Container Sales — page loader * Lightweight, no dependencies. * * Drop this stylesheet into : * * Drop the HTML snippet from sunny-loader.html into the top of . * Include sunny-loader.js at the END of (just before ). * * The loader covers the viewport on first paint and fades out when the * page is ready (window 'load' event + a tiny minimum-show delay so it * doesn't flash). */ #sunny-loader { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: #F6F1E7; font-family: ui-monospace, SFMono-Regular, "Menlo", monospace; opacity: 1; transition: opacity 0.55s ease; pointer-events: auto; } #sunny-loader.is-hidden { opacity: 0; pointer-events: none; } .sunny-loader__stack { display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 24px; } /* Mascot + shadow */ .sunny-loader__mascot-wrap { position: relative; width: 240px; height: 260px; } .sunny-loader__mascot { position: absolute; left: 0; right: 0; margin: 0 auto; width: 240px; height: auto; transform-origin: 50% 80%; animation: sunny-bounce 1.1s cubic-bezier(.5, 0, .5, 1) infinite; } .sunny-loader__shadow { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 150px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse, rgba(47, 57, 66, .35), transparent 70%); animation: sunny-shadow 1.1s cubic-bezier(.5, 0, .5, 1) infinite; } /* Wordmark */ .sunny-loader__wordmark-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; } .sunny-loader__wordmark { width: 220px; height: auto; display: block; object-fit: contain; } /* Dots */ .sunny-loader__dots { display: flex; gap: 10px; } .sunny-loader__dots span { width: 11px; height: 11px; border-radius: 50%; background: #F5A623; animation: sunny-dot 1.43s ease-in-out infinite; } .sunny-loader__dots span:nth-child(2) { animation-delay: 0.15s; } .sunny-loader__dots span:nth-child(3) { animation-delay: 0.30s; } /* Status text */ .sunny-loader__text { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #5A6670; font-weight: 600; } /* Keyframes */ @keyframes sunny-bounce { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-18px) rotate(1deg); } } @keyframes sunny-shadow { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .35; } 50% { transform: translateX(-50%) scaleX(.7); opacity: .18; } } @keyframes sunny-dot { 0%, 80%, 100% { transform: scale(.55); opacity: .35; } 40% { transform: scale(1); opacity: 1; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .sunny-loader__mascot, .sunny-loader__shadow, .sunny-loader__dots span { animation: none; } } /* Lock scroll while loader is up */ html.sunny-loading, body.sunny-loading { overflow: hidden; } /* Small screens */ @media (max-width: 480px) { .sunny-loader__mascot-wrap { width: 180px; height: 200px; } .sunny-loader__mascot { width: 180px; } .sunny-loader__shadow { width: 110px; } .sunny-loader__wordmark { width: 170px; } }