/* ============================================================ MyNestrova — Site Preloader Upload this file once to /assets/css/loader.css on your host. Link it from any page's : ============================================================ */ #mn-loader { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fdf7f2; /* --cream, matches site background */ transition: opacity .45s ease, visibility .45s ease; } #mn-loader.mn-hide { opacity: 0; visibility: hidden; pointer-events: none; } /* Logo */ #mn-loader .mn-loader-logo { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 700; color: #1e1a17; letter-spacing: .01em; margin-bottom: 22px; opacity: 0; animation: mn-fade-in .6s ease forwards .1s; } #mn-loader .mn-loader-logo span { color: #c47b5a; /* --tc */ } /* Spinner: three soft pulsing dots (matches the warm palette, feels calm not "techy") */ #mn-loader .mn-loader-dots { display: flex; gap: 10px; opacity: 0; animation: mn-fade-in .6s ease forwards .25s; } #mn-loader .mn-loader-dots span { width: 9px; height: 9px; border-radius: 50%; background: #c47b5a; animation: mn-pulse 1.1s ease-in-out infinite; } #mn-loader .mn-loader-dots span:nth-child(2) { background: #9e5c3e; animation-delay: .15s; } #mn-loader .mn-loader-dots span:nth-child(3) { background: #7a9e87; animation-delay: .3s; } /* Optional tagline under the dots */ #mn-loader .mn-loader-tag { margin-top: 16px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a89b91; opacity: 0; animation: mn-fade-in .6s ease forwards .4s; } @keyframes mn-pulse { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } } @keyframes mn-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { #mn-loader .mn-loader-dots span { animation: none; opacity: 1; transform: none; } #mn-loader .mn-loader-logo, #mn-loader .mn-loader-tag, #mn-loader .mn-loader-dots { animation: none; opacity: 1; transform: none; } }