body { background-color: #8b0000; background-image: linear-gradient(to right, #600 1px, transparent 1px), linear-gradient(to bottom, #600 1px, transparent 1px); background-size: 20px 20px; font-family: "Roboto", sans-serif; color: #333; transition: opacity 120ms ease, filter 120ms ease, background-color 180ms ease, background-image 180ms ease; } body.uc-after-hours { background-color: #090b0f; background-image: linear-gradient(to right, rgba(252, 211, 77, 0.20) 1px, transparent 1px), linear-gradient(to bottom, rgba(252, 211, 77, 0.20) 1px, transparent 1px); background-size: 20px 20px; } body.uc-route-leaving { opacity: 0.84; filter: saturate(0.95); } body.uc-route-enter { opacity: 0.9; transform: translateY(4px); } body.uc-route-enter.uc-route-enter-active { opacity: 1; transform: translateY(0); transition: opacity 140ms ease, transform 140ms ease; } .uc-shell-dock { position: fixed; right: 14px; bottom: 14px; z-index: 50; width: min(320px, calc(100vw - 16px)); background: rgba(20, 20, 26, 0.92); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); padding: 8px 10px; color: #fff; font-size: 11px; backdrop-filter: blur(4px); } .uc-shell-dock-row { display: flex; align-items: center; gap: 8px; min-height: 28px; } .uc-shell-dock-row + .uc-shell-dock-row { margin-top: 6px; } .uc-shell-dock-btn { border: 1px solid rgba(255, 255, 255, 0.18); background: #b22222; color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; cursor: pointer; white-space: nowrap; } .uc-shell-dock-btn-chat { background: #1f2937; } .uc-shell-dock-btn-min { background: #111827; padding: 4px 9px; line-height: 1; } .uc-shell-track, .uc-shell-chat-room { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fde68a; font-weight: 700; flex: 1; min-width: 0; } .uc-shell-unread { background: #111827; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 3px 8px; color: #fca5a5; font-weight: 800; white-space: nowrap; } .uc-shell-dock.is-minimized { display: none; } .uc-shell-dock-launcher { position: fixed; right: 14px; bottom: 14px; z-index: 51; display: none; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(20, 20, 26, 0.92); color: #fff; border-radius: 999px; padding: 8px 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); } .uc-shell-dock.is-minimized + .uc-shell-dock-launcher { display: inline-flex; } @media (max-width: 900px) { .uc-shell-dock { right: 8px; width: min(320px, calc(100vw - 16px)); bottom: 8px; } .uc-shell-dock-launcher { right: 8px; bottom: 8px; } } /* ── Large screen scaling ────────────────────────── */ @media (min-width: 1440px) { html { font-size: 17px; } } @media (min-width: 1920px) { html { font-size: 19px; } } @media (min-width: 2560px) { html { font-size: 22px; } } @media (min-width: 3840px) { html { font-size: 26px; } } /* Extend Tailwind .container for large / ultra-wide monitors */ @media (min-width: 1920px) { .container { max-width: 1800px; } } @media (min-width: 2560px) { .container { max-width: 2000px; } } @media (min-width: 3840px) { .container { max-width: 2200px; } } /* ─── FOUC guard + page transitions ──────────────────────────────────────── */ /* body stays visibility:hidden (set inline in ) until JS adds .uc-ready */ /* Prevent scroll-bar flash during slide */ html.uc-transitioning { overflow: hidden; } /* ── Leave animations (departing page slides away, 130ms) ── */ @keyframes uc-leave-left { to { transform: translateX(-100%); opacity: 0; } } @keyframes uc-leave-right { to { transform: translateX( 100%); opacity: 0; } } @keyframes uc-leave-up { to { transform: translateY(-100%); opacity: 0; } } @keyframes uc-leave-down { to { transform: translateY( 100%); opacity: 0; } } #uc-slide-layer.uc-leaving-left { animation: uc-leave-left 130ms cubic-bezier(.4,0,1,1) both; } #uc-slide-layer.uc-leaving-right { animation: uc-leave-right 130ms cubic-bezier(.4,0,1,1) both; } #uc-slide-layer.uc-leaving-up { animation: uc-leave-up 130ms cubic-bezier(.4,0,1,1) both; } #uc-slide-layer.uc-leaving-down { animation: uc-leave-down 130ms cubic-bezier(.4,0,1,1) both; } /* ── Enter animations (arriving page slides in, 300ms with spring) ── */ @keyframes uc-enter-from-right { from { transform: translateX( 100%); opacity: 0; } } @keyframes uc-enter-from-left { from { transform: translateX(-100%); opacity: 0; } } @keyframes uc-enter-from-bottom { from { transform: translateY( 100%); opacity: 0; } } @keyframes uc-enter-from-top { from { transform: translateY(-100%); opacity: 0; } } @keyframes uc-page-reveal { from { opacity: 0; } } #uc-slide-layer.uc-entering-from-right { animation: uc-enter-from-right 300ms cubic-bezier(.22,.68,0,1.2) both; } #uc-slide-layer.uc-entering-from-left { animation: uc-enter-from-left 300ms cubic-bezier(.22,.68,0,1.2) both; } #uc-slide-layer.uc-entering-from-bottom { animation: uc-enter-from-bottom 300ms cubic-bezier(.22,.68,0,1.2) both; } #uc-slide-layer.uc-entering-from-top { animation: uc-enter-from-top 300ms cubic-bezier(.22,.68,0,1.2) both; } #uc-slide-layer.uc-entering-fade { animation: uc-page-reveal 220ms ease-out both; }