/* ════════════════════════════════════ loader.css — overlay loader Add to your : ════════════════════════════════════ */ /* Body starts hidden — loader reveals it */ body:not(.app-ready) { overflow: hidden; } /* ── Loader overlay ── */ #loader-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ldr-bg, #f6f3ee); color: var(--ldr-ink, #18160f); font-family: 'Bricolage Grotesque', system-ui, sans-serif; transition: opacity .35s ease, visibility .35s ease; } @media (prefers-color-scheme: dark) { #loader-overlay { --ldr-bg: #0f0d0a; --ldr-ink: #f0ebe0; --ldr-ink3: #857d6e; --ldr-accent: #d4a030; --ldr-border: rgba(255,255,255,.1); } } @media (prefers-color-scheme: light) { #loader-overlay { --ldr-bg: #f6f3ee; --ldr-ink: #18160f; --ldr-ink3: #7a7264; --ldr-accent: #b07d1a; --ldr-border: rgba(0,0,0,.1); } } /* Hidden state — triggered by JS when done */ #loader-overlay.ldr-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* ── Spinner ── */ .ldr-spinner { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; } .ldr-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--ldr-border, rgba(0,0,0,.1)); } .ldr-ring-a { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--ldr-accent, #b07d1a); animation: ldr-spin 1s cubic-bezier(.5,.1,.4,.9) infinite; } .ldr-ring-b { position: absolute; inset: 10px; border-radius: 50%; border: 2px solid transparent; border-bottom-color: var(--ldr-accent, #b07d1a); opacity: .36; animation: ldr-spin 1.8s linear infinite reverse; } .ldr-logo { width: 44px; height: 44px; border-radius: 13px; object-fit: cover; box-shadow: 0 2px 14px rgba(0,0,0,.2); animation: ldr-breathe 2.4s ease-in-out infinite; } @keyframes ldr-spin { to { transform: rotate(360deg); } } @keyframes ldr-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .62; transform: scale(.91); } } /* ── Text ── */ .ldr-name { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--ldr-ink, #18160f); margin-bottom: 7px; animation: ldr-up .4s ease .05s both; } .ldr-status { font-size: 13px; font-weight: 500; color: var(--ldr-ink3, #7a7264); min-height: 18px; text-align: center; animation: ldr-up .4s ease .12s both; } @keyframes ldr-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Update banner ── */ .ldr-update-banner { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); background: var(--ldr-bg, #f6f3ee); border-top: 1px solid var(--ldr-border, rgba(0,0,0,.1)); flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 -4px 28px rgba(0,0,0,.1); animation: ldr-slide-up .3s ease both; } .ldr-update-banner.show { display: flex; } .ldr-update-msg { font-size: 14px; font-weight: 700; letter-spacing: -.01em; text-align: center; color: var(--ldr-ink, #18160f); } .ldr-update-msg b { color: var(--ldr-accent, #b07d1a); font-weight: 800; } .ldr-btn-row { display: flex; gap: 10px; width: 100%; max-width: 300px; } .ldr-btn-reload { flex: 1; padding: 13px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 800; background: var(--ldr-accent, #b07d1a); color: #fff; border: none; cursor: pointer; transition: opacity .15s; } @media (prefers-color-scheme: dark) { .ldr-btn-reload { color: #0f0d0a; } } .ldr-btn-reload:hover { opacity: .84; } .ldr-btn-reload:active { transform: scale(.97); } .ldr-btn-later { padding: 13px 18px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 600; background: transparent; color: var(--ldr-ink3, #7a7264); border: 1.5px solid var(--ldr-border, rgba(0,0,0,.1)); cursor: pointer; transition: color .15s; } .ldr-btn-later:hover { color: var(--ldr-ink, #18160f); } .ldr-btn-later:active { transform: scale(.97); } @keyframes ldr-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }