/* ========================================================================== Technical boot loader — a deployment/rollout console. Safety rules baked in: 1. No scroll lock on . If anything goes wrong the page is still usable. 2. A pure-CSS fail-safe fades the overlay out after 4.5s even if JavaScript never runs, so the site can never be trapped behind the loader. 3. JS normally dismisses it much earlier (on `load`, min ~900ms). ========================================================================== */ #loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: var(--bg, #0a0e14); /* fail-safe: self-destruct even without JS */ animation: loaderFailSafe .45s ease 4.5s forwards; } #loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility .4s; } @keyframes loaderFailSafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .boot { width: min(440px, 100%); font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); color: #a6b6cc; } .boot-frame { border: 1px solid rgba(148, 178, 214, .18); border-radius: 12px; background: #0f151e; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); overflow: hidden; } .boot-bar { display: flex; align-items: center; gap: .45rem; padding: .55rem .8rem; border-bottom: 1px solid rgba(148, 178, 214, .14); background: rgba(148, 178, 214, .04); } .boot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(148, 178, 214, .25); flex: none; } .boot-bar i:first-child { background: #f87171; } .boot-bar i:nth-child(2) { background: #fbbf24; } .boot-bar i:nth-child(3) { background: #4ade80; } .boot-bar span { margin-left: .35rem; font-size: .68rem; letter-spacing: .08em; color: #7d8ea6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .boot-log { margin: 0; padding: .9rem .8rem; font-size: .72rem; line-height: 1.85; list-style: none; min-height: 132px; } @media (min-width: 480px) { .boot-log { font-size: .76rem; padding: 1rem; } } .boot-log li { display: flex; align-items: baseline; gap: .5rem; opacity: 0; transform: translateY(4px); animation: bootLine .28s ease forwards; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .boot-log li:nth-child(1) { animation-delay: .05s; } .boot-log li:nth-child(2) { animation-delay: .25s; } .boot-log li:nth-child(3) { animation-delay: .45s; } .boot-log li:nth-child(4) { animation-delay: .65s; } .boot-log li:nth-child(5) { animation-delay: .85s; } .boot-log .ok { color: #4ade80; flex: none; } .boot-log .arrow { color: #4ea8de; flex: none; } .boot-log .txt { color: #a6b6cc; overflow: hidden; text-overflow: ellipsis; } @keyframes bootLine { to { opacity: 1; transform: none; } } .boot-progress { height: 2px; background: rgba(148, 178, 214, .12); overflow: hidden; } .boot-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #4ea8de, #7c9cf5); transform-origin: 0 50%; transform: scaleX(0); animation: bootProgress 1.6s cubic-bezier(.25, .8, .3, 1) forwards; } @keyframes bootProgress { 0% { transform: scaleX(.04); } 55% { transform: scaleX(.72); } 100% { transform: scaleX(1); } } .boot-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #64748b; } .boot-foot .cursor { display: inline-block; width: .5em; height: 1em; background: #4ea8de; vertical-align: -.15em; margin-left: .25rem; animation: bootBlink 1s steps(2, start) infinite; } @keyframes bootBlink { 50% { opacity: 0; } } /* very short viewports (mobile landscape) — trim the console */ @media (max-height: 420px) { .boot-log { min-height: 0; padding: .6rem .8rem; } .boot-log li:nth-child(n + 4) { display: none; } .boot-foot { display: none; } } @media (prefers-reduced-motion: reduce) { #loader { animation: loaderFailSafe .01s linear 1.2s forwards; } .boot-log li { opacity: 1; transform: none; animation: none; } .boot-progress i { transform: scaleX(1); animation: none; } .boot-foot .cursor { animation: none; } }