/* * boot-surface.css — disarto identity boot/landing/lock surface for Star OS. * * The first 60 seconds a stranger sees: the brand handshake before the OS loads. * Scoped entirely under .star-boot / .star-lock — zero leakage into OS chrome. * * DESIGN TOKENS (disarto identity, mirroring @mogos/starstyle disartoDark): * HULL — instrument-black canvas #0e1012 (warm, never pure #000) * FLAME — single ember accent #f5641e (Pixelflame brand anchor) * VOICE — Oxanium (retrofuturist wordmark) + IBM Plex Mono (terminal labels) * MOTION — GPU-safe only (transform/opacity), easeOutExpo deceleration * FOCUS — visible ember focus ring (#ff9d52), never a browser default * * Token-only — all component rules reference --disarto-* vars, no raw hex. * * (SBQ-N3-WEB-DISARTO) */ /* ── Disarto identity tokens ────────────────────────────────────────────────── */ /* * ADOPT THE --star-* SEMANTIC FLOOR. Each disarto token reads the static * `--star-*` floor (star-tokens.css, linked first in ) and falls back to * the disarto literal. So the boot surface re-skins WITH the OS theme the moment * the runtime per-theme `--star-*` injection lands, yet the disarto identity is * the guaranteed pre-JS floor (the floor's own `--star-accent` is the same * Pixelflame ember). This is what un-breaks the previously-unstyled ENTER button: * a bare token now always resolves. */ :root { --disarto-bg: var(--star-bg, #0e1012); --disarto-surface: var(--star-surface, #16191c); --disarto-surface-raised: var(--star-surface-raised, #1f2329); --disarto-text: var(--star-text, #f2f3f4); --disarto-muted: var(--star-text-muted, #9097a0); --disarto-accent: var(--star-accent, #f5641e); --disarto-accent-hover: var(--star-accent-hover, #ff8a3d); --disarto-accent-glow: rgba(245, 100, 30, 0.35); --disarto-border: var(--star-border, #2a2e35); --disarto-focus-ring: var(--star-focus-ring, #ff9d52); --disarto-font-display: var(--star-font-ui, 'Oxanium', 'Eurostile', system-ui, sans-serif); --disarto-font-mono: var(--star-font-mono, 'IBM Plex Mono', 'Cascadia Code', ui-monospace, monospace); --disarto-ease: var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)); --disarto-dur-fast: var(--star-dur-fast, 90ms); --disarto-dur-base: var(--star-dur-base, 160ms); --disarto-dur-slow: var(--star-dur-slow, 320ms); /* Star-family motion signature (Starport "Cold Press Settle"): reserved for the load-bearing state changes (boot→lock reveal, enter lift) so the flagship boot surface MOVES with the family signature. Terminal literal fallback so a standalone boot (no --star-* floor) still settles. */ --disarto-settle: var(--star-mo-settle-curve, cubic-bezier(0.22, 0.61, 0.36, 1)); --disarto-dur-settle: var(--star-mo-settle, 240ms); /* Star-family editorial hairline (Starport --rule-line) — the wordmark filament. */ --disarto-rule: var(--star-rule-line, rgba(245, 100, 30, 0.28)); } /* ── Boot curtain (full-screen overlay) ─────────────────────────────────────── */ .star-boot { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; /* Depth, not a flat void. A warm ember bloom held behind the wordmark + a soft corner vignette turn the instrument-charcoal canvas into a crafted surface (never a pure-black rectangle). All static paint over --disarto-bg, so it composites once — GPU-cheap, no per-frame cost. */ background: radial-gradient(110% 78% at 50% 40%, rgba(245, 100, 30, 0.08) 0%, rgba(245, 100, 30, 0) 44%), radial-gradient(140% 120% at 50% 46%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.42) 100%), var(--disarto-bg); color: var(--disarto-text); font-family: var(--disarto-font-display); opacity: 1; visibility: visible; /* Curtain reveal is load-bearing → the family Cold Press Settle decelerator. */ transition: opacity var(--disarto-dur-slow) var(--disarto-settle), visibility 0s linear var(--disarto-dur-slow); } .star-boot--hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* ── Wordmark — Oxanium display voice ───────────────────────────────────────── */ .star-boot__wordmark { font-size: clamp(28px, 5vw, 42px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--disarto-text); display: flex; align-items: center; gap: 0.5ch; } .star-boot__wordmark-flame { color: var(--disarto-accent); text-shadow: 0 0 20px var(--disarto-accent-glow); } /* ── Star-family editorial hairline — a centered filament between the wordmark and the motto (Starport civic-document rule-line register). ──────────────── */ .star-boot__motto::before { content: ""; display: block; width: 56px; height: 1px; margin: 0 auto 14px; background: var(--disarto-rule); } /* ── Brand motto — "Command your world" (Starosphere) ───────────────────────── */ .star-boot__motto { font-family: var(--disarto-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--disarto-muted); margin-top: 14px; /* The flame ember as a left rule, tying the motto to the wordmark accent. */ padding-left: 0.34em; } /* ── Mono-upper label — IBM Plex Mono terminal voice ────────────────────────── */ .star-boot__label { font-family: var(--disarto-font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--disarto-muted); margin-top: 12px; } /* ── Spinner — GPU-safe rotation ────────────────────────────────────────────── */ .star-boot__spinner { width: 28px; height: 28px; border: 2px solid var(--disarto-border); border-top-color: var(--disarto-accent); border-radius: 50%; margin-top: 32px; animation: star-boot-spin 800ms linear infinite; } @keyframes star-boot-spin { to { transform: rotate(360deg); } } /* ── Boot → lock transition (GPU-safe: opacity + transform only) ────────────── */ .star-boot__spinner, .star-boot__label--booting { /* boot→lock is a load-bearing state change → family Cold Press Settle. */ transition: opacity var(--disarto-dur-base) var(--disarto-settle), transform var(--disarto-dur-base) var(--disarto-settle); } .star-boot--lock .star-boot__spinner, .star-boot--lock .star-boot__label--booting { opacity: 0; transform: scale(0.8); pointer-events: none; } /* ── Lock screen surface ────────────────────────────────────────────────────── */ .star-lock { display: none; flex-direction: column; align-items: center; gap: 0; margin-top: 8px; opacity: 0; transform: translateY(8px); /* Lock surface arrival is load-bearing → family Cold Press Settle. */ transition: opacity var(--disarto-dur-slow) var(--disarto-settle) var(--disarto-dur-slow), transform var(--disarto-dur-slow) var(--disarto-settle) var(--disarto-dur-slow); } .star-boot--lock .star-lock { display: flex; opacity: 1; transform: translateY(0); } /* ── Enter button ───────────────────────────────────────────────────────────── */ .star-lock__enter { font-family: var(--disarto-font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--disarto-accent); background: transparent; border: 1px solid var(--disarto-accent); border-radius: 4px; padding: 12px 32px; cursor: pointer; transition: color var(--disarto-dur-fast) var(--disarto-ease), background-color var(--disarto-dur-fast) var(--disarto-ease), box-shadow var(--disarto-dur-fast) var(--disarto-ease), transform var(--disarto-dur-fast) var(--disarto-ease); } .star-lock__enter:hover { color: var(--disarto-bg); background-color: var(--disarto-accent); box-shadow: 0 0 24px var(--disarto-accent-glow); transform: scale(1.02); } .star-lock__enter:active { transform: scale(0.98); } /* ── Focus states (real, visible, branded) ──────────────────────────────────── */ .star-lock__enter:focus-visible { outline: 2px solid var(--disarto-focus-ring); outline-offset: 3px; border-radius: 4px; } /* Entrance: the button is `hidden` (display:none) until the JS reveals the lock phase; un-hiding plays this once. OPACITY-ONLY so it never fights the hover/ active transform (scale) — GPU-safe, no fill so hover transforms apply after. */ .star-lock__enter { animation: star-enter-in var(--disarto-dur-slow) var(--disarto-ease); } @keyframes star-enter-in { from { opacity: 0; } to { opacity: 1; } } /* ── Lock hint ──────────────────────────────────────────────────────────────── */ .star-lock__hint { font-family: var(--disarto-font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--disarto-muted); margin-top: 16px; } /* ── Version footer ─────────────────────────────────────────────────────────── */ .star-boot__version { position: absolute; bottom: 24px; font-family: var(--disarto-font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--disarto-muted); opacity: 0.5; } /* ── Reduced motion ─────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .star-boot, .star-boot__spinner, .star-lock, .star-lock__enter { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } }