/* =========================================================== Wop — shared styles Theme is controlled by [data-theme] on the element. =========================================================== */ :root, [data-theme="wop-dark"] { --bg: #0a0e16; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #122033 0%, #0a0e16 60%); --surface: #131a28; --surface-2: #0f1623; --surface-3: #1b2434; --border: #1f2a3c; --text: #eef2f8; --text-muted: #8b97a8; --accent: #1fb4f0; --accent-hover: #38c0f5; --accent-contrast: #ffffff; --danger: #ef4444; --online: #22c55e; --bubble-me: #1fb4f0; --bubble-me-text: #ffffff; --bubble-them: #1b2434; --bubble-them-text: #eef2f8; } [data-theme="midnight-blue"] { --bg: #0b1020; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #1a2350 0%, #0b1020 60%); --surface: #141c39; --surface-2: #10172e; --surface-3: #1d274a; --border: #28335c; --text: #eef1fb; --text-muted: #95a0c5; --accent: #6366f1; --accent-hover: #7c7ef5; --accent-contrast: #ffffff; --danger: #f05252; --online: #34d399; --bubble-me: #6366f1; --bubble-me-text: #ffffff; --bubble-them: #1d274a; --bubble-them-text: #eef1fb; } [data-theme="amoled"] { --bg: #000000; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #0a0a0a 0%, #000000 60%); --surface: #0a0a0a; --surface-2: #050505; --surface-3: #141414; --border: #1c1c1c; --text: #f5f5f5; --text-muted: #888888; --accent: #1fb4f0; --accent-hover: #38c0f5; --accent-contrast: #ffffff; --danger: #ef4444; --online: #22c55e; --bubble-me: #1fb4f0; --bubble-me-text: #000000; --bubble-them: #141414; --bubble-them-text: #f5f5f5; } [data-theme="light"] { --bg: #f3f6fb; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #e3edfa 0%, #f3f6fb 60%); --surface: #ffffff; --surface-2: #eef2f8; --surface-3: #e6ecf5; --border: #d6deea; --text: #0f1623; --text-muted: #5a6678; --accent: #1aa6e8; --accent-hover: #1490cc; --accent-contrast: #ffffff; --danger: #dc2626; --online: #16a34a; --bubble-me: #1aa6e8; --bubble-me-text: #ffffff; --bubble-them: #e6ecf5; --bubble-them-text: #0f1623; } [data-theme="sunset"] { --bg: #1a0f16; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #3a1726 0%, #1a0f16 60%); --surface: #241420; --surface-2: #1c0f18; --surface-3: #321a2a; --border: #3d2231; --text: #fbeef3; --text-muted: #c79bad; --accent: #ff7a6b; --accent-hover: #ff9385; --accent-contrast: #2a0f12; --danger: #ef4444; --online: #f59e0b; --bubble-me: #ff7a6b; --bubble-me-text: #2a0f12; --bubble-them: #321a2a; --bubble-them-text: #fbeef3; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* announcement banner + troll shake */ .announce-banner { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); border-bottom: 1px solid var(--border); color: var(--text); padding: 9px 18px; font-size: 14px; font-weight: 600; } .announce-banner .ann-close { margin-left: auto; background: transparent; border: none; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; } @keyframes wop-shake { 0%,100% { transform: translate(0,0); } 10%,30%,50%,70%,90% { transform: translate(-8px,4px) rotate(-1deg); } 20%,40%,60%,80% { transform: translate(8px,-4px) rotate(1deg); } } body.shake { animation: wop-shake .5s ease-in-out 2; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } /* ---------- Brand / logo ---------- */ .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; } .brand .logo { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; } .brand .logo svg { width: 100%; height: 100%; } .brand .logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand .name { font-size: 22px; letter-spacing: -0.5px; } .brand .badge { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface-3); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; margin-left: 8px; } /* ---------- Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 12px; padding: 12px 20px; font-size: 15px; font-weight: 700; color: var(--text); background: var(--surface-3); transition: background .18s ease, transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, opacity .15s; } .btn:hover { background: var(--border); transform: translateY(-1px); } .btn:active { transform: translateY(1px) scale(.985); } .btn.primary { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent); } .btn.primary:hover { background: var(--accent-hover); box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--accent) 70%, transparent); } .btn.ghost { background: transparent; box-shadow: none; } .btn.ghost:hover { background: var(--surface-3); } .btn.danger { background: var(--danger); color: #fff; box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--danger) 60%, transparent); } .btn.block { width: 100%; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } /* Loading state — swaps label for a spinner without resizing the button */ .btn.loading { color: transparent !important; pointer-events: none; } .btn.loading > * { opacity: 0; } .btn.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: var(--accent-contrast); border-radius: 50%; animation: wop-spin .6s linear infinite; color: var(--accent-contrast); } .btn:not(.primary):not(.danger).loading::after { border-top-color: var(--text); } @keyframes wop-spin { to { transform: rotate(360deg); } } /* ---------- Inputs ---------- */ .field { margin-bottom: 18px; } .field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .input, textarea.input { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); padding: 13px 15px; font-size: 15px; outline: none; transition: border-color .15s; } .input:focus, textarea.input:focus { border-color: var(--accent); } .input::placeholder { color: var(--text-muted); } textarea.input { resize: vertical; min-height: 80px; } /* =========================================================== Landing page =========================================================== */ .nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; background: rgba(10,14,22,.6); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav .nav-actions { display: flex; align-items: center; gap: 18px; } .nav .link { color: var(--text-muted); font-weight: 600; } .nav .link:hover { color: var(--text); text-decoration: none; } .hero { text-align: center; padding: 80px 24px 40px; max-width: 880px; margin: 0 auto; } .pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding: 7px 16px; border-radius: 999px; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .hero h1 { font-size: clamp(44px, 8vw, 88px); line-height: 1.02; font-weight: 800; letter-spacing: -2px; margin: 28px 0 0; } .hero h1 .accent { color: var(--accent); } .hero p { font-size: 19px; color: var(--text-muted); margin: 24px auto 0; max-width: 560px; line-height: 1.5; } .hero-actions { display: flex; gap: 14px; justify-content: center; margin-top: 34px; } .preview { max-width: 920px; margin: 30px auto 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); box-shadow: 0 40px 120px rgba(0,0,0,.5); } .preview .titlebar { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .preview .titlebar i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .preview .titlebar i:nth-child(1){ background: #ff5f57; } .preview .titlebar i:nth-child(2){ background: #febc2e; } .preview .titlebar i:nth-child(3){ background: #28c840; } .preview .pbody { display: grid; grid-template-columns: 200px 1fr; min-height: 240px; } .preview .plist { border-right: 1px solid var(--border); padding: 14px; } .preview .prow { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--text-muted); } .preview .prow.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); } .preview .pav { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .preview .pchat { padding: 22px; display: flex; flex-direction: column; gap: 14px; } .preview .pmsg { max-width: 70%; padding: 10px 14px; border-radius: 14px; font-size: 14px; } .preview .pmsg.them { background: var(--bubble-them); color: var(--bubble-them-text); align-self: flex-start; } .preview .pmsg.me { background: var(--bubble-me); color: var(--bubble-me-text); align-self: flex-end; } .section { padding: 90px 24px; } .section .eyebrow { text-align: center; color: var(--accent); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; font-size: 13px; } .section h2 { text-align: center; font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -1px; margin: 16px 0 0; } .section .sub { text-align: center; color: var(--text-muted); margin: 18px auto 0; max-width: 560px; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 56px auto 0; } .feature { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 28px; } .feature .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .feature h3 { margin: 0 0 8px; font-size: 19px; } .feature p { margin: 0; color: var(--text-muted); line-height: 1.55; font-size: 15px; } .stats { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin: 0 auto; padding: 60px 24px; gap: 24px; text-align: center; } .stats .num { font-size: clamp(36px, 6vw, 60px); font-weight: 800; color: var(--accent); letter-spacing: -1px; } .stats .lbl { color: var(--text-muted); margin-top: 6px; } .cta { text-align: center; padding: 110px 24px; } .cta h2 { font-size: clamp(34px, 6vw, 58px); font-weight: 800; letter-spacing: -1px; } .cta p { color: var(--text-muted); margin: 18px auto 30px; max-width: 460px; } .footer { border-top: 1px solid var(--border); padding: 26px 40px; display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: 14px; gap: 16px; flex-wrap: wrap; } /* =========================================================== Auth page =========================================================== */ .auth-wrap { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; } .auth-head { text-align: center; margin-bottom: 26px; } .auth-head .logo-lg { width: 64px; height: 64px; margin: 0 auto 14px; } .auth-head h1 { margin: 0; font-size: 30px; font-weight: 800; } .auth-head p { margin: 8px 0 0; color: var(--text-muted); } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px; } .tabs { display: flex; background: var(--surface-2); border-radius: 12px; padding: 5px; margin-bottom: 22px; } .tabs button { flex: 1; border: none; background: transparent; color: var(--text-muted); font-weight: 700; padding: 10px; border-radius: 9px; } .tabs button.active { background: var(--surface-3); color: var(--text); } .auth-error { background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); padding: 11px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; display: none; } .auth-error.show { display: block; } .back-home { text-align: center; margin-top: 22px; } /* =========================================================== App shell =========================================================== */ .app { display: flex; flex-direction: column; height: 100vh; } .topbar { position: relative; display: flex; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .topbar .status-chip { flex: 0 0 auto; } /* don't let it stretch */ .topbar .brand { position: absolute; left: 50%; transform: translateX(-50%); } .topbar .tb-spacer { display: none; } .topbar .status-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-3); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; } .topbar .status-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--online); } .icon-btn { width: 38px; height: 38px; border-radius: 10px; border: none; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { background: var(--surface-3); color: var(--text); } .app-body { flex: 1; display: flex; min-height: 0; } /* Sidebar */ .sidebar { width: 290px; border-right: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; min-height: 0; } .sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 10px; } .sidebar-head h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 0; } .sidebar-head .actions { display: flex; gap: 4px; } .search-box { padding: 0 14px; margin-bottom: 12px; position: relative; } .search-box .ico { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: inline-flex; pointer-events: none; } .search-box input { width: 100%; border: 1px solid var(--border); background: var(--surface-3); color: var(--text); border-radius: 10px; padding: 10px 12px 10px 38px; outline: none; transition: border-color .15s ease; } .search-box input::placeholder { color: var(--text-muted); } .search-box input:focus { border-color: var(--accent); } /* Keep autofilled fields on-theme — browsers otherwise force a pale/orange box that clashes with the dark UI. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset; caret-color: var(--text); transition: background-color 9999s ease-in-out 0s; } .search-box input:-webkit-autofill, .search-box input:-webkit-autofill:hover, .search-box input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface-3) inset; } .requests { padding: 4px 10px 8px; } .requests .req-title { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 6px; } .req-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; } .req-item .req-actions { margin-left: auto; display: flex; gap: 6px; } .req-item .mini { width: 30px; height: 30px; border-radius: 8px; border: none; display: inline-flex; align-items: center; justify-content: center; } .req-item .mini.ok { background: var(--accent); color: var(--accent-contrast); } .req-item .mini.no { background: var(--surface-3); color: var(--text-muted); } .friends-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 10px 18px 6px; } .friend-list { flex: 1; overflow-y: auto; padding: 0 10px; min-height: 0; } .friend { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 12px; cursor: pointer; } .friend:hover { background: var(--surface-3); } .friend.active { background: var(--surface-3); } .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; overflow: hidden; position: relative; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar .presence { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--text-muted); border: 2px solid var(--surface-2); } .avatar .presence.online { background: var(--online); } .friend .meta { min-width: 0; flex: 1; } .friend .meta .nm { font-weight: 700; font-size: 15px; } .friend .meta .sb { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .unread-badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface-2); animation: wop-pop .22s cubic-bezier(.34,1.56,.64,1) both; } @keyframes wop-pop { from { transform: scale(0); opacity: .4; } to { transform: scale(1); opacity: 1; } } .empty-hint { color: var(--text-muted); font-size: 13px; padding: 14px 18px; line-height: 1.5; } /* user footer */ .user-footer { border-top: 1px solid var(--border); padding: 10px; display: flex; align-items: center; gap: 10px; position: relative; } .user-footer .meta { min-width: 0; } .user-footer .meta .nm { font-weight: 700; font-size: 14px; } .user-footer .meta .sb { font-size: 12px; color: var(--text-muted); } .user-footer .gear { margin-left: auto; } .user-menu { position: absolute; left: 10px; right: 10px; bottom: 64px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.5); display: none; } .user-menu.show { display: block; } .user-menu button { width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: none; color: var(--text); padding: 10px 12px; border-radius: 9px; font-size: 14px; text-align: left; } .user-menu button:hover { background: var(--surface-3); } .user-menu button.danger { color: var(--danger); } /* Chat main */ .chat { flex: 1; display: flex; flex-direction: column; min-width: 0; } .chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); } .chat-head .menu-toggle { display: none; } .chat-head .nm { font-weight: 700; } .chat-head .sb { font-size: 12px; color: var(--text-muted); } .chat-head .right { margin-left: auto; display: flex; gap: 6px; } .messages { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 0; } .msg { display: flex; gap: 11px; max-width: 75%; } .msg .body .top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } .msg .body .nm { font-weight: 700; font-size: 14px; } .msg .body .ts { font-size: 11px; color: var(--text-muted); } .msg .body .txt { line-height: 1.45; word-wrap: break-word; } .msg.them { align-self: flex-start; } .msg.me { align-self: flex-end; flex-direction: row-reverse; } .msg.me .body { text-align: right; } .msg.me .body .top { flex-direction: row-reverse; } .bubble { display: inline-block; padding: 9px 14px; border-radius: 14px; } .msg.them .bubble { background: var(--bubble-them); color: var(--bubble-them-text); border-top-left-radius: 4px; } .msg.me .bubble { background: var(--bubble-me); color: var(--bubble-me-text); border-top-right-radius: 4px; } .composer { border-top: 1px solid var(--border); padding: 14px 18px; display: flex; gap: 10px; align-items: flex-end; } .composer textarea { flex: 1; resize: none; max-height: 140px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 14px; padding: 13px 15px; font-size: 15px; outline: none; font-family: inherit; } .composer textarea:focus { border-color: var(--accent); } .composer .send { width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: var(--accent-contrast); border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .composer .send:disabled { opacity: .5; } .welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); padding: 30px; } .welcome .big-ico { width: 84px; height: 84px; border-radius: 24px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .welcome h2 { color: var(--text); margin: 0 0 8px; } .welcome p { margin: 0; max-width: 320px; line-height: 1.5; } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 60; padding: 20px; } .modal-overlay.show { display: flex; } .modal { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px; } .modal h3 { margin: 0 0 6px; font-size: 20px; } .modal .sub { color: var(--text-muted); margin: 0 0 18px; font-size: 14px; } .modal .close { position: relative; float: right; background: transparent; border: none; color: var(--text-muted); font-size: 20px; line-height: 1; } .toast-msg { font-size: 13px; margin-top: 10px; min-height: 18px; } .toast-msg.ok { color: var(--online); } .toast-msg.err { color: var(--danger); } /* ---------- Settings ---------- */ .settings { display: flex; height: 100vh; } .settings-side { width: 250px; border-right: 1px solid var(--border); background: var(--surface-2); padding: 18px; } .settings-side .grp { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 8px; } .settings-side button { width: 100%; text-align: left; background: transparent; border: none; color: var(--text-muted); padding: 11px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; } .settings-side button:hover { background: var(--surface-3); color: var(--text); } .settings-side button.active { background: var(--surface-3); color: var(--text); } .settings-side button.danger { color: var(--danger); } .settings-main { flex: 1; overflow-y: auto; padding: 40px 48px; } .settings-main h1 { margin: 0 0 6px; font-size: 26px; } .settings-main .lead { color: var(--text-muted); margin: 0 0 28px; } .panel { display: none; } .panel.active { display: block; } .card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 24px; max-width: 720px; } .theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 720px; } .theme-card { background: var(--surface-2); border: 2px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer; } .theme-card.active { border-color: var(--accent); } .theme-swatches { display: flex; gap: 8px; margin-bottom: 12px; } .theme-swatches span { width: 100%; height: 44px; border-radius: 8px; border: 1px solid rgba(255,255,255,.06); } .theme-card .tname { font-weight: 700; font-size: 14px; } .theme-card .tactive { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--accent-contrast); background: var(--accent); padding: 2px 8px; border-radius: 999px; } .beta-note { margin-top: 24px; background: color-mix(in srgb, #f59e0b 14%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent); color: #f59e0b; padding: 13px 16px; border-radius: 12px; font-size: 14px; max-width: 720px; } .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--border); } .toggle-row:last-child { border-bottom: none; } .switch { position: relative; width: 46px; height: 26px; } .switch input { display: none; } .switch .track { position: absolute; inset: 0; background: var(--surface-3); border-radius: 999px; transition: background .15s; } .switch .thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .15s; } .switch input:checked + .track { background: var(--accent); } .switch input:checked + .track + .thumb { transform: translateX(20px); } /* ---------- Video call ---------- */ .call { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; z-index: 80; } .call-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; } .vtile { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .vtile video { width: 100%; height: 100%; object-fit: cover; } .vtile .tag { position: absolute; left: 14px; bottom: 14px; background: rgba(0,0,0,.55); color: #fff; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; } .vtile .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--text-muted); } .call-controls { display: flex; gap: 16px; align-items: center; justify-content: center; padding: 22px; } .cbtn { width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--surface-3); color: var(--text); display: flex; align-items: center; justify-content: center; } .cbtn:hover { background: var(--border); } .cbtn.off { background: var(--surface); color: var(--danger); } .cbtn.hang { background: var(--danger); color: #fff; } .call-incoming { position: fixed; right: 20px; bottom: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; z-index: 90; box-shadow: 0 18px 50px rgba(0,0,0,.5); display: none; min-width: 280px; } .call-incoming.show { display: block; } .call-incoming .ci-actions { display: flex; gap: 10px; margin-top: 14px; } /* ---------- Admin ---------- */ .admin-wrap { max-width: 1100px; margin: 0 auto; padding: 30px 24px 60px; } .admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; } .stat-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; } .stat-card .n { font-size: 34px; font-weight: 800; color: var(--accent); } .stat-card .l { color: var(--text-muted); font-size: 14px; margin-top: 4px; } .table { width: 100%; border-collapse: collapse; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .table th, .table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 14px; } .table th { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .table tr:last-child td { border-bottom: none; } .tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .tag.admin { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .tag.banned { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); } .tag.ok { background: color-mix(in srgb, var(--online) 18%, transparent); color: var(--online); } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; } .btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 9px; } .admin-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; } .admin-tabs button { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); padding: 9px 16px; border-radius: 10px; font-weight: 600; } .admin-tabs button.active { background: var(--surface-3); color: var(--text); } .loading { padding: 40px; text-align: center; color: var(--text-muted); } /* =========================================================== Animations & motion layer =========================================================== */ @keyframes wop-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes wop-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wop-scale-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes wop-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes wop-pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes wop-shimmer { 0% { background-position: -480px 0; } 100% { background-position: 480px 0; } } @keyframes wop-live { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.85); } } /* page-level entrances */ .hero { animation: wop-fade-up .6s ease both; } .hero .preview { animation: wop-fade-up .8s .15s ease both; } .feature { animation: wop-fade-up .5s ease both; } .feature:nth-child(2){ animation-delay: .05s; } .feature:nth-child(3){ animation-delay: .1s; } .feature:nth-child(4){ animation-delay: .15s; } .feature:nth-child(5){ animation-delay: .2s; } .feature:nth-child(6){ animation-delay: .25s; } .feature { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); } .auth-card { animation: wop-scale-in .4s ease both; } /* view + panel transitions */ .panel.active { animation: wop-fade-up .35s ease both; } .panel2.active { animation: wop-fade-up .3s ease both; } .settings-main h1, .adm-main h1 { animation: wop-fade-up .35s ease both; } /* friend list + requests */ .friend { transition: background .15s ease, transform .12s ease; } .friend:hover { transform: translateX(2px); } .friend, .req-item { animation: wop-fade-up .28s ease both; } .req-item .mini { transition: transform .12s ease, background .15s ease, filter .15s; } .req-item .mini:hover { transform: scale(1.12); } .req-item .mini:active { transform: scale(.92); } /* messages */ .msg { animation: wop-fade-up .26s ease both; } .composer .send { transition: transform .12s ease, background .15s ease, opacity .15s; } .composer .send:not(:disabled):hover { transform: translateY(-1px) scale(1.04); } .composer .send:not(:disabled):active { transform: scale(.92); } /* icon buttons */ .icon-btn { transition: background .15s ease, color .15s ease, transform .12s ease; } .icon-btn:hover { transform: translateY(-1px); } .icon-btn:active { transform: scale(.9); } /* modal */ .modal-overlay { animation: wop-fade-in .2s ease; } .modal-overlay.show .modal { animation: wop-scale-in .28s cubic-bezier(.34,1.56,.64,1) both; } /* toast text */ .toast-msg { transition: opacity .2s ease; } .toast-msg.ok, .toast-msg.err { animation: wop-fade-up .25s ease both; } /* theme cards */ .theme-card { transition: border-color .18s ease, transform .15s ease, box-shadow .18s ease; } .theme-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.7); } /* nav cta */ .nav .btn.primary { transition: background .18s ease, transform .12s ease, box-shadow .18s ease; } /* skeleton shimmer for loading lists */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 480px 100%; animation: wop-shimmer 1.3s linear infinite; border-radius: 10px; } /* =========================================================== Call: top bar, live dot, mute badge, minimized PiP =========================================================== */ .call { animation: wop-fade-in .25s ease; } .call-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .call-title { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; } .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: wop-live 1.4s ease-in-out infinite; } .call-controls .cbtn { transition: background .15s ease, transform .12s ease, color .15s ease; } .call-controls .cbtn:hover { transform: translateY(-2px); } .call-controls .cbtn:active { transform: scale(.9); } .cbtn.hang:hover { background: var(--danger); filter: brightness(1.12); } .muted-badge { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--danger) 88%, #000); color: #fff; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.4); animation: wop-fade-up .2s ease both; } /* incoming call toast */ .call-incoming { animation: none; } .call-incoming.show { animation: wop-slide-up .35s cubic-bezier(.34,1.56,.64,1) both; } .call-incoming .avatar { animation: wop-pulse-ring 1.6s ease-out infinite; } /* minimized floating call window */ .call-pip { position: fixed; right: 20px; bottom: 20px; z-index: 85; width: 280px; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 22px 60px rgba(0,0,0,.55); animation: wop-slide-up .3s cubic-bezier(.34,1.56,.64,1) both; } .call-pip video { width: 100%; height: 170px; object-fit: cover; background: #000; display: block; } .pip-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .pip-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pip-controls { margin-left: auto; display: flex; gap: 6px; } .cbtn.sm { width: 34px; height: 34px; border-radius: 10px; } .cbtn.sm svg { width: 16px; height: 16px; } /* =========================================================== Admin: live presence indicators =========================================================== */ .live-pills { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .lp { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); } .lp svg { width: 12px; height: 12px; } .lp.on { color: var(--online); background: color-mix(in srgb, var(--online) 16%, transparent); border-color: color-mix(in srgb, var(--online) 35%, transparent); } .lp.cam.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .lp.live { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .lp .live-dot { width: 7px; height: 7px; } /* spectate consent prompt reuses .call-incoming look */ .spectate-ask .avatar { animation: wop-pulse-ring 1.6s ease-out infinite; } /* =========================================================== Landing: changelog + roadmap =========================================================== */ .timeline { max-width: 760px; margin: 48px auto 0; position: relative; padding-left: 28px; } .timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); } .tl-item { position: relative; padding: 0 0 30px 6px; animation: wop-fade-up .5s ease both; } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: -28px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .tl-item .tl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tl-item .tl-ver { font-weight: 800; font-size: 17px; } .tl-item .tl-date { font-size: 12px; color: var(--text-muted); } .tl-item .tl-tag { font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; } .tl-tag.new { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); } .tl-tag.fix { color: var(--online); background: color-mix(in srgb, var(--online) 16%, transparent); } .tl-item ul { margin: 12px 0 0; padding-left: 18px; color: var(--text-muted); line-height: 1.7; } .tl-item ul li::marker { color: var(--accent); } .roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 50px auto 0; } .road-card { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 26px; overflow: hidden; transition: transform .2s ease, border-color .2s ease; animation: wop-fade-up .5s ease both; } .road-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .road-card .ico { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 16%, var(--surface-3)); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .road-card h3 { margin: 0 0 8px; font-size: 19px; display: flex; align-items: center; gap: 8px; } .road-card p { margin: 0; color: var(--text-muted); line-height: 1.55; font-size: 15px; } .road-badge { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, #f5a524 18%, transparent); color: #f5a524; } .road-badge.soon { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .road-badge.planned { background: var(--surface-3); color: var(--text-muted); } /* =========================================================== Clickable profile card (sidebar footer) =========================================================== */ .me-card { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 8px; border-radius: 10px; cursor: pointer; transition: background .15s ease, transform .12s ease; } .me-card:hover { background: var(--surface-3); } .me-card:active { transform: scale(.985); } .me-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* =========================================================== Group chats (sidebar list + create modal) =========================================================== */ .group-list { padding: 0 10px; overflow-y: auto; max-height: 32vh; flex-shrink: 0; } .group-av { color: #fff; } .group-av svg { width: 18px; height: 18px; } .grp-pick-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 16px 0 8px; } .grp-pick { max-height: 230px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 6px; } .grp-pick-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; cursor: pointer; transition: background .12s ease; } .grp-pick-row:hover { background: var(--surface-3); } .grp-pick-row .gp-name { flex: 1; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grp-pick-row input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } /* =========================================================== Profile view modal =========================================================== */ .profile-modal { padding: 0; overflow: hidden; max-width: 440px; } .profile-modal .close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: flex; align-items: center; justify-content: center; } .profile-modal .close:hover { background: rgba(0,0,0,.65); } .pf-banner { height: 124px; background-size: cover; background-position: center; } .pf-top { padding: 0 24px; margin-top: -46px; } .pf-avatar { width: 92px; height: 92px; font-size: 36px; border-radius: 50%; border: 4px solid var(--surface); box-shadow: 0 8px 20px rgba(0,0,0,.4); } .pf-body { padding: 12px 24px 24px; } .pf-name { font-size: 23px; font-weight: 800; letter-spacing: -.3px; } .pf-handle { color: var(--text-muted); margin-top: 2px; } .pf-bio { margin-top: 14px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .pf-actions { margin-top: 20px; } /* =========================================================== Settings: banner + gradient pickers =========================================================== */ .sec-title { margin: 34px 0 4px; font-size: 19px; font-weight: 800; } .banner-preview { height: 110px; border-radius: 12px; border: 1px solid var(--border); background-size: cover; background-position: center; } .gradient-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px; max-width: 560px; } .grad-card { height: 46px; border-radius: 10px; border: 2px solid var(--border); cursor: pointer; position: relative; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; } .grad-card:hover { transform: translateY(-2px); } .grad-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); } .grad-none::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(to top left, transparent 46%, var(--danger) 46%, var(--danger) 54%, transparent 54%); } /* extra micro-animations */ .cbtn.sm { transition: background .15s ease, transform .12s ease, color .15s ease; } .cbtn.sm:hover { transform: translateY(-1px) scale(1.05); } .cbtn.sm:active { transform: scale(.9); } .settings-side button { transition: background .15s ease, color .15s ease, transform .12s ease; } .settings-side button:hover { transform: translateX(2px); } .toggle-row { transition: background .15s ease; border-radius: 8px; } .toggle-row:hover { background: color-mix(in srgb, var(--surface-3) 50%, transparent); } .field .input, .field textarea.input { transition: border-color .15s ease, box-shadow .15s ease; } .field .input:focus, .field textarea.input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .tabs button { transition: background .15s ease, color .15s ease; } /* =========================================================== DESKTOP POLISH LAYER Tasteful, theme-agnostic refinements that make Wop read as a native desktop app rather than a web page. =========================================================== */ :root { --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --shadow-1: 0 1px 2px rgba(0,0,0,.22); --shadow-2: 0 8px 24px -8px rgba(0,0,0,.45); --shadow-3: 0 24px 60px -16px rgba(0,0,0,.6); } /* Thin, rounded "native" scrollbars everywhere */ * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--border); background-clip: padding-box; } ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); } /* Native feel: UI chrome isn't selectable or draggable; title bar IS draggable (matters once wrapped in Electron/Tauri, harmless on the web). */ .topbar, .sidebar-head, .friends-label, .req-title, .settings-side, .adm-side, .chat-head, .nav, .footer, .user-footer, .badge, .icon-btn, .btn, .cbtn, .tabs, .settings-side button, .nav-item, .status-chip, .req-actions { user-select: none; } .messages, .input, textarea, input, .pf-bio, .bubble, .amsg, .txt { user-select: text; } img, svg, .avatar, .logo, .icon-btn, .cbtn { -webkit-user-drag: none; } .topbar { -webkit-app-region: drag; } .topbar .status-chip, .topbar .brand, .topbar button, .topbar a { -webkit-app-region: no-drag; } body { text-rendering: optimizeLegibility; } /* Hairline separators instead of heavy borders → cleaner panel seams */ .sidebar { border-right: none; box-shadow: 1px 0 0 0 var(--border); } .topbar { border-bottom: none; box-shadow: 0 1px 0 0 var(--border); } .chat-head { border-bottom: none; box-shadow: 0 1px 0 0 var(--border); } .composer { border-top: none; box-shadow: 0 -1px 0 0 var(--border); } .settings-side { border-right: none; box-shadow: 1px 0 0 0 var(--border); } .status-chip { box-shadow: var(--shadow-1); } /* Tighter, more uppercase-refined section labels */ .sidebar-head h2, .friends-label, .req-title, .settings-side .grp { letter-spacing: .12em; } /* Conversation rows: rounded, clear active state with an accent rail */ .friend { position: relative; border-radius: 10px; padding: 9px 10px; } .friend.active { background: color-mix(in srgb, var(--accent) 15%, var(--surface-3)); } .friend.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--accent); } /* Message bubbles: subtle depth + rounder */ .bubble { border-radius: 16px; padding: 9px 13px; box-shadow: var(--shadow-1); } .msg.them .bubble { border-top-left-radius: 5px; } .msg.me .bubble { border-top-right-radius: 5px; } /* Composer + send: elevated input */ .composer textarea { border-radius: 14px; box-shadow: var(--shadow-1); } .composer .send { box-shadow: 0 6px 16px -7px color-mix(in srgb, var(--accent) 75%, transparent); } /* Cards, modals, menus: consistent radii + soft elevation */ .card { border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } .modal { border-radius: var(--radius-xl); box-shadow: var(--shadow-3); } .user-menu { border-radius: var(--radius); box-shadow: var(--shadow-3); } .avatar { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); } /* Settings nav: filled pill active state */ .settings-side button.active { background: color-mix(in srgb, var(--accent) 16%, var(--surface-3)); } /* Unified accent focus ring across every input */ .input:focus, textarea.input:focus, .search-box input:focus, .adm-search:focus, .box input:focus, .box textarea:focus, .box select:focus, .composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } /* Headings a touch tighter */ .settings-main h1, .adm-head h1, .welcome h2 { letter-spacing: -.4px; } /* respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------- Responsive ---------- */ @media (max-width: 820px) { .roadmap { grid-template-columns: 1fr; } .nav-hide-sm { display: none; } .call-pip { right: 12px; bottom: 12px; width: calc(100vw - 24px); max-width: 340px; } .features { grid-template-columns: 1fr; } .stats .wrap { grid-template-columns: repeat(2, 1fr); } .nav { padding: 14px 18px; } .section { padding: 60px 18px; } .stat-cards { grid-template-columns: repeat(2, 1fr); } .theme-grid { grid-template-columns: repeat(2, 1fr); } .sidebar { position: absolute; z-index: 40; height: 100%; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.5); } .sidebar.open { transform: translateX(0); } .chat-head .menu-toggle { display: inline-flex; } .call-grid { grid-template-columns: 1fr; } .settings-side { width: 180px; padding: 12px; } .settings-main { padding: 24px 18px; } }