/* «Універ тут?» — the page that looks and moves like Telegram itself. Values (colours, radii, curves, geometry) follow web.telegram.org/a; the phone's own theme overrides the colours through Telegram's themeParams. */ /* ---- tokens ------------------------------------------------------------- */ :root { --color-primary: #3390EC; --color-primary-shade: #4a95d6; --color-primary-tint: #3390ec1a; --color-background: #FFFFFF; --color-background-secondary: #EFEFF4; --color-background-secondary-accent: #E5E5EA; --color-background-own: #EEFFDE; --color-background-selected: #F4F4F5; --color-text: #000000; --color-text-secondary: #707579; --color-text-meta: #686c72; --color-text-meta-rgb: 104, 108, 114; --color-links: #3390EC; --color-own-links: #3390EC; --color-accent-own: #45AF54; --color-message-meta-own: #4FAE4EFF; --color-borders: #DADCE0; --color-dividers: #C8C6CC; --color-dividers-android: #E7E7E7; --color-chat-hover: #F4F4F5; --color-item-active: #EDEDED; --color-gray: #C4C9CC; --color-list-icon: #ABAFB1; --color-active: #00C73E; --color-green: #00C73E; --color-error: #e53935; --color-warning: #fb8c00; --color-placeholders: #a2acb4; --color-heart: #ff3c32; --color-default-shadow: #72727240; --color-light-shadow: #7272722B; --color-composer-button: #707579CC; --color-toast-background: #202020CC; --color-chat-username: #3C7EB0; --color-header: var(--color-background); --color-tabbar: var(--color-background); --color-bubble-in: #FFFFFF; --color-bubble-out-a: #EEFFDE; --color-bubble-out-b: #E1FFC7; --color-bubble-out: #E8FFD2; --action-message-bg: #4A8E3A8C; --wall-a: #bdcd8c; --wall-b: #8eba89; --wall-c: #83b28f; --wall-d: #c5d3b0; --pattern-intensity: .5; --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --font-family-rounded: "Nunito", "Roboto", "Helvetica Neue", sans-serif; --font-weight-semibold: 500; --font-weight-medium: 500; --border-radius-messages: .9375rem; --border-radius-messages-small: .375rem; --border-radius-default: 1rem; --border-radius-default-small: .625rem; --border-radius-modal: 2rem; --border-radius-button: 1rem; --shadow-pane: 0 1px 5px -1px rgba(0,0,0,.21); --shadow-footer: 0 1px 8px 1px rgba(0,0,0,.12); --shadow-island: 0 1px 4px 0 #0000000D; --header-height: 3.5rem; --tabbar-height: 3.125rem; --composer-height: 3rem; --composer-main: 2.5rem; --composer-pill-radius: 1.5rem; --composer-control-radius: 1.25rem; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --vh: 1vh; --layer-transition: 300ms cubic-bezier(.33, 1, .68, 1); --layer-transition-behind: 300ms cubic-bezier(.33, 1, .68, 1); --slide-transition: 300ms cubic-bezier(.25, 1, .5, 1); --select-transition: 200ms ease-out; --layer-blackout-opacity: .1; --message-text-size: 1rem; --composer-text-size: 1rem; } :root[data-theme="dark"] { --color-bubble-in: #212121; --color-bubble-out-a: #7C6CF5; --color-bubble-out-b: #5B7BFF; --color-bubble-out: #6B73F8; --color-primary: #3E88F7; --color-primary-shade: #2f74dc; --color-primary-tint: #3e88f726; --color-background: #1C1C1E; --color-background-secondary: #000000; --color-background-secondary-accent: #2C2C2E; --color-background-own: #3E5B8C; --color-background-selected: #2C2C2E; --color-text: #FFFFFF; --color-text-secondary: #8E8E93; --color-text-meta: #8E8E93; --color-text-meta-rgb: 142, 142, 147; --color-links: #5AA7FF; --color-own-links: #FFFFFF; --color-accent-own: #FFFFFF; --color-message-meta-own: #FFFFFF99; --color-borders: #3A3A3C; --color-dividers: #3A3A3C; --color-dividers-android: #2C2C2E; --color-chat-hover: #2C2C2E; --color-item-active: #2C2C2E; --color-gray: #636366; --color-list-icon: #8E8E93; --color-active: #3E88F7; --color-default-shadow: #1010109c; --color-light-shadow: #00000040; --color-composer-button: #AAAAAACC; --color-toast-background: #000000CC; --color-chat-username: #E9EEF4; --action-message-bg: #48576166; --wall-a: #0a1118; --wall-b: #0e171f; --wall-c: #121c26; --wall-d: #17222d; --pattern-intensity: 1.3; /* Telegram-dark: navy, not violet; the pattern shows */ } body.is-ios { --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif; --font-weight-semibold: 600; --border-radius-messages: 1rem; --border-radius-messages-small: .5rem; /* the same curve for the layer sliding out and the one sliding in behind it: with two different curves the top layer outruns the one underneath near the end, and for a frame or two the app's background — pure black in the dark theme — shows through */ --layer-transition: 300ms cubic-bezier(.22, 1, .36, 1); --layer-transition-behind: 300ms cubic-bezier(.22, 1, .36, 1); /* 300 ms on the phone too (2026-09-28) */ --slide-transition: 450ms cubic-bezier(.25, 1, .5, 1); --message-text-size: 1.0625rem; --composer-text-size: 1.0625rem; --color-background-own: #DCF8C5; --color-text-meta: #8c8c91; } body.is-ios[data-dark] { --color-background-own: #3E5B8C; --color-text-meta: #8E8E93; } body.is-android { --slide-transition: 350ms cubic-bezier(.16, 1, .3, 1); } /* ---- reset ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: calc(var(--vh) * 100); margin: 0; overflow: hidden; overscroll-behavior: none; } body { font: 400 16px/1.5 var(--font-family); color: var(--color-text); background: var(--color-background-secondary); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; } input, textarea { font: inherit; color: inherit; } textarea { resize: none; } a { color: var(--color-links); } [hidden] { display: none !important; } img { max-width: 100%; display: block; } .selectable, .text, .msg-text, .bubble .text { user-select: text; -webkit-user-select: text; } /* ---- the app: a stack of full-height layers ---------------------------- */ #app { position: relative; height: 100%; width: 100%; overflow: hidden; background: var(--color-background-secondary); } #app.booting > * { visibility: hidden; } /* a deep link: the app stays a blank ground until its screen is ready */ .layer { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--color-background-secondary); overflow: hidden; } .layer.chat-layer { background: var(--color-background); } #stack { position: absolute; inset: 0; pointer-events: none; } #stack > .layer { pointer-events: auto; } /* slideLayers: the new screen comes from the right; the one beneath slides 20% away and darkens */ #stack { background: transparent; } .layer.slide-in { animation: slide-in var(--layer-transition) forwards; } .layer.slide-out { animation: slide-in-backwards var(--layer-transition) forwards; } .layer.behind-out { animation: slide-layers-out var(--layer-transition-behind) forwards; } .layer.behind-in { animation: slide-layers-out-backwards var(--layer-transition-behind) forwards; } .layer.dim::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--layer-blackout-opacity); pointer-events: none; } @keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slide-in-backwards { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes slide-layers-out { from { transform: translateX(0); } to { transform: translateX(-20%); } } @keyframes slide-layers-out-backwards { from { transform: translateX(-20%); } to { transform: translateX(0); } } body.is-android .layer.slide-in { animation: android-in var(--slide-transition) forwards; } body.is-android .layer.slide-out { animation: android-out var(--slide-transition) forwards; } body.is-android .layer.behind-out, body.is-android .layer.behind-in { animation: none; } @keyframes android-in { from { transform: translateX(20%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes android-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(15%); opacity: 0; } } .no-anim .layer { animation: none !important; } /* the thin running line while the network is slow */ #busy { position: absolute; top: var(--safe-top); left: 0; right: 0; height: 2px; z-index: 50; overflow: hidden; background: transparent; } #busy::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: var(--color-primary); animation: busy 1.1s ease-in-out infinite; } @keyframes busy { from { left: -40%; } to { left: 100%; } } /* ---- header ----------------------------------------------------------------- */ .hdr { flex: none; display: flex; align-items: center; gap: .25rem; height: calc(var(--header-height) + var(--safe-top)); padding: var(--safe-top) .5rem 0; background: var(--color-header); box-shadow: 0 .5px 0 var(--color-borders); position: relative; z-index: 11; } .hdr .hbtn { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); flex: none; position: relative; overflow: hidden; } .hdr .hbtn svg { width: 1.5rem; height: 1.5rem; } .hdr .hbtn.secondary { color: var(--color-text-secondary); } .hdr .hbtn:disabled, .hdr .hbtn.off { opacity: .35; } .hdr .htitle { flex: 1; min-width: 0; display: flex; align-items: center; gap: .625rem; padding: 0 .25rem; } .hdr .hlogo { width: 2.125rem; height: 2.125rem; border-radius: 50%; flex: none; object-fit: cover; } .hdr .hname { font-size: 1.0625rem; font-weight: var(--font-weight-semibold); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdr .hsub { font-size: .8125rem; line-height: 1.2; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdr .hsub.typing { color: var(--color-primary); } .hdr.center .htitle { justify-content: center; text-align: center; } .hdr .avatar { width: 2.25rem; height: 2.25rem; font-size: 1rem; } .hdr .hchip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; height: 1.875rem; padding: 0 .75rem 0 .5rem; border-radius: 1rem; background: var(--color-primary-tint); color: var(--color-primary); font-weight: 500; white-space: nowrap; position: relative; overflow: hidden; } .hdr .hchip svg { width: 1rem; height: 1rem; } .pending-count { position: absolute; top: .375rem; right: .375rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3rem; border-radius: .5625rem; background: var(--color-active); color: #fff; font-size: .6875rem; font-weight: 600; line-height: 1.125rem; text-align: center; } /* ---- the scrolling body of a screen ------------------------------------- */ .scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .scroll.pad { padding: .5rem 0 calc(1rem + var(--safe-bottom)); } .scroll.pad.tabbed { padding-bottom: 1rem; } /* ---- tab bar: the floating glass capsule of Telegram on iOS ---------------- */ :root { --tabbar-height: 3.375rem; --tabbar-gap: .625rem; --tabbar-space: calc(var(--tabbar-height) + var(--tabbar-gap) + var(--safe-bottom)); } #tabs { position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--safe-bottom) + var(--tabbar-gap)); height: var(--tabbar-height); z-index: 11; display: flex; align-items: stretch; padding: .25rem; border-radius: 1.75rem; background: color-mix(in srgb, var(--color-tabbar) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .08), inset 0 .5px 0 rgba(255, 255, 255, .5); } :root[data-theme="dark"] #tabs { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45), 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 .5px 0 rgba(255, 255, 255, .08); } #tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .0625rem; border-radius: 1.5rem; color: #8E8E93; font-size: .625rem; font-weight: 500; letter-spacing: -.01em; position: relative; -webkit-tap-highlight-color: transparent; } #tabs button svg { width: 1.625rem; height: 1.625rem; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); } #tabs button .ic-on { display: none; } #tabs button.on { color: var(--color-primary); } #tabs button:active, #tabs button:focus, #tabs button:hover { background: transparent; outline: none; } #tabs button.on .ic-off { display: none; } #tabs button.on .ic-on { display: block; } #tabs button:active svg { transform: scale(.88); } #tabs button i { position: absolute; top: .1875rem; left: calc(50% + .25rem); min-width: 1.125rem; height: 1.125rem; padding: 0 .3rem; border-radius: .5625rem; background: #FF3B30; color: #fff; font-size: .6875rem; font-weight: 600; font-style: normal; line-height: 1.125rem; text-align: center; } /* somebody waits for an anonymous chat: the dice go green and a pulse sits at their corner */ #tabs button.seek:not(.on) { color: #34c759; } #tabs button.seek::after { content: ""; position: absolute; top: .3125rem; left: calc(50% + .5rem); width: .5rem; height: .5rem; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); animation: seek-pulse 1.8s ease-out infinite; } @keyframes seek-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 70% { box-shadow: 0 0 0 .5rem rgba(52, 199, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); } } /* and on the tab itself: who, from where */ .s-who { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: .75rem; background: rgba(52, 199, 89, .12); color: #34c759; font-size: .875rem; font-weight: 600; line-height: 1.3; } .s-who .dot { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #34c759; flex: none; } .s-who .dot::after { content: ""; position: absolute; inset: -.25rem; border-radius: 50%; border: .125rem solid #34c759; opacity: 0; animation: live-pulse 1.8s ease-out infinite; } .s-who b { font-weight: 700; } body.keyboard-visible #tabs { display: none; } body.is-android #tabs { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--color-tabbar); } body.is-android #tabs button { font-size: .6875rem; } .scroll.pad.tabbed { padding-bottom: calc(var(--tabbar-space) + 1rem); } /* ---- list rows (chat list, settings) ---------------------------------------- */ .list-gap { height: .5rem; background: var(--color-background-secondary); } #inbox-list .group-title { background: var(--color-background-secondary); padding-top: .625rem; padding-bottom: .375rem; } #inbox-list { background: var(--color-background-secondary); } #inbox-list .row-item { border-radius: 0; } .group-title { font-size: .8125rem; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .02em; padding: .75rem 1.25rem .3125rem; } /* the search over a long list of cities or universities */ .picker-search { position: sticky; top: 0; z-index: 3; padding: .125rem .75rem .5rem; background: var(--color-background-secondary); } .picker-box { display: flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .625rem; border-radius: .625rem; background: var(--color-background); } :root[data-theme="dark"] .picker-box { background: var(--color-background-secondary-accent); } .picker-box .picker-ico { width: 1.125rem; height: 1.125rem; flex: none; color: var(--color-text-secondary); } .picker-box input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 1rem; } .picker-box input::placeholder { color: var(--color-text-secondary); } .picker-box input::-webkit-search-cancel-button { display: none; } .picker-clear { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-gray); color: var(--color-background); } .picker-clear svg { width: .875rem; height: .875rem; stroke-width: 3; } .picker-empty { padding: 1.5rem 1.25rem; text-align: center; font-size: .9375rem; color: var(--color-text-secondary); } .rows { background: var(--color-background); } .rows.card { margin: 0 .75rem; border-radius: .75rem; overflow: hidden; } .row-item.me { padding: .5rem .75rem; } .row-item.me .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; } .row-item.me::after { left: 4.25rem; } .row-item { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: .5625rem; overflow: hidden; background: var(--color-background); color: inherit; width: 100%; text-align: left; } .row-item.chat { padding: .5625rem; } /* where a talk comes from: a small mark in the title and a colour down the row's edge */ .row-item.chat .title .src { flex: none; margin-left: .375rem; padding: .125rem .4375rem; border-radius: .5625rem; font-size: .625rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; color: #fff; background: var(--src, #8e8e93); } .row-item.chat .title .src.flirt { --src: linear-gradient(135deg, #ff7eb3, #c2337a); } .row-item.chat .title .src.ask { --src: linear-gradient(135deg, #8b7cff, #5a3fd6); } .row-item.chat .title .src.anon { --src: linear-gradient(135deg, #4fa3ff, #2d5fd4); } .row-item.chat .title .src.sup { --src: linear-gradient(135deg, #34c759, #1f8f3f); } .row-item.chat .title .src.mine { --src: linear-gradient(135deg, #3390ec, #1f6fc4); } .row-item.chat .title .src.post { --src: linear-gradient(135deg, #f5a623, #e2720a); } .row-item.chat.src-flirt { box-shadow: inset .1875rem 0 0 #ff7eb3; } .row-item.chat.src-ask { box-shadow: inset .1875rem 0 0 #8b7cff; } .row-item.chat.src-anon { box-shadow: inset .1875rem 0 0 #4fa3ff; } .row-item.chat.src-sup { box-shadow: inset .1875rem 0 0 #34c759; } .row-item.chat.src-mine { box-shadow: inset .1875rem 0 0 #3390ec; } .row-item.chat.src-post { box-shadow: inset .1875rem 0 0 #f5a623; } .row-item::after { content: ""; position: absolute; right: 0; bottom: 0; left: 4.5rem; height: .0625rem; box-shadow: inset 0 -.03125rem 0 0 var(--color-dividers); } body.is-android .row-item::after { box-shadow: inset 0 -.03125rem 0 0 var(--color-dividers-android); } .row-item.no-icon::after { left: 1rem; } .row-item.tap { cursor: pointer; } .row-item.small-icon::after { left: 3.625rem; } .row-item:last-child::after { display: none; } .row-item.active, .row-item:active { background: var(--color-chat-hover); } .row-item .info { flex: 1; min-width: 0; } .row-item .title { display: flex; align-items: baseline; gap: .5rem; } .row-item .title h3 { flex: 1; min-width: 0; margin: 0; font-size: 1rem; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-item .title time { font-size: .75rem; color: var(--color-text-secondary); flex: none; } .row-item .subtitle { font-size: .9375rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .5rem; } .row-item .subtitle .last { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .row-item .subtitle .last b { font-weight: 400; color: var(--color-text); } .row-item .subtitle .last.unread { color: var(--color-text); } .row-item .badge { flex: none; min-width: 1.375rem; height: 1.375rem; padding: 0 .4375rem; border-radius: .75rem; background: var(--color-active); color: #fff; font-size: .875rem; font-weight: 500; line-height: 1.375rem; text-align: center; } .row-item .badge.muted { background: var(--color-gray); } .row-item .chev { color: var(--color-gray); flex: none; width: 1rem; height: 1rem; } .row-item .ico { width: 1.875rem; height: 1.875rem; border-radius: .5rem; display: grid; place-items: center; color: #fff; font-size: 1rem; flex: none; } .row-item .ico svg { width: 1.25rem; height: 1.25rem; } .row-item.setting { min-height: 2.75rem; padding: .375rem .75rem; gap: .75rem; } .row-item.setting .seg { margin: 0; width: 13rem; max-width: 55%; } .row-item.setting .ico { width: 1.75rem; height: 1.75rem; border-radius: .4375rem; } .row-item.setting .label { flex: 1; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .row-item.setting .label.wrap { white-space: normal; overflow: visible; text-overflow: clip; } .row-item.setting .value { color: var(--color-text-secondary); font-size: .9375rem; } .row-item.danger { color: var(--color-error); } .avatar { width: 3.375rem; height: 3.375rem; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; font-family: var(--font-family-rounded); font-weight: 700; font-size: 1.375rem; color: #fff; background: linear-gradient(135deg, var(--av-a, #6cc1ff), var(--av-b, #3390ec)); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar.c1 { --av-a: #ff885e; --av-b: #ff516a; } .avatar.c2 { --av-a: #ffcd6a; --av-b: #ffa85c; } .avatar.c3 { --av-a: #82b1ff; --av-b: #665fff; } .avatar.c4 { --av-a: #a0de7e; --av-b: #54cb68; } .avatar.c5 { --av-a: #53edd6; --av-b: #28c9b7; } .avatar.c6 { --av-a: #72d5fd; --av-b: #2a9ef1; } .avatar.c7 { --av-a: #e0a2f3; --av-b: #d669ed; } .avatar.small { width: 2.5rem; height: 2.5rem; font-size: 1rem; } .avatar.team { background: linear-gradient(135deg, #ffb84d, #ff7a45); } .avatar.flirt { background: linear-gradient(135deg, #ff7eb3, #ff5c7a); } .online { position: absolute; width: .875rem; height: .875rem; border-radius: 50%; background: #0ac630; border: 2px solid var(--color-background); left: 3.0625rem; bottom: .5rem; } /* a limited field at its wall: the count under it, a red ring, one shake */ .limit-cnt { margin: .25rem .25rem 0; font-size: .6875rem; color: var(--color-text-secondary); text-align: right; font-variant-numeric: tabular-nums; } .limit-cnt.over { color: var(--color-error); font-weight: 700; } input.limit, textarea.limit { box-shadow: 0 0 0 2px var(--color-error) !important; } .shake { animation: shake .4s cubic-bezier(.36, .07, .19, .97) both; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /* ripple */ .ripple { position: relative; overflow: hidden; } .ripple-wave { position: absolute; border-radius: 50%; transform: scale(0); background: var(--ripple-color, rgba(0, 0, 0, .08)); animation: ripple-animation 700ms; pointer-events: none; } :root[data-theme="dark"] .ripple-wave { --ripple-color: rgba(255, 255, 255, .08); } @keyframes ripple-animation { from { transform: scale(0); opacity: 1; } 50% { opacity: 1; } to { transform: scale(2); opacity: 0; } } /* ---- generic blocks --------------------------------------------------------- */ .card { background: var(--color-background); border-radius: var(--border-radius-default-small); margin: 0 .75rem .625rem; padding: .875rem 1rem; } .card.island { box-shadow: var(--shadow-island); } .lead { color: var(--color-text-secondary); font-size: .9375rem; line-height: 1.4; margin: 0; } .strong { font-weight: var(--font-weight-semibold); } .hint { font-size: .8125rem; color: var(--color-text-secondary); line-height: 1.35; } .note { font-size: .8125rem; color: var(--color-text-secondary); text-align: center; padding: .25rem 1.5rem; margin: 0; line-height: 1.4; } .center-text { text-align: center; } .btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 3rem; padding: 0 1rem; border-radius: var(--border-radius-default-small); background: var(--color-primary); color: #fff; font-size: 1rem; font-weight: 500; transition: transform .1s ease, opacity .2s ease; position: relative; overflow: hidden; } .btn:active { transform: scale(.98); } .btn:disabled { opacity: .5; } .btn.secondary { background: var(--color-primary-tint); color: var(--color-primary); } .btn.danger { background: var(--color-error); } .btn.plain { background: transparent; color: var(--color-primary); height: 2.75rem; } .btn.plain.danger { color: var(--color-error); } .btn.small { height: 2.25rem; font-size: .9375rem; width: auto; padding: 0 1rem; display: inline-flex; } .btn svg { width: 1.375rem; height: 1.375rem; stroke-width: 2.2; } .capsule { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1rem; border-radius: 1.25rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .9375rem; font-weight: 500; position: relative; overflow: hidden; } .capsule svg { width: 1.125rem; height: 1.125rem; } .capsule i { font-style: normal; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .125rem .5rem; border-radius: .625rem; background: var(--color-primary); color: #fff; } .capsule.soon { color: var(--color-text-secondary); background: var(--color-background-secondary); margin: .625rem auto 0; display: flex; width: fit-content; } .capsule.soon i { background: var(--color-gray); } .capsule.wide { display: flex; margin: .25rem auto 0; width: fit-content; background: transparent; } .btn-row { display: flex; gap: .5rem; padding: 0 .75rem .625rem; } .btn-row .btn { flex: 1; } .pill { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 1rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .875rem; font-weight: 500; white-space: nowrap; position: relative; overflow: hidden; } .pill.fill { background: var(--color-primary); color: #fff; } .pill.danger { background: #e5393520; color: var(--color-error); } .pill.gray { background: var(--color-background-secondary-accent); color: var(--color-text-secondary); } :root[data-theme="dark"] .pill.gray { background: #ffffff14; } .pill.on { background: var(--color-primary); color: #fff; } .pills { display: flex; flex-wrap: wrap; gap: .5rem; padding: .25rem .75rem .625rem; } /* the inbox folders, Telegram's way: words in a row, the open one in the accent colour, a bar under it that slides */ .folders { position: sticky; top: 0; z-index: 3; display: flex; align-items: stretch; gap: 0; padding: 0 .5rem; overflow-x: auto; scrollbar-width: none; background: var(--color-background); box-shadow: 0 .5px 0 var(--color-borders); } .folders::-webkit-scrollbar { display: none; } .folders .folder { flex: none; display: inline-flex; align-items: center; gap: .375rem; height: 2.75rem; padding: 0 .75rem; font-size: .9375rem; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; position: relative; overflow: hidden; border-radius: .5rem .5rem 0 0; transition: color .2s ease; } .folders .folder.on { color: var(--color-primary); } .folders .folder .n { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: .625rem; background: var(--color-text-secondary); color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 1; transition: background .2s ease; } .folders .folder.on .n { background: var(--color-primary); } .match-title { display: flex; align-items: center; justify-content: space-between; } .match-title .match-all { display: inline-flex; align-items: center; gap: .125rem; font-size: .8125rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--color-primary); position: relative; overflow: hidden; border-radius: .5rem; padding: .125rem .375rem; } .match-title .match-all svg { width: .875rem; height: .875rem; } .folders .ind { position: absolute; left: 0; bottom: 0; height: .1875rem; width: 0; border-radius: .1875rem .1875rem 0 0; background: var(--color-primary); transition: transform .28s cubic-bezier(.32, .72, 0, 1), width .28s cubic-bezier(.32, .72, 0, 1); pointer-events: none; } .pills .pill { padding: .5rem 1rem; font-size: .9375rem; font-weight: 600; } .seg { display: flex; margin: .5rem .75rem; padding: .125rem; border-radius: .5625rem; background: rgba(118, 118, 128, .12); } :root[data-theme="dark"] .seg { background: rgba(118, 118, 128, .24); } .seg button { flex: 1; height: 2rem; border-radius: .4375rem; font-size: .8125rem; font-weight: 500; color: var(--color-text); position: relative; transition: background .2s ease, box-shadow .2s ease, transform .1s ease; white-space: nowrap; } .seg button:active { transform: scale(.97); } /* the moderation groups: one row that scrolls sideways, every name whole, the count beside it */ .seg.adm-groups { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; padding: .125rem; } .seg.adm-groups::-webkit-scrollbar { display: none; } .seg.adm-groups button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; padding: 0 .75rem; font-size: .8125rem; } .seg.adm-groups button i { position: static; display: inline-grid; place-items: center; min-width: 1.0625rem; height: 1.0625rem; padding: 0 .25rem; border-radius: .53125rem; } .seg button.on { background: #fff; color: #000; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); } :root[data-theme="dark"] .seg button.on { background: #636366; color: #fff; } .seg button i { position: absolute; top: -.375rem; right: -.25rem; min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: .5rem; background: var(--color-active); color: #fff; font-size: .625rem; font-weight: 600; font-style: normal; line-height: 1rem; } /* Folder tabs of the moderation screen: one row that scrolls, the count next to the name, a bar under the active one */ .ftabs { display: flex; flex-wrap: wrap; gap: .375rem; padding: 0 .75rem; margin: 0 0 .5rem; } .ftabs button { display: inline-flex; align-items: center; gap: .3125rem; height: 1.875rem; padding: 0 .625rem; border-radius: .9375rem; font-size: .8125rem; font-weight: 600; color: var(--color-primary); background: var(--color-primary-tint); white-space: nowrap; transition: background .15s ease, color .15s ease, transform .1s ease; } .ftabs button:active { transform: scale(.96); } .ftabs button.on { color: #fff; background: var(--color-primary); } .ftabs button i { font-style: normal; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: .5625rem; background: var(--color-primary); color: #fff; font-size: .6875rem; font-weight: 600; line-height: 1.125rem; text-align: center; } .ftabs button.on i { background: #fff; color: var(--color-primary); } .empty { text-align: center; padding: 3rem 2rem; color: var(--color-text-secondary); } .empty .mark { font-size: 3rem; line-height: 1; margin-bottom: .75rem; } .empty .strong { color: var(--color-text); font-size: 1.0625rem; margin-bottom: .25rem; } .skeleton { height: 4.5rem; margin: 0 .75rem .5rem; border-radius: var(--border-radius-default-small); background: linear-gradient(90deg, var(--color-background) 25%, var(--color-background-secondary-accent) 50%, var(--color-background) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .arrive > * { animation: arrive .25s ease both; animation-delay: calc(var(--i, 0) * 30ms); } @keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .spinner { width: 1.5rem; height: 1.5rem; border: 2.5px solid var(--color-primary-tint); border-top-color: var(--color-primary); border-radius: 50%; animation: spin .8s linear infinite; } .spinner.small { width: 1.125rem; height: 1.125rem; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } .center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; gap: .75rem; flex: 1; } .center .mark { font-size: 4rem; line-height: 1; } /* The composer («Новий допис», 2026-09-23): one island that reads like a message being written. */ /* ---- the composer as a scene (2026-09-25): the queue alive on top, the post as it will hang on the wall, one button ---- */ .wscene, .wscene * { touch-action: manipulation; } .wscene.busy { pointer-events: none; } .wscene.busy textarea { opacity: .6; } /* the queue: one line, the number and when yours comes; the gold switch under it. Never folds. */ .wq { position: sticky; top: 0; z-index: 5; overflow: hidden; margin: .5rem .75rem .5rem; padding: .5rem .75rem .5rem; border-radius: 1rem; color: #fff; background: #17163a; box-shadow: 0 .5rem 1.5rem rgba(23, 22, 58, .3); isolation: isolate; transition: background .5s ease, box-shadow .5s ease, transform .28s cubic-bezier(.32, .72, 0, 1), opacity .28s ease; } .wq-aurora { position: absolute; inset: -60%; z-index: -1; background: radial-gradient(40% 50% at 20% 30%, #7b5cff 0, transparent 60%), radial-gradient(35% 45% at 80% 20%, #3390ec 0, transparent 60%), radial-gradient(45% 55% at 60% 90%, #ff5fa2 0, transparent 60%); filter: blur(28px) saturate(1.2); opacity: .85; animation: wq-aurora 14s ease-in-out infinite alternate; transition: background .6s ease; } @keyframes wq-aurora { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(12deg) scale(1.12) translate(3%, -2%); } 100% { transform: rotate(-8deg) scale(1.05) translate(-3%, 3%); } } .wq.gold { background: #2a1b05; box-shadow: 0 .5rem 1.5rem rgba(245, 166, 35, .4); } .wq.gold .wq-aurora { background: radial-gradient(45% 55% at 25% 30%, #ffb340 0, transparent 60%), radial-gradient(40% 50% at 80% 25%, #ff7a18 0, transparent 60%), radial-gradient(45% 55% at 60% 90%, #ffd166 0, transparent 60%); } .wq-head { display: flex; align-items: center; justify-content: space-between; gap: .625rem; min-height: 1.75rem; } .wq-num { display: flex; align-items: center; gap: .375rem; min-width: 0; white-space: nowrap; } .wq-num i { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #4cff8f; animation: wq-live 1.8s ease-out infinite; } @keyframes wq-live { 0% { box-shadow: 0 0 0 0 rgba(76, 255, 143, .7); } 100% { box-shadow: 0 0 0 .5rem rgba(76, 255, 143, 0); } } .wq-num b { display: inline-block; font-size: 1.5rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: 0 .125rem .75rem rgba(0, 0, 0, .35); } .wq-num b.pop { animation: wq-pop .55s cubic-bezier(.2, 1.6, .4, 1); } @keyframes wq-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } .wq-num span { font-size: .8125rem; opacity: .85; } .wq-eta { flex: none; max-width: 52%; font-size: .8125rem; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wq-eta span { display: inline-block; transition: opacity .16s ease, transform .16s ease; } .wq-eta.swap span { opacity: 0; transform: translateY(.375rem); } .wq.far .wq-eta { color: #ffd166; } .wq.gold .wq-eta { color: #fff; } /* «без черги» on the scene itself */ .wq-prio { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; padding: .375rem .5rem .375rem .5rem; border-radius: .875rem; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); position: relative; overflow: hidden; cursor: pointer; transition: background .3s ease, box-shadow .3s ease; } .wq.gold .wq-prio { background: rgba(255, 209, 102, .2); box-shadow: inset 0 0 0 .5px rgba(255, 209, 102, .55); } .wq-prio .ico { flex: none; width: 1.875rem; height: 1.875rem; border-radius: .625rem; display: grid; place-items: center; background: linear-gradient(135deg, #ffb340, #f28b00); color: #fff; box-shadow: 0 .25rem .75rem rgba(242, 139, 0, .45); } .wq-prio .ico svg { width: 1.0625rem; height: 1.0625rem; } .wq-prio .t { flex: 1; min-width: 0; line-height: 1.2; } .wq-prio .t b { display: block; font-size: .875rem; font-weight: 700; } .wq-prio .t span { display: block; font-size: .6875rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wq-prio.done .t b { color: #ffd166; } .wq-q { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .16); position: relative; overflow: hidden; } .wq-sw { flex: none; width: 3.125rem; height: 1.875rem; padding: 0; border: 0; border-radius: 1rem; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35); position: relative; cursor: pointer; transition: background .25s ease, box-shadow .25s ease; } .wq-sw .knob { position: absolute; top: .1875rem; left: .1875rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 .1875rem .5rem rgba(0, 0, 0, .35); transition: transform .3s cubic-bezier(.34, 1.4, .4, 1); } .wq-sw .knob::after { content: "⭐"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .6875rem; opacity: 0; transition: opacity .2s ease; } .wq-sw.on { background: #ffd166; box-shadow: 0 0 0 .1875rem rgba(255, 209, 102, .3); } .wq-sw.on .knob { transform: translateX(1.25rem); } .wq-sw.on .knob::after { opacity: 1; } /* the post as it will hang on the wall, its tools and its button in its own foot */ .wp { position: relative; margin: 0 .75rem; border-radius: 1.125rem; background: var(--color-bubble-in); box-shadow: var(--shadow-island), 0 0 0 .5px var(--color-borders); overflow: hidden; transition: transform .28s cubic-bezier(.32, .72, 0, 1), opacity .28s ease; } .wp.fly, .wq.fly { transform: translateY(-2.5rem) scale(.94); opacity: 0; } .wp-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem 0; } .wp-mask { flex: none; width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center; font-size: .875rem; background: linear-gradient(135deg, var(--color-primary), #7b5cff); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); } .wp-name { font-size: .875rem; font-weight: 600; color: var(--color-chat-username); } .wp-tag { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; max-width: 55%; height: 1.625rem; padding: 0 .5rem 0 .625rem; border-radius: .8125rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .75rem; font-weight: 600; position: relative; overflow: hidden; } .wp-tag span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wp-tag svg { flex: none; width: .75rem; height: .75rem; opacity: .8; } .wp-quote { display: flex; align-items: center; gap: .5rem; margin: .5rem .75rem 0; padding: .375rem .625rem .375rem .75rem; border-radius: .5rem; background: var(--color-primary-tint); border-left: 3px solid var(--color-primary); } .wp-quote .t { flex: 1; min-width: 0; line-height: 1.25; } .wp-quote b { display: block; font-size: .75rem; color: var(--color-primary); } .wp-quote span { display: block; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wp-quote .x { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-secondary); position: relative; overflow: hidden; } .wp-quote .x svg { width: 1rem; height: 1rem; } .wp-pic { display: flex; align-items: center; gap: .625rem; margin: .5rem .75rem 0; padding: .375rem; border-radius: .75rem; background: var(--color-background-secondary); } :root[data-theme="dark"] .wp-pic { background: var(--color-background-secondary-accent); } .wp-pic img { flex: none; width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: .5rem; } .wp-pic .t { flex: 1; min-width: 0; line-height: 1.25; } .wp-pic b { display: block; font-size: .8125rem; font-weight: 600; } .wp-pic span { display: block; font-size: .6875rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wp-pic .x { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-secondary); position: relative; overflow: hidden; } .wp-pic .x svg { width: 1rem; height: 1rem; } .wp textarea { display: block; width: 100%; border: 0; background: transparent; outline: 0; padding: .5rem .75rem .25rem; font-size: 1.0625rem; line-height: 1.45; height: 6.5rem; overflow-y: auto; resize: none; color: var(--color-text); -webkit-text-fill-color: var(--color-text); caret-color: var(--color-primary); } .wp textarea::placeholder { color: var(--color-placeholders); -webkit-text-fill-color: var(--color-placeholders); opacity: 1; } .wp-bar { display: flex; align-items: center; gap: .375rem; padding: .375rem .5rem .5rem; } .wp-bar .offscreen { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -9999px; } .wp-bar .ib { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); background: var(--color-primary-tint); position: relative; overflow: hidden; transition: background .2s ease, color .2s ease; } .wp-bar .ib svg { width: 1.1875rem; height: 1.1875rem; } .wp-bar .ib.on { background: var(--color-primary); color: #fff; } .wp-bar .cnt { margin-left: .25rem; font-size: .6875rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .wp-bar .cnt.over { color: var(--color-error); font-weight: 700; } .wp-send { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 2.375rem; padding: 0 .875rem 0 1rem; border-radius: 1.1875rem; background: var(--color-primary); color: #fff; font-size: .875rem; font-weight: 600; white-space: nowrap; position: relative; overflow: hidden; box-shadow: 0 .375rem 1rem rgba(51, 144, 236, .3); transition: background .25s ease, box-shadow .25s ease, opacity .2s ease; } .wp-send svg { width: 1rem; height: 1rem; } .wp-send:active { transform: scale(.97); } .wp-send.off { opacity: .5; box-shadow: none; } .wp-send.gold { background: linear-gradient(135deg, #ffb340, #f28b00); box-shadow: 0 .375rem 1rem rgba(245, 166, 35, .45); } .wfoot { text-align: center; font-size: .6875rem; color: var(--color-text-secondary); margin: .5rem 1.25rem 1rem; line-height: 1.5; } .wfoot a { color: var(--color-primary); text-decoration: none; font-weight: 500; } @keyframes qn-pulse { 0%, 100% { box-shadow: 0 0 0 0 #fb8c0055; } 50% { box-shadow: 0 0 0 .375rem #fb8c0000; } } .form-field { background: var(--color-background); margin: 0 .75rem .625rem; border-radius: var(--border-radius-default-small); padding: .75rem 1rem; } .form-field label { display: block; font-size: .75rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .02em; margin-bottom: .25rem; } .form-field input, .form-field textarea { width: 100%; border: 0; background: transparent; outline: 0; font-size: 1.0625rem; padding: .25rem 0; } .form-field textarea { min-height: 6rem; line-height: 1.35; } .form-field .count { text-align: right; font-size: .75rem; color: var(--color-text-secondary); } .strip { display: flex; align-items: center; gap: .75rem; margin: .5rem .75rem; padding: .625rem .875rem; border-radius: var(--border-radius-default-small); background: #fb8c001a; color: var(--color-text); font-size: .875rem; } .strip .btn { width: auto; height: 2rem; padding: 0 .75rem; font-size: .8125rem; flex: none; } /* ---- wall (channel-like feed) ---------------------------------------------- */ /* ---- the wall as a Telegram channel ------------------------------------------- */ .wall-chat { position: absolute; inset: 0; overflow: hidden; } .wall-chat .chat-bg { z-index: 0; } /* bottom-up: the scroll origin is the bottom, so older posts added above never move what is on screen */ .wmsgs { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column-reverse; padding: 0; } .wmsgs > .wcol { display: flex; flex-direction: column; flex: none; padding: .5rem .5rem calc(var(--tabbar-space) + 4.5rem); } .wmsgs .fill { flex: 1; } .wmsgs { overflow-anchor: none; } /* the page holds the view itself when older posts come in above; the browser must not do it twice */ .wmsgs .msg { margin-bottom: .625rem; } .wmsgs .bubble { max-width: min(29rem, calc(100vw - 3.25rem)); width: min(29rem, calc(100vw - 3.25rem)); padding: 0; overflow: hidden; } .wmsgs .bubble { -webkit-touch-callout: none; } .wmsgs .bubble, .wmsgs .bubble .text { user-select: none; -webkit-user-select: none; } /* a hold opens the menu, it does not select words; «Копіювати текст» is in the menu */ /* the message menu */ .ctx-root { position: fixed; inset: 0; z-index: 1530; } .ctx-back { position: absolute; background: transparent; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s ease; pointer-events: none; } .ctx-root.open .ctx-back { opacity: 1; } .ctx-catch { position: absolute; inset: 0; z-index: 1; } /* while the menu is up the wall's own floating things step aside and come back after */ .wall-write, .wall-chat .feedseg, .wall-chat .feednote, .wall-chat .scroll-down { transition: opacity .18s ease, transform .18s ease; } body.ctx-open .wall-write, body.ctx-open .wall-chat .feedseg, body.ctx-open .wall-chat .feednote, body.ctx-open .wall-chat .scroll-down { opacity: 0; pointer-events: none; } body.ctx-open .wall-write { transform: translateY(1rem); } .wmsgs .bubble .media { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } /* a held photo opens our menu, not the system one */ .ctx-menu { position: fixed; z-index: 2; padding: .375rem; border-radius: 1rem; background: color-mix(in srgb, var(--color-background) 88%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .08); opacity: 0; transform: scale(.7); transition: opacity .18s ease, transform .22s cubic-bezier(.32, .72, 0, 1); } .ctx-root.open .ctx-menu { opacity: 1; transform: scale(1); } .ctx-item { display: flex; align-items: center; gap: .875rem; width: 100%; height: 2.75rem; padding: 0 .875rem; border-radius: .625rem; color: var(--color-text); font-size: 1.0625rem; text-align: left; position: relative; overflow: hidden; } .ctx-item svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--color-text-secondary); stroke-width: 1.8; } .ctx-item.danger, .ctx-item.danger svg { color: var(--color-error); } .ctx-item:active { background: var(--color-item-active); } .wmsgs .bubble > .body { padding: .3125rem .5rem .375rem; } .wmsgs .bubble .name { padding: .125rem 0 .0625rem; } .wmsgs .bubble .media { width: 100%; max-height: 70vh; object-fit: cover; display: block; cursor: zoom-in; background: var(--color-background-secondary-accent); } .wmsgs .bubble .media + .body { padding-top: .375rem; } .wmsgs .bubble .text::after { width: 4rem; } .wmsgs .bubble .kind { color: var(--color-text-secondary); font-size: .9375rem; } .wmsgs .bubble .reacts { display: flex; flex-wrap: wrap; gap: .25rem; padding: .25rem 0 .125rem; } .wmsgs .bubble .react.tap { cursor: pointer; position: relative; overflow: hidden; } .wmsgs .bubble .react.own { background: var(--color-primary); color: #fff; } .wmsgs .bubble .react.views { background: transparent; color: var(--color-text-secondary); padding: 0 .125rem 0 .25rem; margin-left: auto; display: inline-flex; align-items: center; gap: .3125rem; } .wmsgs .bubble .react.views svg { width: .9375rem; height: .9375rem; flex: none; } .count.over { color: var(--color-error); font-weight: 600; } .count.note { margin-top: .375rem; line-height: 1.3; } .wmsgs .bubble .react { display: inline-flex; align-items: center; gap: .25rem; height: 1.625rem; padding: 0 .625rem 0 .5rem; border-radius: .8125rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .875rem; font-weight: 500; } .wmsgs .bubble .meta { position: static; float: right; margin: .125rem 0 0 .5rem; height: 1rem; } .wmsgs .bubble .meta .views { display: inline-flex; align-items: center; gap: .125rem; } .wmsgs .bubble .meta .views svg { width: .875rem; height: .875rem; } .wmsgs .ikb { display: flex; flex-direction: column; gap: .25rem; width: min(29rem, calc(100vw - 3.25rem)); margin-top: .3125rem; } .wmsgs .ikb button { height: 2.375rem; border-radius: .625rem; background: rgba(255, 255, 255, .72); color: var(--color-primary); font-size: .9375rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: .375rem; position: relative; overflow: hidden; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .15s ease; } :root[data-theme="dark"] .wmsgs .ikb button { background: rgba(255, 255, 255, .16); color: #fff; } .wmsgs .ikb button:active { background: rgba(255, 255, 255, .9); } :root[data-theme="dark"] .wmsgs .ikb button:active { background: rgba(255, 255, 255, .28); } .wmsgs .msg.last { margin-bottom: 0; } .wmsgs .wall-col { margin-bottom: 1rem; } .wmsgs .msg + .msg { margin-top: 0; } .wmsgs .wall-col { display: flex; flex-direction: column; align-items: flex-start; } /* a post someone was sent to: the whole row washed in the accent, fading out — as Telegram lights up a message */ .wmsgs .wall-col { position: relative; isolation: isolate; } .wmsgs .wall-col.flash::before { content: ""; position: absolute; inset: -.375rem -.75rem; border-radius: .875rem; background: var(--color-primary); z-index: -1; pointer-events: none; animation: wall-flash 2.6s ease-out forwards; } @keyframes wall-flash { 0% { opacity: .55; } 45% { opacity: .45; } 100% { opacity: 0; } } .wall-chat .scroll-down { bottom: calc(var(--tabbar-space) + 4.75rem); } /* while a random-chat search runs, its floating bar sits where the write button is and over the last post's buttons: the button moves up above it and the list gets room, so «Показати в каналі» stays tappable */ body.searching .wall-write { bottom: calc(var(--tabbar-space) + 4.5rem); } body.searching .wmsgs > .wcol { padding-bottom: calc(var(--tabbar-space) + 8.5rem); } body.searching .wall-chat .scroll-down { bottom: calc(var(--tabbar-space) + 8.75rem); } /* the wide «write» pill above the tab bar, shaped like a composer */ /* «Написати своє на стіну» (2026-09-24): a gradient pill with a white pencil button — one light sweep every few seconds is the only motion; anything more made the wall stutter. */ .wall-write { position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--tabbar-space) + .625rem); z-index: 5; height: 3.375rem; border-radius: 1.6875rem; display: flex; align-items: center; gap: .625rem; padding: 0 .375rem 0 1.25rem; color: #fff; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; background: linear-gradient(120deg, #3390ec, #5b6cff 55%, #8a5cff); box-shadow: 0 .625rem 1.5rem rgba(51, 144, 236, .38), 0 0 0 .5px rgba(255, 255, 255, .18), inset 0 .5px 0 rgba(255, 255, 255, .35); overflow: hidden; isolation: isolate; } :root[data-theme="dark"] .wall-write { box-shadow: 0 .625rem 1.5rem rgba(51, 144, 236, .3), 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 .5px 0 rgba(255, 255, 255, .22); } .wall-write::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-120%); animation: ww-sweep 5s ease-in-out infinite; will-change: transform; pointer-events: none; } .wall-write .txt { flex: 1; text-align: left; position: relative; text-shadow: 0 1px 1px rgba(0, 0, 0, .12); } .wall-write .go { width: 2.625rem; height: 2.625rem; border-radius: 50%; background: #fff; color: var(--color-primary); display: grid; place-items: center; flex: none; position: relative; box-shadow: 0 .25rem .625rem rgba(0, 0, 0, .18); } .wall-write .go svg { width: 1.3125rem; height: 1.3125rem; stroke-width: 2.2; } .wall-write:active { transform: scale(.97); } @keyframes ww-sweep { 0%, 60% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } } @media (prefers-reduced-motion: reduce) { .wall-write::before { animation: none; } } .wall-chat .hero-empty { align-self: center; margin: auto; } /* the pattern is drawn in black; on the dark navy it has to be light, as Telegram's is */ /* the feed switch above the wall */ /* the two walls: a switch across the whole width, tall enough to be the wall's own header */ .wall-chat .feedseg { position: absolute; top: .5rem; left: .75rem; right: .75rem; transform: none; z-index: 5; margin: 0; width: auto; padding: .1875rem; border-radius: .875rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(118, 118, 128, .32); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .12), inset 0 .5px 0 rgba(255, 255, 255, .25); } .wall-chat .feedseg button { height: 2.375rem; border-radius: .6875rem; font-size: .875rem; font-weight: 600; padding: 0 .25rem; } /* the third feed of the tab: the «Запитай мене» section in place of the posts; the field and the arrow go with them */ .wall-chat .wask { display: none; position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 3.25rem 0 calc(var(--tabbar-space) + 1rem); background: var(--color-background-secondary); } .wall-chat.asking .wask { display: block; } .wall-chat.asking .wmsgs, .wall-chat.asking .wall-write, .wall-chat.asking .scroll-down { display: none; } /* the ground stays (2026-09-27): hiding and showing it again was the blink on every switch */ .wall-chat .feedseg button.on { box-shadow: 0 3px 10px rgba(0, 0, 0, .18), 0 1px 1px rgba(0, 0, 0, .06); } .wall-chat .feedseg button { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wall-chat .feedseg button.on { color: #000; text-shadow: none; } .wall-chat.with-seg .wmsgs > .wcol { padding-top: 3.75rem; } /* the line under the switch on the second wall */ .wall-chat .feednote { position: absolute; top: 3.5rem; left: .75rem; right: .75rem; transform: none; z-index: 5; width: auto; padding: .375rem .75rem; border-radius: .75rem; background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255, 255, 255, .92); font-size: .8125rem; line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } /* as wide as the switch above, one line */ .wall-chat.with-seg.noted .wmsgs > .wcol { padding-top: 6rem; } .wall-bg { background: var(--color-background-secondary); } .post { margin: .375rem .5rem; background: var(--color-background); border-radius: var(--border-radius-messages); box-shadow: 0 1px 2px var(--color-default-shadow); overflow: hidden; position: relative; } .post .post-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .375rem .625rem 0; } .post .post-tag { font-size: .875rem; font-weight: 500; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .post .post-time { font-size: .75rem; color: var(--color-text-secondary); flex: none; } .post .post-photo { margin-top: .375rem; max-height: 60vh; object-fit: cover; width: 100%; cursor: zoom-in; } .post .text { padding: .3125rem .625rem .375rem; font-size: var(--message-text-size); line-height: 1.3125; white-space: pre-wrap; word-break: break-word; } .post .kind { padding: .5rem .625rem; color: var(--color-text-secondary); font-size: .9375rem; } .post .post-foot { display: flex; align-items: center; gap: .5rem; padding: .25rem .625rem .5rem; } .post .reactions { display: flex; gap: .375rem; flex: 1; } .post .reaction { display: inline-flex; align-items: center; gap: .25rem; height: 1.75rem; padding: 0 .625rem; border-radius: .875rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .875rem; font-weight: 500; } .post .post-btns { display: flex; flex-direction: column; gap: .1875rem; padding: 0 .1875rem .1875rem; } .post .ibtn { height: 2.25rem; border-radius: .5rem; background: var(--color-background-secondary); color: var(--color-primary); font-size: .9375rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: .375rem; position: relative; overflow: hidden; } :root[data-theme="dark"] .post .ibtn { background: #ffffff0f; } /* ---- chat --------------------------------------------------------------------- */ .chat-layer { --composer-reserve: calc(var(--composer-height) + .5rem + var(--safe-bottom)); } /* The chat's ground, as Telegram Web draws it (2026-09-27): the swirl gradient (an image made in app.js), stretched to 150 % and shifted up a quarter, the doodles over it. */ .chat-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #dbddbb; } :root[data-theme="dark"] .chat-bg { background: #182036; } .chat-bg .grad { position: absolute; left: 0; top: -25%; width: 100%; height: 150%; display: none; pointer-events: none; } .chat-bg .grad.light { display: block; } :root[data-theme="dark"] .chat-bg .grad.light { display: none; } :root[data-theme="dark"] .chat-bg .grad.dark { display: block; } .chat-bg .pat { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: soft-light; opacity: .68; display: none; } /* a bitmap painted in app.js (paintPattern), not a vector background: the vector made every scroll frame crawl */ .chat-bg .pat.light { display: block; } :root[data-theme="dark"] .chat-bg .pat.light { display: none; } :root[data-theme="dark"] .chat-bg .pat.dark { display: block; opacity: .5; } /* the night the iOS way (tweb's overlay path): white doodles, soft-light over the full gradient, intensity 38–40 */ .chat-layer .hdr { background: color-mix(in srgb, var(--color-header) 92%, transparent); backdrop-filter: none; } /* bottom-up as well: an older page above never moves the lines on screen */ .msgs { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column-reverse; padding: 0; } .msgs > .mcol { display: flex; flex-direction: column; flex: none; padding: .5rem .5rem calc(var(--composer-reserve) + .5rem); } body.keyboard-visible .msgs > .mcol { padding-bottom: calc(var(--composer-height) + 1rem); } .msgs .fill { flex: 1; } .msgs { overflow-anchor: none; } /* the page holds the view itself when older lines come in above */ /* the older-page spinner: stuck to the top of the list, no height of its own, so it never moves a line */ .msgs .older { position: sticky; top: 0; height: 0; flex: none; overflow: visible; display: flex; justify-content: center; z-index: 3; } .msgs .older i { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-top: .375rem; border-radius: 50%; background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pop-in .2s ease-out; } .msgs .older .spinner { width: 1rem; height: 1rem; border-width: 2px; border-color: rgba(255, 255, 255, .28); border-top-color: #fff; } /* while a conversation loads: a dark translucent disc with a white ring, centred over the pattern, as Telegram does */ .chat-load { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity .25s ease; } .chat-load.gone { opacity: 0; } .chat-load i { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pop-in .25s cubic-bezier(.34, 1.56, .64, 1); } .chat-load .spinner { width: 1.375rem; height: 1.375rem; border-width: 2.5px; border-color: rgba(255, 255, 255, .28); border-top-color: #fff; } .pin-post { flex: none; display: flex; align-items: center; gap: .625rem; padding: .375rem .625rem .375rem .75rem; background: var(--color-header); box-shadow: 0 .5px 0 var(--color-borders); position: relative; z-index: 10; cursor: pointer; } .pin-post .pin-body { flex: 1; min-width: 0; border-left: 2px solid var(--color-primary); padding-left: .5rem; } .pin-post .pin-label { color: var(--color-primary); font-weight: 500; font-size: .8125rem; line-height: 1.2; } .pin-post .pin-text { font-size: .9375rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); } .pin-post.open .pin-text { white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow-y: auto; } .pin-post .pin-open { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); flex: none; position: relative; overflow: hidden; } .pin-post .pin-open svg { width: 1.25rem; height: 1.25rem; } .sticky-date, .sys { align-self: center; margin: .5rem 0 .75rem; font-size: calc(var(--message-text-size) - .0625rem); line-height: 1.25; text-align: center; pointer-events: none; } .sticky-date > span, .sys > span { display: inline-block; padding: .1875rem .5rem; border-radius: var(--border-radius-messages); color: #fff; background: var(--action-message-bg); font-weight: 500; } .sys > span { font-weight: 400; max-width: 80vw; } .sticky-date.stuck { position: sticky; top: .25rem; z-index: 2; } .msg { position: relative; display: flex; align-items: flex-end; margin-bottom: .25rem; max-width: 100%; animation: msg-in .2s ease-out; transform-origin: bottom left; } .msg.last-in-group { margin-bottom: .4375rem; } .msg.own { flex-direction: row-reverse; transform-origin: bottom right; } @keyframes msg-in { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .bubble { --bg: var(--color-bubble-in); position: relative; max-width: min(29rem, calc(100vw - 3.75rem)); padding: .3125rem .5rem .375rem; background: var(--bg); border-radius: var(--border-radius-messages); box-shadow: 0 1px 2px var(--color-default-shadow); font-size: var(--message-text-size); line-height: 1.3125; word-break: break-word; } body.is-ios .bubble { padding-bottom: .4375rem; } .msg.own .bubble { --bg: var(--color-bubble-out-b); background: linear-gradient(135deg, var(--color-bubble-out-a), var(--color-bubble-out-b)); max-width: min(30rem, calc(100vw - 3.75rem)); } :root[data-theme="dark"] .msg.own .bubble { color: #fff; --color-accent-own: #fff; --color-message-meta-own: rgba(255, 255, 255, .7); } :root[data-theme="dark"] .msg.own .bubble .quote { border-color: #fff; background: rgba(255, 255, 255, .16); } :root[data-theme="dark"] .msg.own .voice .play { background: #fff; color: var(--color-bubble-out); } :root[data-theme="dark"] .msg.own .voice .wave i { background: #fff; } body.is-ios .msg.own .bubble { padding-left: .625rem; } .msg:not(.own).first:not(.last) .bubble { border-bottom-left-radius: var(--border-radius-messages-small); } .msg:not(.own):not(.first):not(.last) .bubble { border-top-left-radius: var(--border-radius-messages-small); border-bottom-left-radius: var(--border-radius-messages-small); } .msg:not(.own).last:not(.first) .bubble { border-top-left-radius: var(--border-radius-messages-small); } .msg:not(.own).last .bubble { border-bottom-left-radius: 0; } .msg.own.first:not(.last) .bubble { border-bottom-right-radius: var(--border-radius-messages-small); } .msg.own:not(.first):not(.last) .bubble { border-top-right-radius: var(--border-radius-messages-small); border-bottom-right-radius: var(--border-radius-messages-small); } .msg.own.last:not(.first) .bubble { border-top-right-radius: var(--border-radius-messages-small); } .msg.own.last .bubble { border-bottom-right-radius: 0; } .bubble .name { font-size: calc(var(--message-text-size) - .125rem); font-weight: 500; line-height: 1.25rem; color: var(--color-primary); } .msg.own .bubble .name { color: var(--color-accent-own); } .bubble .text { white-space: pre-wrap; } .bubble .text::after { content: ""; display: inline-block; width: 3.5rem; height: 0; } /* room for the time at the end of the last line */ .msg.own .bubble .text::after { width: 4.75rem; } /* the ticks come with it */ .bubble .meta { position: absolute; right: .5rem; bottom: .25rem; display: flex; align-items: center; gap: .1875rem; height: 1rem; font-size: .75rem; line-height: 1; color: rgba(var(--color-text-meta-rgb), .75); white-space: nowrap; } .msg.own .bubble .meta { color: var(--color-message-meta-own); } .bubble .meta svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 2.2; } .bubble .meta .ed { font-size: .6875rem; opacity: .85; margin-right: .125rem; } .bubble.edited .text::after { width: 5.75rem; } /* «ред.» takes room at the end of the last line too */ .msg.own .bubble.edited .text::after { width: 7rem; } /* «ред.» before the time of a reworded line */ .bubble, .bubble .text { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } /* a hold opens the menu; copying is in it */ .bubble .meta .tick { display: inline-flex; align-items: center; } .appendix { position: absolute; bottom: 0; width: .5625rem; height: 1.0625rem; overflow: visible; display: none; pointer-events: none; } .msg.last .appendix { display: block; } .msg.own .appendix { right: -.5rem; } .msg:not(.own) .appendix { left: -.5rem; } .appendix .corner { fill: var(--bg); } .appendix .shadow { display: none; } /* swipe to reply, quotes, the reply bar, ticks */ .msg { transition: transform 150ms ease; touch-action: pan-y; } .msg.swiping { transition: none; } .msg .reply-hint { position: absolute; right: -2.375rem; top: 50%; transform: translateY(-50%); width: 1.875rem; height: 1.875rem; border-radius: 50%; background: rgba(0, 0, 0, .28); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; pointer-events: none; } .msg .reply-hint svg { width: 1.125rem; height: 1.125rem; } .quote { border-left: 2px solid var(--color-primary); padding: .125rem .375rem .1875rem; margin: .125rem 0 .3125rem; border-radius: .25rem; background: var(--color-primary-tint); font-size: calc(var(--message-text-size) - .0625rem); line-height: 1.25; cursor: pointer; max-width: 100%; } .quote .qt { color: var(--color-primary); font-weight: 500; font-size: .8125rem; } .quote .qx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem; } .msg.own .quote { border-color: var(--color-accent-own); background: rgba(0, 0, 0, .06); } .msg.own .quote .qt { color: var(--color-accent-own); } .reply-bar { display: flex; align-items: center; gap: .5rem; margin: 0 0 .375rem; padding: .375rem .375rem .375rem .75rem; border-radius: .875rem; background: var(--color-background); box-shadow: var(--shadow-footer); animation: pop-in .2s ease; } .reply-bar .rb { flex: 1; min-width: 0; border-left: 2px solid var(--color-primary); padding-left: .5rem; } .reply-bar .rt { color: var(--color-primary); font-size: .8125rem; font-weight: 500; line-height: 1.2; } .reply-bar .rx { font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .reply-bar.attach .athumb { width: 2.75rem; height: 2.75rem; border-radius: .5rem; object-fit: cover; flex: none; } .reply-bar.edit .eico { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); flex: none; } .reply-bar.edit .eico svg { width: 1.125rem; height: 1.125rem; } .msg.pending .bubble { opacity: .75; } .reply-bar .x { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-secondary); flex: none; } .reply-bar .x svg { width: 1.125rem; height: 1.125rem; } .msg.flash .bubble { animation: flash .9s ease; } @keyframes flash { 0%, 100% { box-shadow: 0 1px 2px var(--color-default-shadow); } 30% { box-shadow: 0 0 0 .25rem var(--color-primary-tint), 0 1px 2px var(--color-default-shadow); } } .row-item .ticks { width: 1rem; height: 1rem; color: var(--color-primary); flex: none; } /* a picture in a bubble */ .bubble.has-media, body.is-ios .bubble.has-media, body.is-ios .msg.own .bubble.has-media { padding: 0; width: min(18rem, calc(100vw - 4.5rem)); overflow: hidden; } /* beats the iOS padding rules: no frame around the picture */ /* the bubble is exactly the picture's width: nothing sticks out, the corners stay round */ .bubble.has-media .name { padding: .3125rem .5rem 0; } .bubble.has-media .pic { position: relative; width: 100%; min-height: 6rem; background: var(--color-background-secondary-accent); overflow: hidden; } .bubble.has-media .pic.loading { aspect-ratio: 4 / 3; } .bubble.has-media .pic.loading::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); background-size: 200% 100%; animation: pic-shimmer 1.2s ease-in-out infinite; } :root[data-theme="dark"] .bubble.has-media .pic.loading::before { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%); background-size: 200% 100%; } @keyframes pic-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } } .bubble.has-media .pic.loading .media { opacity: 0; position: absolute; inset: 0; height: 100%; } .bubble.has-media .pic.failed::after { content: "фото не завантажилось"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .8125rem; color: var(--color-text-secondary); } .bubble.has-media .media { display: block; width: 100%; max-height: min(24rem, 55vh); object-fit: cover; cursor: zoom-in; opacity: 1; transition: opacity .25s ease; } /* a tall photo is cropped to about half the screen, the viewer shows it whole */ .bubble.has-media .text { padding: .3125rem .5rem .375rem; } .bubble.has-media .meta { right: .5rem; bottom: .25rem; background: rgba(0, 0, 0, .35); color: #fff !important; padding: 0 .375rem; border-radius: .5rem; height: 1.125rem; } .bubble.has-media .text ~ .meta { background: none; padding: 0; height: 1rem; color: rgba(var(--color-text-meta-rgb), .75) !important; } /* a caption: the time sits at the end of its last line, like a plain bubble */ .msg.own .bubble.has-media .text ~ .meta { color: var(--color-message-meta-own) !important; } .bubble.has-media .quote { margin: .375rem .5rem 0; } /* typing dots */ .typing-dots { display: inline-flex; gap: .25rem; align-items: center; height: 1.25rem; padding: 0 .25rem; } .typing-dots i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--color-text-secondary); animation: dots 1.2s infinite ease-in-out; } .typing-dots i:nth-child(2) { animation-delay: .2s; } .typing-dots i:nth-child(3) { animation-delay: .4s; } @keyframes dots { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-.25rem); opacity: 1; } } /* voice bubble */ .voice { display: flex; align-items: center; gap: .625rem; min-width: 14rem; padding: .25rem 0 .375rem; } .voice .play { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; flex: none; } .msg.own .voice .play { background: var(--color-accent-own); } :root[data-theme="dark"] .msg.own .voice .play { background: #fff; color: var(--color-background-own); } .voice .play svg { width: 1.25rem; height: 1.25rem; } .voice .wave { display: flex; align-items: center; gap: 2px; height: 1.5rem; flex: 1; cursor: pointer; } .voice .wave i { flex: 1; min-width: 2px; max-width: 3px; border-radius: 1.5px; background: var(--color-primary); opacity: .3; transition: opacity .1s linear; } .voice .wave i.played { opacity: 1; } .msg.own .voice .wave i { background: var(--color-accent-own); } .voice .dur { font-size: .75rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; margin-top: .125rem; } .msg.own .voice .dur { color: var(--color-message-meta-own); } .voice .info { flex: 1; min-width: 0; } /* video circle bubble */ .msg .circle-wrap { width: 15rem; height: 15rem; max-width: 70vw; max-height: 70vw; border-radius: 50%; overflow: hidden; position: relative; background: #000; box-shadow: 0 1px 2px var(--color-default-shadow); } .msg .circle-wrap video { width: 100%; height: 100%; object-fit: cover; } .msg .circle-wrap .cplay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .25); } .msg .circle-wrap .cplay svg { width: 3rem; height: 3rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); } .msg .circle-wrap .cdur { position: absolute; left: .625rem; bottom: .625rem; padding: .125rem .5rem; border-radius: .75rem; background: rgba(0, 0, 0, .35); color: #fff; font-size: .75rem; } .msg .circle-wrap .cring { position: absolute; inset: 0; pointer-events: none; } .msg .circle-wrap .cring circle { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .2s linear; } .msg.circle { margin-bottom: .5rem; } .msg.circle .meta-out { font-size: .75rem; color: #fff; background: var(--action-message-bg); padding: .125rem .375rem; border-radius: .5rem; margin: 0 .375rem .25rem; align-self: flex-end; } /* the composer */ .composer-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 11; padding: 0 .5rem calc(.5rem + var(--safe-bottom)); transition: transform var(--layer-transition), padding-bottom 260ms cubic-bezier(.32, .72, 0, 1); } body.keyboard-visible .composer-wrap { padding-bottom: .5rem; } :root { --composer-main: 3.25rem; } .composer { display: flex; align-items: flex-end; gap: .5rem; } .composer .field { flex: 1; min-width: 0; display: flex; align-items: flex-end; background: var(--color-bubble-in); border-radius: 1.625rem; box-shadow: var(--shadow-footer); position: relative; padding: 0 .75rem 0 .25rem; } .composer .field .abtn { width: 3.25rem; min-height: var(--composer-main); align-self: stretch; display: grid; place-items: center; color: var(--color-text-secondary); flex: none; order: -1; margin-left: -.25rem; padding: 0; touch-action: manipulation; } .composer .field .abtn svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.8; } :root[data-theme="dark"] .composer .field { box-shadow: none; } :root[data-theme="dark"] .composer .main { box-shadow: none; } .composer textarea::placeholder { color: #8E8E93; } .composer .field .abtn[hidden] + textarea, .composer textarea:first-child { padding-left: .875rem; } .composer textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: calc((var(--composer-main) - var(--composer-text-size) * 1.3125) / 2) .5rem calc((var(--composer-main) - var(--composer-text-size) * 1.3125) / 2) .25rem; font-size: var(--composer-text-size); line-height: 1.3125; max-height: 10rem; overflow: hidden; caret-color: var(--color-text); transition: height 100ms ease; } .composer textarea.overflown { overflow-y: auto; } .composer textarea::placeholder { color: var(--color-placeholders); } .composer .main { width: var(--composer-main); height: var(--composer-main); border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--shadow-footer); position: relative; overflow: hidden; } .composer .main svg { width: 1.625rem; height: 1.625rem; position: absolute; } .composer .main .i-send { transform: translateX(-1px); } .composer .main .i-send { animation: hide-icon .4s forwards ease-out; } .composer .main .i-mic { animation: grow-icon .4s ease-out; } .composer .main.send .i-send { animation: grow-icon .4s ease-out; } .composer .main.send .i-mic { animation: hide-icon .4s forwards ease-out; } .composer .main.send .i-cam { display: none; } .composer .main.cam .i-mic { display: none; } .composer .main.cam .i-cam { animation: grow-icon .4s ease-out; } .composer .main:not(.cam) .i-cam { display: none; } .composer .main.send .i-mic { display: none; } @keyframes grow-icon { 0% { transform: scale(.5); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } } @keyframes hide-icon { from { transform: scale(1); opacity: .4; } to { transform: scale(.5); opacity: 0; } } .composer .main:active { transform: scale(.94); } .random-bar { flex: none; display: flex; gap: .375rem; padding: .375rem .5rem .4375rem; background: var(--color-header); box-shadow: 0 .5px 0 var(--color-borders); position: relative; z-index: 10; } /* three tiles: icon over a small label (2026-10-02) — leave, three hours apart, the next one */ .random-bar .rb-btn { flex: 1 1 0; min-width: 0; height: 2.875rem; padding: 0 .25rem; border-radius: .875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem; font-size: .6875rem; font-weight: 600; line-height: 1; white-space: nowrap; position: relative; overflow: hidden; transition: transform .1s ease, opacity .2s ease; } .random-bar .rb-btn svg { width: 1.25rem; height: 1.25rem; flex: none; } .random-bar .rb-btn:active { transform: scale(.97); } .random-bar .rb-btn.end { background: #e5393518; color: var(--color-error); } .random-bar .rb-btn.mute { background: #ff95001f; color: #f08c00; } .random-bar .rb-btn.next { flex-grow: 1.35; background: var(--color-primary); color: #fff; } .random-bar.holding .rb-btn { display: none; } /* the first minute: one capsule that drains instead of three dead buttons */ .random-bar .rb-hold { flex: 1; min-width: 0; height: 2.25rem; border-radius: 1.125rem; display: flex; align-items: center; justify-content: center; gap: .375rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; position: relative; overflow: hidden; } .random-bar .rb-hold[hidden] { display: none; } .random-bar .rb-hold i { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; opacity: .14; transition: width 1s linear; } .random-bar .rb-hold svg { width: 1rem; height: 1rem; flex: none; position: relative; } .random-bar .rb-hold span { position: relative; overflow: hidden; text-overflow: ellipsis; } .closed-note { padding: .625rem 1rem; text-align: center; font-size: .9375rem; color: var(--color-text-secondary); background: color-mix(in srgb, var(--color-background) 92%, transparent); border-radius: var(--border-radius-messages); box-shadow: var(--shadow-footer); } /* voice recording bar */ .recbar { position: absolute; inset: 0; z-index: 3; display: flex; gap: .25rem; align-items: center; border-radius: 1.625rem; background: var(--color-background); } .recbar .side { width: 2.75rem; height: var(--composer-main); display: grid; place-items: center; color: var(--color-text-secondary); flex: none; } .recbar .side.del { color: var(--color-error); } .recbar .side svg { width: 1.5rem; height: 1.5rem; } .recbar .rpill { flex: 1; display: flex; gap: .625rem; align-items: center; height: 2.5rem; margin-right: .375rem; padding: 0 .75rem 0 .5rem; border-radius: var(--composer-control-radius); background: color-mix(in srgb, var(--color-primary) 10%, transparent); min-width: 0; } .recbar .dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--color-error); animation: grow-control .2s ease-out, rec-pulse 1s infinite alternate ease-in-out; flex: none; } @keyframes rec-pulse { from { opacity: 1; } to { opacity: .4; } } @keyframes grow-control { from { transform: scale(.5); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } to { transform: scale(1); } } .recbar .rwave { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 3px; overflow: hidden; justify-content: flex-end; } .recbar .rwave i { width: 3px; border-radius: 1.5px; background: var(--color-primary); flex: none; min-height: 3px; } .recbar .timer { font-size: .875rem; font-variant-numeric: tabular-nums; line-height: 1.375rem; color: var(--color-text); flex: none; } /* video circle recorder */ .circ-rec { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 1rem; } .circ-rec .ring { width: min(80vw, 22rem); height: min(80vw, 22rem); border-radius: 50%; overflow: hidden; position: relative; background: #000; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); } .circ-rec video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .circ-rec video.back { transform: none; } .circ-rec .timer { color: #fff; font-size: 1.25rem; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .5rem; } .circ-rec .timer .dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--color-error); animation: rec-pulse 1s infinite alternate; } .circ-rec .ctrls { display: flex; gap: 2rem; align-items: center; } .circ-rec .cbtn { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; display: grid; place-items: center; } .circ-rec .cbtn.big { width: 4.5rem; height: 4.5rem; background: var(--color-error); } .circ-rec .cbtn.send { background: var(--color-primary); } .circ-rec .cbtn svg { width: 1.75rem; height: 1.75rem; } .circ-rec .arc { position: absolute; inset: 0; pointer-events: none; } .circ-rec .arc circle { fill: none; stroke: #fff; stroke-width: 4; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .5s linear; } /* scroll-down FAB */ .scroll-down { position: absolute; right: .5rem; bottom: calc(var(--composer-reserve) + .5rem); z-index: 12; width: 2.875rem; height: 2.875rem; border-radius: 50%; background: var(--color-background); color: var(--color-composer-button); box-shadow: 0 1px 2px var(--color-default-shadow); display: grid; place-items: center; transform: translateY(4.5rem); opacity: 0; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; } .scroll-down:not(.revealed) { pointer-events: none; visibility: hidden; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease, visibility 0s linear .25s; } .scroll-down.revealed { transform: none; opacity: 1; } .scroll-down svg { width: 1.75rem; height: 1.75rem; } .scroll-down i { position: absolute; top: -.6875rem; min-width: 1.5rem; height: 1.5rem; padding: 0 .4375rem; border: 1px solid var(--color-background); border-radius: .75rem; background: var(--color-active); color: #fff; font-size: .875rem; font-weight: 500; font-style: normal; line-height: 1.5rem; } /* ---- floating search bar --------------------------------------------------- */ .search-float { position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--tabbar-space) + .5rem); z-index: 6; display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem .5rem .875rem; border-radius: 1rem; background: var(--color-background); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .18); font-size: .875rem; animation: pop-in .3s cubic-bezier(.34, 1.56, .64, 1); } .search-float .grow { flex: 1; min-width: 0; } .search-float b { display: block; } @keyframes pop-in { from { transform: translateY(1rem); opacity: 0; } to { transform: none; opacity: 1; } } /* ---- random search screen ---------------------------------------------------- */ .hero { text-align: center; padding: 2rem 1.5rem 1rem; } .hero .mark { font-size: 4rem; line-height: 1; margin-bottom: .75rem; } .hero h1 { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; } .hero .lead { font-size: .9375rem; } .hero img.mark { width: 5rem; height: 5rem; border-radius: 50%; margin: 0 auto .75rem; } .wait-box { display: flex; align-items: center; gap: .875rem; } .wait-box .clock { font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 600; } /* ---- the living hero: Telegram's animated wallpaper behind the emoji ------ */ .hero.anim { position: relative; overflow: hidden; margin: .5rem .75rem .75rem; padding: 2.75rem 1.25rem 1.5rem; border-radius: 1.5rem; color: #fff; isolation: isolate; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18); background: var(--hero-base); } /* the colour is there from the first frame: no black while the layers warm up */ .hero.anim h1, .hero.anim .lead { color: #fff; position: relative; z-index: 2; } .hero.anim .lead { opacity: .9; } /* One painted layer of soft colour spots, drifting as a whole on the GPU. The four blurred, separately animated blobs it replaces (2026-09-24) took the first second to composite and showed as a black shiver. */ .hero.anim .blobs { position: absolute; inset: -30%; z-index: 0; background: radial-gradient(circle at 18% 22%, var(--hero-a) 0, transparent 38%), radial-gradient(circle at 82% 18%, var(--hero-b) 0, transparent 36%), radial-gradient(circle at 28% 88%, var(--hero-c) 0, transparent 40%), radial-gradient(circle at 86% 84%, var(--hero-d) 0, transparent 36%), var(--hero-base); will-change: transform; animation: blobs-drift 16s ease-in-out infinite alternate; } .hero.anim .blob { display: none; } @keyframes blobs-drift { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 100% { transform: translate(4%, -3%) rotate(6deg) scale(1.08); } } .hero.anim .blob:nth-child(1) { left: -20%; top: -30%; background: var(--hero-a); animation-duration: 13s; } .hero.anim .blob:nth-child(2) { right: -25%; top: -10%; background: var(--hero-b); animation-duration: 17s; animation-delay: -4s; } .hero.anim .blob:nth-child(3) { left: 10%; bottom: -45%; background: var(--hero-c); animation-duration: 15s; animation-delay: -8s; } .hero.anim .blob:nth-child(4) { right: 5%; bottom: -30%; width: 55%; background: var(--hero-d); animation-duration: 19s; animation-delay: -12s; } @keyframes blob { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(18%, 12%) scale(1.15); } 66% { transform: translate(-12%, 20%) scale(.9); } 100% { transform: translate(8%, -14%) scale(1.1); } } .hero.anim .mark { position: relative; z-index: 2; width: 5.5rem; height: 5.5rem; margin: 0 auto .875rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 .75rem 1.5rem rgba(0, 0, 0, .25); animation: float 3.2s ease-in-out infinite; } .hero.anim .mark svg { width: 2.75rem; height: 2.75rem; color: #fff; stroke-width: 1.8; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); } @keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-.5rem) rotate(3deg); } } .hero.anim .halo { position: absolute; left: 50%; top: 5.25rem; width: 9rem; height: 9rem; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%); animation: halo 3.2s ease-in-out infinite; z-index: 1; } @keyframes halo { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; } 50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } } .hero.anim .bits { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .hero.anim .bit { position: absolute; bottom: -1.5rem; opacity: 0; animation: bit 7s linear infinite; will-change: transform, opacity; color: #fff; } .hero.anim .bit svg { width: var(--sz, 1rem); height: var(--sz, 1rem); stroke-width: 1.8; opacity: .8; } @keyframes bit { 0% { transform: translateY(0) scale(.6) rotate(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .5; } 100% { transform: translateY(-14rem) scale(1.1) rotate(25deg); opacity: 0; } } .hero.flirt-bg { --hero-base: #c2337a; --hero-a: #ff5c7a; --hero-b: #7b4dff; --hero-c: #ff9a5c; --hero-d: #ff2d95; } .hero.calm-bg { --hero-base: #2a9d8f; --hero-a: #48cae4; --hero-b: #90e0ef; --hero-c: #52b788; --hero-d: #ffd166; } .hero.limit-bg { --hero-base: #d1495b; --hero-a: #ff7b54; --hero-b: #ffb26b; --hero-c: #ff5c7a; --hero-d: #7b4dff; } .hero.wait-bg { --hero-base: #c77d1a; --hero-a: #ffb703; --hero-b: #fb8500; --hero-c: #ffd166; --hero-d: #ef476f; } .hero.pause-bg { --hero-base: #4a4e69; --hero-a: #6c757d; --hero-b: #8d99ae; --hero-c: #5c677d; --hero-d: #9a8c98; } .hero.anim .btn { position: relative; z-index: 2; margin-top: 1rem; background: #fff; color: #1c1c1e; } .hero.anim .btn.plain { background: transparent; color: #fff; margin-top: .25rem; } .hero.anon-bg { --hero-base: #2d5fd4; --hero-a: #3390ec; --hero-b: #00c6ff; --hero-c: #7b4dff; --hero-d: #34c759; } @media (prefers-reduced-motion: reduce) { .hero.anim .blob, .hero.anim .mark, .hero.anim .halo, .hero.anim .bit { animation: none !important; } } /* ---- flirt ---------------------------------------------------------------------- */ .deck { position: relative; height: calc(100% - 6.5rem); margin: .5rem .75rem 0; } .fcard { position: absolute; inset: 0; border-radius: 1.25rem; overflow: hidden; background: var(--color-background); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18); touch-action: none; will-change: transform; transition: transform .38s cubic-bezier(.22, .61, .36, 1), opacity .38s ease; } .fcard.dragging { transition: none; } .fcard.fly-left { transform: translate(-140%, -12%) rotate(-28deg) !important; opacity: 0; transition: transform .42s cubic-bezier(.3, .7, .4, 1), opacity .3s ease .12s; } .fcard.fly-right { transform: translate(140%, -12%) rotate(28deg) !important; opacity: 0; transition: transform .42s cubic-bezier(.3, .7, .4, 1), opacity .3s ease .12s; } .fcard.under { transform: scale(.94) translateY(1.25rem); opacity: .85; pointer-events: none; } .fcard.under .stamp { opacity: 0 !important; } .fcard .fphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #ddd; } .fcard .fdots { position: absolute; top: .5rem; left: .75rem; right: .75rem; display: flex; gap: .25rem; z-index: 2; } .fcard .fdots i { flex: 1; height: .1875rem; border-radius: .09375rem; background: rgba(255, 255, 255, .45); } .fcard .fdots i.on { background: #fff; } .fcard .fshade { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1rem 1.125rem; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); color: #fff; } .fcard .fname { font-size: 1.625rem; font-weight: 700; line-height: 1.15; display: flex; align-items: baseline; gap: .5rem; } .fcard .fname span { font-weight: 400; font-size: 1.25rem; opacity: .9; } .fcard .ftag { font-size: .875rem; opacity: .9; margin-top: .125rem; } .fcard .fbio { font-size: .9375rem; margin-top: .375rem; line-height: 1.35; max-height: 5.5rem; overflow: hidden; white-space: pre-wrap; position: relative; } .fbio .more { color: var(--color-primary, #3390ec); font-weight: 600; white-space: nowrap; } .fbio.open { max-height: 45vh; overflow: auto; } .fcard .fliked { position: absolute; top: 1.25rem; left: .75rem; padding: .25rem .625rem; border-radius: 1rem; background: rgba(255, 92, 122, .9); color: #fff; font-size: .8125rem; font-weight: 600; z-index: 2; } .fcard .stamp { position: absolute; top: 2.5rem; padding: .25rem .75rem; border: 3px solid; border-radius: .5rem; font-size: 1.75rem; font-weight: 800; letter-spacing: .05em; opacity: 0; transform: rotate(-15deg); z-index: 3; } .fcard .stamp.like { left: 1.25rem; color: #4cd964; border-color: #4cd964; } .fcard .stamp.nope { right: 1.25rem; color: #ff3b30; border-color: #ff3b30; transform: rotate(15deg); } .fcard .tapzone { position: absolute; top: 0; bottom: 8rem; width: 50%; z-index: 1; } .fcard .tapzone.r { right: 0; } .deck-body { display: flex; flex-direction: column; } .deck .empty-hero { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; } .fcard.skeleton-card { background: linear-gradient(90deg, var(--color-background) 25%, var(--color-background-secondary-accent) 50%, var(--color-background) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; box-shadow: none; } .deck-body .deck { flex: 1; min-height: 0; height: auto; margin: .5rem .75rem 0; } .factions { display: flex; justify-content: center; align-items: flex-start; gap: 1.5rem; padding: .75rem 0 calc(.5rem + var(--safe-bottom)); } .factions button { display: flex; flex-direction: column; align-items: center; gap: .375rem; color: var(--color-text-secondary); font-size: .75rem; font-weight: 500; -webkit-tap-highlight-color: transparent; } .factions button::before { content: ""; } .factions button svg { width: 2rem; height: 2rem; stroke-width: 2.5; } .factions .nope svg, .factions .like svg { display: grid; place-items: center; padding: 1.125rem; box-sizing: content-box; border-radius: 50%; transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease; } .factions button:active svg { transform: scale(.86); } .factions .nope svg { color: #fff; background: linear-gradient(145deg, #6e8efb, #4f6df5 60%, #3b5bdb); box-shadow: 0 .5rem 1.25rem rgba(79, 109, 245, .45); } .factions .like svg { color: #fff; background: linear-gradient(145deg, #ff6b8b, #ff2d55 55%, #e0245e); box-shadow: 0 .5rem 1.25rem rgba(255, 45, 85, .5); } .factions .like svg { width: 2.25rem; height: 2.25rem; padding: 1.25rem; } .factions .like { margin-top: -.25rem; } .photo-grid { display: flex; gap: .5rem; padding: 0 .75rem .625rem; } .photo-slot { flex: 1; aspect-ratio: 3 / 4; border-radius: .75rem; background: var(--color-background); border: 1.5px dashed var(--color-borders); display: grid; place-items: center; color: var(--color-text-secondary); position: relative; overflow: hidden; } .photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* absolute: a percentage height inside an aspect-ratio box is not definite in WebKit */ .photo-slot .x { position: absolute; top: .25rem; right: .25rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; } .photo-slot .x svg { width: .875rem; height: .875rem; } .photo-slot input { position: absolute; inset: 0; opacity: 0; } .photo-slot svg.plus { width: 1.75rem; height: 1.75rem; } .photo-slot .spinner { position: absolute; } .match-splash { position: fixed; inset: 0; z-index: 1300; background: linear-gradient(160deg, #ff5c7a, #7b4dff); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; text-align: center; animation: fade-in .3s ease; } .match-splash h2 { font-size: 2.25rem; margin: 0; font-weight: 800; letter-spacing: -.02em; animation: pop-in .5s cubic-bezier(.34, 1.56, .64, 1); } .match-splash .pair { display: flex; gap: -1rem; } .match-splash .pair .avatar { width: 6rem; height: 6rem; border: 3px solid #fff; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3); } .match-splash .pair .avatar + .avatar { margin-left: -1rem; } .match-splash .btn { max-width: 18rem; background: #fff; color: #7b4dff; } .match-splash .btn.plain { background: transparent; color: #fff; } .profile-view { position: relative; } .profile-view .pphotos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; } .profile-view .pphotos img { width: 100%; flex: none; scroll-snap-align: start; aspect-ratio: 3 / 4; object-fit: cover; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ---- admin cards ------------------------------------------------------------------ */ .acard { background: var(--color-background); margin: 0 .75rem .5rem; border-radius: var(--border-radius-default-small); padding: .625rem .75rem; } .acard .head { display: flex; justify-content: space-between; gap: .5rem; font-size: .8125rem; font-weight: 500; color: var(--color-primary); } .acard .head time, .acard .meta { font-size: .75rem; color: var(--color-text-secondary); font-weight: 400; } .adm-ask.off { opacity: .55; } .adm-ask .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acard .meta { margin-top: .25rem; display: flex; align-items: center; gap: .3125rem; } /* the author's earlier posts under a moderation card, folded */ .acard .prev, .card .prev { margin-top: .375rem; font-size: .8125rem; color: var(--color-text-secondary); } .acard .prev summary, .card .prev summary { cursor: pointer; list-style: none; } .acard .prev summary::before, .card .prev summary::before { content: "▸ "; } .acard .prev[open] summary::before, .card .prev[open] summary::before { content: "▾ "; } .acard .prev-line, .card .prev-line { margin: .25rem 0 0 .875rem; line-height: 1.35; } .acard .prev-line b { font-weight: 600; } .acard .prev-line i { font-style: normal; color: var(--color-text); } .acard .meta svg { width: .875rem; height: .875rem; flex: none; } /* compact: five of them have to fit on one phone-width card */ .acard .actions .pill { padding: .25rem .5625rem; border-radius: 1rem; font-weight: 600; font-size: .75rem; gap: .25rem; white-space: nowrap; } .acard .actions .pill svg { width: .875rem; height: .875rem; } .acard .meta.tap { cursor: pointer; border-radius: .375rem; } .acard .meta.tap:active { background: var(--color-chat-hover); } .acard .meta .chev { margin-left: auto; width: .875rem; height: .875rem; color: var(--color-gray); } .pill svg { width: 1rem; height: 1rem; flex: none; } .empty .mark svg { width: 3rem; height: 3rem; color: var(--color-text-secondary); opacity: .6; } .acard .text { margin-top: .5rem; white-space: pre-wrap; word-break: break-word; line-height: 1.35; border-radius: .375rem; } /* text that just changed: a wash of the accent that fades; a card that was decided: slides away */ .acard .text.flash { animation: text-flash 1.4s ease-out; } .acard .text.folded { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .acard .unfold { display: inline-flex; align-items: center; gap: .125rem; margin-top: .375rem; padding: .25rem .5rem .25rem .625rem; border-radius: .875rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .8125rem; font-weight: 600; position: relative; overflow: hidden; } .acard .unfold svg { width: .875rem; height: .875rem; transform: rotate(90deg); transition: transform .2s ease; } .acard .unfold.open svg { transform: rotate(-90deg); } @keyframes text-flash { 0% { background: color-mix(in srgb, var(--color-primary) 22%, transparent); box-shadow: 0 0 0 .375rem color-mix(in srgb, var(--color-primary) 22%, transparent); } 100% { background: transparent; box-shadow: 0 0 0 .375rem transparent; } } .acard.gone { animation: card-gone .3s ease-in forwards; pointer-events: none; } @keyframes card-gone { to { opacity: 0; transform: translateX(2rem); } } .acard .due { margin-top: .5rem; color: var(--color-primary); font-size: .875rem; font-weight: 600; } .acard .actions { display: flex; flex-wrap: wrap; gap: .3125rem; margin-top: .5rem; } .acard .ph { display: block; margin-top: .5rem; border-radius: .625rem; width: 5rem; height: 5rem; object-fit: cover; } /* a thumbnail: the whole picture is a tap away, the list stays a list */ .acard .outlook { margin-top: .375rem; color: var(--color-primary); font-weight: 500; } .acard .lines { margin-top: .5rem; border-left: 2px solid var(--color-borders); padding-left: .625rem; font-size: .9375rem; } .acard .lines .accused { color: var(--color-error); } .acard .status { font-size: .8125rem; font-weight: 500; } /* a post sent «без черги»: a gold edge and a star in the head */ .acard.paid { box-shadow: inset 0 0 0 1px #f5a62366, 0 0 0 .5px #f5a62322; background: linear-gradient(135deg, #f5a6230f, transparent 55%), var(--color-background); } .acard .paidmark { display: inline-flex; align-items: center; gap: .1875rem; margin-left: .375rem; padding: 0 .4375rem 0 .3125rem; height: 1.125rem; border-radius: .5625rem; background: linear-gradient(135deg, #ffb340, #f28b00); color: #fff; font-size: .6875rem; font-weight: 700; vertical-align: .0625rem; } .acard .paidmark svg { width: .75rem; height: .75rem; } /* «Відправити зараз» on a post still with the moderator: a gold pill among the actions, a grey line under them */ .acard .pill.gold { background: linear-gradient(135deg, #ffb340, #f28b00); color: #fff; box-shadow: 0 .25rem .75rem rgba(245, 166, 35, .35); } .acard .pill.gold svg { width: .9375rem; height: .9375rem; } .acard .pill.gold:disabled { opacity: .55; box-shadow: none; } .acard .meta.hint { margin-top: .375rem; font-size: .75rem; line-height: 1.35; } .acard .status.pending { color: var(--color-warning); } .acard .status.published { color: var(--color-green); } .acard .status.rejected, .acard .status.deleted { color: var(--color-error); } .acard .status.withdrawn { color: var(--color-text-secondary); } .stats { display: flex; flex-wrap: wrap; row-gap: .5rem; text-align: center; padding: .625rem .25rem; } /* the moderator's numbers: a card of tile rows; the folding groups sit under a thin line each */ .statbox { padding: 0; overflow: hidden; } .stat-note { white-space: pre-line; font-size: .6875rem; line-height: 1.35; color: var(--color-text-secondary); text-align: center; padding: 0 .875rem .5rem; } .stat-note:empty { display: none; } .stat-head { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .875rem; border: 0; border-top: 1px solid var(--color-borders); background: none; color: var(--color-text-secondary); font: inherit; font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; text-align: left; } .stat-head .chev { margin-left: auto; width: 1rem; height: 1rem; color: var(--color-gray); transition: transform .2s ease; } .stat-head.open .chev { transform: rotate(90deg); } .stat-panel { display: none; } .stat-panel.open { display: flex; } .stats > div { flex: 1 1 25%; min-width: 25%; } .stats b { display: block; font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; } .stats > div > span { display: block; font-size: .625rem; line-height: 1.2; color: var(--color-text-secondary); padding: 0 .125rem; } /* the labels only: the odometer inside is made of spans too */ /* the «online now» pill in the moderation header: a breathing green dot and the odometer count */ .live { display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .75rem 0 .625rem; border-radius: 1rem; background: rgba(52, 199, 89, .14); color: #34c759; font-size: .8125rem; font-weight: 600; white-space: nowrap; } .live .dot { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #34c759; flex: none; } .live .dot::after { content: ""; position: absolute; inset: -.25rem; border-radius: 50%; border: .125rem solid #34c759; opacity: 0; animation: live-pulse 1.8s ease-out infinite; } @keyframes live-pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } } .live b { font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .live b.odo { display: inline-flex; height: 1em; } .live b .odo-col { display: block; width: auto; min-width: .6em; height: 1em; line-height: 1; overflow: hidden; text-align: center; } .live b .odo-strip { display: block; margin: 0; padding: 0; background: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .live b .odo-d { display: block; height: 1em; line-height: 1; } /* the odometer: digit columns one character wide, each a strip of 0–9 that slides to the digit shown */ .stats b.odo { display: flex; justify-content: center; align-items: center; height: 1.2em; line-height: 1; } /* the class names are prefixed on purpose: a bare .strip is the app's orange warning bar */ .stats b .odo-col { display: block; width: auto; min-width: .6em; height: 1em; line-height: 1; overflow: hidden; text-align: center; } .stats b .odo-strip { display: block; margin: 0; padding: 0; background: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } /* no will-change (2026-09-27): a layer per digit weighed on the iPhone's scroll */ .stats b .odo-d { display: block; height: 1em; line-height: 1; } /* and a short flash of the accent on the whole number, or a badge, that just changed */ .stats b.bump { animation: stat-flash .9s ease-out; } .ftabs i.bump { animation: stat-bump .6s cubic-bezier(.34, 1.56, .64, 1); } @keyframes stat-flash { 0%, 40% { color: var(--color-primary); } 100% { color: inherit; } } @keyframes stat-bump { 0% { transform: scale(1.3); } 100% { transform: scale(1); } } .rows.acts .row-item.act { min-height: 3rem; } .rows.acts .row-item.act .avatar { width: 2.125rem; height: 2.125rem; font-size: .875rem; } .fq-photos { display: flex; gap: .375rem; margin-top: .5rem; } .fq-photos img { width: 6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .5rem; } /* ---- modal, sheet, toast, viewer ---------------------------------------- */ #app > .modal-root { position: absolute; } .modal-root { position: fixed; inset: 0; z-index: 1510; display: flex; align-items: center; justify-content: center; } .modal-root .backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .25); opacity: 0; transition: opacity .2s ease; } .modal-root.open .backdrop { opacity: 1; } .modal-dialog { position: relative; width: calc(100vw - 3rem); max-width: 24rem; border-radius: var(--border-radius-modal); background: var(--color-background); box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); padding: 1.3125rem 1.375rem 1rem; transform: translate3d(0, -1rem, 0); opacity: 0; transition: transform .2s ease, opacity .2s ease; } .modal-root.open .modal-dialog { transform: none; opacity: 1; } .modal-root.closing .modal-dialog { transform: translate3d(0, 1rem, 0); opacity: 0; } .modal-dialog .mtitle { font-size: 1.25rem; font-weight: 500; margin-bottom: .5rem; } .modal-dialog .mtext { white-space: pre-line; font-size: .9375rem; line-height: 1.4; color: var(--color-text); white-space: pre-wrap; } .modal-dialog input { width: 100%; margin-top: .75rem; padding: .625rem .75rem; border: 1px solid var(--color-borders); border-radius: .625rem; background: var(--color-background); outline: 0; font-size: 1rem; } .modal-dialog input:focus { border-color: var(--color-primary); } .modal-dialog textarea { width: 100%; margin-top: .75rem; padding: .625rem .75rem; border: 1px solid var(--color-borders); border-radius: .625rem; background: var(--color-background); outline: 0; font-size: 1rem; line-height: 1.35; resize: vertical; min-height: 9rem; max-height: 50vh; } .modal-dialog textarea:focus { border-color: var(--color-primary); } /* the queue's university capsules: a name and how many of the queue it is */ .pills.caps { padding: .5rem .75rem .25rem; gap: .375rem; } /* the universities of the chosen city, a step in from the cities above */ .pills.caps.sub { padding-top: .125rem; padding-bottom: .375rem; } .pills.caps.sub .pill { font-size: .8125rem; padding: .3125rem .5625rem .3125rem .625rem; } .pills.caps .pill { padding: .375rem .625rem .375rem .75rem; font-size: .875rem; font-weight: 600; gap: .375rem; } .pills.caps .capn { font-style: normal; font-weight: 700; font-size: .75rem; min-width: 1.125rem; padding: 0 .3125rem; border-radius: .625rem; background: rgba(0, 0, 0, .1); text-align: center; } .pills.caps .pill.on .capn { background: rgba(255, 255, 255, .28); } /* a queued post the moderator ticked, and the tag on one they rewrote */ .acard.marked { box-shadow: inset .1875rem 0 0 var(--color-primary); } .acard .head .edited { color: var(--color-primary); font-weight: 500; } /* what became of a queued post: said on the card, green when it went, red and staying when it did not */ .acard .result { padding: .625rem .75rem; font-weight: 600; font-size: .9375rem; } .acard .result.ok { color: #34c759; } .acard .result.bad { color: var(--color-error); } .acard .actions button[disabled] { opacity: .5; pointer-events: none; } :root[data-theme="dark"] .pills.caps .capn { background: rgba(255, 255, 255, .14); } .modal-dialog .pills { padding: .5rem 0 0; } .modal-dialog .mbtns { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; } .modal-dialog .mbtns button { padding: .5rem .75rem; border-radius: .5rem; color: var(--color-primary); font-weight: 500; font-size: .9375rem; text-transform: uppercase; letter-spacing: .02em; position: relative; overflow: hidden; } .modal-dialog .mbtns button.danger { color: var(--color-error); } .sheet-root { position: fixed; inset: 0; z-index: 1520; } .qsheet-root { position: absolute; } /* inside #app: its bottom is the box's bottom, which the keyboard moves */ .sheet-root .backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .25s ease; } .sheet-root.open .backdrop { opacity: 1; } .sheet { position: absolute; left: .5rem; right: .5rem; bottom: calc(.5rem + var(--safe-bottom)); transform: translateY(120%); transition: transform var(--layer-transition); } .sheet-root.open .sheet { transform: none; } .sheet .grp { background: var(--color-background); border-radius: .875rem; overflow: hidden; margin-bottom: .5rem; } .sheet .srow { width: 100%; display: flex; align-items: center; gap: .875rem; height: 3.5rem; padding: 0 1.25rem; font-size: 1.0625rem; color: var(--color-primary); position: relative; overflow: hidden; } .sheet .srow.danger { color: var(--color-error); } .sheet .srow.text { color: var(--color-text); } .sheet .srow svg { width: 1.5rem; height: 1.5rem; } .sheet .srow + .srow { box-shadow: inset 0 .5px 0 var(--color-borders); } .sheet .cancel { font-weight: 600; justify-content: center; } /* the question / first-line sheet: rises from the bottom, sits on the keyboard */ .qsheet { position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem 1rem calc(.75rem + var(--safe-bottom)); border-radius: 1.25rem 1.25rem 0 0; background: var(--color-background); box-shadow: 0 -.5rem 2rem rgba(0, 0, 0, .25); transform: translateY(110%); transition: transform var(--layer-transition); } .sheet-root.open .qsheet { transform: none; } .qsheet .qhead { display: flex; align-items: center; gap: .625rem; margin-bottom: .625rem; } .qsheet .qhead .avatar { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; flex: none; } .qsheet .qhead .t { flex: 1; min-width: 0; line-height: 1.2; } .qsheet .qhead .t b { display: block; font-size: 1rem; font-weight: 700; } .qsheet .qhead .t span { display: block; font-size: .75rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qsheet .qx { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-background-secondary); color: var(--color-text-secondary); position: relative; overflow: hidden; } .qsheet .qx svg { width: 1.125rem; height: 1.125rem; } .qsheet textarea { display: block; width: 100%; box-sizing: border-box; min-height: 5rem; max-height: 30vh; padding: .625rem .75rem; border: 0; border-radius: .75rem; background: var(--color-background-secondary); color: var(--color-text); font: inherit; font-size: 1.0625rem; line-height: 1.4; outline: 0; resize: none; -webkit-text-fill-color: var(--color-text); } .qsheet textarea::placeholder { color: var(--color-placeholders); -webkit-text-fill-color: var(--color-placeholders); } .qsheet textarea { caret-color: transparent; } .sheet-root.settled .qsheet textarea { caret-color: var(--color-primary); } .qsheet .qquote { margin: 0 0 .5rem; padding: .5rem .75rem; border-left: 3px solid #8b7cff; border-radius: .5rem; background: var(--color-background-secondary); font-size: .9375rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .qsheet .qfoot { display: flex; align-items: center; gap: .625rem; margin-top: .625rem; } .qsheet .qfoot .cnt { font-size: .75rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .qsheet .qfoot .cnt.near { color: var(--color-warning); } .qsheet .qfoot .cnt.over { color: var(--color-error); font-weight: 700; } .qsheet .qgo { margin-left: auto; display: inline-flex; align-items: center; gap: .375rem; height: 2.625rem; padding: 0 1rem; border-radius: 1.3125rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; font-size: .9375rem; font-weight: 700; position: relative; overflow: hidden; box-shadow: 0 .375rem 1rem rgba(90, 63, 214, .35); transition: opacity .2s ease; } .qsheet .qgo:disabled { opacity: .45; box-shadow: none; } .qsheet .qgo svg { width: 1.0625rem; height: 1.0625rem; } /* the filter sheet: chips in groups, the chosen one lit */ .flt-sheet { max-height: 80vh; overflow-y: auto; } .flt-sheet .flt-grp { margin-top: .5rem; } .flt-sheet .flt-title { font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); margin: .5rem 0 .375rem; } .flt-sheet .flt-chips { display: flex; flex-wrap: wrap; gap: .375rem; } .flt-sheet .flt-chip { display: inline-flex; align-items: center; gap: .375rem; height: 2.125rem; padding: 0 .5rem 0 .75rem; border-radius: 1.0625rem; background: var(--color-background-secondary); color: var(--color-text); font-size: .875rem; font-weight: 600; position: relative; overflow: hidden; max-width: 100%; } .flt-sheet .flt-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flt-sheet .flt-chip i { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: .625rem; background: rgba(127, 127, 127, .2); font-style: normal; font-size: .6875rem; font-weight: 700; } .flt-sheet .flt-chip.on { background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; } .flt-sheet .flt-chip.on i { background: rgba(255, 255, 255, .25); } /* the link sheet */ .qsheet .avatar.lk { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; } .qsheet .avatar.lk svg { width: 1.25rem; height: 1.25rem; } .lsheet .lbox { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .75rem .875rem; border-radius: .875rem; background: var(--color-background-secondary); color: var(--color-primary); font-size: .9375rem; font-weight: 600; text-align: left; position: relative; overflow: hidden; } .lsheet .lbox .u { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; font-variant-numeric: tabular-nums; } .lsheet .lbox svg { flex: none; width: 1.125rem; height: 1.125rem; opacity: .8; } .lsheet .lrow { display: flex; gap: .5rem; margin-top: .625rem; } .lsheet .lrow .qgo { flex: 1; margin: 0; } .lsheet .qgo.ghost { background: var(--color-primary-tint); color: var(--color-primary); box-shadow: none; } .lsheet .lnote { margin-top: .75rem; padding: .625rem .75rem; border-radius: .75rem; background: var(--color-background-secondary); line-height: 1.35; } .lsheet .lnote b { display: block; font-size: .8125rem; margin-bottom: .125rem; } .lsheet .lnote span { display: block; font-size: .8125rem; color: var(--color-text-secondary); } .sheet .stitle { padding: .75rem 1.25rem .5rem; font-size: .8125rem; color: var(--color-text-secondary); text-align: center; } #toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-space) + 1rem); transform: translateX(-50%); z-index: 1700; max-width: calc(100vw - 2rem); padding: .625rem 1rem; border-radius: 1rem; background: var(--color-toast-background); color: #fff; font-size: .9375rem; line-height: 1.3; text-align: center; animation: toast-in .25s cubic-bezier(.34, 1.56, .64, 1); } @keyframes toast-in { from { transform: translate(-50%, 1rem); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } #viewer { position: fixed; inset: 0; z-index: 1500; background: #000; display: flex; align-items: center; justify-content: center; animation: fade-in .2s ease; } #viewer img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; transform-origin: center center; } #viewer .vtrack { position: absolute; inset: 0; will-change: transform; } #viewer .vslide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } #viewer .vslide.l { transform: translate3d(calc(-100% - 40px), 0, 0); } #viewer .vslide.r { transform: translate3d(calc(100% + 40px), 0, 0); } #viewer .vslide[hidden] { display: none; } #viewer { touch-action: none; } #viewer.out { animation: fade-out .18s ease forwards; } #viewer .vdots { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom, 0px) + 1rem); display: flex; justify-content: center; gap: .375rem; pointer-events: none; } #viewer .vdots i { width: .4375rem; height: .4375rem; border-radius: 50%; background: rgba(255, 255, 255, .4); } #viewer .vdots i.on { background: #fff; } #viewer .vcount { margin-right: auto; align-self: center; color: #fff; font-size: .9375rem; font-weight: 600; opacity: .9; } #viewer.bare .vdots { opacity: 0; } @keyframes fade-out { to { opacity: 0; } } #viewer .vtop { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--safe-top) + .5rem) .75rem .75rem; display: flex; justify-content: flex-end; background: linear-gradient(rgba(0, 0, 0, .65), transparent); transition: opacity .2s ease, transform .2s ease; } #viewer .x { display: inline-flex; align-items: center; gap: .375rem; height: 2.375rem; padding: 0 .875rem 0 .625rem; border-radius: 1.1875rem; background: rgba(255, 255, 255, .18); color: #fff; font-size: .9375rem; font-weight: 600; position: relative; overflow: hidden; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } #viewer .x svg { width: 1.125rem; height: 1.125rem; } #viewer .vcap { position: absolute; left: 0; right: 0; bottom: 0; max-height: 40%; overflow-y: auto; padding: 1.5rem 1rem calc(var(--safe-bottom, 0px) + 1rem); color: #fff; font-size: .9375rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; background: linear-gradient(transparent, rgba(0, 0, 0, .75) 30%); transition: opacity .2s ease, transform .2s ease; } #viewer.bare .vtop { opacity: 0; transform: translateY(-.5rem); pointer-events: none; } #viewer.bare .vcap { opacity: 0; transform: translateY(.5rem); pointer-events: none; } .age-mark { font-size: 3rem; text-align: center; margin-bottom: .5rem; } .debug-log { font: .6875rem/1.35 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-all; margin: 0 .75rem; padding: .75rem; background: var(--color-background); border-radius: .625rem; user-select: text; -webkit-user-select: text; } @media (prefers-reduced-motion: reduce) { .layer, .msg, .arrive > *, .fcard { animation: none !important; transition: none !important; } } /* A desktop window is not a phone: the app keeps a phone's width, centred, whatever the window's size. */ @media (min-width: 40rem) { body { background: var(--color-background-secondary); } #app { width: 26.25rem; max-width: 100%; margin: 0 auto; box-shadow: 0 0 0 1px var(--color-borders), 0 0 2.5rem rgba(0, 0, 0, .18); } .sheet { max-width: 25.25rem; margin: 0 auto; } .modal { max-width: 24rem; } #toast { max-width: 24rem; } } .wmsgs .ikb button.danger { color: var(--color-error); } :root[data-theme="dark"] .wmsgs .ikb button.danger { color: #ff6b6b; } /* the unread badge sits above the round button: the ripple clip would cut it, so the button does not clip and skips the wave */ .scroll-down.ripple { overflow: visible; } .scroll-down .ripple-wave { display: none; } /* the moderator ballot in the app: one tight line per candidate — name, share bar, count, a button */ .ballot { padding: .25rem .75rem; } .ballot .brow { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; border-bottom: 1px solid var(--color-borders); } .ballot .brow:last-child { border-bottom: 0; } .ballot .brow.mine { background: var(--color-primary-tint); margin: 0 -.75rem; padding: .375rem .75rem; border-radius: .5rem; } .ballot .bleft { flex: 1; min-width: 0; } .ballot .bname { font-size: .9375rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ballot .bname span { color: var(--color-text-secondary); font-size: .8125rem; } .ballot .bbar { height: .25rem; margin-top: .25rem; border-radius: .125rem; background: var(--color-background-secondary-accent); overflow: hidden; } .ballot .bbar i { display: block; height: 100%; background: var(--color-primary); border-radius: .125rem; transition: width .4s ease; } .ballot .bn { flex: none; min-width: 3.5rem; text-align: right; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); } .ballot .pill { flex: none; height: 1.75rem; padding: 0 .625rem; font-size: .9375rem; } /* the quote of the post another one answers: on the wall, in the write screen, in the queue */ .reply-q { display: flex; align-items: flex-start; gap: .375rem; width: 100%; box-sizing: border-box; margin: .25rem 0 .375rem; padding: .375rem .625rem; border-left: 3px solid var(--color-primary); border-radius: .5rem; background: var(--color-primary-tint, rgba(51, 144, 236, .1)); text-align: left; font-size: .875rem; line-height: 1.3; color: var(--color-text); } .reply-q b { flex: none; color: var(--color-primary); font-weight: 600; } .reply-q span { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; opacity: .85; } .reply-q .x { flex: none; background: none; border: 0; color: var(--color-text-secondary); font-size: 1rem; padding: 0 .25rem; } .write .reply-q { margin: .5rem .75rem; width: calc(100% - 1.5rem); } /* ---- Дурак: cards, the felt, the lobby, the table ------------------------------- */ :root { --dk-felt: #1b6b45; --dk-felt-light: #2f9963; --dk-felt-dark: #0f4a2f; --dk-gold: #ffd166; --dk-card: #fffdf7; --dk-red: #d7263d; --dk-black: #1d1d1f; --dk-back-a: #2b4c9b; --dk-back-b: #1a2f66; } /* a playing card */ .pc { --w: 3.9rem; --h: 5.5rem; position: relative; width: var(--w); height: var(--h); border-radius: .5rem; background: var(--dk-card); color: var(--dk-black); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 .25rem .75rem rgba(0, 0, 0, .18); flex: none; user-select: none; -webkit-user-select: none; font-family: var(--font-family-rounded); } .pc.red { color: var(--dk-red); } .pc .tl, .pc .br { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: calc(var(--w) * .26); } .pc .tl { top: .2rem; left: .25rem; } .pc .br { right: .25rem; bottom: .2rem; transform: rotate(180deg); } .pc .tl b, .pc .br b { font-weight: 800; letter-spacing: -.02em; } .pc .tl i, .pc .br i { font-style: normal; font-size: .8em; margin-top: .05rem; } .pc .mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * .62); line-height: 1; opacity: .95; } .pc.back { background: linear-gradient(135deg, var(--dk-back-a), var(--dk-back-b)); box-shadow: inset 0 0 0 .1875rem #fff, inset 0 0 0 .25rem var(--dk-back-b), 0 1px 2px rgba(0, 0, 0, .3), 0 .2rem .5rem rgba(0, 0, 0, .2); } .pc.back::after { content: ""; position: absolute; inset: .35rem; border-radius: .25rem; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 .18rem, transparent .18rem .5rem), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 .18rem, transparent .18rem .5rem); } .pc.mini { --w: 1.6rem; --h: 2.25rem; border-radius: .25rem; } .pc.mini.back { box-shadow: inset 0 0 0 .09rem #fff, inset 0 0 0 .13rem var(--dk-back-b), 0 1px 3px rgba(0, 0, 0, .35); } .pc.mini.back::after { inset: .18rem; border-radius: .1rem; } @keyframes pc-pop { 0% { transform: scale(.55) translateY(1.25rem) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.06) translateY(-.15rem); opacity: 1; } 100% { transform: none; } } @keyframes pc-deal { 0% { transform: translateY(4rem) rotate(var(--rot, 0)) scale(.9); opacity: 0; } 100% { transform: translateY(0) rotate(var(--rot, 0)); opacity: 1; } } /* the card on the «Ігри» tab */ .dk-promo-box { margin: .25rem .75rem .625rem; } .dk-promo { position: relative; display: flex; align-items: stretch; gap: .5rem; width: 100%; min-height: 9.5rem; padding: 1.125rem 0 1.125rem 1.25rem; border-radius: 1.5rem; overflow: hidden; text-align: left; color: #fff; background: radial-gradient(120% 90% at 20% 0%, var(--dk-felt-light) 0, var(--dk-felt) 45%, var(--dk-felt-dark) 100%); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .08); } .dk-promo::before { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; pointer-events: none; } .dk-promo .tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; justify-content: center; } .dk-promo .tx b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; } .dk-promo .tx .sub { font-size: .8125rem; line-height: 1.35; opacity: .88; max-width: 15rem; } .dk-promo .live { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; font-size: .8125rem; font-weight: 600; color: var(--dk-gold); } .dk-promo .live .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: seek-pulse 1.8s ease-out infinite; flex: none; } .dk-promo .fan { position: relative; z-index: 1; width: 8.25rem; flex: none; } .dk-promo .fan .pc { --w: 3.4rem; --h: 4.8rem; position: absolute; left: 50%; top: 50%; transform-origin: 50% 120%; transform: translate(-50%, -50%) rotate(var(--r)); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3); } .dk-promo .fan .pc:nth-child(1) { --r: -24deg; } .dk-promo .fan .pc:nth-child(2) { --r: -8deg; } .dk-promo .fan .pc:nth-child(3) { --r: 8deg; } .dk-promo .fan .pc:nth-child(4) { --r: 24deg; } .dk-promo:active .fan .pc { transition: transform .2s ease; } .dk-promo:active .fan .pc:nth-child(1) { --r: -30deg; } .dk-promo:active .fan .pc:nth-child(4) { --r: 30deg; } .dk-back-strip { display: flex; align-items: center; gap: .5rem; width: 100%; margin-top: .5rem; padding: .625rem .875rem; border-radius: .875rem; background: var(--color-background); color: var(--color-text); font-size: .9375rem; font-weight: 600; text-align: left; box-shadow: var(--shadow-island); } .dk-back-strip span { flex: 1; } .dk-back-strip svg { width: 1rem; height: 1rem; color: var(--color-gray); } /* the lobby */ .dk-lobby { padding-bottom: calc(1rem + var(--safe-bottom)); } .dk-head { position: relative; margin: .5rem .75rem .75rem; border-radius: 1.5rem; overflow: hidden; color: #fff; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2); } .dk-head .felt { position: absolute; inset: 0; background: radial-gradient(110% 80% at 50% 0%, var(--dk-felt-light) 0, var(--dk-felt) 50%, var(--dk-felt-dark) 100%); } .dk-head .felt::after { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; } .dk-head .hb { position: relative; z-index: 1; padding: 1.25rem 1.25rem 1rem; text-align: center; } .dk-head h2 { margin: 0 0 .375rem; font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; } .dk-head p { margin: 0 auto .875rem; font-size: .875rem; line-height: 1.4; opacity: .88; max-width: 20rem; } .dk-head .btn.create { background: #fff; color: var(--dk-felt-dark); font-weight: 700; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .2); } .dk-head .btn.code { color: #fff; height: 2.5rem; margin-top: .125rem; opacity: .9; } .dk-head .rec { margin-top: .5rem; font-size: .8125rem; color: var(--dk-gold); font-weight: 600; } .dk-mine { margin: 0 .75rem .25rem; } .dk-mine .dk-back-strip { margin-top: 0; } .dk-rooms { display: flex; flex-direction: column; gap: .625rem; padding: 0 .75rem; } .dk-room { background: var(--color-background); border-radius: 1rem; padding: .75rem .875rem .875rem; box-shadow: var(--shadow-island); } .dk-room.playing { opacity: .75; } .dk-room .top { display: flex; align-items: center; gap: .625rem; } .dk-room .top .info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-room .top .info b { font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-room .top .info span { font-size: .8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-room .top .pill { font-weight: 700; font-variant-numeric: tabular-nums; } .dk-room .names { margin: .5rem 0 0; font-size: .8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-room .row { display: flex; align-items: center; gap: .75rem; margin-top: .625rem; } .dk-room .seats { flex: 1; display: flex; gap: .375rem; } .dk-room .seats .avatar { width: 2rem; height: 2rem; font-size: .8125rem; box-shadow: 0 0 0 2px var(--color-background); } .dk-room .seats .avatar.away { opacity: .45; } .dk-room .seat-empty { width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px dashed var(--color-gray); color: var(--color-gray); display: grid; place-items: center; font-size: 1rem; font-weight: 600; line-height: 1; } .dk-room .btn.small { flex: none; min-width: 5.5rem; } .dk-empty { text-align: center; padding: 2rem 2rem 2.5rem; color: var(--color-text-secondary); display: flex; flex-direction: column; align-items: center; gap: .25rem; } .dk-empty .mark { font-size: 3rem; line-height: 1; margin-bottom: .5rem; } .dk-empty b { color: var(--color-text); font-size: 1.0625rem; } .dk-empty span { font-size: .9375rem; line-height: 1.4; max-width: 18rem; } .dk-create .lbl { font-size: .8125rem; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .02em; margin: .875rem 0 .25rem; } .dk-create .seg { margin: 0; } /* the table */ .dk-table { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0; color: #fff; } .dk-table .felt { position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 70% at 50% 35%, var(--dk-felt-light) 0, var(--dk-felt) 55%, var(--dk-felt-dark) 100%); } .dk-table .felt::after { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; } .dk-table .felt::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .3) 100%); z-index: 1; } .dk-table > * { position: relative; z-index: 1; } .dk-table.waiting .dk-opps, .dk-table.waiting .dk-mid, .dk-table.waiting .dk-status, .dk-table.waiting .dk-timer, .dk-table.waiting .dk-hand, .dk-table.waiting .dk-bar { display: none; } .dk-table.playing .dk-wait { display: none; } .dk-table:not(.waiting):not(.playing) .dk-opps, .dk-table:not(.waiting):not(.playing) .dk-status, .dk-table:not(.waiting):not(.playing) .dk-bar, .dk-table:not(.waiting):not(.playing) .dk-wait { display: none; } /* gathering: the code on the table, the seats in a row */ .dk-wait { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: .5rem 1rem calc(.75rem + var(--safe-bottom)); gap: .875rem; } .dk-wait .tbl { position: relative; flex: none; width: 100%; height: 11rem; border-radius: 50% / 50%; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, .2)); box-shadow: inset 0 0 0 .3rem rgba(255, 255, 255, .08), inset 0 0 3rem rgba(0, 0, 0, .3), 0 .5rem 1.5rem rgba(0, 0, 0, .25); display: grid; place-items: center; color: #fff; } .dk-wait .codebox { display: flex; flex-direction: column; align-items: center; gap: .125rem; } .dk-wait .codebox .cap { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; opacity: .75; } .dk-wait .codebox b { font-size: 2.5rem; font-weight: 800; letter-spacing: .18em; padding-left: .18em; color: var(--dk-gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .35); line-height: 1.1; } .dk-wait .codebox .hint { font-size: .75rem; opacity: .8; } .dk-wait .seatrow { display: flex; justify-content: center; gap: .375rem; } .dk-wait .seat { flex: 1 1 0; max-width: 5.25rem; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; position: relative; padding: .375rem 0; border-radius: .75rem; animation: arrive .3s ease both; } .dk-wait .seat .avatar { width: 3rem; height: 3rem; font-size: 1.125rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .35), 0 0 0 .1875rem rgba(255, 255, 255, .25); } .dk-wait .seat b, .dk-wait .seat span { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; } .dk-wait .seat b { font-size: .75rem; font-weight: 600; } .dk-wait .seat span { font-size: .625rem; opacity: .8; } .dk-wait .seat.away .avatar { opacity: .5; filter: grayscale(.6); } .dk-wait .seat .crown { position: absolute; top: 0; right: calc(50% - 1.75rem); font-style: normal; font-size: .9rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); } .dk-wait .seat.empty { color: rgba(255, 255, 255, .75); } .dk-wait .seat.empty .plus { width: 3rem; height: 3rem; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .5); display: grid; place-items: center; font-size: 1.5rem; font-weight: 300; line-height: 1; animation: seat-breathe 2.4s ease-in-out infinite; } .dk-wait .seat.empty b { font-weight: 500; opacity: .85; } @keyframes seat-breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } } .dk-wait .waitline { text-align: center; font-size: .8125rem; opacity: .85; padding: 0 .5rem; } .dk-wait .opts { display: flex; gap: .5rem; margin: 0; } .dk-wait .seg { flex: 1; margin: 0; background: rgba(255, 255, 255, .14); } .dk-wait .seg button { color: #fff; } .dk-wait .seg button.on { background: #fff; color: var(--dk-felt-dark); } .dk-wait .seg button:disabled { opacity: .35; } .dk-wait .acts { display: flex; flex-direction: column; gap: .5rem; } .dk-wait .btn.secondary { background: rgba(255, 255, 255, .16); color: #fff; } .dk-wait .btn.start { background: var(--dk-gold); color: #3b2a00; font-weight: 700; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .25); } .dk-wait .btn.start:disabled { opacity: .6; } .dk-wait .hostnote { text-align: center; font-size: .875rem; opacity: .85; padding: .5rem 0; } .dk-wait .btn.leave { color: rgba(255, 255, 255, .75); height: 2.5rem; } /* the others */ .dk-opps { flex: none; display: flex; justify-content: space-evenly; align-items: flex-start; gap: .25rem; padding: .625rem .5rem 0; min-height: 6.75rem; } .dk-opps .opp { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 5rem; text-align: center; transition: transform .25s ease, opacity .25s ease; } .dk-opps .opp .avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .35); transition: box-shadow .25s ease; } .dk-opps .opp.turn .avatar { box-shadow: 0 0 0 .2rem var(--dk-gold); } .dk-opps .opp.turn::before { content: ""; position: absolute; top: -.25rem; left: 50%; width: 3rem; height: 3rem; margin-left: -1.5rem; border-radius: 50%; border: .2rem solid var(--dk-gold); opacity: 0; animation: opp-turn 1.4s ease-out infinite; pointer-events: none; } @keyframes opp-turn { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } .dk-opps .opp.away .avatar { opacity: .5; filter: grayscale(.6); } .dk-opps .opp.out { opacity: .55; } .dk-opps .opp.out .cards { display: none; } /* no cards left: the name and «вийшов» sit right under the avatar, no hole (2026-09-30, the user) */ .dk-opps .opp .cards { position: relative; height: 2.25rem; width: 100%; margin-top: .125rem; } .dk-opps .opp .cards .pc { position: absolute; left: 50%; top: 0; transform: translateX(calc(-50% + var(--k, 0) * .45rem)) rotate(calc(var(--k, 0) * 4deg)); transform-origin: 50% 150%; } .dk-opps .opp .cards .n { position: absolute; right: .25rem; bottom: -.25rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: .625rem; background: #fff; color: var(--dk-black); font-size: .6875rem; font-weight: 700; line-height: 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } .dk-opps .opp b { font-size: .75rem; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .125rem; } .dk-opps .opp .role { font-size: .6875rem; opacity: .9; white-space: nowrap; } /* the middle: stock, bout, pile */ .dk-mid { flex: 1; min-height: 0; display: flex; align-items: center; gap: .25rem; padding: .25rem .5rem .25rem .875rem; } .dk-deck { width: 6.25rem; } .dk-pile { width: 4.5rem; } .dk-deck, .dk-pile { flex: none; display: flex; flex-direction: column; align-items: center; gap: .375rem; } .dk-deck .stack, .dk-pile .stack { position: relative; width: 3.25rem; height: 4.6rem; } .dk-deck .stack .pc, .dk-pile .stack .pc { --w: 3.25rem; --h: 4.6rem; position: absolute; left: 0; top: 0; transform: translate(calc(var(--k, 0) * -.08rem), calc(var(--k, 0) * -.08rem)); } .dk-deck .stack .pc.trump { transform: translate(1.9rem, .55rem) rotate(90deg); transform-origin: 50% 50%; z-index: -1; } .dk-deck .stack { margin-right: 1.5rem; } .dk-deck .stack.empty { display: grid; place-items: center; border-radius: .5rem; border: 2px dashed rgba(255, 255, 255, .35); } .dk-deck .stack.empty .suit { font-size: 2rem; color: #fff; } .dk-deck .stack.empty .suit.red { color: #ff8a80; } .dk-pile .stack .pc.pile { transform: translate(calc(var(--k, 0) * .15rem), calc(var(--k, 0) * -.1rem)) rotate(calc(var(--k, 0) * 7deg - 6deg)); } .dk-deck .n, .dk-pile .n { font-size: .6875rem; font-weight: 600; opacity: .85; text-align: center; white-space: nowrap; } .dk-board { --bs: 1; flex: 1; min-width: 0; align-self: stretch; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: calc(.625rem * var(--bs)) calc(.5rem * var(--bs)); padding: .25rem; } .dk-board .slot { position: relative; width: calc(4.4rem * var(--bs)); height: calc(5.9rem * var(--bs)); border-radius: .625rem; } .dk-board .slot .pc { --w: calc(3.4rem * var(--bs)); --h: calc(4.8rem * var(--bs)); position: absolute; left: 0; top: 0; } .dk-board .slot .pc.d { left: calc(1rem * var(--bs)); top: calc(1.1rem * var(--bs)); transform: rotate(9deg); z-index: 2; } .dk-board .slot .pc.pop { animation: pc-pop .32s cubic-bezier(.22, 1, .36, 1) both; } .dk-board .slot .pc.d.pop { animation-name: pc-pop-d; } @keyframes pc-pop-d { 0% { transform: scale(.55) translateY(1.25rem) rotate(20deg); opacity: 0; } 60% { transform: scale(1.06) rotate(9deg); opacity: 1; } 100% { transform: rotate(9deg); } } .dk-board .slot.target::before { content: ""; position: absolute; inset: -.375rem; border-radius: .875rem; border: 2px dashed var(--dk-gold); animation: target-blink 1s ease-in-out infinite; } @keyframes target-blink { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } .dk-board .hintc { width: 100%; text-align: center; font-size: .875rem; opacity: .75; } /* the line that says what is going on, and the clock */ .dk-status { flex: none; text-align: center; font-size: .9375rem; font-weight: 500; padding: .25rem 1rem; min-height: 1.5rem; opacity: .9; transition: color .2s ease; } .dk-status.mine { color: var(--dk-gold); font-weight: 700; } .dk-timer { flex: none; height: .25rem; margin: .25rem 1.25rem .375rem; border-radius: .125rem; background: rgba(255, 255, 255, .18); overflow: hidden; } .dk-timer i { display: block; height: 100%; width: 100%; background: var(--dk-gold); transform-origin: left; transform: scaleX(1); transition: transform .2s linear; border-radius: .125rem; } .dk-timer.low i { background: #ff6b6b; } /* my hand */ .dk-hand { flex: none; position: relative; height: 6.75rem; margin: 0 .25rem; } .dk-hand .pc { position: absolute; bottom: .5rem; transform: rotate(var(--rot, 0)); transform-origin: 50% 130%; transition: transform .18s ease, bottom .18s ease, filter .2s ease; } .dk-hand .pc.dim { filter: brightness(.72) saturate(.7); } .dk-hand .pc.ok::after { display: none; } .dk-hand.mine .pc.ok { box-shadow: 0 0 0 .1875rem var(--dk-gold), 0 .25rem .75rem rgba(0, 0, 0, .25); } /* the rim follows the card's own corners */ .dk-hand .pc.sel { bottom: 1.75rem; z-index: 5; transform: rotate(0) scale(1.06); } .dk-hand .pc.deal { animation: pc-deal .35s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 40ms); } .dk-hand .pc:active { transform: rotate(var(--rot, 0)) scale(.96); } /* the buttons */ .dk-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.25rem; padding: .25rem 1rem calc(.625rem + var(--safe-bottom)); } .dk-bar .btn { width: auto; min-width: 7rem; height: 2.75rem; padding: 0 1.25rem; font-weight: 700; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .25); } .dk-bar .btn.take { background: #fff; color: var(--dk-red); } .dk-bar .btn.pass { background: #fff; color: #1c1c1e; } .dk-bar .btn.pass.bito { background: var(--dk-gold); color: #3b2a00; } .dk-bar .btn.cancel { color: rgba(255, 255, 255, .8); box-shadow: none; min-width: 0; } .dk-bar .passed { font-size: .875rem; font-weight: 600; color: var(--dk-gold); } /* a word across the table: бито, took, time out */ .dk-flash { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9); z-index: 20; padding: .625rem 1.25rem; border-radius: 1rem; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.0625rem; font-weight: 700; white-space: nowrap; pointer-events: none; animation: flash-in .25s cubic-bezier(.34, 1.56, .64, 1) both; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3); } .dk-flash.ok { color: var(--dk-gold); } .dk-flash.warn { color: #ffd6d6; } .dk-flash.out { transition: opacity .35s ease, transform .35s ease; opacity: 0; transform: translate(-50%, -70%) scale(.95); } @keyframes flash-in { from { opacity: 0; transform: translate(-50%, -40%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* the result */ .dk-over { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in .25s ease; } .dk-over .card { width: 100%; max-width: 22rem; margin: 0; padding: 1.25rem 1.25rem 1rem; border-radius: 1.5rem; text-align: center; color: var(--color-text); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .35); animation: over-in .4s cubic-bezier(.34, 1.4, .64, 1) both; } @keyframes over-in { from { transform: translateY(2rem) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } } .dk-over .big { font-size: 3.5rem; line-height: 1; margin-bottom: .5rem; animation: float 3.2s ease-in-out infinite; } .dk-over h2 { margin: 0 0 .875rem; font-size: 1.375rem; font-weight: 800; } .dk-over .places { display: flex; flex-direction: column; gap: .375rem; text-align: left; margin-bottom: 1rem; } .dk-over .prow { display: flex; align-items: center; gap: .625rem; padding: .375rem .5rem; border-radius: .75rem; background: var(--color-background-secondary); } .dk-over .prow .m { width: 1.5rem; text-align: center; font-size: 1.125rem; } .dk-over .prow .avatar { width: 2rem; height: 2rem; font-size: .8125rem; } .dk-over .prow b { flex: 1; min-width: 0; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-over .prow span:last-child { font-size: .8125rem; color: var(--color-text-secondary); } .dk-over .prow.fool { background: #e5393518; } .dk-over .prow.left { opacity: .7; } .dk-over .acts { display: flex; flex-direction: column; gap: .25rem; } @media (prefers-reduced-motion: reduce) { .dk-board .slot .pc.pop, .dk-hand .pc.deal, .dk-opps .opp.turn .avatar, .dk-wait .seat.empty .plus, .dk-over .big { animation: none !important; } } /* short screens (old Androids at 360x640): the same table, every button still on screen */ @media (max-height: 720px) { .dk-opps { min-height: 5.5rem; padding-top: .375rem; } .dk-opps .opp .avatar { width: 2.125rem; height: 2.125rem; font-size: .875rem; } .dk-opps .opp .cards { height: 1.75rem; } .dk-opps .opp .cards .pc { --w: 1.3rem; --h: 1.85rem; } .dk-log { max-height: 3.4rem; } .dk-hand { height: 5.75rem; } .dk-hand .pc { --w: 3.3rem; --h: 4.6rem; } .dk-bar { min-height: 2.75rem; padding-bottom: calc(.25rem + var(--safe-bottom)); } .dk-bar .btn { height: 2.375rem; } .dk-mid { min-height: 5.5rem; } .dk-say { padding-top: .125rem; } .dk-wait { gap: .5rem; } .dk-wait .tbl { height: 8.5rem; } .dk-wait .codebox b { font-size: 2rem; } .dk-wait .seat .avatar, .dk-wait .seat.empty .plus { width: 2.5rem; height: 2.5rem; } .dk-wait .acts { gap: .375rem; } .dk-wait .btn { height: 2.625rem; } .dk-wait .btn.leave { height: 2rem; } } @media (max-height: 600px) { .dk-opps .opp .cards { display: none; } .dk-opps { min-height: 4rem; } .dk-log { max-height: 2.4rem; } .dk-wait .tbl { height: 6.5rem; } } /* ---- «Двіж»: three cards of one shape ------------------------------------------- */ .hub-cards { display: flex; flex-direction: column; gap: .5rem; padding: .25rem .75rem 0; } .hub-card { position: relative; display: flex; align-items: stretch; gap: .5rem; width: 100%; min-height: 6.75rem; padding: .75rem 0 .75rem 1rem; border-radius: 1.25rem; overflow: hidden; text-align: left; color: #fff; background: radial-gradient(120% 100% at 15% 0%, var(--hc-a) 0, var(--hc-b) 50%, var(--hc-c) 100%); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .08); isolation: isolate; } .hub-card::before { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; pointer-events: none; } .hub-card .glow { position: absolute; right: -3rem; top: -3rem; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%); pointer-events: none; animation: halo 3.6s ease-in-out infinite; } .hub-card .tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .3rem; } .hub-card .tx b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; } .hub-card .tx .sub { font-size: .75rem; line-height: 1.3; opacity: .9; max-width: 14.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hub-card .live { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; max-width: 100%; margin-top: .25rem; padding: .3rem .75rem .3rem .55rem; border-radius: 1rem; background: rgba(0, 0, 0, .22); font-size: .8125rem; font-weight: 600; opacity: .9; line-height: 1.25; } .hub-card .live > span { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-card .live { align-self: stretch; display: flex; } .hub-card .live .dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255, 255, 255, .55); flex: none; } .hub-card .live.on { opacity: 1; color: var(--hc-live, #ffd166); background: rgba(0, 0, 0, .3); } .hub-card .live.on .dot { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: seek-pulse 1.8s ease-out infinite; } .hub-card > svg.chev, .hub-card > svg:last-child { position: relative; z-index: 1; width: 1.25rem; height: 1.25rem; flex: none; opacity: .7; } .hub-card:active { transform: scale(.985); transition: transform .12s ease; } .hub-card.anon { --hc-a: #4fa3ff; --hc-b: #2d5fd4; --hc-c: #1e3a8a; } .hub-card.flirt { --hc-a: #ff7eb3; --hc-b: #c2337a; --hc-c: #6d1b4b; --hc-live: #ffe0ec; } .hub-card.durak { --hc-a: #2f9963; --hc-b: #1b6b45; --hc-c: #0f4a2f; } .hub-card.ask { --hc-a: #8b7cff; --hc-b: #5a3fd6; --hc-c: #2a1c6e; --hc-live: #ffd166; } .hub-card .art.ask { display: flex; align-items: center; justify-content: center; position: relative; } .hub-card .art.ask .mask { font-size: 2.75rem; filter: drop-shadow(0 .375rem .75rem rgba(0, 0, 0, .35)); } .hub-card .art.ask .bub { position: absolute; top: .5rem; right: .75rem; padding: .25rem .5rem; border-radius: .75rem .75rem .125rem .75rem; background: #fff; color: #2a1c6e; font-size: .6875rem; font-weight: 700; box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .2); transform: rotate(6deg); } .hub-card .live { margin-top: .125rem; padding: .2rem .625rem .2rem .5rem; font-size: .75rem; } /* «Запитай мене» */ .ask-mine { position: relative; overflow: hidden; display: flex; align-items: center; gap: .625rem; margin: .5rem .75rem .25rem; padding: .625rem .625rem .625rem .75rem; border-radius: 1rem; color: #fff; background: radial-gradient(120% 120% at 100% 0%, #8b7cff 0%, #5a3fd6 45%, #2a1c6e 100%); box-shadow: 0 .5rem 1.25rem rgba(42, 28, 110, .3); } .ask-mine::before { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; pointer-events: none; } .ask-mine > * { position: relative; } .ask-mine .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; flex: none; box-shadow: 0 0 0 .125rem rgba(255, 255, 255, .35); } .ask-mine .t { flex: 1; min-width: 0; line-height: 1.2; } .ask-mine .t b { display: block; font-size: 1rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-mine .t span { display: block; font-size: .75rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-mine.off .t span { color: #ffb4b4; } .ask-mine.off .avatar { filter: grayscale(1); } .ask-mine.make { display: block; padding: .875rem 1rem; } .ask-mine.make b { display: block; font-size: 1.125rem; font-weight: 800; margin-bottom: .25rem; } .ask-mine.make > span { display: block; font-size: .8125rem; opacity: .9; line-height: 1.35; } .ask-mine.make .btn { margin-top: .75rem; background: #fff; color: #2a1c6e; } .ask-whats { display: flex; justify-content: center; gap: .5rem; margin-top: .5rem; } .ask-mine.make .ask-whats .ask-what { margin: 0; } .ask-mine.make .ask-what { display: block; margin: .5rem auto 0; padding: .25rem .75rem; border-radius: 1rem; background: rgba(255, 255, 255, .16); color: #fff; font-size: .8125rem; font-weight: 600; position: relative; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); } .ask-ibs { display: flex; gap: .375rem; flex: none; } .ask-ib { width: 2.25rem; height: 2.25rem; border-radius: .6875rem; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28); position: relative; overflow: hidden; } .ask-ib svg { width: 1.0625rem; height: 1.0625rem; } .ask-ib:active { background: rgba(255, 255, 255, .3); } .ask-tabs { margin: .5rem .75rem .25rem; } .ask-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: .3125rem; } .ask-tabs .n { position: static; top: auto; right: auto; display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: .5625rem; background: var(--color-primary); color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 1; } .ask-tabs button.on .n { background: #fff; color: var(--color-primary); } .capsule.hot { margin: .5rem .75rem; width: calc(100% - 1.5rem); background: var(--color-primary-tint); color: var(--color-primary); } .ask-head { display: flex; align-items: center; gap: .75rem; padding: .625rem .625rem .5rem; } .ask-card .avatar { width: 3rem; height: 3rem; font-size: 1.25rem; } .ask-bar { display: flex; align-items: center; gap: .5rem; margin: .5rem .75rem .25rem; } .ask-bar .ask-filter { margin: 0; flex: none; } .ask-q { flex: 1; min-width: 0; display: flex; align-items: center; gap: .375rem; height: 2.125rem; padding: 0 .625rem; border-radius: 1.0625rem; background: var(--color-background); box-shadow: var(--shadow-island); } .ask-q svg { flex: none; width: 1rem; height: 1rem; color: var(--color-text-secondary); } .ask-q input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; color: var(--color-text); font: inherit; font-size: .9375rem; -webkit-appearance: none; appearance: none; } .ask-q input::placeholder { color: var(--color-placeholders); } .ask-q input::-webkit-search-cancel-button { -webkit-appearance: none; } .ask-filter { display: inline-flex; align-items: center; gap: .375rem; margin: .5rem .75rem .25rem; height: 2.125rem; padding: 0 .625rem 0 .75rem; border-radius: 1.0625rem; background: var(--color-background); color: var(--color-text); font-size: .875rem; font-weight: 600; box-shadow: var(--shadow-island); position: relative; overflow: hidden; } .ask-filter.on { background: var(--color-primary); color: #fff; } .ask-filter svg { width: 1rem; height: 1rem; opacity: .8; } .ask-filter svg:last-child { transform: rotate(90deg); width: .875rem; height: .875rem; } .ask-seg button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-card .info .last { color: var(--color-text); } /* the feed moves, it does not blink: a new profile slides in with a glow, a changed one flashes, a gone one folds, a moved one glides */ .ask-card.in { animation: ask-in .38s cubic-bezier(.2, .8, .2, 1) both; } @keyframes ask-in { 0% { opacity: 0; transform: translateY(-.625rem) scale(.985); background: var(--color-primary-tint); } 60% { opacity: 1; transform: none; background: var(--color-primary-tint); } 100% { background: var(--color-background); } } .ask-card.bump { animation: ask-bump .7s ease-out both; } @keyframes ask-bump { 0%, 35% { background: var(--color-primary-tint); } 100% { background: var(--color-background); } } .ask-card.out { transition: height .24s cubic-bezier(.4, 0, .2, 1), opacity .16s ease, padding .24s cubic-bezier(.4, 0, .2, 1), min-height .24s; opacity: 0; min-height: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; } .ask-card.flip { transition: transform .32s cubic-bezier(.2, .8, .2, 1); z-index: 1; } .ask-views.pop, .ask-tabs .n.pop { animation: ask-pop .38s cubic-bezier(.2, .8, .2, 1); } @keyframes ask-pop { 0% { transform: scale(.7); } 55% { transform: scale(1.18); } 100% { transform: none; } } .ask-wall { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: .2rem; height: 1.25rem; padding: 0 .45rem; border-radius: .625rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .75rem; font-weight: 600; } .ask-wall svg { width: .8rem; height: .8rem; } .ask-card .avatar { font-size: 1.25rem; } .ask-setup .form-field { display: block; width: 100%; margin: .625rem 0 0; padding: .625rem .75rem; border: 0; border-radius: .625rem; background: var(--color-background-secondary); color: var(--color-text); font-size: 1rem; outline: 0; box-sizing: border-box; } .ask-setup .ask-hint { margin: .75rem 0 .375rem; font-size: .75rem; color: var(--color-text-secondary); } .ask-setup .photo-grid { padding: 0; max-height: 14rem; overflow: hidden; transition: max-height .3s cubic-bezier(.32, .72, 0, 1), opacity .25s ease, margin .3s ease; } .ask-setup .ask-hint, .ask-setup > .note { transition: max-height .3s cubic-bezier(.32, .72, 0, 1), opacity .25s ease, margin .3s ease; max-height: 6rem; overflow: hidden; } .ask-setup.kb .photo-grid, .ask-setup.kb .ask-hint, .ask-setup.kb > .note { max-height: 0; opacity: 0; margin: 0; } .ask-setup .row-item.setting:first-child { margin-top: 0; } .ask-setup .row-item { margin-top: .625rem; padding-left: 0; } .ask-setup .btn { margin-top: .875rem; } .ask-setup .ask-del { margin-top: .5rem; color: var(--color-error); background: transparent; box-shadow: none; } .ask-setup .wq-sw { margin-left: auto; flex: none; } .ask-setup textarea.form-field { resize: none; line-height: 1.35; min-height: 4.5rem; } .wq-sw.plain .knob::after { content: none; } .wq-sw.plain.on { background: var(--color-primary); box-shadow: none; } /* the profile's head: the first picture blurred behind, the face large in front, the name, the line, two tiles */ .ask-top { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: .875rem 1rem .75rem; background: var(--color-background); box-shadow: 0 .5px 0 var(--color-borders); } .ask-top .bg { position: absolute; inset: -15%; background: center / cover no-repeat; filter: blur(28px) saturate(1.2); transform: scale(1.1); } .ask-top .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 30, .35) 0%, rgba(12, 10, 30, .6) 60%, rgba(12, 10, 30, .78) 100%); } .ask-top > :not(.bg):not(.veil) { position: relative; } .ask-top.pic { color: #fff; } .ask-top .avatar.hero { width: 6rem; height: 6rem; font-size: 2.75rem; box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .85), 0 .5rem 1.5rem rgba(0, 0, 0, .35); } .ask-top > b { display: block; margin-top: .5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; } .ask-top .sub { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--color-text-secondary); } .ask-top.pic .sub { color: rgba(255, 255, 255, .78); } .ask-views { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; height: 1.5rem; padding: 0 .625rem; border-radius: .75rem; background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: .75rem; line-height: 1; white-space: nowrap; } .ask-views svg { width: .875rem; height: .875rem; opacity: .8; } .ask-views b { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; } .ask-top.pic .ask-views { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ask-top.pic .ask-views b { color: #fff; } .ask-mine .t .ask-views { display: inline-flex; margin-top: .25rem; height: 1.25rem; padding: 0 .5rem; font-size: .6875rem; opacity: 1; overflow: visible; } .ask-mine .t .ask-views span { display: inline; font-size: inherit; overflow: visible; } .ask-top .line { margin: .375rem 0 0; max-width: 22rem; font-size: .9375rem; line-height: 1.3; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; } .ask-top.pic .line { color: #fff; } .ask-top .ask-blocked { margin-top: .625rem; width: 100%; box-sizing: border-box; } .ask-tiles { display: flex; gap: .5rem; width: 100%; margin-top: .75rem; } .ask-tiles .tile { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .5rem; height: 2.875rem; border-radius: .75rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .75rem; font-weight: 600; position: relative; overflow: hidden; } .ask-top.pic .ask-tiles .tile { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ask-tiles .tile svg { width: 1.25rem; height: 1.25rem; } .ask-tiles .tile span { font-size: .875rem; } .ask-tiles .tile:active { opacity: .7; } .ask-doors { display: flex; flex-direction: row; gap: .5rem; } .ask-doors .door { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 3.125rem; padding: 0 .625rem; border-radius: 1.5625rem; font-size: .9375rem; font-weight: 700; white-space: nowrap; position: relative; overflow: hidden; color: #fff; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ask-doors .door.main { background: #fff; color: #2a1c6e; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .3); } .ask-doors .door svg { width: 1.0625rem; height: 1.0625rem; flex: none; } .ask-doors .door span { overflow: hidden; text-overflow: ellipsis; } .ask-doors .door:active { transform: scale(.98); } .ask-big { display: grid; place-items: center; height: 22rem; font-size: 5rem; background: radial-gradient(120% 120% at 100% 0%, #8b7cff 0%, #5a3fd6 45%, #2a1c6e 100%); } .ask-write { margin-top: .625rem; padding: .75rem .875rem; } .ask-write .quote { margin: 0 0 .625rem; padding: .5rem .75rem; border-left: 3px solid #8b7cff; border-radius: .5rem; background: var(--color-background-secondary); font-size: 1rem; line-height: 1.4; } .ask-write textarea.form-field { display: block; width: 100%; padding: .625rem .75rem; border: 0; border-radius: .625rem; background: var(--color-background-secondary); color: var(--color-text); font-size: 1rem; outline: 0; resize: none; box-sizing: border-box; } .ask-write .btn { margin-top: .625rem; } .ask-go { background: linear-gradient(135deg, #8b7cff, #5a3fd6); box-shadow: 0 .5rem 1.25rem rgba(90, 63, 214, .35); } /* the wall: every answered question as a small exchange */ .ask-qa { margin: 0 .75rem .5rem; padding: .625rem .625rem .5rem; border-radius: 1rem; background: var(--color-background); box-shadow: var(--shadow-island); } .ask-qa .qrow, .ask-qa .arow { display: flex; align-items: flex-end; gap: .5rem; } .ask-qa .arow { justify-content: flex-end; margin-top: .5rem; } .ask-qa .avatar { width: 1.875rem; height: 1.875rem; font-size: .9375rem; flex: none; } .ask-qa .avatar.mask { background: linear-gradient(135deg, #6b6b78, #3a3a44); } .ask-qa .avatar.own { background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .ask-qa .qb, .ask-qa .ab { max-width: 82%; padding: .5rem .75rem .375rem; font-size: .9375rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; } .ask-qa .qb { border-radius: 1rem 1rem 1rem .25rem; background: var(--color-background-secondary); color: var(--color-text); } .ask-qa .ab { border-radius: 1rem 1rem .25rem 1rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; box-shadow: 0 .375rem 1rem rgba(90, 63, 214, .28); } .ask-qa .qb b, .ask-qa .ab b { display: block; font-size: .6875rem; font-weight: 700; margin-bottom: .125rem; opacity: .75; } .ask-qa .qb b { color: var(--color-primary); opacity: 1; } .ask-qa time { display: block; margin-top: .125rem; font-size: .625rem; color: var(--color-text-meta); text-align: right; } .ask-qa .hide { display: inline-flex; align-items: center; gap: .25rem; margin-top: .5rem; padding: .25rem .5rem; border-radius: .75rem; font-size: .75rem; color: var(--color-text-secondary); background: var(--color-background-secondary); position: relative; overflow: hidden; } .ask-qa .hide svg { width: .875rem; height: .875rem; } .ask-blocked { padding: .75rem .875rem; border-radius: .75rem; background: #e5393514; color: var(--color-error); font-size: .9375rem; line-height: 1.35; } .ask-write .btn { margin-top: .625rem; } #tab-hub .dk-back-strip { width: auto; margin: .75rem .75rem 0; } #tab-hub .capsule.wide { margin-top: .75rem; } /* the pictures on the cards */ .hub-card .art { position: relative; z-index: 1; flex: none; width: 8.75rem; } /* Дурак: a fan of real cards */ .hub-card .art.durak .pc { --w: 3.4rem; --h: 4.8rem; position: absolute; left: 50%; top: 50%; transform-origin: 50% 125%; transform: translate(-50%, -52%) rotate(var(--r)); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3); } .hub-card .art.durak .pc:nth-child(1) { --r: -24deg; } .hub-card .art.durak .pc:nth-child(2) { --r: -8deg; } .hub-card .art.durak .pc:nth-child(3) { --r: 8deg; } .hub-card .art.durak .pc:nth-child(4) { --r: 24deg; } .hub-card:active .art.durak .pc { transition: transform .2s ease; } .hub-card:active .art.durak .pc:nth-child(1) { --r: -30deg; } .hub-card:active .art.durak .pc:nth-child(4) { --r: 30deg; } /* Флірситет: a fan of profiles, the top one with a like */ .hub-card .art.flirt .fc { position: absolute; left: 50%; top: 50%; width: 3.9rem; height: 5.3rem; border-radius: .6rem; overflow: hidden; background: #fff; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3); transform-origin: 50% 120%; transform: translate(-50%, -52%) rotate(calc(-16deg + var(--i) * 16deg)); } .hub-card .art.flirt .fc .ph { position: absolute; inset: 0; background: linear-gradient(160deg, var(--ph-a), var(--ph-b)); } .hub-card .art.flirt .fc .ph::before { content: ""; position: absolute; left: 50%; top: 22%; width: 1.35rem; height: 1.35rem; border-radius: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, .85); } .hub-card .art.flirt .fc .ph::after { content: ""; position: absolute; left: 50%; top: 52%; width: 2.6rem; height: 2rem; border-radius: 1.3rem 1.3rem 0 0; transform: translateX(-50%); background: rgba(255, 255, 255, .85); } .hub-card .art.flirt .fc:nth-child(1) .ph { --ph-a: #ffd6a5; --ph-b: #ff8fab; } .hub-card .art.flirt .fc:nth-child(2) .ph { --ph-a: #a0c4ff; --ph-b: #7b4dff; } .hub-card .art.flirt .fc:nth-child(3) .ph { --ph-a: #caffbf; --ph-b: #2ec4b6; } .hub-card .art.flirt .fc .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .25rem .3rem .3rem; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); color: #fff; display: flex; flex-direction: column; line-height: 1.1; } .hub-card .art.flirt .fc .cap b { font-size: .5625rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-card .art.flirt .fc .cap span { font-size: .4375rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-card .art.flirt .heart { position: absolute; left: 50%; top: 50%; transform: translate(1.2rem, -3rem); width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #ff3c32; box-shadow: 0 .375rem .75rem rgba(0, 0, 0, .3); animation: heart-beat 1.6s ease-in-out infinite; } .hub-card .art.flirt .heart svg { width: 1rem; height: 1rem; } @keyframes heart-beat { 0%, 100% { transform: translate(1.2rem, -3rem) scale(1); } 15% { transform: translate(1.2rem, -3rem) scale(1.2); } 30% { transform: translate(1.2rem, -3rem) scale(1); } 45% { transform: translate(1.2rem, -3rem) scale(1.15); } } .hub-card:active .art.flirt .fc { transition: transform .2s ease; } .hub-card:active .art.flirt .fc:nth-child(1) { transform: translate(-50%, -52%) rotate(-22deg); } .hub-card:active .art.flirt .fc:nth-child(3) { transform: translate(-50%, -52%) rotate(22deg); } /* the anonymous chat: three lines of a talk, a die */ .hub-card .art.anon { display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: 0 .875rem 0 .25rem; } .hub-card .art.anon .bub { max-width: 7.25rem; padding: .3rem .55rem; border-radius: .8rem; font-size: .625rem; line-height: 1.25; font-weight: 500; box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .18); animation: bub-in .4s ease both; animation-delay: calc(var(--i) * .35s); position: relative; } .hub-card .art.anon .bub.in { align-self: flex-start; background: #fff; color: #1c1c1e; border-bottom-left-radius: .2rem; } .hub-card .art.anon .bub.out { align-self: flex-end; background: linear-gradient(135deg, #34c759, #1fa049); color: #fff; border-bottom-right-radius: .2rem; } @keyframes bub-in { from { opacity: 0; transform: translateY(.4rem) scale(.9); } to { opacity: 1; transform: none; } } .hub-card .art.anon .die { position: absolute; right: .25rem; top: -.5rem; width: 1.75rem; height: 1.75rem; border-radius: .45rem; display: grid; place-items: center; background: #fff; color: #2d5fd4; box-shadow: 0 .375rem .75rem rgba(0, 0, 0, .3); transform: rotate(14deg); animation: die-wobble 2.8s ease-in-out infinite; } .hub-card .art.anon .die svg { width: 1.2rem; height: 1.2rem; stroke-width: 2.2; } @keyframes die-wobble { 0%, 100% { transform: rotate(14deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-.2rem); } } @media (prefers-reduced-motion: reduce) { .hub-card .art.flirt .heart, .hub-card .art.anon .die, .hub-card .glow { animation: none !important; } } /* a word across the table: the line at the bottom, the bubbles by the seats */ .dk-say { flex: none; display: flex; align-items: center; gap: .25rem; padding: .25rem .625rem calc(.5rem + var(--safe-bottom)); } .dk-table.playing .dk-bar { padding-bottom: .25rem; } .dk-table.waiting .dk-wait { padding-bottom: .25rem; } .dk-say .emo { flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; font-size: 1.25rem; line-height: 1; display: grid; place-items: center; background: rgba(255, 255, 255, .12); transition: transform .12s ease; } .dk-say .emo:active { transform: scale(1.25); background: rgba(255, 255, 255, .25); } .dk-say input { flex: 1; min-width: 4rem; height: 2.125rem; padding: 0 .75rem; border: 0; border-radius: 1.0625rem; background: rgba(0, 0, 0, .28); color: #fff; font-size: .9375rem; outline: 0; } .dk-say input::placeholder { color: rgba(255, 255, 255, .55); } .dk-say .go { flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; display: grid; place-items: center; background: var(--dk-gold); color: #3b2a00; } .dk-say .go svg { width: 1.125rem; height: 1.125rem; } .dk-bub { position: absolute; left: 50%; top: -.5rem; transform: translate(-50%, -100%); z-index: 8; max-width: 9rem; padding: .3rem .6rem; border-radius: .875rem; border-bottom-left-radius: .25rem; background: #fff; color: #1c1c1e; font-size: .8125rem; font-weight: 500; line-height: 1.25; text-align: left; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .3); animation: bub-pop .25s cubic-bezier(.34, 1.56, .64, 1) both, bub-fade .5s ease 5.4s both; pointer-events: none; word-break: break-word; } .dk-opps .opp .dk-bub { top: auto; bottom: -.25rem; transform: translate(-50%, 100%); border-radius: .875rem; border-top-left-radius: .25rem; } .dk-hand .dk-bub.me { top: -.25rem; left: 50%; background: linear-gradient(135deg, #34c759, #1fa049); color: #fff; border-bottom-left-radius: .875rem; border-bottom-right-radius: .25rem; } .dk-wait .seat .dk-bub { top: -.25rem; } @keyframes bub-pop { from { opacity: 0; transform: translate(-50%, -100%) scale(.6); } to { opacity: 1; } } .dk-opps .opp .dk-bub { animation-name: bub-pop-down, bub-fade; } @keyframes bub-pop-down { from { opacity: 0; transform: translate(-50%, 100%) scale(.6); } to { opacity: 1; } } @keyframes bub-fade { to { opacity: 0; } } .dk-emo { position: absolute; left: 50%; top: 0; z-index: 9; font-size: 2.5rem; line-height: 1; pointer-events: none; filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .35)); animation: emo-fly 2.4s ease-out both; } .dk-hand .dk-emo { top: -1rem; } @keyframes emo-fly { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -.75rem) scale(1.35); } 35% { transform: translate(-50%, -1rem) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -3.5rem) scale(1); } } /* the table's chat: a short log above the status line, lines stay and slide up as new ones come */ .dk-log { flex: none; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; max-height: 5.75rem; overflow-y: auto; overflow-x: hidden; padding: 0 .875rem .25rem; scroll-behavior: smooth; } /* no fade at the top: the older lines stay readable, the log scrolls */ .dk-log:empty { display: none; } .dk-log .line { flex: none; align-self: flex-start; max-width: 85%; padding: .25rem .625rem; border-radius: .875rem; background: rgba(0, 0, 0, .32); color: #fff; font-size: .8125rem; line-height: 1.3; word-break: break-word; animation: log-in .3s cubic-bezier(.22, 1, .36, 1) both; } .dk-log .line.me { align-self: flex-end; background: rgba(255, 209, 102, .22); } .dk-log .line b { font-weight: 700; margin-right: .35rem; color: var(--dk-gold); } .dk-log .line.me b { color: #fff; } .dk-log .line.emo span { font-size: 1.125rem; line-height: 1; vertical-align: -.125rem; } @keyframes log-in { from { opacity: 0; transform: translateY(.75rem); max-height: 0; padding-top: 0; padding-bottom: 0; } to { opacity: 1; transform: none; max-height: 4rem; } } .dk-table.waiting .dk-log { display: flex; order: 5; max-height: 6.5rem; } .dk-table.waiting .dk-log:empty { display: none; } .dk-table.waiting .dk-wait { order: 4; flex: 1; } .dk-table .dk-say { order: 9; } .dk-table .dk-over { order: 8; } .dk-mid { overflow: hidden; } /* the countdown to the deal */ .dk-wait .waitline.count { font-size: 1rem; font-weight: 600; color: var(--dk-gold); opacity: 1; } .dk-wait .waitline .cd { font-size: 1.375rem; font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.4rem; text-align: center; animation: cd-pulse 1s ease-in-out infinite; } @keyframes cd-pulse { 0% { transform: scale(1.25); } 40%, 100% { transform: scale(1); } } .dk-wait .btn.start.counting { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; } .dk-wait .btn.start.counting .cd { font-variant-numeric: tabular-nums; min-width: 1.2rem; text-align: center; } /* typing at the table: nothing goes away, everything gets tighter to fit above the keyboard */ .dk-table.typing .dk-opps { min-height: 3.25rem; padding-top: .375rem; } .dk-table.typing .dk-opps .opp .avatar { width: 2rem; height: 2rem; font-size: .8125rem; } .dk-table.typing .dk-opps .opp .cards { height: 1.25rem; margin-top: 0; } .dk-table.typing .dk-opps .opp .cards .pc { display: none; } .dk-table.typing .dk-opps .opp .cards .n { right: auto; left: 50%; transform: translateX(-50%); bottom: 0; } .dk-table.typing .dk-opps .opp b { font-size: .6875rem; margin-top: 0; } .dk-table.typing .dk-opps .opp .role { display: none; } .dk-table.typing .dk-mid { min-height: 4.75rem; padding: 0 .5rem 0 .75rem; } .dk-table.typing .dk-deck { width: 4rem; } .dk-table.typing .dk-pile { width: 3rem; } .dk-table.typing .dk-deck .stack, .dk-table.typing .dk-pile .stack { width: 2.2rem; height: 3.1rem; margin-right: 1rem; } .dk-table.typing .dk-deck .stack .pc, .dk-table.typing .dk-pile .stack .pc { --w: 2.2rem; --h: 3.1rem; } .dk-table.typing .dk-deck .stack .pc.trump { transform: translate(1.3rem, .4rem) rotate(90deg); } .dk-table.typing .dk-deck .n, .dk-table.typing .dk-pile .n { display: none; } .dk-table.typing .dk-log { max-height: 3.4rem; } .dk-table.typing .dk-status { font-size: .8125rem; padding: 0 1rem; min-height: 1.25rem; } .dk-table.typing .dk-timer { margin: .125rem 1.25rem .25rem; } .dk-table.typing .dk-hand { height: 4.5rem; } .dk-table.typing .dk-hand .pc { --w: 2.7rem; --h: 3.8rem; bottom: .25rem; } .dk-table.typing .dk-bar { min-height: 2.25rem; padding: 0 1rem .125rem; } .dk-table.typing .dk-bar .btn { height: 2.125rem; min-width: 5.5rem; font-size: .9375rem; } .dk-table.typing .dk-wait { gap: .5rem; padding-top: .25rem; padding-bottom: 0; justify-content: flex-start; } .dk-table.typing .dk-wait .tbl { height: 5rem; } .dk-table.typing .dk-wait .codebox b { font-size: 1.5rem; } .dk-table.typing .dk-wait .codebox .hint { display: none; } .dk-table.typing .dk-wait .seat .avatar, .dk-table.typing .dk-wait .seat.empty .plus { width: 2.25rem; height: 2.25rem; font-size: .875rem; } .dk-table.typing .dk-wait .seat span { display: none; } .dk-table.typing .dk-wait .opts, .dk-table.typing .dk-wait .btn.leave, .dk-table.typing .dk-wait .btn.secondary { display: none; } .dk-table.typing .dk-wait .btn.start { height: 2.25rem; } .dk-table.typing .dk-say { background: rgba(0, 0, 0, .18); padding-top: .375rem; } /* a layer under another one: its animations sleep (the hub's cards were burning the phone behind the table) */ .layer.dim *, .layer.dim *::before, .layer.dim *::after { animation-play-state: paused !important; } /* typing in the waiting room: the room scrolls instead of spilling over the log */ .dk-table.typing .dk-wait { flex: 0 1 auto; min-height: 0; overflow-y: auto; } .dk-table.typing .dk-log { flex: none; } .dk-log { scroll-behavior: auto; } /* the table changes size smoothly: the keyboard's coming and going, the typing mode */ .dk-opps, .dk-opps .opp .avatar, .dk-opps .opp .cards, .dk-opps .opp b, .dk-mid, .dk-deck, .dk-pile, .dk-deck .stack, .dk-pile .stack, .dk-deck .stack .pc, .dk-pile .stack .pc, .dk-board .slot, .dk-board .slot .pc, .dk-log, .dk-status, .dk-timer, .dk-hand, .dk-bar, .dk-bar .btn, .dk-say .emo, .dk-wait, .dk-wait .tbl, .dk-wait .codebox b, .dk-wait .seat .avatar, .dk-wait .seat.empty .plus, .dk-wait .btn { transition: width .28s cubic-bezier(.32, .72, 0, 1), height .28s cubic-bezier(.32, .72, 0, 1), min-height .28s cubic-bezier(.32, .72, 0, 1), max-height .28s cubic-bezier(.32, .72, 0, 1), padding .28s cubic-bezier(.32, .72, 0, 1), margin .28s cubic-bezier(.32, .72, 0, 1), font-size .28s cubic-bezier(.32, .72, 0, 1), gap .28s cubic-bezier(.32, .72, 0, 1); } .dk-hand .pc { transition: width .28s cubic-bezier(.32, .72, 0, 1), height .28s cubic-bezier(.32, .72, 0, 1), left .28s cubic-bezier(.32, .72, 0, 1), transform .18s ease, bottom .28s cubic-bezier(.32, .72, 0, 1), filter .2s ease; } .dk-board .slot .pc.d { transition: width .28s cubic-bezier(.32, .72, 0, 1), height .28s cubic-bezier(.32, .72, 0, 1), left .28s cubic-bezier(.32, .72, 0, 1), top .28s cubic-bezier(.32, .72, 0, 1); } .dk-deck .stack .pc.trump { transition: transform .28s cubic-bezier(.32, .72, 0, 1), width .28s cubic-bezier(.32, .72, 0, 1), height .28s cubic-bezier(.32, .72, 0, 1); } /* the chat line sits on the bottom edge whatever the screen above it does */ .dk-table .dk-say { margin-top: auto; } .dk-room .btn.small svg { width: 1rem; height: 1rem; } /* who am I at the table: the choice and the line in the lobby */ .dk-ident .mtext { margin-bottom: .75rem; } .dk-idopt { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .625rem .75rem; margin-top: .5rem; border-radius: .875rem; background: var(--color-background-secondary); text-align: left; } .dk-idopt .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; } .dk-idopt .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-idopt .tx b { font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-idopt .tx span { font-size: .8125rem; color: var(--color-text-secondary); } .dk-idopt > svg { width: 1rem; height: 1rem; color: var(--color-gray); flex: none; } .dk-head .who { display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem; padding: .25rem .75rem .25rem .25rem; border-radius: 1.25rem; background: rgba(255, 255, 255, .14); color: #fff; font-size: .8125rem; font-weight: 500; max-width: 100%; } .dk-head .who .avatar { width: 1.75rem; height: 1.75rem; font-size: .75rem; } .dk-head .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-head .who i { font-style: normal; opacity: .75; } /* friends in the lobby */ .dk-friends { display: flex; flex-direction: column; gap: .5rem; padding: 0 .75rem calc(1rem + var(--safe-bottom)); } .dk-friends .frow { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border-radius: 1rem; background: var(--color-background); box-shadow: var(--shadow-island); } .dk-friends .frow.ask { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-background)); } .dk-friends .frow .avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; } .dk-friends .frow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-friends .frow .tx b { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-friends .frow .tx span { font-size: .8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-friends .frow .btn.small { height: 2rem; min-width: 0; padding: 0 .75rem; font-size: .875rem; } .dk-friends .frow .btn.small svg { width: .9rem; height: .9rem; } .dk-friends .fempty { text-align: center; padding: 1.25rem 1.5rem 1.5rem; color: var(--color-text-secondary); display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; line-height: 1.4; } .dk-friends .fempty b { color: var(--color-text); font-size: 1rem; } .dk-wait .seat.tap, .dk-opps .opp { cursor: pointer; } .dk-wait .seat.tap:active .avatar, .dk-opps .opp:active .avatar { transform: scale(.94); } .dk-seg { margin: .25rem .75rem .625rem; } .dk-seg button { height: 2.25rem; font-size: .9375rem; } .vhide { display: none !important; } /* who attacks, who defends: rings and a label, visible whatever the clock says */ .dk-opps .opp .role { padding: .1rem .5rem; border-radius: .75rem; background: rgba(0, 0, 0, .28); margin-top: .125rem; } .dk-opps .opp.att .avatar { box-shadow: 0 0 0 .2rem var(--dk-gold), 0 .2rem .5rem rgba(0, 0, 0, .35); } .dk-opps .opp.att .role { background: rgba(255, 209, 102, .28); color: #ffeeb8; } .dk-opps .opp.def .avatar { box-shadow: 0 0 0 .2rem #ff8a80, 0 .2rem .5rem rgba(0, 0, 0, .35); } .dk-opps .opp.def .role { background: rgba(255, 107, 107, .32); color: #ffd6d6; } .dk-opps .opp.turn.def::before { border-color: #ff8a80; } /* watching: no hand, no buttons — the bout and the talk get the room */ .dk-table.watching .dk-hand, .dk-table.watching .dk-bar { display: none !important; } .dk-table.watching .dk-log { max-height: 9rem; } .dk-table.watching .dk-status { padding-bottom: .5rem; } .dk-table.watching .dk-timer { margin-bottom: .75rem; } .dk-friends .btn.finvite { height: 2.75rem; margin-bottom: .25rem; } .dk-friends .frow.out { opacity: .85; } .dk-friends .frow.tap { cursor: pointer; } .dk-friends .frow.tap:active { background: var(--color-chat-hover); } /* five at the top (a watcher sees them all): the seats share the width */ .dk-opps .opp { flex: 1 1 0; min-width: 0; max-width: 5rem; } .dk-opps .opp b { max-width: 100%; } /* calling friends to the table */ .dk-call .mtext { margin-bottom: .5rem; } .dk-call .clist { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .375rem; margin: 0 -.25rem; padding: 0 .25rem; } .dk-call .crow { display: flex; align-items: center; gap: .625rem; padding: .375rem .5rem; border-radius: .75rem; background: var(--color-background-secondary); } .dk-call .crow .avatar { width: 2.25rem; height: 2.25rem; font-size: .9375rem; } .dk-call .crow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-call .crow .tx b { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-call .crow .tx span { font-size: .75rem; color: var(--color-text-secondary); } .dk-call .crow .btn.small { height: 1.875rem; min-width: 0; padding: 0 .625rem; font-size: .8125rem; } /* friends picked while creating a table */ .fchips { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .125rem .375rem; margin: 0 -.25rem; scrollbar-width: none; } .fchips::-webkit-scrollbar { display: none; } .fchip { flex: none; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 4rem; padding: .375rem 0; border-radius: .875rem; background: var(--color-background-secondary); font-size: .6875rem; color: var(--color-text); position: relative; } .fchip .avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; transition: box-shadow .15s ease; } .fchip span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fchip .st { font-style: normal; font-size: .5625rem; color: #34c759; font-weight: 700; height: .75rem; line-height: .75rem; } .fchip.picked { background: var(--color-primary-tint); color: var(--color-primary); } .fchip.picked .avatar { box-shadow: 0 0 0 .1875rem var(--color-primary); } /* the invitation card */ .dk-invite { text-align: center; padding-top: 1.5rem; overflow: hidden; position: relative; } .dk-invite .cards { position: absolute; left: 50%; top: -1.5rem; width: 9rem; height: 6rem; transform: translateX(-50%); background: radial-gradient(circle, rgba(27, 107, 69, .35), transparent 70%); pointer-events: none; } .dk-invite .avatar.big { width: 4.5rem; height: 4.5rem; font-size: 1.75rem; margin: 0 auto .75rem; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25), 0 0 0 .25rem var(--dk-gold); } .dk-invite h2 { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 800; } .dk-invite p { margin: 0 0 1rem; color: var(--color-text-secondary); font-size: .9375rem; } .dk-invite .btn { margin-top: .25rem; background: var(--dk-felt); } .dk-invite .btn.plain { background: transparent; } .avatar img { border-radius: 50%; } .dk-room.locked { opacity: .8; } .dk-room .btn.small:disabled { opacity: .6; } .dk-ident .tagnote { margin: -.25rem 0 .5rem; padding: .5rem .75rem; border-radius: .75rem; background: var(--color-primary-tint); color: var(--color-text); font-size: .8125rem; line-height: 1.35; } .dk-ident .tagnote b { color: var(--color-primary); font-weight: 600; } /* the rating: level chips, the ladder, the record line */ .lvl { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; font-size: .6875rem; font-weight: 800; color: #111; background: var(--lc, #8e8e93); box-shadow: 0 0 0 .125rem rgba(0, 0, 0, .25); flex: none; font-family: var(--font-family-rounded); } .lvl.big { width: 1.75rem; height: 1.75rem; font-size: .875rem; } .avatar .lvl.onav { position: absolute; right: -.2rem; bottom: -.2rem; width: 1.125rem; height: 1.125rem; font-size: .5625rem; box-shadow: 0 0 0 .125rem var(--dk-felt-dark); } .avatar { position: relative; overflow: visible; } .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .dk-head .rec { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; padding: .625rem .75rem; border-radius: 1rem; background: rgba(0, 0, 0, .22); color: #fff; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .dk-head .rec:active { background: rgba(0, 0, 0, .3); } .dk-head .rec .rl .lvl.big { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .25); } .dk-head .rec .rm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; } .dk-head .rec .rm b { font-size: 1.375rem; font-weight: 800; line-height: 1.1; color: var(--dk-gold); font-variant-numeric: tabular-nums; } .dk-head .rec .rm span { font-size: .75rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-head .rec .rbar { height: .3rem; margin-top: .25rem; border-radius: .15rem; background: rgba(255, 255, 255, .18); overflow: hidden; } .dk-head .rec .rbar i { display: block; height: 100%; background: var(--dk-gold); border-radius: .15rem; transition: width .4s ease; } .dk-head .rec .rr { flex: none; display: flex; flex-direction: column; align-items: flex-end; } .dk-head .rec .rr b { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; } .dk-head .rec .rr span { font-size: .6875rem; opacity: .75; } .dk-head .rec > svg { width: 1rem; height: 1rem; opacity: .6; flex: none; } .dk-head .who { margin-top: .625rem; } .dk-top { display: flex; flex-direction: column; gap: .375rem; padding: 0 .75rem calc(1rem + var(--safe-bottom)); } .dk-top .group-title { padding-left: .5rem; } .dk-top .trow { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border-radius: .875rem; background: var(--color-background); box-shadow: var(--shadow-island); } .dk-top .trow.me { background: color-mix(in srgb, var(--dk-felt) 18%, var(--color-background)); box-shadow: inset 0 0 0 1px var(--dk-felt-light); } .dk-top .trow.p1 { background: color-mix(in srgb, #ffd166 16%, var(--color-background)); } .dk-top .trow .place { width: 2rem; text-align: center; font-size: .8125rem; font-weight: 700; color: var(--color-text-secondary); flex: none; } .dk-top .trow.p1 .place, .dk-top .trow.p2 .place, .dk-top .trow.p3 .place { font-size: 1.125rem; } .dk-top .trow .avatar { width: 2.25rem; height: 2.25rem; font-size: .9375rem; } .dk-top .trow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-top .trow .tx b { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-top .trow .tx span { font-size: .75rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-top .trow .rating { font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; } .dk-over .prow .delta { font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); } .dk-over .prow .delta.up { color: #1fa049; } .dk-over .prow .delta.down { color: var(--color-error); } .dk-over .myrt { margin: -.25rem 0 .75rem; padding: .5rem .75rem; border-radius: .75rem; background: var(--color-background-secondary); font-size: .9375rem; } .dk-over .myrt b { font-size: 1.25rem; font-weight: 800; } .dk-over .myrt.up b { color: #1fa049; } .dk-over .myrt.down b { color: var(--color-error); } .lvl-none { display: none; } .dk-head .rec .rl .rico { font-size: 1.75rem; line-height: 1; } .dk-head .rec .rm b { font-size: 1.5rem; } /* the stock is gone: the trump card lies where it was, faded, with a gold rim */ .dk-deck .stack.gone .pc.trump { transform: rotate(-8deg); z-index: 1; opacity: .8; box-shadow: 0 0 0 .125rem var(--dk-gold), 0 .25rem .75rem rgba(0, 0, 0, .35); left: .35rem; top: .15rem; } .dk-deck .stack.gone .pc.trump::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(27, 107, 69, .18); } .dk-deck .stack.gone + .n { color: var(--dk-gold); font-weight: 700; } /* the green dot on an avatar: in the app right now */ .avatar.on::after { content: ""; position: absolute; right: -.05rem; bottom: -.05rem; width: 28%; height: 28%; min-width: .625rem; min-height: .625rem; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 .14rem var(--color-background); } .dk-friends .frow .avatar.on::after, .dk-call .crow .avatar.on::after, .fchip .avatar.on::after { box-shadow: 0 0 0 .14rem var(--color-background); } .fchip .avatar.on::after { box-shadow: 0 0 0 .14rem var(--color-background-secondary); } .dk-wait .seat .avatar.on::after, .dk-opps .opp .avatar.on::after { display: none; } /* at the table «away» already says it */ .dk-friends .frow .tx .st { display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; color: var(--color-text-secondary); } .dk-friends .frow .tx .st.on { color: #34c759; font-weight: 600; } /* Флірситет: those who liked me, as cards with the two answers */ .likes-title, .match-title { display: flex; align-items: baseline; gap: .5rem; } .likes-title i, .match-title i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-text-secondary); } .like-cards { display: flex; flex-direction: column; gap: .5rem; padding: 0 .75rem .625rem; } .like-card { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: 1rem; background: var(--color-background); box-shadow: var(--shadow-island), inset 0 0 0 1px rgba(255, 60, 50, .12); position: relative; overflow: hidden; transition: transform .26s ease, opacity .26s ease; } .like-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .25rem; background: linear-gradient(#ff7eb3, #ff3c32); } .like-card .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.375rem; flex: none; cursor: pointer; } .like-card .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; cursor: pointer; } .like-card .tx b { font-size: 1.0625rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .like-card .tx > span { font-size: .8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .like-card .tx p { margin: .125rem 0 0; font-size: .8125rem; line-height: 1.3; color: var(--color-text); opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .like-card .acts { display: flex; gap: .5rem; flex: none; } .like-card .lk { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15); transition: transform .12s ease; } .like-card .lk:active { transform: scale(.9); } .like-card .lk svg { width: 1.375rem; height: 1.375rem; } .like-card .lk.no { background: var(--color-background-secondary-accent); color: var(--color-text-secondary); } .like-card .lk.yes { background: linear-gradient(135deg, #ff7eb3, #ff3c32); color: #fff; } .like-card.going-yes { transform: translateX(40%) rotate(4deg); opacity: 0; } .like-card.going-no { transform: translateX(-40%) rotate(-4deg); opacity: 0; } .match-rows .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; } .match-empty { margin: 0 .75rem .75rem; padding: 1rem; border-radius: 1rem; background: var(--color-background); display: flex; flex-direction: column; gap: .125rem; color: var(--color-text-secondary); font-size: .875rem; } .match-empty b { color: var(--color-text); font-size: 1rem; } /* a card with something waiting: a badge on the corner, a breathing rim */ .hub-card .hub-badge { position: absolute; top: .75rem; right: .75rem; z-index: 3; padding: .3rem .625rem; border-radius: 1rem; background: #fff; color: #c2337a; font-size: .875rem; font-weight: 800; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .3); animation: badge-pop .5s cubic-bezier(.34, 1.56, .64, 1) both, badge-bounce 2.4s ease-in-out 1s infinite; } .hub-card.durak .hub-badge { color: var(--dk-felt-dark); } @keyframes badge-pop { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes badge-bounce { 0%, 100% { transform: translateY(0); } 10% { transform: translateY(-.3rem) scale(1.06); } 20% { transform: translateY(0); } } .hub-card.alert { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18), 0 0 0 .1875rem rgba(255, 255, 255, .55); animation: card-breathe 2.4s ease-in-out infinite; } @keyframes card-breathe { 0%, 100% { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18), 0 0 0 .125rem rgba(255, 255, 255, .35); } 50% { box-shadow: 0 .5rem 1.75rem rgba(0, 0, 0, .22), 0 0 0 .25rem rgba(255, 255, 255, .75), 0 0 1.5rem rgba(255, 255, 255, .25); } } .hub-card.alert .art.flirt .heart { animation-duration: .9s; } .hub-card.flirt .hub-badge { top: auto; bottom: .875rem; right: .875rem; } @media (prefers-reduced-motion: reduce) { .hub-card.alert, .hub-card .hub-badge { animation: none !important; } } /* whose move it is, said in gold; the others' roles quietly */ .dk-opps .opp .role.now { background: var(--dk-gold); color: #3b2a00; font-weight: 700; } .dk-opps .opp .role.dim { opacity: .55; } .dk-opps .opp.turn::after { content: "ХІД"; position: absolute; top: -.35rem; left: 50%; transform: translateX(-50%); padding: .05rem .4rem; border-radius: .5rem; background: var(--dk-gold); color: #3b2a00; font-size: .5625rem; font-weight: 800; letter-spacing: .06em; box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .3); } /* the clock, plainly visible: a thick bar and the seconds */ .dk-timer { height: .5rem; margin: .25rem 3.25rem .375rem 1.25rem; position: relative; overflow: visible; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); border-radius: .25rem; } .dk-timer i { border-radius: .25rem; box-shadow: none; } .dk-timer.low i { box-shadow: none; } .dk-timer b { position: absolute; right: -2.9rem; top: 50%; transform: translateY(-50%); font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dk-gold); min-width: 2.5rem; text-align: left; } .dk-timer.low b { color: #ff8a80; } .dk-table.typing .dk-timer { height: .375rem; } /* cards in flight */ .pc.fly { box-shadow: 0 1rem 2rem rgba(0, 0, 0, .45), 0 0 0 .1rem rgba(255, 255, 255, .5); } .dk-board .slot .pc.land { animation: pc-land .28s cubic-bezier(.34, 1.56, .64, 1) both; } .dk-board .slot .pc.d.land { animation-name: pc-land-d; } @keyframes pc-land { 0% { transform: scale(1.12); } 100% { transform: none; } } @keyframes pc-land-d { 0% { transform: rotate(9deg) scale(1.12); } 100% { transform: rotate(9deg); } } /* the last card of the stock: the trump, upright, with a gold rim */ .dk-deck .stack.last .pc.trump { transform: none; z-index: 1; left: .35rem; top: 0; box-shadow: 0 0 0 .125rem var(--dk-gold), 0 .25rem .75rem rgba(0, 0, 0, .35); } /* the seconds stay on screen while typing too */ .dk-table.typing .dk-timer { margin: .125rem 3.25rem .25rem 1.25rem; } /* my move: the hand glows, the status breathes, a word flashes */ .dk-hand::before { display: none; } @keyframes hand-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .dk-status.mine { animation: status-breathe 1.6s ease-in-out infinite; text-shadow: 0 0 .75rem rgba(255, 209, 102, .6); } @keyframes status-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .dk-table.myturn .dk-timer i { box-shadow: none; } .dk-flash.turn { top: 38%; padding: .875rem 1.5rem; font-size: 1.375rem; border-radius: 1.25rem; background: rgba(255, 209, 102, .95); color: #3b2a00; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35), 0 0 0 .25rem rgba(255, 255, 255, .35); animation: turn-in .35s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes turn-in { from { opacity: 0; transform: translate(-50%, -30%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { .dk-hand.mine::before, .dk-status.mine { animation: none !important; } } .dk-flash.turn { top: 30%; font-size: 1.125rem; padding: .625rem 1.125rem; } .dk-board .slot .pc.land { animation: none; } /* my move without words: a wave through the hand, a gold line under it, the button pops */ .dk-hand.wave .pc { animation: card-wave .55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes card-wave { 0% { translate: 0 0; } 40% { translate: 0 -.75rem; } 100% { translate: 0 0; } } .dk-hand::after { content: ""; position: absolute; left: 50%; bottom: .1rem; width: 0; height: .25rem; border-radius: .125rem; background: var(--dk-gold); transform: translateX(-50%); opacity: 0; transition: width .35s ease, opacity .3s ease; pointer-events: none; } .dk-hand.mine::after { display: none; } @keyframes line-breathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } } .dk-bar.pop .btn { animation: btn-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes btn-pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } } .dk-tick { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 2rem; height: 2rem; border-radius: 50%; background: var(--dk-gold); color: #3b2a00; font-weight: 900; font-size: 1.125rem; display: grid; place-items: center; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .35); animation: tick-in .8s ease both; pointer-events: none; } .dk-pile { position: relative; } @keyframes tick-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } } .dk-status.mine { animation: none; text-shadow: none; } /* «+3»: what the taker got */ .dk-plus { position: absolute; left: 50%; top: 0; transform: translate(-50%, -20%); z-index: 9; padding: .2rem .6rem; border-radius: 1rem; background: #fff; color: var(--dk-red); font-weight: 800; font-size: .9375rem; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .35); animation: plus-in 1.2s ease both; pointer-events: none; } .dk-hand .dk-plus { top: -.5rem; } @keyframes plus-in { 0% { opacity: 0; transform: translate(-50%, 20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -20%) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -30%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%); } } .pc.back.fly { --w: 2.5rem; --h: 3.5rem; } /* the end of a bout, named over the table while the cards still lie there */ .dk-round { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; padding: .5rem 1.125rem; border-radius: 1rem; font-size: 1.125rem; font-weight: 800; white-space: nowrap; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .35); animation: round-in .28s cubic-bezier(.34, 1.56, .64, 1) both; pointer-events: none; } .dk-round.ok { background: var(--dk-gold); color: #3b2a00; } .dk-round.take { background: #fff; color: var(--dk-red); } .dk-round.out { transition: opacity .35s ease, transform .35s ease; opacity: 0; transform: translate(-50%, -80%); } @keyframes round-in { from { opacity: 0; transform: translate(-50%, -30%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .dk-mid { position: relative; } /* the opening deal: light backs, no drama; the taker's «+N» small */ .pc.back.fly.quiet { box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .3), inset 0 0 0 .09rem #fff, inset 0 0 0 .13rem var(--dk-back-b); border-radius: .3rem; } .pc.back.fly.quiet::after { inset: .15rem; } .dk-plus { padding: .1rem .45rem; font-size: .75rem; font-weight: 700; background: rgba(255, 255, 255, .92); box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .3); } .dk-hand .dk-plus { top: -.25rem; } /* short screens (old Androids, 360x640 and the like): everything gives way before the chat line and the buttons do */ .dk-mid { flex: 1 1 0; min-height: 0; } .dk-log { flex: 0 1 auto; min-height: 0; } @media (max-height: 700px) { .dk-opps { min-height: 4.75rem; padding-top: .25rem; } .dk-opps .opp .avatar { width: 2rem; height: 2rem; font-size: .8125rem; } .dk-opps .opp .cards { height: 1.4rem; } .dk-opps .opp .cards .pc { --w: 1.1rem; --h: 1.55rem; } .dk-opps .opp b { font-size: .6875rem; } .dk-opps .opp .role { font-size: .625rem; padding: .05rem .4rem; } .dk-log { max-height: 2.7rem; } .dk-status { font-size: .8125rem; min-height: 1.25rem; padding: 0 1rem; } .dk-timer { height: .375rem; margin: .125rem 3.25rem .25rem 1.25rem; } .dk-hand { height: 5.25rem; } .dk-hand .pc { --w: 3rem; --h: 4.2rem; } .dk-bar { min-height: 2.5rem; padding: 0 1rem .125rem; } .dk-bar .btn { height: 2.125rem; min-width: 5.5rem; font-size: .9375rem; } .dk-say { padding-top: .125rem; padding-bottom: calc(.375rem + var(--safe-bottom)); } .dk-say .emo { width: 1.875rem; height: 1.875rem; font-size: 1.125rem; } .dk-say input, .dk-say .go { height: 1.875rem; } .dk-mid { min-height: 3.5rem; } } @media (max-height: 600px) { .dk-log { max-height: 1.9rem; } .dk-opps .opp .cards { display: none; } .dk-opps { min-height: 3.75rem; } .dk-hand { height: 4.75rem; } .dk-hand .pc { --w: 2.7rem; --h: 3.8rem; } } /* «+N» on a seat: a small tag by the avatar, not over the name */ .dk-opps .opp .dk-plus { left: auto; right: .1rem; top: .1rem; transform: none; animation: plus-tag 1.2s ease both; } @keyframes plus-tag { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-.5rem); } } /* the opening deal: each card comes in from the stock's side, one after another, full size, no ghosts */ .dk-hand.dealing .pc { animation: pc-dealt .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes pc-dealt { 0% { transform: translate(-45vw, -30vh) rotate(-20deg) scale(.9); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(0, 0) rotate(var(--rot, 0)) scale(1); opacity: 1; } } .dk-opps .opp .role.take { background: rgba(255, 107, 107, .9); color: #fff; font-weight: 700; } /* watching: the clock keeps a margin from the screen's bottom edge; the seconds never leave the screen */ .dk-table.watching .dk-timer { margin-bottom: calc(1.5rem + var(--safe-bottom)); } .dk-table.watching .dk-status { padding-bottom: .625rem; } .dk-timer { margin-right: 3.75rem; } .dk-timer b { right: -3.4rem; min-width: 3rem; } /* «Бито» lives in the status line and the bar, not over the table */ .dk-status.bito { color: var(--dk-gold); font-weight: 800; letter-spacing: .02em; animation: bito-pop .3s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes bito-pop { from { transform: scale(.85); opacity: .4; } to { transform: none; opacity: 1; } } .dk-timer.bito i { transform: scaleX(1) !important; background: var(--dk-gold); opacity: .9; transition: none; } .dk-round { display: none !important; } /* the opening deal: a short rise into place, so a tap lands on the card at once */ .dk-hand.dealing .pc { animation: pc-dealt .32s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes pc-dealt { 0% { transform: translateY(1.5rem) rotate(var(--rot, 0)); opacity: 0; } 100% { transform: translateY(0) rotate(var(--rot, 0)); opacity: 1; } } /* «Бито ✓» on the pile: appears as the last card lands, stays until the next move opens */ .dk-tick { width: auto; height: auto; padding: .22rem .6rem; border-radius: 1rem; font-size: .8125rem; font-weight: 800; white-space: nowrap; top: 50%; animation: tick-pop .35s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes tick-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* playable cards keep their row: the gold rim marks them, nothing rises or drops when the move passes on */ /* a line of explanation under a list title */ .fnote { margin: -.25rem .25rem .75rem; font-size: .8125rem; line-height: 1.35; color: var(--muted, #8e8e93); } /* the result screen: who already asked for another game */ .dk-over .readyline { margin: .5rem 0 -.25rem; font-size: .8125rem; line-height: 1.35; color: var(--color-text-secondary); text-align: center; } /* «Вільних столів нема» takes a line, not a screen: the games under way are seen at once */ .dk-empty { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; row-gap: .1rem; align-items: center; text-align: left; padding: .75rem .875rem; } .dk-empty .mark { grid-row: span 2; font-size: 1.75rem; margin: 0; } .dk-empty b { font-size: .9375rem; } .dk-empty span { font-size: .8125rem; line-height: 1.35; max-width: none; } /* Android WebView (a screenshot of 2026-09-25): black rectangles inside the hub cards with only the coloured corners left — a GPU compositing fault when a rounded, overflow-hidden card clips an endlessly animated layer. The halo no longer animates, and every card and every little art card gets its own compositing layer, so the rounded clip is applied to one flat surface. */ .hub-card { isolation: isolate; transform: translateZ(0); backface-visibility: hidden; } .hub-card .glow { animation: none; transform: translate(-50%, -50%); } .hub-card .art.flirt .fc, .hub-card .art.durak .pc { backface-visibility: hidden; } .dk-promo { isolation: isolate; transform: translateZ(0); } /* ---- «Моя стіна» 2026-09-27: two feeds and a pill, compact heads, the wall on the chat's ground, reactions ---- */ .wall-chat .feedsub { position: absolute; top: 3.5rem; left: .75rem; right: .75rem; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; pointer-events: none; transition: opacity .18s ease; } .wall-chat .feedsub > * { pointer-events: auto; } .wall-chat .feedsub .note { flex: 1; min-width: 0; height: 1.875rem; line-height: 1.875rem; padding: 0 .625rem; border-radius: 1rem; background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255, 255, 255, .92); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wall-chat .feedsub .w2 { display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .75rem 0 .625rem; border-radius: 1rem; background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: .8125rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); position: relative; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); flex: none; } .wall-chat .feedsub .w2 svg { width: 1rem; height: 1rem; } .wall-chat .feedsub .w2.on { background: var(--color-primary); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); } .wall-chat.asking .feedsub { display: none; } body.ctx-open .wall-chat .feedsub { opacity: 0; pointer-events: none; } /* my card, tighter */ .ask-mine { padding: .5rem .5rem .5rem .625rem; gap: .5rem; margin-top: .375rem; } .ask-mine .avatar { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; } .ask-ib { width: 2rem; height: 2rem; border-radius: .625rem; } .ask-ib svg { width: 1rem; height: 1rem; } /* someone's head: the face left, who it is right, the line under both */ .ask-top { padding: .75rem .875rem .75rem; align-items: stretch; text-align: left; } .ask-top .head { display: flex; align-items: center; gap: .75rem; width: 100%; } .ask-top .avatar.hero { width: 4rem; height: 4rem; font-size: 1.75rem; flex: none; } .ask-top .t { flex: 1; min-width: 0; } .ask-top .t b { display: block; margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-top .t .sub { margin-top: .0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-top .t .ask-views { margin-top: .375rem; } .ask-top .line { max-width: none; margin-top: .5rem; text-align: left; } .ask-top .ask-tiles { margin-top: .625rem; } /* the wall on the chat's ground: the pane in the tab and the block on someone's page */ .wall-chat.asking.onwall .chat-bg { display: block; } .wall-chat .wask.onwall { background: transparent; } .ask-wallbg { position: relative; padding: .5rem 0 1rem; } /* a screen on the chat's ground: the ground under everything, the header and the scroll over it */ .layer.grounded > .chat-bg { z-index: 0; } .layer.grounded > .hdr { position: relative; z-index: 3; } .layer.grounded > .scroll { position: relative; z-index: 1; overscroll-behavior: none; } .layer.grounded > .ask-top { position: absolute; left: 0; right: 0; z-index: 2; will-change: transform; transition: transform .32s cubic-bezier(.32, .72, 0, 1); } /* the head, smaller (2026-09-27): the tiles lower, the face smaller */ .ask-top { padding: .625rem .875rem .625rem; } .ask-top .avatar.hero { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; } .ask-top .line { margin-top: .375rem; font-size: .875rem; display: block; -webkit-line-clamp: none; overflow: visible; white-space: pre-wrap; } /* the whole line (≤100 chars), no two-line cut (2026-09-27) */ .ask-top .ask-tiles { margin-top: .5rem; gap: .375rem; } .ask-tiles .tile { height: 2.125rem; border-radius: .625rem; gap: .375rem; } .ask-tiles .tile svg { width: 1rem; height: 1rem; } .ask-tiles .tile span { font-size: .8125rem; } /* the rating pill */ .ask-rate { display: inline-flex; align-items: center; gap: .25rem; height: 1.625rem; padding: 0 .625rem 0 .375rem; border-radius: .8125rem; background: rgba(18, 14, 38, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22), 0 .25rem .75rem rgba(0, 0, 0, .25); color: #fff; font-size: .8125rem; font-weight: 700; white-space: nowrap; position: relative; overflow: hidden; vertical-align: middle; } .ask-rate .flame { width: 1.125rem; height: 1.125rem; flex: none; filter: drop-shadow(0 0 .25rem rgba(255, 150, 40, .55)); } .ask-rate.top .flame { animation: flame-breathe 1.8s ease-in-out infinite; } @keyframes flame-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 .25rem rgba(255, 150, 40, .55)); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 .5rem rgba(255, 170, 60, .9)); } } .ask-rate b { font-weight: 800; font-variant-numeric: tabular-nums; } .ask-rate .rk { opacity: .85; font-weight: 600; } .ask-rate.small { height: 1.375rem; padding: 0 .5rem 0 .25rem; font-size: .75rem; margin: 0 0 0 auto; flex: none; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); } .ask-rate.small .flame { width: 1rem; height: 1rem; } .ask-rate.small .rk { display: none; } .ask-rate.top { box-shadow: inset 0 0 0 1px rgba(255, 190, 80, .75), 0 0 .75rem rgba(255, 160, 40, .45); } /* in the corner: of my card and of someone's head */ .ask-mine > .ask-rate.corner.corner { position: absolute; top: .4375rem; right: .5rem; height: 1.375rem; font-size: .75rem; } .ask-mine > .ask-rate.corner .flame { width: 1rem; height: 1rem; } .ask-mine { min-height: 4.5rem; align-items: center; } .ask-mine .ask-ibs { align-self: flex-end; margin-top: 1.5rem; } .ask-top > .ask-rate.corner.corner { position: absolute; top: .5rem; right: .75rem; z-index: 3; } .ask-top .head { padding-right: 6.5rem; } /* the first look: a ghost head and ghost bubbles while the wall loads, the records fading in after */ .ask-top.loading .ask-tiles { opacity: .55; pointer-events: none; } .ask-top.ghost .avatar.hero, .ask-top .bar, .ask-wallbg.ghost .qb, .ask-wallbg.ghost .ab, .ask-wallbg.ghost .avatar, .ask-wallbg .bar { animation: ghost-breathe 1.4s ease-in-out infinite; } .ask-top.ghost .avatar.hero { background: rgba(127, 127, 140, .35); color: transparent; box-shadow: none; } .ask-top .bar { display: block; height: .75rem; border-radius: .375rem; background: rgba(127, 127, 140, .32); margin: .25rem 0; } .ask-top .bar.w60 { width: 60%; height: 1rem; } .ask-top .bar.w40 { width: 40%; } .ask-top .bar.pill { width: 6rem; height: 1.5rem; border-radius: .75rem; margin-top: .5rem; } .ask-top .bar.line { width: 100%; margin-top: .625rem; } .ask-top .bar.line.w70 { width: 70%; margin-top: .375rem; } .ask-wallbg.ghost { pointer-events: none; } .ask-wallbg .bar.title { display: block; width: 4.5rem; height: .8125rem; border-radius: .4rem; margin: .25rem .75rem .75rem; background: rgba(255, 255, 255, .25); } .ask-wallbg.ghost .qb, .ask-wallbg.ghost .ab { height: 2.5rem; box-shadow: none; } .ask-wallbg.ghost .qb { background: rgba(255, 255, 255, .22); } .ask-wallbg.ghost .ab { background: rgba(139, 124, 255, .45); } .ask-wallbg.ghost .avatar { background: rgba(255, 255, 255, .18); color: transparent; } .ask-wallbg.ghost .ask-it:nth-child(3) { opacity: .75; } .ask-wallbg.ghost .ask-it:nth-child(4) { opacity: .5; } @keyframes ghost-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .ask-wallbg.fresh .ask-it { animation: ghost-in .16s ease-out both; } /* one soft appearance, no queue (2026-09-28) */ @keyframes ghost-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } } /* the head folds as the wall scrolls (2026-09-27, transforms only): the whole head slides up by --fold, its row and the rating slide back down by the same, the face scales, the line / views / tiles fade */ /* v2 (2026-10-02, the user: «плавнее»): the fold follows the scroll — --p is how far in it is, 0…1, set by the scroll handler; registered so a change glides over 120 ms instead of stepping with each scroll event; the folded class only keeps the finger off the faded parts and pins --p at 1 when the field holds the head up */ @property --p { syntax: ""; inherits: true; initial-value: 0; } .ask-top { --p: 0; transition: --p .2s cubic-bezier(.25, .6, .3, 1); transform: translateY(calc(-1 * var(--fold, 0px) * var(--p))); } .ask-top.folded { --p: 1; } .ask-top .head, .ask-top > .ask-rate.corner.corner { transform: translateY(calc(var(--fold, 0px) * var(--p))); will-change: transform; } .ask-top .avatar.hero { transform-origin: left center; transform: scale(calc(1 - .36 * var(--p))); transition: box-shadow .32s; will-change: transform; } .ask-top.folded .avatar.hero { box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .7); } .ask-top .t { transform: translateX(calc(-1.25rem * var(--p))); will-change: transform; } .ask-top .meta { margin-top: .375rem; } .ask-top .meta, .ask-top .line, .ask-top .ask-tiles, .ask-top .ask-blocked { opacity: calc(1 - var(--p) * 1.8); } .ask-top.folded .meta, .ask-top.folded .line, .ask-top.folded .ask-tiles, .ask-top.folded .ask-blocked { pointer-events: none; } /* the picture and its veil stay put on the screen while the head slides up over them (2026-10-02, the user: «сзади меняется положение фона»): the same shift back */ .ask-top .bg { inset: auto; top: calc(-4rem - var(--fold, 0px)); left: -15%; right: -15%; height: calc(26rem + var(--fold, 0px)); will-change: transform; transform: translateY(calc(var(--fold, 0px) * var(--p))) scale(1.1); } /* taller by the fold: shifted back it must still reach the top edge (the user: «отрывается от шапки») */ .ask-top .ask-tiles.three { opacity: 1; } /* the three tiles never fade: they travel (flipTiles) */ .ask-top .ask-tiles.three .tile { will-change: transform; transform-origin: 50% 50%; } .ask-top > .ask-rate.corner.corner { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18, 14, 38, .78); } .ask-top.pic .ask-tiles .tile { backdrop-filter: none; -webkit-backdrop-filter: none; } /* (2026-09-27) no will-change on the wall's scroll box: with it iOS WebKit leaves the box blank under a fast scroll and after a programmatic one — the wall came up empty or in pieces */ .ask-card .title .medal { font-size: 1rem; line-height: 1; margin-right: .25rem; } .ask-top.pic .ask-rate { box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .3); } .wall-chat .wask { overscroll-behavior: none; } .layer.grounded .ask-top { box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18); } .layer.grounded .empty { color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .layer.grounded .empty .strong { color: #fff; } .ask-wallbg .group-title { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wask.onwall .ask-tabs { background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .wask.onwall .ask-tabs button { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wask.onwall .ask-tabs button.on { color: #000; text-shadow: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .18), 0 1px 1px rgba(0, 0, 0, .06); } .wask.onwall .empty { color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wask.onwall .empty .strong { color: #fff; } .ask-write { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .25rem .75rem .625rem; width: calc(100% - 1.5rem); height: 2.5rem; border-radius: 1.25rem; background: var(--color-background); color: var(--color-primary); font-size: .9375rem; font-weight: 600; box-shadow: var(--shadow-island); position: relative; overflow: hidden; } .ask-write svg { width: 1.125rem; height: 1.125rem; } /* one thing on the wall: bubbles, no box */ .ask-it { margin: 0 .75rem .75rem; } .ask-it .qrow, .ask-it .arow { display: flex; align-items: flex-end; gap: .375rem; } .ask-it .arow { justify-content: flex-end; margin-top: .25rem; } .ask-it .avatar { width: 1.75rem; height: 1.75rem; font-size: .875rem; flex: none; } .ask-it .avatar.mask { background: linear-gradient(135deg, #6b6b78, #3a3a44); } .ask-it .avatar.own { background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .ask-it .qb, .ask-it .ab { position: relative; max-width: 84%; padding: .4375rem .625rem .3125rem; font-size: .9375rem; line-height: 1.35; -webkit-user-select: none; user-select: none; } .ask-it .tx { white-space: pre-wrap; word-break: break-word; } .ask-it .qb { border-radius: 1rem 1rem 1rem .25rem; background: var(--color-background); color: var(--color-text); box-shadow: 0 1px 1px rgba(0, 0, 0, .1); } .ask-it .ab { border-radius: 1rem 1rem .25rem 1rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; box-shadow: 0 .25rem .75rem rgba(90, 63, 214, .28); } .ask-it .qb b, .ask-it .ab b { display: block; font-size: .6875rem; font-weight: 700; margin-bottom: .0625rem; opacity: .75; } .ask-it .qb b { color: var(--color-primary); opacity: 1; } .ask-it .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .1875rem; min-height: .875rem; } .ask-it .reacts { display: flex; flex-wrap: wrap; gap: .25rem; } .ask-it .reacts:empty { display: none; } .ask-it .rc { display: inline-flex; align-items: center; gap: .25rem; height: 1.5rem; padding: 0 .5rem 0 .375rem; border-radius: .75rem; font-size: .75rem; font-weight: 600; background: rgba(255, 255, 255, .2); color: #fff; position: relative; overflow: hidden; margin-top: .25rem; } .ask-it .rc .e { font-size: .875rem; line-height: 1; } .ask-it .rc.own { background: #fff; color: #5a3fd6; } .ask-it .rc.pop { animation: ask-pop .38s cubic-bezier(.2, .8, .2, 1); } .ask-it time { margin-left: auto; font-size: .625rem; color: rgba(255, 255, 255, .75); white-space: nowrap; align-self: flex-end; } .ask-it.gone { animation: card-gone .3s ease-in forwards; pointer-events: none; } /* the reactions over a held thing */ .ctx-react { position: fixed; z-index: 2; display: flex; gap: .125rem; padding: .25rem; border-radius: 1.5rem; background: color-mix(in srgb, var(--color-background) 88%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .08); opacity: 0; transform: scale(.6); transform-origin: bottom left; transition: opacity .18s ease, transform .22s cubic-bezier(.32, .72, 0, 1); } .ctx-root.open .ctx-react { opacity: 1; transform: scale(1); } .ctx-react .re { width: 2.625rem; height: 2.375rem; border-radius: 1.25rem; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; transition: transform .12s ease, background .12s ease; } .ctx-react .re:active { transform: scale(1.3); } .ctx-react .re.on { background: var(--color-primary-tint); } /* «Хочу таку саму стіну» over the wall (2026-09-27) */ .ask-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .625rem .75rem .125rem; width: calc(100% - 1.5rem); height: 2.75rem; border-radius: 1.375rem; color: #fff; font-size: .9375rem; font-weight: 700; background: radial-gradient(120% 120% at 100% 0%, #8b7cff 0%, #5a3fd6 45%, #2a1c6e 100%); box-shadow: 0 .5rem 1.25rem rgba(42, 28, 110, .35), inset 0 0 0 .5px rgba(255, 255, 255, .25); } .ask-cta::before { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; pointer-events: none; } .ask-cta::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .32), transparent); transform: skewX(-20deg); animation: cta-shine 3.6s ease-in-out infinite; pointer-events: none; } @keyframes cta-shine { 0%, 55% { left: -60%; } 100% { left: 140%; } } .ask-cta svg { width: 1.125rem; height: 1.125rem; position: relative; flex: none; } .ask-cta span { position: relative; } .ask-cta svg:nth-of-type(2) { width: 1rem; height: 1rem; opacity: .7; margin-left: -.125rem; } /* nth-of-type, not last-child: the ripple wave appended on a tap made the chevron «not last» and the text re-centred (2026-09-27) */ .ask-cta:active { transform: scale(.98); } .ask-views { position: relative; overflow: hidden; cursor: pointer; } .ask-views:active { opacity: .75; } /* «Моя стіна»: one block on top — the feed switch, my card, the capsule (2026-09-27) */ .wall-chat .wask { padding-top: .5rem; } .ask-panel { position: relative; margin: 0 .75rem .5rem; padding: .375rem; border-radius: 1.125rem; background: color-mix(in srgb, var(--color-background) 90%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-island); } .ask-panel > .feedseg.inpanel { position: static; margin: 0 0 .375rem; width: auto; left: auto; right: auto; top: auto; transform: none; } .ask-panel .feedseg button, .wask.onwall .ask-panel .ask-tabs button { color: var(--color-text); text-shadow: none; } .ask-panel .feedseg button.on, .wask.onwall .ask-panel .ask-tabs button.on { color: #000; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); } :root[data-theme="dark"] .ask-panel .feedseg button.on, :root[data-theme="dark"] .wask.onwall .ask-panel .ask-tabs button.on { color: #fff; } .wask.onwall .ask-panel .ask-tabs { background: rgba(118, 118, 128, .12); backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-theme="dark"] .wask.onwall .ask-panel .ask-tabs { background: rgba(118, 118, 128, .24); } .ask-panel .ask-mine { margin: 0 0 .375rem; border-radius: .875rem; } .ask-panel .ask-tabs { margin: 0; } /* the write bar over my wall, the channel's twin */ .wall-write.askw { display: none; } /* only over my own wall; on the channel it hid the channel's bar (2026-09-27) */ .wall-chat.asking.onwall.mine .wall-write.askw { display: flex; } .wall-chat.asking.onwall.mine .wask { padding-bottom: calc(var(--tabbar-space) + 5rem); } body.ctx-open .wall-write.askw { opacity: 0; pointer-events: none; } /* the top of «Стіни» without a box (2026-09-27): the switch, the card and the capsule float on the ground, all lower */ .ask-panel { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 0; margin: 0 .75rem .5rem; } .ask-panel > .feedseg.inpanel { margin: 0 0 .5rem; } .ask-panel .ask-mine { margin: 0 0 .5rem; border-radius: 1rem; } .wall-chat .feedseg { padding: .125rem; border-radius: .6875rem; } .wall-chat .feedseg button { height: 1.875rem; border-radius: .5625rem; font-size: .8125rem; } .wall-chat .feedsub { top: 3rem; } .wall-chat.with-seg .wmsgs > .wcol { padding-top: 3.25rem; } .wall-chat.with-seg.noted .wmsgs > .wcol { padding-top: 5.5rem; } .ask-panel .ask-tabs { padding: .125rem; border-radius: .6875rem; } .ask-panel .ask-tabs button { height: 1.75rem; border-radius: .5625rem; font-size: .75rem; } .wask.onwall .ask-panel .feedseg, .wask.onwall .ask-panel .ask-tabs { background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .wask.onwall .ask-panel .feedseg button, .wask.onwall .ask-panel .ask-tabs button { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wask.onwall .ask-panel .feedseg button.on, .wask.onwall .ask-panel .ask-tabs button.on { color: #000; text-shadow: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .18), 0 1px 1px rgba(0, 0, 0, .06); } :root[data-theme="dark"] .wask.onwall .ask-panel .feedseg button.on, :root[data-theme="dark"] .wask.onwall .ask-panel .ask-tabs button.on { color: #fff; } .wask.onwall .ask-panel .ask-tabs button.on .n { background: #fff; color: var(--color-primary); } /* the head without a picture (2026-09-27): the avatar's own colour, blurred, behind it */ .ask-top .bg.tone { background: linear-gradient(135deg, var(--av-a), var(--av-b)); filter: blur(28px) saturate(1.2); } .ask-top .bg.tone.c1 { --av-a: #ff885e; --av-b: #ff516a; } .ask-top .bg.tone.c2 { --av-a: #ffcd6a; --av-b: #ffa85c; } .ask-top .bg.tone.c3 { --av-a: #82b1ff; --av-b: #665fff; } .ask-top .bg.tone.c4 { --av-a: #a0de7e; --av-b: #54cb68; } .ask-top .bg.tone.c5 { --av-a: #53edd6; --av-b: #28c9b7; } .ask-top .bg.tone.c6 { --av-a: #72d5fd; --av-b: #2a9ef1; } .ask-top .bg.tone.c7 { --av-a: #e0a2f3; --av-b: #d669ed; } /* my card in the section is that head */ .ask-panel .ask-top { border-radius: 1rem; overflow: hidden; margin: 0 0 .5rem; box-shadow: var(--shadow-island); } .ask-panel .ask-top .head { padding-right: 6.5rem; } .ask-top.off .avatar.hero { filter: grayscale(1); } .ask-top.off .t .sub { color: #ffb4b4; } /* the letter sits in the middle of the big face (2026-09-27): the base avatar centres by line-height, the hero is taller than that */ .ask-top .avatar.hero { display: grid; place-items: center; line-height: 1; padding: 0; } .ask-top .avatar.hero img { width: 100%; height: 100%; object-fit: cover; } /* the ring around the face, softer (2026-09-27): a little see-through, on every head */ .ask-top .avatar.hero { box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .4), 0 .5rem 1.5rem rgba(0, 0, 0, .3); } .ask-top.folded .avatar.hero { box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .35); } /* reactions on a line of a conversation (2026-09-27) */ .msg .bubble .dmr { display: flex; flex-wrap: wrap; gap: .25rem; padding: .25rem 0 .125rem; } .msg .bubble .dmr[hidden] { display: none; } .msg .bubble .dmr .rc { display: inline-flex; align-items: center; gap: .25rem; height: 1.5rem; padding: 0 .5rem 0 .375rem; border-radius: .75rem; font-size: .75rem; font-weight: 600; background: var(--color-primary-tint); color: var(--color-primary); position: relative; overflow: hidden; } .msg .bubble .dmr .rc .e { font-size: .875rem; line-height: 1; } .msg .bubble .dmr .rc.own { background: var(--color-primary); color: #fff; } .msg.own .bubble .dmr .rc { background: rgba(255, 255, 255, .22); color: #fff; } .msg.own .bubble .dmr .rc.own { background: #fff; color: var(--color-primary); } /* the note from the top (2026-09-27) */ .push-note { position: fixed; top: calc(var(--safe-top) + .5rem); left: .75rem; right: .75rem; z-index: 1600; display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; border-radius: 1.125rem; background: color-mix(in srgb, var(--color-background) 86%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .08); transform: translateY(calc(-100% - 1.5rem)); opacity: 0; transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; cursor: pointer; } .push-note.open { transform: none; opacity: 1; } .push-note .pi { width: 2.5rem; height: 2.5rem; border-radius: .875rem; flex: none; display: grid; place-items: center; font-size: 1.375rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; box-shadow: 0 .25rem .75rem rgba(90, 63, 214, .35); } .push-note .pi svg { width: 1.375rem; height: 1.375rem; } .push-note .pt { flex: 1; min-width: 0; line-height: 1.25; } .push-note .pt b { display: block; font-size: .9375rem; font-weight: 700; color: var(--color-text); } .push-note .pt span { display: block; font-size: .8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the capsules on a question card */ .acard.askq .actions { display: flex; gap: .5rem; margin-top: .625rem; align-items: center; } .acard.askq .actions .pill.primary { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; border-radius: 1.25rem; padding: 0 1rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; font-size: .9375rem; font-weight: 700; box-shadow: 0 .375rem 1rem rgba(90, 63, 214, .3); position: relative; overflow: hidden; } .acard.askq .actions .pill.primary svg { width: 1.125rem; height: 1.125rem; } .acard.askq .actions .pill.round { width: 2.5rem; height: 2.5rem; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--color-background-secondary); color: var(--color-text-secondary); flex: none; } .acard.askq .actions .pill.round svg { width: 1.25rem; height: 1.25rem; } .acard.askq.in { animation: ghost-in .38s cubic-bezier(.2, .8, .2, 1) both; } /* twenty reactions: the bar scrolls sideways, no scrollbar, a fade at the far end (2026-09-27) */ .ctx-react { overflow-x: auto; overflow-y: hidden; box-sizing: border-box; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent); } .ctx-react::-webkit-scrollbar { display: none; } .ctx-react .re { flex: none; scroll-snap-align: start; } /* a line leaving (2026-09-27) */ .msg.gone { overflow: hidden; opacity: 0; transform: scale(.82); margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; pointer-events: none; transition: opacity .22s ease, transform .3s cubic-bezier(.4, 0, .2, 1), height .32s cubic-bezier(.4, 0, .2, 1), margin .32s cubic-bezier(.4, 0, .2, 1), padding .32s cubic-bezier(.4, 0, .2, 1); } /* the chips keep clear of the time in the corner (2026-09-27) */ .msg .bubble .dmr { padding-right: 3.25rem; } .msg.own .bubble .dmr { padding-right: 4.25rem; } /* the dust of a deleted line (2026-09-27) */ .boom { position: fixed; z-index: 1700; pointer-events: none; overflow: visible; } .boom i { position: absolute; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; border-radius: 50%; opacity: 0; transform: scale(var(--s, 1)); box-shadow: 0 0 .375rem currentColor; animation: boom 2s cubic-bezier(.16, .62, .3, 1) forwards; will-change: transform, opacity; } @keyframes boom { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s, 1)) rotate(0deg); } 8% { opacity: 1; } 45% { opacity: .95; transform: translate(var(--dx), var(--dy)) scale(calc(var(--s, 1) * 1.1)) rotate(var(--rot, 0deg)); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + var(--fall, 50px))) scale(0) rotate(calc(var(--rot, 0deg) * 1.5)); } } .msg.gone { transition-duration: .45s, .6s, .5s, .5s, .5s; transition-delay: .1s, 0s, .25s, .25s, .25s; } /* a conversation loading: ghost bubbles instead of a spinner (2026-09-27) */ .chat-load.ghost { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: .5rem; padding: 0 .75rem calc(var(--composer-reserve, 4.5rem) + .75rem); } .chat-load.ghost .gmsg { display: flex; width: 100%; } .chat-load.ghost .gmsg.own { justify-content: flex-end; } .chat-load.ghost .gb { height: 2.625rem; border-radius: 1.125rem; background: rgba(255, 255, 255, .24); animation: ghost-breathe 1.4s ease-in-out infinite; } .chat-load.ghost .gmsg.own .gb { background: rgba(51, 144, 236, .48); } :root[data-theme="dark"] .chat-load.ghost .gb { background: rgba(255, 255, 255, .14); } :root[data-theme="dark"] .chat-load.ghost .gmsg.own .gb { background: rgba(51, 144, 236, .4); } .chat-load.ghost .gmsg:nth-child(2) .gb { animation-delay: .12s; } .chat-load.ghost .gmsg:nth-child(3) .gb { animation-delay: .24s; } .chat-load.ghost .gmsg:nth-child(4) .gb { animation-delay: .36s; } .chat-load.ghost .gmsg:nth-child(5) .gb { animation-delay: .48s; } .chat-load.ghost .gmsg:nth-child(6) .gb { animation-delay: .6s; } .chat-load.ghost .gmsg:nth-child(1) { opacity: .45; } .chat-load.ghost .gmsg:nth-child(2) { opacity: .6; } .chat-load.ghost .gmsg:nth-child(3) { opacity: .75; } .chat-load.ghost .gmsg:nth-child(4) { opacity: .85; } /* the ground as one bitmap, and the spare one waiting (2026-09-27) */ .chat-bg canvas.ground { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .chat-bg.img { background-size: 100% auto; background-repeat: no-repeat; background-position: 0 0; } /* the ground as one shared picture (2026-09-27): the composed bitmap, width-fitted, kept in aspect */ .ground-pool { position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .01; pointer-events: none; z-index: 0; } .ground-pool .chat-bg { position: absolute; inset: 0; } /* the ghosts wait a quarter of a second before showing (2026-09-27): a fast answer means no flash of placeholders at all */ .chat-load.ghost { opacity: 0; animation: ghost-appear .22s ease .25s forwards; } .chat-load.ghost.gone { animation: none; opacity: 0; } .ask-top.ghost, .ask-wallbg.ghost { opacity: 0; animation: ghost-appear .22s ease .25s forwards; } @keyframes ghost-appear { to { opacity: 1; } } /* an empty wall (2026-09-27) */ .ask-wallbg.none { min-height: 55vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; } .wall-none { text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); max-width: 20rem; animation: ghost-in .4s cubic-bezier(.2, .8, .2, 1) both; } .wall-none .mark { font-size: 3rem; line-height: 1; margin-bottom: .75rem; filter: drop-shadow(0 .25rem .75rem rgba(0, 0, 0, .3)); } .wall-none b { display: block; font-size: 1.125rem; font-weight: 700; margin-bottom: .375rem; } .wall-none span { display: block; font-size: .9375rem; line-height: 1.35; opacity: .85; } .wall-none .wall-ask { display: inline-flex; align-items: center; gap: .375rem; margin-top: .875rem; height: 2.125rem; padding: 0 .875rem 0 .75rem; border-radius: 1.0625rem; background: rgba(255, 255, 255, .94); color: var(--color-primary); font-size: .875rem; font-weight: 700; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); position: relative; overflow: hidden; text-shadow: none; } .wall-none .wall-ask svg { width: 1rem; height: 1rem; } .wall-none .wall-ask:active { transform: scale(.97); } /* the write sheet, glass (2026-09-27): who writes and where is spelled out, the subtitle wraps, it fades as it slides */ .qsheet { background: color-mix(in srgb, var(--color-background) 76%, transparent); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 -.5rem 2rem rgba(0, 0, 0, .28), inset 0 .5px 0 rgba(255, 255, 255, .35); transition: transform var(--layer-transition), opacity .22s ease; opacity: 0; } .sheet-root.open .qsheet { opacity: 1; } .qsheet .qhead .t span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } .qsheet .qwho { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin: -.125rem 0 .625rem; } .qsheet .qwho .chip { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .625rem; border-radius: .875rem; font-size: .8125rem; font-weight: 600; background: rgba(127, 127, 140, .16); color: var(--color-text); white-space: nowrap; } .qsheet .qwho .chip.me { background: linear-gradient(135deg, #6b6b78, #3a3a44); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2); } .qsheet .qwho .chip.me.own { background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .qsheet .qwho .arrow { color: var(--color-text-secondary); font-size: .9375rem; } .qsheet textarea { background: rgba(127, 127, 140, .14); } .qsheet .qx { background: rgba(127, 127, 140, .18); } /* the sheet's glass only once it has landed (2026-09-27): a backdrop blur riding with the keyboard stuttered on the iPhone */ .qsheet { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--color-background) 93%, transparent); } /* one look from the first frame to the last: nothing switches once it has landed (2026-09-27) */ /* the capsule never wraps or shrinks under the finger (2026-09-27) */ .ask-cta { flex-wrap: nowrap; white-space: nowrap; box-sizing: border-box; min-height: 2.75rem; } .ask-cta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-cta:active { transform: none; opacity: .88; } .ask-cta .ripple-wave { --ripple-color: rgba(255, 255, 255, .25); } /* the head's ground without filters, v3 (2026-09-27): the colour, then the blurred photo bitmap fading in over it */ .ask-top .bg.tone { filter: none; transform: none; inset: 0; height: auto; will-change: auto; } .ask-top canvas.bg.photo { position: absolute; inset: -4%; width: 108%; height: 108%; filter: none; transform: none; opacity: 0; transition: opacity .25s ease; image-rendering: auto; will-change: auto; } .ask-top canvas.bg.photo.ready { opacity: 1; } /* the head's ground: a tint, no blur (2026-09-27) */ .ask-top .bg.tone { filter: none; transform: none; inset: 0; height: auto; will-change: auto; } .ask-top .veil { background: linear-gradient(180deg, rgba(12, 10, 30, .18) 0%, rgba(12, 10, 30, .42) 100%); } /* the head's colours (2026-09-27) */ .ask-top .bg.tone2 { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; filter: none; transform: none; height: auto; } .ask-top .bg.tone2.on { opacity: 1; } .avatar.hero img.hero-img { opacity: 0; transition: opacity .18s ease; } .avatar.hero img.hero-img.ld { opacity: 1; } .ask-tones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .625rem; } .ask-tones .tone { width: 2.375rem; height: 2.375rem; border-radius: 50%; position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); transition: transform .12s ease; } .ask-tones .tone svg { width: 1.125rem; height: 1.125rem; } .ask-tones .tone.on { box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary); } .ask-tones .tone:active { transform: scale(.94); } .avatar.hero canvas.hero-img { width: 100%; height: 100%; display: block; border-radius: 50%; } /* the record button while it records (2026-09-27) */ .composer .main.rec { background: #ff3b30; animation: rec-pulse 1.2s ease-in-out infinite; } @keyframes rec-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .35); } 50% { box-shadow: 0 0 0 .625rem rgba(255, 59, 48, 0); } } .composer .main .i-cam { transform: none; } /* one field, everything inside (2026-09-27): the clip on the left, the words, the microphone/camera in grey on the right, and with words a small blue circle in the very same spot — compact, like Telegram on a phone */ :root { --composer-main: 2.75rem; } .composer .field { padding: 0 .1875rem 0 .25rem; min-height: 2.75rem; border-radius: 1.375rem; } .composer .field .abtn { width: 2.75rem; } .composer .field .abtn svg { width: 1.375rem; height: 1.375rem; } .composer .field .main { width: 2.375rem; height: 2.375rem; margin: .1875rem 0 .1875rem .125rem; align-self: flex-end; flex: none; border-radius: 50%; background: transparent; color: var(--color-text-secondary); box-shadow: none; transition: background .18s ease, color .18s ease, transform .1s ease; } .composer .field .main svg { width: 1.5rem; height: 1.5rem; } .composer .field .main.send { background: var(--color-primary); color: #fff; } .composer .field .main.send svg { width: 1.25rem; height: 1.25rem; } .composer .field .main.rec { background: #ff3b30; color: #fff; } .composer .field .main:active { transform: scale(.92); } .composer textarea { font-size: 1rem; } /* the lock over the record button (2026-09-27): slide up to lock */ .composer .field .rec-lock { position: absolute; right: .375rem; bottom: calc(100% + .5rem); width: 2.25rem; padding: .5rem 0 .375rem; border-radius: 1.125rem; background: color-mix(in srgb, var(--color-background) 90%, transparent); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; gap: .125rem; font-size: .875rem; color: var(--color-text-secondary); animation: lock-bob 1.1s ease-in-out infinite; pointer-events: none; z-index: 3; } .composer .field .rec-lock .arrow { font-size: .75rem; line-height: 1; } .composer .field .rec-lock.on { animation: none; background: var(--color-primary); color: #fff; } .composer .field .rec-lock.on .arrow { display: none; } @keyframes lock-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.3rem); } } .composer .field .main.locked { background: var(--color-primary); color: #fff; animation: none; } /* the round video while it records (2026-09-27): the preview floats, nothing to press on it */ .circ-rec.hold { background: transparent; pointer-events: none; justify-content: flex-start; padding-top: 12vh; gap: 1rem; } .circ-rec.hold .ring { width: min(62vw, 16rem); height: min(62vw, 16rem); box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .5), 0 0 0 4px rgba(255, 255, 255, .35); } .circ-rec.hold .timer { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } /* the strip leaves the button on the right free */ .composer .field .recbar { inset: 0 2.625rem 0 0; border-radius: 1.375rem 0 0 1.375rem; } /* no voice, no round video for now (2026-09-27): the button shows only when there is something to send; the field sits a little higher */ .composer .field .main:not(.send) { display: none; } .composer .field { padding-right: .375rem; } .composer .field .main.send { margin-right: 0; } .composer-wrap { padding-bottom: calc(1rem + var(--safe-bottom)); } body.keyboard-visible .composer-wrap { padding-bottom: .75rem; } .chat-layer { --composer-reserve: calc(var(--composer-height) + 1.25rem + var(--safe-bottom)); } /* the ground keeps its scale (2026-09-27): a shorter box (the keyboard) crops it at the bottom instead of squeezing the doodles */ .chat-bg canvas.ground { height: auto; min-height: 100%; bottom: auto; } /* the lines and the field move by the same amount when the keyboard comes, and together (2026-09-27): the field's bottom padding loses .25rem + the safe area, so the list's does too, on the same curve */ .msgs > .mcol { transition: padding-bottom 260ms cubic-bezier(.32, .72, 0, 1); } body.keyboard-visible .msgs > .mcol { padding-bottom: calc(var(--composer-height) + 1.5rem); } /* «Дописи» (2026-09-27): the capsule over the channel's posts / wall 2 */ .wall-chat > .wall-seg { position: absolute; top: .5rem; left: .75rem; right: .75rem; z-index: 5; margin: 0; background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity .2s ease; } .wall-chat > .wall-seg button { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wall-chat > .wall-seg button.on { color: #000; text-shadow: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .18), 0 1px 1px rgba(0, 0, 0, .06); } body.ctx-open .wall-chat > .wall-seg { opacity: 0; pointer-events: none; } .wall-chat.posts .feedsub { justify-content: stretch; } /* «Повідомлення» on top (2026-09-27): the row to write a post, the pinned talk with the team */ .row-item.chat.write-row { padding-right: .75rem; } .row-item.chat.write-row .avatar.write { display: grid; place-items: center; background: linear-gradient(135deg, #3390ec, #1f6fc4); color: #fff; box-shadow: 0 .25rem .75rem rgba(51, 144, 236, .3); } .row-item.chat.write-row .avatar.write svg { width: 1.375rem; height: 1.375rem; stroke-width: 2; } .row-item.chat.write-row .title h3 { color: var(--color-primary); } .row-item.chat.write-row .chev { flex: none; margin-left: .5rem; color: var(--color-text-secondary); opacity: .55; display: grid; place-items: center; } .row-item.chat.write-row .chev svg { width: 1.125rem; height: 1.125rem; } .row-item.chat .title .pin { flex: none; margin-left: .375rem; color: var(--color-text-secondary); opacity: .7; display: inline-grid; place-items: center; } .row-item.chat .title .pin svg { width: .875rem; height: .875rem; } /* «Моя стіна»: the field at the bottom (2026-09-27) — glass over the ground, one writes right here */ .ask-compose { position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--tabbar-space) + .625rem); z-index: 5; display: none; transition: opacity .18s ease, transform .18s ease; } .wall-chat.asking.onwall.mine .ask-compose { display: block; } body.keyboard-visible .ask-compose { bottom: .75rem; } .ask-compose .field { display: flex; align-items: flex-end; min-height: 2.75rem; padding: 0 .375rem 0 .25rem; border-radius: 1.375rem; background: rgba(0, 0, 0, .34); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18), inset 0 0 0 .5px rgba(255, 255, 255, .18); } .ask-compose textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; resize: none; padding: .6875rem .5rem .6875rem .875rem; font: inherit; font-size: 1rem; line-height: 1.3125; color: #fff; caret-color: #fff; max-height: 120px; } .ask-compose textarea::placeholder { color: rgba(255, 255, 255, .72); } .ask-compose .main { width: 2.375rem; height: 2.375rem; margin: .1875rem 0 .1875rem .125rem; flex: none; border-radius: 50%; display: none; place-items: center; background: var(--color-primary); color: #fff; box-shadow: 0 .25rem .625rem rgba(0, 0, 0, .18); } .ask-compose .main.send { display: grid; animation: pop-in .18s ease-out; } .ask-compose .main svg { width: 1.25rem; height: 1.25rem; } .ask-compose .main:active { transform: scale(.92); } .ask-compose .main:disabled { opacity: .5; } body.ctx-open .ask-compose { opacity: 0; pointer-events: none; transform: translateY(1rem); } /* the line under the name: three lines, then «Більше» (2026-09-27) */ .ask-top .line { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; } .ask-top .line-more { display: inline-block; margin: .125rem 0 0; padding: 0; font-size: .875rem; font-weight: 600; color: var(--color-primary); background: none; } .ask-top .line-more[hidden] { display: none; } .wask.onwall .ask-top .line-more, .ask-top.pic .line-more { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); opacity: .9; } /* a window whose text scrolls inside a box of a fixed size: the rules, a long description */ .modal-dialog.scroll .mtext { height: min(52vh, 24rem); overflow-y: auto; transform: translateZ(0); overscroll-behavior: contain; padding-right: .25rem; mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent); } /* the rating window (2026-09-27) */ .modal-dialog.scroll .rt-info { height: min(60vh, 28rem); overflow-y: auto; transform: translateZ(0); overscroll-behavior: contain; margin: 0 -.375rem; padding: 0 .375rem; } .rt-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .125rem 0 .75rem; padding: .75rem .875rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(255, 170, 60, .18), rgba(120, 80, 255, .16)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); } .rt-num { display: flex; align-items: center; gap: .375rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; } .rt-num .flame { width: 1.75rem; height: 1.75rem; filter: drop-shadow(0 0 .3rem rgba(255, 150, 40, .55)); } .rt-place { font-size: .9375rem; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; } .rt-sec { margin-top: .5rem; } .rt-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin: .5rem .25rem .25rem; } .rt-row { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: .75rem; background: var(--color-background-secondary); margin-bottom: .3125rem; } .rt-row.off { opacity: .55; } .rt-ic { width: 1.75rem; height: 1.75rem; border-radius: .5rem; display: grid; place-items: center; font-size: 1rem; background: var(--color-background); flex: none; } .rt-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .0625rem; } .rt-tx b { font-size: .9375rem; font-weight: 600; } .rt-tx span { font-size: .75rem; color: var(--color-text-secondary); } .rt-pts { flex: none; font-size: .9375rem; font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; } .rt-note { margin: .75rem .25rem 0; font-size: .8125rem; line-height: 1.35; color: var(--color-text-secondary); } .modal-dialog .rt-info + .mbtns { margin-top: .75rem; } /* the rating window, v2 (2026-09-27) */ .rt-place { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .rt-place b { font-size: 1.0625rem; font-weight: 700; color: var(--color-text); } .rt-place span { font-size: .75rem; font-weight: 500; } .rt-title { display: flex; flex-direction: column; gap: .0625rem; text-transform: none; letter-spacing: 0; margin: .625rem .25rem .375rem; } .rt-title b { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); } .rt-title span { font-size: .75rem; color: var(--color-text-secondary); opacity: .85; } .rt-row { align-items: flex-start; padding: .5625rem .625rem; } .rt-ic { width: 2rem; height: 2rem; border-radius: .625rem; font-size: 1.0625rem; margin-top: .0625rem; color: #fff; } .rt-ic.t1 { background: linear-gradient(135deg, #ff7eb3, #c2337a); } .rt-ic.t2 { background: linear-gradient(135deg, #f5a623, #e2720a); } .rt-ic.t3 { background: linear-gradient(135deg, #4fa3ff, #2d5fd4); } .rt-ic.t4 { background: linear-gradient(135deg, #34c759, #1f8f3f); } .rt-ic.t5 { background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .rt-ic.t6 { background: linear-gradient(135deg, #5c6b7a, #2f3a45); } .rt-ic.t0 { background: rgba(120, 120, 128, .35); } .rt-tx .rule { font-size: .75rem; color: var(--color-text-secondary); line-height: 1.3; } .rt-tx .sum { font-size: .75rem; color: var(--color-text); opacity: .8; font-variant-numeric: tabular-nums; } .rt-pts { margin-top: .125rem; padding: .125rem .5rem; border-radius: .75rem; background: var(--color-primary-tint); font-size: .875rem; } .rt-row.off .rt-pts { background: rgba(120, 120, 128, .18); color: var(--color-text-secondary); } .rt-tips { margin: .75rem 0 0; padding: .625rem .75rem; border-radius: .75rem; background: var(--color-primary-tint); font-size: .8125rem; line-height: 1.45; } .rt-tips b { display: block; margin-bottom: .125rem; color: var(--color-primary); } /* the panel — my head and the capsule — sticks to the top of the pane on all three panes (2026-09-27) and the head folds as the list scrolls, the way a stranger's wall does */ .wask > .ask-panel { position: sticky; top: 0; z-index: 4; pointer-events: none; } .wask > .ask-panel > * { pointer-events: auto; } .wask > .ask-panel .ask-top { transition: transform .32s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .wask > .ask-panel .ask-tabs { transition: transform .32s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .wask > .ask-panel.folded .ask-tabs { transform: translateY(calc(-1 * var(--fold, 0px))); } /* «Більше» under the line fades with the line when the head folds (2026-09-27) */ .ask-top .line-more { transition: opacity .2s ease; } .ask-top.folded .line-more { opacity: 0; pointer-events: none; } .wask > .ask-panel { transition: margin-bottom .32s cubic-bezier(.32, .72, 0, 1); } /* the «Зроби свою стіну» card folds like the head (2026-09-27): up by --fold, its title back down, the rest fades */ .wask > .ask-panel .ask-mine.make { transition: transform .32s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .wask > .ask-panel .ask-mine.make > b { transition: transform .32s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .wask > .ask-panel .ask-mine.make.folded { transform: translateY(calc(-1 * var(--fold, 0px))); } .wask > .ask-panel .ask-mine.make.folded > b { transform: translateY(var(--fold, 0px)); } .wask > .ask-panel .ask-mine.make > span, .wask > .ask-panel .ask-mine.make > .btn, .wask > .ask-panel .ask-mine.make > .ask-whats { transition: opacity .2s ease; } .wask > .ask-panel .ask-mine.make.folded > span, .wask > .ask-panel .ask-mine.make.folded > .btn, .wask > .ask-panel .ask-mine.make.folded > .ask-whats { opacity: 0; pointer-events: none; } /* the small «Створити» in the folded strip of the make card (2026-09-27) */ .ask-mine.make .mk { position: absolute; right: .75rem; top: .6875rem; display: inline-flex; align-items: center; gap: .25rem; height: 1.875rem; padding: 0 .75rem 0 .5rem; border-radius: 1rem; background: #fff; color: #2a1c6e; font-size: .8125rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .32s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .ask-mine.make .mk svg { width: 1rem; height: 1rem; stroke-width: 2.4; } .ask-mine.make.folded .mk { opacity: 1; pointer-events: auto; transform: translateY(var(--fold, 0px)); } .ask-mine.make.folded > b { padding-right: 7rem; } /* the wall form (2026-09-27): a live head on top, then the groups */ .ask-setup { padding: .75rem .875rem 1rem; } .ask-setup .ask-preview { margin: 0 0 .25rem; } .ask-setup .ask-preview .ask-top { border-radius: 1rem; margin: 0; box-shadow: var(--shadow-island); pointer-events: none; } .ask-setup .ask-preview .ask-top .meta, .ask-setup .ask-preview .ask-top .ask-rate, .ask-setup .ask-preview .ask-top .line-more { display: none; } .ask-setup .ask-preview .ask-top .head { padding-right: 0; } .ask-setup .ask-hint.pv { margin: 0 .25rem .375rem; } .ask-setup .ask-preview, .ask-setup .ask-sec { transition: max-height .3s cubic-bezier(.32, .72, 0, 1), opacity .25s ease, margin .3s ease; max-height: 40rem; overflow: hidden; } .ask-setup.kb .ask-preview, .ask-setup.kb .ask-sec.pics { max-height: 0; opacity: 0; margin: 0; } .ask-setup .ask-sec { margin-top: .875rem; } .ask-setup .ask-sec-h { display: flex; flex-direction: column; gap: .0625rem; margin: 0 .25rem .375rem; } .ask-setup .ask-sec-h b { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); } .ask-setup .ask-sec-h span { font-size: .75rem; color: var(--color-text-secondary); opacity: .85; } .ask-setup .ask-hint:not(.pv) { display: none; } .ask-setup .ask-tag { display: block !important; margin: .375rem .25rem 0; } .ask-setup .photo-grid { gap: .5rem; } .ask-setup .photo-slot { border-radius: 1rem; border-width: 1.5px; background: var(--color-background-secondary); } .ask-setup .photo-slot .cover { position: absolute; left: .375rem; bottom: .375rem; padding: .125rem .5rem; border-radius: .75rem; background: rgba(0, 0, 0, .5); color: #fff; font-size: .625rem; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ask-setup .ask-fields { border-radius: .875rem; background: var(--color-background-secondary); overflow: hidden; } .ask-setup .ask-fields .form-field { margin: 0; border-radius: 0; background: transparent; padding: .75rem .875rem; } .ask-setup .ask-fields .form-field + .limit-cnt { padding: 0 .875rem; } .ask-setup .ask-fields .form-field + .limit-cnt + .form-field, .ask-setup .ask-fields .form-field + .form-field { box-shadow: inset 0 .5px 0 var(--color-dividers); } .ask-setup .row-item.setting { margin-top: 0; border-radius: .875rem; background: var(--color-background-secondary); padding: .625rem .875rem; } .ask-setup .row-item.setting::after { display: none; } .ask-setup .btn { margin-top: 1rem; height: 3rem; border-radius: 1.5rem; font-size: 1rem; } .ask-setup .ask-fields textarea.form-field { border-top: .5px solid var(--color-dividers); min-height: 4.5rem; } .ask-setup .ask-fields input.form-field { font-weight: 600; } /* a conversation that is gone dissolves before its screen slides away (2026-09-27) */ .chat-layer .msgs.dissolve, .chat-layer .composer-wrap.dissolve { transition: opacity .24s ease, transform .24s ease; opacity: 0; transform: scale(.96); pointer-events: none; } /* «Реклама» in the admin panel (2026-09-27): one compact card a broadcast, the details behind a tap */ .card.ad { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .875rem; cursor: pointer; position: relative; overflow: hidden; } .ad-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; } .ad-head b { font-size: 1rem; font-weight: 700; } .ad-head span { font-size: .75rem; color: var(--color-text-secondary); white-space: nowrap; } .card.ad.running .ad-head span { color: var(--color-primary); font-weight: 600; } .ad-bar { height: .3125rem; border-radius: .25rem; background: var(--color-background-secondary); overflow: hidden; } .ad-bar i { display: block; height: 100%; border-radius: .25rem; background: var(--color-primary); transition: width .5s ease; } .card.ad.running .ad-bar i { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%); background-size: 200% 100%; animation: ad-shine 1.4s linear infinite; } @keyframes ad-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } } .ad-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .ad-nums div { display: flex; flex-direction: column; min-width: 0; } .ad-nums b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; } .ad-nums span { font-size: .6875rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ad-whyline { font-size: .75rem; line-height: 1.3; color: var(--color-text-secondary); } .ad-whyline b { font-weight: 600; color: var(--color-text); } .modal-dialog.scroll .ad-more { height: min(60vh, 28rem); overflow-y: auto; transform: translateZ(0); overscroll-behavior: contain; margin: 0 -.375rem; padding: 0 .375rem; } .ad-sec { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin: .75rem .125rem .25rem; } .ad-sec:first-child { margin-top: 0; } .ad-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .375rem .5rem; border-radius: .5rem; background: var(--color-background-secondary); margin-bottom: .25rem; font-size: .875rem; } .ad-row span { color: var(--color-text-secondary); } .ad-row b { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .ad-text { font-size: .8125rem; line-height: 1.35; color: var(--color-text-secondary); white-space: pre-line; border-left: 2px solid var(--color-borders); padding-left: .625rem; margin: .25rem .125rem 0; } /* the start screen (2026-09-27): the logo, the name, the bar that fills as the app comes up */ #splash { position: fixed; inset: 0; z-index: 1400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .875rem; background: var(--color-background); color: var(--color-text); transition: opacity .35s ease; } #splash.out { opacity: 0; pointer-events: none; } #splash img { width: 5.5rem; height: 5.5rem; border-radius: 1.5rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18); } #splash b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; } #splash .track { width: min(60vw, 14rem); height: .375rem; border-radius: .25rem; background: var(--color-background-secondary); overflow: hidden; margin-top: .375rem; } #splash .track i { display: block; height: 100%; width: 0; border-radius: .25rem; background: var(--color-primary); transition: width .45s ease; } #splash span { font-size: .8125rem; color: var(--color-text-secondary); } /* the admin panel's long lists in pages of 20 (2026-09-27) */ .paged-off { display: none !important; } .pager { display: block; margin: .25rem .75rem .875rem; padding: .5rem; color: var(--color-text-secondary); font-size: .75rem; text-align: center; } /* the sentinel: the next page comes when it scrolls into view */ /* rows the phone has not scrolled to are neither laid out nor painted (Safari 18, Chrome): the admin lists only */ .layer[data-screen="admin"] .rows > .row-item { content-visibility: auto; contain-intrinsic-size: auto 5rem; } /* not the queue cards: their guessed height made the list jump to the top on every redraw (2026-09-28) */ /* the «turn on notifications» bar (2026-09-27): stuck to the header's underside, full width, and it GLOWS — a blurred halo behind it breathing by opacity, a light sweeping across by transform; nothing repaints, only composites */ .reach-bar { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: #fff; text-align: left; flex: none; z-index: 4; } /* a field in focus, a keyboard up: the bar folds away and comes back when the typing ends (2026-09-27) */ .reach-bar { max-height: 6rem; transition: max-height .25s ease, opacity .2s ease; } body.field-focus .reach-bar, body.keyboard-visible .reach-bar { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; } .reach-bar[hidden] { display: none; } .reach-bar .rb-glow { position: absolute; left: 0; right: 0; top: .125rem; bottom: -.5rem; border-radius: 0; background: radial-gradient(ellipse at 50% 60%, rgba(122, 140, 255, .95), rgba(64, 120, 255, .55) 60%, transparent 100%); filter: blur(10px); opacity: .55; animation: reach-breathe 2s ease-in-out infinite; pointer-events: none; } .reach-bar .rb-body { position: relative; display: flex; align-items: center; gap: .625rem; padding: .625rem .875rem; border-radius: 0; background: linear-gradient(120deg, #2f7fff, #6b4dff 55%, #2f7fff); background-size: 100% 100%; overflow: hidden; font-size: .8125rem; font-weight: 600; box-shadow: 0 .5rem 1.25rem rgba(70, 110, 255, .45); } .reach-bar .rb-body::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg) translateX(-100%); animation: reach-sweep 2.6s ease-in-out infinite; pointer-events: none; } @keyframes reach-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes reach-sweep { 0% { transform: skewX(-18deg) translateX(-120%); } 60%, 100% { transform: skewX(-18deg) translateX(420%); } } .reach-bar .ic { flex: none; font-size: 1.125rem; } .reach-bar .tx { flex: 1; min-width: 0; line-height: 1.25; } .reach-bar .go { flex: none; height: 1.875rem; display: inline-flex; align-items: center; padding: 0 .75rem; border-radius: 1rem; background: #fff; color: #3b5bdb; font-weight: 700; font-size: .75rem; position: relative; z-index: 1; box-shadow: 0 0 .75rem rgba(255, 255, 255, .6); } @media (prefers-reduced-motion: reduce) { .reach-bar .rb-glow, .reach-bar .rb-body::after { animation: none; } } /* my place in the top (2026-09-27): the chip on my card, the window behind it */ .ask-place { display: inline-flex; align-items: center; gap: .3rem; margin: .5rem 0 0 .375rem; height: 1.5rem; padding: 0 .625rem 0 .5rem; border-radius: .75rem; background: linear-gradient(135deg, rgba(123, 77, 255, .85), rgba(51, 144, 236, .85)); color: #fff; font-size: .75rem; line-height: 1; box-shadow: 0 .125rem .5rem rgba(60, 80, 220, .35); } .ask-place b { font-weight: 800; font-size: .8125rem; font-variant-numeric: tabular-nums; } .ask-place.top { background: linear-gradient(135deg, #ffd166, #ff8c42); color: #3a2400; box-shadow: 0 .125rem .625rem rgba(255, 160, 60, .5); } .ask-top .meta { display: flex; align-items: center; flex-wrap: wrap; } .pl-info { display: flex; flex-direction: column; gap: .625rem; } .pl-head { display: flex; flex-direction: column; align-items: center; padding: 1rem .75rem .875rem; border-radius: 1rem; background: linear-gradient(135deg, #6b4dff, #3390ec); color: #fff; } .pl-head.gold { background: linear-gradient(135deg, #ffd166, #ff8c42); color: #3a2400; } .pl-medal { font-size: 2.25rem; line-height: 1; } .pl-rank { font-size: 2.5rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin-top: .25rem; } .pl-sub { font-size: .875rem; font-weight: 600; opacity: .9; } .pl-pts { display: flex; align-items: center; justify-content: center; gap: .375rem; font-size: .9375rem; color: var(--color-text-secondary); } .pl-pts .flame { width: 1.25rem; height: 1.25rem; } .pl-pts b { font-size: 1.125rem; font-weight: 800; color: var(--color-text); } .pl-text { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--color-text); } /* ===== the admin panel, reworked (2026-09-28): compact, plain, no icons ===== */ .adm-nav { display: flex; gap: .3125rem; padding: .125rem .75rem .375rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .adm-nav::-webkit-scrollbar { display: none; } .adm-nav .chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: .3125rem; height: 1.875rem; padding: 0 .625rem; border-radius: .5rem; background: var(--color-background); color: var(--color-text); font-size: .75rem; font-weight: 600; letter-spacing: .01em; } .adm-nav .chip.on { background: var(--color-primary); color: #fff; } .adm-nav .chip i { font-style: normal; min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: .5rem; background: var(--color-error, #ff3b30); color: #fff; font-size: .625rem; font-weight: 700; display: inline-grid; place-items: center; } .adm-nav .chip i[hidden] { display: none; } .adm-nav .chip.on i { background: #fff; color: var(--color-primary); } .adm-sub { display: flex; gap: .25rem; padding: 0 .75rem .375rem; overflow-x: auto; scrollbar-width: none; } .adm-sub::-webkit-scrollbar { display: none; } .adm-sub .sub { flex: none; display: inline-flex; align-items: center; gap: .25rem; height: 1.625rem; padding: 0 .5625rem; border-radius: .4375rem; background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: .75rem; font-weight: 600; } .adm-sub .sub.on { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } .adm-sub .sub i { font-style: normal; min-width: .9375rem; height: .9375rem; padding: 0 .25rem; border-radius: .5rem; background: var(--color-primary); color: #fff; font-size: .5625rem; font-weight: 700; display: inline-grid; place-items: center; } .adm-sub .sub i[hidden] { display: none; } .adm-desc { margin: 0 .75rem .5rem; padding: .375rem .625rem; border-radius: .5rem; background: var(--color-background); font-size: .75rem; line-height: 1.35; color: var(--color-text-secondary); border-left: .125rem solid var(--color-primary); } .adm-desc[hidden] { display: none; } /* the dashboard: small tiles, a word on each behind a tap */ .statbox { background: var(--color-background); margin: .375rem .75rem .5rem; border-radius: .75rem; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; padding: .4375rem .4375rem; text-align: center; } .stat-panel { display: none; } .stat-panel.open { display: grid; } .stats > .tile { display: flex; flex-direction: column; align-items: center; gap: .0625rem; min-width: 0; padding: .375rem .1875rem .3125rem; border-radius: .5rem; background: var(--color-background-secondary); color: var(--color-text); } .stats > .tile:active { transform: scale(.97); } .stats > .tile b { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; } .stats > .tile b.odo { display: flex; justify-content: center; align-items: center; height: 1.2em; } .stats > .tile b .odo-col { display: block; min-width: .6em; height: 1em; line-height: 1; overflow: hidden; text-align: center; } .stats > .tile b .odo-strip { display: block; } .stats > .tile b .odo-d { display: block; height: 1em; line-height: 1; } .stats > .tile .lbl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .5625rem; line-height: 1.15; color: var(--color-text-secondary); padding: 0 .0625rem; } .stat-head { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4375rem .75rem; border: 0; border-top: 1px solid var(--color-borders); background: none; color: var(--color-text); font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-align: left; } .stat-head .peek { flex: 1; min-width: 0; font-size: .6875rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-head.open .peek { visibility: hidden; } .stat-head .chev { width: .875rem; height: .875rem; } /* the cards */ .layer[data-screen="admin"] .acard { border-radius: .75rem; padding: .625rem .75rem; margin: 0 .75rem .5rem; } .layer[data-screen="admin"] .acard .head { font-size: .8125rem; font-weight: 700; } .layer[data-screen="admin"] .acard .actions { display: flex; flex-wrap: wrap; gap: .3125rem; margin-top: .5rem; } .layer[data-screen="admin"] .acard .actions .pill { height: 1.875rem; padding: 0 .625rem; font-size: .75rem; } .layer[data-screen="admin"] .rows.card { border-radius: .75rem; margin-bottom: .5rem; } .layer[data-screen="admin"] .group-title { padding: .25rem 1rem .3125rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; } .layer[data-screen="admin"] .ftabs { gap: .25rem; margin-bottom: .375rem; } .layer[data-screen="admin"] .ftabs button { height: 1.625rem; padding: 0 .5rem; font-size: .75rem; } .layer[data-screen="admin"] .form-field { font-size: .875rem !important; padding: .5rem .75rem !important; } /* reactions under the question bubble too (2026-09-28) */ .ask-it .qb .foot { display: flex; align-items: center; margin-top: .3125rem; } .ask-it .qb .foot[hidden] { display: none; } /* the queue's filter capsules: one scrolling row, small (2026-09-28) */ .layer[data-screen="admin"] .pills.caps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .25rem; padding: .25rem .75rem .375rem; } .layer[data-screen="admin"] .pills.caps::-webkit-scrollbar { display: none; } .layer[data-screen="admin"] .pills.caps .pill { flex: none; padding: .25rem .5rem; font-size: .75rem; font-weight: 600; border-radius: .4375rem; gap: .25rem; } .layer[data-screen="admin"] .pills.caps .pill .capn { font-size: .6875rem; opacity: .75; font-style: normal; } /* the queue card: a strict layout — id and tags, the author, the text, a row of plain buttons */ .layer[data-screen="admin"] .acard .head { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: var(--color-text-secondary); } .layer[data-screen="admin"] .acard .head > span:first-child { color: var(--color-text); } .layer[data-screen="admin"] .acard .head time { margin-left: auto; font-weight: 500; } .layer[data-screen="admin"] .acard .meta { font-size: .75rem; } .layer[data-screen="admin"] .acard .text { font-size: .9375rem; line-height: 1.4; margin-top: .4375rem; } .layer[data-screen="admin"] .acard img.ph { max-height: 12rem; width: auto; max-width: 100%; border-radius: .5rem; margin-top: .5rem; display: block; } .layer[data-screen="admin"] .acard .actions { border-top: 1px solid var(--color-borders); padding-top: .5rem; margin-top: .625rem; gap: .25rem; } .layer[data-screen="admin"] .acard .actions .pill { height: 1.875rem; padding: 0 .625rem; border-radius: .4375rem; font-size: .75rem; font-weight: 600; } .layer[data-screen="admin"] .acard.marked { box-shadow: inset .1875rem 0 0 var(--color-primary); } /* the desktop (2026-09-28): the numbers on the left, a board of section columns on the right, dragged into any order */ .adm-fs { padding: 0 .625rem; font-size: .75rem; font-weight: 600; height: 1.875rem; border-radius: .5rem; white-space: nowrap; } .adm-nav .chip.more { background: var(--color-background-secondary-accent, var(--color-background)); } .adm-nav .chip.more svg { width: .875rem; height: .875rem; transform: rotate(90deg); opacity: .7; } .adm-nav .chip.more.on { background: var(--color-primary); } @media (min-width: 56rem) { body.adm-wide #app { width: 100%; max-width: none; box-shadow: none; } body.adm-wide .layer[data-screen="admin"] > .hdr { padding-left: 1.25rem; padding-right: 8rem; } /* room for Telegram's own buttons in the top-right corner of a full-screen window */ body.adm-wide .layer[data-screen="admin"] > .hdr .hright { gap: .5rem; } body.adm-wide .layer[data-screen="admin"] > .scroll.board-host { display: flex; gap: .75rem; padding: .75rem 1rem 1rem; overflow: hidden; } .board-col { display: flex; flex-direction: column; min-height: 0; flex: none; width: 26rem; border-radius: 1rem; background: rgba(127, 127, 127, .06); border: 1px solid var(--color-borders); } .board-col.numbers { width: 24rem; } .board-col.dragging { opacity: .45; } .board { flex: 1; min-width: 0; display: flex; gap: .75rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .board > .board-col { height: 100%; } .col-head { flex: none; display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; font-size: .9375rem; font-weight: 700; cursor: grab; user-select: none; border-bottom: 1px solid var(--color-borders); } .col-head:active { cursor: grabbing; } .col-head .grip { color: var(--color-text-secondary); letter-spacing: -.125rem; font-size: 1rem; } .col-head .chip { pointer-events: none; height: auto; padding: 0; background: none !important; color: var(--color-text) !important; font-size: 1rem; font-weight: 700; gap: .875rem; } .col-head .chip i { margin-left: .5rem; font-style: normal; min-width: 1.375rem; height: 1.375rem; padding: 0 .4375rem; border-radius: .6875rem; background: var(--color-error, #ff3b30); color: #fff; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; } .col-head .chip i[hidden] { display: none; } .col-body { flex: 1; min-height: 0; overflow-y: auto; padding: .375rem 0 .75rem; } .col-body > .adm-sub { padding-top: .25rem; } .board-col.numbers .statbox { margin: .25rem .625rem .5rem; } .board-col.numbers .stats { grid-template-columns: repeat(4, 1fr); gap: .375rem; padding: .625rem; } .board-col.numbers .stats > .tile { padding: .625rem .25rem .5rem; } .board-col.numbers .stats > .tile b { font-size: 1.375rem; } .board-col.numbers .stats > .tile .lbl { font-size: .6875rem; } .board-col.numbers .stat-head { padding: .625rem .875rem; font-size: .8125rem; } .board-col .acard { margin: 0 .625rem .5rem; } .board-col .acard .text { font-size: .9375rem; } .board-col .rows.card { margin: 0 .625rem .5rem; } .board-col .pills.caps { flex-wrap: wrap; overflow: visible; padding: .25rem .625rem .375rem; } .board-col .form-field { width: calc(100% - 1.25rem) !important; margin: 0 .625rem .5rem !important; } .board-col > .col-body > .card { margin: 0 .625rem .5rem; } } /* a mouse cannot drag a hidden-scrollbar row sideways (2026-09-28, the user): with a fine pointer the capsule rows wrap instead */ @media (hover: hover) and (pointer: fine) { .adm-nav, .adm-sub, .layer[data-screen="admin"] .pills.caps { flex-wrap: wrap; overflow: visible; } } /* a queued card is dragged by its grip (2026-09-28) */ .layer[data-screen="admin"] .acard:has(> .head > .grip) { padding-left: 2.75rem; position: relative; } .layer[data-screen="admin"] .acard .head .grip { position: absolute; left: 0; top: 0; bottom: 0; width: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: .75rem 0 0 .75rem; background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: 1.125rem; letter-spacing: -.125rem; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; } .layer[data-screen="admin"] .acard .head .grip:active { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } .layer[data-screen="admin"] .acard.dragging { opacity: .55; outline: 2px solid var(--color-primary); outline-offset: -2px; } /* the welcome (2026-09-28): the wall is there, here is the nick */ .wl-box { display: flex; flex-direction: column; gap: .75rem; } .wl-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 1.25rem 1rem 1.125rem; border-radius: 1.25rem; background: linear-gradient(135deg, #6b4dff, #3390ec); color: #fff; box-shadow: 0 .5rem 1.5rem rgba(80, 90, 240, .3); } .wl-face { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.875rem; background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .35); } .wl-hero b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .wl-hero span { font-size: .875rem; line-height: 1.45; opacity: .92; } .wl-card { border-radius: 1rem; background: var(--color-background-secondary); padding: .75rem .875rem .875rem; display: flex; flex-direction: column; gap: .625rem; } .wl-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-secondary); } .wl-row { display: flex; gap: .5rem; align-items: stretch; } .wl-row input { flex: 1; min-width: 0; margin: 0 !important; padding: .8125rem .9375rem; border: 1.5px solid transparent; border-radius: .875rem; background: var(--color-background); color: var(--color-text); font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; outline: 0; transition: border-color .15s ease; } .wl-row input:focus { border-color: var(--color-primary); } .wl-roll { flex: none; display: inline-flex; align-items: center; gap: .3125rem; padding: 0 .875rem; border-radius: .875rem; background: var(--color-background); color: var(--color-text); font-size: .875rem; font-weight: 600; } .wl-roll span:first-child { font-size: 1.125rem; } .wl-preview { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: .75rem; background: var(--color-background); } .wl-pa { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .875rem; color: #fff; background: linear-gradient(135deg, #6b4dff, #3390ec); flex: none; } .wl-pt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .wl-pt b { font-size: .9375rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-pt span { font-size: .75rem; color: var(--color-text-secondary); } .wl-hint { font-size: .8125rem; line-height: 1.4; color: var(--color-text-secondary); padding: 0 .125rem; } /* the rating window, v3 (2026-09-28): a gradient head, cards with room, a hint that it scrolls */ .rt-head { background: linear-gradient(135deg, #6b4dff, #3390ec); color: #fff; padding: .875rem 1rem; border-radius: 1rem; margin: .125rem 0 .875rem; } .rt-num b, .rt-place b, .rt-place span { color: #fff; } .rt-place span { opacity: .85; } .rt-num .flame { filter: drop-shadow(0 0 .3rem rgba(255, 220, 120, .7)); } .rt-title b { font-size: .8125rem; letter-spacing: .05em; } .rt-row { padding: .625rem .75rem; border-radius: .875rem; margin-bottom: .375rem; } .rt-tx b { font-size: .9375rem; } .rt-tx .rule { font-size: .8125rem; line-height: 1.35; } .rt-tips { margin: .875rem .125rem 0; padding: .75rem .875rem; border-radius: .875rem; background: var(--color-primary-tint, rgba(51, 144, 236, .12)); font-size: .875rem; line-height: 1.45; } .rt-tips b { display: block; margin-bottom: .25rem; color: var(--color-primary); } .rt-more { position: sticky; bottom: 0; margin: .5rem -.375rem 0; padding: .5rem 0 .25rem; text-align: center; font-size: .75rem; font-weight: 600; color: var(--color-primary); background: linear-gradient(to top, var(--color-background) 55%, transparent); transition: opacity .25s ease; animation: rt-bounce 1.6s ease-in-out infinite; } .rt-more.gone { opacity: 0; pointer-events: none; animation: none; } @keyframes rt-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.1875rem); } } /* the wall form, brighter (2026-09-28, the user: «поярче, а то говно») */ .ask-setup { padding: .5rem .5rem 1rem !important; background: transparent !important; box-shadow: none !important; } .ask-setup .ask-preview { margin: 0 0 .75rem; } .ask-setup .ask-hint.pv { margin: .25rem .375rem .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .ask-setup .ask-sec { margin: 0 0 .625rem; padding: .875rem .875rem 1rem; border-radius: 1rem; background: var(--color-background); box-shadow: var(--shadow-island, 0 .0625rem .25rem rgba(0, 0, 0, .06)); } .ask-setup .ask-sec-h { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; } .ask-setup .ask-sec-h b { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; } .ask-setup .ask-sec-h span { font-size: .75rem; color: var(--color-text-secondary); } .ask-setup .form-field { margin: .5rem 0 0 !important; padding: .8125rem .9375rem !important; border-radius: .875rem !important; background: var(--color-background-secondary) !important; border: 1.5px solid transparent !important; font-size: 1.0625rem !important; font-weight: 600; transition: border-color .15s ease; } .ask-setup .form-field:focus { border-color: var(--color-primary) !important; } .ask-setup textarea.form-field { font-weight: 500; } .ask-setup .ask-tag { margin: .625rem .125rem 0; padding: .5rem .625rem; border-radius: .625rem; background: var(--color-primary-tint, rgba(51, 144, 236, .12)); color: var(--color-primary); font-size: .8125rem; } .ask-setup .photo-grid { gap: .5rem; } .ask-setup .photo-slot { border-radius: .875rem; background: var(--color-background-secondary); } .ask-setup .photo-slot .plus { width: 1.75rem; height: 1.75rem; color: var(--color-primary); } .ask-setup .ask-tones { display: flex; gap: .5rem; flex-wrap: wrap; padding: .125rem 0 0; } .ask-setup .ask-tones .tone { width: 2.75rem; height: 2.75rem; border-radius: .875rem; box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .18); transition: transform .15s ease; } .ask-setup .ask-tones .tone.on { transform: scale(1.08); box-shadow: 0 0 0 .1875rem var(--color-background), 0 0 0 .3125rem var(--color-primary); } .ask-setup .row-item.setting { margin: 0; padding: .25rem 0; background: transparent; } .ask-setup .row-item.setting b { font-size: .9375rem; } .ask-setup .btn { margin: .25rem 0 0; height: 3.125rem; border-radius: 1rem; font-size: 1.0625rem; font-weight: 800; background: linear-gradient(135deg, #6b4dff, #3390ec); color: #fff; box-shadow: 0 .5rem 1.25rem rgba(80, 90, 240, .35); } .ask-setup > .note { margin: .75rem .5rem 0; text-align: center; font-size: .8125rem; } .ask-setup .ask-keep { margin-top: .5rem; color: var(--color-text-secondary); } /* the welcome under a keyboard (2026-09-28): the hero folds, the dialog never taller than the box; the field looks like a field */ #app > .modal-root { padding: .75rem; box-sizing: border-box; } #app > .modal-root .modal-dialog { max-height: 100%; overflow-y: auto; } .wl-hero { transition: max-height .25s ease, opacity .2s ease, margin .25s ease, padding .25s ease; max-height: 20rem; overflow: hidden; } .wl-box.kb .wl-hero { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin: 0; } .wl-box.kb .wl-hint { display: none; } .wl-label { display: flex; justify-content: space-between; align-items: baseline; } .wl-label i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-primary); } .wl-inp { position: relative; flex: 1; min-width: 0; } .wl-inp input { width: 100%; padding-right: 2.75rem !important; border: 1.5px solid var(--color-borders) !important; background: var(--color-background) !important; box-shadow: inset 0 0 0 1px transparent; } .wl-inp input:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 .1875rem var(--color-primary-tint, rgba(51, 144, 236, .18)); } .wl-inp .pen { position: absolute; right: .875rem; top: 50%; width: 1.125rem; height: 1.125rem; transform: translateY(-50%); color: var(--color-primary); pointer-events: none; } /* the nick field, bigger, no dice (2026-09-28) */ .wl-inp input { font-size: 1.375rem !important; padding: 1rem 2.875rem 1rem 1.125rem !important; border-radius: 1rem !important; } .wl-inp .pen { width: 1.375rem; height: 1.375rem; right: 1rem; } /* the head colour as one compact row under the words (2026-09-28) */ .ask-setup .ask-tone-row { display: flex; align-items: center; gap: .625rem; margin-top: .75rem; } .ask-setup .ask-tone-lbl { flex: none; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); } .ask-setup .ask-tone-row .ask-tones { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .375rem; padding: .1875rem .1875rem; } .ask-setup .ask-tone-row .ask-tones::-webkit-scrollbar { display: none; } .ask-setup .ask-tone-row .ask-tones .tone { flex: none; width: 1.875rem; height: 1.875rem; border-radius: .5625rem; box-shadow: 0 .0625rem .25rem rgba(0, 0, 0, .18); } .ask-setup .ask-tone-row .ask-tones .tone.on { transform: scale(1.1); box-shadow: 0 0 0 .125rem var(--color-background), 0 0 0 .25rem var(--color-primary); } /* the head colours in one even row under the preview; the words as a Telegram-like group (2026-09-28) */ .ask-setup .ask-tone-bar { margin: -.25rem 0 .75rem; padding: 0 .125rem; } .ask-setup .ask-tone-bar .ask-tones { display: flex; justify-content: space-between; align-items: center; gap: .25rem; padding: .25rem 0; overflow: visible; } .ask-setup .ask-tone-bar .ask-tones .tone { flex: 1 1 0; max-width: 2.375rem; aspect-ratio: 1; width: auto; height: auto; border-radius: .625rem; box-shadow: 0 .0625rem .25rem rgba(0, 0, 0, .2); } .ask-setup .ask-tone-bar .ask-tones { padding: .5rem 0 .25rem; } .ask-setup .ask-tone-bar .ask-tones .tone { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease; position: relative; } .ask-setup .ask-tone-bar .ask-tones .tone.on { transform: translateY(-.3125rem) scale(1.22); z-index: 1; box-shadow: 0 0 0 .125rem var(--color-background), 0 0 0 .25rem var(--color-primary), 0 .375rem 1rem rgba(51, 144, 236, .55); } .ask-setup .ask-sec { padding: .625rem .75rem .75rem; } .ask-setup .ask-sec-h { margin: 0 .125rem .375rem; } .ask-setup .ask-sec-h b { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); } .ask-setup .ask-fields { border-radius: .75rem; background: var(--color-background-secondary); overflow: hidden; } .ask-setup .ask-fields .form-field { margin: 0 !important; padding: .6875rem .875rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-size: 1rem !important; font-weight: 500; box-shadow: none !important; } .ask-setup .ask-fields .form-field + .form-field { border-top: 1px solid var(--color-borders) !important; } .ask-setup .ask-fields input.form-field { font-weight: 700; } .ask-setup textarea.form-field { min-height: 3.5rem; } .ask-setup .ask-tag { margin: .5rem .125rem 0; padding: 0; background: none; color: var(--color-text-secondary); font-size: .75rem; } /* compact visibility with a «?», the save bar pinned to the bottom (2026-09-28) */ .ask-setup .row-item.setting .label { display: flex; align-items: center; gap: .5rem; } .ask-why { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; color: var(--color-primary); flex: none; } /* not «.ask-q»: that is the search box on the walls tab */ .ask-why svg { width: 1.25rem; height: 1.25rem; } .ask-setup .ask-sec.pics .ask-sec-h span, .ask-setup .ask-sec-h span { font-size: .6875rem; } .ask-save { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .875rem calc(.625rem + var(--safe-bottom, 0px)); background: var(--color-background-secondary); box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .12); z-index: 5; } .ask-save .btn { margin: 0; } .scroll.with-save { padding-bottom: 5.5rem !important; } body.keyboard-visible .ask-save, body.field-focus .ask-save { display: none; } /* under a keyboard the bar would only steal the room */ .ask-setup .ask-keep { margin: .5rem .5rem 0; text-align: center; font-size: .75rem; } /* comments under a wall record (2026-09-29) */ .ask-cm { margin: .125rem .75rem .75rem 3.25rem; } .ask-cm-head { display: inline-flex; align-items: center; gap: .375rem; height: 1.625rem; padding: 0 .625rem 0 .5rem; border-radius: .8125rem; background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: .75rem; font-weight: 600; } .ask-cm-head svg { width: .875rem; height: .875rem; } .ask-cm-head.on { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } .ask-cm-body { margin-top: .5rem; display: flex; flex-direction: column; gap: .5rem; } .ask-cm-row { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .625rem; border-radius: .75rem; background: var(--color-background); position: relative; } .ask-cm-row .avatar.small { width: 1.75rem; height: 1.75rem; font-size: .6875rem; flex: none; } .ask-cm-row .tx { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1; } .ask-cm-row .tx b { font-size: .8125rem; font-weight: 700; } .ask-cm-row .tx b.tap, .ask-cm-row .avatar.tap { cursor: pointer; } .ask-cm-row .tx b.tap { color: var(--color-primary); } .ask-cm-row .tx .t { font-size: .875rem; line-height: 1.35; word-break: break-word; } .ask-cm-row .tx time { font-size: .6875rem; color: var(--color-text-secondary); } .ask-cm-row .x { position: absolute; right: .375rem; top: .375rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-secondary); background: var(--color-background-secondary); } .ask-cm-row .x svg { width: .75rem; height: .75rem; } .ask-cm-form { display: flex; gap: .375rem; align-items: center; } .ask-cm-form input { flex: 1; min-width: 0; height: 2.375rem; padding: 0 .875rem; border: 1.5px solid var(--color-borders); border-radius: 1.1875rem; background: var(--color-background); color: var(--color-text); font-size: .9375rem; outline: 0; } .ask-cm-form input:focus { border-color: var(--color-primary); } .ask-cm-send { flex: none; width: 2.375rem; height: 2.375rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: #fff; } .ask-cm-send svg { width: 1.125rem; height: 1.125rem; } .ask-cm-need { align-self: flex-start; padding: .5rem .75rem; border-radius: .75rem; background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); font-size: .8125rem; font-weight: 600; } /* the record as one block (2026-09-28, the user: «хтось спитав — в один блок»): the question strip on top, the answer on the gradient under it, the comments in the foot — one rounded card instead of two chat bubbles */ .ask-it { margin: 0 .75rem .75rem; border-radius: 1.125rem; overflow: hidden; background: var(--color-background); box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08); } .ask-it .qrow { align-items: flex-start; gap: .5rem; padding: .625rem .75rem .5rem; } .ask-it .qrow .avatar { margin-top: .0625rem; } .ask-it .qb { flex: 1; min-width: 0; max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; } .ask-it .qb b { margin-bottom: .125rem; } .ask-it .qb .foot { margin-top: .25rem; } .ask-it .qb .foot:has(.reacts:empty) { display: none; } .ask-it .qb .rc { background: var(--color-background-secondary); color: var(--color-text); } .ask-it .qb .rc.own { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } .ask-it .arow { flex-direction: row-reverse; justify-content: flex-start; align-items: flex-start; gap: .5rem; margin: 0; padding: .625rem .75rem .5625rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .ask-it .arow .avatar { margin-top: .0625rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); } .ask-it .ab { flex: 1; min-width: 0; max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; } .ask-it .ab b { color: rgba(255, 255, 255, .85); opacity: 1; margin-bottom: .125rem; } .ask-it .ab .foot { margin-top: .3125rem; } .ask-it .ask-cm { margin: 0; padding: .5rem .75rem .625rem; background: var(--color-background); } .ask-it .ask-cm-row { background: var(--color-background-secondary); } .ask-it .ask-cm-form input { background: var(--color-background-secondary); border-color: transparent; } .ask-it .ask-cm-form input:focus { border-color: var(--color-primary); } /* the card is one purple surface (2026-09-29, the user: «комментарии не тёмным, а под цвет сообщения»): the question strip on top keeps the page's colour, the answer and the comments share the gradient */ .ask-it { background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .ask-it .qrow { background: var(--color-background); } .ask-it .arow { background: none; } .ask-it .ask-cm { background: none; padding: .375rem .75rem .625rem; border-top: 1px solid rgba(255, 255, 255, .14); } .ask-it .ask-cm-head { background: rgba(255, 255, 255, .18); color: #fff; } .ask-it .ask-cm-head.on { background: #fff; color: #5a3fd6; } .ask-it .ask-cm-row { background: rgba(255, 255, 255, .14); color: #fff; padding: .5rem .625rem .375rem; -webkit-user-select: none; user-select: none; } .ask-it .ask-cm-row .who { display: inline-flex; align-items: center; gap: .375rem; padding: 0; margin: 0 0 .125rem; background: none; color: #fff; font: inherit; text-align: left; align-self: flex-start; } .ask-it .ask-cm-row .who b { font-size: .8125rem; font-weight: 700; } .ask-it .ask-cm-row .who.tap b { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: .125rem; } .ask-it .ask-cm-row .re { display: flex; flex-direction: column; margin: 0 0 .25rem; padding: .125rem .5rem; border-left: 2px solid rgba(255, 255, 255, .7); font-size: .75rem; line-height: 1.3; opacity: .9; } .ask-it .ask-cm-row .re b { font-weight: 700; } .ask-it .ask-cm-row .re span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-it .ask-cm-row .tx .t { color: #fff; } .ask-it .ask-cm-row .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .25rem; min-height: .875rem; } .ask-it .ask-cm-row .foot .reacts { display: flex; flex-wrap: wrap; gap: .25rem; } .ask-it .ask-cm-row .foot .reacts:empty { display: none; } .ask-it .ask-cm-row .foot .rc { height: 1.375rem; padding: 0 .4375rem 0 .3125rem; font-size: .6875rem; } .ask-it .ask-cm-row .foot .rc .e { font-size: .8125rem; } .ask-it .ask-cm-row time { color: rgba(255, 255, 255, .7); } .ask-it .ask-cm-reply { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .625rem; border-radius: .625rem; background: rgba(255, 255, 255, .14); color: #fff; font-size: .75rem; } .ask-it .ask-cm-reply > svg { width: .875rem; height: .875rem; flex: none; opacity: .8; } .ask-it .ask-cm-reply .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ask-it .ask-cm-reply .tx b { font-weight: 700; } .ask-it .ask-cm-reply .tx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; } .ask-it .ask-cm-reply .x { flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); color: #fff; } .ask-it .ask-cm-reply .x svg { width: .75rem; height: .75rem; } .ask-it .ask-cm-form input { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; } .ask-it .ask-cm-form input::placeholder { color: rgba(255, 255, 255, .65); } .ask-it .ask-cm-form input:focus { border-color: rgba(255, 255, 255, .6); } .ask-it .ask-cm-send { background: #fff; color: #5a3fd6; } .ask-it .ask-cm-need { background: rgba(255, 255, 255, .18); color: #fff; } /* the blocked list in the form */ .ask-blocks { display: flex; flex-direction: column; gap: .375rem; } .ask-blocks .row { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: .75rem; background: var(--color-background-secondary); } .ask-blocks .row .avatar.small { width: 2rem; height: 2rem; font-size: .75rem; flex: none; } .ask-blocks .row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; } .ask-blocks .row .un { flex: none; height: 1.875rem; padding: 0 .75rem; border-radius: .9375rem; background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); font-size: .8125rem; font-weight: 600; } /* the time beside the name (2026-09-29, the user: «время справа, напротив, а не под строкой»); pages of comments; the lit one */ .ask-it .hd { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .125rem; } .ask-it .hd b { margin-bottom: 0; } .ask-it .hd time { margin-left: auto; align-self: baseline; } .ask-it .ab .foot:has(.reacts:empty) { display: none; } .ask-it .ask-cm-row .hd { align-items: center; margin-bottom: .1875rem; } .ask-it .ask-cm-row .who { margin: 0; } .ask-it .ask-cm-row .foot:has(.reacts:empty) { display: none; } .ask-it .ask-cm-row .re { width: 100%; text-align: left; font: inherit; font-size: .75rem; color: inherit; background: rgba(255, 255, 255, .1); border-radius: .375rem; position: relative; overflow: hidden; } .ask-it .ask-cm-row.lit { animation: cm-lit 1.8s ease-out; } @keyframes cm-lit { 0%, 35% { background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 2px #fff; } 100% { background: rgba(255, 255, 255, .14); box-shadow: none; } } .ask-it .ask-cm-more { align-self: center; height: 1.875rem; padding: 0 .875rem; border-radius: .9375rem; background: rgba(255, 255, 255, .18); color: #fff; font-size: .8125rem; font-weight: 600; } /* three compact buttons on someone's wall (2026-09-29): two anonymous ones in a row, the signed letter under them */ .ask-tiles.three { flex-direction: column; gap: .375rem; margin-top: .625rem; } .ask-tiles.three .trow { display: flex; gap: .375rem; } .ask-tiles.three .tile { height: 2.25rem; border-radius: .625rem; gap: .375rem; padding: 0 .5rem; } .ask-tiles.three .tile span { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-tiles.three .tile svg { width: 1rem; height: 1rem; flex: none; } .ask-tiles.three .tile.signed { width: 100%; background: var(--color-primary); color: #fff; } .ask-top.pic .ask-tiles.three .tile.signed { background: rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .45); } .ask-tiles.three .tile .avatar.mini { width: 1.25rem; height: 1.25rem; font-size: .5625rem; flex: none; } .ask-cm-cnt { font-size: .6875rem; color: rgba(255, 255, 255, .8); text-align: right; margin-top: -.125rem; } .ask-cm-cnt.over { color: #ffd2d2; font-weight: 700; } .ask-setup .row-item.setting .label .subtitle { font-size: .8125rem; color: var(--color-text-secondary); } /* my head runs edge to edge like a stranger's page, and the capsule is glued right under it as a grid of three (2026-09-29, the user: «прилепи капсулу к профилю, на всю ширину, сеткой») */ .wask > .ask-panel { margin: 0 0 .5rem; } .wask > .ask-panel .ask-top { border-radius: 0; margin: 0; box-shadow: none; } .wask.onwall .ask-panel .ask-tabs, .wask > .ask-panel .ask-tabs { margin: 0; border-radius: 0; padding: .375rem .75rem .5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3125rem; background: var(--color-background); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 .5px 0 var(--color-borders); } .wask.onwall .ask-panel .ask-tabs button, .wask > .ask-panel .ask-tabs button { width: auto; height: 2rem; border-radius: .625rem; font-size: .8125rem; font-weight: 600; color: var(--color-text); text-shadow: none; background: rgba(118, 118, 128, .14); } .wask.onwall .ask-panel .ask-tabs button.on, .wask > .ask-panel .ask-tabs button.on, :root[data-theme="dark"] .wask.onwall .ask-panel .ask-tabs button.on { color: #fff; background: var(--color-primary); box-shadow: none; } .wask.onwall .ask-panel .ask-tabs button.on .n { background: #fff; color: var(--color-primary); } .ask-it.in { animation: ask-in .3s ease-out; } @keyframes ask-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } } .wall-chat .wask { padding-top: 0; } /* the head sits right under the header, no seam (2026-09-29, the user) */ /* all three the same box and type (2026-09-29, the user: «по высоте как те кнопки сверху, тот же шрифт и жирность») */ .ask-tiles.three .tile, .ask-tiles.three .tile.signed { height: 2.875rem; border-radius: .75rem; gap: .5rem; } .ask-tiles.three .tile span, .ask-tiles.three .tile.signed span { font-size: .9375rem; font-weight: 600; } .ask-tiles.three .tile svg, .ask-tiles.three .tile.signed svg { width: 1.125rem; height: 1.125rem; } .ask-tiles.three .tile .avatar.mini { width: 1.375rem; height: 1.375rem; font-size: .625rem; } /* the capsule strip is solid in the dark theme too (the theme rule outranked the strip's colour) */ :root[data-theme="dark"] .wask.onwall .ask-panel .ask-tabs, :root:not([data-theme="light"]) .wask.onwall .ask-panel .ask-tabs { background: var(--color-background); } .ask-compose.away { opacity: 0; pointer-events: none; transform: translateY(1rem); } .ask-tiles.three > .trow, .ask-tiles.three > .tile.signed { flex: none; } /* the column must not flex the signed tile down to its text (2026-09-29) */ /* lower, and the words fit (2026-09-29, the user: «текст обрезается, сделай чуть меньше по высоте») */ .ask-tiles.three .tile, .ask-tiles.three .tile.signed { height: 2.5rem; border-radius: .6875rem; gap: .3125rem; padding: 0 .375rem; } .ask-tiles.three .tile span, .ask-tiles.three .tile.signed span { font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; } .ask-tiles.three .tile svg, .ask-tiles.three .tile.signed svg { width: 1rem; height: 1rem; } /* the light theme: white record cards instead of purple (2026-09-29, the user) — the dark theme keeps the gradient */ :root[data-theme="light"] .ask-it { background: #fff; box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .1); } :root[data-theme="light"] .ask-it .qrow { background: var(--color-background-secondary, #f2f2f7); } :root[data-theme="light"] .ask-it .arow { background: none; } :root[data-theme="light"] .ask-it .arow .avatar { box-shadow: 0 0 0 2px rgba(0, 0, 0, .06); } :root[data-theme="light"] .ask-it .ab { color: var(--color-text); } :root[data-theme="light"] .ask-it .ab b { color: var(--color-primary); } :root[data-theme="light"] .ask-it time, :root[data-theme="light"] .ask-it .ask-cm-row time { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .rc { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .rc.own { background: var(--color-primary); color: #fff; } :root[data-theme="light"] .ask-it .ask-cm { border-top-color: rgba(0, 0, 0, .06); } :root[data-theme="light"] .ask-it .ask-cm-head { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .ask-cm-head.on { background: var(--color-primary); color: #fff; } :root[data-theme="light"] .ask-it .ask-cm-row { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-row .who { color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-row .who.tap b { text-decoration-color: rgba(0, 0, 0, .25); } :root[data-theme="light"] .ask-it .ask-cm-row .re { background: rgba(0, 0, 0, .05); border-left-color: var(--color-primary); } :root[data-theme="light"] .ask-it .ask-cm-row .tx .t { color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-row.lit { animation: cm-lit-light 1.8s ease-out; } @keyframes cm-lit-light { 0%, 35% { background: rgba(51, 144, 236, .22); box-shadow: 0 0 0 2px var(--color-primary); } 100% { background: #f2f2f7; box-shadow: none; } } :root[data-theme="light"] .ask-it .ask-cm-reply { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-reply .x { background: rgba(0, 0, 0, .08); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-form input { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-form input::placeholder { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .ask-cm-form input:focus { border-color: var(--color-primary); } :root[data-theme="light"] .ask-it .ask-cm-send { background: var(--color-primary); color: #fff; } :root[data-theme="light"] .ask-it .ask-cm-need, :root[data-theme="light"] .ask-it .ask-cm-more { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } :root[data-theme="light"] .ask-cm-cnt { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-cm-cnt.over { color: #d33; } /* the own-wall field in the light theme: a light glass, dark words (2026-09-29, the user: «не видно») */ :root[data-theme="light"] .ask-compose .field { background: rgba(255, 255, 255, .92); box-shadow: 0 .125rem .625rem rgba(0, 0, 0, .12), inset 0 0 0 .5px rgba(0, 0, 0, .06); } :root[data-theme="light"] .ask-compose textarea { color: var(--color-text); caret-color: var(--color-primary); } :root[data-theme="light"] .ask-compose textarea::placeholder { color: var(--color-text-secondary); } /* my own head on «Стіна», super compact (2026-09-29, the user: «чтобы занимал очень мало экрана»): one row — face, name and tag, three round icon buttons; under it a thin row — views, place, rating. No prompt line. */ .ask-panel .ask-top.own { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head acts" "meta rate"; align-items: center; column-gap: .5rem; row-gap: .375rem; padding: .5rem .75rem .5rem; } .ask-panel .ask-top.own .head { grid-area: head; gap: .5rem; min-width: 0; padding-right: 0; } .ask-panel .ask-top.own .avatar.hero { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; box-shadow: 0 0 0 .125rem rgba(255, 255, 255, .85); } .ask-panel .ask-top.own .avatar.hero img { width: 100%; height: 100%; } .ask-panel .ask-top.own .t b { font-size: .9375rem; } .ask-panel .ask-top.own .t .sub { font-size: .6875rem; } .ask-panel .ask-top.own .meta { grid-area: meta; margin: 0; gap: .375rem; } .ask-panel .ask-top.own .meta > * { height: 1.25rem; margin-top: 0; padding: 0 .5rem; font-size: .625rem; } .ask-panel .ask-top.own .meta > * svg { width: .75rem; height: .75rem; } .ask-panel .ask-top.own > .ask-rate.corner.corner { position: static; grid-area: rate; justify-self: end; height: 1.25rem; font-size: .6875rem; } .ask-panel .ask-top.own > .ask-rate.corner .flame { width: .875rem; height: .875rem; } .ask-panel .ask-top.own .line, .ask-panel .ask-top.own .line-more { display: none; } .ask-panel .ask-top.own .ask-tiles { grid-area: acts; display: flex; gap: .25rem; margin: 0; width: auto; } .ask-panel .ask-top.own .ask-tiles .tile { flex: none; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; gap: 0; } .ask-panel .ask-top.own .ask-tiles .tile span { display: none; } .ask-panel .ask-top.own .ask-tiles .tile svg { width: 1rem; height: 1rem; } .wask > .ask-panel .ask-top.own { transition: none; transform: none !important; } /* never folds: it is small already (2026-09-29) */ /* a stranger's head folded (2026-09-29, the user): the three buttons stay in the strip as round icons on the right, the rating pill slides left to make room */ .ask-top.folded .ask-tiles.three { opacity: 1; pointer-events: auto; position: absolute; right: .75rem; top: calc(var(--fold, 0px) + 1.125rem); z-index: 3; display: flex; flex-direction: row; gap: .25rem; margin: 0; width: auto; } .ask-top.folded .ask-tiles.three .trow { display: contents; } .ask-top.folded .ask-tiles.three .tile, .ask-top.folded .ask-tiles.three .tile.signed { flex: none; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; gap: 0; } .ask-top.folded .ask-tiles.three .tile span { display: none; } .ask-top.folded .ask-tiles.three .tile svg { width: 1rem; height: 1rem; } .ask-top.folded .ask-tiles.three .tile .avatar.mini { width: 1.25rem; height: 1.25rem; } .ask-top.folded > .ask-rate.corner.corner { transform: translateY(var(--fold, 0px)) translateX(-7rem); } .ask-top.folded .head .t { padding-right: 10.5rem; } /* …in the corner, under the rating (2026-09-29, the user): the pill stays top-right and shrinks, the icons sit right under it */ .ask-top.folded > .ask-rate.corner.corner { transform: translateY(var(--fold, 0px)); top: .375rem; height: 1.25rem; font-size: .6875rem; padding: 0 .5rem 0 .375rem; } .ask-top.folded > .ask-rate.corner .flame { width: .875rem; height: .875rem; } .ask-top.folded .ask-tiles.three { top: calc(var(--fold, 0px) + 1.875rem); gap: .3125rem; } .ask-top.folded .ask-tiles.three .tile, .ask-top.folded .ask-tiles.three .tile.signed { width: 1.75rem; height: 1.75rem; } .ask-top.folded .ask-tiles.three .tile svg { width: .9375rem; height: .9375rem; } .ask-top.folded .ask-tiles.three .tile .avatar.mini { width: 1.125rem; height: 1.125rem; } .ask-top.folded .head .t { padding-right: 6.5rem; } /* the bell in the header (2026-09-29) */ .hbell { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-background-secondary); color: var(--color-text); } .hbell svg { width: 1.25rem; height: 1.25rem; } .hbell.hot { color: var(--color-primary); } .hbell i.n { position: absolute; top: -.125rem; right: -.25rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: .5625rem; background: #ff3b30; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 1.125rem; text-align: center; box-shadow: 0 0 0 2px var(--color-background); } /* the card from the top */ .push-card { position: fixed; top: calc(var(--safe-top, 0px) + .5rem); left: .625rem; right: .625rem; z-index: 1650; display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem .75rem .75rem; border-radius: 1.25rem; background: var(--color-background); color: var(--color-text); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .08); transform: translateY(calc(-100% - 1.5rem)); opacity: 0; transition: transform .42s cubic-bezier(.2, .9, .25, 1.15), opacity .25s ease; cursor: pointer; } .push-card.open { transform: none; opacity: 1; } .push-card .pt { flex: 1; min-width: 0; line-height: 1.25; } .push-card .pt b { display: block; font-size: .9375rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .push-card .pt span { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .push-card .arrow { flex: none; width: .5rem; height: .5rem; border-right: 2px solid var(--color-text-secondary); border-top: 2px solid var(--color-text-secondary); transform: rotate(45deg); opacity: .6; } .nt-face { position: relative; width: 2.5rem; height: 2.5rem; font-size: 1rem; flex: none; overflow: visible; } .nt-face.big { width: 2.875rem; height: 2.875rem; font-size: 1.125rem; } .nt-face.sign { background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; font-size: 1.25rem; display: grid; place-items: center; } .nt-face .sign { position: absolute; right: -.25rem; bottom: -.25rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--color-background); font-style: normal; font-size: .6875rem; line-height: 1.125rem; text-align: center; box-shadow: 0 0 0 1.5px var(--color-background); } /* the list */ .nt-list { padding: 0 0 1.5rem; } .nt-day { padding: .875rem .875rem .375rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); } .nt-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .625rem .875rem; text-align: left; background: var(--color-background); color: var(--color-text); border-bottom: .5px solid var(--color-borders); } .nt-row.new { background: var(--color-primary-tint, rgba(51, 144, 236, .08)); } .nt-row .tx { flex: 1; min-width: 0; line-height: 1.25; } .nt-row .tx b { display: block; font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nt-row .tx span { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nt-row time { flex: none; align-self: flex-start; margin-top: .125rem; font-size: .6875rem; color: var(--color-text-secondary); } .ask-it.lit { animation: ask-lit 1.8s ease-out; } @keyframes ask-lit { 0%, 35% { box-shadow: 0 0 0 3px var(--color-primary), 0 .5rem 1.5rem rgba(51, 144, 236, .35); } 100% { box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08); } } .ask-setup .ask-tagrow { margin: .25rem 0 0; } /* the bell's number sits outside the clipped button (2026-09-29) */ .hbell-wrap { position: relative; flex: none; display: inline-block; } .hbell-wrap i.n { position: absolute; top: -.25rem; right: -.375rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: .5625rem; background: #ff3b30; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 1.125rem; text-align: center; box-shadow: 0 0 0 2px var(--color-background); pointer-events: none; z-index: 1; } .nt-row.gone { animation: card-gone .26s ease-in forwards; pointer-events: none; } /* the push card, glass (2026-09-29, the user: «прозрачнее и красивее»): frosted, a hairline, a soft glow */ .push-card { background: color-mix(in srgb, var(--color-background) 72%, transparent); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border-radius: 1.375rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .22), inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 0 0 .5px rgba(0, 0, 0, .08); } :root[data-theme="dark"] .push-card { background: color-mix(in srgb, var(--color-background) 62%, transparent); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(255, 255, 255, .14); } .push-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(139, 124, 255, .18), transparent 45%, rgba(51, 144, 236, .14)); pointer-events: none; } .push-card > * { position: relative; } .push-card .nt-face.big { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .18); } /* the rating window, v4 (2026-09-29): one small block — number, place, the buy capsule, four lines */ .rt-info.v4 { display: flex; flex-direction: column; gap: .625rem; } .rt-info.v4 .rt-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; padding: .75rem .875rem; } .rt-info.v4 .rt-num { display: flex; align-items: center; gap: .375rem; } .rt-info.v4 .rt-num b { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; } .rt-info.v4 .rt-num .flame, .rt-info.v4 .rt-num svg { width: 1.5rem; height: 1.5rem; } .rt-info.v4 .rt-place { text-align: right; line-height: 1.15; } .rt-info.v4 .rt-place b { display: block; font-size: 1.0625rem; font-weight: 800; } .rt-info.v4 .rt-place span { font-size: .75rem; opacity: .85; } .rt-buy { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .5rem; height: 2.75rem; border-radius: 1.375rem; color: #1a1200; font-size: .9375rem; font-weight: 800; background: linear-gradient(135deg, #ffe08a, #ffb300 55%, #ff8a00); box-shadow: 0 .5rem 1.25rem rgba(255, 160, 0, .35); } .rt-buy .star { font-size: 1.125rem; } .rt-buy svg { width: 1rem; height: 1rem; opacity: .7; } .rt-buy::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: cta-shine 3.2s ease-in-out infinite; pointer-events: none; } .rt-how { display: flex; flex-direction: column; gap: .3125rem; padding: .625rem .75rem; border-radius: .875rem; background: var(--color-background-secondary); } .rt-how > b { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin-bottom: .125rem; } .rt-line { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; line-height: 1.25; } .rt-line .ic { width: 1.25rem; text-align: center; flex: none; } .rt-line .tx { flex: 1; min-width: 0; } .rt-line .pts { flex: none; font-weight: 700; color: var(--color-primary); } .rt-line.done { opacity: .55; } .rt-line.done .pts { color: #34c759; } .rt-info.v4 .rt-note { margin: 0; font-size: .75rem; color: var(--color-text-secondary); text-align: center; } /* the shop */ .rt-shop { display: flex; flex-direction: column; gap: .75rem; } .rt-shop-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: 1.125rem 1rem 1rem; border-radius: 1.125rem; color: #fff; background: radial-gradient(120% 120% at 100% 0%, #3a2a7a 0%, #1b1440 50%, #0d0a24 100%); box-shadow: 0 .75rem 2rem rgba(20, 10, 60, .45); } .rt-shop-hero .glow { position: absolute; inset: -40% -20%; background: radial-gradient(40% 40% at 50% 45%, rgba(255, 190, 60, .35), transparent 70%); pointer-events: none; } .rt-shop-hero .big { position: relative; font-size: 2.5rem; line-height: 1; filter: drop-shadow(0 0 .75rem rgba(255, 200, 80, .8)); } .rt-shop-hero b { position: relative; font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; } .rt-shop-hero span { position: relative; font-size: .8125rem; opacity: .85; line-height: 1.35; } .rt-packs { display: flex; flex-direction: column; gap: .5rem; } .rt-pack { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .875rem; border-radius: 1rem; background: var(--color-background-secondary); color: var(--color-text); text-align: left; box-shadow: inset 0 0 0 1px var(--color-borders); } .rt-pack.hot { background: linear-gradient(135deg, rgba(255, 200, 80, .22), rgba(255, 140, 0, .12)); box-shadow: inset 0 0 0 1.5px #ffb300; } .rt-pack .l b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .rt-pack .l span { font-size: .75rem; color: var(--color-text-secondary); } .rt-pack .r { text-align: right; } .rt-pack .r b { display: block; font-size: 1rem; font-weight: 800; } .rt-pack .r i { display: inline-block; margin-top: .125rem; padding: 0 .375rem; border-radius: .5rem; background: #34c759; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; } .rt-pack .tag { position: absolute; top: -.5rem; left: .875rem; padding: 0 .5rem; border-radius: .5rem; background: #ffb300; color: #1a1200; font-style: normal; font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .rt-pack.busy { opacity: .6; pointer-events: none; } .rt-fine { font-size: .6875rem; color: var(--color-text-secondary); text-align: center; } .rt-packs { padding-top: .375rem; } .rt-pack { overflow: visible; transition: transform .12s ease; } .rt-pack:active { transform: scale(.985); } /* the rating window and the shop, prettier (2026-09-29, the user: «скучные и не красивые») */ .rt-info.v4 .rt-head { position: relative; overflow: hidden; align-items: flex-end; padding: 1rem 1rem .875rem; border-radius: 1.125rem; background: radial-gradient(120% 140% at 0% 0%, #8b7cff 0%, #5a3fd6 45%, #2a1c6e 100%); box-shadow: 0 .75rem 1.75rem rgba(60, 40, 160, .35); margin: 0; } .rt-info.v4 .rt-head .glow { position: absolute; right: -20%; top: -60%; width: 70%; height: 160%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 200, 80, .45), transparent 70%); pointer-events: none; } .rt-info.v4 .rt-head .pat { position: absolute; inset: 0; background: url("pattern.svg") center / 18rem; opacity: .08; pointer-events: none; } .rt-info.v4 .rt-num { position: relative; align-items: baseline; gap: .5rem; } .rt-info.v4 .rt-num b { font-size: 2.5rem; line-height: 1; font-weight: 900; letter-spacing: -.03em; text-shadow: 0 .25rem 1rem rgba(0, 0, 0, .25); } .rt-info.v4 .rt-num .flame, .rt-info.v4 .rt-num svg { width: 1.75rem; height: 1.75rem; align-self: center; filter: drop-shadow(0 0 .5rem rgba(255, 210, 120, .8)); } .rt-info.v4 .rt-num .lbl { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; } .rt-info.v4 .rt-place { position: relative; padding: .375rem .625rem; border-radius: .75rem; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); } .rt-info.v4 .rt-place b { font-size: 1.125rem; } .rt-buy { height: 3rem; font-size: 1rem; box-shadow: 0 .625rem 1.5rem rgba(255, 160, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .55); } .rt-how { gap: .375rem; padding: .75rem .75rem; border-radius: 1rem; background: var(--color-background-secondary); box-shadow: inset 0 0 0 .5px var(--color-borders); } .rt-line { gap: .625rem; font-size: .8438rem; } .rt-line .ic { width: 1.75rem; height: 1.75rem; border-radius: .5625rem; display: grid; place-items: center; font-size: .9375rem; background: var(--color-background); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .rt-line .ic.t1 { background: linear-gradient(135deg, #ffe3a3, #ffc46b); } .rt-line .ic.t2 { background: linear-gradient(135deg, #cfe6ff, #9ccbff); } .rt-line .ic.t4 { background: linear-gradient(135deg, #d9f5e3, #9fe3bb); } .rt-line .ic.t5 { background: linear-gradient(135deg, #f0dcff, #d4b3ff); } .rt-line .pts { padding: .125rem .5rem; border-radius: .625rem; background: var(--color-primary-tint, rgba(51, 144, 236, .12)); color: var(--color-primary); font-size: .75rem; } .rt-line.done .pts { background: rgba(52, 199, 89, .14); color: #2aa34a; } /* the shop */ .rt-shop-hero { padding: 1.375rem 1rem 1.125rem; border-radius: 1.25rem; background: radial-gradient(110% 120% at 85% 0%, #5b3fe0 0%, #2a1c6e 40%, #120c33 100%); } .rt-shop-hero .glow { inset: -30% -10%; background: radial-gradient(35% 35% at 50% 40%, rgba(255, 190, 60, .5), transparent 70%); } .rt-shop-hero::after { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 16rem; opacity: .08; pointer-events: none; } .rt-shop-hero .big { font-size: 3rem; animation: rt-float 3s ease-in-out infinite; } @keyframes rt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.25rem); } } .rt-shop-hero b { font-size: 1.3125rem; } .rt-pack { padding: .875rem 1rem; border-radius: 1.125rem; background: var(--color-background); box-shadow: 0 .25rem .875rem rgba(0, 0, 0, .06), inset 0 0 0 1px var(--color-borders); } .rt-pack .l b { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; background: linear-gradient(135deg, #8b7cff, #3390ec); -webkit-background-clip: text; background-clip: text; color: transparent; } .rt-pack .r b { display: inline-flex; align-items: center; gap: .25rem; padding: .3125rem .75rem; border-radius: 1rem; background: linear-gradient(135deg, #ffe08a, #ffb300); color: #1a1200; font-size: .9375rem; box-shadow: 0 .25rem .625rem rgba(255, 160, 0, .3); } .rt-pack .r i { margin-top: .3125rem; } .rt-pack.hot { background: linear-gradient(135deg, rgba(255, 210, 90, .18), rgba(139, 124, 255, .14)); box-shadow: 0 .5rem 1.25rem rgba(255, 160, 0, .18), inset 0 0 0 1.5px #ffb300; } .rt-pack.hot .l b { background: linear-gradient(135deg, #ff9a00, #ffcf4d); -webkit-background-clip: text; background-clip: text; } .rt-pack .tag { top: -.625rem; padding: .125rem .625rem; border-radius: .625rem; box-shadow: 0 .25rem .5rem rgba(255, 160, 0, .35); } :root[data-theme="dark"] .rt-pack { background: var(--color-background-secondary); } /* the shop, v3 (2026-09-29, the user: «анимировать красиво, кнопки покупки круче»): cards slide in one after another, a sweep of light runs over them, the pay pill is a gold button, the popular card breathes */ .rt-shop-hero .sp { position: absolute; width: .375rem; height: .375rem; border-radius: 50%; background: #fff; box-shadow: 0 0 .5rem 2px rgba(255, 220, 120, .9); opacity: 0; transform: scale(var(--s, .8)); animation: rt-twinkle 2.6s ease-in-out infinite; pointer-events: none; } @keyframes rt-twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(var(--s, .8)); } } .rt-shop-hero .big { filter: drop-shadow(0 0 1rem rgba(255, 200, 80, .95)); animation: rt-float 2.6s ease-in-out infinite; } .rt-shop-hero, .rt-packs .rt-pack, .rt-fine { animation: rt-in .5s cubic-bezier(.2, .9, .25, 1.1) both; } .rt-packs .rt-pack:nth-child(1) { animation-delay: .08s; } .rt-packs .rt-pack:nth-child(2) { animation-delay: .18s; } .rt-packs .rt-pack:nth-child(3) { animation-delay: .28s; } .rt-fine { animation-delay: .4s; } @keyframes rt-in { from { opacity: 0; transform: translateY(1rem) scale(.97); } to { opacity: 1; transform: none; } } .rt-pack { position: relative; overflow: hidden; padding: 1rem 1rem 1rem 1.125rem; border-radius: 1.25rem; color: #fff; background: linear-gradient(135deg, #2b2358, #17123a); box-shadow: 0 .625rem 1.5rem rgba(20, 10, 60, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .15s ease, box-shadow .15s ease; } .rt-pack:active { transform: scale(.97); } .rt-pack .sheen { position: absolute; top: -60%; left: -70%; width: 45%; height: 220%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .16), transparent); transform: skewX(-20deg); animation: rt-sheen 4.2s ease-in-out infinite; pointer-events: none; } .rt-packs .rt-pack:nth-child(2) .sheen { animation-delay: 1.2s; } .rt-packs .rt-pack:nth-child(3) .sheen { animation-delay: 2.4s; } @keyframes rt-sheen { 0%, 55% { left: -70%; } 100% { left: 150%; } } .rt-pack .l b { font-size: 1.75rem; font-weight: 900; letter-spacing: -.03em; background: linear-gradient(135deg, #cfc4ff, #8ec1ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .rt-pack .l span { color: rgba(255, 255, 255, .7); } .rt-pack .r.pay { position: relative; display: inline-flex; align-items: center; gap: .3125rem; height: 2.5rem; padding: 0 1rem 0 1.125rem; border-radius: 1.25rem; background: linear-gradient(135deg, #ffe08a 0%, #ffb300 55%, #ff8a00 100%); color: #1a1200; font-size: 1.0625rem; font-weight: 800; box-shadow: 0 .5rem 1.125rem rgba(255, 160, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6); text-align: left; } .rt-pack .r.pay .st { font-size: 1.125rem; filter: drop-shadow(0 0 .25rem rgba(255, 255, 255, .7)); } .rt-pack .r.pay::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: cta-shine 3.4s ease-in-out infinite; pointer-events: none; } .rt-pack.hot { background: linear-gradient(135deg, #3a2a7a, #1b1440); box-shadow: 0 .75rem 1.75rem rgba(255, 160, 0, .28), inset 0 0 0 1.5px #ffc233; animation: rt-in .5s cubic-bezier(.2, .9, .25, 1.1) both, rt-breathe 2.8s ease-in-out .6s infinite; } @keyframes rt-breathe { 0%, 100% { box-shadow: 0 .75rem 1.75rem rgba(255, 160, 0, .22), inset 0 0 0 1.5px #ffc233; } 50% { box-shadow: 0 .875rem 2.25rem rgba(255, 160, 0, .5), inset 0 0 0 2px #ffe08a; } } .rt-pack.hot .l b { background: linear-gradient(135deg, #ffe08a, #ffb300); -webkit-background-clip: text; background-clip: text; } .rt-pack .tag { top: .625rem; left: auto; right: 1rem; z-index: 1; background: #fff; color: #7a4a00; } .rt-pack.busy { opacity: .55; } :root[data-theme="dark"] .rt-pack { background: linear-gradient(135deg, #2b2358, #17123a); } /* the capsule in the rating window breathes too */ .rt-buy { animation: rt-buy-breathe 2.8s ease-in-out infinite; } @keyframes rt-buy-breathe { 0%, 100% { box-shadow: 0 .625rem 1.5rem rgba(255, 160, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .55); transform: none; } 50% { box-shadow: 0 .75rem 2rem rgba(255, 160, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .55); transform: scale(1.015); } } .rt-pack.hot { padding-top: 1.75rem; } .rt-pack .tag { top: .5rem; left: 1.125rem; right: auto; } /* the tag above the number, not over the pay pill (2026-09-29) */ /* the shop, v4 (2026-09-29): the lightning is the rating, the star is the price; three cards in a row */ .rt-buy .flame { width: 1.375rem; height: 1.375rem; filter: drop-shadow(0 0 .375rem rgba(255, 255, 255, .6)); } .rt-shop-hero .big { display: grid; place-items: center; animation: rt-float 2.6s ease-in-out infinite; filter: none; } .rt-shop-hero .big .flame { width: 4rem; height: 4rem; filter: drop-shadow(0 0 1rem rgba(255, 170, 60, .9)); } .rt-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding-top: .625rem; } .rt-pack, .rt-pack.hot { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .25rem; padding: 1rem .5rem .625rem; border-radius: 1.125rem; overflow: visible; color: #fff; text-align: center; background: linear-gradient(160deg, #2b2358, #17123a); box-shadow: 0 .625rem 1.5rem rgba(20, 10, 60, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .15s ease; } .rt-pack .sheen { display: none; } .rt-pack .ic { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; } .rt-pack .ic .flame { width: 2.25rem; height: 2.25rem; filter: drop-shadow(0 .25rem .625rem rgba(255, 150, 40, .55)); } .rt-pack .n { display: block; font-size: 1.375rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; background: linear-gradient(135deg, #fff, #cfc4ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .rt-pack .sub { font-size: .6875rem; color: rgba(255, 255, 255, .7); white-space: nowrap; } .rt-pack .pay { position: relative; overflow: hidden; margin-top: .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; width: 100%; height: 2.25rem; border-radius: 1.125rem; background: linear-gradient(135deg, #ffe08a 0%, #ffb300 55%, #ff8a00 100%); color: #1a1200; font-size: .9375rem; font-weight: 800; box-shadow: 0 .375rem .875rem rgba(255, 160, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .6); } .rt-pack .pay .st { font-size: 1rem; } .rt-pack .pay::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: cta-shine 3.4s ease-in-out infinite; pointer-events: none; } .rt-pack.hot { padding-top: 1rem; background: linear-gradient(160deg, #4a35a8, #1b1440); box-shadow: 0 .75rem 1.75rem rgba(255, 160, 0, .28), inset 0 0 0 1.5px #ffc233; transform: translateY(-.25rem); } .rt-pack.hot:active { transform: translateY(-.25rem) scale(.97); } .rt-pack.hot .n { background: linear-gradient(135deg, #ffe08a, #ffb300); -webkit-background-clip: text; background-clip: text; } .rt-pack .tag { position: absolute; top: -.5rem; left: 50%; right: auto; transform: translateX(-50%); padding: .125rem .5rem; border-radius: .5rem; background: #ffb300; color: #1a1200; font-style: normal; font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 .25rem .5rem rgba(255, 160, 0, .35); z-index: 1; } :root[data-theme="dark"] .rt-pack { background: linear-gradient(160deg, #2b2358, #17123a); } /* the star drawn, the discount as a corner badge, the badge in the hero glows instead of bobbing (2026-09-29) */ .rt-pack .pay .star { width: 1.125rem; height: 1.125rem; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); } .rt-pack .off { position: absolute; top: .375rem; right: .375rem; padding: .125rem .375rem; border-radius: .5rem; background: #34c759; color: #fff; font-style: normal; font-size: .625rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .25); z-index: 1; } .rt-pack.hot .off { top: .875rem; } .rt-shop-hero .big { animation: rt-glow 2.8s ease-in-out infinite; } .rt-shop-hero .big .flame { animation: none; } @keyframes rt-glow { 0%, 100% { filter: drop-shadow(0 0 .5rem rgba(255, 170, 60, .55)); } 50% { filter: drop-shadow(0 0 1.25rem rgba(255, 190, 80, 1)); } } /* the hit's ring outside the card, the discount level with the lightning (2026-09-29, the user) */ .rt-pack.hot, .rt-pack.hot:active { box-shadow: 0 0 0 2px #ffc233, 0 .75rem 1.75rem rgba(255, 160, 0, .32); } @keyframes rt-breathe { 0%, 100% { box-shadow: 0 0 0 2px #ffc233, 0 .75rem 1.75rem rgba(255, 160, 0, .25); } 50% { box-shadow: 0 0 0 2.5px #ffe08a, 0 .875rem 2.25rem rgba(255, 160, 0, .5); } } .rt-pack .off, .rt-pack.hot .off { top: 1.6875rem; right: .375rem; height: 1.125rem; line-height: 1.125rem; padding: 0 .375rem; } .rt-pack:has(.off) .ic { align-self: flex-start; margin-left: .25rem; } /* the lightning left, the discount right, one line (2026-09-29) */ /* a hidden wall's page (2026-09-29): the name and the face, nothing else */ .ask-top.hidden .line, .ask-top.hidden .line-more, .ask-top.hidden .meta, .ask-top.hidden > .ask-rate.corner { display: none; } .ask-blocked.quiet { background: rgba(255, 255, 255, .14); color: #fff; } /* the medal in the head's corner, the place pill compact (2026-09-29) */ .rt-info.v4 .rt-medal { position: absolute; top: .375rem; right: .5rem; font-style: normal; font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .35)); animation: rt-medal .6s cubic-bezier(.2, .9, .25, 1.2) both; } @keyframes rt-medal { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } } .rt-info.v4 .rt-head:has(.rt-medal) .rt-place { margin-top: 1.5rem; } .rt-info.v4 .rt-place { flex: none; white-space: nowrap; } .rt-info.v4 .rt-place span { font-size: .6875rem; } /* the welcome: «use my Telegram name» under the field (2026-09-29) */ .wl-tg { display: inline-flex; align-items: center; gap: .375rem; margin-top: .5rem; height: 1.875rem; padding: 0 .75rem 0 .5rem; border-radius: .9375rem; background: var(--color-primary-tint, rgba(51, 144, 236, .12)); color: var(--color-primary); font-size: .8125rem; font-weight: 600; max-width: 100%; } .wl-tg svg { width: 1rem; height: 1rem; flex: none; } .wl-tg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-tg.done { background: rgba(52, 199, 89, .14); color: #2aa34a; } /* the head on a phone (2026-09-29): «рейтинг» goes under the number, so the place pill has room and is never cut */ .rt-info.v4 .rt-num { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 0; } .rt-info.v4 .rt-num .lbl { flex-basis: 100%; margin-top: .125rem; } .rt-info.v4 .rt-place { flex: none; margin-left: .5rem; } .rt-info.v4 .rt-head:has(.rt-medal) .rt-place { margin-top: 0; } .rt-info.v4 .rt-medal { top: .5rem; right: .625rem; } .rt-info.v4 .rt-head { padding-right: .875rem; } .rt-info.v4 .rt-head:has(.rt-medal) { padding-top: 1.125rem; } .rt-info.v4 .rt-head:has(.rt-medal) .rt-num { padding-top: 1.25rem; } .ask-blocked.byme { display: flex; align-items: center; justify-content: space-between; gap: .625rem; } .ask-blocked.byme span { flex: 1; min-width: 0; font-size: .8125rem; line-height: 1.3; } .ask-blocked.byme .btn.small { flex: none; height: 2rem; padding: 0 .875rem; border-radius: 1rem; font-size: .8125rem; } /* the «closed» / «blocked» word on the head, readable on any colour (2026-09-29) */ .ask-top .ask-blocked { margin-top: .625rem; padding: .625rem .75rem; border-radius: .875rem; background: rgba(0, 0, 0, .38); color: #fff; font-size: .8438rem; line-height: 1.3; font-weight: 600; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ask-top .ask-blocked.quiet { background: rgba(0, 0, 0, .3); font-weight: 500; } .ask-blocked.byme .btn.small { background: #fff; color: #1b1440; } /* the Stars funnel in the admin (2026-09-29) */ .st-row.paid .subtitle .last { color: #2aa34a; font-weight: 700; } .st-row.invoice .subtitle .last { color: var(--color-primary); font-weight: 600; } .st-row.open .avatar, .st-row.pack .avatar { opacity: .8; } /* my compact head: the rating in the meta row, the place pill in the corner (2026-09-29) */ .ask-panel .ask-top.own > .ask-place.corner { grid-area: rate; justify-self: end; position: relative; z-index: 1; margin: 0; height: 1.25rem; padding: 0 .5rem; font-size: .625rem; } .ask-panel .ask-top.own > .ask-place.corner svg { width: .75rem; height: .75rem; } .ask-panel .ask-top.own .meta .ask-rate { height: 1.25rem; padding: 0 .5rem 0 .375rem; font-size: .6875rem; margin: 0; } .ask-panel .ask-top.own .meta .ask-rate .flame { width: .875rem; height: .875rem; } /* «твій рейтинг» pill in my head: lit, labelled (2026-09-29) */ .ask-panel .ask-top.own .meta .ask-rate.mine { height: 1.5rem; padding: 0 .625rem 0 .4375rem; gap: .3125rem; font-size: .8125rem; background: linear-gradient(135deg, #ffe08a, #ffb300 60%, #ff8a00); color: #1a1200; box-shadow: 0 .25rem .75rem rgba(255, 160, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .55); } .ask-panel .ask-top.own .meta .ask-rate.mine b { font-weight: 900; } .ask-panel .ask-top.own .meta .ask-rate.mine .lbl { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; } .ask-panel .ask-top.own .meta .ask-rate.mine .flame { width: 1rem; height: 1rem; } .ask-panel .ask-top.own > .ask-place.none { opacity: .85; } /* my head: row 1 = face, name, the three round buttons on the right; row 2 = views and the rating, full width (2026-09-29) */ .ask-panel .ask-top.own { grid-template-areas: "head acts" "meta meta"; } .ask-panel .ask-top.own .ask-tiles { align-self: center; } /* the compact rating window's button to the full rules, and the rules window (2026-09-29) */ .rt-all { display: flex; align-items: center; justify-content: center; gap: .25rem; height: 2.25rem; border-radius: .75rem; background: var(--color-background-secondary); color: var(--color-primary); font-size: .875rem; font-weight: 600; } .rt-all svg { width: .875rem; height: .875rem; } .rt-rules { display: flex; flex-direction: column; gap: .375rem; } .rt-rsec { display: flex; flex-direction: column; gap: .0625rem; margin: .625rem .125rem .125rem; } .rt-rsec:first-child { margin-top: 0; } .rt-rsec b { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); } .rt-rsec span { font-size: .75rem; color: var(--color-text-secondary); opacity: .85; } .rt-rules .rt-line { padding: .5rem .625rem; border-radius: .875rem; background: var(--color-background-secondary); align-items: center; } .rt-rules .rt-line.off { opacity: .6; } .rt-rules .rt-line.off .pts { background: rgba(120, 120, 128, .18); color: var(--color-text-secondary); } .rt-rules .rt-line .ic.t0 { background: rgba(120, 120, 128, .18); } .rt-rules .rt-line .pts:empty { display: none; } .rt-rules .rt-note { margin-top: .25rem; font-size: .8125rem; line-height: 1.4; color: var(--color-text-secondary); } /* the compact window stays short on small screens (2026-09-29) */ .rt-info.v4 { gap: .5rem; } .rt-info.v4 .rt-head { padding: .75rem .875rem .625rem; } .rt-info.v4 .rt-num b { font-size: 2.125rem; } .rt-how { gap: .25rem; padding: .5rem .625rem; } .rt-line { font-size: .8125rem; } .rt-line .ic { width: 1.5rem; height: 1.5rem; font-size: .875rem; } .rt-buy { height: 2.75rem; } /* the full-rules window: a fixed box that scrolls (2026-09-29, the user) */ .modal-dialog.scroll .rt-rules { height: min(58vh, 26rem); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateZ(0); overscroll-behavior: contain; margin: 0 -.375rem; padding: 0 .375rem .5rem; mask-image: linear-gradient(to bottom, #000 calc(100% - 1rem), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1rem), transparent); } .st-seg { margin: .5rem .75rem .375rem; } .st-row.on .subtitle .last { color: var(--color-text-secondary); } /* my own row in the top (2026-09-29) */ .ask-card.me { background: var(--color-primary-tint, rgba(51, 144, 236, .08)); } .ask-card .me-tag { display: inline-block; margin-left: .375rem; padding: 0 .375rem; border-radius: .5rem; background: var(--color-primary); color: #fff; font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; } .acts-seg { display: flex; overflow-x: auto; scrollbar-width: none; } .acts-seg::-webkit-scrollbar { display: none; } .acts-seg button { flex: none; padding: 0 .625rem; } /* the walls capsule over the footer (2026-09-30): glass, three equal parts, above the write field when there is one */ .ask-bseg { display: none; position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--tabbar-space) + .625rem); z-index: 6; } .wall-chat.asking .ask-bseg { display: block; } .ask-bseg .ask-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin: 0; padding: .25rem; border-radius: 1.25rem; background: color-mix(in srgb, var(--color-background) 80%, transparent); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18), inset 0 0 0 .5px rgba(255, 255, 255, .25); } .ask-bseg .ask-tabs button { height: 2.375rem; border-radius: 1rem; font-size: .8438rem; font-weight: 600; color: var(--color-text); background: transparent; box-shadow: none; text-shadow: none; } .ask-bseg .ask-tabs button.on { background: var(--color-primary); color: #fff; } .ask-bseg .ask-tabs button.on .n { background: #fff; color: var(--color-primary); } .wall-chat.asking .wask { padding-bottom: calc(var(--tabbar-space) + 4rem); } .wall-chat.asking.onwall.mine .wask { padding-bottom: calc(var(--tabbar-space) + 7.5rem); } .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--tabbar-space) + 3.625rem); } body.keyboard-visible .ask-bseg { display: none; } body.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } body.ctx-open .ask-bseg { opacity: 0; pointer-events: none; } /* my own wall (2026-09-30): the footer slides away, the write field and the capsule take its place; the capsule is the footer's glass */ #tabs { transition: transform .32s cubic-bezier(.32, .72, 0, 1), opacity .25s ease; } body.ownwall #tabs { transform: translateY(calc(100% + var(--tabbar-gap) + var(--safe-bottom) + .5rem)); opacity: 0; pointer-events: none; } .ask-bseg, .ask-compose { transition: bottom .32s cubic-bezier(.32, .72, 0, 1), opacity .2s ease, transform .2s ease; } .ask-bseg .ask-tabs { padding: .25rem; border-radius: 1.75rem; height: var(--tabbar-height); background: color-mix(in srgb, var(--color-tabbar) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .08), inset 0 .5px 0 rgba(255, 255, 255, .5); } :root[data-theme="dark"] .ask-bseg .ask-tabs { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45), 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 .5px 0 rgba(255, 255, 255, .08); } .ask-bseg .ask-tabs button { height: auto; border-radius: 1.5rem; } body.ownwall .wall-chat.asking .ask-bseg { bottom: calc(var(--safe-bottom) + var(--tabbar-gap)); } body.ownwall .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--safe-bottom) + var(--tabbar-gap) + var(--tabbar-height) + .5rem); } body.ownwall .wall-chat.asking.onwall.mine .wask { padding-bottom: calc(var(--safe-bottom) + var(--tabbar-gap) + var(--tabbar-height) + 4.25rem); } body.ownwall.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } /* the capsule bar nearly solid (2026-09-30, the user: «не настолько прозрачным») */ .ask-bseg .ask-tabs { background: color-mix(in srgb, var(--color-tabbar) 94%, transparent); } :root[data-theme="dark"] .ask-bseg .ask-tabs { background: color-mix(in srgb, var(--color-tabbar) 94%, transparent); } /* the capsule away while a field is in use; the write field drops into its place (2026-09-30) */ .ask-bseg.away { opacity: 0; pointer-events: none; transform: translateY(1.25rem); } body.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } /* the comment field grows with the words, paragraphs kept (2026-09-30) */ .ask-cm-form { align-items: flex-end; } .ask-cm-form textarea { flex: 1; min-width: 0; min-height: 2.375rem; max-height: 7.5rem; padding: .5625rem .875rem; border: 1.5px solid var(--color-borders); border-radius: 1.1875rem; background: var(--color-background); color: var(--color-text); font: inherit; font-size: .9375rem; line-height: 1.3; outline: 0; resize: none; } .ask-cm-form textarea:focus { border-color: var(--color-primary); } .ask-it .ask-cm-form textarea { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; } .ask-it .ask-cm-form textarea::placeholder { color: rgba(255, 255, 255, .65); } .ask-it .ask-cm-form textarea:focus { border-color: rgba(255, 255, 255, .6); } :root[data-theme="light"] .ask-it .ask-cm-form textarea { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-form textarea::placeholder { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .ask-cm-form textarea:focus { border-color: var(--color-primary); } .ask-cm-row .tx .t { white-space: pre-wrap; } /* cards in flight: 3D turn and a shadow that grows in the air (2026-09-30) */ .pc.fly { box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .35), 0 0 0 .1rem rgba(255, 255, 255, .45); } .pc-flip { transform-style: preserve-3d; } .pc-flip > .pc { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .35); } .pc-flip > .front-face { transform: rotateY(0deg); } .pc-flip > .back-face { transform: rotateY(180deg); } /* no hopping (2026-09-30, the user: «подпрыгивание уберём, вибрацию оставим»): the hand does not wave on my turn, the status bar does not pop, and a card on the table never slides/resizes after it has landed (the «дрожание» on a defence) */ .dk-hand.wave .pc { animation: none !important; } .dk-status.pop, .dk-bar.pop { animation: none !important; } .dk-board .slot .pc, .dk-board .slot .pc.d { transition: none !important; } .dk-board .slot .pc.pop, .dk-board .slot .pc.d.pop { animation: none !important; } /* a still table (2026-09-30, the user: «ничего на столе не должно меняться, всё сдвигается/сжимается»): the bout is a fixed 3×2 grid — cards fill it left to right, top to bottom, nothing re-centres or shrinks; the rows above the table keep one height whatever they say */ .dk-board { display: grid; grid-template-columns: repeat(3, calc(4.4rem * var(--bs))); grid-template-rows: repeat(2, calc(5.9rem * var(--bs))); justify-content: center; align-content: center; flex-wrap: nowrap; } .dk-board > .hintc { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; } .dk-status { height: 1.5rem; min-height: 0; line-height: 1.5rem; padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-opps { height: 6.75rem; min-height: 0; overflow: visible; } @media (max-height: 720px) { .dk-opps { height: 5.5rem; } } @media (max-height: 600px) { .dk-opps { height: 4rem; } } .dk-table.typing .dk-opps { height: auto; } /* the action bar keeps its height whatever it holds (2026-09-30, the user: «блок „твій хід“ і кнопки з'являються — карти їдуть вниз») */ .dk-bar { height: 3.25rem; min-height: 0; box-sizing: content-box; transition: opacity .15s ease; } .dk-bar.hold { opacity: 0; pointer-events: none; } .dk-bar[hidden] { display: flex !important; visibility: hidden; } @media (max-height: 720px) { .dk-bar { height: 2.75rem; } } /* a card on its way to my hand holds no place in the row yet (2026-09-30) */ .dk-hand .pc.incoming { display: none; } .dk-bar.hold { transition: none; } /* hiding is instant (a fade-out flashed the buttons); only the appearance fades in */ /* the game-over card, v2 (2026-09-30): a felt hero band with a glow, the places on white, one strong «Ще партію» */ .dk-over .card.v2 { padding: 0 0 1rem; overflow: hidden; } .dk-over .ohero { position: relative; overflow: hidden; padding: 1.25rem 1rem 1rem; margin-bottom: .875rem; color: #fff; background: radial-gradient(120% 90% at 50% 0%, var(--dk-felt-light) 0, var(--dk-felt) 55%, var(--dk-felt-dark) 100%); } .dk-over .card.lost .ohero { background: radial-gradient(120% 90% at 50% 0%, #c0392b 0, #8e2a22 55%, #4d1512 100%); } .dk-over .ohero .glow { position: absolute; left: 50%; top: -40%; width: 16rem; height: 16rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 215, 110, .55), transparent); pointer-events: none; } .dk-over .ohero > * { position: relative; } .dk-over .ohero .big { font-size: 3.25rem; margin-bottom: .375rem; filter: drop-shadow(0 .375rem .75rem rgba(0, 0, 0, .35)); } .dk-over .ohero h2 { margin: 0; color: #fff; font-size: 1.375rem; } .dk-over .ohero .sub { display: block; margin-top: .25rem; font-size: .8125rem; opacity: .85; } .dk-over .card.v2 .places, .dk-over .card.v2 .myrt, .dk-over .card.v2 .acts { margin-left: 1rem; margin-right: 1rem; } .dk-over .card.v2 .prow { padding: .5rem .625rem; } .dk-over .card.v2 .prow:first-child { background: linear-gradient(135deg, rgba(255, 209, 102, .28), rgba(255, 179, 0, .12)); box-shadow: inset 0 0 0 1px rgba(255, 179, 0, .45); } .dk-over .card.v2 .prow .delta.up { color: #2aa34a; font-weight: 700; } .dk-over .card.v2 .prow .delta.down { color: #d33; font-weight: 700; } .dk-over .btn.again { height: 3rem; font-size: 1rem; font-weight: 800; background: linear-gradient(135deg, var(--dk-felt-light), var(--dk-felt)); color: #fff; box-shadow: 0 .5rem 1.25rem rgba(15, 74, 47, .35); } .dk-over .btn.again:disabled { opacity: .6; } /* the code box: the oval copies, its pill stands out from the felt */ .dk-wait .codebox .copy { display: inline-flex; align-items: center; gap: .375rem; margin-top: .375rem; height: 2rem; padding: 0 .875rem; border-radius: 1rem; background: #fff; color: var(--dk-felt-dark); font-size: .8125rem; font-weight: 700; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); } .dk-wait .codebox .copy svg { width: 1rem; height: 1rem; } .dk-wait .tbl:active .codebox .copy { transform: scale(.96); } /* the lobby head, compact (2026-09-30): one title line, the two buttons side by side, no paragraph */ .dk-head { margin: .375rem .75rem .5rem; border-radius: 1.125rem; } .dk-head .hb { padding: .75rem .875rem .75rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: center; text-align: left; } .dk-head h2 { grid-column: 1 / -1; margin: 0; font-size: 1.0625rem; } .dk-head p { display: none; } .dk-head .btn.create, .dk-head .btn.code { width: 100%; height: 2.5rem; margin: 0; font-size: .875rem; } .dk-head .btn.code { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); opacity: 1; } .dk-head .rec, .dk-head .who { grid-column: 1 / -1; margin-top: 0; justify-self: start; } /* (2026-09-30, the user) every capsule of the lobby head is the full width: the rating, «за столом як на стіні», the two buttons equal */ .dk-head .rec, .dk-head .who { justify-self: stretch; width: 100%; box-sizing: border-box; min-height: 2.75rem; } .dk-head .who { display: flex; justify-content: flex-start; padding: .375rem .75rem .375rem .375rem; border-radius: 1rem; } .dk-head .who span { flex: 1; min-width: 0; text-align: left; } .dk-head .rec { padding: .5rem .75rem; } /* other open tables in the waiting room (2026-09-30) */ .dk-wait .others { width: 100%; max-width: 22rem; margin: .5rem auto 0; padding: .625rem; box-sizing: border-box; border-radius: 1rem; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 215, 110, .35); animation: dkOthersIn .35s ease-out; } .dk-wait .others[hidden] { display: none; } .dk-wait .others .ocap { font-size: .75rem; font-weight: 700; color: var(--dk-gold); text-transform: uppercase; letter-spacing: .04em; margin: 0 .25rem .375rem; text-align: left; } .dk-wait .others .orow { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem; border: 0; border-radius: .75rem; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; text-align: left; cursor: pointer; } .dk-wait .others .orow + .orow { margin-top: .375rem; } .dk-wait .others .orow:active { background: rgba(255, 255, 255, .18); } .dk-wait .others .oavs { display: flex; flex: none; } .dk-wait .others .oavs .avatar { width: 2rem; height: 2rem; font-size: .8125rem; box-shadow: 0 0 0 2px var(--dk-felt-dark); } .dk-wait .others .oavs .avatar + .avatar { margin-left: -.625rem; } .dk-wait .others .otxt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-wait .others .otxt b { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-wait .others .otxt span { font-size: .75rem; opacity: .8; } .dk-wait .others .ogo { flex: none; height: 2rem; line-height: 2rem; padding: 0 .875rem; border-radius: 1rem; background: var(--dk-gold); color: #3a2a00; font-size: .8125rem; font-weight: 800; } @keyframes dkOthersIn { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } } /* the other-table card floats over the top of the felt, the room below never moves (2026-09-30) */ .dk-wait { position: relative; } .dk-wait .others { position: absolute; z-index: 6; top: .5rem; left: 50%; width: calc(100% - 2rem); max-width: 22rem; margin: 0; transform: translateX(-50%); background: rgba(10, 45, 28, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 215, 110, .45), 0 .75rem 1.75rem rgba(0, 0, 0, .35); animation: dkOthersDrop .4s cubic-bezier(.2, .9, .3, 1.15); } .dk-wait .others .ocap { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .dk-wait .others .ox { flex: none; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: .75rem; line-height: 1; cursor: pointer; } .dk-table.typing .dk-wait .others { display: none; } @keyframes dkOthersDrop { from { opacity: 0; transform: translate(-50%, -1rem) scale(.96); } to { opacity: 1; transform: translateX(-50%); } } /* ---- table effects (2026-09-30): the layer over everything, the jolts, the inventory in CS colours ---- */ .fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9990; pointer-events: none; } .fx-lot { position: fixed; z-index: 9991; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 .5rem 1rem rgba(0, 0, 0, .35)); } .fx-lot svg { display: block; } .fx-beam { position: fixed; z-index: 9989; pointer-events: none; opacity: 0; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(160, 255, 170, .75), rgba(160, 255, 170, .12)); filter: blur(1px); } .fx-glow { position: fixed; inset: 0; z-index: 9988; pointer-events: none; background: radial-gradient(60% 45% at 50% 42%, rgba(255, 214, 90, .45), rgba(255, 170, 0, .12) 55%, transparent 75%); } .fx-shake { animation: fxShake .45s ease; } .fx-dirty { animation: fxShake .45s ease; filter: saturate(.55) brightness(.85); box-shadow: 0 0 0 .25rem var(--fx-dirt, #6d4c41), 0 0 1rem var(--fx-dirt, #6d4c41) !important; } .fx-burn { animation: fxBurn .28s ease-in-out infinite alternate; } .fx-scared { animation: fxShiver .11s linear infinite; } .fx-king { filter: drop-shadow(0 0 .5rem #ffd54f) drop-shadow(0 0 1.25rem #ffb300); } .fx-quake { animation: fxQuake .6s ease; } @keyframes fxShake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-4deg); } 40% { transform: translateX(6px) rotate(4deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } @keyframes fxBurn { from { filter: drop-shadow(0 0 .375rem #ff9800) drop-shadow(0 0 .75rem #ff5722); } to { filter: drop-shadow(0 0 .75rem #ffc107) drop-shadow(0 0 1.5rem #ff3d00); } } @keyframes fxShiver { 0% { transform: translate(1px, 0); } 50% { transform: translate(-1px, 1px); } 100% { transform: translate(1px, -1px); } } @keyframes fxQuake { 0%, 100% { transform: none; } 15% { transform: translate(-8px, 4px); } 30% { transform: translate(7px, -5px); } 45% { transform: translate(-6px, -3px); } 60% { transform: translate(5px, 4px); } 75% { transform: translate(-3px, 2px); } } .dk-say .fxbtn { background: linear-gradient(135deg, #8847ff, #d32ce6); box-shadow: 0 0 .75rem rgba(211, 44, 230, .55); } /* the capsule in the lobby head */ .dk-head .fxcap { grid-column: 1 / -1; display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 2.75rem; padding: .375rem .75rem .375rem .375rem; border: 0; border-radius: 1rem; color: #fff; font: inherit; text-align: left; cursor: pointer; background: linear-gradient(135deg, rgba(136, 71, 255, .55), rgba(211, 44, 230, .45)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } .dk-head .fxcap .ic { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 1.05rem; } .dk-head .fxcap b { flex: 1; font-size: .875rem; } .dk-head .fxcap i { font-style: normal; font-size: .75rem; opacity: .8; } /* the inventory */ .fx-shop-head { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; align-items: baseline; margin-bottom: .75rem; } .fx-shop-head b { font-size: 1.125rem; font-weight: 800; } .fx-shop-head .cnt { font-style: normal; font-size: .8125rem; font-weight: 700; color: var(--hint, #8a8a8e); } .fx-shop-head span { grid-column: 1 / -1; font-size: .8125rem; line-height: 1.35; color: var(--hint, #8a8a8e); } .fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .fx-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .5rem .25rem .625rem; border: 0; border-radius: .75rem; overflow: hidden; color: #fff; font: inherit; cursor: pointer; background: linear-gradient(180deg, #2b303b, #1a1d24); box-shadow: inset 0 -.1875rem 0 var(--rc); } .fx-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 32%, var(--rc), transparent 62%); opacity: .38; pointer-events: none; } .fx-card > * { position: relative; } .fx-card.owned { box-shadow: inset 0 -.1875rem 0 var(--rc), inset 0 0 0 1.5px var(--rc); } .fx-card .pic { width: 3.25rem; height: 3.25rem; margin: .125rem 0 .25rem; } .fx-card .pic img { width: 100%; height: 100%; filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .45)); } .fx-card .nm { font-size: .75rem; font-weight: 700; line-height: 1.15; text-align: center; } .fx-card .rar { font-size: .625rem; font-weight: 700; color: var(--rc); text-transform: uppercase; letter-spacing: .03em; } .fx-card .pay, .fx-card .own { display: inline-flex; align-items: center; gap: .1875rem; margin-top: .25rem; height: 1.375rem; padding: 0 .5rem; border-radius: .6875rem; font-size: .75rem; font-weight: 800; } .fx-card .pay { background: linear-gradient(135deg, #ffcf40, #ff9f00); color: #3a2a00; } .fx-card .pay .star { width: .8125rem; height: .8125rem; } .fx-card .own { background: rgba(76, 217, 100, .2); color: #6ee787; } .fx-card[data-r="legend"]::after, .fx-card[data-r="mythic"]::after, .fx-card[data-r="gold"]::after, .fx-item[data-r="gold"] .stage::after, .fx-item[data-r="mythic"] .stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); background-size: 250% 100%; animation: fxShine 2.8s ease-in-out infinite; pointer-events: none; } @keyframes fxShine { from { background-position: 130% 0; } to { background-position: -130% 0; } } .fx-fine { margin-top: .75rem; font-size: .6875rem; line-height: 1.35; color: var(--hint, #8a8a8e); text-align: center; } /* one item */ .fx-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; } .fx-item .stage { position: relative; width: 100%; height: 12rem; border-radius: 1rem; overflow: hidden; background: linear-gradient(180deg, #262a33, #14161b); box-shadow: inset 0 -.25rem 0 var(--rc); } .fx-item .stage .glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, var(--rc), transparent 60%); opacity: .45; } .fx-item .stage .lot { position: absolute; left: 50%; top: 50%; width: 8rem; height: 8rem; transform: translate(-50%, -50%); } .fx-item .stage .dummy { position: absolute; right: .875rem; bottom: .875rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.5rem; background: rgba(255, 255, 255, .14); } .fx-item .rar { margin-top: .625rem; font-size: .6875rem; font-weight: 800; color: var(--rc); text-transform: uppercase; letter-spacing: .05em; } .fx-item .nm { font-size: 1.25rem; font-weight: 800; } .fx-item p { margin: 0 0 .5rem; font-size: .875rem; line-height: 1.35; color: var(--hint, #8a8a8e); } .fx-item .btn { width: 100%; } .fx-item .btn.buy { margin-top: .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; font-weight: 800; background: linear-gradient(135deg, #ffcf40, #ff9f00); color: #3a2a00; } .fx-item .btn.buy .star { width: 1.125rem; height: 1.125rem; } .fx-item .btn.buy.busy { opacity: .6; pointer-events: none; } .fx-item .have { margin-top: .5rem; font-size: .875rem; font-weight: 700; color: #34c759; } /* the picker at the table */ .fx-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; } .fx-pi { position: relative; display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .375rem .125rem; border: 0; border-radius: .75rem; font: inherit; color: inherit; cursor: pointer; background: rgba(127, 127, 127, .12); box-shadow: inset 0 -.125rem 0 var(--rc); } .fx-pi img { width: 2.5rem; height: 2.5rem; } .fx-pi .cap { display: inline-flex; align-items: center; gap: .125rem; font-size: .625rem; font-weight: 700; line-height: 1.1; text-align: center; } .fx-pi .cap .star { width: .6875rem; height: .6875rem; } .fx-pi.locked img { filter: grayscale(.85) opacity(.55); } .fx-pi.locked .cap { color: #e0a200; } .fx-pick .fx-more { width: 100%; margin-top: .625rem; } /* effects v2 (2026-09-30): the thrower glows with a chip over them, ✨ counts down, aiming by a tap, the real firework */ .fx-caster { animation: fxCaster .7s ease-in-out infinite alternate !important; } @keyframes fxCaster { from { box-shadow: 0 0 0 .1875rem var(--fx-c), 0 0 .75rem var(--fx-c); } to { box-shadow: 0 0 0 .3125rem var(--fx-c), 0 0 1.75rem var(--fx-c); } } .fx-chip { position: fixed; z-index: 9992; pointer-events: none; transform: translateX(-50%); padding: .25rem .625rem; border-radius: .875rem; background: rgba(12, 14, 20, .82); color: #fff; font-size: .75rem; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--fx-c), 0 .375rem 1rem rgba(0, 0, 0, .35); } .dk-say .fxbtn.cd { background: conic-gradient(#d32ce6 calc(var(--p, 0) * 360deg), rgba(255, 255, 255, .14) 0); box-shadow: none; font-size: .8125rem; font-weight: 800; color: #fff; } .fx-aim .opp .avatar, .fx-aim .dk-wait .seat.tap .avatar { animation: fxAimPulse .9s ease-in-out infinite alternate; } @keyframes fxAimPulse { from { box-shadow: 0 0 0 .1875rem #ffd54f; transform: scale(1); } to { box-shadow: 0 0 0 .3125rem #ffd54f, 0 0 1.25rem #ffb300; transform: scale(1.08); } } .fx-aimbar { position: fixed; z-index: 9993; left: 50%; bottom: calc(4.25rem + var(--safe-bottom, 0px)); transform: translateX(-50%); width: calc(100% - 1.5rem); max-width: 24rem; box-sizing: border-box; display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem .875rem; border-radius: 1rem; background: rgba(12, 14, 20, .9); color: #fff; font-size: .8125rem; font-weight: 700; box-shadow: 0 0 0 1.5px #ffd54f, 0 .5rem 1.5rem rgba(0, 0, 0, .4); animation: dkOthersIn .25s ease-out; } .fx-aimbar span { flex: 1; min-width: 0; } .fx-aimbar button { flex: none; height: 2rem; padding: 0 .75rem; border: 0; border-radius: 1rem; font: inherit; font-weight: 800; cursor: pointer; } .fx-aimbar .all { background: #ffd54f; color: #3a2a00; } .fx-aimbar .x { width: 2rem; padding: 0; background: rgba(255, 255, 255, .14); color: #fff; } .fx-fw { position: fixed; inset: 0; z-index: 9990; pointer-events: none; } .fx-fw canvas { z-index: 9990 !important; pointer-events: none !important; background: transparent !important; } /* aiming v2 (2026-09-30): its own layer — the table dims, the targets wiggle over it */ .fx-aim-layer { position: fixed; inset: 0; z-index: 9986; background: rgba(6, 10, 16, .62); opacity: 0; transition: opacity .16s ease; -webkit-tap-highlight-color: transparent; } .fx-aim-layer.on { opacity: 1; } .fx-aim-head { position: absolute; left: 50%; top: calc(var(--safe-top, 0px) + 5.5rem); transform: translateX(-50%); width: calc(100% - 2rem); max-width: 22rem; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .75rem 1rem; border-radius: 1.125rem; background: rgba(18, 20, 28, .95); color: #fff; box-shadow: 0 0 0 1.5px var(--rc), 0 .75rem 2rem rgba(0, 0, 0, .45); pointer-events: none; } .fx-aim-head img { grid-row: 1 / 3; width: 2.75rem; height: 2.75rem; animation: fxAimBob 1s ease-in-out infinite alternate; } .fx-aim-head b { font-size: 1.0625rem; font-weight: 800; } .fx-aim-head span { font-size: .8125rem; opacity: .75; } .fx-aim-t { position: absolute; width: var(--s); height: var(--s); margin: 0; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); cursor: pointer; animation: fxWiggle .32s ease-in-out infinite alternate; -webkit-tap-highlight-color: transparent; } .fx-aim-t .fx-aim-av { width: 100% !important; height: 100% !important; font-size: calc(var(--s) * .38) !important; box-shadow: 0 0 0 .25rem #ffd54f, 0 0 1.5rem rgba(255, 196, 0, .8); animation: fxAimRing .8s ease-in-out infinite alternate; } .fx-aim-t .nm { position: absolute; left: 50%; top: calc(100% + .5rem); transform: translateX(-50%); padding: .1875rem .5rem; border-radius: .625rem; background: #ffd54f; color: #3a2a00; font-size: .75rem; font-weight: 800; white-space: nowrap; } .fx-aim-t:active { animation: none; transform: translate(-50%, -50%) scale(.92); } .fx-aim-foot { position: absolute; left: 50%; bottom: calc(var(--safe-bottom, 0px) + 1.25rem); transform: translateX(-50%); width: calc(100% - 2rem); max-width: 22rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem; } .fx-aim-foot button { height: 3rem; padding: 0 1.125rem; border: 0; border-radius: 1rem; font: inherit; font-size: .9375rem; font-weight: 800; cursor: pointer; } .fx-aim-foot .all { background: linear-gradient(135deg, #ffd54f, #ffb300); color: #3a2a00; } .fx-aim-foot .x { background: rgba(255, 255, 255, .16); color: #fff; } @keyframes fxWiggle { 0% { transform: translate(-50%, -50%) rotate(-7deg) scale(1.04); } 100% { transform: translate(-50%, -50%) rotate(7deg) scale(1.1); } } @keyframes fxAimRing { from { box-shadow: 0 0 0 .1875rem #ffd54f, 0 0 .75rem rgba(255, 196, 0, .6); } to { box-shadow: 0 0 0 .375rem #ffd54f, 0 0 2rem rgba(255, 196, 0, .95); } } @keyframes fxAimBob { from { transform: translateY(-2px) rotate(-6deg); } to { transform: translateY(2px) rotate(6deg); } } /* aiming v2.1 (2026-09-30): round glow, no square behind it; the hint in the middle of the table, never over the players; 7 s bar */ .fx-aim-t { overflow: visible !important; border-radius: 50%; -webkit-appearance: none; appearance: none; background: transparent !important; box-shadow: none !important; } .fx-aim-t .fx-aim-av { border-radius: 50% !important; overflow: hidden !important; } .fx-aim-head { top: 50%; transform: translate(-50%, -50%); overflow: hidden; padding-bottom: 1rem; } .fx-aim-head .bar { position: absolute; left: 0; bottom: 0; height: .25rem; width: 100%; background: var(--rc); transform-origin: left center; animation: fxAimTime 7s linear forwards; } @keyframes fxAimTime { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* the saucer's light when it hovers right over a player (2026-09-30) */ .fx-ring { position: fixed; z-index: 9989; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(170, 255, 180, .7), rgba(120, 255, 150, .25) 55%, transparent 72%); box-shadow: 0 0 1.5rem rgba(140, 255, 160, .6); } /* the inventory, fixed height (2026-09-30, the user): the head stays, the grid scrolls inside; no shine sweeping over the top cards */ .fx-shop { display: flex; flex-direction: column; height: min(32rem, calc(100vh - 11rem)); min-height: 0; } .fx-shop .fx-shop-head, .fx-shop .fx-fine { flex: none; } .fx-shop .fx-grid { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .125rem .125rem .25rem; align-content: start; } .fx-card[data-r="legend"]::after, .fx-card[data-r="mythic"]::after, .fx-card[data-r="gold"]::after { content: none; animation: none; } .fx-shop .fx-grid { grid-auto-rows: max-content; } /* the cards clip their glow (overflow hidden), so auto rows shrank them to nothing in the fixed box */ /* the salute v3: a rocket with a tail (2026-09-30) */ .fx-rocket { position: fixed; z-index: 9990; pointer-events: none; width: 4px; height: 26px; margin-left: -2px; border-radius: 2px; background: linear-gradient(0deg, rgba(255, 200, 80, 0), #ffe082 60%, #fff); box-shadow: 0 0 .5rem #ffca28; } /* the inventory, compact (2026-09-30, the user): four across, smaller cards — all fifteen fit, no scrolling */ .fx-shop { height: auto; max-height: calc(100vh - 11rem); } .fx-shop .fx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; } .fx-shop .fx-card { padding: .375rem .1875rem .5rem; border-radius: .625rem; gap: 0; } .fx-shop .fx-card .pic { width: 2.375rem; height: 2.375rem; margin: .0625rem 0 .1875rem; } .fx-shop .fx-card .nm { font-size: .625rem; } .fx-shop .fx-card .rar { font-size: .5rem; } .fx-shop .fx-card .pay, .fx-shop .fx-card .own { height: 1.125rem; padding: 0 .375rem; margin-top: .1875rem; font-size: .625rem; } .fx-shop .fx-card .pay .star { width: .6875rem; height: .6875rem; } .fx-shop-head { margin-bottom: .5rem; } .fx-shop-head span { font-size: .75rem; } /* the pretend player on the item card */ .fx-item .stage .dummy { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: .25rem; background: none; border-radius: 0; font-size: inherit; } .fx-item .stage .dummy .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .35), 0 0 0 .1875rem rgba(255, 255, 255, .25); } .fx-item .stage .dummy .nm { font-size: .625rem; font-weight: 700; color: rgba(255, 255, 255, .85); } /* the item card v2 (2026-09-30): a full-bleed stage with two players, the show plays by itself; ✕ in the corner */ .modal-dialog.fx-modal { padding: 0 !important; overflow: hidden; } .modal-dialog.fx-modal .mbtns { display: none; } .fx-item.v2 { gap: 0; } .fx-item.v2 .stage { height: 15rem; border-radius: 0; box-shadow: inset 0 -.25rem 0 var(--rc); background: radial-gradient(120% 90% at 50% 20%, #2b2f3d, #111319 70%); } .fx-item.v2 .stage .glow { background: radial-gradient(circle at 50% 42%, var(--rc), transparent 58%); opacity: .5; } .fx-item.v2 .stage .sky { position: absolute; inset: 0; pointer-events: none; } .fx-item.v2 .stage .sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; transform: scale(var(--z, 1)); animation: fxTwinkle 3s ease-in-out infinite; } @keyframes fxTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: .9; } } .fx-item.v2 .stage .lot { top: 42%; width: 8.5rem; height: 8.5rem; transition: opacity .25s ease, transform .25s ease; } .fx-item.v2 .stage .lot.away { opacity: 0; transform: translate(-50%, -50%) scale(.6); } .fx-item.v2 .stage .who { position: absolute; bottom: .875rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; } .fx-item.v2 .stage .who.me { left: 1rem; } .fx-item.v2 .stage .who.foe { right: 1rem; } .fx-item.v2 .stage .who .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .4), 0 0 0 .1875rem rgba(255, 255, 255, .22); } .fx-item.v2 .stage .who .nm { font-size: .625rem; font-weight: 700; color: rgba(255, 255, 255, .85); } .fx-item.v2 .stage .x { position: absolute; top: .625rem; right: .625rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: .875rem; cursor: pointer; z-index: 2; } .fx-item.v2 .info { display: flex; flex-direction: column; align-items: center; padding: .875rem 1.25rem .25rem; text-align: center; } .fx-item.v2 .rar { margin: 0 0 .375rem; padding: .1875rem .625rem; border-radius: .75rem; background: var(--rc); color: #fff; font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .fx-item.v2 .nm { font-size: 1.375rem; font-weight: 800; line-height: 1.15; } .fx-item.v2 p { margin: .25rem 0 0; font-size: .875rem; line-height: 1.35; color: var(--hint, #8a8a8e); } .fx-item.v2 .acts { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem 1rem; } .fx-item.v2 .again { align-self: center; height: 2rem; padding: 0 .875rem; border: 0; border-radius: 1rem; background: rgba(127, 127, 127, .12); color: inherit; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; } .fx-item.v2 .btn.buy { margin: 0; height: 3.25rem; border-radius: 1rem; font-size: 1.0625rem; box-shadow: 0 .5rem 1.25rem rgba(255, 159, 0, .35); } .fx-item.v2 .have { margin: 0; padding: .75rem; border-radius: 1rem; background: rgba(52, 199, 89, .12); text-align: center; } /* the item card, compact bottom (2026-09-30, the user): name + rarity on one line, «назавжди» said plainly, ↻ and the button in one row */ .fx-item.v2 .stage { height: 13.5rem; } .fx-item.v2 .info { padding: .75rem 1rem 0; align-items: stretch; text-align: left; } .fx-item.v2 .info .line { display: flex; align-items: center; gap: .5rem; } .fx-item.v2 .info .line .nm { flex: 1; min-width: 0; font-size: 1.25rem; } .fx-item.v2 .info .line .rar { margin: 0; flex: none; } .fx-item.v2 .info p { margin: .125rem 0 0; font-size: .8125rem; } .fx-item.v2 .info .forever { margin-top: .5rem; padding: .5rem .625rem; border-radius: .75rem; background: color-mix(in srgb, var(--rc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 40%, transparent); font-size: .8125rem; font-weight: 700; line-height: 1.3; } .fx-item.v2 .acts { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: .5rem; padding: .625rem 1rem 1rem; } /* the catalogue button wraps onto its own full line under ↻ + buy (2026-09-30, the user) */ .fx-item.v2 .again { align-self: auto; flex: none; width: 3.25rem; height: 3.25rem; padding: 0; border-radius: 1rem; font-size: 1.375rem; font-weight: 800; } .fx-item.v2 .btn.buy, .fx-item.v2 .have { flex: 1; min-width: 0; } .fx-item.v2 .have { display: grid; place-items: center; padding: 0; height: 3.25rem; box-sizing: border-box; font-size: 1rem; font-weight: 800; } /* grid cards, compact (2026-09-30): the rarity is a small tag in the corner, not a line of its own */ .fx-shop .fx-card { padding-top: .875rem; } .fx-shop .fx-card .rar { position: absolute; top: .25rem; left: .25rem; padding: .0625rem .25rem; border-radius: .3125rem; background: var(--rc); color: #fff; font-size: .4375rem; letter-spacing: .02em; line-height: 1.3; } .fx-shop .fx-card .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* performance (2026-09-30, the user: «тормозит всю игру»): nothing that repaints every frame — no shadow filter on the living emoji, no animated box-shadow/filter; pulses are transforms (the compositor does them for free) */ .fx-lot { filter: none; contain: strict; } .fx-still { position: fixed; z-index: 9991; pointer-events: none; will-change: transform, opacity; } .fx-caster { animation: fxCasterPulse .6s ease-in-out infinite alternate !important; box-shadow: 0 0 0 .25rem var(--fx-c), 0 0 1rem var(--fx-c) !important; } @keyframes fxCasterPulse { from { transform: scale(1); } to { transform: scale(1.1); } } .fx-burn { animation: fxShiver .12s linear infinite; filter: drop-shadow(0 0 .5rem #ff9800); } .fx-aim-t .fx-aim-av { animation: none; box-shadow: 0 0 0 .3125rem #ffd54f, 0 0 1.25rem rgba(255, 196, 0, .85); } .fx-item.v2 .stage .sky i { animation-duration: 4s; } /* ✨ tapped too early: a red shake instead of a message (2026-09-30) */ .dk-say .fxbtn.fx-deny { animation: fxDeny .5s ease; box-shadow: 0 0 0 .1875rem #ff3b30, 0 0 .875rem rgba(255, 59, 48, .8) !important; background: #ff3b30 !important; } @keyframes fxDeny { 0%, 100% { transform: none; } 15% { transform: translateX(-5px) rotate(-8deg); } 30% { transform: translateX(5px) rotate(8deg); } 45% { transform: translateX(-4px) rotate(-5deg); } 60% { transform: translateX(3px) rotate(4deg); } 80% { transform: translateX(-1px); } } /* the canvas emoji fill their box */ .fx-lot canvas, .fx-item .stage .lot canvas { display: block; width: 100% !important; height: 100% !important; } /* ✨: a smooth ring for my cooldown instead of the stepping conic fill (2026-09-30) */ .dk-say .fxbtn { position: relative; } .dk-say .fxbtn .ic { position: relative; z-index: 1; } .dk-say .fxbtn .ring { position: absolute; inset: -.1875rem; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .dk-say .fxbtn .ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .dk-say .fxbtn .ring circle { fill: none; stroke: #d32ce6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; } .dk-say .fxbtn.cd.mine .ring { opacity: 1; } .dk-say .fxbtn.cd { background: rgba(255, 255, 255, .14) !important; box-shadow: none; } /* the bottom line of the table (2026-09-30, the user): a wide, raised ✨ pill; the free emoji scroll sideways; a wider field */ .dk-say { gap: .375rem; } .dk-say .fxbtn { flex: none; width: 3.5rem; height: 2.5rem; border-radius: 1.25rem; font-size: 1.375rem; background: linear-gradient(180deg, #c084ff 0%, #8f4dff 50%, #6a2bd9 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -.1875rem 0 rgba(40, 0, 90, .35), 0 .25rem .75rem rgba(136, 71, 255, .55) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .dk-say .fxbtn:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -.0625rem 0 rgba(40, 0, 90, .35), 0 .125rem .375rem rgba(136, 71, 255, .45) !important; } .dk-say .fxbtn.cd { background: linear-gradient(180deg, #6b5a8a, #4b3d66) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 .125rem .375rem rgba(0, 0, 0, .3) !important; font-size: 1rem; font-weight: 800; } .dk-say .fxbtn .ring { inset: -.125rem; } .dk-say .fxbtn .ring svg { transform: none; } .dk-say .fxbtn .ring rect { fill: none; stroke: #e07bff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; } .dk-say .emos { flex: 0 1 6.75rem; min-width: 0; display: flex; gap: .25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); padding: .125rem 0; } .dk-say .emos::-webkit-scrollbar { display: none; } .dk-say .emos .emo { flex: none; scroll-snap-align: start; } .dk-say input { flex: 1 1 auto; min-width: 7rem; } .dk-say .fxbtn.fx-deny.fx-deny { animation: fxDeny .5s ease; background: linear-gradient(180deg, #ff6b61, #d92c21) !important; box-shadow: 0 0 0 .1875rem #ff3b30, 0 0 1rem rgba(255, 59, 48, .85) !important; } .dk-say .emos { overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain; } /* sideways only (2026-09-30, the user: «только влево-вправо») */ /* ✨ inside the conversation's field (2026-09-30): a small raised purple pill, a smooth ring for the cooldown */ .composer .field .fxin { position: relative; flex: none; align-self: flex-end; width: 2.5rem; height: 2.125rem; margin: 0 .125rem .125rem; padding: 0; border: 0; border-radius: 1.0625rem; font-size: 1.125rem; line-height: 1; cursor: pointer; color: #fff; background: linear-gradient(180deg, #c084ff 0%, #8f4dff 50%, #6a2bd9 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -.125rem 0 rgba(40, 0, 90, .35), 0 .1875rem .5rem rgba(136, 71, 255, .45); } .composer .field .fxin[hidden] { display: none; } .composer .field .fxin .ic { position: relative; z-index: 1; } .composer .field .fxin:active { transform: translateY(1px) scale(.96); } .composer .field .fxin.cd { background: linear-gradient(180deg, #8d7fa8, #62557d); font-size: .8125rem; font-weight: 800; } .composer .field .fxin .ring { position: absolute; inset: -.1875rem; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .composer .field .fxin .ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .composer .field .fxin .ring circle { fill: none; stroke: #e07bff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; } .composer .field .fxin.cd.mine .ring { opacity: 1; } .composer .field .fxin.fx-deny { animation: fxDeny .5s ease; background: linear-gradient(180deg, #ff6b61, #d92c21); box-shadow: 0 0 0 .1875rem #ff3b30, 0 0 .875rem rgba(255, 59, 48, .8); } /* ✨ in the right corner of the field like Telegram's sticker button; «send» is folded away until there is something to send, then springs out to its right (2026-09-30, the user). Voice/video are off, so an empty field needs no button there. */ .composer .field .fxin { align-self: flex-end; margin: .3125rem .1875rem .3125rem .25rem; } .composer .field .main { transition: width .26s cubic-bezier(.2, .9, .3, 1.15), margin .26s cubic-bezier(.2, .9, .3, 1.15), opacity .18s ease, transform .32s cubic-bezier(.2, .9, .3, 1.4), background .18s ease, color .18s ease; } .composer .field .main:not(.send) { width: 0; margin-left: 0; margin-right: 0; opacity: 0; transform: scale(.3) rotate(-70deg); pointer-events: none; overflow: hidden; } /* the item card opened from a chat: the chat's ground and two bubbles instead of players (2026-09-30) */ .fx-item.v2 .stage.chat { background: none; box-shadow: inset 0 -.25rem 0 var(--rc); } .fx-item.v2 .stage.chat .chat-bg { position: absolute; inset: 0; z-index: 0; } .fx-item.v2 .stage.chat .lot { z-index: 1; } .fx-item.v2 .stage.chat .x { background: rgba(0, 0, 0, .28); } .fx-bub { position: absolute; z-index: 1; max-width: 62%; padding: .375rem .625rem; border-radius: 1rem; font-size: .8125rem; line-height: 1.3; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); } .fx-bub.in { left: .75rem; top: .875rem; background: var(--color-bubble-in, #fff); color: var(--color-text, #000); border-bottom-left-radius: .25rem; } .fx-bub.out { right: .75rem; bottom: .875rem; background: var(--color-bubble-out, #e1ffc7); color: var(--color-text, #000); border-bottom-right-radius: .25rem; } /* the effects grid shows it scrolls (2026-09-30) */ .fx-shop .fx-grid.more { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); } .fx-morehint { flex: none; height: 0; overflow: hidden; opacity: 0; text-align: center; font-size: .75rem; font-weight: 700; color: var(--color-primary, #3390ec); transition: height .2s ease, opacity .2s ease; } .fx-morehint.on { height: 1.25rem; opacity: 1; animation: fxHintBob 1.2s ease-in-out infinite; } @keyframes fxHintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* the buy button never breaks: one line, the price in its own pill, the text shrinks with the screen (2026-09-30) */ .fx-item.v2 .btn.buy { display: flex; align-items: center; justify-content: center; gap: .3125rem; min-width: 0; padding: 0 .625rem 0 .875rem; white-space: nowrap; overflow: hidden; font-size: clamp(.875rem, 4.2vw, 1.0625rem); } .fx-item.v2 .btn.buy .t, .fx-item.v2 .btn.buy .t2 { flex: none; } .fx-item.v2 .btn.buy .price { flex: none; display: inline-flex; align-items: center; gap: .1875rem; margin-left: .25rem; height: 1.875rem; padding: 0 .5rem 0 .625rem; border-radius: .9375rem; background: rgba(58, 42, 0, .14); font-weight: 900; } .fx-item.v2 .btn.buy .price .star { width: 1rem; height: 1rem; } @media (max-width: 350px) { .fx-item.v2 .btn.buy .t2 { display: none; } .fx-item.v2 .acts { padding-left: .75rem; padding-right: .75rem; } .fx-item.v2 .again { width: 2.875rem; } } /* big translucent layers animate opacity on their own GPU layer, never repainted per frame (2026-09-30, «з гальмуванням») */ .fx-glow, .fx-beam, .fx-ring { will-change: opacity, transform; contain: strict; } /* Telegram-style spoiler on a post photo (2026-09-30): blurred picture, two layers of drifting sparkles, a pill; a tap reveals */ .spoiler { position: relative; overflow: hidden; display: block; border-radius: inherit; } .spoiler > img { display: block; filter: blur(22px) brightness(.8); transform: scale(1.12); transition: filter .35s ease, transform .35s ease; } .spoiler .cover { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; background: rgba(0, 0, 0, .12); transition: opacity .35s ease; } .spoiler .cover::before, .spoiler .cover::after { content: ""; position: absolute; inset: -20%; pointer-events: none; will-change: transform; background-image: radial-gradient(circle, rgba(255, 255, 255, .95) 0 .8px, transparent 1.3px), radial-gradient(circle, rgba(255, 255, 255, .7) 0 .6px, transparent 1.1px); background-size: 9px 11px, 13px 7px; background-position: 0 0, 5px 3px; animation: spDrift 3.2s linear infinite; opacity: .85; } .spoiler .cover::after { background-size: 11px 13px, 7px 9px; animation-duration: 4.6s; animation-direction: reverse; opacity: .6; } @keyframes spDrift { from { transform: translate(0, 0); } to { transform: translate(18px, -22px); } } .spoiler .sp-pill { position: relative; z-index: 1; padding: .375rem .75rem; border-radius: 1rem; background: rgba(0, 0, 0, .45); color: #fff; font-size: .8125rem; font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .spoiler.open > img { filter: none; transform: none; } .spoiler.open .cover { opacity: 0; pointer-events: none; } /* the moderator sees the photo, framed red while it is under the spoiler */ .acard img.ph.sp-mark { outline: .1875rem solid #ff3b30; outline-offset: -.1875rem; } /* spoiler sparkles: uneven, like Telegram's — several dot layers with odd sizes so no grid shows (2026-09-30) */ .spoiler .cover::before { background-image: radial-gradient(circle, rgba(255,255,255,.95) 0 .7px, transparent 1.2px), radial-gradient(circle, rgba(255,255,255,.75) 0 .9px, transparent 1.4px), radial-gradient(circle, rgba(255,255,255,.55) 0 .6px, transparent 1.1px); background-size: 17px 23px, 29px 19px, 11px 37px; background-position: 3px 7px, 13px 2px, 7px 17px; animation-duration: 3.8s; } .spoiler .cover::after { background-image: radial-gradient(circle, rgba(255,255,255,.85) 0 .8px, transparent 1.3px), radial-gradient(circle, rgba(255,255,255,.6) 0 .6px, transparent 1.1px); background-size: 23px 31px, 37px 13px; background-position: 11px 5px, 2px 21px; animation-duration: 5.3s; } /* «● зараз у чаті» under the name when the other side has the chat open (2026-09-30) */ .hsub.here { color: #34c759 !important; font-weight: 600; } /* the header's back arrow on «Моя стіна» / «Запитання» (2026-09-30) */ #root-hdr .root-back { flex: none; margin-right: .125rem; } #root-hdr .root-back[hidden] { display: none; } #root-hdr .root-back:not([hidden]) ~ .htitle .hlogo { display: none; } /* admin «Stars · Емодзі»: totals and sales per item (2026-09-30) */ .st-fx { padding: .75rem .875rem; margin-bottom: .75rem; } .st-fx-top { font-weight: 800; margin-bottom: .375rem; } .st-fx-row { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; font-size: .875rem; border-top: .5px solid var(--color-separator, rgba(127,127,127,.2)); } /* the admin's gift picker: a picked card is ringed gold (2026-09-29) */ .fx-giftbox .fx-card.picked { box-shadow: inset 0 -.1875rem 0 var(--rc), 0 0 0 2.5px #ffd54f; transform: translateY(-2px); } .fx-giftbox .fx-card[disabled] { opacity: .55; } /* the admin's mark (2026-09-30): a blue verified-style badge after the name; with a label on the wall's own head; a gold ring at the table */ .adm-mark { display: inline-flex; align-items: center; gap: .1875rem; vertical-align: -.125em; margin-left: .25rem; flex: none; } .adm-mark svg { width: 1em; height: 1em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); } .adm-mark.with-label b { font-size: .6875rem; font-weight: 800; padding: .0625rem .375rem; border-radius: .5rem; background: linear-gradient(135deg, #1d9bf0, #0a6fd6); color: #fff; letter-spacing: .02em; } .avatar.is-admin { box-shadow: 0 0 0 .1875rem #ffd54f, 0 0 .75rem rgba(255, 196, 0, .75) !important; } /* the table is covered by another screen: its flying cards stay out of sight (2026-09-30) */ body.dk-covered .pc.fly, body.dk-covered .pc-flip { visibility: hidden !important; } /* «Хочу так само» after a free show (2026-09-30, the user: «не сильно явное»): a small dark pill over the composer or the table's say bar, the item's still picture and three words, a thin line in the item's rarity colour; slides up, goes in 7 s. */ .fx-tease { position: fixed; left: 50%; z-index: 9985; display: inline-flex; align-items: center; gap: .375rem; max-width: calc(100vw - 2rem); margin: 0; padding: .375rem .75rem .375rem .5rem; border: 1px solid color-mix(in srgb, var(--rc, #ffd54f) 55%, transparent); border-radius: 1.25rem; background: rgba(20, 22, 30, .82); color: #fff; font-family: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; box-shadow: 0 .375rem 1.25rem rgba(0, 0, 0, .35); opacity: 0; transform: translate(-50%, 10px) scale(.94); transition: opacity .24s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2); -webkit-tap-highlight-color: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .fx-tease.on { opacity: .94; transform: translate(-50%, 0) scale(1); } .fx-tease img { width: 1.375rem; height: 1.375rem; display: block; } .fx-tease span { letter-spacing: .01em; } .fx-lite .fx-tease { -webkit-backdrop-filter: none; backdrop-filter: none; } /* The lite tier (2026-09-30): nothing that re-rasters a moving face every frame */ .fx-lite .fx-burn { filter: none; } .fx-lite .fx-king { filter: none; box-shadow: 0 0 0 .1875rem #ffd54f; } .fx-lite .fx-dirty { filter: none; } .fx-lite .fx-caster { animation: none !important; } .fx-lite .fx-beam { filter: none; } /* who threw, whom it hit (2026-09-30): a ring in the item's rarity colour bursts out of the thrower and out of the target */ .fx-pulse { position: fixed; z-index: 9989; width: 4rem; height: 4rem; margin: 0; border-radius: 50%; border: .1875rem solid var(--rc, #ffd54f); box-shadow: 0 0 .75rem var(--rc, #ffd54f); pointer-events: none; will-change: transform, opacity; transform: translate(-50%, -50%) scale(.35); opacity: 0; } .fx-item.v2 .acts .allfx { flex: 1 0 100%; width: 100%; margin: 0; padding: .625rem; border: 0; border-radius: .875rem; background: rgba(127, 127, 127, .14); color: inherit; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; } /* back to the whole catalogue (2026-09-30, the user) */ .fx-tease { overflow: hidden; } .fx-tease .bar { position: absolute; left: 0; right: 0; bottom: 0; height: .1875rem; background: var(--rc, #ffd54f); transform-origin: 0 50%; transform: scaleX(1); opacity: .9; } /* the ten seconds it stays (2026-09-30, the user) */ /* The admin's mark, livelier (2026-09-30, the user: «подсветка Адмін как-то интереснее»): the check glows blue, the word sits on a blue-to-violet pill with a light sweeping over it every few seconds — one pseudo-element moved by transform, nothing repaints */ .adm-mark svg { filter: drop-shadow(0 0 .2rem rgba(29, 155, 240, .75)) drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); } .adm-mark.with-label b { position: relative; overflow: hidden; padding: .125rem .5rem; border-radius: .625rem; background: linear-gradient(135deg, #1d9bf0, #6a5cff 70%, #8f5cff); box-shadow: 0 0 .5rem rgba(60, 120, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35); text-transform: uppercase; letter-spacing: .06em; } .adm-mark.with-label b::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 45%; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%); transform: translateX(-120%) skewX(-18deg); animation: admShine 3.6s ease-in-out infinite; pointer-events: none; } @keyframes admShine { 0% { transform: translateX(-120%) skewX(-18deg); } 35%, 100% { transform: translateX(340%) skewX(-18deg); } } .fx-lite .adm-mark.with-label b::after { animation: none; } /* v3 (2026-09-30, the user: «просто букву А… маленькая иконка»): one round badge the size of a letter, no check, no word */ .adm-mark b, .adm-mark.with-label b { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; padding: 0; border-radius: 50%; background: linear-gradient(135deg, #1d9bf0, #6a5cff 70%, #8f5cff); color: #fff; font-size: .8em; font-weight: 900; line-height: 1; letter-spacing: 0; text-transform: none; box-shadow: 0 0 .4rem rgba(60, 120, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .35); } .adm-mark b::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 45%; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%); transform: translateX(-120%) skewX(-18deg); animation: admShine 3.6s ease-in-out infinite; pointer-events: none; } .fx-lite .adm-mark b::after { animation: none; } /* what the «А» is: the card behind a tap on it (2026-09-30, the user) */ .adm-mark { cursor: pointer; } .adm-about { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .5rem .25rem .25rem; text-align: center; } .adm-about .adm-mark.big { margin: 0; font-size: 2.5rem; } .adm-about > b { font-size: 1.0625rem; } .adm-about p { margin: 0; font-size: .9375rem; line-height: 1.4; color: var(--hint, #8a8f98); } /* the table's say bar as the offer (2026-09-30, the user): everything else in it hides for ten seconds */ .dk-say.tease > :not(.fx-tease-in) { display: none !important; } .dk-say .fx-tease-in { position: relative; overflow: hidden; flex: 1 1 auto; display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; margin: 0; padding: .375rem .875rem .5rem .625rem; border: 1px solid color-mix(in srgb, var(--rc, #ffd54f) 60%, transparent); border-radius: 1.375rem; background: linear-gradient(135deg, rgba(20, 22, 30, .9), color-mix(in srgb, var(--rc, #ffd54f) 22%, rgba(20, 22, 30, .9))); color: #fff; text-align: left; font-family: inherit; cursor: pointer; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .3); opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .26s cubic-bezier(.2, .9, .3, 1.2); -webkit-tap-highlight-color: transparent; } .dk-say .fx-tease-in.on { opacity: 1; transform: none; } .dk-say .fx-tease-in img { width: 2rem; height: 2rem; flex: none; filter: drop-shadow(0 0 .375rem var(--rc, #ffd54f)); } .dk-say .fx-tease-in .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; } .dk-say .fx-tease-in .tx b { font-size: .9375rem; font-weight: 700; } .dk-say .fx-tease-in .tx i { font-style: normal; font-size: .75rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-say .fx-tease-in .arr { flex: none; font-size: 1.375rem; opacity: .7; } .dk-say .fx-tease-in .bar { position: absolute; left: 0; right: 0; bottom: 0; height: .1875rem; background: var(--rc, #ffd54f); transform-origin: 0 50%; opacity: .95; } .fx-lite .dk-say .fx-tease-in img { filter: none; } .adm-mark b svg { width: 100%; height: 100%; display: block; font-family: inherit; } /* The giveaway (2026-10-01): the hub card and the page */ .hub-card.raffle { --hc-a: #ffd166; --hc-b: #e09b1a; --hc-c: #7a4a00; --hc-live: #fff3cc; } .hub-card .art.raffle { position: relative; display: flex; align-items: center; justify-content: center; } .hub-card .art.raffle .money { font-size: 2.75rem; filter: drop-shadow(0 .375rem .75rem rgba(0, 0, 0, .35)); transform: rotate(-12deg); } .hub-card .art.raffle .tick { position: absolute; right: .5rem; bottom: .375rem; font-size: 1.75rem; transform: rotate(14deg); filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .35)); } .raffle { display: flex; flex-direction: column; gap: .75rem; padding: .5rem 1rem 2rem; } .raffle .rf-hero { display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: 1.25rem 1rem; border-radius: 1.25rem; background: linear-gradient(135deg, #ffd166, #e09b1a 60%, #c4761a); color: #3a2300; text-align: center; box-shadow: 0 .5rem 1.5rem rgba(224, 155, 26, .35); } .raffle .rf-hero .k { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .8; } .raffle .rf-hero b { font-size: 2.5rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; } .raffle .rf-hero > span:last-child { font-size: .9375rem; font-weight: 600; } .raffle .rf-mine { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: 1rem; border-radius: 1.25rem; background: var(--color-bg-secondary, rgba(127, 127, 127, .12)); text-align: center; } .raffle .rf-mine .k { font-size: .8125rem; color: var(--color-text-secondary); } .raffle .rf-mine .n { font-size: 3rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; } .raffle .rf-mine .ok { color: #2f9963; font-weight: 700; } .raffle .rf-mine .hint, .raffle .hint { font-size: .8125rem; color: var(--color-text-secondary); margin: .25rem 0 0; line-height: 1.35; } .raffle .btn.rf-join { width: 100%; max-width: 20rem; margin-top: .25rem; font-size: 1.0625rem; font-weight: 800; background: linear-gradient(135deg, #ffd166, #e09b1a); color: #3a2300; } .raffle .card { padding: .875rem 1rem; } .raffle .card h3 { margin: 0 0 .5rem; font-size: 1rem; } .raffle .rf-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .375rem 0; border-top: 1px solid var(--color-separator, rgba(127, 127, 127, .18)); font-size: .9375rem; } .raffle .rf-row:first-of-type { border-top: 0; } .raffle .rf-row b { font-variant-numeric: tabular-nums; white-space: nowrap; } .raffle .rf-row b.ok { color: #2f9963; } .raffle .rf-how .rf-row b { min-width: 3rem; color: #e09b1a; } .raffle .rf-link { padding: .625rem .75rem; border-radius: .75rem; background: var(--color-bg-secondary, rgba(127, 127, 127, .12)); font-size: .8125rem; word-break: break-all; font-family: ui-monospace, Menlo, monospace; user-select: all; -webkit-user-select: all; } .raffle .rf-btns { display: flex; gap: .5rem; margin-top: .625rem; } .raffle .rf-btns .btn { flex: 1; } .raffle .rf-fair p { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--color-text-secondary); } .st-fx-row.tap { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } /* compact (2026-10-01, the user): the hub card at the others' height, the page in fewer blocks */ .hub-card.raffle .tx b { white-space: nowrap; } .hub-card .art.raffle { line-height: 1; } .hub-card .art.raffle .money, .hub-card .art.raffle .tick { line-height: 1; } .raffle { gap: .625rem; padding: .5rem .875rem 1.5rem; } .raffle .rf-hero { flex-direction: row; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1rem; text-align: left; } .raffle .rf-hero .l, .raffle .rf-hero .r { display: flex; flex-direction: column; gap: .125rem; } .raffle .rf-hero .r { align-items: flex-end; text-align: right; } .raffle .rf-hero b { font-size: 1.75rem; } .raffle .rf-hero .r b { font-size: 2rem; } .raffle .rf-hero span { font-size: .8125rem; font-weight: 600; opacity: .85; } .raffle .rf-hero > span:last-child { font-size: .8125rem; } .raffle .rf-ok { padding: .625rem .875rem; border-radius: .875rem; background: rgba(47, 153, 99, .14); color: #2f9963; font-weight: 700; font-size: .9375rem; text-align: center; } .raffle .btn.rf-join { max-width: none; margin: 0; } .raffle .card { padding: .625rem .875rem; } .raffle .card h3 { margin: 0 0 .25rem; font-size: .9375rem; } .raffle .rf-row { padding: .3rem 0; font-size: .875rem; } .raffle .hint { font-size: .75rem; } .raffle .rf-link { font-size: .75rem; padding: .5rem .625rem; } .raffle .rf-btns { margin-top: .5rem; } .raffle .rf-fair { margin: 0; padding: 0 .25rem; font-size: .75rem; line-height: 1.4; color: var(--color-text-secondary); } /* a short wall still scrolls far enough for the head to fold (2026-10-02, the user: «мало постов — не скролится») */ .layer[data-screen="askbox"] > .scroll > .ask-wallbg:last-child { box-sizing: border-box; min-height: calc(100% + var(--fold-room, 0px)); } #wall-ask > div:last-child { box-sizing: border-box; min-height: calc(100% + var(--fold-room, 0px)); } /* the letter's switch in the sheet (2026-10-02, v2): a track with a gradient thumb gliding under the chosen side; each side an icon, a word and a hint */ .qsheet .qsign { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: .375rem 1rem 0; padding: .25rem; border-radius: 1.125rem; background: color-mix(in srgb, var(--color-text) 7%, transparent); } .qsheet .qsign .thumb { position: absolute; top: .25rem; bottom: .25rem; left: .25rem; width: calc(50% - .25rem); border-radius: .9375rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); box-shadow: 0 .25rem .75rem rgba(90, 63, 214, .35); transition: transform .3s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .qsheet .qsign.signed .thumb { transform: translateX(100%); } .qsheet .qsign button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; margin: 0; padding: .375rem .5rem; border: 0; border-radius: .9375rem; background: transparent; color: var(--color-text-secondary); font: inherit; text-align: left; cursor: pointer; transition: color .22s ease; -webkit-tap-highlight-color: transparent; } .qsheet .qsign button i { font-style: normal; font-size: 1.25rem; line-height: 1; flex: none; } .qsheet .qsign button .w { display: flex; flex-direction: column; min-width: 0; } .qsheet .qsign button b { font-size: .875rem; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qsheet .qsign button span { font-size: .6875rem; line-height: 1.2; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qsheet .qsign button.on { color: #fff; } .qsheet .qsign button:active { transform: scale(.97); } /* two tiles in the head (2026-10-02): the row alone, each half the width */ .ask-top .ask-tiles.two .trow .tile { flex: 1; } /* folded, the two buttons keep their words (2026-10-02, the user: «текст чтоб оставался у кнопок»): small pills in the strip, not circles */ .ask-top.folded .ask-tiles.three.two .tile { width: auto; height: 1.875rem; padding: 0 .625rem 0 .5rem; border-radius: .9375rem; gap: .3rem; } .ask-top.folded .ask-tiles.three.two .tile span { display: inline; font-size: .75rem; font-weight: 700; white-space: nowrap; } .ask-top.folded .ask-tiles.three.two .tile svg { width: .9375rem; height: .9375rem; } /* a signed question (2026-10-02): the asker's name is a link to their wall */ .ask-it .qb b.tap, .acard.askq .head span.tap { cursor: pointer; text-decoration: underline dotted; text-underline-offset: .15em; } /* the two pills fit the strip on a 390 px phone (2026-10-02): tighter, smaller type, no cut words */ .ask-top.folded .ask-tiles.three.two { gap: .25rem; right: .625rem; } .ask-top.folded .ask-tiles.three.two .tile { height: 1.75rem; padding: 0 .5rem 0 .4375rem; gap: .25rem; } .ask-top.folded .ask-tiles.three.two .tile span { font-size: .6875rem; } .ask-top.folded .ask-tiles.three.two .tile svg { width: .875rem; height: .875rem; } /* the switch and the field as one box (2026-10-02, the user) */ .qsheet .qbox { border-radius: .875rem; background: var(--color-background-secondary); overflow: hidden; } .qsheet .qbox .qsign { margin: 0; padding: .25rem; border-radius: 0; background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); } .qsheet .qbox .qsign .thumb { top: .25rem; bottom: .25rem; left: .25rem; width: calc(50% - .25rem); border-radius: .625rem; } .qsheet .qbox textarea { border-radius: 0; background: transparent; } /* «Мої дописи» in the chats tab (2026-10-02): the post's words under the title, two lines */ .row-item .hint.post-brief { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } /* the contest «Найкращий допис» (2026-10-04) */ .hub-card.contest { --hc-a: #ffd166; --hc-b: #e09b1a; --hc-c: #7a4a00; --hc-live: #fff3cc; } .hub-card .art.contest { position: relative; display: flex; align-items: center; justify-content: center; } .hub-card .art.contest .money { font-size: 2.75rem; filter: drop-shadow(0 .375rem .75rem rgba(0, 0, 0, .35)); transform: rotate(-8deg); } .hub-card .art.contest .tick { position: absolute; right: .5rem; bottom: .375rem; font-size: 1.75rem; transform: rotate(14deg); filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .35)); } .wq-prio.wq-contest .ico { background: linear-gradient(135deg, #ffd166, #e09b1a); font-size: 1rem; } .wq-prio.wq-contest.on { background: rgba(255, 209, 102, .2); box-shadow: inset 0 0 0 .5px rgba(255, 209, 102, .55); } .wq-prio.wq-contest .t span.short { color: #ffd166; opacity: 1; font-weight: 600; } .wq-prio.wq-contest[hidden] { display: none; } .contest-pg .ct-quote { padding: .625rem .75rem; border-radius: .75rem; background: var(--color-bg-secondary, rgba(127, 127, 127, .12)); font-size: .875rem; line-height: 1.35; max-height: 6.5rem; overflow: hidden; white-space: pre-wrap; margin-bottom: .5rem; } .contest-pg .ct-step { display: flex; align-items: flex-start; gap: .625rem; padding: .5rem 0; border-top: 1px solid var(--color-separator, rgba(127, 127, 127, .18)); opacity: .55; } .contest-pg .ct-step.done, .contest-pg .ct-step.now { opacity: 1; } .contest-pg .ct-step > i { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .8125rem; font-weight: 700; background: rgba(127, 127, 127, .2); } .contest-pg .ct-step.done > i { background: #2f9963; color: #fff; } .contest-pg .ct-step.now > i { background: #e09b1a; color: #fff; } .contest-pg .ct-step b { display: block; font-size: .9375rem; } .contest-pg .ct-step span { display: block; font-size: .8125rem; color: var(--color-text-secondary); line-height: 1.3; } .contest-pg .ct-steps .btn { width: 100%; margin-top: .5rem; } .contest-pg .rf-how .rf-row { justify-content: flex-start; } .contest-pg .rf-how .rf-row b { min-width: 1.5rem; } .acard.contest { box-shadow: inset .1875rem 0 0 #e09b1a; } .acard .meta.contest-mark { color: #e09b1a; font-weight: 600; } /* the contest in the composer, second take: a chip in the card's bar, a note under the card */ .wp-bar .wp-contest { flex: none; height: 2.25rem; padding: 0 .625rem; border: 0; border-radius: 1.125rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 700; color: #b9770a; background: rgba(224, 155, 26, .16); position: relative; overflow: hidden; white-space: nowrap; } .wp-bar .wp-contest[hidden] { display: none; } .wp-bar .wp-contest i { font-style: normal; font-size: 1rem; } .wp-bar .wp-contest.on { padding: 0; width: 2.25rem; justify-content: center; background: linear-gradient(135deg, #ffd166, #e09b1a); box-shadow: 0 0 0 .125rem rgba(255, 209, 102, .35); } .wp-bar .wp-contest.taken { opacity: .5; } .wnote-contest { margin: .5rem 1rem 0; padding: .5rem .75rem; border-radius: .75rem; font-size: .75rem; line-height: 1.4; color: #8a5a00; background: rgba(224, 155, 26, .14); } .wnote-contest[hidden] { display: none; } .contest-pg .ct-fpost { padding: .625rem 0; border-top: 1px solid var(--color-separator, rgba(127, 127, 127, .18)); } .contest-pg .ct-fpost.mine, .contest-pg .ct-fpost.win { margin: 0 -.5rem; padding: .625rem .5rem; border-radius: .75rem; background: rgba(224, 155, 26, .12); border-top-color: transparent; } .contest-pg .ct-ftext { font-size: .9375rem; line-height: 1.4; white-space: pre-wrap; max-height: 7rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } .contest-pg .ct-ftext.open { max-height: none; -webkit-mask-image: none; mask-image: none; } .contest-pg .ct-ffoot { display: flex; align-items: center; gap: .5rem; margin-top: .375rem; font-size: .8125rem; color: var(--color-text-secondary); } .contest-pg .ct-ffoot > span { flex: 1; min-width: 0; } .contest-pg .ct-ffoot .ct-vote { background: linear-gradient(135deg, #ffd166, #e09b1a); color: #3a2300; font-weight: 700; } .contest-pg .ct-ffoot .ct-my { color: #2f9963; white-space: nowrap; } /* the contest: the bar over the footer, the mark in «Мої дописи» */ .contest-float { position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--tabbar-height) + var(--tabbar-gap) + var(--safe-bottom) + .375rem); z-index: 6; display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border: 0; border-radius: 1rem; text-align: left; color: #3a2300; background: linear-gradient(135deg, #ffd166, #e09b1a); box-shadow: 0 .25rem .875rem rgba(224, 155, 26, .45); font-size: .875rem; overflow: hidden; } .contest-float[hidden] { display: none; } .contest-float > i { font-style: normal; font-size: 1.375rem; flex: none; } .contest-float .grow { flex: 1; min-width: 0; } .contest-float b { display: block; font-size: .875rem; } .contest-float .cap { display: block; font-size: .75rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contest-float svg { flex: none; width: 1rem; height: 1rem; opacity: .7; } .contest-float.todo { animation: contest-glow 1.8s ease-in-out infinite; } @keyframes contest-glow { 0%, 100% { box-shadow: 0 .25rem .875rem rgba(224, 155, 26, .45); } 50% { box-shadow: 0 .25rem 1.5rem rgba(255, 209, 102, .95), 0 0 0 .1875rem rgba(255, 209, 102, .35); } } body.keyboard-visible .contest-float, body.ctx-open .contest-float { display: none; } .acard .paidmark.contestmark { background: linear-gradient(135deg, #ffd166, #e09b1a); color: #3a2300; padding: 0 .4375rem; } .acard .contest-line { display: flex; align-items: center; gap: .375rem; width: 100%; margin: .375rem 0 0; padding: .4375rem .625rem; border: 0; border-radius: .625rem; text-align: left; font-size: .8125rem; font-weight: 600; color: #8a5a00; background: rgba(224, 155, 26, .16); position: relative; overflow: hidden; } .acard .contest-line span { flex: 1; min-width: 0; } .acard .contest-line svg { flex: none; width: .875rem; height: .875rem; opacity: .7; } /* the admin's chips on the phone: all in sight, wrapped, nothing scrolls sideways (2026-10-04) */ .adm-nav, .adm-sub { flex-wrap: wrap; overflow: visible; row-gap: .3125rem; } .st-fx-row.ct-friend { font-size: .75rem; color: var(--color-text-secondary); padding-left: 1.25rem; } /* The contest bar sits right over the tab bar; everything else that is pinned over the tab bar (the wall's capsules, the write button, the search bar, the lists' bottom padding) counts its place from --tabbar-space, so the bar's height is added to that — they all move up together instead of hiding under it (2026-10-04). */ .contesting { --tabbar-space: calc(var(--tabbar-height) + var(--tabbar-gap) + var(--safe-bottom) + 3.625rem); } body.ownwall .contesting, body.keyboard-visible .contesting { --tabbar-space: calc(var(--tabbar-height) + var(--tabbar-gap) + var(--safe-bottom)); } body.ownwall .contest-float { display: none; } .contest-pg .ct-quote-w { margin-bottom: .5rem; } .contest-pg .ct-quote-w .ct-quote { margin-bottom: 0; } .contest-pg .ct-quote-w.long { cursor: pointer; } .contest-pg .ct-quote-w.long .ct-quote:not(.open) { -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); } .contest-pg .ct-quote.open { max-height: none; } .contest-pg .ct-more { display: block; margin-top: .25rem; font-size: .75rem; font-weight: 600; color: var(--color-primary); text-align: center; } .contest-pg .ct-more[hidden] { display: none; } /* long unbroken strings must wrap inside the contest page, never push it wider */ .contest-pg { min-width: 0; max-width: 100%; overflow-x: hidden; } .contest-pg .card, .contest-pg .ct-quote-w { min-width: 0; max-width: 100%; } .contest-pg .ct-quote, .contest-pg .ct-ftext, .contest-pg .hint, .contest-pg .rf-row span, .contest-pg .ct-step span { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } .contest-pg .ct-step > div { min-width: 0; flex: 1; } .contest-float .cap, .acard .contest-line span, .st-fx-row.ct-friend span { overflow-wrap: anywhere; } .contest-pg .ct-photo { display: block; width: 100%; max-height: 14rem; object-fit: cover; border-radius: .75rem; margin-bottom: .375rem; cursor: pointer; } .contest-pg .ct-photo-miss { padding: .5rem .75rem; border-radius: .75rem; margin-bottom: .375rem; font-size: .8125rem; color: var(--color-text-secondary); background: var(--color-bg-secondary, rgba(127, 127, 127, .12)); } /* the person's post on the contest page: folded by default — two lines, a small picture beside them */ .contest-pg .ct-quote-w { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; align-items: start; } .contest-pg .ct-quote-w > .ct-quote, .contest-pg .ct-quote-w > .ct-more { grid-column: 2; } .contest-pg .ct-quote-w > :first-child:not(.ct-quote) { grid-column: 1; grid-row: 1 / span 2; } .contest-pg .ct-quote-w:not(:has(.ct-photo, .ct-photo-miss)) > .ct-quote, .contest-pg .ct-quote-w:not(:has(.ct-photo, .ct-photo-miss)) > .ct-more { grid-column: 1 / -1; } .contest-pg .ct-quote-w .ct-quote { max-height: 3.5rem; padding: .5rem .625rem; } .contest-pg .ct-quote-w .ct-quote.open { max-height: none; } .contest-pg .ct-quote-w:not(.opened) .ct-photo { width: 3.5rem; height: 3.5rem; max-height: none; margin: 0; border-radius: .625rem; } .contest-pg .ct-quote-w:not(.opened) .ct-photo-miss { margin: 0; width: 3.5rem; height: 3.5rem; overflow: hidden; font-size: 0; display: grid; place-items: center; } .contest-pg .ct-quote-w:not(.opened) .ct-photo-miss::before { content: "📎"; font-size: 1.25rem; } .contest-pg .ct-quote-w.opened { display: block; } .contest-pg .ct-quote-w.opened .ct-photo { max-height: 22rem; object-fit: contain; } .contest-pg .ct-more { text-align: left; } .contest-pg .ct-next { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; } .contest-pg .ct-next .k { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #e09b1a; } .contest-pg .ct-next b { font-size: 1.25rem; line-height: 1.2; } .contest-pg .ct-next p { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--color-text-secondary); overflow-wrap: anywhere; } .contest-pg .ct-next .btn { width: 100%; margin-top: .625rem; font-size: 1.0625rem; font-weight: 800; } .contest-pg .ct-next.todo { box-shadow: inset 0 0 0 .125rem #e09b1a, 0 .25rem 1.25rem rgba(224, 155, 26, .25); } .contest-pg .ct-step .ct-share { flex: none; align-self: center; background: linear-gradient(135deg, #ffd166, #e09b1a); color: #3a2300; font-weight: 700; } .contest-pg .rf-how .rf-row:has(b:only-of-type) { align-items: flex-start; } .contest-pg .ct-next p.ct-how { margin-top: .375rem; padding: .5rem .625rem; border-radius: .625rem; font-size: .8125rem; background: rgba(224, 155, 26, .12); color: var(--color-text); } .acard.contest .ct-who { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--color-text); text-align: left; position: relative; overflow: hidden; } .acard.contest .ct-sub { display: block; width: 100%; border: 0; background: none; padding: .125rem 0; font-size: .8125rem; color: #2f9963; font-weight: 600; text-align: left; position: relative; overflow: hidden; overflow-wrap: anywhere; } .acard.contest .text { overflow-wrap: anywhere; cursor: pointer; } .acard.contest .pill.off { opacity: .45; } .wq-prio.muted { opacity: .55; } .wp-bar .cnt.fine { color: #2f9963; font-weight: 600; }