/* ============================================================ CITYSOFT TECHNOLOGIES — preloader.css Add in on every page before style.css ============================================================ */ /* ── PRELOADER OVERLAY ────────────────────────────────────── */ #cs-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; background: var(--bg, #0D0C0B); transition: opacity 0.55s ease, visibility 0.55s ease; } #cs-preloader.fade-out { opacity: 0; visibility: hidden; pointer-events: none; } /* ── LOGO CONTAINER ───────────────────────────────────────── */ .cs-pre-logo { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; } /* Logo image */ .cs-pre-logo img { width: 72px; height: 72px; object-fit: contain; border-radius: 50%; animation: csPreLogoPulse 2s ease-in-out infinite; position: relative; z-index: 2; } /* Light theme: logo on white bg has white surround — add subtle shadow */ [data-theme="light"] .cs-pre-logo img { filter: drop-shadow(0 2px 12px rgba(200, 0, 0, 0.25)); } /* Dark theme: slight glow */ [data-theme="dark"] .cs-pre-logo img { filter: drop-shadow(0 0 16px rgba(220, 30, 30, 0.4)); } /* Spinning ring around logo */ .cs-pre-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: #cc1111; border-right-color: rgba(204, 17, 17, 0.3); animation: csPreSpin 1s linear infinite; } /* Outer faint ring */ .cs-pre-ring-outer { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(204, 17, 17, 0.15); animation: csPreSpin 2.4s linear infinite reverse; } /* ── BRAND NAME ───────────────────────────────────────────── */ .cs-pre-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; } .cs-pre-name { font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text, #F0EDE8); opacity: 0; animation: csFadeUp 0.6s ease 0.2s forwards; } .cs-pre-tagline { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3, #6B6763); opacity: 0; animation: csFadeUp 0.6s ease 0.4s forwards; } /* ── PROGRESS BAR ─────────────────────────────────────────── */ .cs-pre-progress-wrap { width: 160px; height: 2px; background: rgba(204, 17, 17, 0.15); border-radius: 1px; overflow: hidden; opacity: 0; animation: csFadeUp 0.5s ease 0.5s forwards; } .cs-pre-progress { height: 100%; width: 0%; background: linear-gradient(90deg, #cc1111, #ff4444, #cc1111); background-size: 200% 100%; border-radius: 1px; animation: csPreProgressAnim 2.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) forwards, csPreShimmer 1.2s linear infinite; } /* ── DOTS ANIMATION ───────────────────────────────────────── */ .cs-pre-dots { display: flex; gap: 6px; opacity: 0; animation: csFadeUp 0.5s ease 0.6s forwards; } .cs-pre-dots span { width: 5px; height: 5px; border-radius: 50%; background: #cc1111; animation: csPreDotBounce 1.2s ease-in-out infinite; } .cs-pre-dots span:nth-child(2) { animation-delay: 0.15s; background: rgba(204,17,17,0.7); } .cs-pre-dots span:nth-child(3) { animation-delay: 0.3s; background: rgba(204,17,17,0.4); } /* ── KEYFRAMES ────────────────────────────────────────────── */ @keyframes csPreSpin { to { transform: rotate(360deg); } } @keyframes csPreLogoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } @keyframes csPreProgressAnim { 0% { width: 0%; } 40% { width: 55%; } 70% { width: 78%; } 90% { width: 92%; } 100% { width: 100%; } } @keyframes csPreShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes csPreDotBounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } } @keyframes csFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── LIGHT THEME OVERRIDES ────────────────────────────────── */ [data-theme="light"] #cs-preloader { background: #F7F6F3; } [data-theme="light"] .cs-pre-name { color: #111010; } [data-theme="light"] .cs-pre-ring { border-top-color: #cc1111; } [data-theme="light"] .cs-pre-progress-wrap { background: rgba(204, 17, 17, 0.1); } /* ── REDUCED MOTION ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .cs-pre-ring { animation: none; } .cs-pre-ring-outer { animation: none; } .cs-pre-logo img { animation: none; } .cs-pre-dots span { animation: none; } .cs-pre-progress { animation: none; width: 100%; } #cs-preloader.fade-out { transition: opacity 0.2s ease; } }