/* * Boot screen — shared by every SIAKAD shell. * * The theme scripts load at the end of , so the first paint of a page * shows unstyled tables, native selects and open collapse panels. This cover * hides that window behind the institutional brand, and it is deliberately the * same cover on the protected shell, on the auth pages and on the public site * so a login that lands on a dashboard reads as one application. * * Owners: markup in themes/partials/stw-boot.php, behaviour in themes/stw-boot.js. * * stw-boot.js sets [data-app-boot="pending"] before first paint and clears it * once the shell asks for the reveal. Nothing here applies without that * attribute, so a browser with JavaScript disabled renders the page directly. * * The field stays navy in both colour schemes for the same reason the sidebar * does: it is an identity surface, not a content surface. * * The sidebar tokens carry fallbacks because the public theme loads only the * palette, not the AdminLTE shell stylesheet that defines them. */ .stw-boot { display: none; } [data-app-boot] .stw-boot { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background-color: var(--stw-navy-dark); background-image: radial-gradient(120% 90% at 50% -10%, rgba(255, 140, 0, 0.22), transparent 60%), radial-gradient(90% 70% at 12% 112%, rgba(81, 190, 120, 0.18), transparent 62%), linear-gradient(160deg, var(--stw-navy) 0%, var(--stw-navy-dark) 72%); opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s linear 0.4s; /* * Failsafe. stw-boot.js normally clears the cover in a few hundred * milliseconds; this is the escape hatch for the case where that script * never parses at all, so a broken deploy degrades to a usable page rather * than a spinner that never finishes. */ animation: stw-boot-failsafe 0.4s ease 6s forwards; } [data-bs-theme="dark"][data-app-boot] .stw-boot { background-image: radial-gradient(120% 90% at 50% -10%, rgba(255, 140, 0, 0.16), transparent 60%), radial-gradient(90% 70% at 12% 112%, rgba(81, 190, 120, 0.13), transparent 62%), linear-gradient(160deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.68)), linear-gradient(160deg, var(--stw-navy) 0%, var(--stw-navy-dark) 72%); } /* Hairline weave: enough texture to read as a surface, not as a flat fill. */ [data-app-boot] .stw-boot::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 13px); pointer-events: none; } [data-app-boot="ready"] .stw-boot { opacity: 0; visibility: hidden; pointer-events: none; } [data-app-boot] .stw-boot-panel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: min(20rem, 100%); text-align: center; transition: transform 0.4s ease; } [data-app-boot="ready"] .stw-boot-panel { transform: translateY(-0.5rem); } /* * Staggered reveal. The delays start at 180ms so a load that finishes sooner * shows only the plain cover — the brand panel is for the loads slow enough to * be worth explaining. */ [data-app-boot] .stw-boot-panel > * { opacity: 0; animation: stw-boot-enter 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; } [data-app-boot] .stw-boot-mark { animation-delay: 0.18s; } [data-app-boot] .stw-boot-name { animation-delay: 0.26s; } [data-app-boot] .stw-boot-institution { animation-delay: 0.32s; } [data-app-boot] .stw-boot-track { animation-delay: 0.38s; } [data-app-boot] .stw-boot-status { animation-delay: 0.44s; } /* * The logo sits on an opaque plate: its own artwork is navy and gold, which * would sink into the navy field, and the source PNG carries white in the edge * pixels that a plate keeps invisible. */ [data-app-boot] .stw-boot-mark { position: relative; display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 8px rgba(255, 255, 255, 0.05), 0 10px 26px rgba(0, 0, 0, 0.3); } [data-app-boot] .stw-boot-mark::after { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 50%; animation: stw-boot-halo 2.6s ease-out 0.6s infinite; } [data-app-boot] .stw-boot-logo { width: 3.6rem; height: 3.6rem; object-fit: contain; } [data-app-boot] .stw-boot-name { margin: 0; margin-top: 0.35rem; font-size: 1.65rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.42em; /* Balances the trailing letter-space so the word stays optically centred. */ text-indent: 0.42em; color: var(--stw-sidebar-text, #f7f9fc); } [data-app-boot] .stw-boot-institution { margin: 0; font-size: 0.78rem; line-height: 1.35; color: var(--stw-sidebar-muted, #c7d2e3); } [data-app-boot] .stw-boot-track { position: relative; display: block; width: 100%; height: 3px; margin-top: 0.5rem; overflow: hidden; border-radius: 999px; background-color: rgba(255, 255, 255, 0.14); } [data-app-boot] .stw-boot-track::after { content: ""; position: absolute; inset-block: 0; width: 42%; border-radius: inherit; background-image: linear-gradient(90deg, transparent, var(--stw-green) 24%, var(--stw-orange) 76%, transparent); animation: stw-boot-sweep 1.3s cubic-bezier(0.66, 0, 0.34, 1) infinite; } [data-app-boot] .stw-boot-status { margin: 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.58); } @keyframes stw-boot-enter { from { opacity: 0; transform: translateY(0.7rem); } to { opacity: 1; transform: none; } } @keyframes stw-boot-halo { 0% { opacity: 0.5; transform: scale(0.94); } 70%, 100% { opacity: 0; transform: scale(1.14); } } @keyframes stw-boot-sweep { from { transform: translateX(-105%); } to { transform: translateX(240%); } } @keyframes stw-boot-failsafe { to { opacity: 0; visibility: hidden; } } @media (max-width: 400px) { [data-app-boot] .stw-boot-mark { width: 4.5rem; height: 4.5rem; } [data-app-boot] .stw-boot-logo { width: 3rem; height: 3rem; } [data-app-boot] .stw-boot-name { font-size: 1.35rem; letter-spacing: 0.3em; text-indent: 0.3em; } } /* * Reduced motion keeps the cover and its meaning: the panel is simply present, * and the indeterminate sweep becomes a static brand rule. The failsafe keeps * its delay so the escape hatch still works. */ @media (prefers-reduced-motion: reduce) { [data-app-boot] .stw-boot { transition-duration: 0.01ms; } [data-app-boot] .stw-boot-panel { transition: none; } [data-app-boot="ready"] .stw-boot-panel { transform: none; } [data-app-boot] .stw-boot-panel > * { opacity: 1; animation: none; } [data-app-boot] .stw-boot-mark::after { animation: none; } [data-app-boot] .stw-boot-track::after { width: 100%; background-image: linear-gradient(90deg, var(--stw-green), var(--stw-orange)); animation: none; } }