/* Fake host-OS boot → login window for portal */ /* Early Linux blackout (class set in before body paint) */ html.os-skin-linux, html.os-skin-linux body, html.os-skin-linux body.portal-boot, html.os-skin-linux body.portal-desktop { background: #000 !important; color: #c0c0c0; } html.os-skin-linux .boot-mark, html.os-skin-linux .boot-spinner, html.os-skin-linux .boot-progress, html.os-skin-linux .boot-status, html.os-skin-linux .desk-entering-mark, html.os-skin-linux .desk-entering-spinner, html.os-skin-linux .desk-entering-progress, html.os-skin-linux .desk-entering-status { display: none !important; } html.os-skin-linux .boot-screen, html.os-skin-linux .desk-entering { background: #000 !important; } html.os-skin-linux .boot-console[hidden] { display: none !important; } html.os-skin-linux .desk-entering-console, html.os-skin-linux .desk-entering-console[hidden] { display: block !important; visibility: visible !important; } /* Never reveal the login greeter while the pre-SDDM console is running */ html.os-skin-linux .boot.boot-linux-tty-running .boot-desktop, .boot-skin-linux.boot-linux-tty-running .boot-desktop, .boot-skin-linux .boot-desktop:not(.is-ready) { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } html.os-skin-linux .boot.boot-linux-tty-running .boot-screen, .boot-skin-linux.boot-linux-tty-running .boot-screen { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 100; } body.portal-boot { margin: 0; min-height: 100vh; overflow: hidden; background: #000; } .boot-root { min-height: 100vh; margin: 0; padding: 0; } .boot { position: relative; min-height: 100vh; color: #f8fafc; font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; } .boot-screen { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; background: #000; transition: opacity 0.5s ease, visibility 0.5s ease; } .boot-screen.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .boot-screen.boot-screen-win-out { transition: opacity 0.7s ease, visibility 0.7s ease, filter 0.7s ease; filter: brightness(1.35); } .boot-screen.boot-screen-mac-out { transition: opacity 1.1s ease, visibility 1.1s ease, transform 1.1s ease; transform: scale(1.04); } .boot-screen.boot-screen-linux-out { transition: opacity 0.45s linear, visibility 0.45s linear; } .boot-mark { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; font-size: 3.25rem; line-height: 1; } .boot-logo-win, .boot-logo-mac, .boot-logo-linux { display: none; } .boot-skin-win .boot-logo-win, .boot-skin-mac .boot-logo-mac, .boot-skin-linux .boot-logo-linux { display: block; } .boot-logo-win { color: #f3f3f3; } .boot-logo-mac { color: #f8fafc; } .boot-logo-linux { color: #e95420; } /* Shared spinner defaults (mac unused; win overridden; linux unused) */ .boot-spinner { display: none; gap: 0.45rem; } .boot-spinner span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #94a3b8; opacity: 0.25; animation: boot-dot 1.1s infinite ease-in-out; } .boot-spinner span:nth-child(2) { animation-delay: 0.12s; } .boot-spinner span:nth-child(3) { animation-delay: 0.24s; } .boot-spinner span:nth-child(4) { animation-delay: 0.36s; } .boot-spinner span:nth-child(5) { animation-delay: 0.48s; } @keyframes boot-dot { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } } .boot-progress { display: none; width: min(220px, 55vw); height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; } .boot-progress i { display: block; height: 100%; width: 0%; border-radius: inherit; background: #f8fafc; transition: width 0.2s linear; } .boot-console { display: none; width: min(560px, 88vw); max-height: 42vh; margin: 0; padding: 0; border: 0; background: transparent; color: #86efac; font-family: "Consolas", "Cascadia Code", "Courier New", monospace; font-size: 0.82rem; line-height: 1.45; white-space: pre-wrap; overflow: hidden; } .boot-status { margin: 0; font-size: 0.95rem; letter-spacing: 0.02em; opacity: 0.85; } /* Windows 11 boot — black stage, 4-pane logo, circular Fluent spinner */ .boot-skin-win { font-family: "Segoe UI Variable", "Segoe UI", Tahoma, Arial, sans-serif; } .boot-skin-win .boot-screen { background: #000; gap: 0; justify-content: center; } .boot-skin-win .boot-mark { width: auto; height: auto; margin-bottom: 4.5rem; font-size: 0; } .boot-win11-logo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.28rem; width: 4.75rem; height: 4.75rem; } .boot-win11-logo i { display: block; background: #f3f3f3; border-radius: 0.12rem; } .boot-skin-win .boot-spinner { display: block; position: relative; width: 2.85rem; height: 2.85rem; margin: 0 auto; flex-shrink: 0; border-radius: 50%; background: conic-gradient( from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 40deg, rgba(255, 255, 255, 0.12) 90deg, rgba(255, 255, 255, 0.35) 150deg, rgba(255, 255, 255, 0.7) 220deg, rgba(255, 255, 255, 0.95) 300deg, #fff 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.22rem), #000 calc(100% - 0.22rem)); mask: radial-gradient(farthest-side, transparent calc(100% - 0.22rem), #000 calc(100% - 0.22rem)); animation: boot-win11-snake-spin 2.1s linear infinite; } .boot-skin-win .boot-spinner span { display: none; } @keyframes boot-win11-snake-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } /* clockwise */ } .boot-skin-win .boot-status { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; margin: 0; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.01em; color: #cfcfcf; opacity: 1; } .boot-skin-win .boot-wallpaper { background: radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.4), transparent 42%), radial-gradient(circle at 82% 28%, rgba(37, 99, 235, 0.35), transparent 48%), linear-gradient(160deg, #07111f 0%, #1e293b 55%, #0b1220 100%); } .boot-skin-win .boot-login-window { border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.35); background: #1e293b; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45); } .boot-skin-win .boot-win-titlebar { background: #0f172a; color: #e2e8f0; } .boot-skin-win .boot-submit { background: #2563eb; color: #fff; border-radius: 4px; } .boot-skin-win .boot-submit:hover { background: #3b82f6; } /* macOS boot */ .boot-skin-mac { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; } .boot-skin-mac .boot-progress { display: block; } .boot-skin-mac .boot-status { display: none; } .boot-skin-mac .boot-wallpaper { background: linear-gradient(180deg, rgba(15, 23, 42, 0.2), rgba(2, 6, 23, 0.55)), radial-gradient(circle at 50% 0%, #64748b, #0f172a 60%); } .boot-skin-mac .boot-login-window { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(248, 250, 252, 0.92); color: #0f172a; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); backdrop-filter: blur(24px); } .boot-skin-mac .boot-win-titlebar { background: transparent; color: #334155; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .boot-skin-mac .boot-user-avatar { background: linear-gradient(180deg, #94a3b8, #64748b); color: #fff; border-radius: 50%; } .boot-skin-mac .boot-field input { background: #fff; color: #0f172a; border-color: rgba(15, 23, 42, 0.15); border-radius: 10px; } .boot-skin-mac .boot-submit { background: #0071e3; color: #fff; border-radius: 999px; } .boot-skin-mac .boot-submit:hover { background: #0077ed; } .boot-skin-mac .boot-help, .boot-skin-mac .boot-site, .boot-skin-mac .boot-login-sub { color: #475569; } .boot-skin-mac .boot-help a, .boot-skin-mac .boot-site { color: #0071e3; } .boot-skin-mac .boot-error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); color: #b91c1c; } /* Linux — Debian 13 GRUB → console → SDDM/X11/KDE */ .boot-skin-linux, body.boot-body-linux { background: #000 !important; color: #c0c0c0; font-family: "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace; } .boot-skin-linux .boot-screen { display: block !important; background: #000 !important; padding: 0; gap: 0; overflow: hidden; } .boot-skin-linux.boot-phase-grub .boot-screen, .boot-skin-linux .boot-screen.is-grub { background: #0000a8 !important; } .boot-skin-linux .boot-mark, .boot-skin-linux .boot-spinner, .boot-skin-linux .boot-progress, .boot-skin-linux .boot-status { display: none !important; } .boot-grub { display: none; position: absolute; inset: 0; z-index: 5; padding: 1.25rem 1.5rem; box-sizing: border-box; color: #ffffff; background: #0000a8; font-family: "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace; font-size: 15px; line-height: 1.45; } .boot-skin-linux.boot-phase-grub .boot-grub, .boot-skin-linux .boot-grub:not([hidden]) { display: block !important; } .boot-grub[hidden] { display: none !important; } .boot-grub-inner { max-width: 52rem; } .boot-grub-header { margin-bottom: 1.1rem; color: #ffffff; } .boot-grub-box { border: 1px solid #ffffff; padding: 0.35rem 0; margin-bottom: 1.25rem; min-height: 7.5rem; background: #0000a8; } .boot-grub-entry { padding: 0.15rem 0.75rem; color: #ffffff; } .boot-grub-entry.is-selected { background: #ffffff; color: #0000a8; } .boot-grub-footer { color: #ffffff; font-size: 0.92rem; line-height: 1.55; } .boot-grub-booting { color: #ffffff; padding: 2rem 0.5rem; white-space: pre-wrap; } .boot-skin-linux .boot-console { display: none; } .boot-skin-linux.boot-phase-console .boot-console, .boot-skin-linux.boot-phase-sddm .boot-console, .boot-skin-linux .boot-console.is-active { display: block !important; position: absolute; inset: 0; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 0.5rem 0.75rem 1rem; overflow-x: hidden; overflow-y: auto; color: #c0c0c0; font-family: "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Courier New", monospace; font-size: 14px; line-height: 1.35; letter-spacing: 0; white-space: normal; word-break: break-word; background: #000 !important; border: 0; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #333 #000; z-index: 4; } .boot-tty-line { white-space: pre-wrap; min-height: 1.35em; color: #c0c0c0; } .boot-tty-ok { color: #13a10e; font-weight: 700; } .boot-tty-start { color: #c0c0c0; font-weight: 400; } .boot-tty-pending { color: #c0c0c0; font-weight: 700; } .boot-tty-fail { color: #c50f1f; font-weight: 700; } .boot-tty-warn { color: #c19c00; font-weight: 700; } .boot-tty-kernel { color: #9a9a9a; } .boot-tty-xorg { color: #7dd3fc; } .boot-tty-dim { color: #777777; } .boot-skin-linux .boot-console.is-active::after { content: none; } .boot-skin-linux .boot-wallpaper { background: radial-gradient(ellipse at 30% 20%, rgba(61, 174, 233, 0.35), transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(218, 68, 83, 0.22), transparent 45%), linear-gradient(160deg, #1b1e28 0%, #2a2e3a 45%, #12141a 100%); } .boot-skin-linux .boot-login-window { border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(36, 39, 49, 0.92); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45); font-family: "Noto Sans", "DejaVu Sans", Arial, sans-serif; backdrop-filter: blur(12px); } .boot-skin-linux .boot-win-titlebar { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .boot-skin-linux .boot-field input { background: #1e1c24; border-color: #5e5c64; color: #f8fafc; border-radius: 6px; } .boot-skin-linux .boot-submit { background: #3daee9; color: #fff; border-radius: 6px; } .boot-skin-linux .boot-submit:hover { background: #1d99f3; } /* Desktop + login window after boot */ .boot-desktop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 1.25rem; opacity: 0; transition: opacity 0.55s ease; } .boot-desktop.is-ready { opacity: 1; } .boot-desktop[hidden] { display: none !important; } .boot-wallpaper { position: absolute; inset: 0; z-index: 0; opacity: 0; } .boot-login-window { position: relative; z-index: 1; width: min(420px, 100%); display: flex; flex-direction: column; overflow: hidden; opacity: 0; } /* Windows: lock-screen rise + soft bloom */ .boot-skin-win .boot-desktop.is-ready .boot-wallpaper { animation: boot-win-wall-in 1.15s ease 0.05s both; } .boot-skin-win .boot-desktop.is-ready .boot-login-window { animation: boot-win-login-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; } .boot-skin-win .boot-desktop.is-ready .boot-user-avatar { animation: boot-win-avatar-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; } .boot-skin-win .boot-desktop.is-ready .boot-win-body > *:not(.boot-user-avatar) { animation: boot-win-body-in 0.55s ease 0.7s both; } @keyframes boot-win-wall-in { from { opacity: 0; filter: blur(12px) saturate(0.7); transform: scale(1.04); } to { opacity: 1; filter: none; transform: none; } } @keyframes boot-win-login-in { from { opacity: 0; transform: translateY(56px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes boot-win-avatar-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } } @keyframes boot-win-body-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* macOS: zoom-blur settle + apple-like avatar pop */ .boot-skin-mac .boot-desktop.is-ready .boot-wallpaper { animation: boot-mac-wall-in 1.35s ease both; } .boot-skin-mac .boot-desktop.is-ready .boot-login-window { animation: boot-mac-login-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; } .boot-skin-mac .boot-desktop.is-ready .boot-user-avatar { animation: boot-mac-avatar-in 0.95s cubic-bezier(0.34, 1.45, 0.64, 1) 0.45s both; } .boot-skin-mac .boot-desktop.is-ready .boot-login-title, .boot-skin-mac .boot-desktop.is-ready .boot-login-sub, .boot-skin-mac .boot-desktop.is-ready .boot-form, .boot-skin-mac .boot-desktop.is-ready .boot-help, .boot-skin-mac .boot-desktop.is-ready .boot-site, .boot-skin-mac .boot-desktop.is-ready .boot-error { animation: boot-mac-fade-up 0.65s ease both; } .boot-skin-mac .boot-desktop.is-ready .boot-login-title { animation-delay: 0.65s; } .boot-skin-mac .boot-desktop.is-ready .boot-login-sub { animation-delay: 0.72s; } .boot-skin-mac .boot-desktop.is-ready .boot-error { animation-delay: 0.78s; } .boot-skin-mac .boot-desktop.is-ready .boot-form { animation-delay: 0.82s; } .boot-skin-mac .boot-desktop.is-ready .boot-help { animation-delay: 0.95s; } .boot-skin-mac .boot-desktop.is-ready .boot-site { animation-delay: 1.02s; } @keyframes boot-mac-wall-in { from { opacity: 0; filter: blur(18px) brightness(0.65); transform: scale(1.08); } to { opacity: 1; filter: none; transform: none; } } @keyframes boot-mac-login-in { from { opacity: 0; transform: scale(1.08); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } } @keyframes boot-mac-avatar-in { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: none; } } @keyframes boot-mac-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Linux / SDDM: quiet fade + short rise */ .boot-skin-linux .boot-desktop.is-ready .boot-wallpaper { animation: boot-linux-wall-in 0.85s ease both; } .boot-skin-linux .boot-desktop.is-ready .boot-login-window { animation: boot-linux-login-in 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; } .boot-skin-linux .boot-desktop.is-ready .boot-win-titlebar { animation: boot-linux-chrome-in 0.55s ease 0.35s both; } .boot-skin-linux .boot-desktop.is-ready .boot-win-body { animation: boot-linux-body-in 0.6s ease 0.42s both; } @keyframes boot-linux-wall-in { from { opacity: 0; } to { opacity: 1; } } @keyframes boot-linux-login-in { from { opacity: 0; transform: translateY(18px) scale(0.99); } to { opacity: 1; transform: none; } } @keyframes boot-linux-chrome-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes boot-linux-body-in { from { opacity: 0; } to { opacity: 1; } } .boot-desktop.is-instant .boot-wallpaper, .boot-desktop.is-instant .boot-login-window, .boot-desktop.is-instant .boot-user-avatar, .boot-desktop.is-instant .boot-win-titlebar, .boot-desktop.is-instant .boot-win-body, .boot-desktop.is-instant .boot-win-body > *, .boot-desktop.is-instant .boot-login-title, .boot-desktop.is-instant .boot-login-sub, .boot-desktop.is-instant .boot-form, .boot-desktop.is-instant .boot-help, .boot-desktop.is-instant .boot-site, .boot-desktop.is-instant .boot-error { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } .boot-win-titlebar { display: flex; align-items: center; justify-content: center; min-height: 2.35rem; padding: 0 0.85rem; user-select: none; } .boot-win-title { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.84rem; font-weight: 600; opacity: 0.92; } .boot-win-body { padding: 1.35rem 1.3rem 1.2rem; display: grid; gap: 0.8rem; text-align: center; } /* Status / working bar attached under the login window chrome */ .boot-login-statusbar { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.55rem 0.9rem 0.65rem; border-top: 1px solid rgba(148, 163, 184, 0.25); background: rgba(15, 23, 42, 0.55); } .boot-login-statusbar[hidden] { display: none !important; } .boot-login-worktrack { position: relative; width: 100%; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.12); } .boot-login-worktrack i { display: block; height: 100%; width: 0%; border-radius: inherit; background: #60a5fa; } .boot-login-worklabel { font-size: 0.78rem; opacity: 0.85; text-align: left; } .boot-login-window.is-signing-in .boot-form, .boot-login-window.is-signing-in .boot-help, .boot-login-window.is-signing-in .boot-site, .boot-login-window.is-greeter-starting .boot-form, .boot-login-window.is-greeter-starting .boot-help, .boot-login-window.is-greeter-starting .boot-site { opacity: 0.45; pointer-events: none; } .boot-skin-win .boot-login-statusbar { background: #0f172a; border-top-color: #334155; color: #cbd5e1; } .boot-skin-win .boot-login-worktrack { background: #1e293b; height: 5px; } .boot-skin-win .boot-login-worktrack i { width: 38%; background: linear-gradient(90deg, #0078d4, #60a5fa, #0078d4); background-size: 200% 100%; animation: boot-win-workbar 1.15s linear infinite; } @keyframes boot-win-workbar { from { transform: translateX(-120%); } to { transform: translateX(320%); } } .boot-skin-mac .boot-login-statusbar { background: rgba(248, 250, 252, 0.95); border-top-color: rgba(15, 23, 42, 0.08); color: #475569; } .boot-skin-mac .boot-login-worktrack { background: rgba(15, 23, 42, 0.1); height: 3px; } .boot-skin-mac .boot-login-worktrack i { width: 0%; background: #0071e3; transition: width 0.15s linear; } .boot-skin-linux .boot-login-statusbar { background: #241f31; border-top-color: #5e5c64; color: #c0c0c0; } .boot-skin-linux .boot-login-worktrack { height: 4px; background: #1e1c24; } .boot-skin-linux .boot-login-worktrack i { width: 34%; background: linear-gradient(90deg, #1d99f3, #6dc7f2, #1d99f3); background-size: 200% 100%; animation: boot-linux-workbar 1.05s ease-in-out infinite; } @keyframes boot-linux-workbar { from { transform: translateX(-120%); } to { transform: translateX(350%); } } .boot-user-avatar { width: 4.25rem; height: 4.25rem; margin: 0 auto; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.12); font-size: 2rem; } .boot-login-title { margin: 0; font-size: 1.25rem; font-weight: 600; } .boot-login-sub { margin: -0.25rem 0 0; opacity: 0.75; font-size: 0.9rem; } .boot-error { padding: 0.65rem 0.75rem; border-radius: 8px; background: rgba(239, 68, 68, 0.18); border: 1px solid rgba(248, 113, 113, 0.35); color: #fecaca; font-size: 0.88rem; text-align: left; } .boot-form { display: grid; gap: 0.75rem; text-align: left; } .boot-field { display: grid; gap: 0.3rem; font-size: 0.82rem; } .boot-field span { opacity: 0.8; } .boot-field input { width: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; padding: 0.7rem 0.8rem; background: rgba(15, 23, 42, 0.75); color: #f8fafc; font: inherit; } .boot-field input:focus { outline: 2px solid rgba(56, 189, 248, 0.55); outline-offset: 1px; } .boot-submit { appearance: none; border: 0; margin-top: 0.15rem; padding: 0.75rem 1rem; font: inherit; font-weight: 600; cursor: pointer; } .boot-help, .boot-site { margin: 0; font-size: 0.82rem; opacity: 0.85; } .boot-help a, .boot-site { color: #7dd3fc; text-decoration: none; } .boot-help a:hover, .boot-site:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .boot-spinner span { animation: none; opacity: 0.8; } .boot-skin-win .boot-spinner { animation: none; } .boot-skin-win .boot-spinner span { animation: none; opacity: 0.85; } .boot-skin-win .boot-login-worktrack i { animation: none; width: 55%; transform: none; } .boot-skin-linux .boot-login-worktrack i { animation: none; width: 55%; transform: none; } .boot-screen, .boot-desktop { transition: none; } .boot-wallpaper, .boot-login-window, .boot-user-avatar, .boot-win-titlebar, .boot-win-body, .boot-win-body > *, .boot-login-title, .boot-login-sub, .boot-form, .boot-help, .boot-site, .boot-error { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }