/* Full page loader — toggle via Alpine $store.fullPageLoader or .lp-is-loading on */ :root { --lp-black: #070707; --lp-ink: #171717; --lp-soft: #f8f6f3; --lp-line: #e8e5e1; --lp-coral: #ff665c; } .lp-full-loader { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 24px; background: rgba(255, 255, 255, 0.76); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, visibility 0.18s ease; } .lp-is-loading .lp-full-loader, .lp-full-loader.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .lp-loader-card { width: min(220px, 100%); min-height: 160px; display: grid; place-items: center; text-align: center; border: 1px solid var(--lp-line); border-radius: 22px; background: #fff; padding: 24px 18px; box-shadow: 0 24px 70px rgba(7, 7, 7, 0.1); } .lp-loader-mark { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--lp-line); background: var(--lp-soft); margin: 0 auto 14px; } .lp-loader-mark:before { content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 1px solid transparent; border-top-color: var(--lp-coral); border-right-color: var(--lp-coral); animation: lpLoaderSpin 0.78s linear infinite; } .lp-loader-heartbeat { width: 14px; height: 14px; border-radius: 999px; background: var(--lp-coral); box-shadow: 0 0 0 0 rgba(255, 102, 92, 0.35); animation: lpLoaderHeartbeat 1.15s ease-in-out infinite; } @keyframes lpLoaderHeartbeat { 0%, 100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(255, 102, 92, 0.35); } 18% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(255, 102, 92, 0); } 34% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(255, 102, 92, 0.28); } 52% { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(255, 102, 92, 0); } 70% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 102, 92, 0); } } .lp-loader-title { margin: 0; color: var(--lp-black); font-size: 15px; line-height: 1.35; font-weight: 540; letter-spacing: -0.005em; } .lp-loader-line { width: 72px; height: 2px; border-radius: 999px; background: #eee; overflow: hidden; margin: 12px auto 0; } .lp-loader-line span { display: block; width: 38%; height: 100%; border-radius: 999px; background: var(--lp-coral); animation: lpLoaderLine 1s ease-in-out infinite; } @keyframes lpLoaderSpin { to { transform: rotate(360deg); } } @keyframes lpLoaderLine { 0% { transform: translateX(-110%); } 55% { transform: translateX(95%); } 100% { transform: translateX(190%); } } @media (prefers-reduced-motion: reduce) { .lp-loader-mark:before, .lp-loader-heartbeat, .lp-loader-line span { animation: none; } } @media (max-width: 820px) { .lp-loader-card { width: min(200px, 100%); min-height: 150px; } }