/* 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-ios, html.os-skin-ios body, html.os-skin-android, html.os-skin-android body, html.os-skin-unsupported, html.os-skin-unsupported body { background: #000 !important; } 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; } body.portal-boot.boot-body-ios, body.portal-boot.boot-body-android { min-height: 100dvh; } .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, .boot-logo-ios, .boot-logo-android { display: none; } .boot-skin-win .boot-logo-win, .boot-skin-mac .boot-logo-mac, .boot-skin-linux .boot-logo-linux, .boot-skin-ios .boot-logo-ios, .boot-skin-android .boot-logo-android { display: block; } .boot-logo-win { color: #f3f3f3; } .boot-logo-mac { color: #f8fafc; } .boot-logo-linux { color: #e95420; } .boot-logo-ios { color: #f8fafc; } .boot-logo-android { color: #4285f4; } /* 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: #000; 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-lock-hero, .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: #000; font-size: 2rem; overflow: hidden; padding: 0; } .boot-user-avatar .portal-user-logo { width: 100%; height: 100%; border-radius: inherit; } .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; white-space: pre-line; } .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-ios .boot-mark, .boot-skin-ios .boot-progress, .boot-skin-android .boot-mark, .boot-skin-android .boot-spinner { animation: none; opacity: 1; transform: none; } .boot-skin-android .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; } } /* Lock clock (mobile greeters only) */ .boot-lock-hero { display: none; } /* —— iPhone 17 boot + lock-screen greeter (from scratch) —— */ .boot-skin-ios, body.boot-body-ios { font-family: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; background: #000; } .boot-skin-ios .boot, .boot-skin-ios .boot-screen, .boot-skin-ios .boot-desktop { min-height: 100vh; min-height: 100dvh; } .boot-skin-ios .boot-screen { background: #000; gap: 0; justify-content: center; align-items: center; } .boot-skin-ios .boot-mark { width: auto; height: auto; margin: 0 0 6.25rem; font-size: 0; color: #f5f5f7; animation: boot-iphone-logo-in 1s cubic-bezier(0.22, 1, 0.36, 1) both; } .boot-skin-ios .boot-apple-mark { display: block; width: 5rem; height: 5rem; filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.35)); } .boot-skin-ios .boot-progress { display: block; position: relative; width: min(132px, 34vw); height: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; opacity: 0; animation: boot-iphone-bar-in 0.6s ease 1.35s forwards; } .boot-skin-ios .boot-progress i { background: #f5f5f7; border-radius: inherit; transition: width 0.2s linear; } .boot-skin-ios .boot-status, .boot-skin-ios .boot-spinner { display: none !important; } @keyframes boot-iphone-logo-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes boot-iphone-bar-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .boot-screen.boot-screen-ios-out { transition: opacity 0.95s ease, visibility 0.95s ease, transform 0.95s ease; transform: scale(1.015); } .boot-skin-ios .boot-desktop { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1.25rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); overflow: hidden; box-sizing: border-box; } .boot-skin-ios .boot-wallpaper { opacity: 1; background: radial-gradient(ellipse 120% 80% at 12% 8%, rgba(255, 99, 71, 0.65), transparent 52%), radial-gradient(ellipse 100% 70% at 92% 18%, rgba(64, 120, 255, 0.58), transparent 48%), radial-gradient(ellipse 90% 60% at 48% 95%, rgba(168, 85, 247, 0.5), transparent 55%), radial-gradient(circle at 70% 55%, rgba(34, 211, 238, 0.18), transparent 40%), linear-gradient(168deg, #1a0b2e 0%, #0a1224 46%, #1c1038 100%); } .boot-skin-ios .boot-desktop.is-ready .boot-wallpaper { animation: boot-ios-wall-in 1.1s ease both; } .boot-skin-ios .boot-lock-hero { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; position: absolute; left: 0; right: 0; top: max(12vh, calc(env(safe-area-inset-top, 0px) + 3.5rem)); z-index: 1; text-align: center; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); pointer-events: none; } .boot-skin-ios .boot-desktop.is-ready .boot-lock-hero { animation: boot-ios-lock-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } .boot-skin-ios .boot-lock-time { display: block; font-size: clamp(4.5rem, 18vw, 6.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; } .boot-skin-ios .boot-lock-date { margin: 0; font-size: 1.15rem; font-weight: 500; letter-spacing: 0.01em; opacity: 0.92; } .boot-skin-ios .boot-login-window { width: 100%; max-width: 420px; margin: 0 auto; max-height: min(58dvh, 520px); overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 32px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.72); color: #1d1d1f; box-shadow: 0 28px 64px rgba(0, 0, 0, 0.4); backdrop-filter: blur(40px) saturate(1.5); -webkit-backdrop-filter: blur(40px) saturate(1.5); } .boot-skin-ios .boot-desktop.is-ready .boot-login-window { animation: boot-ios-card-in 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both; } .boot-skin-ios .boot-win-titlebar { display: none; } .boot-skin-ios .boot-win-body { padding: 1.65rem 1.35rem 1.2rem; gap: 0.7rem; } .boot-skin-ios .boot-user-avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #000; color: #fff; font-size: 2.15rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); } .boot-skin-ios .boot-login-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: #1d1d1f; } .boot-skin-ios .boot-login-sub { color: #6e6e73; font-size: 0.95rem; } .boot-skin-ios .boot-field { gap: 0.4rem; font-size: 0.8rem; } .boot-skin-ios .boot-field span { color: #6e6e73; font-weight: 500; padding-left: 0.15rem; } .boot-skin-ios .boot-field input { border: 0; border-radius: 16px; background: rgba(29, 29, 31, 0.08); color: #1d1d1f; min-height: 3.1rem; padding: 0.85rem 1rem; font-size: 16px; } .boot-skin-ios .boot-field input:focus { outline: 2px solid #0071e3; outline-offset: 0; background: rgba(29, 29, 31, 0.06); } .boot-skin-ios .boot-submit { border-radius: 16px; background: #0071e3; color: #fff; min-height: 3.1rem; font-weight: 600; font-size: 1.05rem; margin-top: 0.25rem; } .boot-skin-ios .boot-submit:hover { background: #0077ed; } .boot-skin-ios .boot-help, .boot-skin-ios .boot-site { font-size: 0.88rem; } .boot-skin-ios .boot-help, .boot-skin-ios .boot-site, .boot-skin-ios .boot-help a { color: #0071e3; } .boot-skin-ios .boot-error { background: rgba(255, 59, 48, 0.12); border-color: rgba(255, 59, 48, 0.28); color: #b91c1c; border-radius: 14px; } .boot-skin-ios .boot-login-statusbar { background: rgba(245, 245, 247, 0.92); border-top-color: rgba(29, 29, 31, 0.08); color: #6e6e73; border-radius: 0 0 32px 32px; padding: 0.65rem 1.1rem 0.8rem; } .boot-skin-ios .boot-login-worktrack { background: rgba(29, 29, 31, 0.1); height: 2px; border-radius: 999px; overflow: hidden; } .boot-skin-ios .boot-login-worktrack i { width: 0%; background: #0071e3; border-radius: inherit; transition: width 0.15s linear; } @keyframes boot-ios-wall-in { from { opacity: 0; filter: blur(16px) brightness(0.7); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } } @keyframes boot-ios-lock-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } @keyframes boot-ios-card-in { from { opacity: 0; transform: translateY(48px) scale(0.98); } to { opacity: 1; transform: none; } } /* —— Google Pixel boot + Material You greeter (from scratch) —— */ .boot-skin-android, body.boot-body-android { font-family: "Google Sans", "Product Sans", Roboto, "Noto Sans", system-ui, sans-serif; background: #000; } .boot-skin-android .boot, .boot-skin-android .boot-screen, .boot-skin-android .boot-desktop { min-height: 100vh; min-height: 100dvh; } .boot-skin-android .boot-screen { background: #000; gap: 0; justify-content: center; align-items: center; } .boot-skin-android .boot-mark { width: auto; height: auto; margin: 0 0 4.5rem; font-size: 0; animation: boot-pixel-g-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; } .boot-skin-android .boot-pixel-g { display: block; width: 5rem; height: 5rem; } .boot-skin-android .boot-spinner { display: flex; align-items: center; justify-content: center; gap: 0.62rem; width: auto; height: auto; border: 0; border-radius: 0; background: none; -webkit-mask: none; mask: none; opacity: 0; animation: boot-pixel-dots-in 0.5s ease 1.15s forwards; } .boot-skin-android .boot-spinner span { display: block; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: #fff; opacity: 0.18; animation: boot-pixel-dot 1.4s ease-in-out infinite; } .boot-skin-android .boot-spinner span:nth-child(1) { animation-delay: 0s; } .boot-skin-android .boot-spinner span:nth-child(2) { animation-delay: 0.15s; } .boot-skin-android .boot-spinner span:nth-child(3) { animation-delay: 0.3s; } .boot-skin-android .boot-spinner span:nth-child(4) { animation-delay: 0.45s; } .boot-skin-android .boot-spinner span:nth-child(5) { display: none; } @keyframes boot-pixel-g-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } } @keyframes boot-pixel-dots-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes boot-pixel-dot { 0%, 80%, 100% { opacity: 0.18; transform: scale(0.72); } 40% { opacity: 1; transform: scale(1); } } .boot-skin-android .boot-progress, .boot-skin-android .boot-status { display: none !important; } .boot-screen.boot-screen-android-out { transition: opacity 0.65s ease, visibility 0.65s ease; } .boot-skin-android .boot-desktop { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1.35rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); overflow: hidden; box-sizing: border-box; } .boot-skin-android .boot-wallpaper { opacity: 1; background: radial-gradient(circle at 16% 12%, rgba(168, 199, 250, 0.45), transparent 42%), radial-gradient(circle at 88% 22%, rgba(246, 184, 179, 0.35), transparent 44%), radial-gradient(circle at 72% 88%, rgba(146, 211, 163, 0.28), transparent 46%), radial-gradient(circle at 30% 70%, rgba(251, 223, 132, 0.16), transparent 40%), linear-gradient(165deg, #1a2332 0%, #12181f 48%, #0e141b 100%); } .boot-skin-android .boot-desktop.is-ready .boot-wallpaper { animation: boot-android-wall-in 0.9s ease both; } .boot-skin-android .boot-lock-hero { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; position: absolute; left: 0; right: 0; top: max(11vh, calc(env(safe-area-inset-top, 0px) + 3rem)); z-index: 1; text-align: center; color: #e8eaed; pointer-events: none; } .boot-skin-android .boot-desktop.is-ready .boot-lock-hero { animation: boot-android-lock-in 0.75s ease 0.12s both; } .boot-skin-android .boot-lock-time { display: block; font-size: clamp(4.25rem, 17vw, 6rem); font-weight: 400; letter-spacing: -0.03em; line-height: 0.95; font-variant-numeric: tabular-nums; } .boot-skin-android .boot-lock-date { margin: 0; font-size: 1.05rem; font-weight: 400; opacity: 0.88; } .boot-skin-android .boot-login-window { width: 100%; max-width: 420px; margin: 0 auto; max-height: min(58dvh, 520px); overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 28px; border: 0; background: #1c1b1f; color: #e6e1e5; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.45); overflow: hidden; } .boot-skin-android .boot-desktop.is-ready .boot-login-window { animation: boot-android-card-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.22s both; } .boot-skin-android .boot-win-titlebar { display: none; } .boot-skin-android .boot-win-body { padding: 1.55rem 1.3rem 1.15rem; gap: 0.75rem; } .boot-skin-android .boot-user-avatar { width: 4.35rem; height: 4.35rem; border-radius: 50%; background: #000; color: #a8c7fa; font-size: 2.05rem; } .boot-skin-android .boot-login-title { font-size: 1.3rem; font-weight: 500; color: #e6e1e5; } .boot-skin-android .boot-login-sub { color: #cac4d0; font-size: 0.92rem; } .boot-skin-android .boot-field span { color: #cac4d0; font-size: 0.78rem; font-weight: 500; } .boot-skin-android .boot-field input { border-radius: 4px 4px 0 0; border: 0; border-bottom: 2px solid #938f99; background: #2b2930; color: #e6e1e5; min-height: 3.05rem; padding: 0.85rem 0.95rem; font-size: 16px; } .boot-skin-android .boot-field input:focus { border-bottom-color: #a8c7fa; outline: none; box-shadow: none; background: #322f37; } .boot-skin-android .boot-submit { border-radius: 999px; background: #a8c7fa; color: #062e6f; min-height: 3.05rem; font-weight: 600; font-size: 1rem; margin-top: 0.2rem; } .boot-skin-android .boot-submit:hover { background: #c2d7ff; } .boot-skin-android .boot-help, .boot-skin-android .boot-site { font-size: 0.88rem; color: #cac4d0; } .boot-skin-android .boot-help a, .boot-skin-android .boot-site { color: #a8c7fa; } .boot-skin-android .boot-error { background: rgba(242, 184, 181, 0.16); border-color: rgba(242, 184, 181, 0.35); color: #f2b8b5; border-radius: 12px; } .boot-skin-android .boot-login-statusbar { background: #141218; border-top-color: #2b2930; color: #cac4d0; padding: 0.65rem 1.1rem 0.8rem; } .boot-skin-android .boot-login-worktrack { height: 3px; background: #2b2930; border-radius: 999px; overflow: hidden; } .boot-skin-android .boot-login-worktrack i { width: 0%; background: linear-gradient(90deg, #4285f4, #34a853, #fbbc05, #ea4335); transition: width 0.15s linear; } @keyframes boot-android-wall-in { from { opacity: 0; filter: saturate(0.7) brightness(0.75); } to { opacity: 1; filter: none; } } @keyframes boot-android-lock-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes boot-android-card-in { from { opacity: 0; transform: translateY(36px) scale(0.98); } to { opacity: 1; transform: none; } } /* —— Unsupported OS stop screen —— */ .boot-unsupported { position: absolute; inset: 0; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: max(1.5rem, env(safe-area-inset-top, 0px)) 1.5rem max(1.5rem, env(safe-area-inset-bottom, 0px)); text-align: center; background: #0b0f19; color: #f8fafc; box-sizing: border-box; } .boot-unsupported:not([hidden]), .boot-unsupported-active .boot-unsupported { display: flex; } .boot-unsupported[hidden] { display: none !important; } .boot-stop-sign svg { display: block; filter: drop-shadow(0 10px 24px rgba(220, 38, 38, 0.45)); } .boot-unsupported-title { margin: 0; font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 800; letter-spacing: 0.02em; color: #fecaca; } .boot-unsupported-copy { margin: 0; max-width: 26rem; color: #94a3b8; font-size: 1rem; line-height: 1.5; } .boot-unsupported-link { margin-top: 0.5rem; display: inline-flex; align-items: center; justify-content: center; min-height: 2.85rem; padding: 0.65rem 1.25rem; border-radius: 8px; background: #dc2626; color: #fff; font-weight: 700; text-decoration: none; } .boot-unsupported-link:hover { background: #ef4444; } .boot-unsupported-active .boot-screen, .boot-unsupported-active .boot-desktop { display: none !important; } /* Desktop skins: hide mobile lock hero */ .boot-skin-win .boot-lock-hero, .boot-skin-mac .boot-lock-hero, .boot-skin-linux .boot-lock-hero { display: none !important; } /* Shared mobile viewport polish (all skins on narrow screens) */ @media (max-width: 720px) { body.portal-boot { min-height: 100dvh; overflow: hidden; } .boot-login-window { width: min(100%, 420px); max-height: min(92dvh, 760px); overflow: auto; -webkit-overflow-scrolling: touch; } .boot-desktop { padding: max(0.75rem, env(safe-area-inset-top, 0px)) 0.75rem max(1rem, env(safe-area-inset-bottom, 0px)); align-items: center; box-sizing: border-box; } .boot-win-body { padding: 1.25rem 1.1rem 1.1rem; } .boot-field input, .boot-submit { min-height: 2.85rem; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .boot-skin-ios .boot-mark, .boot-skin-ios .boot-progress, .boot-skin-ios .boot-lock-hero, .boot-skin-ios .boot-login-window, .boot-skin-ios .boot-wallpaper, .boot-skin-android .boot-mark, .boot-skin-android .boot-spinner, .boot-skin-android .boot-lock-hero, .boot-skin-android .boot-login-window, .boot-skin-android .boot-wallpaper { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } .boot-skin-android .boot-spinner span { animation: none; opacity: 0.85; } }