at top of every . */ /* Light: academic pale sky. Dark: deep navy aurora. */ .rssms-aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(145deg, #e0eaff 0%, #dbeafe 20%, #eff6ff 42%, #fefce8 68%, #e0f2fe 100%); transition: background 0.5s ease; } .dark .rssms-aurora { background: radial-gradient(120% 120% at 0% 0%, #1e3a8a 0%, #0f172a 45%, #020617 100%); } .rssms-aurora::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 55% at 10% 10%, rgba(30,58,138,.14) 0%, transparent 65%), radial-gradient(ellipse 55% 45% at 88% 85%, rgba(212,175,55,.12) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 55% 40%, rgba(37,99,235,.07) 0%, transparent 65%); animation: rssms-pulse 14s ease-in-out infinite alternate; } .dark .rssms-aurora::before { background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(59,130,246,.35) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(99,102,241,.25) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 50% 50%, rgba(15,32,68,.4) 0%, transparent 70%); } .rssms-aurora::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 40% at 72% 18%, rgba(37,99,235,.06) 0%, transparent 55%); animation: rssms-pulse 20s ease-in-out infinite alternate-reverse; } .dark .rssms-aurora::after { background: radial-gradient(ellipse 60% 50% at 72% 28%, rgba(59,130,246,.22) 0%, transparent 60%); } @keyframes rssms-pulse { from { opacity: .75; transform: scale(1) rotate(0deg); } to { opacity: 1; transform: scale(1.06) rotate(4deg); } } /* ----- rssms-grid — graph-paper overlay (all pages) ----------------------- */ .rssms-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(30,58,138,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(30,58,138,.06) 1px, transparent 1px); background-size: 48px 48px; } .dark .rssms-grid { background-image: linear-gradient(rgba(212,175,55,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,.04) 1px, transparent 1px); } /* Floating glass cubes (evolves the original login's .box-area animation). */ .glass-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .glass-orbs span { position: absolute; display: block; list-style: none; background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 30%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); bottom: -160px; animation: orb-rise 24s linear infinite; } .glass-orbs span:nth-child(1) { left: 84%; width: 84px; height: 84px; animation-delay: 0s; } .glass-orbs span:nth-child(2) { left: 12%; width: 30px; height: 30px; animation-delay: 2s; animation-duration: 12s; } .glass-orbs span:nth-child(3) { left: 70%; width: 110px; height: 110px; animation-delay: 5s; } .glass-orbs span:nth-child(4) { left: 42%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 18s; } .glass-orbs span:nth-child(5) { left: 65%; width: 44px; height: 44px; animation-delay: 0s; } .glass-orbs span:nth-child(6) { left: 15%; width: 120px; height: 120px; animation-delay: 4s; } .glass-orbs span:nth-child(7) { left: 35%; width: 60px; height: 60px; animation-delay: 8s; } .glass-orbs span:nth-child(8) { left: 55%; width: 26px; height: 26px; animation-delay: 15s; animation-duration: 40s; } .glass-orbs span:nth-child(9) { left: 25%; width: 90px; height: 90px; animation-delay: 3s; animation-duration: 14s; } .glass-orbs span:nth-child(10) { left: 88%; width: 52px; height: 52px; animation-delay: 11s; } @keyframes orb-rise { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(-1040px) rotate(360deg); opacity: 0; } } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { .aurora-bg::before, .aurora-bg::after, .glass-orbs span, .glass-btn-primary::after { animation: none; transition: none; } } /* Entrance animation reused from the original login. */ @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* Autofill fix carried over from the PHP login. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px rgba(255,255,255,0.9) inset !important; -webkit-text-fill-color: #0f172a !important; caret-color: #0f172a; } .dark input:-webkit-autofill, .dark input:-webkit-autofill:hover, .dark input:-webkit-autofill:focus, .dark input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px rgba(30,32,44,0.95) inset !important; -webkit-text-fill-color: #fff !important; caret-color: #fff; } [x-cloak] { display: none !important; }