diff --git a/index.html b/index.html index 6e27c60..ecae0ff 100644 --- a/index.html +++ b/index.html @@ -66,7 +66,7 @@ -webkit-font-smoothing: antialiased; } - /* ── Background Video & Matrix Rain ─────────────────────────────────────── */ + /* ── Background Engine & Tactical CRT Layer ────────────────────────────── */ .video-bg { position: fixed; inset: 0; @@ -75,34 +75,55 @@ object-fit: cover; z-index: 0; pointer-events: none; - opacity: 0.55; + opacity: 0; + transition: opacity 0.5s ease; filter: contrast(1.15) brightness(0.88); } - #matrixCanvas { + #bgCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; - opacity: 0; - transition: opacity 0.6s ease; } - #matrixCanvas.active { - opacity: 0.35; - } - - .desktop-grid { + .crt-overlay { position: fixed; inset: 0; - background-image: - linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); - background-size: 36px 36px; + width: 100%; + height: 100%; pointer-events: none; - z-index: 1; + z-index: 2; + background: + radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.72) 100%), + repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0px, rgba(255, 255, 255, 0.012) 1px, transparent 1px, transparent 3px); + } + + /* Minimalist On-Screen HUD Notification Toast */ + .kat-toast { + position: fixed; + bottom: 48px; + left: 50%; + transform: translateX(-50%) translateY(8px); + background: rgba(10, 10, 14, 0.92); + border: 1px solid rgba(255, 255, 255, 0.35); + box-shadow: 0 0 20px rgba(255, 255, 255, 0.25); + color: #ffffff; + padding: 6px 16px; + font-size: 11px; + letter-spacing: 0.08em; + text-transform: uppercase; + z-index: 99999; + pointer-events: none; + opacity: 0; + transition: all 0.22s ease; + } + + .kat-toast.show { + opacity: 1; + transform: translateX(-50%) translateY(0); } /* ── Desktop Workspace ───────────────────────────────────────────────────── */ @@ -746,10 +767,11 @@ - + - -
+ + +