/* =========================================================================== boot.css — power button → boot screen → welcome (user select). Ported from mockups/boot-sequence/. Everything is scoped under #boot-root so it cannot reach the desktop: XP.css and Webamp have both already collided with generic class names in this project (`.window`, `.bar`), and the fix each time was scoping. Doing it up front here rather than after the bug. The "XP Tahoma" @font-face lives in skin.css, which loads first — this file only uses the family. =========================================================================== */ /* The desktop is hidden while the boot runs. The class is added by an inline script in so there is no flash of desktop, and removed by boot.js — or by that same inline script's failsafe timer if boot.js never loads. The failure mode is a working desktop, never a black screen. */ html.boot-active .screen { display: none !important; } html.boot-active, html.boot-active body { background: #000; } #boot-root { display: none; } html.boot-active #boot-root { display: block; } #boot-root *, #boot-root *::before, #boot-root *::after { box-sizing: border-box; } #boot-root { font-family: "XP Tahoma", Tahoma, Verdana, sans-serif; -webkit-font-smoothing: antialiased; } #boot-root .bscreen { position: fixed; inset: 0; display: none; z-index: 9000; } #boot-root .bscreen.show { display: grid; } #boot-root .bscreen.fading { animation: boot-fadein .55s ease both; } @keyframes boot-fadein { from { opacity: 0 } to { opacity: 1 } } /* =========================== 1. POWER =================================== */ /* Drawn in CSS, not a photo: a photo is someone's copyrighted image (the same objection that killed the XP chime), a photoreal JPEG clashes with the flat XP chrome next to it, and CSS can light the LED on press. Graphite/chrome with a blue LED — the 2000s machine, deliberately not beige 90s. */ #power-screen { place-items: center; background: radial-gradient(120% 90% at 50% 18%, #23262b 0%, #101215 45%, #08090b 100%); } #boot-root .rig { display: grid; justify-items: center; gap: 26px; } #boot-root .bezel { position: relative; width: 300px; padding: 34px 30px 30px; border-radius: 14px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0 1px, rgba(0,0,0,.030) 1px 2px), linear-gradient(180deg, #4a4e55 0%, #3a3e44 38%, #2b2e33 72%, #23262a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.06), inset -1px 0 0 rgba(0,0,0,.35), 0 22px 46px rgba(0,0,0,.72), 0 2px 0 rgba(0,0,0,.5); display: grid; justify-items: center; gap: 22px; } /* Removed 2026-08-05: this was a moulded case seam across the bezel, but at real size it reads as a rendering artifact — a stray hairline straight under the button — rather than as a moulding. First outside viewer called it "a strange line", which is the whole verdict. The bezel's inset highlights already give it depth without it. */ #boot-root .well { position: relative; width: 132px; height: 132px; border-radius: 50%; background: linear-gradient(180deg, #191b1e, #2c3035); box-shadow: inset 0 3px 7px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.10), 0 1px 0 rgba(255,255,255,.10); display: grid; place-items: center; } /* The chrome ring is a conic-gradient because the highlight has to travel AROUND the ring — a linear gradient reads as plastic. */ #boot-root .ring { width: 116px; height: 116px; border-radius: 50%; padding: 5px; background: conic-gradient(from 212deg, #f4f6f9 0deg, #9aa0a8 46deg, #5f656d 92deg, #cfd4da 148deg, #eef1f5 190deg, #767c85 244deg, #4e535a 292deg, #b9bfc6 336deg, #f4f6f9 360deg); box-shadow: 0 1px 2px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.45); display: grid; place-items: center; } #boot-root .pbtn { position: relative; width: 100%; height: 100%; border: 0; border-radius: 50%; padding: 0; cursor: pointer; background: radial-gradient(88% 78% at 50% 12%, #5a5f66 0%, #3d4147 38%, #2a2d32 70%, #1e2126 100%); box-shadow: inset 0 2px 1px rgba(255,255,255,.22), inset 0 -3px 6px rgba(0,0,0,.7), 0 3px 5px rgba(0,0,0,.55); display: grid; place-items: center; transition: transform .07s ease, box-shadow .07s ease; } #boot-root .pbtn::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: linear-gradient(178deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.13) 26%, rgba(255,255,255,0) 46%); pointer-events: none; } #boot-root .pbtn:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 6px; } #boot-root .pbtn:active, #boot-root .pbtn.pressed { transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.5); } /* The glyph is engraved: a dark stroke with a light stroke offset 1px down. */ #boot-root .glyph { width: 42px; height: 42px; display: block; position: relative; z-index: 1; } #boot-root .glyph .cut { stroke: rgba(0,0,0,.72); } #boot-root .glyph .lip { stroke: rgba(255,255,255,.34); transform: translateY(1.15px); } #boot-root .glyph .lit { stroke: rgba(150,200,255,0); transition: stroke .5s ease, filter .5s ease; } #boot-root .on .glyph .lit { stroke: rgba(168,214,255,.95); filter: drop-shadow(0 0 4px rgba(70,140,255,.9)); } #boot-root .led-row { display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #7d838c; text-shadow: 0 1px 0 rgba(0,0,0,.7); } #boot-root .led { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #35414f 0%, #16202c 60%, #0b1119 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.22), inset 0 -1px 2px rgba(0,0,0,.8); transition: background .35s ease, box-shadow .35s ease; } #boot-root .on .led { background: radial-gradient(circle at 34% 30%, #eaf4ff 0%, #6db2ff 34%, #1f6fe0 70%, #0d3d8c 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 7px 2px rgba(58,140,255,.85), 0 0 20px 5px rgba(40,110,230,.45); } #boot-root .on .led-row { color: #b9c6d6; } #boot-root .hint { font-size: 11px; color: #5d636c; letter-spacing: .04em; transition: opacity .4s ease; } #boot-root .on .hint { opacity: 0; } /* =========================== 2. BOOT ==================================== */ /* XP's layout, our marks: centred logo, wordmark, marquee, legal bottom-left, brand bottom-right. Not a reproduction of XP's screen — it is fanix's own OS that happens to look like one, which closes the copyright question. */ #bootup-screen { background: #000; grid-template-rows: 1fr auto 1fr; justify-items: center; } #boot-root .boot-mark { align-self: end; display: grid; justify-items: center; gap: 22px; padding-bottom: 6px; } #boot-root .logo-ph { width: 120px; height: 120px; display: block; } /* Digit substitutions are safe at wordmark size in caps — verified with a headless screenshot. Everywhere the name is READ AS TEXT it is "Domivka OS" instead, because 0/O, 1/l and 4/A blur in the pixel MS Sans Serif at 11px. */ #boot-root .wordmark { font-weight: 700; font-size: 56px; letter-spacing: .10em; color: #fff; text-shadow: 0 0 26px rgba(99,224,138,.30), 0 2px 0 rgba(0,0,0,.6); } #boot-root .wordmark .os { font-size: 20px; letter-spacing: .24em; color: #63e08a; vertical-align: super; margin-left: 8px; text-shadow: 0 0 12px rgba(99,224,138,.7); } /* XP's progress bar is a looping marquee, never a real indicator — which is exactly why it can cover a fetch of unknown length. Blocks are #63e08a, the green already used in the Winamp display, so the boot ties to the rest of the rice instead of borrowing XP's blue. */ #boot-root .marquee { margin-top: 74px; width: 196px; height: 20px; border-radius: 11px; border: 2px solid #9aa3ad; background: #000; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px #000; } #boot-root .marquee i { position: absolute; top: 3px; width: 14px; height: 10px; border-radius: 1px; background: linear-gradient(180deg, #8effb8, #63e08a 45%, #2fa860); box-shadow: 0 0 6px rgba(99,224,138,.8); animation: boot-march 2.1s linear infinite; } #boot-root .marquee i:nth-child(1) { animation-delay: 0s; } #boot-root .marquee i:nth-child(2) { animation-delay: .16s; } #boot-root .marquee i:nth-child(3) { animation-delay: .32s; } @keyframes boot-march { 0% { left: -18px } 100% { left: 196px } } html.boot-still #boot-root .marquee i { animation-play-state: paused; } html.boot-still #boot-root .marquee i:nth-child(1) { left: 64px; } html.boot-still #boot-root .marquee i:nth-child(2) { left: 82px; } html.boot-still #boot-root .marquee i:nth-child(3) { left: 100px; } #boot-root .boot-legal { position: fixed; left: 26px; bottom: 20px; color: #c9ccd1; font-size: 13px; } #boot-root .boot-brand { position: fixed; right: 26px; bottom: 20px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; opacity: .92; } /* =========================== 3. WELCOME ================================= */ #welcome-screen { grid-template-rows: 96px 1fr 78px; background: linear-gradient(180deg, #3f7fdc 0%, #5b9ae8 42%, #4a86e0 78%, #3d76d4 100%); } #boot-root .band { background: linear-gradient(180deg, #1d4ea8 0%, #2a63c4 55%, #1f52ad 100%); position: relative; } #boot-root .band.top::after, #boot-root .band.bottom::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.25)); } #boot-root .band.top::after { bottom: 0; } #boot-root .band.bottom::before { top: 0; } #boot-root .welcome-body { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 0 54px; padding: 0 6vw; } #boot-root .divider { width: 1px; height: 62%; justify-self: center; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55) 18%, rgba(255,255,255,.55) 82%, rgba(255,255,255,0)); } #boot-root .welcome-left { justify-self: end; display: grid; justify-items: center; gap: 26px; text-align: center; } #boot-root .welcome-left .logo-ph { width: 88px; height: 88px; } #boot-root .brand-lockup { display: grid; justify-items: center; gap: 2px; } #boot-root .brand-lockup .name { font-size: 34px; font-weight: 700; color: #fff; letter-spacing: .02em; text-shadow: 0 2px 4px rgba(0,0,0,.35); } #boot-root .brand-lockup .sub { font-size: 13px; letter-spacing: .30em; text-transform: uppercase; color: #cfe4ff; } #boot-root .begin { font-size: 19px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); } #boot-root .accounts { display: grid; gap: 10px; width: 330px; } #boot-root .tile { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 9px 14px 9px 9px; border: 0; border-radius: 5px; text-align: left; background: transparent; cursor: pointer; color: #fff; font-family: inherit; transition: background .12s ease, box-shadow .12s ease; } #boot-root .tile:hover, #boot-root .tile:focus-visible { outline: none; background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10) 40%, rgba(255,255,255,.16)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 2px 10px rgba(0,0,0,.22); } #boot-root .avatar { width: 52px; height: 52px; border-radius: 4px; display: block; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.4); object-fit: cover; background: #2a55a8; } #boot-root .tile .who { display: grid; gap: 2px; } #boot-root .tile .who b { font-size: 17px; font-weight: 400; text-shadow: 0 1px 2px rgba(0,0,0,.45); } #boot-root .tile .who small { font-size: 11px; color: #d3e5ff; } #boot-root .bottom-in { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; } #boot-root .turnoff { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 8px; color: #fff; font-size: 14px; cursor: pointer; border-radius: 4px; font-family: inherit; } #boot-root .turnoff:hover { background: rgba(255,255,255,.14); } #boot-root .turnoff .po { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; background: linear-gradient(180deg, #e0603c, #b8371c); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.4); } #boot-root .foot-note { color: #cfe0f7; font-size: 11px; line-height: 1.5; text-align: right; } /* ---- the XP dialog the Telegram login opens into ---- */ /* Note the class is .bwin, not .window: XP.css claims `.window` and so does Webamp's own markup, and that collision has already cost a round-trip. */ #boot-root .modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none; place-items: center; z-index: 9500; } #boot-root .modal.show { display: grid; } #boot-root .bwin { width: 400px; background: #ece9d8; border: 1px solid #0831d9; border-radius: 8px 8px 0 0; box-shadow: 0 10px 34px rgba(0,0,0,.5); overflow: hidden; font-size: 12px; color: #000; } #boot-root .bwin .tb { background: linear-gradient(180deg, #0058ee 0%, #3a93ff 8%, #0855dd 40%, #0046d5 88%, #0032b0 100%); color: #fff; font-weight: 700; padding: 4px 8px; display: flex; justify-content: space-between; align-items: center; text-shadow: 1px 1px 1px rgba(0,0,0,.4); /* .title-bar in XP.css is a fixed 21px with no wrap guard — a long title renders outside the window. Guard it here too. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The ✕ glyph does not sit on the centre of its own em-box, so `line-height: 1` on a 16px button left it visibly high and to the left. Centre it by layout instead of trusting the font's metrics. */ #boot-root .bwin .tb button { background: #d64d3a; color: #fff; border: 1px solid #fff; border-radius: 3px; width: 18px; height: 16px; font-size: 11px; line-height: 1; cursor: pointer; flex: none; padding: 0; display: grid; place-items: center; font-family: inherit; } #boot-root .bwin .bd { padding: 16px; display: grid; gap: 12px; } #boot-root .bwin .bd p { margin: 0; line-height: 1.55; } #boot-root .bwin .row { display: flex; justify-content: flex-end; gap: 8px; } #boot-root .bwin .row button { font-family: inherit; font-size: 12px; padding: 4px 14px; border-radius: 3px; border: 1px solid #7f9db9; background: linear-gradient(180deg, #fff, #ecebe5 45%, #dedbd2); cursor: pointer; } #boot-root .bwin .row button[disabled] { color: #888; cursor: default; } #boot-root .bwin .link { display: block; word-break: break-all; font-size: 11px; color: #00309c; background: #fff; border: 1px solid #7f9db9; padding: 6px; text-decoration: none; } #boot-root .bwin .waiting { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #333; } #boot-root .bwin .spin { width: 12px; height: 12px; border: 2px solid #b6b6a8; border-top-color: #0855dd; border-radius: 50%; animation: boot-spin .8s linear infinite; } @keyframes boot-spin { to { transform: rotate(360deg) } } #boot-root .bwin .bad { color: #9b1c1c; } /* Errors must be visible in the UI, never only in the console — the user cannot see a console and neither can a headless screenshot. */ #boot-err { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #7f1d1d; color: #fff; font: 12px/1.5 monospace; padding: 8px 12px; } /* On a phone the welcome screen stacks: the XP two-column split does not fit, and the boot itself is skipped entirely (see boot.js). */ @media (max-width: 700px) { #boot-root .welcome-body { grid-template-columns: 1fr; gap: 26px; padding: 0 20px; } #boot-root .divider { display: none; } #boot-root .welcome-left { justify-self: center; gap: 14px; } #boot-root .welcome-left .logo-ph { width: 60px; height: 60px; } #boot-root .brand-lockup .name { font-size: 26px; } #boot-root .accounts { width: 100%; justify-self: center; } #boot-root .foot-note { display: none; } #welcome-screen { grid-template-rows: 54px 1fr 64px; } }