/* Shared backdrop for authentication and onboarding. */ :root { --entry-background: radial-gradient(90% 80% at 18% 50%, rgba(44, 71, 105, 0.28), transparent 66%), radial-gradient(70% 60% at 83% 10%, rgba(117, 75, 52, 0.16), transparent 62%), linear-gradient(145deg, #070a10 0%, #0a0e15 52%, #100d0d 100%); } @font-face { font-family:'Newsreader'; src:url('/assets/newsreader-latin-DBQoWVJ5.woff2') format('woff2'); font-weight:300 600; font-display:swap; } @font-face { font-family:'Instrument Sans'; src:url('/assets/instrument-sans-latin-CclBWeUS.woff2') format('woff2'); font-weight:400 700; font-display:swap; } .mp-auth-document { margin:0; background:#070a10; color:#eef1f5; } .mp-auth { position:fixed; inset:0; display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain; background:var(--entry-background); color:#eef1f5; color-scheme:dark; font-family:'Instrument Sans',sans-serif; user-select:text; -webkit-user-select:text; } .mp-auth__header { display:flex; justify-content:space-between; align-items:center; flex-shrink:0; gap:24px; padding:max(28px,env(safe-area-inset-top)) max(40px,env(safe-area-inset-right)) 20px max(40px,env(safe-area-inset-left)); } .platform-macos .mp-auth__header { padding-left:100px; } .mp-auth *, .mp-auth *::before, .mp-auth *::after { box-sizing:border-box; } .mp-auth__panel { width:min(100%,416px); margin:auto; padding:32px 28px max(64px,env(safe-area-inset-bottom)); flex-shrink:0; } .mp-auth__content { display:flex; flex-direction:column; align-items:stretch; animation:mp-auth-arrive 240ms ease-out; } .mp-auth button, .mp-auth input, .mp-auth a { font:inherit; } .mp-auth button { cursor:pointer; touch-action:manipulation; } .mp-auth button:disabled { opacity:.55; cursor:default; } .mp-auth :focus-visible { outline:2px solid #dce7f4; outline-offset:4px; } .mp-auth__title:focus { outline:none; } .mp-auth__title { margin:0 0 24px; font-family:'Newsreader',Georgia,serif; font-size:42px; font-weight:400; letter-spacing:-1.3px; line-height:1.06; color:#eef1f5; } .mp-auth__copy { margin:0 0 26px; font-size:14px; line-height:1.65; color:rgba(238,241,245,.7); } .mp-auth__social { display:grid; gap:10px; } .mp-auth__provider { display:flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:10px 14px; border:1px solid rgba(238,241,245,.14); border-radius:12px; color:#eef1f5; background:rgba(255,255,255,.065); font-size:14px!important; font-weight:500!important; transition:background 140ms,border-color 140ms; } .mp-auth__provider:hover { background:rgba(255,255,255,.11); border-color:rgba(238,241,245,.3); } .mp-auth__provider-mark { width:19px; height:19px; display:inline-flex; } .mp-auth__provider-mark svg { width:100%; height:100%; } .mp-auth__divider { display:flex; align-items:center; gap:14px; margin:21px 0 17px; color:rgba(238,241,245,.4); font-size:11px; text-transform:uppercase; letter-spacing:.13em; } .mp-auth__divider::before,.mp-auth__divider::after { content:''; height:1px; flex:1; background:rgba(238,241,245,.12); } .mp-auth__form { display:flex; flex-direction:column; gap:8px; } .mp-auth__label { font-size:12px; color:rgba(238,241,245,.72); } .mp-auth__input-wrap { position:relative; margin-bottom:7px; } .mp-auth__input { width:100%; min-height:48px; border-radius:11px; padding:12px 14px; border:1px solid rgba(238,241,245,.16); background:rgba(8,8,10,.25); color:#eef1f5; font-size:16px!important; line-height:1.3; user-select:text; -webkit-user-select:text; } .mp-auth input[type=password], .mp-auth input[name=password] { padding-right:66px; } .mp-auth__input:focus { border-color:#dce7f4; outline-offset:2px; } .mp-auth__show { position:absolute; right:8px; top:2px; min-width:44px; } .mp-auth__link { border:0; padding:8px 2px; min-height:44px; color:#dce7f4; text-decoration:underline; text-underline-offset:3px; background:transparent; font-size:12px!important; } .mp-auth__submit { min-height:49px; margin-top:6px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:#dce7f4; color:#10151d; font-size:14px!important; font-weight:600!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); } .mp-auth__submit:hover { background:#edf3fa; } .mp-auth__error { color:#ffbcb0; font-size:13px; line-height:1.5; margin:0; } .mp-auth__error:empty { display:none; } .mp-auth__switch { margin:16px 0 0; text-align:center; color:rgba(238,241,245,.57); font-size:12px; } .mp-auth__legal { margin:9px 0 0; text-align:center; font-size:10px; line-height:1.8; color:rgba(238,241,245,.4); } .mp-auth__legal a { color:inherit; text-underline-offset:3px; } .mp-auth__account { overflow-wrap:anywhere; font-size:14px; color:#dce7f4; } .mp-auth--native { padding-block:max(56px,env(safe-area-inset-top)) max(56px,env(safe-area-inset-bottom)); } .mp-auth--native .mp-auth__panel { text-align:center; padding-block:32px; } .mp-auth--native .mp-auth__title { margin-bottom:32px; } .mp-auth .mp-auth__welcome-brand { display:flex; justify-content:center; --brand-size:38px; --brand-mark-width:32px; --brand-mark-height:38px; } .mp-auth--native .mp-auth__submit { transition:background 160ms ease,transform 160ms ease; } .mp-auth--native .mp-auth__submit:active:not(:disabled) { transform:scale(.985); } @keyframes mp-auth-arrive { from { transform:translateY(7px); } to { transform:translateY(0); } } @media(max-width:540px) { .mp-auth__header { padding: max(16px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left)); } .mp-auth__panel { padding:28px max(24px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); } .mp-auth__title { font-size:38px; } } @media(max-height:620px) { .mp-auth__panel { margin:0 auto; padding-top:20px; } } @media(prefers-reduced-motion:reduce) { .mp-auth__content { animation:none; } .mp-auth--native .mp-auth__submit { transition:none; transform:none; } } /* Shared landing/app identity; surface classes may change size and placement. */ :root { --manyplace-brand-font: 'Newsreader', Georgia, serif; --manyplace-brand-color: #f4ecdf; } .manyplace-brand { display:inline-flex; align-items:flex-start; gap:var(--brand-gap,11px); color:var(--manyplace-brand-color); font-family:var(--manyplace-brand-font); font-size:var(--brand-size,24px); font-weight:400; letter-spacing:-.025em; line-height:1.2; } .manyplace-brand__mark { width:var(--brand-mark-width,22px); height:var(--brand-mark-height,26px); flex:none; overflow:visible; } .manyplace-brand__text { transform:translateY(.085em); } .manyplace-brand__suffix { font-family:'Instrument Sans',sans-serif; letter-spacing:0; } .profile-panel__brand { --brand-size:10.5px; --brand-gap:5px; --brand-mark-width:10px; --brand-mark-height:12px; } /* Shared backdrop for authentication and onboarding. */ :root { --entry-background: radial-gradient(90% 80% at 18% 50%, rgba(44, 71, 105, 0.28), transparent 66%), radial-gradient(70% 60% at 83% 10%, rgba(117, 75, 52, 0.16), transparent 62%), linear-gradient(145deg, #070a10 0%, #0a0e15 52%, #100d0d 100%); } /* Canonical panel material, shared by landing and app. */ :root { --panel-tint-a: rgba(29, 24, 21, 0.3); --panel-tint-b: rgba(19, 16, 15, 0.41); --panel-filter: blur(34px) saturate(180%) brightness(1.14); --panel-rim: linear-gradient( 158deg, rgba(255, 255, 255, 0.7), rgba(206, 226, 255, 0.18) 28%, rgba(255, 255, 255, 0.06) 54%, rgba(255, 222, 182, 0.22) 78%, rgba(255, 255, 255, 0.4) ); /* Cheap insurance now that more of the room comes through: what is behind this text is a painting nobody controls. */ --panel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.36); --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), 0 18px 44px -14px rgba(0, 0, 0, 0.42), 0 40px 96px -30px rgba(0, 0, 0, 0.44); } .platform-web { --panel-tint-a: rgba(30, 25, 22, 0.38); --panel-tint-b: rgba(20, 17, 16, 0.49); --panel-filter: blur(31px) saturate(173%) brightness(1.12); } @media (max-resolution: 1.25dppx) { .platform-web { --panel-tint-a: rgba(31, 26, 23, 0.6); --panel-tint-b: rgba(21, 18, 17, 0.7); --panel-filter: blur(17px) saturate(160%) brightness(1.08); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --panel-tint-a: rgba(37, 30, 26, 0.955); --panel-tint-b: rgba(24, 20, 18, 0.975); } } /* --------------------------------------------------------------------------- Manyplace — chrome for a room you sit in, not an app you operate. The painting carries the visual richness. Everything here stays quiet: glass that borrows the room's lamplight, and nothing that asks to be looked at. --------------------------------------------------------------------------- */ @font-face { font-family: 'Newsreader'; src: url('/runtime/0.1.10-9f2371614f0b/fonts/newsreader-latin.woff2') format('woff2'); font-weight: 300 600; font-style: normal; /* `swap`, never `block`: a room that shows no text for three seconds on a cold start is worse than one that briefly falls back to a system serif. */ font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/runtime/0.1.10-9f2371614f0b/fonts/instrument-sans-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; /* `swap`, never `block`: a room that shows no text for three seconds on a cold start is worse than one that briefly falls back to a system serif. */ font-display: swap; } :root { /* Ink is warm, never pure white — the room is lit by tungsten, not daylight. */ --ink: #f4efe7; --ink-soft: rgba(244, 239, 231, 0.58); --ink-faint: rgba(244, 239, 231, 0.34); /* The single accent, borrowed from the lamps. Reserved for *you* — never spent on anyone else, so the eye always knows which one it is. */ --lamp: #f2b45c; --glass-bg: rgba(26, 22, 20, 0.5); --glass-edge: rgba(255, 255, 255, 0.1); --glass-lip: rgba(255, 255, 255, 0.16); --glass-blur: 32px; /* Enough to soften what is behind, not enough to erase it. At 60px the pill went completely flat and read as painted plastic: you could not see *through* it, and seeing through is the whole cue. */ --bar-blur: 24px; --bar-h: 46px; --bar-inset: 14px; /* Cleared for the OS window controls. macOS floats its traffic lights over the content, so the bar starts to their right. */ --chrome-left: 14px; --radius: 15px; --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif; color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: #0b0908; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-ui); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* A room is not a document: nothing here is selectable or draggable. */ user-select: none; -webkit-user-select: none; cursor: default; } img { -webkit-user-drag: none; } /* iOS otherwise treats the room as a photograph: holding the painting opens Share / Save to Photos and tears the person out of the spatial interaction. Scope this to scenery and seated portraits so editable text and real links retain their native long-press affordances. */ #plate, #environment, #stage canvas, #stage video, .seat__disc { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Layer order, in one place. Everything painted over the plate needs an explicit z-index, because an explicit one beats DOM order however late a thing is appended. The ambient layers have carried 1-4 since they were written, which quietly meant the star canvas (inset: 0, z-index: 4) was painting over the top bar, over the people, and over anything else added afterwards without one. 1-4 ambient: sky, foliage, glows, point canvas 6 scrim under the top bar 10 occupants 11 empty-seat slots 36 hover card while visible — deliberate focus temporarily rises above spatial speech 34 room messages 35 gestures in flight and at rest 40 lately 50 bars 60 modal scrim #vignette is deliberately left below the ambient layers: it deepens the painting's corners, and lamplight should not be dimmed by it. */ /* --- the room ------------------------------------------------------------ */ #stage { position: fixed; inset: 0; overflow: hidden; } /* The conversation lens is a body-level sibling, while room decisions live inside this fixed stacking context. Lift the context for the full lifetime of a decision (including its exit animation), so the lens cannot cover or intercept any of the choices. The safety dialog still owns the top layer. */ #stage:has(> .ask-scrim) { z-index: 110; } /* Positioned explicitly from coverRect() rather than object-fit, so the plate and the avatars sitting on it derive from one identical source of truth. Retina keeps the transform path; at standard density Stage writes final, physically snapped bounds to avoid WKWebView's retained-image softness. */ /* Deliberately *not* `will-change: transform` — promoting the plate to its own compositing layer makes the bars' backdrop-filter sample a stale copy and ghost. The transform only changes on window resize, so there is nothing to optimise here anyway. */ #plate { position: absolute; max-width: none; transform-origin: top left; } /* One transparent low-power surface for curated semantic materials. The exact room plate remains underneath as loading, reduced-motion, and WebGL fallback. */ #environment { position: absolute; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 210ms ease; } #environment.environment--visible { opacity: 1; } /* A scrim under the top bar's band. The bar's appearance was entirely at the mercy of whatever the plate happened to put behind it, and that changes with window shape: coverRect() re-crops the plate, so a wide-short window pushes the horizon up into the bar's band. Over the ceiling it read as glass; across the sunset it read as a smear, with the mullions still countable through it. This makes the backdrop predictable whatever the painting is doing. It also gives the macOS traffic lights something even to sit on, instead of arbitrary artwork. The cost is a very slight darkening along the top edge, always. */ #top-scrim, .crossing__top-scrim { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 120px; pointer-events: none; background: linear-gradient( to bottom, rgba(8, 6, 5, 0.3), rgba(8, 6, 5, 0.14) 55%, transparent 100% ); /* Weighted left: the bar occupies the left third now, and so do the traffic lights. The rest of the painting keeps its own top edge. */ -webkit-mask-image: linear-gradient(to right, #000 0, #000 32%, transparent 62%); mask-image: linear-gradient(to right, #000 0, #000 32%, transparent 62%); } /* Deepens the corners so the glass has something to sit against. Barely there. */ #vignette, .crossing__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 118% 88% at 50% 44%, transparent 44%, rgba(6, 4, 3, 0.26) 82%, rgba(6, 4, 3, 0.52) 100% ); } /* --- glass --------------------------------------------------------------- */ /* One material for every surface the top bar opens. The room-activity panel, the music controls and the leave confirmation were three different recipes — and on web the browser-safe block turned two of them into 0.91-0.97 opaque cards at blur(20px) with no brightness, which is the grey-plastic recipe this app spent a long time getting away from. Held as properties rather than repeated, so the tiers are one edit each and nothing can drift again. */ .glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(165%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%); border: 1px solid var(--glass-edge); border-radius: var(--radius); /* The inner top lip is what separates glass from a grey rectangle: a real pane catches a line of light along its upper edge. */ box-shadow: inset 0 1px 0 var(--glass-lip), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 10px 34px rgba(0, 0, 0, 0.3); } /* The bar: a pill, not a band. It used to span the window, so it read as a slab laid across the painting. With no `right` and no width, an absolutely positioned flex box shrinks to fit its contents. */ .bar { position: absolute; z-index: 50; left: var(--bar-inset); height: var(--bar-h); display: flex; align-items: center; gap: 12px; padding: 0 7px 0 17px; } /* Liquid glass. The previous surface was a 50%-opaque dark fill, which is why it read as grey plastic. Three things make it glass instead: 1. `brightness()` on the backdrop. This is the one that matters — it makes the pill look *lit from behind* rather than painted over. Without it no amount of blur reads as glass. 2. A white tint at low alpha with high saturation, rather than a dark fill. Real glass has no colour of its own; it takes the room's. Keeping the tint light and the saturation high is what lets the ceiling's blue and the lamps' amber come through as themselves. If this ever starts looking like a grey card, the fix is *less tint and more saturate*, never a darker fill. 3. A gradient rim, brightest along the top. Done with a transparent border and two backgrounds rather than a mask, because `mask-composite` keywords differ between engines and WKWebView is the target. True edge refraction would need feDisplacementMap on the backdrop, which WKWebView does not support. The rim and the brightness are the honest approximation. */ #top-bar { top: var(--bar-inset); left: var(--chrome-left); /* Only ever used on arrival — see `.room--arriving`. */ transition: opacity 420ms ease, transform 520ms cubic-bezier(0.16, 0.72, 0.25, 1); border-radius: 999px; } .platform-macos { --chrome-left: 88px; } /* --- top bar contents ---------------------------------------------------- */ .room-glyph { width: 19px; height: 19px; color: var(--ink-soft); flex: none; } /* An instruction while a mode is running, in the slot the session used to hold. Nothing else in the bar ever speaks. */ .bar__prompt { font-size: 13px; color: var(--ink-faint); white-space: nowrap; } .move-prompt-mobile { display: none; } .bar__prompt[hidden] { display: none; } /* --- lately -------------------------------------------------------------- */ /* Circular, like the reference's tab items — a light capsule appears under the pointer rather than a square tint. */ /* `display: grid` below outranks the UA's `[hidden]`; without this a hidden control keeps its seat in the bar. */ .icon-btn[hidden] { display: none; } .icon-btn { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: transparent; /* All three marks belong to one piece of chrome. At the old faint value the music mark looked live while Lately and Exit looked disabled. */ color: rgba(244, 239, 231, 0.62); cursor: default; transition: background-color 160ms ease, color 160ms ease; } .icon-btn:hover { background: rgba(255, 255, 255, 0.13); color: var(--ink); } .icon-btn__glyph { width: 18.5px; height: 18.5px; transition: opacity 220ms ease; } /* Chat state lives in the icon: speech lines fill the bubble while chat is on — whatever stage it has settled into — and drain from it when chat is off, leaving an empty, quieter bubble. No slash: off is a legitimate choice for silence, not an error to be struck through. */ .icon-btn__speech-line { opacity: 1; transition: opacity 220ms ease; } .icon-btn--chat-off .icon-btn__speech-line { opacity: 0; } .icon-btn--chat-off .icon-btn__glyph { opacity: 0.55; } /* Muting is a state, not a disabled control: quieter, but still plainly there. */ .icon-btn--sound.icon-btn--muted { color: rgba(244, 239, 231, 0.42); } .icon-btn--sound:focus-visible, .volume-popover__mute:focus-visible, .volume-popover__disclose:focus-visible, .volume-popover__range:focus-visible { outline: 1px solid rgba(255, 222, 174, 0.78); outline-offset: 2px; } /* A tiny instrument panel, not a player. Two faders and three small moments; no heading, no numbers — the glyphs carry the words on hover. */ .volume-popover { position: absolute; z-index: 51; width: 238px; padding: 13px 14px 12px; border: 1px solid transparent; border-radius: 16px; backdrop-filter: var(--panel-filter); -webkit-backdrop-filter: var(--panel-filter); background: linear-gradient(158deg, var(--panel-tint-a), var(--panel-tint-b)) padding-box, var(--panel-rim) border-box; box-shadow: var(--panel-shadow); transform-origin: 34px -8px; animation: volume-popover-in 150ms cubic-bezier(0.2, 0.7, 0.2, 1); } .volume-popover[hidden] { display: none; } @keyframes volume-popover-in { from { opacity: 0; transform: translateY(-3px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .volume-popover__row { display: flex; align-items: center; gap: 11px; } .volume-popover__row + .volume-popover__row { margin-top: 10px; } /* A muted channel keeps its place: the track ghosts and the thumb hollows — "your level is kept, just not sounding" — and unmuting returns exactly there. */ .volume-popover__row--muted .volume-popover__slider { opacity: 0.42; } .volume-popover__row--muted .volume-popover__range::-webkit-slider-thumb { background: transparent; border-color: rgba(244, 239, 231, 0.62); box-shadow: none; } .volume-popover__row--muted .volume-popover__range::-moz-range-thumb { background: transparent; border-color: rgba(244, 239, 231, 0.62); box-shadow: none; } .volume-popover__mute { position: relative; display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.075); color: var(--ink-soft); transition: color 150ms ease, background-color 150ms ease; } /* A silenced mark wears the slash — the same vocabulary everywhere. */ .volume-popover__mute--off { color: rgba(244, 239, 231, 0.34); } .volume-popover__mute--off::before { content: ''; position: absolute; left: 50%; top: 50%; width: 17px; height: 1.2px; transform: translate(-50%, -50%) rotate(-45deg); border-radius: 1px; background: rgba(244, 239, 231, 0.52); pointer-events: none; } /* A mark's name floats beside it on hover; nothing else ever moves. */ .volume-popover__word { position: absolute; left: calc(100% + 6px); top: 50%; z-index: 1; transform: translateY(-50%); padding: 3px 8px; border-radius: 999px; background: rgba(46, 40, 38, 0.92); color: rgba(244, 239, 231, 0.72); font-family: var(--font-ui); font-size: 10.5px; letter-spacing: 0.02em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 140ms ease; } .volume-popover__mute:hover .volume-popover__word, .volume-popover__mute:focus-visible .volume-popover__word { opacity: 1; } .volume-popover__mute:hover { color: var(--ink); background: rgba(255, 255, 255, 0.13); } .volume-popover__glyph { width: 16px; height: 16px; } .volume-popover__slider { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; } /* The authored default is a contextual calibration point, not permanent room furniture. Its dot appears only while this fader is being considered; the drag detent still catches there whether or not the dot is visible. */ .volume-popover__notch { position: absolute; top: calc(50% + 5px); width: 3px; height: 3px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(244, 239, 231, 0.46); opacity: 0; pointer-events: none; transition: opacity 120ms ease; } .volume-popover__slider:hover .volume-popover__notch, .volume-popover__slider:focus-within .volume-popover__notch { opacity: 1; } .volume-popover__notch-label { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 3px 7px; border-radius: 999px; background: rgba(46, 40, 38, 0.94); color: rgba(244, 239, 231, 0.68); font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.01em; white-space: nowrap; opacity: 0; transition: opacity 120ms ease; } /* Defaults at the right endpoint keep their pill inside the panel. */ .volume-popover__notch--end .volume-popover__notch-label { right: -2px; left: auto; transform: none; } .volume-popover__range[data-at-default='true']:active + .volume-popover__notch .volume-popover__notch-label, .volume-popover__range[data-at-default='true']:focus-visible + .volume-popover__notch .volume-popover__notch-label { opacity: 1; } /* The explicit ask, on the master it expands: click to unfold the trims, click to fold them back. It flips while open — the one disclosure here, and it tells the truth. Collapsed, the group is one object: no orphaned marks, no half-shown state. */ /* The disclosure's column exists on every row — empty where there is no disclosure — so all tracks share the same endpoints. */ .volume-popover__tail { width: 22px; flex: none; } .volume-popover__disclose { display: grid; place-items: center; width: 22px; height: 24px; flex: none; border: 0; border-radius: 999px; background: transparent; color: rgba(244, 239, 231, 0.4); transition: color 150ms ease, background-color 150ms ease; } .volume-popover__disclose:hover, .volume-popover__disclose:focus-visible { color: var(--ink); background: rgba(255, 255, 255, 0.075); outline: 0; } .volume-popover__disclose-glyph { width: 12px; height: 12px; transition: transform 170ms cubic-bezier(0.2, 0.7, 0.2, 1); } .volume-popover__disclose[aria-expanded='true'] .volume-popover__disclose-glyph { transform: rotate(180deg); } .volume-popover__bloom { margin-top: 10px; padding-left: 39px; animation: volume-popover-in 150ms cubic-bezier(0.2, 0.7, 0.2, 1); } .volume-popover__bloom[hidden] { display: none; } /* Children keep their settings under a muted parent; they only dim. */ .volume-popover__bloom--parent-muted { opacity: 0.5; } .volume-popover__row--small + .volume-popover__row--small { margin-top: 5px; } .volume-popover__row--small { gap: 9px; } .volume-popover__row--small .volume-popover__mute { width: 24px; height: 24px; background: transparent; } .volume-popover__row--small .volume-popover__mute--off::before { width: 15px; } .volume-popover__row--small .volume-popover__glyph { width: 14px; height: 14px; } .volume-popover__row--small .volume-popover__range { height: 16px; } .volume-popover__range { --range-fill: 32%; width: 100%; height: 18px; border: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none; } .volume-popover__range::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: linear-gradient( to right, rgba(255, 223, 181, 0.78) 0 var(--range-fill), rgba(244, 239, 231, 0.18) var(--range-fill) 100% ); } .volume-popover__range::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 50%; background: #f1ded0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.48); appearance: none; -webkit-appearance: none; } /* Once the label fades, the ring quietly confirms that the thumb is resting on the authored level. Position may differ by source; the vocabulary does not. */ .volume-popover__range[data-at-default='true']::-webkit-slider-thumb { box-shadow: 0 0 0 2px rgba(255, 222, 174, 0.3), 0 1px 5px rgba(0, 0, 0, 0.48); } .volume-popover__range::-moz-range-track { height: 3px; border-radius: 999px; background: rgba(244, 239, 231, 0.18); } .volume-popover__range::-moz-range-progress { height: 3px; border-radius: 999px; background: rgba(255, 223, 181, 0.78); } .volume-popover__range::-moz-range-thumb { width: 12px; height: 12px; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 50%; background: #f1ded0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.48); } .volume-popover__range[data-at-default='true']::-moz-range-thumb { box-shadow: 0 0 0 2px rgba(255, 222, 174, 0.3), 0 1px 5px rgba(0, 0, 0, 0.48); } @media (prefers-reduced-motion: reduce) { .volume-popover, .volume-popover__bloom { animation: none; } } /* Leaving is not a dangerous act, so this never turns red — it just warms slightly, the way everything else here does. */ .icon-btn--exit:hover { color: var(--lamp); } /* A dot, never a number. It marks personal gestures and new room messages; greetings alone remain too ambient to light it. */ .lately-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 2px rgba(20, 16, 14, 0.55); } .lately-dot[hidden] { display: none; } /* Position comes from the button that opened it, set in room/index.ts. Same glass family as the pill so the chrome reads as one set of objects, but tinted a touch deeper: this one carries text you actually read. */ .lately { position: absolute; width: 326px; padding: 15px 6px 9px; z-index: 40; border: 1px solid transparent; border-radius: 18px; backdrop-filter: blur(26px) saturate(150%) brightness(1.05); -webkit-backdrop-filter: blur(26px) saturate(150%) brightness(1.05); background: linear-gradient(rgba(22, 18, 16, 0.62), rgba(22, 18, 16, 0.72)) padding-box, linear-gradient( 160deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.22) ) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 12px 38px rgba(0, 0, 0, 0.42); } .lately__title { font-family: var(--font-display); font-variation-settings: 'opsz' 24; font-size: 15px; font-weight: 500; color: var(--ink-soft); padding: 0 12px 10px; } /* Capped rather than growing without limit. A dozen entries would run the panel most of the way down the window, which stops reading as a small record and starts reading as a feed — the exact thing this is not. The title stays put above the scroll, so the panel keeps its shape however much is in it. */ .lately__rows { display: flex; flex-direction: column; max-height: min(310px, calc(100vh - 190px)); overflow-y: auto; /* Never hand a scroll gesture through to whatever is behind the panel. */ overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(244, 239, 231, 0.22) transparent; } .lately__rows::-webkit-scrollbar { width: 7px; } .lately__rows::-webkit-scrollbar-track { background: transparent; } .lately__rows::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(244, 239, 231, 0.18); } .lately__rows:hover::-webkit-scrollbar-thumb { background: rgba(244, 239, 231, 0.3); } /* Aligned to the first line, not the block centre. A name long enough to wrap used to leave the face and the glyph floating beside the middle of two lines, which made every row a slightly different shape. */ .lately__row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; } /* Room-wide entries are background, not post: no face, and visibly quieter — something heard across the room rather than said to you. */ .lately__row--room { opacity: 0.62; } .lately__face { width: 26px; height: 26px; margin-top: 1px; flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 11px; font-weight: 550; color: var(--ink); background: rgba(255, 255, 255, 0.09); filter: var(--avatar-filter, none); } /* Holds the column so the glyphs stay aligned whether or not there is a face. */ .lately__face--none { background: transparent; } .lately__glyph { width: 15px; height: 15px; margin-top: 6px; flex: none; color: var(--lamp); } .lately__what { font-size: 13px; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; word-break: normal; } .lately__text { min-width: 0; flex: 1; } .lately__when { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; } /* What people see most of the time, so it must not feel like a wasted trip. Not "no notifications", not an illustration, not an exclamation. */ .lately__empty { padding: 2px 12px 8px; font-size: 13px; color: var(--ink-faint); } /* Messages carry more language than gestures, but not more urgency. The face and name establish who spoke; the room itself remains visible between rows. */ .lately__row--message { position: relative; gap: 10px; padding-right: 42px; opacity: 1; transition: background-color 260ms ease; } .lately__row--focused { background: linear-gradient(90deg, rgba(242, 180, 92, 0.12), transparent 88%); } .lately__row--menu-open { background: linear-gradient(90deg, rgba(242, 180, 92, 0.095), transparent 92%); } .lately__message-head { display: flex; align-items: baseline; gap: 7px; min-width: 0; } .lately__message-name { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: 12px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; } .lately__message-head .lately__when { flex: none; margin: 0; font-size: 10.5px; } .lately__message-copy { margin-top: 2px; color: rgba(250, 245, 237, 0.88); font-size: 13px; line-height: 1.42; overflow-wrap: anywhere; white-space: pre-wrap; } .lately__message-more { position: absolute; top: 5px; right: 6px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: rgba(244, 239, 231, 0.32); font: 600 14px/1 var(--font-ui); letter-spacing: 1px; opacity: 0.42; transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease; } .lately__row--message:hover .lately__message-more, .lately__message-more:focus-visible, .lately__message-more[aria-expanded='true'] { color: rgba(250, 246, 239, 0.86); background: rgba(255, 255, 255, 0.07); opacity: 1; outline: 0; } .lately-actions-popover { position: fixed; z-index: 100; width: max-content; min-width: 186px; padding: 5px; border: 1px solid rgba(255, 235, 209, 0.15); border-radius: 12px; background: linear-gradient(150deg, rgba(54, 34, 23, 0.97), rgba(24, 20, 18, 0.985)); box-shadow: inset 0 1px rgba(255, 241, 222, 0.1), 0 16px 38px rgba(0, 0, 0, 0.5); transform-origin: right top; animation: lately-actions-in 140ms cubic-bezier(0.2, 0.72, 0.2, 1) both; } .lately-actions-popover[data-placement='above'] { transform-origin: right bottom; } .lately-actions__item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: rgba(244, 239, 231, 0.72); font: 400 12px/1.25 var(--font-ui); text-align: left; white-space: nowrap; } .lately-actions__item:hover, .lately-actions__item:focus-visible { background: rgba(255, 255, 255, 0.07); color: var(--ink); outline: 0; } .lately-actions__item--danger { color: rgba(242, 171, 145, 0.82); } .lately-actions__item--separated { margin-top: 5px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0 0 8px 8px; } .lately-actions-layer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: end center; padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: rgba(7, 5, 4, 0.38); } .lately-actions-sheet { position: relative; width: min(100%, 460px); padding: 24px 14px 12px; border: 1px solid rgba(255, 235, 209, 0.15); border-radius: 25px 25px 16px 16px; background: linear-gradient(150deg, rgba(54, 35, 24, 0.98), rgba(24, 20, 18, 0.99)); box-shadow: inset 0 1px rgba(255, 241, 222, 0.11), 0 28px 80px rgba(0, 0, 0, 0.58); animation: lately-sheet-in 190ms cubic-bezier(0.18, 0.76, 0.22, 1) both; } .lately-actions-sheet__handle { position: absolute; top: 9px; left: 50%; width: 34px; height: 3px; border-radius: 999px; background: rgba(244, 239, 231, 0.2); transform: translateX(-50%); } .lately-actions-sheet__eyebrow { margin: 0 7px 6px; color: rgba(244, 224, 197, 0.52); font: 500 10.5px/1 var(--font-ui); letter-spacing: 0.065em; text-transform: uppercase; } .lately-actions-sheet__message { display: -webkit-box; margin: 0 7px 14px; overflow: hidden; color: rgba(252, 246, 238, 0.78); font: 400 13px/1.45 var(--font-ui); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .lately-actions-sheet__items { display: grid; gap: 2px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .lately-actions__cancel { margin-top: 5px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(244, 239, 231, 0.5); text-align: center; } @keyframes lately-actions-in { from { opacity: 0; transform: translateY(-3px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .lately-actions-popover, .lately-actions-sheet { animation: none; } } @keyframes lately-sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* --- room speech -------------------------------------------------------- */ #room-messages { position: absolute; inset: 0; z-index: 34; overflow: hidden; pointer-events: none; } .room-message { position: absolute; top: 0; left: 0; width: max-content; max-width: min(300px, calc(100vw - 24px)); padding: 10px 13px 11px; border: 1px solid rgba(255, 239, 216, 0.28); border-radius: 15px; background: linear-gradient(145deg, rgba(64, 38, 22, 0.9), rgba(31, 23, 19, 0.91)) padding-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 9px 28px rgba(0, 0, 0, 0.36); color: rgba(255, 248, 237, 0.94); font: 400 13.5px/1.42 var(--font-ui); text-align: left; visibility: hidden; opacity: 0; translate: 0 5px; /* Speech stays visually above the room without becoming an invisible wall: avatars underneath remain the pointer and touch targets. The full message and its safety actions remain available from Lately. */ pointer-events: none; transition: opacity 250ms ease, translate 250ms cubic-bezier(0.2, 0.7, 0.25, 1); } .room-message--positioned { visibility: visible; } .room-message__copy { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } .room-message::after { content: ''; position: absolute; width: 10px; height: 10px; border-right: 1px solid rgba(255, 239, 216, 0.24); border-bottom: 1px solid rgba(255, 239, 216, 0.24); background: #2a1d17; transform: rotate(45deg); } .room-message[data-tail-edge='bottom']::after { bottom: -6px; left: calc(var(--room-message-tail, 50%) - 5px); } .room-message[data-tail-edge='left']::after { top: calc(var(--room-message-tail, 50%) - 5px); left: -6px; transform: rotate(135deg); } .room-message[data-tail-edge='right']::after { top: calc(var(--room-message-tail, 50%) - 5px); right: -6px; transform: rotate(-45deg); } .room-message--in { opacity: 1; translate: 0 0; } /* New speech naturally wins by DOM order. Inspecting somebody temporarily brings only their sentence forward, without making speech intercept the pointer or changing the room's otherwise quiet appearance. */ .room-message--prioritized { z-index: 1; } /* --- people -------------------------------------------------------------- */ #occupants { position: absolute; inset: 0; z-index: 10; pointer-events: none; } .seat { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: auto; /* Establishes the container so initials can size against the disc, which changes with both the seat's perspective scale and the window size. */ container-type: size; /* Opacity is the ONLY animated property. Never add transform here — a stationary thing gaining opacity is the weakest possible attention magnet, and that is the entire point. */ transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.5, 1); border: 0; padding: 0; background: transparent; color: inherit; cursor: default; } /* A slightly larger target than the drawn disc, so the pointer catches earlier and loses it later. Modest, because the far end of the table is crowded and overlapping targets would be worse than a small one. */ .seat::after { content: ''; position: absolute; inset: -8%; border-radius: 50%; } .seat__disc { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; /* Per-room, from room.json. Static — never animate `filter`, it forces repaints. See RoomManifest.avatarFilter for why this belongs to the room. */ filter: var(--avatar-filter, none); /* The cream ring is the room's lamplight caught on the edge of a photo. */ box-shadow: 0 0 0 var(--ring, 3px) rgba(255, 238, 212, 0.82), 0 6px 20px rgba(0, 0, 0, 0.5); } /* Everyone's ring is the room's ink; yours is the room's light. Reads as the lamps catching you rather than as a UI marker stuck onto the painting. */ .seat--you .seat__disc { box-shadow: 0 0 0 var(--ring, 3px) var(--lamp), 0 6px 20px rgba(0, 0, 0, 0.5); } /* Your face is a control, so it answers the pointer. Ring only — never scale: seat scale is perspective, so growing on hover reads as lurching forward and fights the geometry the room is drawn in. */ .seat--actionable .seat__disc { transition: box-shadow 200ms ease; } .seat--actionable:hover .seat__disc, .seat--actionable:focus-visible .seat__disc { box-shadow: 0 0 0 var(--ring, 3px) #ffd291, 0 0 18px rgba(242, 180, 92, 0.45), 0 6px 20px rgba(0, 0, 0, 0.5); } .seat:focus-visible { outline: 1px solid rgba(255, 210, 145, 0.86); outline-offset: 7px; border-radius: 50%; } .seat__disc--initials { font-family: var(--font-ui); font-size: 34cqw; font-weight: 550; letter-spacing: 0.02em; color: rgba(255, 248, 236, 0.92); } .seat__glyph { position: absolute; width: 30%; height: 30%; bottom: -6%; color: #fff; stroke-width: 1.7; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75)); } .seat--right .seat__glyph { right: -8%; } .seat--left .seat__glyph { left: -8%; } /* --- hover card ---------------------------------------------------------- */ .card { position: absolute; top: 0; left: 0; min-width: 180px; max-width: 260px; padding: 12px 15px; border-radius: var(--radius); pointer-events: none; opacity: 0; z-index: 36; /* One card node is reused for every person and interaction state. Geometry is measured afresh in HoverCard.show(), so animating it would expose the previous render's anchor before settling beside the selected avatar. Keep the material arrival soft; keep its spatial relationship immediate. */ transition: opacity 160ms ease; } .card__body { display: block; } .card__header { min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 7px; } .card__more { width: 28px; height: 24px; display: grid; place-items: center; flex: none; margin: -4px -6px -4px auto; border: 0; border-radius: 8px; background: transparent; color: rgba(235, 239, 245, 0.44); font: 600 14px/1 var(--font-ui); letter-spacing: 1px; } .card__more[hidden] { display: none; } .card__more:hover, .card__more:focus-visible, .card__more[aria-expanded='true'] { background: rgba(255, 255, 255, 0.07); color: rgba(248, 245, 240, 0.88); outline: 0; } .card__menu { position: absolute; top: 38px; right: 9px; z-index: 3; display: grid; width: 224px; gap: 2px; margin: 0; padding: 7px; border: 1px solid rgba(255, 231, 199, 0.13); border-radius: 14px; background: linear-gradient(145deg, rgba(47, 30, 23, 0.985), rgba(23, 20, 19, 0.99)); box-shadow: inset 0 1px 0 rgba(255, 241, 221, 0.1), 0 18px 44px rgba(0, 0, 0, 0.5); } .card__menu[hidden] { display: none; } .card__menu-item { border: 0; border-radius: 8px; padding: 7px 9px; background: transparent; color: rgba(235, 239, 245, 0.64); font: 400 12px var(--font-ui); text-align: left; } .card__menu-item:hover, .card__menu-item:focus-visible { background: rgba(255, 255, 255, 0.065); color: rgba(249, 245, 239, 0.9); outline: 0; } .card__menu-label { margin: 6px 5px 2px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.085); color: rgba(230, 207, 179, 0.45); font: 500 9px/1 var(--font-ui); letter-spacing: 0.11em; text-transform: uppercase; } .card__menu-item--danger { color: rgba(239, 187, 166, 0.7); } .card__menu-item--danger:hover, .card__menu-item--danger:focus-visible { background: rgba(169, 80, 58, 0.16); color: rgba(255, 221, 209, 0.94); } .card--in { opacity: 1; } /* The card takes the pointer, because you have to be able to travel into it to use what is inside. */ .card { pointer-events: auto; } /* The bridge. The trip from an avatar to its card crossed a ~14px dead gap, and leaving the avatar cancelled the hover — which is what made hovering feel broken. It was never a problem with hover; it was a hole in the geometry. This gives the gap to the card, so the journey cannot be lost. It has to sit above the other avatars, or crossing a crowded table would hand the hover to whoever you passed over on the way. */ .card::before { content: ''; position: absolute; top: -10px; bottom: -10px; right: 100%; width: 30px; } .card--left::before { right: auto; left: 100%; } .card__actions { display: flex; gap: 4px; margin: 11px -6px -2px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.09); } .card__actions--sectioned { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .card--own:not(.card--composing) { min-width: 248px; max-width: 280px; } .card__actions--sectioned[data-count='4'] { grid-template-columns: minmax(96px, 1.45fr) minmax(52px, 0.8fr) minmax(58px, 0.85fr); } .card__actions[hidden] { display: none; } .card__action { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-faint); font-family: var(--font-ui); font-size: 12.5px; white-space: nowrap; cursor: default; transition: background-color 150ms ease, color 150ms ease; } .card__action--wide { position: relative; grid-column: 1 / -1; justify-content: center; gap: 8px; min-width: 0; margin-top: 1px; padding: 7px 9px 5px; color: var(--ink-faint); } .card__actionGlyph { width: 14px; height: 14px; flex: none; stroke-width: 1.4; color: currentColor; } .card__actionLabel { position: relative; display: inline-block; } .card__action:not([aria-disabled='true']):hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); } .card__action--danger { color: rgba(239, 174, 151, 0.68); } .card__action--danger:not([aria-disabled='true']):hover { color: rgba(255, 205, 184, 0.94); background: rgba(184, 79, 52, 0.13); } .card__extra[hidden] { display: none; } .card--composing { width: min(360px, calc(100vw - 24px)); max-width: 360px; } .card--composing .card__body { opacity: 1; } .card--composing .card__line, .card--composing .card__meta, .card--composing .card__where { display: none; } .card--composing .card__name { color: rgba(255, 247, 236, 0.86); } .card--composing .card__extra { animation: room-composer-arrive 220ms cubic-bezier(0.22, 1, 0.36, 1) both; } .room-composer { display: grid; gap: 8px; margin: 11px -5px -3px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .room-composer__label { color: rgba(255, 244, 230, 0.74); font: 500 11.5px/1.2 var(--font-ui); letter-spacing: 0.015em; } @keyframes room-composer-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .room-composer__input { width: 100%; min-height: 74px; resize: none; padding: 10px 11px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 11px; outline: 0; background: rgba(9, 7, 6, 0.26); color: rgba(255, 249, 240, 0.94); font: 400 13px/1.45 var(--font-ui); caret-color: var(--lamp); user-select: text; -webkit-user-select: text; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } .room-composer__input::placeholder { color: rgba(244, 239, 231, 0.32); } .room-composer__input:focus { border-color: rgba(255, 210, 145, 0.42); background: rgba(9, 7, 6, 0.36); box-shadow: 0 0 0 3px rgba(242, 180, 92, 0.07); } .room-composer__footer { display: flex; align-items: center; min-height: 30px; gap: 7px; } .room-composer__counter { color: var(--ink-faint); font: 400 10.5px/1 var(--font-ui); } .room-composer__status { min-width: 0; flex: 1; margin: 0; color: rgba(244, 211, 183, 0.58); font: 400 10.5px/1.25 var(--font-ui); } .room-composer__cancel, .room-composer__send { min-height: 30px; padding: 6px 10px; border: 0; border-radius: 9px; font: 500 11.5px/1 var(--font-ui); } .room-composer__cancel { background: transparent; color: var(--ink-faint); } .room-composer__send { background: rgba(244, 218, 177, 0.92); color: rgba(28, 20, 15, 0.94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48); } .room-composer__send:disabled { opacity: 0.32; } /* Rationed and already used. The action stays unmistakably unavailable; the separate arc carries time, so brightness never lies about clickability. */ .card__action--spent { color: rgba(244, 239, 231, 0.3); } .card__action--spent:hover { background: transparent; color: rgba(244, 239, 231, 0.3); } .card__action--pending, .card__gesture--pending { color: rgba(244, 239, 231, 0.5); background: rgba(255, 255, 255, 0.035); } .card__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-variation-settings: 'opsz' 26; font-size: 17px; line-height: 1.05; font-weight: 550; letter-spacing: -0.003em; color: var(--ink); } .card__origin { flex: none; display: inline-flex; align-items: center; line-height: 1; } .card__origin[hidden] { display: none; } .card__line { min-width: 0; overflow-wrap: anywhere; word-break: normal; font-size: 13px; color: var(--ink-soft); margin-top: 5px; } .card__activity-lead, .card__activity-detail { min-width: 0; } .card__meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; } /* Where they are and what time it is there. Sits slightly apart from the activity lines above it: those are about now, this is about them. */ .card__where { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-faint); margin-top: 9px; } .card__where[hidden] { display: none; } /* Small enough to read as a mark rather than a sticker, and left in its true colours — the room's avatar filter has no business recolouring a flag. */ .card__flag { width: 15px; height: 11.25px; flex: none; border-radius: 1.5px; object-fit: cover; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.22); transform: translateY(-2px); } .card__flag[hidden] { display: none; } .card__pin { width: 13px; height: 13px; flex: none; margin-left: 1px; color: rgba(224, 194, 154, 0.58); } .card__pin[hidden] { display: none; } /* Hovering one names it in place of the where-line, so the card carries no permanent labels for three things you use once an hour. */ .card__gestures { display: flex; gap: 4px; margin: 11px -6px -2px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.09); } .card__gestures[hidden] { display: none; } /* Writing opens something; the gestures beside it send the moment they are pressed. Four glyphs of one size in one row have no way of saying that on their own, and a whole extra row with its own rule was the old way of saying it — 47px of card to carry one distinction. The wider gap either side does most of the work; the hairline confirms it and costs no height. */ .card__rule { flex: none; align-self: center; width: 1px; height: 15px; margin: 0 6px; border-radius: 1px; background: rgba(255, 255, 255, 0.11); } .card__gesture--lead .card__gestureGlyph { width: 17px; height: 17px; } .card__gesture { flex: 1; display: grid; place-items: center; padding: 5px 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: default; transition: background-color 150ms ease, color 150ms ease, opacity 300ms ease; } .card__gesture:not([aria-disabled='true']):hover { background: rgba(255, 255, 255, 0.08); color: var(--lamp); } /* Spent. It does not disappear and it does not scold — it simply stops answering, which is the quietest way to say "not again just yet". */ .card__gesture--spent { color: rgba(244, 239, 231, 0.28); } .card__gesture--spent:hover { background: transparent; color: rgba(244, 239, 231, 0.28); } .card__gestureVisual { position: relative; display: grid; width: 29px; height: 29px; place-items: center; } .card__cooldownArc { flex: none; visibility: hidden; opacity: 0; overflow: visible; transform: rotate(-90deg); transition: opacity 140ms ease; } .card__cooldownArc--active { visibility: visible; opacity: 1; } .card__cooldownArc--action { position: absolute; top: 50%; right: calc(100% + 3px); width: 11px; height: 11px; transform: translateY(-50%) rotate(-90deg); } .card__cooldownArc--gesture { position: absolute; inset: 0; width: 29px; height: 29px; } .card__cooldownTrack { fill: none; stroke: rgba(242, 180, 92, 0.72); stroke-width: 1.5; stroke-linecap: round; } .card__gestureGlyph { width: 19px; height: 19px; } /* --- gestures over a head ------------------------------------------------ */ #gestures { position: absolute; inset: 0; pointer-events: none; /* Above the hover card. A gesture departs from under the panel you clicked to send it, and a card open over somebody else hid marks landing on them. */ z-index: 35; } .mark { position: absolute; top: 0; left: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(26, 22, 20, 0.62); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 14px rgba(0, 0, 0, 0.4); color: var(--lamp); pointer-events: auto; opacity: 0; /* Opacity only on arrival — never a float-up, which is Instagram's grammar and is engineered specifically to pull the eye. The transform transition is for one case only: the row is centred over the head, so a second mark arriving nudges its neighbour aside. Rare, small, and better than leaving a lone mark permanently off-centre. */ transition: opacity 1500ms ease, transform 420ms ease; } .mark--in { opacity: 1; } /* In flight. Driven by the Web Animations API rather than a transition, so the whole arc is one declaration and lands exactly on the resting mark. */ .mark--flying { opacity: 0; transition: none; pointer-events: none; } .mark__glyph { width: 62%; height: 62%; } /* Who it was from, on hover only. The gesture is the message; a permanent name would turn it into a caption. */ .mark__from { position: absolute; top: 100%; margin-top: 5px; padding: 3px 8px; border-radius: 7px; background: rgba(26, 22, 20, 0.8); color: var(--ink-soft); font-size: 11.5px; white-space: nowrap; opacity: 0; transition: opacity 150ms ease; pointer-events: none; } .mark:hover .mark__from { opacity: 1; } /* --- empty seats --------------------------------------------------------- */ #slots { position: absolute; inset: 0; z-index: 11; pointer-events: none; } .slot { position: absolute; top: 0; left: 0; border: 0; padding: 0; border-radius: 50%; background: transparent; pointer-events: auto; cursor: default; /* Visible at rest: the slots only exist while you are choosing a seat, and hunting for an invisible target is not calm, just annoying. They vanish entirely the moment you sit down. */ opacity: 0.42; transition: opacity 380ms ease; } .slot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(255, 238, 212, 0.62); background: radial-gradient(circle, rgba(255, 226, 176, 0.16), transparent 72%); transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease; } .slot:hover, .slot:focus-visible { opacity: 1; transition-duration: 160ms; } .slot[aria-disabled='true']:not(.slot--pending):hover, .slot[aria-disabled='true']:not(.slot--pending):focus-visible { opacity: 0.42; } .slot[aria-disabled='true']:not(.slot--pending):hover::after, .slot[aria-disabled='true']:not(.slot--pending):focus-visible::after { border-style: dashed; border-color: rgba(255, 238, 212, 0.62); box-shadow: none; } .slot--pending { opacity: 1; } .slot--pending::after { border-style: solid; border-color: var(--lamp); background: radial-gradient(circle, rgba(255, 226, 176, 0.24), transparent 72%); box-shadow: 0 0 0 4px rgba(242, 180, 92, 0.12); } .slot:hover::after, .slot:focus-visible::after { border-style: solid; border-color: var(--lamp); box-shadow: 0 0 0 4px rgba(242, 180, 92, 0.14), 0 6px 20px rgba(0, 0, 0, 0.4); } .slot[hidden] { display: none; } /* --- the sit prompt ------------------------------------------------------ */ .ask-scrim { position: absolute; inset: 0; display: grid; place-items: center; z-index: 60; /* Read twice: once as the dimming behind the panel, and again as part of the backdrop the panel itself samples. Heavy here makes the panel above it look like a slab however light its own pigment is. */ background: rgba(8, 6, 5, 0.32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 180ms ease; } .ask-scrim--in { opacity: 1; pointer-events: auto; } /* The room stays visible behind the leave prompt, because the room is the thing being decided about. A blackout would make it feel like an exit. */ .ask-scrim--light { background: rgba(8, 6, 5, 0.3); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); } /* Keeps its presence with the reassurance line gone: a leave prompt that shrinks to a tooltip reads as trivial, and this one is not. */ .confirm { min-width: 396px; padding: 42px 46px 38px; text-align: center; } /* The gap used to sit on .confirm, whose only child is this wrapper — so it spaced nothing, and the question sat directly on top of the buttons. */ .confirm__body { text-shadow: var(--panel-text-shadow); display: flex; flex-direction: column; gap: 30px; } .confirm__actions { display: flex; justify-content: center; gap: 14px; } .confirm__stay, .confirm__go { padding: 11px 30px; border-radius: 10px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; cursor: default; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; } /* Staying is where the eye lands and where focus starts. */ .confirm__stay { border: 1px solid rgba(242, 180, 92, 0.42); background: rgba(242, 180, 92, 0.12); color: var(--ink); outline: none; } .confirm__stay:hover, .confirm__stay:focus-visible { border-color: rgba(242, 180, 92, 0.72); background: rgba(242, 180, 92, 0.2); } /* Quiet, not red. Leaving a room is not a dangerous act, it is just an act, and alarming someone about it would be the loudest thing in the app. */ .confirm__go { border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: var(--ink-soft); } .confirm__go:hover { border-color: rgba(255, 255, 255, 0.24); color: var(--ink); } .ask { padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 20px; border: 1px solid transparent; border-radius: 22px; backdrop-filter: var(--panel-filter); -webkit-backdrop-filter: var(--panel-filter); background: linear-gradient(158deg, var(--panel-tint-a), var(--panel-tint-b)) padding-box, var(--panel-rim) border-box; box-shadow: var(--panel-shadow); } .ask--detail { min-width: 360px; } .ask__question { text-shadow: var(--panel-text-shadow); font-family: var(--font-display); font-variation-settings: 'opsz' 32; font-size: 21px; font-weight: 500; letter-spacing: -0.005em; text-align: center; color: var(--ink); } /* Five in a single row rather than a grid: arrow keys become left/right with no ambiguity, there is no second row for the eye to travel to, and the numbers read as a sequence rather than a keypad. */ .ask__options { display: grid; grid-template-columns: repeat(5, 92px); gap: 9px; } .ask__choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 17px 8px 13px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.03); color: var(--ink-soft); font-family: var(--font-ui); font-size: 13px; white-space: nowrap; cursor: default; overflow: hidden; transition: border-color 180ms ease, color 180ms ease; } /* Lit from within by the room's own lamplight, rather than filled with a flat highlight — the tile warms up the way everything else here does. */ .ask__choice::before { content: ''; position: absolute; inset: 0; background: radial-gradient(72% 58% at 50% 34%, rgba(242, 180, 92, 0.3), transparent 72%); opacity: 0; transition: opacity 200ms ease; } .ask__choice > * { position: relative; } /* One tile is always current: your last activity, pre-selected, so the common case is Enter, Enter. Arrow keys and hover move it. */ .ask__choice--on { border-color: rgba(242, 180, 92, 0.62); color: var(--ink); } .ask__choice--on::before { opacity: 1; } .ask__glyph { width: 22px; height: 22px; } /* "(optional)" belongs beside the question, not in the placeholder — the placeholder's job is to show what a good answer looks like, and it was being spent on a caveat. */ .ask__optional { margin-left: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-faint); opacity: 0.75; } .ask__field { position: relative; } .ask__field.detail-field--prefixed { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 11px; background: rgba(0, 0, 0, 0.22); transition: border-color 150ms ease; } .ask__field.detail-field--prefixed:focus-within { border-color: rgba(242, 180, 92, 0.55); } .ask__field.detail-field--prefixed .ask__input { min-width: 0; border: 0; border-radius: 0; padding-left: 4px; background: transparent; } .ask__remaining { position: absolute; right: 12px; bottom: 9px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-faint); opacity: 0.6; pointer-events: none; } .ask__remaining[hidden] { display: none; } /* Centred under a centred question. Right-aligning it made the panel lean, and there is only one action — nothing for it to be aligned against. */ .ask__actions { display: flex; justify-content: center; margin-top: -4px; } /* Named for what it does rather than for the key it mirrors. Enter still submits; it simply is not announced. */ .ask__enter { padding: 8px 20px; border: 1px solid rgba(242, 180, 92, 0.42); border-radius: 10px; background: rgba(242, 180, 92, 0.12); color: var(--ink); font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; cursor: default; transition: border-color 180ms ease, background-color 180ms ease; } .ask__enter:hover { border-color: rgba(242, 180, 92, 0.72); background: rgba(242, 180, 92, 0.2); } .ask__input { width: 100%; display: block; resize: none; line-height: 1.45; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 11px; background: rgba(0, 0, 0, 0.22); color: var(--ink); font-family: var(--font-ui); font-size: 15px; outline: none; transition: border-color 150ms ease; } .ask__input::placeholder { color: rgba(244, 239, 231, 0.26); } .ask__input:focus { border-color: rgba(242, 180, 92, 0.55); } /* Fixed words and editable words are adjacent grid cells, never two layers of text that can drift when a webfont or viewport changes. */ .detail-prefix { min-width: max-content; user-select: none; -webkit-user-select: none; white-space: nowrap; color: rgba(244, 239, 231, 0.55); cursor: text; } .ask__field .detail-prefix { padding-left: 14px; font: 15px/1.45 var(--font-ui); } /* --- ambient ------------------------------------------------------------ */ /* Everything in this section obeys one rule: opacity and transform only, never `filter` (which forces repaints), and never on the plate itself. */ .sky, .foliage, .glow, .points { position: absolute; pointer-events: none; } .sky__band, .sky__inner { position: absolute; pointer-events: none; } /* A pane of glass. Overflow-clipped to the gap between two mullions, so the frame stays welded to the base plate while the sky behind it moves. */ /* The aperture. Fixed, aligned to the pane, and NEVER animated — animating this instead of the image slides the window opening across the plate and leaves ghost mullions, which is exactly what it did the first time. The horizontal feather matters: a drifting image pulls in content from outside the pane, and that content is the neighbouring mullion. Feathered edges mean it arrives at zero opacity. */ .sky { overflow: hidden; z-index: 1; -webkit-mask-image: linear-gradient( to right, transparent 0, #000 var(--edge, 30px), #000 calc(100% - var(--edge, 30px)), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 var(--edge, 30px), #000 calc(100% - var(--edge, 30px)), transparent 100% ); } /* Vertical feather, on its own level so the two masks compose without needing mask-composite (whose keywords differ across engines). */ .sky__band { top: 0; left: 0; overflow: hidden; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 8%, #000 var(--feather, 70%), transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000 8%, #000 var(--feather, 70%), transparent 100% ); } /* The only thing that moves. */ .sky__inner { background-repeat: no-repeat; animation-name: sky-drift; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: normal; } /* ~1.7px/sec, which is genuinely how fast cloud crosses a view like this. The plate and sky source are pixel-aligned at zero. Starting there makes the deferred ambient mount invisible; the later drift keeps the authored speed without reloading the clouds at a displaced position. */ @keyframes sky-drift { 0%, 50%, 100% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(var(--drift, 6px), 0, 0); } 75% { transform: translate3d(calc(var(--drift, 6px) * -1), 0, 0); } } /* Distant foliage shimmers rather than sways: at this painted range real sway is sub-pixel, so translating it would be inventing motion. */ .foliage { z-index: 2; background: rgba(188, 214, 255, 0.5); mix-blend-mode: soft-light; opacity: 0; animation-name: shimmer; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } /* One per lamp, sitting exactly where the lamp already is. Light is additive, which is the whole reason none of this needs the plate cut into layers. */ .glow { z-index: 3; border-radius: 50%; /* Stops approximate inverse-square falloff: a tight bright core and a long faint tail. A single linear ramp reads as fog, not as light. */ background: radial-gradient( circle, rgba(255, 202, 132, 0.95) 0%, rgba(255, 196, 124, 0.48) 10%, rgba(255, 190, 114, 0.2) 24%, rgba(255, 184, 106, 0.075) 44%, rgba(255, 180, 100, 0.02) 66%, transparent 80% ); mix-blend-mode: screen; opacity: 0; /* The track carries its own shape, so interpolation must be linear, and it must NOT alternate — a noise track played backwards is a palindrome, and the turn is visible as a bounce. */ animation-timing-function: linear; animation-iteration-count: infinite; } /* Village lights, stars and dust, all in one low-rate canvas. Hundreds of DOM nodes would be absurd; hundreds of fillRects at 12fps are free. */ .points { inset: 0; z-index: 4; } /* --- onboarding ---------------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .onboarding { position: absolute; inset: 0; /* `hidden` can still be scrolled programmatically when a focused control is replaced between steps. `clip` keeps this genuinely stage-like. */ overflow: clip; isolation: isolate; background: var(--entry-background); transition: opacity 460ms ease, filter 460ms ease; } .onboarding--leaving { opacity: 0; filter: blur(8px); } .onboarding__aurora { position: absolute; z-index: -1; inset: -20%; opacity: 0.54; background: radial-gradient(35% 35% at 28% 39%, rgba(80, 116, 159, 0.2), transparent 72%), radial-gradient(24% 30% at 65% 70%, rgba(190, 123, 66, 0.08), transparent 75%); filter: blur(34px); animation: onboarding-breathe 12s ease-in-out infinite alternate; } /* The doorway lockup is shared by every in-app brand label and follows the public landing page's geometry, type, and optical baseline. */ .onboarding__brand { position: absolute; z-index: 3; top: 25px; left: var(--chrome-left); pointer-events: none; transition: opacity 460ms ease; } .onboarding-welcome { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; font-family: var(--font-display); font-variation-settings: 'opsz' 60; font-size: clamp(48px, 5vw, 68px); font-weight: 400; letter-spacing: -0.035em; color: rgba(248, 243, 236, 0.94); text-shadow: 0 16px 60px rgba(0, 0, 0, 0.55); } .onboarding--welcoming .onboarding-welcome { animation: onboarding-welcome 2.08s ease both; } .onboarding--welcoming .onboarding__brand { opacity: 0; } .onboarding--welcoming .onboarding__world-wrap { opacity: 0; transform: translateX(-18px) scale(0.97); animation: none; } .onboarding--welcoming .onboarding__panel { opacity: 0; transform: translateX(16px); animation: none; } .onboarding__scene { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(350px, 0.94fr) minmax(480px, 1.06fr); align-items: center; gap: clamp(40px, 7vw, 120px); padding: 78px clamp(60px, 9vw, 164px) 54px; } .onboarding__world-wrap { justify-self: end; display: grid; justify-items: center; gap: 28px; animation: onboarding-world-arrive 1.2s cubic-bezier(0.16, 0.72, 0.25, 1) backwards; } .onboarding__world { position: relative; width: clamp(310px, 36vw, 540px); aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px rgba(210, 226, 247, 0.3), 0 0 0 4px rgba(176, 207, 243, 0.055), 0 30px 110px rgba(0, 0, 0, 0.64), 0 0 110px rgba(70, 117, 168, 0.14); } .onboarding__world-image, .onboarding-people, .onboarding__world-glass { position: absolute; inset: 0; border-radius: inherit; } .onboarding__world-image { z-index: 0; inset: -3%; background: url('/runtime/0.1.10-9f2371614f0b/rooms/reading-room/plate.png') center 45% / cover no-repeat; filter: saturate(0.88) brightness(0.78) contrast(1.04); transform: scale(1.03); animation: onboarding-world-drift 18s ease-in-out infinite alternate; } .onboarding__world-glass { z-index: 1; pointer-events: none; background: radial-gradient(circle at 68% 70%, transparent 45%, rgba(3, 5, 9, 0.36) 80%, rgba(3, 5, 9, 0.72) 100%), radial-gradient(circle at 29% 18%, rgba(235, 245, 255, 0.24), transparent 21%), linear-gradient(132deg, rgba(255, 255, 255, 0.1), transparent 25% 72%, rgba(130, 169, 213, 0.08)); box-shadow: inset 18px 22px 52px rgba(221, 238, 255, 0.08), inset -26px -34px 70px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.22); } /* The orb is a product glimpse rather than an illustration. Four real seat positions make the room feel inhabited; one card briefly demonstrates what the profile fields become, then the people are left for quiet exploration. */ .onboarding-people { z-index: 2; } .onboarding-person { position: absolute; z-index: 1; top: calc(var(--person-y) - clamp(17px, 1.725vw, 25px)); left: calc(var(--person-x) - clamp(17px, 1.725vw, 25px)); width: clamp(34px, 3.45vw, 50px); height: clamp(34px, 3.45vw, 50px); opacity: 0; transition: opacity 700ms ease; } .onboarding--arrived .onboarding-person { opacity: 1; } /* The active preview is a tooltip surface. It must own the local stacking order so a later avatar in the DOM cannot paint over its text. */ .onboarding-person--open { z-index: 4; } .onboarding-person__avatar-scale { width: 100%; height: 100%; transform: scale(calc(var(--person-scale) - 0.06)); transform-origin: center; transition: transform 900ms cubic-bezier(0.16, 0.72, 0.25, 1); } .onboarding--arrived .onboarding-person__avatar-scale { transform: scale(var(--person-scale)); } .onboarding--arrived .onboarding-person--clara, .onboarding--arrived .onboarding-person--clara .onboarding-person__avatar-scale { transition-delay: 90ms; } .onboarding--arrived .onboarding-person--rafael, .onboarding--arrived .onboarding-person--rafael .onboarding-person__avatar-scale { transition-delay: 180ms; } .onboarding--arrived .onboarding-person--thomas, .onboarding--arrived .onboarding-person--thomas .onboarding-person__avatar-scale { transition-delay: 270ms; } .onboarding-person__avatar { width: 100%; height: 100%; display: block; overflow: hidden; border: 1.5px solid rgba(241, 221, 194, 0.72); border-radius: 50%; padding: 0; background: #2a2e38; box-shadow: 0 0 0 2px rgba(224, 235, 247, 0.12), 0 7px 18px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.2); cursor: default; filter: saturate(0.88) brightness(0.92); transition: filter 170ms ease, box-shadow 170ms ease, transform 170ms ease; } .onboarding-person__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } .onboarding-person__avatar:hover, .onboarding-person__avatar:focus-visible, .onboarding-person--open .onboarding-person__avatar { outline: 0; filter: saturate(1) brightness(1.04); box-shadow: 0 0 0 2px rgba(238, 218, 191, 0.23), 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 26px rgba(111, 148, 188, 0.15); transform: translateY(-1px); } .onboarding-person__card { position: absolute; z-index: 3; top: 50%; width: max-content; min-width: 144px; max-width: 160px; display: block; border: 1px solid rgba(222, 233, 245, 0.16); border-radius: 12px; margin-top: -39px; padding: 9px 10px; background: linear-gradient(145deg, rgba(19, 24, 31, 0.97), rgba(9, 12, 17, 0.98)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 14px 34px rgba(0, 0, 0, 0.54); pointer-events: none; animation: onboarding-person-card-in 180ms ease-out backwards; } .onboarding-person__card[hidden] { display: none; } .onboarding-person__card--right { left: calc(100% + 11px); transform-origin: left center; } .onboarding-person__card--left { right: calc(100% + 11px); transform-origin: right center; } .onboarding-person__header { min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 5px; } .onboarding-person__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px var(--font-display); line-height: 1.05; letter-spacing: -0.01em; color: rgba(249, 245, 239, 0.94); } .onboarding-person__activity { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; font-size: 11px; color: rgba(237, 241, 246, 0.74); } .onboarding-person__duration { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; font-size: 10px; color: rgba(226, 233, 242, 0.55); } .onboarding-person__where { min-width: 0; display: flex; align-items: center; gap: 6px; margin-top: 8px; overflow: hidden; } .onboarding-person__origin { flex: none; display: inline-flex; align-items: center; line-height: 1; } .onboarding-person__place { min-width: 0; flex: 1; display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: rgba(226, 233, 242, 0.65); } .onboarding-person__flag { width: 12px; height: 8px; flex: none; object-fit: cover; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); transform: translateY(-1px); } .onboarding-person__pin { width: 10px; height: 10px; flex: none; color: rgba(224, 194, 154, 0.6); } @keyframes onboarding-person-card-in { from { opacity: 0; } } .onboarding__world-caption { font-family: var(--font-display); font-size: 17px; font-style: italic; color: rgba(230, 235, 241, 0.42); letter-spacing: 0.005em; } .onboarding__panel { width: min(100%, 540px); justify-self: start; padding: clamp(28px, 4vw, 50px); border: 1px solid rgba(220, 231, 244, 0.13); border-radius: 30px; background: linear-gradient(145deg, rgba(28, 33, 42, 0.76), rgba(18, 20, 27, 0.7)) padding-box; backdrop-filter: blur(30px) saturate(125%); -webkit-backdrop-filter: blur(30px) saturate(125%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 34px 100px rgba(0, 0, 0, 0.45); animation: onboarding-panel-arrive 850ms 120ms cubic-bezier(0.16, 0.72, 0.25, 1) backwards; } /* The first step asks one thing and therefore shows one thing. It deliberately drops the panel, progress, labels and supporting prose used by later steps; empty space is part of the invitation. */ .onboarding--name .onboarding__panel { width: min(100%, 540px); padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .onboarding--photo .onboarding__panel { position: relative; width: min(100%, 540px); padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .onboarding--place .onboarding__panel { position: relative; width: min(100%, 540px); padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .onboarding--name .onboarding__progress, .onboarding--photo .onboarding__progress, .onboarding--place .onboarding__progress, .onboarding--place .onboarding__world-caption, .onboarding--photo .onboarding__world-caption, .onboarding--name .onboarding__world-caption { display: none; } .onboarding--name .onboarding__body { min-height: 0; display: flex; flex-direction: column; align-items: center; } .onboarding--name .onboarding__title { max-width: none; font-size: clamp(40px, 3.8vw, 50px); text-align: center; white-space: nowrap; } .onboarding-name__entry { position: relative; width: min(100%, 446px); height: 60px; display: flex; align-items: center; margin-top: 34px; padding: 5px 7px 5px 22px; border: 1px solid rgba(221, 232, 244, 0.14); border-radius: 999px; background: linear-gradient(112deg, rgba(220, 233, 248, 0.07), rgba(151, 174, 202, 0.022) 58%, rgba(218, 177, 124, 0.035)), rgba(3, 6, 11, 0.24); backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.075), inset 0 -1px rgba(0, 0, 0, 0.16), 0 18px 52px rgba(0, 0, 0, 0.16); transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease; } .onboarding-name__entry:focus-within { border-color: rgba(231, 211, 184, 0.3); background-color: rgba(3, 6, 11, 0.36); box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), inset 0 -1px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(220, 180, 126, 0.035), 0 20px 56px rgba(0, 0, 0, 0.19); } .onboarding-name__entry--ready { border-color: rgba(231, 205, 171, 0.24); } .onboarding-name__input { min-width: 0; height: 100%; flex: 1; border: 0; outline: 0; background: transparent; color: rgba(248, 245, 240, 0.94); font: 400 22px var(--font-display); letter-spacing: -0.012em; user-select: text; -webkit-user-select: text; } .onboarding-name__input::placeholder { color: rgba(230, 236, 244, 0.27); font: 400 14px var(--font-ui); letter-spacing: 0; } .onboarding-name__continue { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border: 1px solid transparent; border-radius: 50%; background: transparent; color: rgba(240, 220, 194, 0.12); font: 400 18px var(--font-ui); cursor: pointer; opacity: 0.35; transform: scale(0.94); transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .onboarding-name__entry--ready .onboarding-name__continue { color: rgba(255, 244, 229, 0.96); border-color: rgba(235, 211, 180, 0.3); background: linear-gradient(135deg, rgba(231, 207, 177, 0.24), rgba(193, 148, 92, 0.16)); opacity: 1; transform: scale(1); box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 8px 26px rgba(176, 123, 65, 0.11); } .onboarding-name__entry--ready .onboarding-name__continue:hover { color: #fff7ed; background: rgba(220, 181, 128, 0.2); transform: translateX(1px); } .onboarding-name__continue:focus-visible { outline: 1px solid rgba(243, 215, 178, 0.82); outline-offset: 2px; } .onboarding-name__continue:disabled { pointer-events: none; } .onboarding-name__error { margin-top: 11px; font-size: 11px; color: rgba(246, 171, 154, 0.74); } .onboarding-name__error:empty { display: none; } .onboarding--photo .onboarding__body { position: relative; min-height: 0; display: flex; flex-direction: column; align-items: center; transform: translateY(-35px); } .onboarding--photo .onboarding__title { max-width: none; margin-top: 25px; font-size: clamp(38px, 3.4vw, 46px); text-align: center; white-space: nowrap; } .onboarding-step__back { position: absolute; top: 30px; left: 0; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: rgba(230, 236, 243, 0.34); font: 400 18px var(--font-ui); transition: color 180ms ease, background-color 180ms ease; } .onboarding-step__back:hover { color: rgba(248, 244, 238, 0.85); background: rgba(255, 255, 255, 0.05); } .onboarding--photo .onboarding__avatar { width: 96px; height: 96px; border-color: rgba(229, 214, 194, 0.26); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), 0 0 0 5px rgba(195, 214, 236, 0.025), inset 0 1px rgba(255, 255, 255, 0.2); } .onboarding-photo__avatar-pick { display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; background: transparent; color: inherit; cursor: pointer; transition: transform 180ms ease; } .onboarding-photo__avatar-pick .onboarding__avatar { transition: border-color 180ms ease, box-shadow 180ms ease; } .onboarding-photo__avatar-pick:hover { transform: translateY(-1px); } .onboarding-photo__avatar-pick:hover .onboarding__avatar { border-color: rgba(239, 218, 191, 0.48); box-shadow: 0 20px 52px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(214, 225, 239, 0.045), inset 0 1px rgba(255, 255, 255, 0.24); } .onboarding-photo__avatar-pick:disabled { cursor: wait; opacity: 0.58; } .onboarding-photo__choices { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 38px; } .onboarding-photo__choose, .onboarding-photo__continue { min-height: 48px; border-radius: 999px; font: 500 12.5px var(--font-ui); } .onboarding-photo__choose { padding: 0 20px; border-color: rgba(226, 233, 242, 0.16); background: rgba(255, 255, 255, 0.06); color: rgba(246, 242, 236, 0.78); } .onboarding-photo__continue { display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent; padding: 0 17px; background: transparent; color: rgba(234, 239, 245, 0.57); transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .onboarding-photo__continue:hover { color: rgba(248, 244, 238, 0.9); background: rgba(255, 255, 255, 0.045); } .onboarding-photo__continue--ready { border-color: rgba(235, 211, 180, 0.2); color: rgba(255, 244, 229, 0.94); background: linear-gradient(135deg, rgba(231, 207, 177, 0.2), rgba(193, 148, 92, 0.12)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.12); } .onboarding-photo__continue--ready:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(231, 207, 177, 0.27), rgba(193, 148, 92, 0.17)); } .onboarding-photo__arrow { font-size: 16px; font-weight: 400; } .onboarding-photo__initials { margin-top: 13px; border: 0; padding: 3px 2px; background: transparent; color: rgba(229, 235, 242, 0.3); font: 400 10.5px var(--font-ui); } .onboarding-photo__initials:hover { color: rgba(244, 240, 235, 0.68); } .onboarding-step__back:focus-visible, .onboarding-photo__avatar-pick:focus-visible, .onboarding-photo__continue:focus-visible, .onboarding-photo__initials:focus-visible, .onboarding-place__enter:focus-visible, .onboarding-place__community:focus-visible { outline: 1px solid rgba(243, 215, 178, 0.82); outline-offset: 3px; } .onboarding--place .onboarding__body { position: relative; width: 100%; height: 146px; min-height: 146px; display: flex; flex-direction: column; align-items: center; } .onboarding--place .onboarding__title { max-width: none; font-size: clamp(36px, 3.2vw, 44px); text-align: center; white-space: nowrap; transform: translateY(6px); } .onboarding-place__optional { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); color: rgba(228, 235, 243, 0.3); font: 600 9.5px var(--font-ui); letter-spacing: 0.13em; text-transform: uppercase; } .onboarding-place__back { top: -34px; } .onboarding-place__fields { position: absolute; top: 86px; left: 50%; width: min(100%, 540px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; transform: translateX(-50%); } .onboarding--place .onboarding-place__input { height: 52px; border-radius: 999px; padding-inline: 19px; background-color: rgba(3, 6, 11, 0.25); backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%); } .onboarding--place .onboarding-place__input::placeholder { color: rgba(230, 236, 244, 0.3); } .onboarding--place .onboarding-place__input--empty { color: rgba(230, 236, 244, 0.3); } .onboarding-place__enter { position: absolute; top: 158px; left: 50%; min-height: 46px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(235, 211, 180, 0.22); border-radius: 999px; padding: 0 20px; color: rgba(255, 244, 229, 0.96); background: linear-gradient(135deg, rgba(231, 207, 177, 0.24), rgba(193, 148, 92, 0.15)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 10px 28px rgba(176, 123, 65, 0.1); font: 500 12.5px var(--font-ui); transform: translateX(-50%); transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; } .onboarding-place__enter:hover { background: linear-gradient(135deg, rgba(231, 207, 177, 0.31), rgba(193, 148, 92, 0.21)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), 0 13px 32px rgba(176, 123, 65, 0.14); transform: translateX(-50%) translateY(-1px); } .onboarding-place__arrow { font-size: 16px; } .onboarding-place__community { position: absolute; top: 218px; left: 50%; display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 5px 7px; color: rgba(230, 236, 244, 0.42); background: transparent; font: 450 11px var(--font-ui); transform: translateX(-50%); transition: color 180ms ease, transform 180ms ease; } .onboarding-place__community:hover { color: rgba(248, 244, 238, 0.8); transform: translateX(-50%) translateY(-1px); } .onboarding-place__community-icon { width: 15px; height: 15px; flex: none; opacity: 0.86; } .onboarding-place__external { margin-left: -2px; font-size: 10px; opacity: 0.58; } .onboarding__progress { display: flex; align-items: center; gap: 7px; height: 18px; margin-bottom: 30px; } .onboarding__progress-label { margin-right: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(226, 233, 242, 0.32); } .onboarding__progress-mark { width: 18px; height: 1px; border-radius: 2px; background: rgba(226, 233, 242, 0.15); transition: width 280ms ease, background-color 280ms ease; } .onboarding__progress-mark--current { width: 34px; background: rgba(237, 215, 184, 0.7); } .onboarding__progress-mark--past { background: rgba(237, 215, 184, 0.34); } .onboarding__body { min-height: 390px; } .onboarding__body--arriving { animation: onboarding-step 360ms cubic-bezier(0.16, 0.72, 0.25, 1) backwards; } .onboarding__eyebrow { margin-bottom: 9px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(227, 201, 166, 0.62); } .onboarding__title { max-width: 440px; font-family: var(--font-display); font-variation-settings: 'opsz' 46; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.02; font-weight: 400; letter-spacing: -0.035em; color: rgba(248, 245, 240, 0.96); } .onboarding__copy { max-width: 450px; margin-top: 16px; font-size: 14px; line-height: 1.6; color: rgba(226, 233, 242, 0.49); } .onboarding__field, .profile-panel__field { display: grid; gap: 8px; } .onboarding__field { margin-top: 28px; } .onboarding__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 27px; } .onboarding__field-row .onboarding__field { margin-top: 0; } .onboarding__label, .profile-panel__field > span { font-size: 11.5px; color: rgba(232, 237, 244, 0.54); } .onboarding__input, .profile-panel__input { width: 100%; height: 48px; border: 1px solid rgba(222, 232, 244, 0.13); border-radius: 13px; padding: 0 15px; outline: 0; background: rgba(3, 6, 11, 0.32); color: rgba(248, 245, 240, 0.92); font: 400 14px var(--font-ui); user-select: text; -webkit-user-select: text; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } .onboarding__input::placeholder, .profile-panel__input::placeholder { color: rgba(230, 236, 244, 0.22); } .onboarding__input:focus, .profile-panel__input:focus { border-color: rgba(237, 211, 175, 0.5); background: rgba(3, 6, 11, 0.47); box-shadow: 0 0 0 3px rgba(220, 180, 126, 0.07); } .onboarding__select, .profile-panel__select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, rgba(235, 239, 244, 0.42) 50%), linear-gradient(135deg, rgba(235, 239, 244, 0.42) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .onboarding__error, .profile-panel__error { min-height: 19px; margin-top: 7px; font-size: 11.5px; color: rgba(246, 171, 154, 0.8); } .onboarding__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; } .onboarding__actions--end { justify-content: flex-end; } .onboarding__button { min-height: 44px; border: 0; border-radius: 999px; padding: 0 22px; font: 500 13px var(--font-ui); transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease; } .onboarding__button--primary { color: #171310; background: linear-gradient(135deg, #f2e8da, #dbc19e); box-shadow: 0 8px 25px rgba(186, 132, 75, 0.15), inset 0 1px rgba(255, 255, 255, 0.7); } .onboarding__button--primary:hover { transform: translateY(-1px); box-shadow: 0 11px 30px rgba(186, 132, 75, 0.22), inset 0 1px rgba(255, 255, 255, 0.7); } .onboarding__button--quiet { color: rgba(235, 239, 244, 0.5); background: transparent; } .onboarding__button--quiet:hover { color: rgba(248, 245, 240, 0.9); background: rgba(255, 255, 255, 0.055); } .onboarding__button:focus-visible, .onboarding__photo-button:focus-within, .profile-chip:focus-visible, .profile-panel button:focus-visible { outline: 1px solid rgba(243, 215, 178, 0.82); outline-offset: 3px; } .onboarding__aside { margin-top: 17px; text-align: right; font-size: 10.5px; color: rgba(230, 235, 242, 0.26); } .onboarding__photo { display: flex; align-items: center; gap: 25px; margin-top: 30px; } .onboarding__avatar, .profile-panel__avatar, .profile-chip__avatar-inner { display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: rgba(249, 243, 235, 0.92); background: radial-gradient(circle at 32% 24%, rgba(132, 160, 193, 0.42), transparent 55%), linear-gradient(145deg, #4a5267, #282b38); } .onboarding__avatar img, .profile-panel__avatar img, .profile-chip__avatar-inner img { width: 100%; height: 100%; object-fit: cover; } .onboarding__avatar { width: 108px; height: 108px; flex: none; border: 2px solid rgba(239, 218, 191, 0.34); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.22); font-family: var(--font-display); font-size: 34px; } .onboarding__photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .onboarding__photo-button, .profile-panel__photo-pick { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid rgba(226, 233, 242, 0.14); border-radius: 999px; padding: 0 16px; background: rgba(255, 255, 255, 0.055); font-size: 12px; color: rgba(242, 240, 235, 0.72); } .onboarding__photo-button:hover, .profile-panel__photo-pick:hover { background: rgba(255, 255, 255, 0.09); color: var(--ink); } .onboarding__photo-button--busy, .profile-panel__photo-pick--busy { opacity: 0.48; pointer-events: none; } .onboarding__privacy { display: flex; align-items: center; gap: 8px; margin-top: 17px; font-size: 10.5px; line-height: 1.4; color: rgba(226, 233, 242, 0.31); } .onboarding__privacy-mark { color: rgba(224, 190, 145, 0.52); } @keyframes onboarding-breathe { to { transform: translate3d(2%, -1%, 0) scale(1.04); } } @keyframes onboarding-welcome { 0% { opacity: 0; transform: translateY(5px); letter-spacing: -0.055em; } 12%, 78% { opacity: 1; transform: translateY(0); letter-spacing: -0.035em; } 100% { opacity: 0; transform: translateY(-3px); letter-spacing: -0.025em; } } @keyframes onboarding-world-arrive { from { opacity: 0; } } @keyframes onboarding-panel-arrive { from { opacity: 0; } } @keyframes onboarding-world-drift { to { transform: scale(1.065) translate3d(-0.6%, -0.4%, 0); } } @keyframes onboarding-step { from { opacity: 0; } } /* --- lobby controls ------------------------------------------------------ */ /* The profile is the more personal of the two controls, so it carries the stronger glass and the user's face while Community stays one step quieter. */ .profile-chip { position: absolute; z-index: 40; top: 22px; right: 24px; height: 44px; max-width: 184px; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 999px; padding: 4px 13px 4px 4px; /* The same glass as #top-bar, deliberately: two pieces of chrome in opposite corners have to read as one substance or the corners fight. This carried a 69%-opaque blue-grey fill with no brightness for a long time, which is the grey-plastic failure described above — it made the one piece of the interface that is *you* the dullest thing on screen. */ background: linear-gradient(rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)) padding-box, linear-gradient( 158deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.3) ) border-box; backdrop-filter: blur(22px) saturate(150%) brightness(1.12); -webkit-backdrop-filter: blur(22px) saturate(150%) brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 34px rgba(0, 0, 0, 0.26); color: rgba(244, 241, 236, 0.86); transition: filter 180ms ease, transform 180ms ease, opacity 300ms ease; } .profile-chip:hover, .profile-chip[aria-expanded='true'] { filter: brightness(1.12); transform: translateY(-1px); } .profile-chip__avatar { width: 34px; height: 34px; flex: none; } .profile-chip__avatar-inner { width: 100%; height: 100%; /* --lamp is reserved for the current user, and this is the current user — the one place in the app where spending it is exactly on the rule. It is also what makes a 34px face in a corner findable at a glance. */ border: 1px solid rgba(242, 180, 92, 0.46); box-shadow: 0 0 0 3px rgba(242, 180, 92, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.4); font-family: var(--font-display); font-size: 14px; transition: border-color 200ms ease, box-shadow 220ms ease; } .profile-chip:hover .profile-chip__avatar-inner, .profile-chip[aria-expanded='true'] .profile-chip__avatar-inner { border-color: rgba(242, 180, 92, 0.72); box-shadow: 0 0 0 3px rgba(242, 180, 92, 0.16), 0 4px 12px -4px rgba(0, 0, 0, 0.4); } .profile-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; } .profile-panel { position: absolute; z-index: 45; top: 76px; right: 24px; width: min(354px, calc(100vw - 40px)); max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(235, 239, 245, 0.16) transparent; border: 1px solid transparent; border-radius: 24px; background: linear-gradient(150deg, rgba(24, 29, 37, 0.965), rgba(12, 15, 21, 0.97)) padding-box, linear-gradient(145deg, rgba(230, 237, 246, 0.24), rgba(205, 218, 232, 0.07) 64%) border-box; backdrop-filter: blur(38px) saturate(128%); -webkit-backdrop-filter: blur(38px) saturate(128%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 32px 100px rgba(0, 0, 0, 0.62), 0 4px 18px rgba(0, 0, 0, 0.28); animation: profile-panel-in 220ms cubic-bezier(0.16, 0.72, 0.25, 1) both; } .profile-panel::-webkit-scrollbar { width: 5px; } .profile-panel::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(235, 239, 245, 0.14); } .profile-panel[hidden] { display: none; } .profile-panel__content { padding: 24px; } .profile-panel[data-view='editor'] .profile-panel__content { padding-bottom: 20px; } .profile-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .profile-panel__title { font-family: var(--font-display); font-variation-settings: 'opsz' 32; font-size: 24px; line-height: 1.04; font-weight: 400; letter-spacing: -0.026em; color: rgba(249, 246, 241, 0.94); } .profile-panel__close { width: 29px; height: 29px; display: grid; place-items: center; flex: none; border: 0; border-radius: 50%; background: transparent; color: rgba(231, 237, 244, 0.4); transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; } .profile-panel__close:hover { background: rgba(255, 255, 255, 0.06); color: rgba(248, 245, 240, 0.82); transform: rotate(2deg); } .profile-panel__close-glyph { width: 15px; height: 15px; } .profile-panel__identity { display: flex; align-items: center; gap: 17px; padding: 7px 2px 26px; } .profile-panel__avatar { width: 68px; height: 68px; flex: none; border: 1px solid rgba(240, 222, 199, 0.38); box-shadow: 0 13px 30px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.09); font-family: var(--font-display); font-size: 23px; } .profile-panel__identity-copy { min-width: 0; display: grid; gap: 4px; } .profile-panel__identity-heading { min-width: 0; display: flex; align-items: center; gap: 7px; } .profile-panel__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-variation-settings: 'opsz' 30; font-size: 23px; line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; white-space: nowrap; color: rgba(248, 245, 240, 0.92); } .profile-panel__origin { display: inline-flex; align-items: center; flex: none; line-height: 1; } .profile-panel__meta { display: flex; flex-wrap: wrap; gap: 5px 11px; font-size: 11.5px; line-height: 1.4; color: rgba(226, 233, 242, 0.43); } .profile-panel__meta-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .profile-panel__flag { width: 14px; height: 10px; flex: none; object-fit: cover; border-radius: 1.5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); } .profile-panel__meta-pin { width: 12px; height: 12px; flex: none; color: rgba(224, 194, 154, 0.58); } .profile-panel__edit { width: 100%; display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 11px; min-height: 58px; border: 1px solid rgba(220, 231, 244, 0.09); border-radius: 15px; padding: 9px 12px 9px 10px; background: rgba(255, 255, 255, 0.028); text-align: left; color: rgba(245, 242, 237, 0.78); transition: border-color 170ms ease, background-color 170ms ease, transform 170ms ease; } .profile-panel__edit:hover { border-color: rgba(225, 234, 244, 0.17); background: rgba(255, 255, 255, 0.052); transform: translateY(-1px); } .profile-panel__edit-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(226, 201, 168, 0.12); border-radius: 50%; background: rgba(221, 191, 151, 0.055); } .profile-panel__edit-glyph { width: 15px; height: 15px; color: rgba(224, 195, 156, 0.7); } .profile-panel__edit-copy { min-width: 0; display: grid; gap: 2px; } .profile-panel__edit-copy strong { font-size: 12px; font-weight: 500; color: rgba(246, 243, 238, 0.82); } .profile-panel__edit-chevron { width: 13px; height: 13px; color: rgba(226, 233, 242, 0.28); transition: color 170ms ease, transform 170ms ease; } .profile-panel__edit:hover .profile-panel__edit-chevron { color: rgba(239, 229, 214, 0.58); transform: translateX(1px); } .profile-panel__local { display: flex; align-items: center; gap: 6px; margin-top: 15px; padding-left: 2px; font-size: 10px; color: rgba(226, 233, 242, 0.35); } .profile-panel__local-mark { width: 11px; height: 11px; flex: none; color: rgba(224, 190, 145, 0.48); } .profile-panel__photo-row { display: flex; align-items: center; gap: 16px; margin: 2px 0 22px; } .profile-panel__avatar--edit { width: 66px; height: 66px; } .profile-panel__photo-actions { display: grid; justify-items: start; grid-template-columns: auto auto; align-items: center; gap: 3px 7px; } .profile-panel__photo-pick { min-height: 35px; gap: 7px; padding: 0 13px; border-color: rgba(226, 233, 242, 0.13); background: rgba(255, 255, 255, 0.045); font-size: 10.5px; color: rgba(244, 241, 236, 0.72); transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; } .profile-panel__photo-pick-glyph { width: 13px; height: 13px; color: rgba(225, 199, 165, 0.67); } .profile-panel__photo-remove { border: 0; padding: 5px 4px; background: transparent; color: rgba(226, 233, 242, 0.38); font: 400 9.5px var(--font-ui); } .profile-panel__photo-remove:hover { color: rgba(246, 242, 236, 0.72); } .profile-panel__photo-hint { grid-column: 1 / -1; padding-left: 3px; font-size: 8.5px; color: rgba(226, 233, 242, 0.3); } .profile-panel__field { gap: 7px; margin-top: 14px; } .profile-panel__field > span { display: flex; justify-content: space-between; } .profile-panel__field small { font: inherit; color: rgba(226, 233, 242, 0.24); } .profile-panel__input { height: 44px; border-color: rgba(222, 232, 244, 0.11); border-radius: 12px; background-color: rgba(3, 6, 11, 0.4); font-size: 12.5px; } .profile-panel__input:hover:not(:focus) { border-color: rgba(222, 232, 244, 0.17); } .profile-panel__delete-field { margin-top: 2px; } .profile-panel__delete-confirmation { letter-spacing: 0.12em; } .profile-panel__select { background-position: calc(100% - 19px) 19px, calc(100% - 14px) 19px; } .profile-panel__country-control { position: relative; } .profile-panel__country-flag { position: absolute; z-index: 1; top: 50%; left: 15px; width: 15px; height: 11px; object-fit: cover; border-radius: 1.5px; pointer-events: none; transform: translateY(-50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11); } .profile-panel__country-control--flag .profile-panel__select { padding-left: 40px; } .profile-panel__error { min-height: 16px; margin-top: 5px; } .profile-panel[data-view='delete'] .profile-panel__error:empty { display: none; } .profile-panel__visibility { display: flex; align-items: flex-start; gap: 7px; margin-top: -2px; font-size: 9px; line-height: 1.5; color: rgba(226, 233, 242, 0.36); } .profile-panel__visibility-glyph { width: 12px; height: 12px; margin-top: 1px; flex: none; color: rgba(224, 190, 145, 0.5); } .profile-panel__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; padding-top: 16px; border-top: 1px solid rgba(222, 232, 244, 0.07); } .profile-panel[data-view='editor'] .profile-panel__actions { position: sticky; z-index: 2; bottom: -20px; margin-right: -24px; margin-left: -24px; padding: 14px 24px 20px; background: linear-gradient(180deg, rgba(14, 17, 23, 0.62), rgba(14, 17, 23, 0.99) 34%); } .profile-panel__cancel, .profile-panel__save { min-height: 38px; border: 0; border-radius: 999px; padding: 0 15px; font-size: 11.5px; } .profile-panel__cancel { background: transparent; color: rgba(230, 236, 243, 0.4); } .profile-panel__save { background: linear-gradient(135deg, #eee4d6, #d4b993); color: #18130f; box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 7px 18px rgba(169, 116, 62, 0.1); transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .profile-panel__cancel { transition: background-color 160ms ease, color 160ms ease; } .profile-panel__cancel:hover { background: rgba(255, 255, 255, 0.045); color: rgba(244, 241, 236, 0.7); } .profile-panel__save:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 10px 22px rgba(169, 116, 62, 0.16); } @keyframes profile-panel-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } } @media (max-width: 1050px) { .onboarding__scene { grid-template-columns: minmax(280px, 0.7fr) minmax(480px, 1fr); gap: 38px; padding-inline: 60px; } .onboarding__world { width: min(35vw, 390px); } .onboarding__world-caption { display: none; } } @media (max-width: 560px) { /* Preserve the centred place name: at phone-width the profile becomes its avatar alone, with the same accessible name and the full panel behind it. */ .profile-chip { right: 12px; width: 44px; padding: 4px; gap: 0; } .profile-chip__name { display: none; } } @media (max-height: 680px) { .onboarding__scene { padding-top: 62px; padding-bottom: 24px; } .onboarding__panel { padding: 26px 34px; } .onboarding__progress { margin-bottom: 19px; } .onboarding__body { min-height: 365px; } .onboarding__title { font-size: 35px; } .onboarding__copy { margin-top: 11px; line-height: 1.48; } .onboarding__field, .onboarding__field-row, .onboarding__photo { margin-top: 18px; } .onboarding__actions { margin-top: 16px; } } /* Standard-density displays have no spare sampling resolution for a slowly transformed background texture. Keep the authored scene static and let WebKit choose its native text antialiasing there; Retina retains the drift. */ @media (max-resolution: 1.25dppx) { .onboarding { -webkit-font-smoothing: auto; } .onboarding__world-image { animation: none; transform: none; } /* WebKit chooses its native text antialiasing at standard density. The shared panel tier owns the denser 1× material and shorter filter. */ .card { -webkit-font-smoothing: auto; } .card__action, .card__meta, .card__where { font-size: 13px; } .card__meta, .card__where { color: rgba(244, 239, 231, 0.48); } /* Perspective remains in portrait diameter, while interface strokes land on whole physical pixels. A single solid seat ring avoids WebKit repainting a fractional dashed border as solid during hover. */ .slot::after { border-width: var(--room-crisp-ring, 2px); border-style: solid; border-color: rgba(255, 238, 212, 0.42); } .slot:hover::after, .slot:focus-visible::after, .slot--pending::after { border-style: solid; border-color: var(--lamp); } .slot[aria-disabled='true']:not(.slot--pending):hover::after, .slot[aria-disabled='true']:not(.slot--pending):focus-visible::after { border-style: solid; border-color: rgba(255, 238, 212, 0.42); } /* The portrait may remain filtered, but its UI ring must not be rasterised in the same offscreen texture. This fixed-width layer stays crisp at every authored depth while the photograph itself still becomes smaller. */ .seat::before { content: ''; position: absolute; z-index: 1; inset: calc(-1 * var(--room-crisp-ring, 2px)); border: var(--room-crisp-ring, 2px) solid rgba(255, 238, 212, 0.82); border-radius: 50%; pointer-events: none; transition: border-color 200ms ease, box-shadow 200ms ease; } .seat__disc { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } .seat--you::before { border-color: var(--lamp); } .seat--actionable:hover::before, .seat--actionable:focus-visible::before { border-color: #ffd291; box-shadow: 0 0 18px rgba(242, 180, 92, 0.45); } .seat--actionable:hover .seat__disc, .seat--actionable:focus-visible .seat__disc, .seat--you .seat__disc { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } .seat__glyph { z-index: 2; bottom: -8%; } .seat--right .seat__glyph { right: -10%; } .seat--left .seat__glyph { left: -10%; } } @media (prefers-reduced-motion: reduce) { .onboarding-welcome, .onboarding__aurora, .onboarding__world-wrap, .onboarding__world-image, .onboarding__panel, .onboarding__body--arriving, .profile-panel { animation: none; } .onboarding-person, .onboarding-person__avatar-scale { transition: none; } } /* --- the pill ------------------------------------------------------------ */ .pill-body { background: transparent; } .pill { position: fixed; inset: 3px; display: flex; align-items: center; gap: 8px; padding: 0 15px; border-radius: 20px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; } .pill__glyph { width: 15px; height: 15px; color: var(--ink-faint); flex: none; } .pill__here { color: var(--ink); font-weight: 500; } .pill__dot { color: var(--ink-faint); } .pill__mine { overflow: hidden; text-overflow: ellipsis; } /* --- arriving ------------------------------------------------------------ */ /* Straight after a crossing the room's own chrome is held back briefly. The move should be the only thing on screen while it is still moving; a bar sliding in over it is a second thing to look at during the one moment that earns undivided attention. */ .room--arriving #top-bar { opacity: 0; transform: translateY(-8px); } /* --- launch safety and settings ---------------------------------------- */ .safety-dialog__backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(4, 5, 7, 0.64); animation: safety-backdrop-in 160ms ease-out both; } .safety-dialog { width: min(476px, calc(100vw - 36px)); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 29px 30px 24px; border-radius: 24px; color: rgba(247, 241, 233, 0.9); } .safety-dialog--compact { width: min(396px, calc(100vw - 36px)); } .safety-dialog--owner { width: min(510px, calc(100vw - 36px)); max-height: min(88dvh, 760px); overflow-y: auto; } .safety-dialog__title { margin: 0; font: 500 18px/1.3 var(--font-ui); letter-spacing: -0.015em; color: rgba(251, 246, 239, 0.96); } .safety-dialog__copy { margin: 13px 0 0; color: rgba(235, 226, 216, 0.6); font-size: 13.5px; line-height: 1.52; } .safety-dialog__copy--prompt { margin-top: 17px; } .safety-dialog__context { width: max-content; margin: 9px 0 0; color: rgba(224, 194, 154, 0.62); font-size: 11px; letter-spacing: 0.035em; } .safety-dialog__message { max-height: 86px; margin: 16px 0 0; padding: 11px 13px 12px; overflow-y: auto; border-left: 2px solid rgba(226, 182, 124, 0.58); border-radius: 0 12px 12px 0; background: rgba(255, 248, 238, 0.045); color: rgba(246, 238, 228, 0.78); font: 400 13px/1.46 var(--font-ui); overflow-wrap: anywhere; white-space: pre-wrap; } .safety-dialog__categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 14px 0 17px; padding: 0; border: 0; } .safety-dialog__categories legend { margin-bottom: 9px; color: rgba(235, 226, 216, 0.47); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; } .safety-dialog__choices, .safety-dialog__reset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 18px 0 2px; padding: 0; border: 0; } .safety-dialog__reset { grid-template-columns: repeat(2, minmax(0, 1fr)); } .safety-dialog__choices legend, .safety-dialog__reset legend { grid-column: 1 / -1; margin-bottom: 2px; color: rgba(235, 226, 216, 0.47); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; } .safety-dialog__choice, .safety-dialog__reset-item { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 1px solid rgba(244, 231, 214, 0.1); border-radius: 13px; background: rgba(255, 249, 240, 0.025); color: rgba(245, 237, 228, 0.68); font: 400 12px/1.2 var(--font-ui); cursor: pointer; } .safety-dialog__reset-item { justify-content: flex-start; } .safety-dialog__choice:has(input:checked), .safety-dialog__reset-item:has(input:checked) { border-color: rgba(226, 194, 151, 0.36); background: rgba(226, 194, 151, 0.085); color: rgba(251, 244, 235, 0.92); } .safety-dialog__choice input, .safety-dialog__reset-item input { width: 15px; height: 15px; flex: none; margin: 0; border: 1px solid rgba(244, 231, 214, 0.36); background: transparent; appearance: none; -webkit-appearance: none; } .safety-dialog__choice input { border-radius: 50%; } .safety-dialog__reset-item input { border-radius: 4px; } .safety-dialog__choice input:checked { border-color: rgba(238, 198, 143, 0.8); background: radial-gradient(circle, rgba(238, 198, 143, 0.96) 0 3px, transparent 3.5px); } .safety-dialog__reset-item input:checked { border-color: rgba(238, 198, 143, 0.8); background: rgba(238, 198, 143, 0.88); box-shadow: inset 0 0 0 3px rgba(35, 27, 22, 0.88); } .safety-dialog__choice input:focus-visible, .safety-dialog__reset-item input:focus-visible { outline: 2px solid rgba(238, 198, 143, 0.5); outline-offset: 3px; } .safety-dialog__categories--owner { margin-top: 18px; } .safety-dialog__category { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 45px; padding: 0 12px; border: 1px solid rgba(244, 231, 214, 0.1); border-radius: 13px; background: rgba(255, 249, 240, 0.025); color: rgba(245, 237, 228, 0.69); font-size: 12.5px; line-height: 1.2; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .safety-dialog__category:hover { border-color: rgba(226, 194, 151, 0.22); background: rgba(226, 194, 151, 0.045); color: rgba(249, 242, 233, 0.84); } .safety-dialog__category input { width: 15px; height: 15px; flex: none; margin: 0; border: 1px solid rgba(244, 231, 214, 0.36); border-radius: 50%; background: transparent; appearance: none; -webkit-appearance: none; } .safety-dialog__category input:checked { border-color: rgba(238, 198, 143, 0.8); background: radial-gradient(circle, rgba(238, 198, 143, 0.96) 0 3px, transparent 3.5px); } .safety-dialog__category input:focus-visible { outline: 2px solid rgba(238, 198, 143, 0.5); outline-offset: 3px; } .safety-dialog__category:has(input:checked) { border-color: rgba(226, 194, 151, 0.36); background: rgba(226, 194, 151, 0.085); color: rgba(251, 244, 235, 0.92); } .safety-dialog__note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 8px; } .safety-dialog__note-label { color: rgba(241, 233, 224, 0.7); font-size: 12px; } .safety-dialog__note-count { color: rgba(235, 226, 216, 0.35); font-size: 10.5px; } .safety-dialog__note { width: 100%; min-height: 84px; resize: vertical; border: 1px solid rgba(244, 231, 214, 0.12); border-radius: 13px; padding: 11px 12px; background: rgba(3, 3, 4, 0.28); color: rgba(249, 243, 235, 0.9); font: 400 13px/1.48 var(--font-ui); transition: border-color 150ms ease, box-shadow 150ms ease; } .safety-dialog__note::placeholder { color: rgba(235, 226, 216, 0.32); } .safety-dialog__note:focus { outline: none; border-color: rgba(226, 194, 151, 0.38); box-shadow: 0 0 0 3px rgba(226, 194, 151, 0.055); } .safety-dialog__status { margin: 11px 1px 0; color: rgba(232, 183, 144, 0.86); font-size: 11.5px; line-height: 1.4; } .safety-dialog__status:empty { display: none; } .safety-dialog__actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(244, 231, 214, 0.08); } .safety-dialog__actions button { min-height: 38px; border: 1px solid transparent; border-radius: 12px; padding: 0 14px; font: 500 12px var(--font-ui); transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease; } .safety-dialog__actions button:hover:not(:disabled) { transform: translateY(-1px); } .safety-dialog__actions button:focus-visible { outline: 2px solid rgba(238, 198, 143, 0.4); outline-offset: 2px; } .safety-dialog__quiet { margin-right: auto; background: transparent; color: rgba(239, 232, 223, 0.48); } .safety-dialog__quiet:hover:not(:disabled) { background: rgba(255, 255, 255, 0.04); color: rgba(246, 239, 231, 0.72); } .safety-dialog__secondary { border-color: rgba(244, 231, 214, 0.11) !important; background: rgba(255, 250, 243, 0.035); color: rgba(245, 237, 228, 0.66); } .safety-dialog__secondary:hover:not(:disabled) { border-color: rgba(244, 231, 214, 0.2) !important; background: rgba(255, 250, 243, 0.065); color: rgba(250, 243, 235, 0.86); } .safety-dialog__danger { border-color: rgba(207, 139, 115, 0.21) !important; background: rgba(157, 78, 61, 0.3); color: rgba(255, 229, 220, 0.91); } .safety-dialog__danger:hover:not(:disabled) { border-color: rgba(221, 151, 125, 0.34) !important; background: rgba(170, 85, 66, 0.4); color: rgba(255, 237, 231, 0.98); } .safety-dialog__actions button:disabled { opacity: 0.45; } @keyframes safety-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes safety-dialog-in { from { opacity: 0; transform: translateY(5px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .safety-dialog__backdrop, .safety-dialog { animation: none; } } .profile-chip, .profile-panel { position: fixed; } .profile-chip { z-index: 90; } .profile-panel { z-index: 95; } .profile-chip--room { width: 42px; max-width: 42px; height: 42px; padding: 3px; } .profile-chip--room .profile-chip__avatar { width: 34px; height: 34px; } .profile-chip--room .profile-chip__name { display: none; } .profile-panel__edit { grid-template-columns: 1fr 16px; min-height: 48px; padding: 8px 12px; margin-top: 7px; } .profile-panel__edit-copy { min-width: 0; display: grid; gap: 2px; } .profile-panel__edit--danger { margin-top: 12px; } .profile-panel__edit--danger strong { color: rgba(244, 184, 169, 0.76); } /* A section heading inside a settings view — quieter than the view's own title, because it names a group rather than the place you are in. */ .profile-panel__section { margin: 4px 2px 8px; color: rgba(238, 237, 235, 0.5); font: 500 11px/1.3 var(--font-ui); letter-spacing: 0.02em; } .profile-panel__toggles { display: grid; gap: 3px; padding: 3px; border: 1px solid rgba(220, 231, 244, 0.08); border-radius: 15px; background: rgba(255, 255, 255, 0.022); } .profile-panel__toggle { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 10px 9px 12px; border: 0; border-radius: 11px; background: transparent; color: inherit; cursor: default; text-align: left; transition: background-color 150ms ease; } .profile-panel__toggle:hover, .profile-panel__toggle:focus-visible { outline: 0; background: rgba(255, 255, 255, 0.055); } .profile-panel__toggle-label { color: rgba(249, 248, 246, 0.86); font: 450 12.5px/1.3 var(--font-ui); } .profile-panel__switch { position: relative; width: 34px; height: 19px; flex: none; border-radius: 999px; background: rgba(255, 255, 255, 0.11); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.24); transition: background-color 180ms ease; } .profile-panel__toggle[aria-checked='true'] .profile-panel__switch { background: rgba(242, 180, 92, 0.8); } .profile-panel__switch-knob { position: absolute; top: 2.5px; left: 2.5px; width: 14px; height: 14px; border-radius: 50%; background: rgba(253, 251, 247, 0.96); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); } .profile-panel__toggle[aria-checked='true'] .profile-panel__switch-knob { transform: translateX(15px); } .profile-panel__preference-note { margin: 10px 3px 0; color: rgba(226, 233, 242, 0.52); font: 400 11px/1.45 var(--font-ui); } @media (prefers-reduced-motion: reduce) { .profile-panel__switch-knob { transition-duration: 1ms; } } .profile-panel__choices { display: grid; gap: 2px; margin-bottom: 14px; } .profile-panel__choice { width: 100%; display: flex; align-items: flex-start; gap: 11px; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: default; text-align: left; transition: background-color 150ms ease; } .profile-panel__choice:hover, .profile-panel__choice:focus-visible { outline: 0; background: rgba(255, 255, 255, 0.06); } .profile-panel__choice-mark { flex: none; width: 15px; height: 15px; margin-top: 1px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 50%; transition: border-color 160ms ease, box-shadow 180ms ease; } .profile-panel__choice[aria-checked='true'] .profile-panel__choice-mark { /* --lamp is for the current user, and a preference about who may reach you is as much about you as anything in here. */ border-color: rgba(242, 180, 92, 0.85); box-shadow: inset 0 0 0 3.5px rgba(242, 180, 92, 0.85); } .profile-panel__choice-copy { min-width: 0; display: grid; gap: 3px; } .profile-panel__choice-copy strong { color: rgba(249, 248, 246, 0.88); font: 450 12.5px/1.35 var(--font-ui); } .profile-panel__choice-copy span { color: rgba(238, 237, 235, 0.46); font: 400 11px/1.35 var(--font-ui); } .profile-panel__blocked-list { display: grid; gap: 7px; margin-bottom: 18px; } .profile-panel__blocked-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; padding: 7px 8px 7px 12px; border: 1px solid rgba(235, 240, 247, 0.08); border-radius: 12px; color: rgba(245, 242, 237, 0.76); font-size: 13px; } /* --- signed updates ----------------------------------------------------- */ /* An update is a threshold, not a notification. It sits at the bottom of the room like a small glass card left on a table: warm-edged, restrained, and silent until there is something the user can do. */ .update-card { position: fixed; z-index: 108; left: 50%; bottom: 24px; width: min(386px, calc(100vw - 32px)); padding: 20px 20px 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 18px; background: linear-gradient(145deg, rgba(31, 29, 27, 0.7), rgba(9, 10, 12, 0.76)); backdrop-filter: blur(26px) saturate(175%) contrast(106%); -webkit-backdrop-filter: blur(26px) saturate(175%) contrast(106%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), inset 1px 0 rgba(255, 255, 255, 0.055), inset 0 -1px rgba(0, 0, 0, 0.38), 0 24px 74px rgba(0, 0, 0, 0.46); color: var(--ink); animation: update-card-in 180ms ease-out both; translate: -50% 0; } .update-card[hidden] { display: none; } .update-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(85% 58% at 12% -5%, rgba(255, 255, 255, 0.17), transparent 62%), radial-gradient(72% 68% at 105% 118%, rgba(242, 180, 92, 0.095), transparent 65%), linear-gradient(105deg, rgba(255, 255, 255, 0.035), transparent 38% 68%, rgba(255, 255, 255, 0.025)); pointer-events: none; } .update-card::after { content: ''; position: absolute; inset: auto 22px -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 180, 92, 0.52), transparent); pointer-events: none; } .update-card > * { position: relative; z-index: 1; } .update-card__heading { display: flex; align-items: center; gap: 13px; } .update-card__heading-copy { min-width: 0; } .update-card__mark { position: relative; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 50%; background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.13), transparent 37%), radial-gradient(circle at 50% 58%, rgba(242, 180, 92, 0.11), rgba(8, 9, 11, 0.16) 68%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 4px rgba(255, 255, 255, 0.018); } .update-card__mark-core { position: absolute; inset: 13px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 13px rgba(242, 180, 92, 0.42); } .update-card__title { margin: 0; color: rgba(249, 246, 241, 0.95); font: 400 21px/1.12 var(--font-display); font-variation-settings: 'opsz' 26; } .update-card__copy { margin: 14px 0 0 49px; color: rgba(238, 239, 241, 0.66); font-size: 12.5px; line-height: 1.46; } .update-card__progress { position: relative; display: block; height: 2px; margin: 17px 2px 0 49px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.07); } .update-card__progress[hidden], .update-card__progress-label[hidden] { display: none; } .update-card__progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(196, 141, 76, 0.72), rgba(242, 180, 92, 0.96)); transition: width 160ms ease-out; } .update-card__progress--indeterminate .update-card__progress-fill { animation: update-progress-wander 1.15s ease-in-out infinite alternate; } .update-card__progress-label { min-height: 15px; margin: 7px 0 0 49px; color: rgba(237, 208, 170, 0.66); font-size: 10.5px; line-height: 1.4; } .update-card__actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 17px; } .update-card__button { min-height: 34px; border: 1px solid transparent; border-radius: 999px; padding: 0 14px; font: 600 11.5px/1 var(--font-ui); letter-spacing: 0.005em; transition: border-color 140ms ease, background 140ms ease, color 140ms ease; } .update-card__button--quiet { background: transparent; color: rgba(243, 241, 237, 0.62); } .update-card__button--quiet:hover { color: rgba(249, 246, 241, 0.8); background: rgba(255, 255, 255, 0.035); } .update-card__button--primary { border-color: rgba(255, 255, 255, 0.15); background: radial-gradient(120% 170% at 25% -70%, rgba(255, 255, 255, 0.16), transparent 52%), linear-gradient(145deg, rgba(229, 190, 141, 0.16), rgba(117, 90, 62, 0.12)); color: rgba(252, 243, 230, 0.9); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 7px 22px rgba(0, 0, 0, 0.14); } .update-card__button--primary:hover { border-color: rgba(242, 218, 188, 0.28); background: radial-gradient(120% 170% at 25% -70%, rgba(255, 255, 255, 0.2), transparent 52%), linear-gradient(145deg, rgba(229, 190, 141, 0.23), rgba(117, 90, 62, 0.16)); } .update-card__button:focus-visible { outline: 2px solid rgba(242, 180, 92, 0.68); outline-offset: 2px; } .update-card__button:disabled { opacity: 0.43; } @keyframes update-card-in { from { opacity: 0; } to { opacity: 1; } } @keyframes update-progress-wander { from { margin-left: 0; } to { margin-left: 80%; } } @media (max-width: 520px) and (pointer: coarse) { .update-card { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); width: auto; padding: 18px 17px 15px; border-radius: 22px 22px 15px 15px; translate: 0 0; } .update-card__heading { gap: 11px; } .update-card__mark { width: 34px; height: 34px; flex-basis: 34px; } .update-card__mark-core { inset: 12px; } .update-card__title { font-size: 20px; } .update-card__copy, .update-card__progress, .update-card__progress-label { margin-left: 0; } .update-card__copy { margin-top: 12px; font-size: 12.5px; line-height: 1.48; } .update-card__actions { align-items: stretch; margin-top: 14px; } .update-card__button { min-height: 44px; padding-inline: 15px; } .update-card__button--quiet { margin-right: auto; } } /* The room's portrait pan control remains available beneath a pending update. Landscape keeps the compact card, but touch controls never shrink below the same 44px target used in portrait. */ @media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse) { body:has(.room--mobile-camera) .update-card { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 38px); } } @media (pointer: coarse) and (max-width: 1024px) { .update-card__button { min-height: 44px; } } /* Lower-density panels get less optical blur and more pigment. The glass still reads as glass, while glyph and text layers remain sharply rasterized. */ @media (max-resolution: 1.25dppx) { .update-card { background: linear-gradient(145deg, rgba(30, 28, 26, 0.88), rgba(9, 10, 12, 0.91)); backdrop-filter: blur(15px) saturate(145%); -webkit-backdrop-filter: blur(15px) saturate(145%); } } @media (prefers-reduced-motion: reduce) { .update-card, .update-card__progress--indeterminate .update-card__progress-fill { animation: none; } .update-card__progress-fill { transition: none; } } .profile-panel__unblock { border: 0; border-radius: 999px; padding: 7px 10px; background: rgba(255, 255, 255, 0.055); color: rgba(239, 242, 247, 0.62); font-size: 11.5px; } .profile-panel__loading { color: rgba(229, 235, 243, 0.44); font-size: 12px; } .profile-panel__footer { display: flex; align-items: center; justify-content: space-between; margin: 20px 2px 0; padding-top: 14px; border-top: 1px solid rgba(235, 240, 247, 0.08); color: rgba(229, 235, 243, 0.27); font-size: 10.5px; } .profile-panel__discord { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 3px; background: transparent; color: rgba(229, 235, 243, 0.46); font-size: 10.5px; } .profile-panel__discord-icon { width: 13px; height: 13px; } .profile-panel__save--danger:not(:disabled) { background: rgba(176, 91, 70, 0.26); color: rgba(255, 226, 217, 0.9); } .profile-panel__save--danger:disabled { background: rgba(255, 255, 255, 0.045); color: rgba(229, 235, 243, 0.25); box-shadow: none; cursor: default; } .account-terminal { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 32px; text-align: center; background: radial-gradient(circle at 50% 34%, rgba(69, 86, 110, 0.23), transparent 42%), #080b10; user-select: none; -webkit-user-select: none; } .account-terminal h1 { margin: 0; font: 400 34px var(--font-display); color: rgba(249, 246, 241, 0.94); } .account-terminal p { max-width: 480px; margin: 0; color: rgba(229, 235, 243, 0.55); line-height: 1.55; } .account-terminal button { margin-top: 8px; border: 1px solid rgba(235, 240, 247, 0.12); border-radius: 999px; padding: 9px 15px; background: rgba(255, 255, 255, 0.05); color: rgba(249, 246, 241, 0.82); } .onboarding-place__error { min-height: 18px; margin-top: 12px; color: rgba(242, 188, 167, 0.78); font-size: 11.5px; text-align: center; } .onboarding--submitting .onboarding-place__enter, .onboarding--submitting .onboarding-place__community { pointer-events: none; opacity: 0.45; } /* --- narrow live room --------------------------------------------------- */ /* Invisible on desktop. In portrait this is the only persistent chrome the room receives: a tiny map of its wide painting, kept below the people and above the vignette. The thumb is the window, not a carousel position. */ .room-camera-nav { position: absolute; z-index: 29; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); display: none; align-items: center; width: 106px; height: 26px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 999px; background: rgba(13, 12, 12, 0.28); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22); opacity: 0.82; transform: translateX(-50%); transition: opacity 180ms ease; } .room-camera-nav__range { width: 100%; height: 24px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; } .room-camera-nav__range::-webkit-slider-runnable-track { height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(244, 239, 231, 0.16), rgba(244, 239, 231, 0.34), rgba(244, 239, 231, 0.16)); } .room-camera-nav__range::-webkit-slider-thumb { width: 22px; height: 5px; margin-top: -1.5px; border: 0; border-radius: 999px; appearance: none; -webkit-appearance: none; background: rgba(246, 226, 198, 0.88); box-shadow: 0 1px 7px rgba(0, 0, 0, 0.48), 0 0 9px rgba(235, 203, 163, 0.12); } .room-camera-nav__range::-moz-range-track { height: 2px; border: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(244, 239, 231, 0.16), rgba(244, 239, 231, 0.34), rgba(244, 239, 231, 0.16)); } .room-camera-nav__range::-moz-range-thumb { width: 22px; height: 5px; border: 0; border-radius: 999px; background: rgba(246, 226, 198, 0.88); box-shadow: 0 1px 7px rgba(0, 0, 0, 0.48), 0 0 9px rgba(235, 203, 163, 0.12); } .room-camera-nav:has(.room-camera-nav__range:focus-visible) { opacity: 1; outline: 1px solid rgba(243, 215, 178, 0.58); outline-offset: 2px; } .room-camera-hint { position: absolute; z-index: 30; left: 50%; bottom: max(51px, calc(env(safe-area-inset-bottom) + 39px)); display: none; align-items: center; gap: 9px; padding: 8px 13px 8px 11px; border: 1px solid rgba(255, 244, 227, 0.14); border-radius: 999px; background: rgba(14, 12, 11, 0.58); color: rgba(252, 241, 225, 0.88); font: 500 11px/1 var(--font-ui); letter-spacing: 0.025em; pointer-events: none; opacity: 0; backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 10px 32px rgba(0, 0, 0, 0.3); transform: translate(-50%, 5px); transition: opacity 360ms ease, transform 500ms cubic-bezier(0.2, 0.75, 0.2, 1); } .room-camera-hint__gesture { width: 27px; height: 16px; display: block; color: rgba(246, 221, 187, 0.82); } .room-camera-hint__gesture svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } .room-camera-hint--visible { opacity: 1; transform: translate(-50%, 0); } .room--mobile-camera { touch-action: none; } .room--mobile-camera .room-camera-nav { display: flex; } .room--mobile-camera .room-camera-hint { display: flex; } .room--camera-dragging .room-camera-nav { opacity: 1; } .room--camera-dragging .seat, .room--camera-dragging .slot { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .room-camera-hint { transition-duration: 1ms; } .room-message { translate: 0 0; transition: opacity 1ms linear; } } @media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse) { :root { --bar-inset: max(10px, env(safe-area-inset-top)); --chrome-left: max(10px, env(safe-area-inset-left)); } .platform-macos { --chrome-left: max(10px, env(safe-area-inset-left)); } #top-bar { max-width: calc(100vw - 72px - env(safe-area-inset-right)); gap: 7px; padding-left: 13px; } .bar__prompt { position: fixed; top: calc(var(--bar-inset) + var(--bar-h) + 8px); left: 50%; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; padding: 5px 10px; border-radius: 999px; background: rgba(12, 10, 9, 0.42); transform: translateX(-50%); } .profile-chip--room { top: max(12px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); } #top-scrim { height: 104px; -webkit-mask-image: linear-gradient(to right, #000 0, #000 72%, transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 72%, transparent 100%); } .seat::after { inset: -14%; } .slot::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; } } /* Touch screens use sheets for things you act on. The painting remains fully present above them; none of these surfaces becomes a separate mobile page. */ @media (pointer: coarse) and (max-width: 1024px) { button, .onboarding__photo-button { -webkit-tap-highlight-color: transparent; } .icon-btn { width: 44px; height: 44px; } .profile-chip--room { width: 44px; max-width: 44px; height: 44px; } #top-bar .bar__prompt--move { display: none; } .move-prompt-mobile { position: fixed; top: calc(var(--move-prompt-viewport-top, 0px) + max(10px, env(safe-area-inset-top)) + var(--bar-h) + 8px); left: var(--move-prompt-centre, 50%); z-index: 52; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: min(198px, calc(100vw - 24px)); max-width: calc(100vw - 24px); min-height: 48px; padding: 2px 44px; overflow: visible; border: 1px solid rgba(255, 240, 220, 0.16); border-radius: 999px; background: linear-gradient(145deg, rgba(66, 49, 40, 0.5), rgba(22, 20, 19, 0.62)); color: rgba(249, 239, 225, 0.74); backdrop-filter: blur(20px) saturate(158%) brightness(1.08); -webkit-backdrop-filter: blur(20px) saturate(158%) brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 250, 242, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 10px 30px rgba(0, 0, 0, 0.24); pointer-events: none; transform: translateX(-50%); } .move-prompt-mobile[hidden] { display: none; } .move-prompt-mobile--pending { width: auto; min-height: 38px; padding-inline: 14px; } .move-prompt-mobile__label, .move-prompt-mobile__pending { color: rgba(253, 245, 234, 0.84); font: 500 12.5px/1 var(--font-ui); letter-spacing: 0.005em; white-space: nowrap; } .move-prompt-mobile__cancel { position: absolute; top: 50%; right: 1px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(250, 239, 224, 0.66); font: 300 21px/1 var(--font-ui); pointer-events: auto; transform: translateY(-50%); transition: color 150ms ease, background 150ms ease; } .move-prompt-mobile__cancel:active { background: rgba(255, 240, 220, 0.09); color: rgba(255, 247, 236, 0.96); } .move-prompt-mobile__cancel:focus-visible { outline: 1px solid rgba(255, 222, 179, 0.48); outline-offset: -4px; } .card { position: absolute; top: auto !important; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)) !important; width: auto; min-width: 0; max-width: none; padding: 23px 19px 17px; border-radius: 24px 24px 16px 16px; max-height: min(88dvh, 720px); overflow-y: auto; overscroll-behavior: contain; transform: none !important; } .card.card--own:not(.card--composing) { min-width: 0; max-width: none; } .card::before { display: none; } .card::after { content: ''; position: absolute; top: 8px; left: 50%; width: 34px; height: 3px; border-radius: 999px; background: rgba(244, 239, 231, 0.2); transform: translateX(-50%); } .card__more { width: 40px; height: 38px; margin: -9px -8px -7px auto; } .card__actions { gap: 7px; } .card__action, .card__gesture { min-height: 44px; } .card__menu-item { min-height: 44px; padding-inline: 11px; } .card__menu { position: static; width: auto; margin: 12px -6px -3px; padding: 9px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0; background: transparent; box-shadow: none; } .card--composing { width: auto; } .room-composer { margin-top: 3px; padding-top: 4px; border-top: 0; } .room-composer__input { min-height: 96px; font-size: 16px; } .room-composer__cancel, .room-composer__send { min-height: 42px; padding-inline: 14px; } .room-message { max-width: min(78vw, 286px); font-size: 13px; } .lately__message-more { top: 3px; right: 2px; width: 44px; height: 44px; opacity: 0.72; } .lately-actions__item { min-height: 46px; padding: 11px 12px; } .ask-scrim { left: var(--room-visual-left, 0px); right: auto; top: var(--room-visual-top, 0px); bottom: auto; width: var(--room-visual-width, 100%); height: var(--room-visual-height, 100%); place-items: safe end center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); } .ask, .confirm { width: 100%; min-width: 0; max-width: 620px; max-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: 26px 26px 16px 16px; } .ask::-webkit-scrollbar, .confirm::-webkit-scrollbar { display: none; } .ask { gap: 16px; padding: 26px 14px 17px; } .ask__options { width: 100%; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } .ask__choice { min-width: 0; min-height: 70px; gap: 8px; padding: 13px 3px 10px; font-size: 10.5px; } .ask__choice > span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.12; text-align: center; } .ask__enter { min-width: 92px; min-height: 44px; } .ask__input { min-height: 86px; font-size: 16px; } .confirm { padding: 31px 22px max(24px, env(safe-area-inset-bottom)); } .confirm__stay, .confirm__go { min-height: 46px; } .profile-panel { top: auto; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); width: auto; max-height: min(84dvh, 720px); border-radius: 26px 26px 16px 16px; transform-origin: bottom center; } .profile-panel__close { width: 42px; height: 42px; margin: -7px -8px 0 0; } .profile-panel__cancel, .profile-panel__save, .profile-panel__unblock { min-height: 44px; } .safety-dialog__backdrop { place-items: end center; padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); } .safety-dialog { width: 100%; max-height: min(92dvh, 680px); overflow-y: auto; padding: 27px 19px max(17px, env(safe-area-inset-bottom)); border-radius: 26px 26px 16px 16px; } .safety-dialog__categories { gap: 6px; } .safety-dialog__choices, .safety-dialog__reset { gap: 6px; } .safety-dialog__choice, .safety-dialog__reset-item { min-height: 46px; font-size: 12px; } .safety-dialog__category { min-height: 46px; padding-inline: 10px; font-size: 12px; } .safety-dialog__note { min-height: 78px; resize: none; } .safety-dialog__actions { gap: 5px; margin-top: 18px; padding-top: 14px; } .safety-dialog__actions button { min-width: 0; min-height: 42px; padding-inline: 11px; } .safety-dialog__actions--report .safety-dialog__danger { flex: 1.15; } .safety-dialog__actions--report .safety-dialog__secondary { flex: 0.85; } } /* On a portrait phone, five compressed tiles read like a clipped desktop toolbar. Three choices followed by two centred choices give every activity a calm touch target without turning the picker into a horizontal carousel. */ @media (pointer: coarse) and (orientation: portrait) and (max-width: 479px) { .ask__options { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px 6px; } .ask__choice { grid-column: span 2; min-height: 78px; padding: 14px 6px 11px; font-size: 12px; } .ask__choice:nth-child(4) { grid-column: 2 / span 2; } .ask__choice:nth-child(5) { grid-column: 4 / span 2; } } /* The onboarding keeps the landing page's circular glimpse on phones, then turns the form into one generous column beneath it. */ @media (max-width: 700px) { .onboarding { width: 100%; max-width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } /* Safari includes visually overflowing descendants when it chooses its initial page scale. Keep the atmospheric aurora inside the mobile stage: the same glow remains, but it can no longer make a 402px phone negotiate a wider layout viewport before an input receives focus. */ .onboarding__aurora { inset: 0; transform: scale(1.4); } .onboarding::-webkit-scrollbar { display: none; } .onboarding__brand { position: fixed; top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); } .onboarding__scene { position: relative; min-height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 25px; padding: calc(max(20px, env(safe-area-inset-top)) + 66px) 20px max(34px, env(safe-area-inset-bottom)); } .onboarding__world-wrap { justify-self: center; gap: 0; } .onboarding__world { width: min(47vw, 190px); } .onboarding__world-caption, .onboarding-person__card { display: none; } .onboarding__panel, .onboarding--name .onboarding__panel, .onboarding--photo .onboarding__panel, .onboarding--place .onboarding__panel { width: min(100%, 480px); justify-self: center; } .onboarding--name .onboarding__title, .onboarding--photo .onboarding__title, .onboarding--place .onboarding__title { max-width: 340px; white-space: normal; font-size: clamp(34px, 10vw, 42px); line-height: 0.98; } .onboarding-name__entry { height: 58px; margin-top: 25px; padding-left: 18px; } .onboarding--photo .onboarding__body { transform: none; } .onboarding--photo .onboarding__title { margin-top: 20px; } .onboarding-step__back { top: 12px; left: 0; width: 44px; height: 44px; } .onboarding-photo__choices { width: 100%; flex-direction: column; gap: 7px; margin-top: 25px; } .onboarding-photo__choose, .onboarding-photo__continue { width: min(100%, 280px); justify-content: center; } .onboarding--place .onboarding__body { height: auto; min-height: 0; } .onboarding-place__optional { position: static; order: 0; transform: none; } .onboarding-place__back { top: -8px; } .onboarding--place .onboarding__title { order: 1; margin-top: 10px; transform: none; } .onboarding-place__fields { position: static; order: 2; width: 100%; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; transform: none; } .onboarding-place__enter { position: static; order: 3; min-width: 132px; min-height: 48px; justify-content: center; margin-top: 18px; transform: none; } .onboarding-place__enter:hover { transform: translateY(-1px); } .onboarding-place__community { position: static; order: 4; min-height: 44px; margin-top: 4px; transform: none; } .onboarding-place__community:hover { transform: translateY(-1px); } .onboarding-place__error { order: 5; } } @media (max-width: 700px) and (max-height: 690px) { .onboarding__scene { align-content: start; } .onboarding__world { width: min(31vw, 138px); } } /* --- browser-safe readable materials ----------------------------------- Browser compositors do not agree on how nested backdrop filters sample the transformed room, its video and its WebGL layers. The native WKWebView keeps the authored glass above; web reading and decision surfaces instead carry enough warm pigment to remain legible before blur is applied. Blur is depth, never the thing deciding whether a chair or face can be read through text. */ .platform-web .ask-scrim { background: rgba(8, 6, 5, 0.3); backdrop-filter: none; -webkit-backdrop-filter: none; } .platform-web .ask-scrim--light { background: rgba(8, 6, 5, 0.22); } .platform-web .safety-dialog__backdrop, .platform-web .safety-dialog { backdrop-filter: none; -webkit-backdrop-filter: none; } .platform-web .ask { border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 240, 218, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 24px 70px rgba(0, 0, 0, 0.48); } .platform-web .ask__choice { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.1); } .platform-web .ask__input { background: rgba(8, 6, 5, 0.42); border-color: rgba(255, 238, 215, 0.14); box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.18); } .platform-web .lately { background: linear-gradient(150deg, rgba(52, 33, 23, 0.91), rgba(25, 20, 18, 0.95)) padding-box, linear-gradient(160deg, rgba(255, 239, 217, 0.26), rgba(255, 255, 255, 0.07) 52%, rgba(242, 180, 92, 0.14)) border-box; backdrop-filter: blur(20px) saturate(132%); -webkit-backdrop-filter: blur(20px) saturate(132%); } .platform-web .update-card { background: linear-gradient(145deg, rgba(51, 34, 25, 0.91), rgba(22, 19, 17, 0.95)); backdrop-filter: blur(20px) saturate(138%); -webkit-backdrop-filter: blur(20px) saturate(138%); } @media (max-resolution: 1.25dppx) { .platform-web .lately, .platform-web .update-card { backdrop-filter: none; -webkit-backdrop-filter: none; } .platform-web .lately { background: linear-gradient(150deg, rgba(49, 33, 25, 0.97), rgba(23, 20, 18, 0.985)); } .platform-web .update-card { background: linear-gradient(145deg, rgba(47, 33, 26, 0.97), rgba(20, 18, 17, 0.985)); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .platform-web .lately { background: linear-gradient(150deg, rgba(49, 33, 25, 0.97), rgba(23, 20, 18, 0.985)); } .platform-web .update-card { background: linear-gradient(145deg, rgba(47, 33, 26, 0.97), rgba(20, 18, 17, 0.985)); } /* The shared chrome material owns its generic fallback. The profile chip is the remaining legacy chrome consumer and keeps the same pigment here until it adopts that primitive. */ .profile-chip { background: linear-gradient(150deg, rgba(46, 33, 26, 0.94), rgba(22, 19, 17, 0.965)) padding-box, linear-gradient( 158deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.28) ) border-box; } } /* iOS zooms a page when an editable control computes below 16px. Keep this a browser-only, narrow-viewport guarantee rather than relying on pointer media features: touch reporting varies. A small margin over the nominal threshold also survives Safari's custom-font rounding and non-default display scales. The intentionally large onboarding name remains untouched. */ @media (max-width: 1024px) { .platform-web input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='hidden']):not(.onboarding-name__input), .platform-web textarea, .platform-web select { font-size: 17px; } } /* iPhone Safari can start a viewport around 0.85x while fitting its browser chrome. Its focus heuristic considers the rendered result, so a nominal 16-17px control can still be enlarged. `-webkit-touch-callout` identifies the iOS engine without disabling pinch zoom for anybody. At 19px the text remains optically about 16px at that baseline and focus stays stationary. */ @supports (-webkit-touch-callout: none) { @media (max-width: 1024px) { .platform-web input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='hidden']):not(.onboarding-name__input), .platform-web textarea, .platform-web select { font-size: 19px; } } } /* The one reading-surface material used by every window opened over a place. Layout belongs to each feature; pigment, rim, blur and depth do not. */ .manyplace-panel-glass { border: 1px solid transparent; background: linear-gradient(158deg, var(--panel-tint-a), var(--panel-tint-b)) padding-box, var(--panel-rim) border-box; -webkit-backdrop-filter: var(--panel-filter); backdrop-filter: var(--panel-filter); box-shadow: var(--panel-shadow); text-shadow: var(--panel-text-shadow); } /* Compact selectors need a quieter edge than larger room panels. Keep the shared pigment, filter and platform fallbacks; soften only reflected light. */ .manyplace-panel-glass--quiet { --panel-rim: linear-gradient( 158deg, rgba(255, 255, 255, 0.3), rgba(225, 234, 244, 0.1) 35%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 245, 230, 0.16) ); --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.025), 0 2px 5px rgba(0, 0, 0, 0.12), 0 14px 32px -12px rgba(0, 0, 0, 0.34); } /* Never stack another filtered pane inside the material. Local contrast is a tint over the already-filtered parent, so the room remains the backdrop. */ .manyplace-panel-glass__inset { -webkit-backdrop-filter: none; backdrop-filter: none; } /* The lighter sibling used by controls that sit on the world instead of opening over it. It is intentionally less pigmented than panel glass. */ .manyplace-chrome-glass { border: 1px solid transparent; background: linear-gradient(var(--chrome-glass-tint-top, rgba(255, 255, 255, 0.075)), var(--chrome-glass-tint-bottom, rgba(255, 255, 255, 0.028))) padding-box, linear-gradient( 158deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.2) ) border-box; -webkit-backdrop-filter: blur(var(--bar-blur)) saturate(140%) brightness(1.14); backdrop-filter: blur(var(--bar-blur)) saturate(140%) brightness(1.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 34px rgba(0, 0, 0, 0.34); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { /* Chrome is normally a light tint of the world beneath it. When the browser cannot sample that world, every consumer needs the same warm opaque base; tying this to the material class keeps new islands and world labels safe. */ .manyplace-chrome-glass { background: linear-gradient(150deg, rgba(46, 33, 26, 0.94), rgba(22, 19, 17, 0.965)) padding-box, linear-gradient( 158deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.28) ) border-box; } } /* Frosted reading variant for small surfaces over bright rendered places. Reuses the existing single pane; no extra filtered child or refraction pass. */ .manyplace-glass--frosted { --panel-tint-a: rgba(230, 233, 226, .25); --panel-tint-b: rgba(204, 214, 205, .25); --chrome-glass-tint-top: var(--panel-tint-a); --chrome-glass-tint-bottom: var(--panel-tint-b); --panel-text-shadow: 0 1px 2px rgba(0, 0, 0, .65); text-shadow: var(--panel-text-shadow); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .manyplace-glass--frosted { -webkit-backdrop-filter: blur(calc(var(--bar-blur) + 4px)) saturate(135%) brightness(1.08); backdrop-filter: blur(calc(var(--bar-blur) + 4px)) saturate(135%) brightness(1.08); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .manyplace-glass--frosted { --panel-tint-a: rgba(230, 233, 226, .96); --panel-tint-b: rgba(204, 214, 205, .97); } } /* Small reaction captions need stable contrast even over white sunlit floors. Dark caption ink sits on a frosted tint which still reveals the surrounding light. */ .manyplace-glass--caption { --chrome-glass-tint-top: rgba(235, 240, 231, .25); --chrome-glass-tint-bottom: rgba(209, 221, 210, .25); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .manyplace-chrome-glass.manyplace-glass--caption { background: linear-gradient(158deg, #f9f7f0, #e8e6de) padding-box, linear-gradient(158deg, rgba(255,255,255,.7), rgba(255,255,255,.3)) border-box; } } .manyplace-header-islands { position: absolute; z-index: 50; top: var(--bar-inset); left: var(--chrome-left); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - var(--chrome-left) - 84px); } .manyplace-header-islands > .bar { position: relative; top: auto; left: auto; flex: none; } .manyplace-header-islands > #top-bar { /* #top-bar's legacy fixed-room offsets have ID specificity. Reset both axes here so the identity island participates in this rail's flex flow. */ top: 0; left: 0; padding: 0 7px; } .manyplace-header-islands__actions { padding: 0 7px; border-radius: 999px; } .manyplace-header-islands__actions[hidden] { display: none; } @media (orientation: portrait) and (max-width: 1024px) { .manyplace-header-islands { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); max-width: calc(100vw - 76px - env(safe-area-inset-left) - env(safe-area-inset-right)); gap: 6px; } .manyplace-header-islands > #top-bar { max-width: none; padding: 0 5px; } .manyplace-header-islands__actions { max-width: calc(100vw - 58px - env(safe-area-inset-left) - env(safe-area-inset-right)); gap: 4px; padding: 0 5px; } } /* A closed conversation remains available. Only the speech lines communicate on/off; the outline keeps its contrast in either header layout. */ .platform-web .conversation-toggle:not(:disabled):not([aria-disabled='true']) { color: rgba(249, 248, 246, 0.88); background: transparent; box-shadow: none; } .platform-web .conversation-toggle:not(:disabled):not([aria-disabled='true']) .icon-btn__glyph { opacity: 1; } .platform-web .conversation-toggle:disabled .icon-btn__glyph, .platform-web .conversation-toggle[aria-disabled='true'] .icon-btn__glyph { opacity: 0.35; } .platform-web .conversation-toggle:not(:disabled):not([aria-disabled='true']):hover { background: rgba(255, 255, 255, 0.13); } .platform-web .conversation-toggle:not(:disabled):not([aria-disabled='true']):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .seat[data-camera], .seat[data-microphone] { container-type: inline-size; } .seat__media-presence { position: absolute; z-index: 3; inset: 0; pointer-events: none; } .seat__media-pearl { display: grid; position: absolute; top: -4%; width: clamp(11px, 27cqw, 15px); height: clamp(11px, 27cqw, 15px); place-items: center; border: 1px solid rgba(255, 247, 235, 0.44); border-radius: 50%; color: rgba(255, 244, 228, 0.92); background: rgba(18, 21, 21, 0.78); box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 2px 9px rgba(3, 5, 6, 0.34); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); } .seat__media-pearl--camera { right: -4%; } .seat__media-pearl--speaking { left: -4%; border-color: rgba(197, 235, 210, 0.54); color: rgba(218, 247, 226, 0.94); background: rgba(21, 42, 33, 0.82); } .seat__media-icon { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .seat--away .seat__media-presence { opacity: 0.42; } .seat--away .seat__media-pearl--speaking { display: none; } .seat:focus-visible .seat__media-pearl, .seat:hover .seat__media-pearl { border-color: rgba(255, 247, 235, 0.68); } @media (prefers-reduced-motion: reduce) { .seat__media-pearl { transition: none; } } .seat__live-avatar-frame { position: absolute; z-index: 0; inset: 2%; overflow: hidden; border: 1px solid rgba(255, 240, 218, 0.62); border-radius: 39%; background: rgba(31, 25, 22, 0.12); box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), 0 3px 12px rgba(7, 6, 5, 0.2); pointer-events: none; } .seat__live-avatar-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), inset 0 -18cqh 28cqh rgba(16, 12, 9, 0.1); pointer-events: none; } .seat__live-avatar-video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: var(--avatar-filter, none); transition: opacity 180ms ease; } .seat__live-avatar-frame[data-ready='true'] .seat__live-avatar-video { opacity: 1; } .seat__live-avatar-frame[data-track-muted='true'] .seat__live-avatar-video, .seat--away .seat__live-avatar-video { opacity: 0.46; } .seat__live-avatar-video--mirrored { transform: scaleX(-1); } /* The frame is inserted between the portrait and the activity glyph. Making that paint order explicit keeps the room's tiny status glyph legible. */ .seat[data-live-video] .seat__glyph { z-index: 2; } @media (prefers-reduced-motion: reduce) { .seat__live-avatar-video { transition: none; } } .card__gesture--lead .card__gestureGlyph {width:16px;height:16px;stroke-width:1.5;} .card { min-width: 248px; max-width: min(292px, calc(100vw - 24px)); } .card__identity { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; } .card__text { min-width: 0; } .card__portrait { position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; overflow: hidden; border: 1px solid rgba(255, 237, 211, 0.2); border-radius: 17px; outline: 0; background: radial-gradient(circle at 31% 24%, hsl(var(--card-portrait-hue) 36% 57% / 0.72), transparent 58%), hsl(var(--card-portrait-hue) 22% 21% / 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 8px 22px rgba(0, 0, 0, 0.28); color: rgba(255, 247, 235, 0.9); flex: none; } .card__portrait:disabled { opacity: 1; } .card__portrait--interactive { cursor: pointer; } .card__portrait--interactive:hover, .card__portrait--interactive:focus-visible { border-color: rgba(255, 220, 170, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 2px rgba(242, 180, 92, 0.13), 0 9px 24px rgba(0, 0, 0, 0.32); } .card__portrait-image { width: 100%; height: 100%; object-fit: cover; } .card__portrait-image[hidden], .card__portrait-fallback[hidden] { display: none; } .card__portrait-fallback { font: 560 15px/1 var(--font-ui); letter-spacing: 0.045em; } .card__more { margin-left: auto; } .card__audio { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin: -5px -2px -5px auto; padding: 0; flex: none; border: 0; border-radius: 10px; outline: 0; background: transparent; color: rgba(255, 236, 205, .78); transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease; } .card__audio[hidden] { display: none; } .card__audio:not([hidden]) + .card__more { margin-left: 0; } .card__audio:hover, .card__audio:focus-visible { background: rgba(255, 255, 255, .07); color: rgba(255, 246, 231, .96); } .card__audio-glyph { width: 18px; height: 18px; } .card__audio--speaking:not(.card__audio--muted) .card__audio-glyph { filter: drop-shadow(0 0 5px rgba(242, 180, 92, .38)); animation: card-speaker-breathe 920ms ease-in-out infinite alternate; } .card__audio--muted { color: rgba(244, 239, 231, .38); } .card__audio--muted::after { content: ''; position: absolute; width: 17px; height: 1.5px; border-radius: 999px; background: currentColor; transform: rotate(-45deg); } @keyframes card-speaker-breathe { from { opacity: .72; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } } .card__action--with-glyph { gap: 6px; } .card__activity--hierarchy { display: grid; gap: 2px; } .card__activity-primary { min-width: 0; } .card__activity-now { display: block; overflow: hidden; color: rgba(244, 239, 231, 0.48); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .card__activity-now-label { color: rgba(244, 239, 231, 0.3); } .card__activity-done { color: rgba(132, 201, 154, 0.72); } /* Shared watching is presence, not an advertisement. At rest it is one compact row; deliberate hover/focus unfolds the familiar room thumbnail and the two ways of joining without introducing a second popover. */ /* A glimpse through the doorway: what they're watching, as one stable block. The whole row is the act; hovering names it in the subline (the card's own grammar) — nothing swaps layout, nothing pops. */ .card__watching { margin: 11px -6px 0; padding: 8px 2px 0; border-top: 1px solid rgba(255, 255, 255, 0.085); } .card__watching[hidden] { display: none; } .card__watching-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 9px; align-items: center; width: 100%; padding: 4px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; transition: background-color 150ms ease; } .card__watching-row:hover, .card__watching-row:focus-visible { background: rgba(255, 255, 255, 0.055); } .card__watching-row:focus-visible { outline: 1px solid rgba(255, 222, 174, 0.6); outline-offset: -1px; } .card__watching-thumb { width: 64px; aspect-ratio: 16 / 9; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 7px; background: rgba(0, 0, 0, 0.3) center / cover no-repeat; transition: border-color 160ms ease; } .card__watching-row:hover .card__watching-thumb, .card__watching-row:focus-visible .card__watching-thumb { border-color: rgba(255, 226, 187, 0.42); } .card__watching-copy { display: grid; gap: 2px; min-width: 0; } .card__watching-title, .card__watching-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card__watching-title { color: rgba(249, 244, 236, 0.9); font: 520 11.5px/1.25 var(--font-ui); } .card__watching-sub { color: rgba(244, 239, 231, 0.43); font: 400 9.5px/1.25 var(--font-ui); } .card__watching-sub-act { display: none; color: rgba(255, 226, 185, 0.9); } /* The screen panel's motion grammar at card scale: three unequal bars while sound runs; the same footprint resolves into a quiet II while paused. */ .card__watching-eq { display: inline-flex; align-items: flex-end; justify-content: center; gap: 1.5px; width: 8px; height: 7px; margin-right: 5px; vertical-align: baseline; } .card__watching-eq > span { width: 1.5px; height: 100%; border-radius: 1px; background: rgba(255, 222, 174, 0.55); transform-origin: bottom; transform: scaleY(0.4); } .card__watching-eq--playing > span { background: rgba(255, 222, 174, 0.85); } .card__watching-eq--paused { gap: 2px; opacity: 0.72; } .card__watching-eq--paused > span { transform: scaleY(0.72); background: rgba(255, 222, 174, 0.68); } .card__watching-eq--playing > span:nth-child(1) { animation: media-eq-a 740ms ease-in-out infinite; } .card__watching-eq--playing > span:nth-child(2) { animation: media-eq-b 1130ms ease-in-out infinite; } .card__watching-eq--playing > span:nth-child(3) { animation: media-eq-c 890ms ease-in-out infinite; } @keyframes media-eq-a { 0% { transform: scaleY(0.3); } 34% { transform: scaleY(0.9); } 58% { transform: scaleY(0.45); } 81% { transform: scaleY(0.75); } 100% { transform: scaleY(0.3); } } @keyframes media-eq-b { 0% { transform: scaleY(0.65); } 22% { transform: scaleY(0.35); } 49% { transform: scaleY(1); } 70% { transform: scaleY(0.5); } 100% { transform: scaleY(0.65); } } @keyframes media-eq-c { 0% { transform: scaleY(0.45); } 30% { transform: scaleY(0.7); } 55% { transform: scaleY(0.3); } 85% { transform: scaleY(0.85); } 100% { transform: scaleY(0.45); } } @media (prefers-reduced-motion: reduce) { .card__audio--speaking:not(.card__audio--muted) .card__audio-glyph { animation: none; } .card__watching-eq--playing > span { animation: none; transform: scaleY(0.6); } } .card__watching-row:hover .card__watching-sub-rest, .card__watching-row:focus-visible .card__watching-sub-rest, .card__watching-row:hover .card__watching-eq, .card__watching-row:focus-visible .card__watching-eq { display: none; } .card__watching-row:hover .card__watching-sub-act, .card__watching-row:focus-visible .card__watching-sub-act { display: inline; } @media (max-width: 700px), (pointer: coarse) and (max-width: 1024px) { .card__identity { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; } .card__portrait { width: 44px; height: 44px; border-radius: 15px; } } .conversation-lens[data-size] .lately__row--message .lately__message-more, .lately__row--message .lately__message-more {opacity:0;pointer-events:none;} @media(hover:hover){.conversation-lens[data-size] .lately__row--message:hover .lately__message-more, .lately__row--message:hover .lately__message-more{opacity:1;pointer-events:auto;}} .conversation-lens[data-size] .lately__row--message[data-actions-revealed] .lately__message-more, .conversation-lens[data-size] .lately__row--message .lately__message-more:focus-visible, .conversation-lens[data-size] .lately__row--message .lately__message-more[aria-expanded="true"], .lately__row--message[data-actions-revealed] .lately__message-more, .lately__row--message .lately__message-more:focus-visible, .lately__row--message .lately__message-more[aria-expanded="true"] {opacity:1;pointer-events:auto;} /* The threshold: faces at the bottom edge, present but not here. */ .doorway { position: fixed; left: 50%; bottom: 10px; z-index: 40; display: flex; align-items: center; gap: 6px; translate: -50% 0; max-width: min(70vw, 640px); } .doorway[hidden] { display: none; } .doorway[data-density='snug'] { gap: 3px; } /* A truly crowded door becomes a gentle stack; every face stays present. */ .doorway[data-density='stacked'] { gap: 0; } .doorway[data-density='stacked'] .doorway__person + .doorway__person { margin-left: -8px; } .doorway__person { position: relative; width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 2px; /* The hollow ring — the mark for "present, but not here" — holding a face. */ border: 1.5px solid rgba(244, 239, 231, 0.35); border-radius: 50%; opacity: 0; transition: opacity 600ms ease, border-color 200ms ease; cursor: default; } .doorway__person--in { opacity: 0.55; } .doorway__person:hover, .doorway__person:focus-visible { opacity: 0.95; border-color: rgba(244, 239, 231, 0.6); outline: 0; z-index: 1; } /* Your own face at the door: full presence, the warm away-ring. You can see that you are seen. */ .doorway__person--in.doorway__person--you { opacity: 0.95; border-color: #d5a665; } .doorway__avatar { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, rgba(121, 119, 128, 0.62), rgba(48, 46, 52, 0.82)); color: rgba(255, 249, 241, 0.9); font-family: var(--font-ui); font-size: 8px; font-weight: 600; line-height: 1; filter: saturate(0.85); } .doorway__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } /* The whisper: just the name, above the hovered face. No card, no actions. */ .doorway__name { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; padding: 4px 10px; border-radius: 999px; background: rgba(22, 19, 20, 0.62); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); color: rgba(244, 239, 231, 0.88); font-family: var(--font-ui); font-size: 11.5px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 150ms ease; } .doorway__person:hover .doorway__name, .doorway__person:focus-visible .doorway__name { opacity: 1; } @media (prefers-reduced-motion: reduce) { .doorway__person { transition-duration: 1ms; } } /* A spatial conversation object: neutral, quiet material above the room. It never participates in Stage geometry, so its movement cannot move seats. */ .conversation-lens { --conversation-rail-width: 64px; --conversation-width: min(300px, calc(100vw - 28px)); --conversation-height: min(340px, calc(100vh - 28px)); /* Bottom left before TS writes real geometry: the ambient-chat corner. */ --conversation-x: 18px; --conversation-y: max(72px, calc(100vh - var(--conversation-height) - 18px)); --conversation-radius: 34px; /* Warm pigment, not neutral grey. The room is tungsten at dusk; a blue-grey fill over it reads as plastic no matter how much blur is behind it. These are the alphas of `.lately` — a reading surface, not chrome. */ --conversation-tint-a: rgba(28, 23, 20, 0.35); --conversation-tint-b: rgba(18, 15, 14, 0.46); /* The rim. Its angle is written from TS as the window moves, so the brightest edge always faces the room's key light — and it splits cool to warm along its run, which is what a thick edge does to the light passing through it. Real dispersion needs a displacement map on the backdrop, which WKWebView will not do; this is the honest approximation of it. */ --conversation-rim: linear-gradient( var(--conversation-light-angle, 158deg), rgba(255, 255, 255, 0.74), rgba(206, 226, 255, 0.2) 26%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 222, 182, 0.24) 78%, rgba(255, 255, 255, 0.42) ); position: fixed; z-index: 80; left: var(--conversation-x); top: var(--conversation-y); width: var(--conversation-width); height: var(--conversation-height); color: rgba(247, 246, 244, 0.93); pointer-events: none; transition: left 300ms cubic-bezier(0.22, 1, 0.36, 1), top 300ms cubic-bezier(0.22, 1, 0.36, 1), width 340ms cubic-bezier(0.22, 1, 0.36, 1), height 340ms cubic-bezier(0.22, 1, 0.36, 1); /* Layout and style containment only. Never add `paint` here, and never add `overflow` or `isolation` to this element: each of those makes the lens a backdrop root, and the surface inside it would then blur an empty rect instead of the room. That is exactly how this window became a grey slab. */ contain: layout style; } .conversation-lens[data-state='expanded'] { pointer-events: auto; } .conversation-lens[data-state='hidden'] .conversation-lens__glass, .conversation-lens[data-state='hidden'] .conversation-lens__surface, .conversation-lens[data-state='hidden'] .conversation-lens__resize { visibility: hidden; } .conversation-lens--moving, .conversation-lens--resizing { transition: none; user-select: none; -webkit-user-select: none; } /* The pane's two bodies. The glass carries the paint — pigment, rim, blur, shadows, and the sheen riding on it — and the surface carries the content: grid, clipping, chrome, feed. Split so the settled state can fade the glass to perfectly invisible while the words above keep their exact pixels. They open and close in lockstep, each animating itself: a shared animated wrapper would carry opacity, become a backdrop root, and hand the blur an empty rect to sample — the grey-slab trap, again. */ .conversation-lens__glass, .conversation-lens__surface { position: absolute; inset: 0; border: 1px solid transparent; border-radius: var(--conversation-radius); opacity: 0; visibility: hidden; transform: translate3d(var(--conversation-swipe-x, 0), 12px, 0) scale(0.93); /* Written from TS: the pane arrives out of whatever summoned it. */ transform-origin: var(--conversation-origin-x, 78%) var(--conversation-origin-y, 8%); transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1), transform 210ms cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 210ms, box-shadow 220ms ease; /* No `will-change` here. `opacity` makes these backdrop roots, and a permanently promoted layer over the WebGL room ghosts the backdrop — the same trap style.css:141 records for the plate. */ } .conversation-lens__glass { /* Glass, by the house recipe: light pigment, high saturate, brightness ABOVE one. Anything below one darkens the room behind the pane and it goes back to reading as a painted card — see the note at style.css:249. Legibility is bought by local scrims under the text, never by a darker fill. */ background: linear-gradient(to top,rgba(13,11,10,.2),transparent 85px) padding-box, linear-gradient(158deg, var(--conversation-tint-a), var(--conversation-tint-b)) padding-box, var(--conversation-rim) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.07), inset 0 -34px 50px -34px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.22), 0 20px 44px -14px rgba(0, 0, 0, 0.4), 0 52px 130px -28px rgba(0, 0, 0, 0.5); backdrop-filter: blur(38px) saturate(182%) brightness(1.14); -webkit-backdrop-filter: blur(38px) saturate(182%) brightness(1.14); } .conversation-lens__surface { display: grid; grid-template-columns: var(--conversation-rail-width) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; } /* The specular. Light in glass is an edge phenomenon. It enters through the thickness of the rim and spills a short way inward, brightest where the pane faces the source and answered by a dimmer, warmer return off the far edge. This used to be a 118%x74% radial at 15% white anchored near a corner — a gradient wider than the window it sat on, which reads as haze on a dark card rather than as anything happening in glass. So the light lives in inset shadows hugging the rim, and the offsets move which edge is lit as the pane travels. What remains on the face is a small, very faint bloom — a suggestion that the middle is lit at all, not a wash. */ .conversation-lens__sheen { position: absolute; z-index: 8; inset: 0; /* Inside the glass, and nowhere else. Measured (scratchpad repro): a blend child anywhere else in the lens isolates the lens, which starves the glass's backdrop-filter and kills the blur; inside the filtered element the blend group includes the blurred backdrop, which is what the screen blend is FOR. */ border-radius: inherit; background: radial-gradient( 58% 38% at calc(var(--conversation-light-x, 0.28) * 100%) calc(var(--conversation-light-y, 0.06) * 100%), rgba(255, 255, 255, 0.035), transparent 72% ); /* Split into one band per axis. A single diagonal shadow only shows on the edge whose offset beats the spread, so the shallower axis silently drops out; kept apart, each edge lights in proportion to how much it faces the source — which is also why the top reads stronger than the side under a light that is mostly overhead. */ box-shadow: inset 0 var(--conversation-light-dy, 27px) 20px -13px rgba(255, 255, 255, 0.15), inset var(--conversation-light-dx, 14px) 0 18px -13px rgba(255, 255, 255, 0.09), /* the warm return off the far edge, dimmer and softer than what it answers */ inset 0 calc(var(--conversation-light-dy, 27px) * -0.85) 26px -18px rgba(255, 224, 186, 0.1); /* `screen`, not `plus-lighter`. Plus-lighter is linear addition and clips: over the bright half of a sunset it reaches white and stays there, which is what turned the top-left corner chalky and flat. Screen rolls off instead, so the glow survives over the dark parts of the room without blowing out over the bright ones — the difference between a lit pane and a bleached one. */ mix-blend-mode: screen; opacity: var(--conversation-light, 0.7); pointer-events: none; transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1); } /* Under the hand the light tracks 1:1. A transition here reads as lag. */ .conversation-lens--moving .conversation-lens__sheen, .conversation-lens--resizing .conversation-lens__sheen { transition: none; } .conversation-lens[data-state='expanded'] .conversation-lens__glass, .conversation-lens[data-state='expanded'] .conversation-lens__surface { opacity: 1; visibility: visible; transform: translate3d(var(--conversation-swipe-x, 0), 0, 0) scale(1); /* Opacity finishes early so the pane is solid while it is still settling. */ transition: opacity 170ms cubic-bezier(0.16, 0.72, 0.25, 1), transform 440ms cubic-bezier(0.16, 0.72, 0.25, 1), visibility 0s linear, box-shadow 220ms ease; } /* The drag lift: the shadow lives on the glass, the lift moves both bodies. */ .conversation-lens--moving .conversation-lens__glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 -34px 50px -34px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.24), 0 30px 60px -14px rgba(0, 0, 0, 0.44), 0 74px 170px -30px rgba(0, 0, 0, 0.54); } .conversation-lens--moving .conversation-lens__glass, .conversation-lens--moving .conversation-lens__surface { transform: translate3d(var(--conversation-swipe-x, 0), -3px, 0) scale(1.008); transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1); } /* Releasing reads as setting something down: geometry is already final, the shadow comes back to rest over a beat. */ .conversation-lens--settling .conversation-lens__glass, .conversation-lens--settling .conversation-lens__surface { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1); } .conversation-lens__page { display: contents; } .conversation-lens__header { position: relative; z-index: 3; grid-column: 1 / -1; grid-row: 1; min-width: 0; /* The room title, or the peer's face and name, is the centred identity. The private badge sits outside it so that status never drags the identity away from the middle of the glass. */ display: grid; /* The right flank floors at its own content so the private mark can never be squeezed out of its column and under the close button — a long name truncates instead. With no mark the floor is zero and the flanks are symmetric again, which is what keeps the title centred. */ grid-template-columns: minmax(0, 1fr) auto minmax(min-content, 1fr); align-items: center; min-height: 0; padding: 15px 54px 9px; /* No rule under the header. The feed's own top fade is the separation. */ cursor: grab; touch-action: none; } .conversation-lens--moving .conversation-lens__header { cursor: grabbing; } .conversation-lens__identity { grid-column: 2; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; } .conversation-lens__title { min-width: 0; overflow: hidden; color: rgba(250, 249, 247, 0.96); /* A window title, not a document heading — but the name of the room or the person is the one word here that names what you are looking at, so it carries weight rather than sitting at the same tone as everything else. */ font: 560 18.5px/1.15 var(--font-ui); font-variation-settings: 'opsz' 22; letter-spacing: -0.014em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); text-align: center; text-overflow: ellipsis; white-space: nowrap; } .conversation-lens__private-mark { /* Its own column, so its width never moves the name. */ grid-column: 3; justify-self: start; align-self: center; display: inline-flex; align-items: center; gap: 4px; margin-left: 9px; padding: 3px 8px 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(238, 237, 235, 0.5); font: 470 10px/1 var(--font-ui); letter-spacing: 0.015em; } .conversation-lens__private-mark[hidden] { display: none; } .conversation-composer__meta[hidden] { display: none; } /* Only one of the two titles is ever in the header. */ .conversation-lens__title--button { display: none; align-items: center; gap: 5px; border: 0; padding: 6px 12px; min-height: 34px; border-radius: 999px; background: transparent; cursor: default; transition: background-color 160ms ease; } .conversation-lens__title--button:hover, .conversation-lens__title--button:focus-visible, .conversation-lens[data-chooser='open'] .conversation-lens__title--button { outline: 0; background: rgba(255, 255, 255, 0.09); } .conversation-lens__title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conversation-lens__title-chevron { width: 14px; height: 14px; flex: none; opacity: 0.6; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } .conversation-lens[data-chooser='open'] .conversation-lens__title-chevron { transform: rotate(180deg); } /* ---- compact ------------------------------------------------------------ Below 380px the window stops shrinking and starts rearranging. The rail folds into the title, a private thread drops the face column that was showing the same two people over and over, and the row stops holding 31px open for a menu button that is only there on hover. Between them those three were taking 46% of the width at the old minimum. */ .conversation-lens[data-size='compact'] .conversation-rail { display: none; } .conversation-lens[data-size='compact'] .conversation-lens__surface { grid-template-columns: minmax(0, 1fr); } .conversation-lens[data-size='compact'] .conversation-lens__title { display: none; } .conversation-lens[data-size='compact'] .conversation-lens__title--button { display: inline-flex; } .conversation-lens[data-size='compact'] .conversation-lens__header { padding: 13px 48px 8px; } /* One column means column one for everything: anything left on the two-column grid's second track falls into an implicit column and shoves the header into a sliver. */ .conversation-lens[data-size='compact'] .conversation-lens__feed-well, .conversation-lens[data-size='compact'] .conversation-composer { grid-column: 1; } .conversation-lens[data-size='compact'] .conversation-lens__feed { padding: 8px 14px 12px; } /* The menu overlays the text it belongs to instead of reserving a lane. */ .conversation-lens[data-size='compact'] .conversation-feed .lately__row { padding-right: 8px; } .conversation-lens[data-size='compact'] .conversation-feed .lately__message-more { right: 4px; width: 28px; height: 28px; /* With the reserved lane gone the button stands over the words, so at rest it has to be absent rather than faint — anything painted here is painted on the message. */ opacity: 0; background: transparent; box-shadow: none; } /* Two people, and the title already says which — the faces were repetition. */ .conversation-lens[data-size='compact'] .conversation-direct__message { grid-template-columns: minmax(0, 1fr); gap: 0; } .conversation-lens[data-size='compact'] .conversation-direct__face { display: none; } .conversation-lens[data-size='compact'] .conversation-composer { padding: 8px 12px 12px; } /* A request is not a thread yet, so it does not look like one: no rows, no place to type, and the message itself withheld until it is asked for. (An earlier edit fused this selector into the compact one above, which is how requests spent a day wearing a composer they could not use.) */ .conversation-lens[data-context='request'] .conversation-composer, .conversation-lens[data-context='waiting'] .conversation-composer { display: none; } /* The whole request — face, name, where, the withheld message, both answers and the quiet safety row — must stand inside the minimal window with no scrolling: someone weighing a stranger should never have to hunt for the Ignore. Same content, tighter breath. */ .conversation-lens[data-size='compact'] .conversation-request { padding: 10px 8px 14px; gap: 2px; } .conversation-lens[data-size='compact'] .conversation-request__face-wrap { width: 44px; height: 44px; } .conversation-lens[data-size='compact'] .conversation-request__name { margin-top: 8px; font-size: 15.5px; } .conversation-lens[data-size='compact'] .conversation-request__body { margin: 10px 0 2px; } .conversation-lens[data-size='compact'] .conversation-request__answers { margin-top: 9px; } .conversation-lens[data-size='compact'] .conversation-request__safety { margin-top: 9px; } .conversation-direct__waiting { align-self: center; max-width: 260px; margin: 10px auto 2px; color: rgba(226, 233, 242, 0.42); font-size: 10px; line-height: 1.45; text-align: center; } .conversation-request { display: grid; justify-items: center; align-content: center; min-height: 100%; gap: 3px; padding: 18px 8px; text-align: center; } .conversation-request__face-wrap { width: 54px; height: 54px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; background: rgba(255, 255, 255, 0.05); box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.45); } .conversation-request__face { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; filter: var(--avatar-filter, none); } .conversation-request__face--initials { display: grid; place-items: center; color: rgba(247, 246, 244, 0.8); font: 400 19px/1 var(--font-ui); } .conversation-request__name { margin-top: 11px; color: rgba(250, 249, 247, 0.94); font: 520 17px/1.2 var(--font-ui); font-variation-settings: 'opsz' 20; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .conversation-request__where { max-width: 240px; color: rgba(238, 237, 235, 0.5); font: 400 11.5px/1.4 var(--font-ui); text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.26); } .conversation-request__body { display: grid; justify-items: center; gap: 6px; width: 100%; max-width: 268px; margin: 16px 0 4px; } /* Deliberately a button and not a blur. A blurred message is still on screen, still legible at a glance and still readable from a screenshot; withholding it means not putting it there. */ .conversation-request__reveal { padding: 9px 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(249, 248, 246, 0.84); cursor: default; font: 500 12px/1 var(--font-ui); transition: background-color 160ms ease, color 160ms ease; } .conversation-request__reveal:hover, .conversation-request__reveal:focus-visible { outline: 0; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.95); } .conversation-request__text { padding: 12px 15px; border-radius: 15px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); color: rgba(249, 248, 246, 0.92); font: 410 14px/1.5 var(--font-ui); text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); overflow-wrap: anywhere; white-space: pre-wrap; } .conversation-request__quiet { color: rgba(238, 237, 235, 0.4); font: 400 10.5px/1.35 var(--font-ui); } .conversation-request__answers { display: flex; gap: 8px; margin-top: 12px; } .conversation-request__accept, .conversation-request__ignore { min-width: 96px; padding: 10px 18px; border: 1px solid transparent; border-radius: 999px; cursor: default; font: 500 12.5px/1 var(--font-ui); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .conversation-request__accept { background: rgba(250, 248, 244, 0.93); color: rgba(24, 20, 17, 0.9); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5); } .conversation-request__accept:hover, .conversation-request__accept:focus-visible { outline: 0; background: rgb(255, 254, 252); } .conversation-request__ignore { border-color: rgba(255, 255, 255, 0.18); background: transparent; color: rgba(246, 245, 243, 0.72); } .conversation-request__ignore:hover, .conversation-request__ignore:focus-visible { outline: 0; border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.92); } /* Reachable before accepting, on purpose: nobody should have to let a person in to be able to report what they sent. Quiet, because reaching for these is rare and offering them loudly would colour every request that arrives. */ .conversation-request__safety { display: flex; gap: 14px; margin-top: 14px; } .conversation-request__quiet-action { border: 0; padding: 4px 2px; background: transparent; color: rgba(238, 237, 235, 0.4); cursor: default; font: 400 11px/1 var(--font-ui); text-decoration: underline; text-decoration-color: rgba(238, 237, 235, 0.2); text-underline-offset: 3px; transition: color 160ms ease; } .conversation-request__quiet-action:hover, .conversation-request__quiet-action:focus-visible { outline: 0; color: rgba(250, 249, 247, 0.82); } @media (pointer: coarse) { .conversation-request__accept, .conversation-request__ignore { padding: 13px 20px; } .conversation-request__reveal { padding: 12px 18px; } .conversation-request__quiet-action { padding: 10px 4px; } } .conversation-composer { padding: 8px 12px 12px; } .conversation-lens[data-size='compact'] .conversation-composer__field { padding-left: 18px; } /* Sized and placed against the title rather than the corner: a fixed row height means both boxes start at the header's padding and end together, so they stay aligned whatever the title turns out to be. The extra inset keeps the button clear of the 34px corner arc, which it was tucked inside of. */ .conversation-lens[data-size='compact'] .conversation-lens__title--button { min-height: 34px; } .conversation-lens[data-size='compact'] .conversation-lens__minimize { top: 13px; right: 14px; width: 26px; height: 26px; /* One clear thing in a small header is enough, and it is the name. */ background: rgba(255, 255, 255, 0.04); color: rgba(247, 246, 244, 0.42); } .conversation-lens[data-size='compact'] .conversation-lens__minimize:hover, .conversation-lens[data-size='compact'] .conversation-lens__minimize:focus-visible { background: rgba(255, 255, 255, 0.13); color: rgba(255, 255, 255, 0.92); } .conversation-lens[data-size='compact'] .conversation-lens__minimize-glyph { width: 15px; height: 15px; } .conversation-lens[data-size='compact'] .conversation-lens__private-glyph { display: block; width: 11px; height: 11px; } .conversation-lens[data-size='compact'] .conversation-lens__private-label { display: none; } .conversation-lens__private-glyph { width: 10px; height: 10px; } .conversation-lens__minimize { position: absolute; z-index: 10; /* Optically centred on the title row, not parked at a corner inset. The row is 21px of type starting 15px down, so its centre is at 25.6 — a 32px button meets that at 10, not at 13, where it sat 3px low. */ top: 10px; right: 13px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: rgba(247, 246, 244, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); cursor: default; transition: color 160ms ease, background-color 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1); } .conversation-lens__minimize:hover, .conversation-lens__minimize:focus-visible { color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.13); outline: 0; } .conversation-lens__minimize:active { transform: scale(0.94); } .conversation-lens__minimize-glyph { width: 17px; height: 17px; } .conversation-rail { position: relative; z-index: 2; grid-column: 1; grid-row: 2 / 4; min-width: 0; /* One column with one gap. The room, the threads and the way to start a new one were three stacked blocks with their own margins, so every space was 12px except the one before the plus, which had none. Spacing that depends on how many contacts exist is spacing waiting to be wrong. */ display: flex; flex-direction: column; gap: 12px; overflow-x: hidden; overflow-y: auto; padding: 6px 9px 18px; /* No fill and no divider. A tinted column with a rule down its edge is the thing that made this read as a chat app instead of a pane of glass; the destinations float directly on the material and the space does the work. */ scrollbar-width: none; overscroll-behavior: contain; } .conversation-rail::-webkit-scrollbar { display: none; } /* A grouping for painting, not for layout: the threads sit in the rail's own column so they are spaced like everything else in it. */ .conversation-rail__rooms, .conversation-rail__contacts { display: contents; } .conversation-rail__destination { position: relative; width: 100%; display: grid; justify-items: center; border: 0; background: transparent; cursor: default; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } .conversation-rail__destination:focus-visible { outline: 0; } .conversation-rail__destination:hover { transform: translateY(-1px); } .conversation-rail__destination:focus-visible .conversation-rail__portrait { box-shadow: 0 0 0 2px rgba(247, 247, 245, 0.73), 0 0 0 5px rgba(255, 255, 255, 0.08); } .conversation-rail__portrait { position: relative; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 7px 17px rgba(0, 0, 0, 0.22); /* Unselected destinations sit back in the material; the current one comes forward. Depth, not a tick mark, says where you are. */ opacity: 0.62; transform: scale(0.94); transition: border-color 180ms ease, box-shadow 210ms ease, opacity 180ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } .conversation-rail__destination:hover .conversation-rail__portrait, .conversation-rail__destination:focus-visible .conversation-rail__portrait { opacity: 0.86; transform: scale(1); } .conversation-rail__destination[aria-current='true'] .conversation-rail__portrait { border-color: rgba(250, 249, 247, 0.66); box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.1), 0 6px 20px rgba(0, 0, 0, 0.28); opacity: 1; transform: scale(1.06); } .conversation-rail__room-image, .conversation-rail__face { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; filter: var(--avatar-filter, none); } .conversation-rail__room-glyph, .conversation-rail__face--initials { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(247, 246, 244, 0.79); background: linear-gradient(145deg, rgba(111, 116, 126, 0.34), rgba(36, 38, 45, 0.56)); font: 400 16px/1 var(--font-ui); } .conversation-rail__room-icon { width: 19px; height: 19px; } /* The name arrives on intent, not on transit — hence the enter delay and the instant leave. It lives outside the rail because the rail scrolls and would clip it; TS puts it beside whichever destination is under the pointer. */ .conversation-rail__label { position: absolute; z-index: 9; top: var(--conversation-label-y, 0px); left: calc(var(--conversation-rail-width) - 4px); padding: 5px 11px 6px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 999px; /* No backdrop-filter: this sits inside the surface, which is already a backdrop root, so it would blur the surface's own fill and show nothing. A warm fill on light glass reads better here anyway. */ background: rgba(26, 21, 18, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 26px -10px rgba(0, 0, 0, 0.5); max-width: calc(100% - var(--conversation-rail-width) - 24px); overflow: hidden; color: rgba(250, 249, 247, 0.9); font: 500 11px/1 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; opacity: 0; /* Vertical placement is instant so the label snaps between destinations; only the fade and the small slide are timed. */ transform: translate3d(-5px, -50%, 0); pointer-events: none; transition: opacity 150ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } .conversation-rail__label--visible { opacity: 1; transform: translate3d(0, -50%, 0); transition-delay: 280ms; } .conversation-rail__unread { position: absolute; top: 30px; right: 7px; width: 7px; height: 7px; border: 1px solid rgba(20, 21, 25, 0.9); border-radius: 50%; background: rgba(239, 212, 173, 0.94); box-shadow: 0 0 8px rgba(238, 195, 135, 0.28); } .conversation-rail__unread[hidden] { display: none; } .conversation-lens__feed-well { position: relative; z-index: 2; grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; } .conversation-lens__feed { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; padding: 10px 20px 14px; /* The feed dissolves into the header instead of butting against a rule. Single gradient — mask-composite keywords differ across engines. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.13) transparent; user-select: text; -webkit-user-select: text; } .conversation-lens__feed::-webkit-scrollbar { width: 5px; } .conversation-lens__feed::-webkit-scrollbar-track { background: transparent; } .conversation-lens__feed::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.11); } .conversation-lens__feed:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); } .conversation-feed, .conversation-direct { min-height: 100%; display: grid; align-content: end; } .conversation-feed { gap: 2px; } .conversation-feed .lately__row { gap: 12px; padding: 10px 31px 3px 0; border: 0; border-radius: 12px; transition: background-color 170ms ease; } .conversation-feed .lately__row--message:hover, .conversation-feed .lately__row--menu-open { background: rgba(255, 255, 255, 0.035); } .conversation-feed .lately__row--continuation { padding-top: 1px; } /* Hidden, but it must also stop taking up room. `visibility: hidden` alone leaves the 34px box behind, so every follow-on line was 34px tall to hold 22px of text — the run of short replies that looked like the spacing was growing. The width stays, so the text column does not shift. */ .conversation-feed .lately__row--continuation .lately__face { visibility: hidden; height: 0; margin: 0; border-width: 0; } .conversation-feed .lately__row--continuation .lately__message-head { display: none; } .conversation-feed .lately__row--continuation .lately__message-copy { margin-top: 0; } .conversation-feed .lately__row--focused { background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), transparent 92%); } .conversation-feed .lately__face, .conversation-direct__face { width: 34px; height: 34px; margin-top: 1px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 50%; background: rgba(255, 255, 255, 0.05); object-fit: cover; font-size: 10px; } .conversation-feed .lately__message-head, .conversation-direct__head { display: flex; align-items: baseline; gap: 7px; } .conversation-feed .lately__message-name, .conversation-direct__head strong { color: rgba(248, 247, 245, 0.88); font-size: 13px; font-weight: 560; /* The backdrop under this text is the room, and the room is not ours to control — more so now the pane lets more of it through. */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34); } .conversation-feed .lately__when, .conversation-feed .lately__message-head .lately__when, .conversation-direct__head time { color: rgba(237, 236, 234, 0.46); font-size: 11px; } .conversation-feed .lately__message-copy, .conversation-direct__copy p { margin-top: 5px; color: rgba(249, 248, 246, 0.9); font-size: 15px; line-height: 1.5; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34); white-space: pre-wrap; overflow-wrap: anywhere; } .conversation-feed .lately__row:not(.lately__row--message) { align-items: center; padding-block: 7px; opacity: 0.78; } .conversation-feed .lately__glyph { width: 14px; height: 14px; margin-top: 0; color: rgba(233, 210, 177, 0.7); } .conversation-feed .lately__what { color: rgba(239, 238, 236, 0.7); font-size: 12.5px; } .conversation-feed .lately__message-more { top: 6px; right: 1px; width: 28px; height: 28px; /* Round, like the close button, the send button, the portraits and the faces. A rounded square was the only one of its kind in the window, which is what made it sit on a row rather than belong to it. */ border-radius: 50%; color: rgba(242, 241, 239, 0.29); } /* Nothing to hang from the composer, so the space is the composition: the whole column, centred, rather than a 170px box left sitting on the bottom edge where a first message would have been. */ .conversation-feed--empty, .conversation-direct--empty { align-content: center; justify-items: center; } .conversation-feed__empty, .conversation-direct__empty { display: grid; justify-items: center; gap: 8px; max-width: 260px; padding: 24px 0; text-align: center; } .conversation-feed__empty strong, .conversation-direct__empty strong { color: rgba(247, 246, 244, 0.74); font: 380 20px/1.25 var(--font-ui); font-variation-settings: 'opsz' 24; letter-spacing: -0.012em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } .conversation-feed__empty span, .conversation-direct__empty span { max-width: 232px; color: rgba(237, 236, 234, 0.45); font-size: 11.5px; line-height: 1.5; text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.24); } /* Where you left off. A rule with a word on it, faint enough to be scenery until you are looking for it. */ .conversation-feed__since { display: flex; align-items: center; gap: 9px; margin: 9px 0 3px; color: rgba(239, 212, 173, 0.66); font: 520 9.5px/1 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; } .conversation-feed__since::before, .conversation-feed__since::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(239, 212, 173, 0.26)); } .conversation-feed__since::after { background: linear-gradient(90deg, rgba(239, 212, 173, 0.26), transparent); } .conversation-feed__since span { flex: none; } /* The dot the folded rail took with it. */ .conversation-lens__title-unread { flex: none; width: 6px; height: 6px; margin-left: 1px; border-radius: 50%; background: rgba(239, 212, 173, 0.94); box-shadow: 0 0 8px rgba(238, 195, 135, 0.32); } .conversation-lens__title-unread[hidden] { display: none; } .conversation-chooser__unread { flex: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: rgba(239, 212, 173, 0.94); box-shadow: 0 0 8px rgba(238, 195, 135, 0.28); } .conversation-chooser__unread[hidden] { display: none; } .conversation-lens__new-activity { position: absolute; z-index: 4; right: 18px; bottom: 8px; display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; /* Inside the surface's backdrop root, so a blur here would sample the pane's own fill. A warm solid is both cheaper and more legible. */ background: rgba(26, 21, 18, 0.86); color: rgba(246, 245, 243, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 26px -8px rgba(0, 0, 0, 0.42); font: 520 10px/1 var(--font-ui); } .conversation-lens__new-activity[hidden] { display: none; } .conversation-direct { gap: 2px; } .conversation-direct__earlier { justify-self: center; margin: 0 0 8px; padding: 4px 10px; border: 0; background: transparent; color: rgba(235, 237, 241, 0.5); font: 500 10px/1.3 var(--font-ui); } .conversation-direct__earlier:hover:not(:disabled), .conversation-direct__earlier:focus-visible { color: rgba(248, 248, 247, 0.82); } .conversation-direct__earlier:disabled { cursor: wait; opacity: 0.65; } .conversation-direct__message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 10px 0 3px; } .conversation-direct__message--continuation { padding-top: 1px; } /* Still a grid item, so the copy stays in the second column — but with no height, so a one-line reply is one line tall. See the note above. */ .conversation-direct__message--continuation .conversation-direct__face { visibility: hidden; height: 0; margin: 0; border-width: 0; } .conversation-direct__message--continuation .conversation-direct__head { display: none; } .conversation-direct__message--continuation .conversation-direct__copy p { margin-top: 0; } .conversation-direct__face--initials { display: grid; place-items: center; color: rgba(247, 246, 244, 0.76); background: rgba(255, 255, 255, 0.055); font: 400 11px/1 var(--font-ui); } /* The dropdown the title's chevron promises: a card floating over the conversation it was summoned from, which stays put beneath it. The surface is a backdrop root, so this card's blur samples the messages behind it — exactly the frosting a dropdown over content wants — while pigment keeps the names legible whatever is underneath. */ .conversation-chooser { position: absolute; z-index: 6; top: 52px; right: 0; left: 0; width: min(320px, calc(100% - 24px)); max-height: min(430px, calc(100% - 68px)); margin-inline: auto; display: none; grid-template-rows: auto minmax(0, 1fr); padding: 10px 10px 8px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; background: linear-gradient(158deg, rgba(50, 41, 34, 0.91), rgba(27, 23, 21, 0.95)); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 44px rgba(0, 0, 0, 0.45); } .conversation-lens[data-chooser='open'] .conversation-chooser { display: grid; animation: conversation-chooser-in 190ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes conversation-chooser-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } } .conversation-chooser__field { min-width: 0; padding: 0 0 10px; } .conversation-chooser__search { width: 100%; min-height: 42px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 21px; outline: 0; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.14); color: rgba(250, 249, 247, 0.92); caret-color: rgba(249, 235, 215, 0.88); font: 410 14px/22px var(--font-ui); transition: border-color 170ms ease, background-color 170ms ease; } .conversation-chooser__search::placeholder { color: rgba(239, 238, 236, 0.36); white-space: nowrap; text-overflow: ellipsis; } .conversation-chooser__search:focus { border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.1); } .conversation-chooser__search::-webkit-search-cancel-button { display: none; } .conversation-chooser__list { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.13) transparent; } .conversation-chooser__list::-webkit-scrollbar { width: 5px; } .conversation-chooser__list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.11); } .conversation-chooser__person { width: 100%; display: flex; align-items: center; gap: 12px; padding: 7px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: default; text-align: left; transition: background-color 150ms ease; } .conversation-chooser__person:hover, .conversation-chooser__person:focus-visible { outline: 0; background: rgba(255, 255, 255, 0.07); } .conversation-chooser__face-wrap { position: relative; width: 36px; height: 36px; flex: none; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: rgba(255, 255, 255, 0.05); } .conversation-chooser__face { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; filter: var(--avatar-filter, none); } .conversation-chooser__face--initials { display: grid; place-items: center; color: rgba(247, 246, 244, 0.78); font: 400 13px/1 var(--font-ui); } .conversation-chooser__name { min-width: 0; overflow: hidden; color: rgba(249, 248, 246, 0.9); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.24); } .conversation-chooser__empty { display: grid; align-content: center; justify-items: center; min-height: 140px; padding: 24px 0; text-align: center; } .conversation-chooser__empty strong { color: rgba(247, 246, 244, 0.68); font: 380 17px/1.3 var(--font-ui); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } .conversation-rail__destination--start .conversation-rail__portrait { border-style: dashed; border-color: rgba(255, 255, 255, 0.24); background: transparent; box-shadow: none; } .conversation-rail__destination--start .conversation-rail__room-icon { width: 17px; height: 17px; color: rgba(247, 246, 244, 0.7); } .conversation-composer { position: relative; z-index: 3; grid-column: 2; grid-row: 3; min-width: 0; padding: 10px 16px 15px; background: transparent; } .conversation-composer__field { /* Reserve a separate text gutter; the send action stays at the last line. */ position: relative; min-width: 0; min-height: 48px; padding: 11px 50px 11px 16px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 24px; /* Raised, not sunk. On a lighter pane a dark well reads as a hole punched through the glass; a light one reads as another piece of it. */ background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 10px 26px -12px rgba(0, 0, 0, 0.55); transition: border-color 170ms ease, background-color 170ms ease, box-shadow 170ms ease; } .conversation-composer__field:focus-within { border-color: rgba(255, 255, 255, 0.27); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 10px 26px -12px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.07); } .conversation-composer__input { display: block; width: 100%; min-height: 24px; max-height: 100px; overflow: hidden; resize: none; border: 0; outline: 0; padding: 0; background: transparent; color: rgba(250, 249, 247, 0.92); caret-color: rgba(249, 235, 215, 0.88); font: 410 15px/24px var(--font-ui); user-select: text; -webkit-user-select: text; } .conversation-composer__input--scrolling { overflow-y: auto; } .conversation-composer__input::placeholder { color: rgba(239, 238, 236, 0.36); white-space: nowrap; text-overflow: ellipsis; } /* Asleep until there is something to send. An always-lit button asks to be pressed before you have written anything; this one wakes when you do. */ .conversation-composer__send { position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: rgba(247, 246, 244, 0.34); transform: scale(0.88); transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } .conversation-composer__send:not(:disabled) { /* Primed: the one light thing in the window, so the eye knows where the message goes without a label saying so. */ background: rgba(250, 248, 244, 0.93); color: rgba(24, 20, 17, 0.88); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5); transform: scale(1); } .conversation-composer__send:hover:not(:disabled), .conversation-composer__send:focus-visible:not(:disabled) { background: rgb(255, 254, 252); color: rgba(18, 15, 13, 0.95); outline: 0; /* The glyph points up, so the button leans that way under the cursor. */ transform: translateY(-1px) scale(1.05); } .conversation-composer__send:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); } .conversation-composer__send:active:not(:disabled) { transform: translateY(0) scale(0.94); } .conversation-composer__send-glyph { width: 15px; height: 15px; } .conversation-composer__meta { min-height: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 20px 0; color: rgba(237, 236, 234, 0.45); font-size: 10.5px; } .conversation-composer__status:empty, .conversation-composer__count:empty { visibility: hidden; } /* Four corners, each holding two edges, which is every shape the window can take. Each one straddles its corner — half the target sits outside the window, because an area that only reaches inward is what makes corners feel finicky. They are siblings of the surface because the surface clips. */ .conversation-lens__resize { --grab-out: 9px; --grab-in: 21px; position: absolute; z-index: 12; width: calc(var(--grab-out) + var(--grab-in)); height: calc(var(--grab-out) + var(--grab-in)); padding: 0; border: 0; background: transparent; } .conversation-lens__resize--nw, .conversation-lens__resize--se { cursor: nwse-resize; } .conversation-lens__resize--ne, .conversation-lens__resize--sw { cursor: nesw-resize; } .conversation-lens__resize--nw { top: calc(var(--grab-out) * -1); left: calc(var(--grab-out) * -1); } .conversation-lens__resize--ne { top: calc(var(--grab-out) * -1); right: calc(var(--grab-out) * -1); } .conversation-lens__resize--sw { bottom: calc(var(--grab-out) * -1); left: calc(var(--grab-out) * -1); } .conversation-lens__resize--se { bottom: calc(var(--grab-out) * -1); right: calc(var(--grab-out) * -1); } .conversation-lens__resize:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.4); outline-offset: -4px; border-radius: 10px; } /* A bracket lights under the hand, following the angle the window actually turns through. Nothing is drawn until you go looking, so the silhouette stays clean. */ .conversation-lens__resize-mark { position: absolute; width: 15px; height: 15px; border: 3px solid rgba(255, 255, 255, 0.58); border-radius: 7px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); opacity: 0; transition: opacity 150ms ease; } .conversation-lens__resize:hover .conversation-lens__resize-mark, .conversation-lens__resize:focus-visible .conversation-lens__resize-mark, .conversation-lens--resizing .conversation-lens__resize:hover .conversation-lens__resize-mark { opacity: 1; } .conversation-lens__resize--nw .conversation-lens__resize-mark { top: var(--grab-out); left: var(--grab-out); border-right-color: transparent; border-bottom-color: transparent; } .conversation-lens__resize--ne .conversation-lens__resize-mark { top: var(--grab-out); right: var(--grab-out); border-left-color: transparent; border-bottom-color: transparent; } .conversation-lens__resize--sw .conversation-lens__resize-mark { bottom: var(--grab-out); left: var(--grab-out); border-right-color: transparent; border-top-color: transparent; } .conversation-lens__resize--se .conversation-lens__resize-mark { bottom: var(--grab-out); right: var(--grab-out); border-left-color: transparent; border-top-color: transparent; } .conversation-lens__resize--nw .conversation-lens__resize-mark { top: var(--grab-out); left: var(--grab-out); border-right-color: transparent; border-bottom-color: transparent; } .conversation-lens__resize--ne .conversation-lens__resize-mark { top: var(--grab-out); right: var(--grab-out); border-left-color: transparent; border-bottom-color: transparent; } .conversation-lens__resize--sw .conversation-lens__resize-mark { bottom: var(--grab-out); left: var(--grab-out); border-right-color: transparent; border-top-color: transparent; } .conversation-lens__resize--se .conversation-lens__resize-mark { bottom: var(--grab-out); right: var(--grab-out); border-left-color: transparent; border-top-color: transparent; } #top-bar .icon-btn[aria-controls='conversation-lens'] { transition: color 170ms ease, background-color 180ms ease, box-shadow 220ms ease, transform 170ms ease; } :root:not(.platform-web) #top-bar .icon-btn[aria-controls='conversation-lens'][aria-expanded='true'] { color: rgba(249, 248, 246, 0.88); background: rgba(255, 255, 255, 0.075); box-shadow: inset 0 1px rgba(255, 255, 255, 0.055), 0 0 15px rgba(255, 255, 255, 0.06); } /* The window folds into this button. One beat of give, as if it landed with some weight — without it the pane shrinks toward a point and simply stops. */ @keyframes conversation-caught { 0% { transform: scale(1); } 38% { transform: scale(0.9); } 100% { transform: scale(1); } } #top-bar .icon-btn--caught { animation: conversation-caught 340ms cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { #top-bar .icon-btn--caught, .conversation-chooser { animation: none; } } /* Browser compositors sample the transformed room less predictably than WKWebView, so the web pane carries a little more pigment and a little less blur. Brightness stays above one — that is the part that is not negotiable. */ .platform-web .conversation-lens__glass { --conversation-tint-a: rgba(29, 24, 21, 0.4); --conversation-tint-b: rgba(19, 16, 15, 0.51); backdrop-filter: blur(33px) saturate(176%) brightness(1.11); -webkit-backdrop-filter: blur(33px) saturate(176%) brightness(1.11); } @media (max-resolution: 1.25dppx) { /* A window is not a popover. The house drops blur at 1x because a wide blur bands visibly and a small panel still reads as a panel when opaque. Neither holds at 460x600: opaque here is the grey slab this material exists to avoid. So halve the radius instead, and let pigment carry the legibility the blur is no longer providing. */ .platform-web .conversation-lens__glass { --conversation-tint-a: rgba(30, 25, 22, 0.6); --conversation-tint-b: rgba(20, 17, 16, 0.69); backdrop-filter: blur(18px) saturate(164%) brightness(1.08); -webkit-backdrop-filter: blur(18px) saturate(164%) brightness(1.08); } /* The capsule is small and holds no reading text, so the house rule applies. */ } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { /* Opaque is unavoidable, so make it painterly rather than flat: a cool spill from the top left and the lamp's amber pooling at the base. */ .conversation-lens__glass { background: radial-gradient(120% 80% at 14% -6%, rgba(96, 84, 74, 0.42), transparent 64%), radial-gradient(90% 70% at 108% 96%, rgba(242, 180, 92, 0.1), transparent 70%), linear-gradient( 158deg, rgba(37, 30, 26, 0.955), rgba(24, 20, 18, 0.975) 46%, rgba(16, 14, 13, 0.985) ) padding-box, var(--conversation-rim) border-box; } } @media (pointer: coarse), (max-width: 699px) { /* Conversations becomes the phone's primary surface. The room profile chip normally occupies this same top-right corner at a higher stacking level; letting it remain there hides the minimize control and sends the tap to Settings. Recede the room chrome until the window folds away. */ body.conversation-lens-open .profile-chip--room { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-5px) scale(0.9); transition: opacity 120ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 180ms; } .conversation-lens { --conversation-rail-width: 62px; --conversation-radius: 30px; --conversation-width: calc(100vw - 16px); --conversation-height: calc( var(--conversation-viewport-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px ); --conversation-x: 8px; --conversation-y: calc(var(--conversation-viewport-top, 0px) + env(safe-area-inset-top) + 8px); } .conversation-lens__header { padding: 14px 50px 9px; cursor: default; } .conversation-lens__title { font-size: 18px; } .conversation-lens__private-mark { font-size: 9.5px; } .conversation-lens__minimize { top: 8px; right: 8px; width: 44px; height: 44px; background: transparent; box-shadow: none; } /* The visible circle stays as quiet as the desktop control while its hand target reaches the mobile 44px minimum. Keeping those two sizes separate avoids making the header look heavier just to make it easier to use. */ .conversation-lens__minimize::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); transition: background-color 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1); } .conversation-lens__minimize:hover, .conversation-lens__minimize:focus-visible { background: transparent; } .conversation-lens__minimize:hover::before, .conversation-lens__minimize:focus-visible::before { background: rgba(255, 255, 255, 0.13); } .conversation-lens__minimize:active { transform: none; } .conversation-lens__minimize:active::before { transform: scale(0.92); } .conversation-lens__minimize-glyph { position: relative; z-index: 1; } .conversation-rail { gap: 11px; padding: 6px 7px calc(env(safe-area-inset-bottom) + 13px); } .conversation-rail__portrait { width: 42px; height: 42px; } .conversation-rail__destination { min-height: 44px; align-items: center; } /* There is no hover on a phone, so there is nothing to reveal. */ .conversation-rail__label { display: none; } .conversation-lens__feed { padding: 8px 15px 12px; } .conversation-feed .lately__message-copy, .conversation-direct__copy p { font-size: 15.5px; } .conversation-composer { padding: 10px 11px calc(env(safe-area-inset-bottom) + 11px); } /* Keep the empty field compact while retaining a comfortable send target. */ .conversation-composer__field { min-height: 49px; padding: 11px 56px 11px 16px; border-radius: 27px; } .conversation-composer__input { min-height: 25px; font-size: 17px; line-height: 25px; } .conversation-composer__send { right: 6px; bottom: 5px; width: 37px; height: 37px; } .conversation-lens__resize { display: none; } } @media (max-width: 380px) { .conversation-lens { --conversation-rail-width: 56px; } .conversation-lens__private-mark { margin-left: 7px; } .conversation-lens__title { font-size: 16.5px; } .conversation-rail__portrait { width: 38px; height: 38px; } .conversation-lens__feed { padding-inline: 12px; } } @media (prefers-reduced-motion: reduce) { .conversation-lens, .conversation-lens__glass, .conversation-lens__surface, .conversation-lens__sheen, .conversation-rail__label, .conversation-rail__label--visible, .conversation-lens__minimize, .conversation-rail__destination, .conversation-rail__portrait, .conversation-composer__send { transition-duration: 1ms; transition-delay: 0s; } /* No scale pop on arrival: the pane is simply there. The swipe offset stays, so a thumb still drags it, and `--moving` outranks this on specificity so the drag lift is unaffected. */ .conversation-lens__glass, .conversation-lens__surface, .conversation-lens[data-state='expanded'] .conversation-lens__glass, .conversation-lens[data-state='expanded'] .conversation-lens__surface { transform: translate3d(var(--conversation-swipe-x, 0), 0, 0); } } /* ——— The settled window: stages two and three ——— Settling is presentation, not navigation. The window stays exactly where it is, holding exactly the rows it was showing; everything that is not the words — glass, header, rail, composer, shadows, handles — fades to perfectly invisible around them. Nothing re-renders, nothing reflows, no message moves by a pixel. The node takes no pointer events at all: the room is clickable through the very rectangle the words stand in (hover is hit-tested from TS). `data-settled='quiet'` is stage three: the words fade too, slowly, the way a conversation goes quiet. */ .conversation-lens[data-settled] { pointer-events: none; } /* Wake is quick; settling is an exhale. These base transitions are the wake speed — the [data-settled] rules below override with the slower fade. */ .conversation-lens__header, .conversation-lens .conversation-rail, .conversation-lens .conversation-composer, .conversation-lens__new-activity { transition: opacity 200ms ease; } .conversation-lens__feed { transition: text-shadow 300ms ease; } .conversation-lens__feed-well { transition: opacity 400ms ease; } .conversation-lens[data-settled] .conversation-lens__glass, .conversation-lens[data-settled] .conversation-lens__header, .conversation-lens[data-settled] .conversation-rail, .conversation-lens[data-settled] .conversation-composer, .conversation-lens[data-settled] .conversation-lens__new-activity, .conversation-lens[data-settled] .conversation-lens__resize { opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s linear 600ms; } /* The glass carried the contrast; alone, the words buy their own. A local shadow under the text, never a darker fill — the house rule. The scrollbar keeps its geometry and loses its paint, so nothing shifts. */ .conversation-lens[data-settled] .conversation-lens__feed { text-shadow: 0 1px 2px rgba(12, 9, 7, 0.65), 0 3px 14px rgba(12, 9, 7, 0.5); transition: text-shadow 700ms ease; scrollbar-color: transparent transparent; } .conversation-lens[data-settled] .conversation-lens__feed::-webkit-scrollbar-thumb { background: transparent; } /* Stage three arrives the way a conversation goes quiet: slowly. */ .conversation-lens[data-settled='quiet'] .conversation-lens__feed-well { opacity: 0; transition: opacity 1800ms ease; } /* ——— The greeter ——— The first voice in every room: an invitation, first in the feed, so a settled corner is never blank and a fresh room never reads as dead. */ .conversation-greeter { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px; font-size: 12.5px; color: rgba(238, 224, 204, 0.78); } .conversation-greeter__glyph { width: 15px; height: 15px; flex: none; opacity: 0.85; } .conversation-lens__direct-more {border:0;background:transparent;color:inherit;cursor:pointer;border-radius:10px;width:36px;height:36px;margin-right:6px;flex-shrink:0} .conversation-lens__direct-more[hidden]{display:none} .conversation-lens__direct-more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round} .conversation-lens__direct-more:hover{background:rgb(255 255 255 / .1)} .conversation-lens__direct-more:focus-visible{outline:2px solid currentColor;outline-offset:2px} @media(pointer:coarse){.conversation-lens__direct-more{width:44px;height:44px}} /* Symmetric action reserves center the identity against the complete window. The adjacent lock is outside its measured width, so status never shifts it. */ .conversation-lens[data-size] .conversation-lens__header, .conversation-lens .conversation-lens__header { display:flex;justify-content:center;align-items:center;padding:10px 60px; --conversation-header-control-size:36px; } .conversation-lens[data-size] .conversation-lens__header--with-options, .conversation-lens .conversation-lens__header--with-options {padding-inline:112px;} .conversation-lens__identity {position:relative;width:max-content;max-width:100%;flex:0 1 auto;height:var(--conversation-header-control-size,36px);display:flex;align-items:center;} .conversation-lens__profile-trigger {flex:none;} .conversation-lens__identity > .conversation-lens__private-mark { position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:5px; padding:0;width:18px;height:24px;justify-content:center;background:transparent;color:rgb(248 247 243 / .8); } .conversation-lens__private-label {display:none;} .conversation-lens__private-glyph {width:16px;height:16px;} .conversation-lens[data-size='compact'] .conversation-lens__private-glyph {width:16px;height:16px;} .conversation-lens__private-mark:focus-visible {outline:2px solid currentColor;outline-offset:2px;} .conversation-lens__title {font:500 16px/1.3 var(--font-ui);} .conversation-lens__identity > .conversation-lens__private-mark[hidden] {display:none;} .conversation-lens__direct-more {position:absolute;top:10px;right:51px;margin:0;width:36px;height:36px;display:grid;place-items:center;padding:0;z-index:10;} .conversation-lens[data-size] .conversation-lens__minimize {top:10px;right:9px;width:36px;height:36px;} @media(pointer:coarse){ .conversation-lens[data-size] .conversation-lens__header {--conversation-header-control-size:44px;} .conversation-lens[data-size] .conversation-lens__title--button {min-height:44px;} .conversation-lens[data-size] .conversation-lens__header--with-options {padding-inline:114px;} .conversation-lens__direct-more {top:10px;right:45px;width:44px;height:44px;} .conversation-lens[data-size] .conversation-lens__minimize {top:10px;right:1px;width:44px;height:44px;} .conversation-lens[data-size='compact'] .conversation-lens__profile-trigger {width:28px;height:28px;} .conversation-lens[data-size='compact'] .conversation-lens__identity {gap:6px;} } .conversation-lens__privacy-tip {padding:8px 10px;border:1px solid rgb(255 255 255 / .22);border-radius:10px;background:rgb(56 54 49 / .96);color:#fff;font:400 12px/1.4 var(--font-ui);} /* One chooser target: portrait, name and chevron share the same surface. */ .conversation-lens__identity > .conversation-lens__title:not(button) {display:none;} .conversation-lens__title--button {display:inline-flex;gap:6px;max-width:100%;} .conversation-lens[data-size] .conversation-lens__title--button {height:var(--conversation-header-control-size,36px);min-height:var(--conversation-header-control-size,36px);padding-block:0;align-items:center;box-sizing:border-box;} .conversation-lens__chooser-avatar {display:flex;flex:none;width:26px;height:26px;} .conversation-lens__chooser-avatar[hidden] {display:none;} .conversation-lens__chooser-avatar .conversation-lens__profile-face {width:26px;height:26px;} .conversation-lens__identity > .conversation-lens__title-unread {position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:5px;} .conversation-lens__identity:has(> .conversation-lens__title-unread:not([hidden])) > .conversation-lens__private-mark {margin-left:16px;} .conversation-direct__empty-profile {border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;} .conversation-direct__empty-profile:focus-visible {outline:1px solid currentColor;outline-offset:4px;border-radius:4px;} .conversation-lens__profile-trigger { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; touch-action: manipulation; } .conversation-lens__profile-trigger[hidden] { display: none; } .conversation-lens__profile-trigger:hover { background: rgba(255,255,255,.08); } .conversation-lens__profile-trigger:focus-visible { outline: 1px solid rgba(255,255,255,.6); outline-offset: 2px; } .conversation-lens__profile-face { display: grid; place-items: center; width: 27px; height: 27px; object-fit: cover; border-radius: 50%; background: rgba(255,255,255,.11); box-shadow: 0 0 0 1px rgba(255,255,255,.2); color: rgba(255,255,255,.85); font-size: 8px; } .conversation-profile-page { position: relative; z-index: 4; grid-column: 1 / -1; grid-row: 1 / -1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px 26px 10px; } .conversation-lens__page[hidden], .conversation-rail[hidden] { display: none; } .conversation-profile-page[hidden] { display: none; } .conversation-profile-page .public-profile { display: flex; flex-direction: column; min-height: 0; height: 100%; } /* The body is the scroller, not the page: the header — and the way out it holds — must never scroll away with the content. */ .conversation-profile-page .public-profile__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; } .conversation-profile-page .public-profile__body::-webkit-scrollbar { width: 5px; } .conversation-profile-page .public-profile__body::-webkit-scrollbar-track { margin-block: 14px; } .conversation-profile-page .public-profile__body::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255,255,255,.16); } .conversation-profile-page .public-profile__content { min-height: 100%; box-sizing: border-box; } .conversation-profile-page .public-profile__message { margin-top: auto; } /* At compact window widths the hero yields before the name does: a smaller portrait and tighter gap keep a long name from folding word by word. */ .conversation-lens[data-size='compact'] .conversation-profile-page .public-profile__top { gap: 12px; } .conversation-lens[data-size='compact'] .conversation-profile-page .public-profile__avatar { width: 54px; height: 54px; flex-basis: 54px; } .conversation-lens[data-size='compact'] .conversation-profile-page .public-profile__identity h2 { font-size: 19px; } .conversation-direct__profile-face, .conversation-direct__profile-name, .lately__profile-face, .lately__profile-name, .conversation-request__profile, .conversation-request__profile-name { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; } .conversation-direct__profile-face { align-self: start; border-radius: 50%; } .lately__profile-face { align-self: start; border-radius: 50%; } .lately__profile-face img.lately__face { display: block; } .conversation-direct__profile-name { min-width: 0; text-align: left; } .lately__profile-name { min-width: 0; text-align: left; } .conversation-direct__profile-face:focus-visible, .lately__profile-face:focus-visible, .conversation-request__profile:focus-visible { outline: 1px solid rgba(255,255,255,.62); outline-offset: 2px; } .conversation-direct__profile-name:hover strong, .conversation-direct__profile-name:focus-visible strong, .lately__profile-name:hover, .lately__profile-name:focus-visible, .conversation-request__profile-name:hover, .conversation-request__profile-name:focus-visible { text-decoration: underline; text-decoration-color: rgba(255,255,255,.32); text-underline-offset: 3px; } .conversation-direct__profile-name:focus-visible, .lately__profile-name:focus-visible, .conversation-request__profile-name:focus-visible { outline: 0; } .conversation-request__profile { border-radius: 50%; } @media (max-width: 700px), (pointer: coarse) and (max-width: 1024px) { .conversation-profile-page { padding: 11px 20px max(18px, env(safe-area-inset-bottom)); } .conversation-lens__profile-trigger { width: 34px; height: 34px; } .conversation-lens__profile-face { width: 28px; height: 28px; } } @media (max-width: 380px) { .conversation-profile-page { padding-inline: 15px; } } /* Initials sit on one optical baseline across every scale of conversation. Photos never match these modifiers, so their crop and placement are intact. */ .conversation-feed .lately__face--initials, .conversation-direct__face--initials, .conversation-rail__face--initials, .conversation-chooser__face--initials, .conversation-request__face--initials, .conversation-lens__profile-face--initials { display: grid; place-items: center; box-sizing: border-box; padding-top: 1px; line-height: 1; } .public-profile { min-height: 100%; color: rgba(252, 252, 255, .96); font: inherit; } .public-profile__header { display: flex; align-items: center; min-height: 41px; cursor: grab; touch-action: none; } .public-profile__header--close { justify-content: flex-end; } .conversation-lens--moving .public-profile__header { cursor: grabbing; } .public-profile__back { display: inline-flex; align-items: center; gap: 3px; min-height: 34px; margin: 2px 0 5px; padding: 0 6px 0 1px; border: 0; color: rgba(247, 248, 255, .68); background: transparent; font: inherit; font-size: 12px; cursor: pointer; } .public-profile__back:hover, .public-profile__back:focus-visible { color: #fff; } .public-profile__back:focus-visible { outline: 1px solid rgba(255,255,255,.55); outline-offset: 2px; border-radius: 8px; } .public-profile__back-glyph { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; } .public-profile__close { position: relative; width: 32px; height: 32px; display: grid; place-items: center; margin: 2px 0 5px auto; padding: 0; border: 0; border-radius: 50%; color: rgba(247, 248, 255, .54); background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); cursor: pointer; transition: color 160ms ease, background-color 160ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1); } .public-profile__close:hover, .public-profile__close:focus-visible { color: rgba(255, 255, 255, .94); background: rgba(255, 255, 255, .13); outline: 0; } .public-profile__close:active { transform: scale(.94); } .public-profile__close-glyph { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.55; } .public-profile__body { min-height: 360px; } .public-profile__content { display: flex; flex-direction: column; gap: 25px; padding: 1px 1px 24px; } .public-profile__top { display: flex; align-items: center; gap: 16px; padding: 5px 2px 2px; } .public-profile__avatar { width: 72px; height: 72px; flex: 0 0 72px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.26), 0 8px 24px rgba(0,0,0,.22); } .public-profile__avatar--initials { display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 20px; } .public-profile__identity { min-width: 0; } .public-profile__name-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .public-profile__identity h2 { margin: 0 0 5px; font-size: 22px; line-height: 1.05; letter-spacing: -.025em; } .public-profile__identity p { margin: 5px 0 0; color: rgba(247,248,255,.46); font-size: 11px; } .public-profile__location { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; color: rgba(247,248,255,.7); font-size: 12px; } .public-profile__flag { width: 17px; height: 12px; flex: 0 0 auto; margin-bottom: 5px; border-radius: 2px; object-fit: cover; } .public-profile__pin { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; opacity: .7; } .public-profile__section { display: grid; gap: 11px; } .public-profile__section h3 { margin: 0; color: rgba(252,252,255,.86); font-size: 12px; font-weight: 650; letter-spacing: .015em; } .public-profile__history-card { padding: 14px 15px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: radial-gradient(circle at 82% -35%, rgba(173,215,255,.09), transparent 47%), linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.075); } .public-profile__history-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 17px; } .public-profile__history-stat { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: rgba(247,248,255,.48); font-size: 10px; line-height: 1.2; } .public-profile__history-stat i { position: relative; width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid rgba(210,233,252,.4); border-radius: 50%; } .public-profile__history-stat--here i { background: rgba(199,229,253,.54); box-shadow: 0 0 9px rgba(151,204,247,.16); } .public-profile__history-stat--together { gap: 9px; } .public-profile__history-stat--together i { width: 13px; height: 8px; border: 0; border-radius: 0; } .public-profile__history-stat--together i::before, .public-profile__history-stat--together i::after { content: ''; position: absolute; top: 1px; box-sizing: border-box; width: 6px; height: 6px; border: 1px solid rgba(210,233,252,.4); border-radius: 50%; } .public-profile__history-stat--together i::before { left: 1px; background: rgba(199,229,253,.34); } .public-profile__history-stat--together i::after { right: 1px; background: rgba(176,210,239,.14); } .public-profile__history-stat strong { color: rgba(250,252,255,.82); font: inherit; font-weight: 620; } .public-profile__recent-presence { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.065); } .public-profile__recent-label, .public-profile__earlier-days { color: rgba(247,248,255,.34); font-size: 8px; } .public-profile__recent-days { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; } .public-profile__recent-days li { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .public-profile__recent-days li::before { content: ''; width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: rgba(207,232,255,.72); box-shadow: 0 0 8px rgba(151,204,247,.17); } .public-profile__recent-days time { overflow: hidden; color: rgba(247,250,255,.64); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .public-profile__earlier-days { white-space: nowrap; } .public-profile__history-note { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.065); color: rgba(247,248,255,.4); font-size: 9px; } .public-profile__history-hidden { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.035); } .public-profile__history-hidden div { display: grid; gap: 3px; } .public-profile__history-hidden strong { font-size: 11px; font-weight: 600; } .public-profile__history-hidden span:not(.public-profile__history-orbit) { color: rgba(247,248,255,.43); font-size: 10px; } .public-profile__history-orbit { width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: inset 8px -5px 15px rgba(255,255,255,.05); } .public-profile__links { display: grid; gap: 5px; } .public-profile__link { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; gap: 9px; min-height: 44px; padding: 5px 9px 5px 6px; border: 0; border-radius: 11px; color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; } .public-profile__link:hover { background: rgba(255,255,255,.07); } .public-profile__link:focus-visible { outline: 1px solid rgba(255,255,255,.5); outline-offset: 1px; } .public-profile__link-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.055); font-size: 12px; font-weight: 650; } .public-profile__link-mark svg { width: 15px; height: 15px; } .public-profile__platform-glyph--filled { fill: currentColor; stroke: none; } .public-profile__platform-glyph--outline { fill: none; stroke: currentColor; stroke-width: 1.55; } .public-profile__link-copy { display: grid; min-width: 0; gap: 1px; } .public-profile__link-copy strong { font-size: 11px; font-weight: 600; } .public-profile__link-copy span { overflow: hidden; color: rgba(247,248,255,.44); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .public-profile__link-arrow { color: rgba(247,248,255,.28); font-size: 13px; } .public-profile__message, .public-profile__retry { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: rgba(255,255,255,.9); background: rgba(255,255,255,.08); font: inherit; font-size: 12px; cursor: pointer; } /* The profile owns its own vertical rhythm. Some full-height hosts historically pushed Message to the bottom; keeping it in flow leaves any spare room after the profile's content instead of between Links and Message. */ .public-profile .public-profile__content > .public-profile__message { margin-top: 0; } .public-profile__message:hover, .public-profile__retry:hover { background: rgba(255,255,255,.13); } .public-profile__message-glyph { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.55; } .public-profile__loading { display: grid; gap: 17px; padding: 7px 2px; } .public-profile__loading > span { display: block; background: rgba(255,255,255,.055); animation: public-profile-pulse 1.5s ease-in-out infinite alternate; } .public-profile__loading-face { width: 72px; height: 72px; border-radius: 50%; } .public-profile__loading-line { width: 52%; height: 18px; border-radius: 7px; } .public-profile__loading-calendar { height: 144px; border-radius: 15px; } .public-profile__unavailable { display: grid; justify-items: start; gap: 6px; padding: 48px 5px; } .public-profile__unavailable strong { font-size: 13px; } .public-profile__unavailable span { color: rgba(247,248,255,.48); font-size: 11px; } .public-profile__retry { margin-top: 8px; padding: 0 15px; } @keyframes public-profile-pulse { to { background: rgba(255,255,255,.1); } } @media (pointer: coarse) { .public-profile__header { cursor: default; } .public-profile__close { width: 44px; height: 44px; margin-top: -3px; margin-bottom: 3px; background: transparent; box-shadow: none; } .public-profile__close::before { content: ''; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } .public-profile__close-glyph { position: relative; z-index: 1; } } @media (prefers-reduced-motion: reduce) { .public-profile__loading > span { animation: none; } .public-profile__close { transition-duration: 1ms; } } /* A profile met in the room, on its own glass — deliberately not the conversation window. It arrives centred over a quiet scrim so it reads as its own moment, unrelated to any chat kept open elsewhere. */ .room-profile__backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 20px; /* A plain dim: a filtered backdrop over the transformed room is exactly the compositor trap the other scrims already record. */ background: rgba(8, 6, 5, 0.34); animation: room-profile-scrim-in 180ms ease both; } .room-profile__pane { display: flex; flex-direction: column; width: min(352px, calc(100vw - 32px)); max-height: min(78vh, 620px); min-height: 0; border-radius: 26px; padding: 12px 22px 14px; color: rgba(252, 252, 255, 0.96); /* A reading surface, not chrome: pigment carries legibility, blur is depth. */ } .room-profile__pane .public-profile { display: flex; flex-direction: column; min-height: 0; } /* The body scrolls; the header — and the way out it holds — stays put. The header releases its row so the identity rises beside the close button rather than under an empty band; the top row keeps the corner clear. */ .room-profile__pane .public-profile__header--close { position: relative; z-index: 2; margin-bottom: -41px; flex: none; cursor: default; touch-action: auto; } .room-profile__pane .public-profile__top { padding-right: 36px; } .room-profile__pane .public-profile__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; } .room-profile__pane .public-profile__body::-webkit-scrollbar { width: 5px; } .room-profile__pane .public-profile__body::-webkit-scrollbar-track { margin-block: 14px; } .room-profile__pane .public-profile__body::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.16); } .room-profile__pane .public-profile__content { min-height: 100%; box-sizing: border-box; } .room-profile__pane .public-profile__message { margin-top: auto; } @keyframes room-profile-scrim-in { from { opacity: 0; } } @keyframes room-profile-pane-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } } @media (prefers-reduced-motion: reduce) { .room-profile__backdrop, .room-profile__pane { animation: none; } } /* Your glyph is the first sibling in the bar — the same 32px box and 18.5px mark as the room's controls, no dot, no words, and no size changes: the bar never moves. Presence needs no light (away has the glass overlay), and the activity's word lives in the panel, one hover away. */ .session-chip { position: relative; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(244, 239, 231, 0.62); cursor: default; transition: background-color 160ms ease, color 160ms ease; } .session-chip[hidden] { display: none; } .session-chip:hover, .session-chip:focus-visible, .session-chip[aria-expanded='true'] { background: rgba(255, 255, 255, 0.13); color: var(--ink); } .session-chip:focus-visible { outline: 1px solid rgba(255, 222, 174, 0.72); outline-offset: 2px; } /* Same mark, quieter states. There is deliberately no pause glyph. */ .session-chip[data-presence='away'], .session-chip[data-presence='pause'] { color: rgba(244, 239, 231, 0.34); } .session-chip__activity { flex: none; display: grid; place-items: center; } .session-chip__activity-glyph { width: 18.5px; height: 18.5px; stroke-width: 1.45; } .bar__sep { width: 1px; height: 14px; flex: none; background: rgba(255, 255, 255, 0.13); } .bar__sep[hidden] { display: none; } .session-popover { position: fixed; z-index: 53; top: var(--session-top, 68px); left: var(--session-left, 14px); width: min(296px, calc(100vw - 28px)); max-height: min(72vh, 610px); overflow-y: auto; padding: 18px; border: 1px solid transparent; border-radius: 19px; color: var(--ink); background: linear-gradient(158deg, var(--panel-tint-a), var(--panel-tint-b)) padding-box, var(--panel-rim) border-box; backdrop-filter: var(--panel-filter); -webkit-backdrop-filter: var(--panel-filter); box-shadow: var(--panel-shadow); text-shadow: var(--panel-text-shadow); transform-origin: 42px -8px; animation: session-popover-in 170ms cubic-bezier(0.16, 0.72, 0.25, 1) both; scrollbar-width: none; } .session-popover::-webkit-scrollbar { display: none; } .session-popover[hidden] { display: none; } /* "Just here" is the one label long enough to overflow the row; the panel widens for it rather than letting flexbox crush the pill. */ .session-popover[data-activity='here'] { width: min(324px, calc(100vw - 28px)); } @keyframes session-popover-in { from { opacity: 0; transform: translateY(-4px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .session-intentions { --session-intention-control-size: 20px; --session-intention-mark-size: 14px; --session-intention-row-height: 30px; --session-intention-column-gap: 8px; --session-intention-row-gap: 3px; padding: 4px 0 13px; } /* The panel's plan is bare lines, not the sit flow's boxed cards: the first focus reads as the same sentence Read and Write use. */ .session-intentions .intention-entry { padding: 0; border: 0; background: transparent; } .session-intentions .intention-entry:focus-within { border: 0; background: transparent; } .session-intentions .intention-entry__steps { row-gap: var(--session-intention-row-gap); align-items: stretch; } .session-intentions .session-intention__child-row { grid-template-columns: var(--session-intention-control-size) minmax(0, 1fr) 23px; min-height: var(--session-intention-row-height); align-items: center; gap: var(--session-intention-column-gap); margin: 0; padding: 0; } .session-intentions .session-intention__child-row .intention-step__input { height: var(--session-intention-row-height); margin: 0; padding: 0; line-height: 1.3; align-self: center; } .session-intentions .session-intention__child-row .intention-step__remove { align-self: center; justify-self: center; margin: 0; padding: 0; } .intention-step__check { width: var(--session-intention-control-size); height: var(--session-intention-control-size); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 232, 198, 0.88); cursor: pointer; align-self: center; justify-self: center; margin: 0; } .intention-step__check .intention-step__mark { display: grid; place-items: center; transition: border-color 150ms ease, background-color 150ms ease; } .intention-step__check:hover .intention-step__mark, .intention-step__check:focus-visible .intention-step__mark { border-color: rgba(242, 180, 92, 0.65); } .intention-step__check:focus-visible { outline: 1px solid rgba(242, 180, 92, 0.58); outline-offset: 1px; } .intention-step__check[aria-checked='true'] .intention-step__mark { border-color: rgba(242, 180, 92, 0.36); background: rgba(242, 180, 92, 0.13); } .intention-step__tick { width: 5px; height: 3px; border-bottom: 1px solid currentColor; border-left: 1px solid currentColor; opacity: 0; rotate: -45deg; translate: 0 -0.5px; } .intention-step__check[aria-checked='true'] .intention-step__tick { opacity: 1; } .intention-step--done .intention-step__input { color: rgba(244, 239, 231, 0.29); text-decoration: line-through; text-decoration-color: rgba(244, 239, 231, 0.2); } .intention-step--current .intention-step__input, .intention-entry--current .intention-entry__input { color: var(--ink); } .session-intentions .session-intention__leading-symbol { width: var(--session-intention-mark-size); height: var(--session-intention-mark-size); justify-self: center; } /* A new concrete item is not checkable until it has words, but it already occupies the exact checkbox geometry it will inherit when saved. */ .session-intentions .intention-step--session-draft > .intention-step__mark { border-color: rgba(244, 239, 231, 0.18); } .session-intentions .intention-entry__under { margin-left: 22px; } .session-intentions .intention-entry__decompose { grid-template-columns: var(--session-intention-control-size) auto; gap: 8px; min-height: 30px; height: auto; } .session-intentions .intention-entry__plus { opacity: 0.82; } /* ── The activity row: five glyphs, one carrying its name ───────────────── The current activity is the only pill with a word in it; the rest sit as bare, dimmed glyphs, and hover is a soft circle — the row never moves. */ .session-acts { display: flex; align-items: center; gap: 4px; /* Air the corner ring rests in; the glyphs never sit beneath it. */ padding-right: 28px; } .session-act { position: relative; height: 34px; min-width: 34px; /* A pill may never render below its content size: a crowded row must show itself as overflow to fix, not silently crush the label into the corners. */ flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: rgba(244, 239, 231, 0.4); font-family: var(--font-ui); font-size: 12.5px; cursor: default; transition: background-color 150ms ease, color 150ms ease; } .session-act__glyph { display: grid; place-items: center; } .session-act__glyph svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.45; } /* Only the current pill carries a word. Inside the panel you are already choosing between five visible glyphs — growing labels on hover just made the row shuffle. Hover is a soft circle, nothing more. */ .session-act__label { display: none; white-space: nowrap; } .session-act--current { gap: 8px; padding: 0 13px 0 12px; } .session-act--current .session-act__label { display: inline; } .session-act:hover, .session-act:focus-visible { background: rgba(255, 255, 255, 0.07); color: var(--ink-soft); outline: 0; } .session-act:focus-visible { outline: 1px solid rgba(255, 222, 174, 0.55); outline-offset: 1px; } /* Low-key on purpose: the pill marks where you are, it doesn't glow. */ .session-act--current, .session-act--current:hover { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13); color: rgba(244, 239, 231, 0.92); } /* An unfinished plan lives behind this glyph — visible exactly at the moment of switching, which is when it matters. */ .session-act__plandot { position: absolute; left: 50%; bottom: -2px; translate: -50% 0; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 222, 174, 0.55); } .session-act--current .session-act__plandot { display: none; } /* The panel's one rule: it separates the row from whatever the activity brings below. The footer separates itself with air instead. */ .session-acts-rule { height: 1px; margin: 11px 2px; background: rgba(255, 255, 255, 0.09); } /* ── Read / Write: the detail is the sentence itself ────────────────────── */ .session-detail-line { padding: 2px 2px 4px; } .session-detail-line.detail-field--prefixed { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; } .session-detail-line .detail-prefix { font: 14px/30px var(--font-ui); } .session-detail-line__input { min-width: 0; width: 100%; height: 30px; border: 0; outline: 0; background: transparent; color: var(--ink); /* 14px/30px matches the structural Work/Study sentence fields. */ font: 14px/30px var(--font-ui); } .session-detail-line__input::placeholder { color: rgba(244, 239, 231, 0.3); } /* ── Presence: the corner dot ───────────────────────────────────────────── Your presence stated in the panel's corner: a filled dot in the sage the "I'm back" button wears — here is alive, quietly breathing on the same irregular curve as every living light, never an LED. Anchored to the panel's corner, apart from the activity glyphs, which must never move. */ .session-presence { position: absolute; top: 21px; right: 16px; } .session-presence__dot { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; cursor: default; transition: background-color 150ms ease; } .session-presence__dot:hover, .session-presence__dot:focus-visible { background: rgba(255, 255, 255, 0.06); outline: 0; } .session-presence__mark { width: 8px; height: 8px; flex: none; border-radius: 50%; background: rgba(132, 201, 154, 0.85); box-shadow: 0 0 6px rgba(132, 201, 154, 0.22); animation: session-away-breath 11.5s ease-in-out infinite; } /* The dot's name floats beside it on hover; nothing moves. */ .session-presence__word { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); padding: 3px 9px; border-radius: 999px; background: rgba(46, 40, 38, 0.92); color: rgba(244, 239, 231, 0.72); font-family: var(--font-ui); font-size: 10.5px; letter-spacing: 0.02em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 140ms ease; } .session-presence__dot:hover .session-presence__word, .session-presence__dot:focus-visible .session-presence__word { opacity: 1; } /* The open menu already says it; the floating word yields. */ .session-presence__dot[aria-expanded='true'] .session-presence__word { opacity: 0; } /* The two-state menu: here and away side by side, taught once. The same glass as every floating surface here — tint over blur, never a slab. */ .session-presence-menu { /* Fixed like the panel itself: the panel scrolls (overflow-y: auto), so an absolutely-positioned child would be clipped at its edge — visibly broken under a wide activity pill like "Just here". */ position: fixed; z-index: 54; display: grid; gap: 2px; min-width: 138px; padding: 6px; border: 1px solid transparent; border-radius: 14px; background: linear-gradient(158deg, var(--panel-tint-a), var(--panel-tint-b)) padding-box, var(--panel-rim) border-box; backdrop-filter: var(--panel-filter); -webkit-backdrop-filter: var(--panel-filter); box-shadow: var(--panel-shadow); text-shadow: var(--panel-text-shadow); animation: session-popover-in 150ms cubic-bezier(0.2, 0.7, 0.2, 1); } .session-presence-menu__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: rgba(244, 239, 231, 0.62); font-family: var(--font-ui); font-size: 11.5px; text-align: left; transition: color 150ms ease, background-color 150ms ease; } .session-presence-menu__item:hover, .session-presence-menu__item:focus-visible { color: var(--ink); background: rgba(255, 255, 255, 0.07); outline: 0; } /* The current state sits in the quiet pill, like the current activity. */ .session-presence-menu__item--current { color: var(--ink); background: rgba(255, 255, 255, 0.07); } /* Menu marks are still, only the corner dot breathes. */ .session-presence-menu__item .session-presence__mark { animation: none; } /* Shape carries the state even without colour: the same crescent reappears on the away glass, after this labelled row has taught its meaning. */ .session-away-mark { width: 11px; height: 11px; flex: none; color: rgba(244, 239, 231, 0.78); fill: currentColor; stroke: none; } .session-presence-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 7px; } .session-action { min-height: 36px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: rgba(244, 239, 231, 0.68); font-family: var(--font-ui); font-size: 12px; cursor: default; } .session-action:hover, .session-action:focus-visible { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.075); color: var(--ink); outline: none; } .session-action--primary { border-color: rgba(132, 201, 154, 0.28); background: rgba(132, 201, 154, 0.08); } /* Away is intentionally softer, but the person remains visibly seated. */ .seat--away .seat__disc { opacity: 0.48; } .seat--away .seat__glyph { opacity: 0.42; color: #d5a665; } .session-away { position: fixed; inset: 0; z-index: 61; display: grid; place-items: center; padding: 20px; /* Quiet the room without erasing it. This surface is a pause in the room, not a route away from it, so the scenery remains atmospheric rather than competing with the decision in front. */ background: rgba(8, 7, 7, 0.31); backdrop-filter: blur(5px) saturate(112%); -webkit-backdrop-filter: blur(5px) saturate(112%); } .session-away[hidden] { display: none; } .session-away__glass { width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 28px 28px 26px; border: 1px solid transparent; border-radius: 23px; text-align: center; background: linear-gradient(158deg, rgba(46, 40, 39, 0.58), rgba(18, 18, 21, 0.72)) padding-box, var(--panel-rim) border-box; backdrop-filter: blur(36px) saturate(158%) brightness(1.07); -webkit-backdrop-filter: blur(36px) saturate(158%) brightness(1.07); box-shadow: var(--panel-shadow); text-shadow: var(--panel-text-shadow); animation: session-away-in 240ms cubic-bezier(0.16, 0.72, 0.25, 1) both; scrollbar-width: none; } .session-away__glass::-webkit-scrollbar { display: none; } @keyframes session-away-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .session-away__identity { display: grid; justify-items: center; } .session-away__portrait { position: relative; width: 58px; height: 58px; margin: 15px auto 5px; } .session-away__avatar { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 241, 222, 0.34); border-radius: 50%; background: linear-gradient(145deg, rgba(121, 119, 128, 0.62), rgba(48, 46, 52, 0.82)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 22px rgba(0, 0, 0, 0.24); color: rgba(255, 249, 241, 0.9); font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1; } .session-away__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } .session-away__status { position: absolute; right: 0; bottom: 1px; width: 15px; height: 15px; display: grid; place-items: center; border: 2px solid rgba(24, 22, 23, 0.96); border-radius: 50%; background: rgba(24, 22, 23, 0.96); color: rgba(244, 239, 231, 0.82); box-shadow: 0 0 0 1px rgba(255, 241, 222, 0.18); /* A slow, irregular breath — the stops are baked 1/f wander, never a sine pulse, so the mark reads as alive rather than as an alert. */ animation: session-away-breath 11.5s ease-in-out infinite; } .session-away__status-glyph { width: 12px; height: 12px; fill: currentColor; stroke: none; } @keyframes session-away-breath { 0% { opacity: 0.78; } 9% { opacity: 0.9; } 17% { opacity: 0.72; } 31% { opacity: 1; } 38% { opacity: 0.86; } 52% { opacity: 0.74; } 61% { opacity: 0.97; } 74% { opacity: 0.8; } 83% { opacity: 0.92; } 100% { opacity: 0.78; } } .session-away__title { margin-top: 8px; font-family: var(--font-display); font-variation-settings: 'opsz' 34; font-size: 30px; font-weight: 500; } .session-away__return { min-width: 128px; min-height: 41px; margin-top: 22px; border: 1px solid rgba(132, 201, 154, 0.42); border-radius: 11px; background: rgba(132, 201, 154, 0.12); color: var(--ink); font-family: var(--font-ui); font-size: 13.5px; font-weight: 550; } .session-away__return:hover, .session-away__return:focus-visible { border-color: rgba(132, 201, 154, 0.7); background: rgba(132, 201, 154, 0.18); outline: none; } /* The sit flow starts as one thought; hierarchy grows only on request. */ .ask--intentions { width: min(430px, calc(100vw - 28px)); max-height: min(78vh, 620px); overflow-y: auto; } .intention-editor { display: grid; gap: 9px; } .intention-entry { position: relative; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 13px; background: rgba(0, 0, 0, 0.16); transition: border-color 160ms ease, background-color 160ms ease; } .intention-entry:focus-within { border-color: rgba(242, 180, 92, 0.42); background: rgba(0, 0, 0, 0.2); } .intention-entry__line { display: grid; grid-template-columns: minmax(0, 1fr) 23px; align-items: center; gap: 8px; } /* The headline row completes the card's sentence: "work on …". The prefix is a grid cell rather than an overlay, so no measuring is needed here. */ .intention-entry__line--prefixed { grid-template-columns: auto minmax(0, 1fr) 23px; } .intention-entry__prefix { color: rgba(244, 239, 231, 0.55); font-family: var(--font-ui); font-size: 14px; white-space: pre; /* The 8px grid gap is sized for the remove button; between two words of the same sentence it should be an ordinary word space. */ margin-right: -3px; cursor: text; } .intention-entry__input, .intention-step__input { min-width: 0; height: 30px; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: var(--font-ui); font-size: 14px; } /* The hint sits clearly below the 0.55 prefix everywhere a sentence is completed — ink, then prefix, then hint. */ .intention-entry__input::placeholder, .intention-step__input::placeholder { color: rgba(244, 239, 231, 0.3); } .intention-entry__remove, .intention-step__remove { width: 23px; height: 23px; border: 0; border-radius: 50%; background: transparent; color: rgba(244, 239, 231, 0.36); font-size: 15px; } .intention-entry__remove[hidden], .intention-entry__decompose[hidden] { display: none; } .intention-entry__remove:hover, .intention-step__remove:hover { color: rgba(244, 239, 231, 0.58); } .intention-entry__under { min-height: 0; margin: 1px -2px -2px 20px; } .intention-entry__decompose { display: grid; grid-template-columns: 12px auto; gap: 7px; width: 100%; height: 24px; padding: 0; align-items: center; justify-content: start; border: 0; border-radius: 7px; background: transparent; color: rgba(244, 239, 231, 0.46); transition: color 140ms ease, background-color 140ms ease; } .intention-entry__plus { width: 12px; height: 12px; stroke-width: 1.2; transition: transform 140ms ease; } .intention-entry__add-label { font-family: var(--font-ui); font-size: 11.5px; } .intention-entry__decompose:hover { background: rgba(255, 255, 255, 0.025); color: rgba(244, 239, 231, 0.72); } .intention-entry__decompose:hover .intention-entry__plus { transform: scale(1.04); } .intention-entry__decompose:focus-visible { outline: 1px solid rgba(242, 180, 92, 0.55); outline-offset: -1px; } .intention-entry__steps { display: grid; gap: 3px; margin-left: 22px; } .intention-entry__steps:not(:empty) { padding-top: 3px; } .intention-step { display: grid; grid-template-columns: 13px minmax(0, 1fr) 23px; align-items: center; gap: 8px; animation: intention-step-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes intention-step-in { from { opacity: 0; transform: translateY(-4px) scale(0.99); } } .intention-step__mark { width: 9px; height: 9px; border: 1px solid rgba(244, 239, 231, 0.22); border-radius: 50%; } .intention-editor__another { justify-self: start; padding: 4px 9px; border: 0; background: transparent; color: rgba(244, 239, 231, 0.5); font-family: var(--font-ui); font-size: 12px; transition: color 140ms ease; } .intention-editor__another[hidden] { display: none; } .intention-editor__another:hover { color: rgba(244, 239, 231, 0.72); } @media (pointer: coarse) and (max-width: 1024px) { .session-popover { top: auto; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); width: auto; max-height: min(76dvh, 610px); padding: 20px; border-radius: 25px 25px 16px 16px; transform-origin: bottom center; } .session-action, .session-away__return { min-height: 44px; } /* Fingers need a bigger row than a cursor does. */ .session-act { height: 40px; min-width: 40px; } .session-presence { top: 15px; } .session-presence__dot { width: 40px; height: 40px; } .session-intentions { --session-intention-control-size: 24px; } } /* A narrow desktop window needs the same honest fit as a phone. The chip is already a bare glyph, so only the room controls need to tighten. */ @media (max-width: 520px) { #top-bar { max-width: calc(100vw - 70px); gap: 5px; padding-inline: 12px 5px; overflow: hidden; } #top-bar .icon-btn { width: 30px; height: 30px; } .session-away__glass { padding-inline: 24px; } } /* Keep the portrait present in short landscape windows without turning the overlay into a scroll-first surface. The identity simply folds into one horizontal thought; portrait phones retain the calmer vertical composition. */ @media (max-height: 430px) { .session-away__glass { padding: 20px 28px 18px; } .session-away__identity { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: center; text-align: left; } .session-away__portrait { width: 54px; height: 54px; margin: 12px 14px 12px 0; } .session-away__title { margin-top: 0; } .session-away__return { margin-top: 12px; } } @media (prefers-reduced-motion: reduce) { .session-popover, .session-away__glass { animation-duration: 1ms; } .session-away__status, .session-presence__mark { animation: none; } .session-presence-menu { animation-duration: 1ms; } .intention-step { animation-duration: 1ms; } .session-act, .session-presence__dot, .session-presence__word { transition-duration: 1ms; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .session-popover, .session-away__glass { background: linear-gradient(150deg, rgba(46, 33, 26, 0.96), rgba(22, 19, 17, 0.98)) padding-box, var(--panel-rim) border-box; } } .personal-mute-dialog__room { margin-top: 19px; margin-bottom: 0; } .personal-mute-dialog__conversation-reveal { max-height: 72px; margin-top: 15px; overflow: hidden; opacity: 1; transform: translateY(0); visibility: visible; transition: max-height 180ms cubic-bezier(0.22, 1, 0.36, 1), margin-top 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 130ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } .personal-mute-dialog__conversation-reveal[aria-hidden='true'] { max-height: 0; margin-top: 0; opacity: 0; pointer-events: none; transform: translateY(-4px); visibility: hidden; transition: max-height 180ms cubic-bezier(0.22, 1, 0.36, 1), margin-top 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 120ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 180ms; } .personal-mute-dialog__conversation { justify-content: flex-start; min-height: 54px; padding: 9px 11px; } .personal-mute-dialog__conversation-copy { display: grid; gap: 3px; min-width: 0; } .personal-mute-dialog__conversation-copy strong { color: inherit; font: 500 12px/1.3 var(--font-ui); } .personal-mute-dialog__conversation-copy span { color: rgba(235, 226, 216, 0.42); font: 400 10.5px/1.35 var(--font-ui); } .personal-mute-dialog__conversation:has(input:checked) .personal-mute-dialog__conversation-copy span { color: rgba(242, 231, 217, 0.58); } .personal-mute-dialog__save { border-color: rgba(226, 194, 151, 0.28) !important; background: rgba(181, 137, 83, 0.2); color: rgba(255, 239, 217, 0.92); } .personal-mute-dialog__save:hover:not(:disabled) { border-color: rgba(234, 202, 159, 0.42) !important; background: rgba(190, 144, 87, 0.3); color: rgba(255, 246, 233, 0.98); } .personal-mute-dialog__cancel { margin-right: 0; } .profile-panel__muted-copy { display: grid; gap: 3px; min-width: 0; } .profile-panel__muted-copy strong { overflow: hidden; color: rgba(246, 240, 233, 0.86); font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .profile-panel__muted-copy span { color: rgba(230, 223, 214, 0.43); font-size: 10.5px; line-height: 1.4; } @media (max-width: 700px), (pointer: coarse) and (max-width: 1024px) { .personal-mute-dialog__room { margin-top: 17px; } } @media (prefers-reduced-motion: reduce) { .personal-mute-dialog__conversation-reveal, .personal-mute-dialog__conversation-reveal[aria-hidden='true'] { transition: none; transform: none; } } /* Quiet Vale media screen Feature-owned on purpose: no new behavior belongs in the global style hotspot. Every placement still derives from Stage's canonical plate rect. */ /* The screen has no color of its own: the trigger is a bare warm-ink glyph like every neighbour, and its state lives INSIDE the drawing — off, the frame is simply a dark screen, which is the truth; on, one curved line of light appears across it. No fill, no halo, no badge: the exact grammar of the chat bubble's speech lines. */ .immersive-screen-trigger__pane { opacity: 0; transition: opacity 700ms ease; } .immersive-screen-trigger--lit .immersive-screen-trigger__pane { opacity: 1; } .immersive-screen-trigger:focus-visible { outline: 1px solid rgba(255, 222, 174, 0.78); outline-offset: 2px; } .immersive-screen-trigger--unavailable { opacity: 0.46; } /* Foreground media appears as a quiet first row in the existing room sound control only while it exists. It wears the popover's own amber, not a private accent: the row's identity is its label and its place at the top, never a color of its own. */ .volume-popover__row--screen { margin-bottom: 1px; padding-bottom: 11px; border-bottom: 1px solid rgba(244, 239, 231, 0.11); animation: volume-popover-channel-in 180ms cubic-bezier(0.2, 0.72, 0.2, 1); } .volume-popover__row--screen + .volume-popover__row { margin-top: 0; } @keyframes volume-popover-channel-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } .room--camera-immersive .room-camera-nav, .room--camera-immersive .room-camera-hint { opacity: 0; pointer-events: none; } .immersive-screen-player { position: absolute; /* The focal video occupies the rear-glazing depth. An exact plate-derived foreground pass restores mullions and furniture above it; occupants and conversations keep their existing higher room layers. */ z-index: 8; /* The opening is cut a breath inside the wood. Horizontal and vertical values keep the resulting picture exactly 16:9 rather than shrinking it by the same number of pixels on both axes. */ --immersive-screen-recess-x-base: clamp(1.7778px, calc(0.22 * var(--immersive-screen-frame, 9px)), 2.5px); --immersive-screen-recess-y-base: clamp(1px, calc(0.12375 * var(--immersive-screen-frame, 9px)), 1.40625px); --immersive-screen-recess-x: var(--immersive-screen-recess-x-base); --immersive-screen-recess-y: var(--immersive-screen-recess-y-base); --immersive-screen-joint-px: 1px; overflow: hidden; padding: 0; border-radius: 0; background: #05090a; box-shadow: none; opacity: 0; transition: opacity 360ms ease, left 420ms cubic-bezier(0.22, 1, 0.36, 1), top 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), height 420ms cubic-bezier(0.22, 1, 0.36, 1); } .immersive-screen-player--loading, .immersive-screen-player--visible { opacity: 1; } .immersive-screen-player--manipulating { transition-duration: 0ms; } /* The hung screen deliberately lets its joinery and shadow extend beyond the video opening. */ .immersive-screen-player--rear-wall { overflow: visible; background: #07100d; } .immersive-screen-player-foreground { position: absolute; z-index: 9; display: block; max-width: none; pointer-events: none; opacity: 0; transition: opacity 360ms ease; } .immersive-screen-resize-frame { position: absolute; z-index: 13; /* Invisible outward reach: hit surfaces extend past the wood by this much (Fitts's law), while every highlight still paints on the wood alone. */ --immersive-screen-grip: calc(0.82 * var(--immersive-screen-frame, 9px)); border: 0; pointer-events: none; transition: left 420ms cubic-bezier(0.22, 1, 0.36, 1), top 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), height 420ms cubic-bezier(0.22, 1, 0.36, 1); } /* Intent is separated at the wood's edge: hovering the PICTURE inspects (lift, YouTube chrome); hovering the FRAME only wakes the material's local reflection. The resize layer itself is an unpainted hit surface, so it must never animate opacity and invalidate the walnut underneath it. */ .immersive-screen-resize-frame:focus-visible { outline: none; } /* The material is separate from the handles: always present, never recolored by interaction, and strictly outside the iframe. Horizontal and vertical maps keep the grain longitudinal; a fixed repeat scale means resizing reveals more wood instead of stretching it. */ .immersive-screen-frame-material { position: absolute; z-index: 0; /* The walnut grows only into the room, never into the authored opening. Keeping its visible width separate from the aperture's structural frame reference preserves every picture, gasket and one-pixel joint dimension. */ --immersive-screen-frame-visible: calc(1.1 * var(--immersive-screen-frame, 9px)); /* Own the complete outer frame box. All animated rails now live at positive coordinates inside the filtered group, avoiding WebKit's fragile repaint path for a changing child wholly beyond the group's negative-x edge. */ inset: calc(-1 * var(--immersive-screen-frame-visible)); overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(12, 7, 4, 0.92)) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.36)); transition: filter 420ms ease; } .immersive-screen-frame-material__rail { position: absolute; display: block; overflow: hidden; background-color: #4b301f; background-repeat: repeat; background-size: 280px 280px; } .immersive-screen-frame-material__rail::before, .immersive-screen-frame-material__rail::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .immersive-screen-frame-material__rail::before { z-index: 1; background: linear-gradient( 180deg, rgba(255, 225, 188, 0.16), rgba(255, 218, 174, 0.025) 34%, rgba(15, 8, 4, 0.28) ); box-shadow: inset 0 0 0 1px rgba(20, 11, 6, 0.48), inset 0 1px rgba(255, 226, 190, 0.12); } /* A local satin reflection replaces selection bars and corner brackets. */ .immersive-screen-frame-material__rail::after { z-index: 2; background: radial-gradient( ellipse 58px 160% at var(--immersive-screen-glint-x, 50%) var(--immersive-screen-glint-y, 50%), rgba(255, 235, 207, 0.17), rgba(255, 225, 190, 0.055) 38%, transparent 74% ); opacity: 0; transition: opacity 180ms ease; } .immersive-screen-frame-material__rail--n, .immersive-screen-frame-material__rail--s { z-index: 1; right: 0; left: 0; height: var(--immersive-screen-frame-visible); background-image: var( --immersive-screen-wood-horizontal, linear-gradient(90deg, #49301f, #5a3a25 48%, #49301f) ); } .immersive-screen-frame-material__rail--n::after { --immersive-screen-glint-x: var(--immersive-screen-glint-n-x, 50%); --immersive-screen-glint-y: var(--immersive-screen-glint-n-y, 50%); } .immersive-screen-frame-material__rail--s::after { --immersive-screen-glint-x: var(--immersive-screen-glint-s-x, 50%); --immersive-screen-glint-y: var(--immersive-screen-glint-s-y, 50%); } .immersive-screen-frame-material__rail--n { top: 0; clip-path: polygon(0 0, 100% 0, calc(100% - var(--immersive-screen-frame-visible)) 100%, var(--immersive-screen-frame-visible) 100%); } .immersive-screen-frame-material__rail--s { bottom: 0; clip-path: polygon(var(--immersive-screen-frame-visible) 0, calc(100% - var(--immersive-screen-frame-visible)) 0, 100% 100%, 0 100%); } .immersive-screen-frame-material__rail--e, .immersive-screen-frame-material__rail--w { /* Continue the stile through both corner squares. The clipped horizontal rails sit one layer above and contribute the other half of each mitre. Keeping the stile underneath the diagonal means every corner pixel is wood; clip-path antialiasing can no longer reveal the room as a dark triangular notch. */ z-index: 0; top: 0; bottom: 0; width: var(--immersive-screen-frame-visible); background-image: var( --immersive-screen-wood-vertical, linear-gradient(180deg, #49301f, #5a3a25 48%, #49301f) ); } .immersive-screen-frame-material__rail--e { right: 0; } .immersive-screen-frame-material__rail--w { left: 0; } /* The bevel follows the rail rather than the viewport. This keeps the four pieces reading as one routed wood frame once they meet at the mitres. */ .immersive-screen-frame-material__rail--e::before { background: linear-gradient( 90deg, rgba(15, 8, 4, 0.28), rgba(255, 218, 174, 0.025) 66%, rgba(255, 225, 188, 0.16) ); } .immersive-screen-frame-material__rail--w::before { background: linear-gradient( 90deg, rgba(255, 225, 188, 0.16), rgba(255, 218, 174, 0.025) 34%, rgba(15, 8, 4, 0.28) ); } .immersive-screen-frame-material__rail--e::after { --immersive-screen-glint-x: var(--immersive-screen-glint-e-x, 50%); --immersive-screen-glint-y: var(--immersive-screen-glint-e-y, 50%); } .immersive-screen-frame-material__rail--w::after { --immersive-screen-glint-x: var(--immersive-screen-glint-w-x, 50%); --immersive-screen-glint-y: var(--immersive-screen-glint-w-y, 50%); } .immersive-screen-player[data-frame-active='n'] .immersive-screen-frame-material__rail--n::after, .immersive-screen-player[data-frame-active='e'] .immersive-screen-frame-material__rail--e::after, .immersive-screen-player[data-frame-active='s'] .immersive-screen-frame-material__rail--s::after, .immersive-screen-player[data-frame-active='w'] .immersive-screen-frame-material__rail--w::after, .immersive-screen-player[data-frame-active='nw'] .immersive-screen-frame-material__rail--n::after, .immersive-screen-player[data-frame-active='nw'] .immersive-screen-frame-material__rail--w::after, .immersive-screen-player[data-frame-active='ne'] .immersive-screen-frame-material__rail--n::after, .immersive-screen-player[data-frame-active='ne'] .immersive-screen-frame-material__rail--e::after, .immersive-screen-player[data-frame-active='se'] .immersive-screen-frame-material__rail--s::after, .immersive-screen-player[data-frame-active='se'] .immersive-screen-frame-material__rail--e::after, .immersive-screen-player[data-frame-active='sw'] .immersive-screen-frame-material__rail--s::after, .immersive-screen-player[data-frame-active='sw'] .immersive-screen-frame-material__rail--w::after { opacity: 1; } .immersive-screen-player--frame-keyboard-focus .immersive-screen-frame-material { filter: drop-shadow(0 0 1.5px rgba(255, 221, 181, 0.7)) drop-shadow(0 1px 0 rgba(12, 7, 4, 0.92)) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.36)); } /* The routed rabbet between wood and picture. It is physical joinery, not a video overlay: the iframe begins inside this band, so none of YouTube's pixels or controls are covered. The top and sides stay nearly black like a recessed gasket; the lower edge catches only a trace of warm screen light. */ .immersive-screen-frame-recess { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient( 180deg, #030201 0%, #070504 58%, #160e09 84%, #2a190e 100% ); box-shadow: inset 0 var(--immersive-screen-joint-px, 1px) 0 rgba(255, 218, 170, 0.055), inset var(--immersive-screen-joint-px, 1px) 0 0 rgba(255, 205, 149, 0.025), inset calc(-1 * var(--immersive-screen-joint-px, 1px)) 0 0 rgba(0, 0, 0, 0.58), inset 0 calc(-1 * var(--immersive-screen-joint-px, 1px)) 0 rgba(235, 163, 88, 0.11); } /* The frame is the handle: rails move the screen, corners resize it. Hit geometry extends beyond the wood; it never paints a separate UI layer. */ .immersive-screen-frame-rail, .immersive-screen-resize-corner { position: absolute; display: block; pointer-events: auto; touch-action: none; } .immersive-screen-frame-rail { z-index: 1; cursor: grab; } .immersive-screen-frame-rail--n, .immersive-screen-frame-rail--s { right: calc(-1 * var(--immersive-screen-frame, 9px)); left: calc(-1 * var(--immersive-screen-frame, 9px)); height: calc(var(--immersive-screen-frame, 9px) + var(--immersive-screen-grip, 6px)); } .immersive-screen-frame-rail--n { bottom: 100%; } .immersive-screen-frame-rail--s { top: 100%; } .immersive-screen-frame-rail--e, .immersive-screen-frame-rail--w { top: 0; bottom: 0; width: calc(var(--immersive-screen-frame, 9px) + var(--immersive-screen-grip, 6px)); } .immersive-screen-frame-rail--e { left: 100%; } .immersive-screen-frame-rail--w { right: 100%; } .immersive-screen-resize-frame--moving .immersive-screen-frame-rail { cursor: grabbing; } .immersive-screen-resize-corner { z-index: 2; /* Hit square: the wood corner plus the outward grip on the two outer sides — its outer boundary meets the rails' extended reach exactly. */ --immersive-screen-corner-offset: calc(-1 * (var(--immersive-screen-frame, 9px) + var(--immersive-screen-grip, 6px))); width: calc(3.4 * var(--immersive-screen-frame, 9px)); height: calc(3.4 * var(--immersive-screen-frame, 9px)); } .immersive-screen-resize-corner--nw { top: var(--immersive-screen-corner-offset); left: var(--immersive-screen-corner-offset); cursor: nwse-resize; } .immersive-screen-resize-corner--ne { top: var(--immersive-screen-corner-offset); right: var(--immersive-screen-corner-offset); cursor: nesw-resize; } .immersive-screen-resize-corner--se { right: var(--immersive-screen-corner-offset); bottom: var(--immersive-screen-corner-offset); cursor: nwse-resize; } .immersive-screen-resize-corner--sw { bottom: var(--immersive-screen-corner-offset); left: var(--immersive-screen-corner-offset); cursor: nesw-resize; } .immersive-screen-player__mount, .immersive-screen-player__status { position: absolute; inset: var(--immersive-screen-recess-y, 1px) var(--immersive-screen-recess-x, 2px); border-radius: 0; } .immersive-screen-player__status[hidden] { display: none; } .immersive-screen-player__mount { z-index: 3; overflow: hidden; /* A real display has a compressed dark joint around the panel. This shadow is outside the mount, in the authored recess, never over the iframe. */ box-shadow: 0 0 0 var(--immersive-screen-joint-px, 1px) rgba(1, 1, 1, 0.88), 0 calc(-1 * var(--immersive-screen-joint-px, 1px)) calc(2 * var(--immersive-screen-joint-px, 1px)) rgba(0, 0, 0, 0.72), 0 var(--immersive-screen-joint-px, 1px) 0 rgba(201, 124, 61, 0.1); } .immersive-screen-player__host { width: 100%; height: 100%; } .immersive-screen-player__mount iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: #05090a; } .immersive-screen-player__external-video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #090a09; } /* The dark face: a switched-off screen, never a loading card. No teal wash, no shimmer sweep, no pulsing dot — the only life on the glass is the incoming title, low on the face, its ink breathing on the room's 1/f walk (the same mean-reverting level the glow uses). */ .immersive-screen-player__status { z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 10px; overflow: hidden; padding: 20px 20px 9%; background: linear-gradient(180deg, #090c0d, #050708 72%); color: rgba(244, 239, 231, 0.7); font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.04em; opacity: 1; transition: opacity 220ms ease; } .immersive-screen-player__status-copy { opacity: calc(0.62 * var(--immersive-screen-breath, 1)); transition: opacity 240ms ease; } .immersive-screen-player__status--hidden { opacity: 0; } .immersive-screen-player__status--error { z-index: 3; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 20px; text-align: center; opacity: 1; } .immersive-screen-player__error-kicker { color: rgba(231, 241, 237, 0.9); font-family: var(--font-display); font-size: clamp(18px, 2vw, 23px); letter-spacing: -0.015em; } .immersive-screen-player__error-copy { max-width: 34ch; color: rgba(223, 237, 232, 0.56); font-size: 11px; line-height: 1.45; letter-spacing: 0; } .immersive-screen-player__restore { position: relative; z-index: 1; margin-top: 7px; min-height: 34px; padding: 7px 14px; border: 1px solid rgba(182, 225, 212, 0.26); border-radius: 999px; background: rgba(179, 222, 209, 0.08); color: rgba(226, 241, 235, 0.84); font: 500 11px/1 var(--font-ui); } .immersive-screen-player__error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; } .immersive-screen-player__retry { border-color: rgba(190, 231, 218, 0.42); background: rgba(173, 220, 205, 0.16); color: rgba(236, 247, 242, 0.94); } .immersive-screen-player__restore:focus-visible { outline: 1px solid rgba(196, 232, 220, 0.86); outline-offset: 3px; } @media (pointer: coarse) { .immersive-screen-player__restore { min-width: 44px; min-height: 44px; } /* Touch keeps the visual wood but earns a wider invisible grab zone. */ .immersive-screen-frame-rail--n, .immersive-screen-frame-rail--s { height: max(calc(var(--immersive-screen-frame, 9px) + var(--immersive-screen-grip, 6px)), 24px); } .immersive-screen-frame-rail--e, .immersive-screen-frame-rail--w { width: max(calc(var(--immersive-screen-frame, 9px) + var(--immersive-screen-grip, 6px)), 24px); } .immersive-screen-resize-corner { width: max(calc(3.4 * var(--immersive-screen-frame, 9px)), 34px); height: max(calc(3.4 * var(--immersive-screen-frame, 9px)), 34px); } /* Preserve the narrow bar's visual rhythm while restoring a 44px touch footprint around this new control. Adjacent controls already own their existing hit behavior; the negative inset must not capture across them. */ #top-bar .immersive-screen-trigger::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; } } @media (prefers-reduced-motion: reduce) { .immersive-screen-player, .immersive-screen-player-foreground, .immersive-screen-resize-frame, .immersive-screen-frame-rail::before, .immersive-screen-resize-corner::before, .immersive-screen-trigger__pane, .immersive-screen-player__status-copy, .immersive-screen-player__mount { transition-duration: 1ms !important; } } /* --------------------------------------------------------------------------- Media panel — one flat shelf, no navigation. Chips are the single horizontal axis; rows scroll vertically beneath them; the link line waits at the bottom. The remote line is born and dies with the video, so the only thing above the rule at idle is the standing watching mode. --------------------------------------------------------------------------- */ .media-panel { position: fixed; z-index: 92; top: var(--media-panel-top, 58px); right: var(--media-panel-right, 12px); display: flex; flex-direction: column; width: min(344px, calc(100vw - 24px)); max-height: min(76vh, 520px); max-height: min( 76dvh, 520px, calc(100dvh - var(--media-panel-top, 58px) - max(10px, env(safe-area-inset-bottom))) ); padding: 12px 13px 9px; border-radius: 19px; color: var(--ink); transform-origin: calc(100% - 24px) -8px; animation: media-panel-in 170ms cubic-bezier(0.16, 0.72, 0.25, 1) both; } .media-panel[hidden] { display: none; } @keyframes media-panel-in { from { transform: scale(0.94) translateY(-4px); } to { transform: none; } } /* The capsule: a small object that visibly runs. Thumb · title · equalizer on the left, volume · pause · off on the right, and a time hairline along the lower edge that thickens into a scrub under the pointer. It exists only while a video does. */ .media-panel__now { display: flex; flex-direction: column; flex: none; margin: 0 0 2px; padding: 4px 4px 0 6px; border-radius: 11px; background: rgba(12, 10, 9, 0.34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .media-panel__now[hidden] { display: none; } .media-panel__now-line { display: flex; align-items: center; gap: 1px; min-width: 0; } .media-panel__now-thumb { width: 34px; height: 19px; flex: none; margin-right: 8px; border-radius: 4px; object-fit: cover; background: rgba(255, 255, 255, 0.06); } .media-panel__now-thumb[hidden] { display: none; } /* Three bars on unequal clocks; sound, not a metronome. Paused, they hold their pose and dim — a frozen equalizer says "paused" by itself. */ .media-panel__now-eq { display: flex; align-items: flex-end; gap: 2px; height: 11px; flex: none; margin: 0 8px 0 8px; opacity: 0.4; transition: opacity 300ms ease; } .media-panel__now-eq > span { width: 2px; height: 100%; border-radius: 1px; background: rgba(255, 222, 174, 0.85); transform-origin: bottom; transform: scaleY(0.35); animation-play-state: paused; } .media-panel__now--playing .media-panel__now-eq { opacity: 1; } .media-panel__now--playing .media-panel__now-eq > span { animation-play-state: running; } .media-panel__now-eq > span:nth-child(1) { animation: media-eq-a 740ms ease-in-out infinite; } .media-panel__now-eq > span:nth-child(2) { animation: media-eq-b 1130ms ease-in-out infinite; } .media-panel__now-eq > span:nth-child(3) { animation: media-eq-c 890ms ease-in-out infinite; } /* The animation shorthands above reset animation-play-state. Keep this resting rule after them so manual pause and provider suspension visibly freeze the bars instead of merely dimming a still-moving meter. */ .media-panel__now:not(.media-panel__now--playing) .media-panel__now-eq > span { animation-play-state: paused; } @keyframes media-eq-a { 0% { transform: scaleY(0.3); } 34% { transform: scaleY(0.9); } 58% { transform: scaleY(0.45); } 81% { transform: scaleY(0.75); } 100% { transform: scaleY(0.3); } } @keyframes media-eq-b { 0% { transform: scaleY(0.65); } 22% { transform: scaleY(0.35); } 49% { transform: scaleY(1); } 70% { transform: scaleY(0.5); } 100% { transform: scaleY(0.65); } } @keyframes media-eq-c { 0% { transform: scaleY(0.45); } 30% { transform: scaleY(0.7); } 55% { transform: scaleY(0.3); } 85% { transform: scaleY(0.85); } 100% { transform: scaleY(0.45); } } .media-panel__now-livemark { flex: none; margin-right: 6px; color: rgba(255, 222, 174, 0.8); font: 600 10px/1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; } .media-panel__now-livemark[hidden] { display: none; } /* The hairline: always a quiet line, a scrub only under the pointer. */ .media-panel__seek { position: relative; display: block; height: 12px; margin: 0 2px; cursor: pointer; touch-action: none; } .media-panel__seek[hidden] { display: none; } .media-panel__seek-track { position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(244, 239, 231, 0.14); transition: height 140ms ease, bottom 140ms ease; } .media-panel__seek-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: rgba(255, 222, 174, 0.75); } .media-panel__seek:hover .media-panel__seek-track, .media-panel__seek:focus-visible .media-panel__seek-track, .media-panel__seek--seeking .media-panel__seek-track { height: 4px; bottom: 3px; } .media-panel__seek-time { position: absolute; right: 0; bottom: 9px; padding: 1px 4px; border-radius: 4px; background: rgba(12, 10, 9, 0.78); color: rgba(244, 239, 231, 0.82); font: 450 9.5px/1.3 var(--font-ui); font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transition: opacity 140ms ease; } .media-panel__seek:hover .media-panel__seek-time, .media-panel__seek:focus-visible .media-panel__seek-time, .media-panel__seek--seeking .media-panel__seek-time { opacity: 1; } .media-panel__now-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.3 var(--font-ui); color: rgba(244, 239, 231, 0.92); } .media-panel__now-btn { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: transparent; color: rgba(244, 239, 231, 0.62); transition: background-color 150ms ease, color 150ms ease; } .media-panel__now-btn:hover, .media-panel__now-btn:focus-visible { background: rgba(255, 255, 255, 0.1); color: var(--ink); } .media-panel__now-btn svg { width: 15px; height: 15px; } .media-panel__now-btn--muted svg { opacity: 0.44; } .media-panel__volume { position: relative; display: flex; align-items: center; width: 28px; height: 28px; flex: none; overflow: hidden; border-radius: 16px; transition: width 200ms cubic-bezier(0.2, 0.75, 0.25, 1), background-color 160ms ease; } .media-panel__volume:hover, .media-panel__volume:focus-within { width: 90px; background: rgba(255, 255, 255, 0.075); } .media-panel__volume-range { width: 50px; height: 28px; flex: none; margin: 0 8px 0 0; accent-color: rgba(246, 230, 207, 0.82); opacity: 0; transition: opacity 130ms ease 40ms; } .media-panel__volume:hover .media-panel__volume-range, .media-panel__volume:focus-within .media-panel__volume-range { opacity: 1; } /* The standing watching mode: one unchanging name on the left, a small switch on the right carrying the state — settable before anything plays, legible when the screen is dark. Amber means on, as everywhere else. */ .media-panel__mode { display: flex; align-items: center; gap: 8px; width: fit-content; align-self: flex-start; flex: none; margin: 0; padding: 3px 7px 3px 6px; border: 0; border-radius: 9px; background: transparent; color: rgba(244, 239, 231, 0.62); font: 450 11px/1.2 var(--font-ui); text-align: left; transition: color 150ms ease, background-color 150ms ease; } .media-panel__mode:hover, .media-panel__mode:focus-visible { background: rgba(255, 255, 255, 0.07); color: rgba(249, 244, 236, 0.92); } .media-panel__mode--off { color: rgba(244, 239, 231, 0.45); } .media-panel__mode-track { position: relative; flex: none; width: 22px; height: 12px; border-radius: 6px; background: rgba(255, 222, 174, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 222, 174, 0.45); transition: background-color 200ms ease, box-shadow 200ms ease; } .media-panel__mode-knob { position: absolute; top: 2px; left: 12px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 231, 194, 0.95); transition: left 200ms ease, background-color 200ms ease; } .media-panel__mode--off .media-panel__mode-track { background: transparent; box-shadow: inset 0 0 0 1px rgba(244, 239, 231, 0.3); } .media-panel__mode--off .media-panel__mode-knob { left: 2px; background: rgba(244, 239, 231, 0.45); } .media-panel__mode-note { flex: none; margin: 2px 7px 0; color: rgba(244, 239, 231, 0.42); font: 400 10.5px/1.4 var(--font-ui); } .media-panel__mode-note[hidden] { display: none; } .media-panel__rule { height: 1px; flex: none; margin: 7px 2px 8px; background: rgba(244, 239, 231, 0.12); } /* Chips: the single horizontal axis. Never wrap; clipped edges fade, and a small chevron sits in the fade exactly while more chips are clipped. */ .media-panel__chips-wrap { position: relative; flex: none; margin: 0 2px 5px; } .media-panel__chips { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; } .media-panel__chips-more { position: absolute; top: 1px; right: -3px; display: grid; place-items: center; width: 18px; height: 20px; padding: 0; border: 0; background: transparent; color: rgba(244, 239, 231, 0.35); transition: color 150ms ease; } .media-panel__chips-more[hidden] { display: none; } .media-panel__chips-more:hover, .media-panel__chips-more:focus-visible { color: rgba(249, 244, 236, 0.85); } .media-panel__chips-more svg { width: 11px; height: 11px; } .media-panel__chips::-webkit-scrollbar { display: none; } .media-panel__chips--fade-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px); mask-image: linear-gradient(90deg, transparent, #000 26px); } /* The right fade lands on full transparency 16px before the edge — the chevron's seat — so no half-faded chip text ever prints beneath it. */ .media-panel__chips--fade-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent calc(100% - 16px)); mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent calc(100% - 16px)); } .media-panel__chips--fade-left.media-panel__chips--fade-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 42px), transparent calc(100% - 16px)); mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 42px), transparent calc(100% - 16px)); } .media-panel__chip { position: relative; flex: none; padding: 3px 1px 8px; border: 0; background: transparent; color: rgba(244, 239, 231, 0.52); font: 500 12px/1.2 var(--font-ui); white-space: nowrap; transition: color 150ms ease; } .media-panel__chip:hover, .media-panel__chip:focus-visible { color: rgba(249, 244, 236, 0.86); } .media-panel__chip:focus-visible { outline: 1px solid rgba(255, 222, 174, 0.6); outline-offset: 1px; border-radius: 6px; } .media-panel__chip--active { color: rgba(250, 246, 240, 0.96); } .media-panel__chip--active::after { content: ''; position: absolute; right: 1px; bottom: 3px; left: 1px; height: 2px; border-radius: 2px; background: rgba(255, 222, 174, 0.55); } /* Rows: the shelf itself and the panel's only vertical axis. The shell owns continuation, never the catalogue: conditional masks let the videos disappear softly into the glass, and the hairline speaks only while useful. */ .media-panel__rows-shell { position: relative; flex: 1 1 var(--media-panel-rows-content-height, 120px); min-height: 120px; margin: 0 -7px; overflow: hidden; } .media-panel__rows { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1px 7px 4px; display: grid; gap: 2px; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); } .media-panel__rows::-webkit-scrollbar { display: none; } .media-panel__rows--fade-top { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px); mask-image: linear-gradient(to bottom, transparent 0, #000 18px); } .media-panel__rows--fade-bottom { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%); } .media-panel__rows--fade-top.media-panel__rows--fade-bottom { -webkit-mask-image: linear-gradient( to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100% ); } .media-panel__scroll-rail { position: absolute; z-index: 2; top: 2px; right: 1px; bottom: 5px; width: 1px; border-radius: 1px; pointer-events: none; opacity: 0; transition: opacity 180ms ease; } .media-panel__scroll-thumb { position: absolute; top: var(--media-panel-scroll-top, 0); right: 0; width: 1px; height: var(--media-panel-scroll-height, 18px); border-radius: 1px; background: rgba(255, 228, 190, 0.42); box-shadow: 0 0 5px rgba(255, 205, 144, 0.12); transition: top 80ms linear, height 140ms ease; } .media-panel__rows-shell--overflowing:hover .media-panel__scroll-rail, .media-panel__rows-shell--overflowing:focus-within .media-panel__scroll-rail, .media-panel__rows-shell--scrolling .media-panel__scroll-rail { opacity: 1; } .media-panel__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 6px; border: 0; border-radius: 11px; background: transparent; color: inherit; text-align: left; transition: background-color 150ms ease; } .media-panel__row:hover, .media-panel__row:focus-visible { background: rgba(255, 255, 255, 0.07); } .media-panel__row:focus-visible { outline: 1px solid rgba(255, 222, 174, 0.6); outline-offset: -1px; } .media-panel__row-thumb { width: 64px; aspect-ratio: 16 / 9; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 7px; background: rgba(0, 0, 0, 0.3) center / cover no-repeat; transition: border-color 160ms ease; } .media-panel__row--playing .media-panel__row-thumb { border-color: rgba(255, 222, 175, 0.6); box-shadow: 0 0 0 1px rgba(255, 240, 215, 0.14); } .media-panel__row--playing .media-panel__row-title { color: rgba(255, 236, 207, 0.95); } .media-panel__row-copy { display: grid; gap: 2px; min-width: 0; } .media-panel__row-title, .media-panel__row-channel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .media-panel__row-title { color: rgba(246, 242, 235, 0.88); font: 480 12px/1.25 var(--font-ui); } .media-panel__row-channel { color: rgba(244, 239, 231, 0.4); font: 400 10px/1.2 var(--font-ui); } .media-panel__row-live { color: rgba(255, 232, 199, 0.72); font: 650 8px/1 var(--font-ui); letter-spacing: 0.12em; } /* The link line is bare words at the bottom — the escape hatch, not the headline. Ghost text, an underline only under focus. */ .media-panel__link { flex: none; margin: 2px 6px 0; border-top: 1px solid rgba(244, 239, 231, 0.08); } .media-panel__link-input { width: 100%; padding: 8px 0 6px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: rgba(244, 239, 231, 0.9); font: 400 12.5px/1.3 var(--font-ui); transition: border-color 160ms ease; } .media-panel__link-input::placeholder { color: rgba(244, 239, 231, 0.3); } .media-panel__link-input:focus-visible { outline: none; border-bottom-color: rgba(255, 222, 174, 0.5); } .media-panel__link-note { flex: none; min-height: 14px; margin: 0 7px 2px; color: rgba(233, 200, 178, 0.78); font: 400 10.5px/1.35 var(--font-ui); } .media-panel__link-note:empty::before { content: '\00a0'; } @media (pointer: coarse) { .media-panel__now-btn, .media-panel__mode, .media-panel__chip, .media-panel__row { min-height: 44px; } /* Touch has no hover reveal. Give the complete screen-volume capsule its real hit geometry here instead of clipping a nominal 44px button inside the desktop capsule's 28px box. The glyph and track keep their existing visual scale; only the invisible interaction room grows. */ .media-panel__volume { width: 102px; height: 44px; border-radius: 22px; background: rgba(255, 255, 255, 0.06); } .media-panel__volume .media-panel__now-btn { width: 44px; min-width: 44px; } .media-panel__volume-range { height: 44px; opacity: 1; } } @media (max-height: 520px) { .media-panel__rows-shell { min-height: 84px; } } @media (prefers-reduced-motion: reduce) { .media-panel { animation-duration: 1ms; } .media-panel__mode-track, .media-panel__mode-knob { transition-duration: 1ms; } /* The equalizer holds its raised pose; aliveness comes from the words. */ .media-panel__now-eq > span { animation: none; transform: scaleY(0.6); } } /* --------------------------------------------------------------------------- Entrance, exit, and the channel change. The frame is furniture; the picture is content. Arriving, the panel takes its weight on the wall (opacity leads, the drop shadow deepens a breath behind it) while the glass stays dark; the picture then arrives as luminance — the mount blooms up from black — with the halo following its source. Leaving runs the mirror, faster: lights-out, one readable dark beat, taken down. A video switch touches none of this: only the mount goes dark and blooms again. */ .immersive-screen-player--rear-wall.immersive-screen-player--arriving { opacity: 0; box-shadow: 0 0 0 var(--immersive-screen-frame, 9px) #5b3d26, 0 calc(-0.22 * var(--immersive-screen-frame, 9px)) 0 var(--immersive-screen-frame, 9px) #6d4b30, 0 0 0 calc(var(--immersive-screen-frame, 9px) + 1px) rgba(18, 11, 6, 0.92), 0 10px 22px rgba(0, 0, 0, 0.26), 0 4px 9px rgba(0, 0, 0, 0.2); } /* Taken down: the shadow retracts slightly ahead of the panel — the weight leaves the wall first. */ .immersive-screen-player--rear-wall.immersive-screen-player--takedown { opacity: 0; box-shadow: 0 0 0 var(--immersive-screen-frame, 9px) #5b3d26, 0 calc(-0.22 * var(--immersive-screen-frame, 9px)) 0 var(--immersive-screen-frame, 9px) #6d4b30, 0 0 0 calc(var(--immersive-screen-frame, 9px) + 1px) rgba(18, 11, 6, 0.92), 0 10px 22px rgba(0, 0, 0, 0.26), 0 4px 9px rgba(0, 0, 0, 0.2); transition: opacity 350ms ease, box-shadow 250ms ease; } /* While loading (fresh session or a switch) the glass is black; removing the class runs the ~900ms bloom on the mount's own filter transition. The --asleep override is the fast lane down (lights-out and the first beat of a switch), lifted once the glass is dark so the bloom stays slow. */ .immersive-screen-player--loading .immersive-screen-player__mount { filter: brightness(0); } .immersive-screen-player--rear-wall.immersive-screen-player--asleep .immersive-screen-player__mount { filter: brightness(0); transition-duration: 320ms; } /* The halo dies with its picture on exits and switches — never on the slow 1300ms lane while the glass is already dark. */ .immersive-screen--switching .immersive-screen-ambi, .immersive-screen--departing .immersive-screen-ambi { opacity: 0; transition-duration: 320ms; } /* --------------------------------------------------------------------------- The screen's consequences in the room. Everything here is the place's Screen Rig — painted around the untouched iframe, never over it. The glow layers are the video's own poster image blurred beyond recognition, so any content ever played arrives as plausible light. All of it breathes on the controller's mean-reverting walk via --immersive-screen-breath. */ .immersive-screen-ambi { position: absolute; z-index: 7; display: block; max-width: none; object-fit: cover; pointer-events: none; user-select: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1300ms ease; } .immersive-screen-ambi { filter: blur(52px) saturate(1.5) brightness(0.8); } .immersive-screen--live .immersive-screen-ambi { opacity: calc(0.34 * var(--immersive-screen-breath, 1)); } .immersive-screen--live.immersive-screen--inspected .immersive-screen-ambi { opacity: calc(0.46 * var(--immersive-screen-breath, 1)); } .immersive-screen--live.immersive-screen--screen-paused .immersive-screen-ambi { opacity: 0.12; } /* The generated walnut layer owns visible material. The shell keeps only the dark inner gasket and depth shadow, both outside the iframe geometry. */ .immersive-screen-player--rear-wall { border: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(14, 8, 5, 0.96), 0 26px 48px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.42); } /* The room's grade on the playing picture — one experiment flag in the controller (SCREEN_GRADE_ENABLED). Applied only while PLAYING, so YouTube's own paused/poster chrome is always shown unmodified. The grade never blurs the video; room colour and contrast may still relax under attention. */ .immersive-screen-player__mount { transition: filter 900ms ease; } .immersive-screen-player--graded .immersive-screen-player__mount { filter: brightness(0.94) contrast(0.94) saturate(0.93) sepia(0.05); } @media (prefers-reduced-motion: reduce) { .immersive-screen-ambi, .immersive-screen-player__mount { transition-duration: 1ms !important; } } /* --------------------------------------------------------------------------- Depth: the screen and the room negotiate in front of the glass. At rest the framed panel hangs exactly where it was placed; settled attention (`--inspected`) brings it slightly toward the viewer and clears YouTube for interaction. */ /* Quiet Vale's screen hangs in front of the glass (owner decision 2026-08-12): the mullions pass behind the frame because the day depth pass holds no glazing bars at all — measured, its only content is the furniture crowns nearer than the glass (armchair backs, lamps, planter). Those rightly stay in front of the resting panel; hiding this pass makes the screen float over the room. */ .immersive-screen--live .immersive-screen-player-foreground--day { opacity: 1; } /* Settled attention clears the furniture; an active drag does not — the person is placing the panel and must see its true resting occlusion. */ .immersive-screen--live.immersive-screen--inspected:not(.immersive-screen--manipulating) .immersive-screen-player-foreground { opacity: 0; } .immersive-screen-player--rear-wall { /* Forward motion anchors above centre: growing from near its mount reads as "swung toward you", not "inflated". */ transform-origin: 50% 22%; /* Opacity leads and the shadow trails on arrival — the panel takes its weight on the wall a breath after it appears. */ transition: opacity 420ms ease, box-shadow 600ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .immersive-screen-resize-frame--dragging { transition-duration: 0ms; } /* In hand, the panel lifts a breath off the glass: only its shadow deepens — geometry stays the literal resting placement. The shell's 420ms box-shadow ease carries the lift and the set-down. */ .immersive-screen-player--rear-wall.immersive-screen-player--manipulating { /* Crossing from picture to wood may interrupt the 3% inspection return. Once the frame is pressed, resolve transform geometry immediately; only the non-geometric shadow is allowed to ease while the panel is in hand. */ transition: box-shadow 420ms ease; box-shadow: 0 0 0 1px rgba(14, 8, 5, 0.96), 0 34px 62px rgba(0, 0, 0, 0.55), 0 14px 26px rgba(0, 0, 0, 0.46); } .immersive-screen-player--rear-wall.immersive-screen-player--manipulating .immersive-screen-frame-material { filter: drop-shadow(0 1px 0 rgba(12, 7, 4, 0.92)) drop-shadow(0 24px 38px rgba(0, 0, 0, 0.42)); } .immersive-screen-player--rear-wall.immersive-screen-player--native-manipulating { /* The resting panel deliberately has a 420ms transform transition for its hover lift. Native manipulation writes a compositor transform on every animation frame, so allowing that transition to win in the cascade makes each new pose chase the previous one for 420ms. Scope the override to the native presentation helper: web layout dragging is unchanged. */ transition: none; will-change: transform; } .immersive-screen-player--rear-wall.immersive-screen-player--native-manipulating .immersive-screen-frame-material { /* Rasterize the lifted joinery once. Interpolating this filtered shadow for 420ms while its ancestor follows the pointer forces WebKit to repaint a large texture throughout the first half of the gesture. */ transition: none; } .immersive-screen-resize-frame--native-manipulating, .immersive-screen-ambi--native-manipulating { /* These siblings share the shell's native FLIP transform. Promote them only while they move so WebKit does not repeatedly repaint the walnut hit surface or the large blurred halo into a new backing store. */ will-change: transform; } /* Owner decision 2026-08-12 (supersedes the 9% idle recession): at rest the screen sits exactly where it was placed — the resting geometry IS the manifest/drag geometry, so placing and resizing are literal. Attention brings it slightly toward the viewer instead; while a drag is in flight the forward lift is suppressed so manipulation happens at the true resting size and position. */ .immersive-screen--live.immersive-screen--inspected .immersive-screen-player--rear-wall:not(.immersive-screen-player--manipulating) { /* The shell grows 3%, but its real-world joint must not. Counter-scale the recess and its one-pixel details so hover changes attention, not joinery. */ --immersive-screen-recess-x: calc(0.970873786 * var(--immersive-screen-recess-x-base)); --immersive-screen-recess-y: calc(0.970873786 * var(--immersive-screen-recess-y-base)); --immersive-screen-joint-px: 0.970873786px; transform: scale(1.03); } /* At rest YouTube itself is out of pointer reach: the embed never sees a stray hover, so its title and branding stay asleep until the person's settled attention (or a tap) wakes the surface on purpose. */ .immersive-screen--live:not(.immersive-screen--inspected) .immersive-screen-player--rear-wall .immersive-screen-player__mount { pointer-events: none; } /* Atmospheric veiling: distance is contrast lost to air. Deepens the playing grade only while at rest; hover relaxes it back to the light grade. Keep the picture blur-free in both states so this never mimics a quality change. */ .immersive-screen--live:not(.immersive-screen--inspected) .immersive-screen-player--graded .immersive-screen-player__mount { filter: brightness(0.91) contrast(0.88) saturate(0.85) sepia(0.03); } @media (prefers-reduced-motion: reduce) { .immersive-screen-player--rear-wall { transition-duration: 1ms !important; } } /* --------------------------------------------------------------------------- Provider suspension. The Screen remains room furniture at every window size; only the current provider may need more viewport than is available. The controller freezes playback and exposes this semantic state while CSS lets the last real frame settle behind quiet smoked glass. No screenshot or replacement poster is introduced, and the walnut frame remains untouched. --------------------------------------------------------------------------- */ /* A limited provider is still a usable Screen: keep its permanent bar action fully present so the card can explain the limitation or offer another provider. The state lives inside the glyph rather than looking disabled. */ .immersive-screen-trigger--provider-limited { opacity: 1; } .immersive-screen-trigger--provider-limited .immersive-screen-trigger__pane { opacity: 0.34; } /* Isolate the embedded provider while suspended. The status surface is deliberately noninteractive; the surrounding walnut rails keep their own move/resize hit geometry, and the Screen trigger continues to open its card. */ .immersive-screen--provider-suspended .immersive-screen-player__mount { pointer-events: none; visibility: hidden; } .immersive-screen-player__status--suspended { z-index: 4; align-items: center; justify-content: center; flex-direction: column; gap: clamp(3px, 0.6vw, 7px); padding: clamp(10px, 5%, 28px); /* Opaque by construction: a constrained provider is retained for its session, not visibly squeezed below its supported viewport. Fine smoked gradients provide the frosted continuation without sampling or masking cross-origin YouTube pixels. */ background: radial-gradient(circle at 50% 38%, #24211e 0, #151412 54%, #0a0a09 100%), #0a0a09; color: rgba(244, 239, 231, 0.76); text-align: center; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.68); pointer-events: none; opacity: 1; transition: opacity 280ms ease; } .immersive-screen-player__suspension-kicker { max-width: 24ch; color: rgba(249, 242, 232, 0.86); font: 400 clamp(13px, 1.55vw, 19px)/1.08 var(--font-display); letter-spacing: -0.012em; text-wrap: balance; } .immersive-screen-player__suspension-copy { max-width: 34ch; color: rgba(240, 233, 223, 0.58); font: 500 clamp(8.5px, 0.85vw, 11px)/1.35 var(--font-ui); letter-spacing: 0.015em; text-wrap: balance; } /* The same explanation may sit in the existing Screen card while idle. It is informational, never a second call to action competing with the catalogue. */ .media-panel__provider-note { margin: 1px 5px 5px; color: rgba(244, 231, 214, 0.5); font: 400 10.5px/1.4 var(--font-ui); text-wrap: balance; } @media (prefers-reduced-motion: reduce) { .immersive-screen--provider-suspended .immersive-screen-player__mount, .immersive-screen-player__status--suspended { transition-duration: 1ms !important; } } @media (max-width: 620px) { .media-panel { right: max(10px, env(safe-area-inset-right)); left: max(10px, env(safe-area-inset-left)); width: auto; } } .presence-recovery { position: fixed; z-index: 48; left: 50%; display: grid; min-width: min(310px, calc(100vw - 34px)); max-width: min(390px, calc(100vw - 34px)); padding: 12px 14px; border: 1px solid rgba(220, 230, 244, 0.17); border-radius: 18px; color: rgba(249, 247, 242, 0.93); background: linear-gradient(145deg, rgba(61, 68, 83, 0.78), rgba(19, 23, 31, 0.74)); box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.08); backdrop-filter: blur(24px) saturate(1.12); -webkit-backdrop-filter: blur(24px) saturate(1.12); transform: translateX(-50%); } .presence-recovery[hidden] { display: none; } .presence-recovery--room { top: max(72px, calc(env(safe-area-inset-top) + 54px)); } .presence-recovery--lobby { bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px)); } .presence-recovery__title { font-size: 13px; font-weight: 560; letter-spacing: -0.01em; } .presence-recovery__detail { margin-top: 3px; color: rgba(234, 237, 244, 0.58); font-size: 11px; line-height: 1.35; } .presence-recovery__actions { display: flex; gap: 7px; margin-top: 10px; } .presence-recovery__action { min-height: 30px; padding: 0 12px; border: 1px solid rgba(235, 239, 248, 0.16); border-radius: 999px; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.1); font: inherit; font-size: 11px; cursor: pointer; } .presence-recovery__action:hover, .presence-recovery__action:focus-visible { background: rgba(255, 255, 255, 0.16); outline: none; } .presence-recovery__action--quiet { border-color: transparent; background: transparent; color: rgba(239, 241, 247, 0.62); } @media (prefers-reduced-motion: reduce) { .presence-recovery, .presence-recovery__action { transition: none; } } .place-menu-trigger { width: 34px; height: 34px; color: rgba(249, 244, 235, 0.82); } .place-menu-trigger__brand .manyplace-brand__text { display: none; } .place-menu-trigger__brand .manyplace-brand__mark { width: 18px; height: 21px; } .bar__action-slot { display: contents; } .bar__action-slot:empty { display: none; } .bar__compatibility { display: none !important; } #top-bar { gap: 7px; padding: 0 7px; } /* The mark keeps its breath from the place's controls; the rule is the same one the session chip used to stand beside. */ .bar__sep--mark { margin: 0 1px; } /* The view toggle: your seat, empty or with you in it. The dot is the only thing that changes, so the bar never changes size. */ .campus-view__you { fill: currentColor; stroke: none; opacity: 0; transform: scale(0.6); transform-origin: 12px 9.65px; transition: opacity 160ms ease, transform 200ms cubic-bezier(0.2, 0.75, 0.25, 1); } .campus-view--seated .campus-view__you { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: reduce) { .campus-view__you { transition: none; } } /* ── The pause menu ─────────────────────────────────────────────────────── One sheet of the Settings panel's glass: you at the top, the room's mixer, your session, and the ways out. The scrim is pigment only — a filtered scrim under a filtered pane samples blur through blur and turns the glass flat and grey. */ .manyplace-menu[hidden] { display: none; } .manyplace-menu { position: fixed; z-index: 260; inset: 0; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: rgba(6, 8, 10, 0.34); } .manyplace-menu__surface { width: min(404px, calc(100vw - 28px)); max-height: min(760px, calc(100dvh - 36px)); overflow: auto; color: rgba(251, 247, 240, 0.94); border-radius: 25px; scrollbar-width: none; outline: none; } .manyplace-menu__surface::-webkit-scrollbar { display: none; } /* Only the words move; the glass they sit on is already there. */ .manyplace-menu__content { display: flex; flex-direction: column; padding: 0 0 6px; animation: manyplace-menu-content-in 170ms cubic-bezier(0.2, 0.72, 0.25, 1) both; } /* ── The real controls, adopted inline ── Their popovers keep owning every state transition; the menu only strips the floating chrome so each becomes a plain block of this sheet. */ .manyplace-menu__inline { padding: 14px 18px 4px; } .manyplace-menu__inline--session { padding-top: 4px; } .manyplace-menu__inline > .volume-popover--inline, .manyplace-menu__inline > .session-popover--inline { position: relative; z-index: auto; inset: auto; width: 100%; max-height: none; overflow: visible; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; animation: none; } .manyplace-menu__inline--sound .volume-popover__row { min-height: 36px; padding: 2px 1px; } .manyplace-menu__inline--sound .volume-popover__row + .volume-popover__row { margin-top: 4px; } /* The inline session is one composition rather than a popover nested inside the menu. Its selected activity pill already supplies the hierarchy, so the sentence can sit directly beneath the row without a toolbar-like rule. */ .manyplace-menu__inline--session .session-popover--inline { padding: 9px 0 2px; } .manyplace-menu__inline--session .session-acts { min-height: 36px; } .manyplace-menu__inline--session .session-presence { top: 5px; right: 0; } .manyplace-menu__inline--session .session-acts-rule { display: none; } .manyplace-menu__inline--session .session-detail-line { margin-top: 8px; padding-top: 0; padding-bottom: 5px; } .manyplace-menu__inline--session .session-intentions { margin-top: 8px; padding-top: 0; } /* The presence chooser is a sibling of the sheet; it must rise above it. */ body:has(.manyplace-menu:not([hidden])) .session-presence-menu { z-index: 262; } /* ── The ways out ── The sheet's one rule, then rows in the same column as the marks above: hear, do, go. Leaving the place is the last line and stands alone on it. */ .manyplace-menu__rule { height: 1px; margin: 12px 18px 6px; background: rgba(246, 239, 230, 0.08); } .manyplace-menu__ways { display: flex; flex-direction: column; padding: 0 8px 4px; } .manyplace-menu__way { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: rgba(247, 242, 233, 0.7); font: 500 12.5px/1 var(--font-ui); letter-spacing: 0.01em; text-align: left; transition: color 150ms ease, background-color 150ms ease; } .manyplace-menu__way:hover, .manyplace-menu__way:focus-visible { background: rgba(255, 255, 255, 0.05); color: rgba(253, 249, 241, 0.96); } .manyplace-menu__way:focus-visible { outline: 1px solid rgba(255, 222, 174, 0.55); outline-offset: -1px; } .manyplace-menu__way-mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; } .manyplace-menu__way-glyph { width: 16px; height: 16px; } @keyframes manyplace-menu-content-in { from { opacity: 0; transform: translateY(4px); } } @media (max-width: 640px) { .manyplace-menu { place-items: end center; padding: 0; } .manyplace-menu__surface { width: 100%; max-height: min(92dvh, 780px); border-radius: 24px 24px 0 0; border-bottom: 0; } .manyplace-menu__content { padding-bottom: max(8px, env(safe-area-inset-bottom)); } .manyplace-menu__inline { padding-left: 16px; padding-right: 16px; } .manyplace-menu__inline--session .session-acts { justify-content: space-between; } .manyplace-menu__way { min-height: 48px; } .manyplace-menu__rule { margin-left: 16px; margin-right: 16px; } } @media (prefers-reduced-motion: reduce) { .manyplace-menu__content { animation: none; } } .manyplace-menu__tabs {display:flex;gap:4px;padding:16px 18px 12px;border-bottom:1px solid rgb(255 255 255 / .12)} .manyplace-menu__tabs button {flex:1;min-height:40px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer;opacity:.7} .manyplace-menu__tabs button[aria-selected="true"] {background:rgb(255 255 255 / .13);opacity:1} .manyplace-menu__body {overflow:auto;max-height:min(58vh,520px);overscroll-behavior:contain} .manyplace-menu__footer {display:flex;gap:12px;padding:12px 18px;border-top:1px solid rgb(255 255 255 / .12)} .manyplace-menu__footer > * {flex:1} .manyplace-menu__tabs button:focus-visible {outline:2px solid rgb(255 255 255 / .8);outline-offset:2px} @media(pointer:coarse){.manyplace-menu__tabs button{min-height:44px}} .manyplace-menu__resume{background:rgb(90 127 195 / .13);border:1px solid rgb(150 180 225 / .20);border-radius:12px;color:#f5f8ff} .manyplace-menu__resume:hover{background:rgb(90 127 195 / .23)}.manyplace-menu__resume:focus-visible{outline:2px solid #b9d4ff;outline-offset:2px} .manyplace-menu__resume kbd{font:10px system-ui;border:1px solid currentColor;border-radius:4px;padding:2px 3px} /* Share and radio use the mixer's 28px mark column and 11px gutter. */ .manyplace-menu__share-host { padding: 0 8px 8px; } .manyplace-menu__share-host:empty,.manyplace-menu__radio-host:empty { display:none; } .manyplace-menu__share { display:flex;align-items:center;gap:11px;box-sizing:border-box;width:100%;min-height:44px; padding:4px 10px;border:0;border-radius:12px;background:transparent; color:rgba(247,242,233,.86);font:500 12.5px/1.3 var(--font-ui);text-align:left;cursor:pointer; transition:background-color 150ms ease,color 150ms ease; } .manyplace-menu__share:hover {background:rgba(255,255,255,.05);color:rgba(253,249,241,.98)} .manyplace-menu__share:focus-visible {outline:1px solid rgba(255,222,174,.55);outline-offset:-1px} .manyplace-menu__share .manyplace-menu__way-mark svg {width:16px;height:16px;opacity:.8} .manyplace-menu__share-label {flex:1;white-space:nowrap} .manyplace-menu__share-host input {box-sizing:border-box;width:calc(100% - 20px);margin:2px 10px 6px;padding:8px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(0,0,0,.12);color:inherit;font:12px var(--font-ui)} .manyplace-menu__share-host input[hidden] {display:none} .manyplace-menu__radio-host {padding:2px 18px 4px} @media(max-width:640px){.manyplace-menu__radio-host{padding-left:18px;padding-right:18px}} .manyplace-menu__inline--sound .volume-popover__row--music:not([hidden]){margin-top:4px} /* One inset, leading column and rhythm across Place and People. */ .manyplace-menu__surface{--menu-inset:18px;--menu-leading:36px;--menu-gap:12px} .manyplace-menu__inline--sound{padding:12px var(--menu-inset) 0} .manyplace-menu__inline--sound .volume-popover__row{box-sizing:border-box;min-height:44px;padding:0;gap:var(--menu-gap)} .manyplace-menu__inline--sound .volume-popover__row + .volume-popover__row, .manyplace-menu__inline--sound .volume-popover__row--music:not([hidden]){margin-top:0} .manyplace-menu__inline--sound .volume-popover__mute{width:var(--menu-leading);height:36px} .manyplace-menu__radio-host{padding:8px var(--menu-inset) 0} .manyplace-menu__radio-host .campus-radio-selector{gap:var(--menu-gap)} .manyplace-menu__radio-host .campus-radio-row__mark{width:var(--menu-leading);height:36px} .manyplace-menu__share-host{padding:8px var(--menu-inset) 4px} .manyplace-menu__share{gap:var(--menu-gap);padding:0;min-height:44px} .manyplace-menu__share .manyplace-menu__way-mark{width:var(--menu-leading);height:36px} .manyplace-menu__body .place-people{box-sizing:border-box;min-width:0;padding:12px var(--menu-inset) 0} .manyplace-menu__body .place-people__profile{gap:var(--menu-gap);min-height:44px;padding:0} .manyplace-menu__body .place-people__profile .place-invitations__face{width:var(--menu-leading);height:36px;flex:none} .manyplace-menu__footer{padding:12px var(--menu-inset);gap:12px} .manyplace-menu__footer > button{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;min-height:44px;padding:0 10px} .manyplace-menu__footer .manyplace-menu__way-mark{width:auto;height:auto} .manyplace-menu__share-host + .manyplace-menu__body{padding-bottom:12px}.manyplace-menu__share-host + .manyplace-menu__body .manyplace-menu__inline--sound,.manyplace-menu__share-host + .manyplace-menu__body .place-people{padding-top:4px} /* Keep a long directory inside the sheet instead of growing the whole menu. */ .manyplace-menu__body:has(.place-people) { max-height:min(340px,calc(100dvh - 240px)); overflow-y:auto; scrollbar-gutter:stable; } .manyplace-menu__share-host--map {display:flex;flex-direction:column;gap:4px;align-items:stretch} .manyplace-menu__map.manyplace-menu__share {justify-content:flex-start;font:500 12.5px/1.3 var(--font-ui);padding:0} .lobby { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #07090e; color: var(--ink); } .lobby__atmosphere, .lobby__stars, .lobby__haze, .lobby__floor { position: absolute; inset: 0; pointer-events: none; } .lobby__atmosphere { z-index: -1; background: radial-gradient(66% 48% at 50% 44%, rgba(34, 60, 91, 0.18), transparent 72%), radial-gradient(30% 30% at 50% 83%, rgba(151, 95, 47, 0.055), transparent 76%), linear-gradient(180deg, #080b12 0%, #080a0f 56%, #090807 100%); } .lobby__stars { opacity: 0.3; background-image: radial-gradient(circle at 12% 27%, rgba(206, 223, 242, 0.6) 0 0.6px, transparent 1px), radial-gradient(circle at 74% 18%, rgba(206, 223, 242, 0.5) 0 0.7px, transparent 1.1px), radial-gradient(circle at 45% 34%, rgba(206, 223, 242, 0.35) 0 0.5px, transparent 0.9px), radial-gradient(circle at 87% 40%, rgba(206, 223, 242, 0.42) 0 0.6px, transparent 1px); background-size: 370px 290px, 430px 330px, 310px 270px, 510px 390px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); } .lobby__haze { top: 42%; height: 35%; opacity: 0.72; background: radial-gradient(55% 8% at 50% 48%, rgba(125, 153, 183, 0.14), transparent 70%); filter: blur(9px); } .lobby__floor { top: 47%; background: radial-gradient(34% 70% at 50% 0%, rgba(121, 151, 180, 0.1), transparent 74%), linear-gradient(180deg, transparent, rgba(8, 7, 7, 0.9)); transform: perspective(600px) rotateX(58deg) scale(1.7); transform-origin: center top; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); mask-image: linear-gradient(to bottom, transparent, #000 18%); } .lobby__chrome { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 88px; display: grid; place-items: center; } .lobby__heading { margin: 0; font-family: var(--font-display); font-variation-settings: 'opsz' 40; font-size: 27px; font-weight: 400; letter-spacing: -0.022em; color: rgba(244, 241, 236, 0.84); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); } .lobby__content { position: absolute; z-index: 2; inset: 82px 0 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 10px max(32px, calc((100vw - 1180px) / 2)) max(36px, env(safe-area-inset-bottom)); } .lobby__content::-webkit-scrollbar { display: none; } .lobby-feedback { position: fixed; z-index: 360; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px)); max-width: min(420px, calc(100vw - 36px)); margin: 0; border: 1px solid rgba(225, 235, 244, 0.16); border-radius: 999px; padding: 11px 17px 12px; background: linear-gradient(145deg, rgba(34, 42, 51, 0.92), rgba(15, 19, 25, 0.95)); -webkit-backdrop-filter: blur(22px) saturate(125%); backdrop-filter: blur(22px) saturate(125%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 16px 46px rgba(0, 0, 0, 0.44); color: rgba(240, 243, 237, 0.92); font-size: 12px; letter-spacing: 0.01em; text-align: center; transform: translateX(-50%); pointer-events: none; } .lobby-feedback[data-tone='error'] { color: rgba(255, 202, 190, 0.94); } .lobby-feedback[hidden] { display: none; } .lobby__content--home { --door-gap: clamp(18px, 2.6vw, 40px); --lobby-frame-max: 1080px; display: grid; align-content: start; gap: clamp(30px, 5vh, 58px); padding-top: clamp(16px, 4vh, 44px); } /* The threshold owns the first impression; shelf tops peek above the fold. */ .lobby__content--home .door-hero { padding: 3vh 0 4vh; } /* Shelves read as one gallery below the centred threshold. Their shared frame adds a calm desktop rail without padding the oversized halo scrollports; when the viewport is narrower, the frame naturally fills the content box. */ .lobby-row { display: flex; justify-content: flex-start; align-items: flex-start; gap: var(--door-gap, clamp(18px, 2.6vw, 40px)); min-width: 0; } .lobby-section { --lobby-world-size: clamp(126px, 12.2vw, 176px); --lobby-world-gap: clamp(16px, 3vw, 42px); width: min(100%, var(--lobby-frame-max, 1080px)); margin-inline: auto; min-width: 0; display: grid; gap: 13px; } .lobby-section__title { margin: 0; text-align: left; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(229, 235, 242, 0.42); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .lobby-page__intro { margin: 0; max-width: 48ch; color: rgba(229, 235, 242, 0.54); font-size: 13px; line-height: 1.45; } .lobby-page__title, .environment-preview__title { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.018em; color: rgba(248, 245, 239, 0.91); } .lobby-page__back, .environment-preview__close, .environment-preview__view { border: 0; background: transparent; color: rgba(232, 238, 245, 0.58); } .world-orb { --world-size: var(--lobby-world-size, clamp(126px, 12.2vw, 176px)); position: relative; min-width: 0; min-height: calc(var(--world-size) + 54px); display: grid; justify-items: center; align-content: start; gap: 13px; border: 0; padding: 0; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; } .world-orb:disabled { cursor: default; } .world-orb__visual { position: relative; width: var(--world-size); aspect-ratio: 1; display: block; isolation: isolate; } .world-orb__sphere { position: relative; z-index: 2; width: 100%; aspect-ratio: 1; display: block; overflow: hidden; border-radius: 50%; background: #080b12; box-shadow: 0 0 0 1px rgba(212, 228, 246, 0.34), 0 0 0 4px rgba(139, 181, 225, 0.045), 0 25px 66px rgba(0, 0, 0, 0.58), 0 0 72px rgba(50, 93, 139, 0.13); transition: box-shadow 500ms ease, transform 600ms cubic-bezier(0.16, 0.72, 0.25, 1); } .world-orb:not(:disabled):hover .world-orb__sphere, .world-orb:focus-visible .world-orb__sphere { transform: translateY(-3px) scale(1.018); box-shadow: 0 0 0 1px rgba(224, 237, 251, 0.56), 0 0 0 5px rgba(151, 191, 232, 0.06), 0 32px 78px rgba(0, 0, 0, 0.64), 0 0 88px rgba(58, 105, 154, 0.2); } .world-orb__image, .world-orb__shade, .world-orb__glint, .world-orb__rim { position: absolute; inset: 0; display: block; border-radius: inherit; } .world-orb__halo { position: absolute; z-index: 0; top: 2%; left: 5%; width: 90%; aspect-ratio: 1; border-radius: 50%; opacity: 0.65; background: radial-gradient(circle, rgba(66, 113, 164, 0.24), rgba(30, 56, 87, 0.08) 48%, transparent 72%); filter: blur(clamp(18px, 2.3vw, 34px)); transform: scale(1.15); transition: opacity 500ms ease, transform 600ms ease; } .world-orb:not(:disabled):hover .world-orb__halo, .world-orb:focus-visible .world-orb__halo { opacity: 1; transform: scale(1.24); } .world-orb__image { background-position: 50% 47%; background-size: cover; filter: saturate(0.89) brightness(0.83) contrast(1.035); transform: scale(var(--portal-thumbnail-scale, 1.0971)); transition: filter 700ms ease, transform 1.2s cubic-bezier(0.16, 0.72, 0.25, 1); } .world-orb:not(:disabled):hover .world-orb__image, .world-orb:focus-visible .world-orb__image { filter: saturate(0.98) brightness(0.89) contrast(1.025); transform: scale(calc(var(--portal-thumbnail-scale, 1.0971) * 1.008)); } .world-orb__shade { background: radial-gradient(circle at 64% 66%, transparent 42%, rgba(3, 5, 8, 0.2) 64%, rgba(2, 4, 7, 0.78) 100%), radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.44), transparent 52%); box-shadow: inset -18px -24px 54px rgba(0, 0, 0, 0.38), inset 12px 14px 38px rgba(218, 236, 255, 0.055); } .world-orb__glint { opacity: 0.62; background: radial-gradient(ellipse 42% 19% at 28% 12%, rgba(242, 248, 255, 0.29), transparent 64%), linear-gradient(132deg, rgba(255, 255, 255, 0.08), transparent 24% 75%, rgba(125, 169, 215, 0.05)); transition: opacity 500ms ease, transform 900ms ease; } .world-orb:not(:disabled):hover .world-orb__glint { opacity: 0.88; transform: translate3d(1%, 0.7%, 0); } .world-orb__rim { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 7px 9px 22px rgba(218, 236, 255, 0.08), inset -9px -11px 26px rgba(0, 0, 0, 0.31); } .world-orb__reflection { position: absolute; z-index: 1; top: 78%; left: 15%; width: 70%; height: 31%; display: block; overflow: hidden; opacity: 0.17; filter: blur(7px); transform: perspective(240px) rotateX(68deg) scaleY(-0.85); transform-origin: center top; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 74%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 74%); transition: opacity 420ms ease; } .world-orb__reflection-image { position: absolute; inset: 0; display: block; border-radius: 50%; background-position: 50% 47%; background-size: cover; filter: saturate(0.89) brightness(0.83) contrast(1.035); } .world-orb:not(:disabled):hover .world-orb__reflection, .world-orb:focus-visible .world-orb__reflection { opacity: 0.23; } .world-orb__sphere--rendered .world-orb__shade, .world-orb__sphere--rendered .world-orb__glint, .world-orb__sphere--rendered .world-orb__rim { opacity: 0; } .world-orb:disabled .world-orb__sphere { filter: grayscale(0.24) saturate(0.72); opacity: 0.72; } .world-orb:disabled .world-orb__reflection { opacity: 0.08; } .world-orb__label { min-width: 0; display: grid; justify-items: center; gap: 5px; text-align: center; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9); } .world-orb__name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: clamp(16px, 1.45vw, 20px); font-weight: 400; letter-spacing: -0.018em; color: rgba(248, 245, 239, 0.93); } .world-orb__meta { font-size: 10.5px; color: rgba(229, 235, 242, 0.4); } .world-orb__lock-membrane { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; border-radius: inherit; background: radial-gradient(circle at 34% 20%, rgba(230, 240, 251, 0.09), rgba(5, 8, 13, 0.42) 72%); backdrop-filter: blur(2px) saturate(75%); -webkit-backdrop-filter: blur(2px) saturate(75%); } .world-orb__lock { position: relative; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(230, 239, 248, 0.28); border-radius: 50%; background: rgba(7, 10, 15, 0.46); color: rgba(236, 242, 248, 0.77); } .world-orb__lock::before { content: ''; position: absolute; top: 7px; left: 50%; width: 8px; height: 8px; border: 1.4px solid currentColor; border-bottom: 0; border-radius: 7px 7px 0 0; transform: translateX(-50%); } .world-orb__lock::after { content: ''; position: absolute; top: 14px; left: 50%; width: 12px; height: 9px; border: 1.4px solid currentColor; border-radius: 3px; background: rgba(7, 10, 15, 0.62); transform: translateX(-50%); } .lobby-page { width: min(1120px, 100%); min-height: 100%; margin: 0 auto; padding: 12px 0 44px; } .lobby-page__header { min-height: 56px; display: flex; align-items: center; gap: 8px; margin-bottom: 24px; } .lobby-page__intro { margin: -14px 0 28px 48px; } .lobby-page__back, .environment-preview__close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.045); font-size: 29px; line-height: 1; } .lobby-page__back:hover, .environment-preview__close:hover { background: rgba(255, 255, 255, 0.08); color: rgba(248, 245, 239, 0.94); } .lobby-page__title { font-size: 28px; } .lobby-page .world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: start; gap: clamp(16px, 3vw, 42px); } .lobby-page--library .world-grid { max-width: 940px; } .lobby__content--preview { display: grid; place-items: center; padding-top: 20px; } .environment-preview { position: relative; width: min(860px, calc(100vw - 48px)); min-height: min(660px, calc(100vh - 126px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; border: 1px solid rgba(224, 234, 245, 0.13); border-radius: 30px; padding: 26px; background: linear-gradient(145deg, rgba(24, 30, 39, 0.88), rgba(10, 13, 18, 0.94)); backdrop-filter: blur(30px) saturate(125%); -webkit-backdrop-filter: blur(30px) saturate(125%); box-shadow: 0 34px 110px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.07); } .environment-preview__title { font-size: 28px; padding-right: 48px; } .environment-preview__close { position: absolute; top: 19px; right: 19px; z-index: 2; font-size: 23px; } .environment-preview__media { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 12px; } .environment-preview--paying .environment-preview__media { grid-template-columns: minmax(0, 1fr); } .environment-preview--paying .environment-preview__views { display: none; } .environment-preview__main { min-height: 400px; overflow: hidden; border-radius: 21px; background: #070a0f; box-shadow: inset 0 0 0 1px rgba(236, 243, 250, 0.09); } .environment-preview__image, .environment-preview__video { width: 100%; height: 100%; display: block; object-fit: cover; } .environment-preview__views { display: grid; align-content: start; gap: 10px; } .environment-preview__view { width: 92px; aspect-ratio: 1.25; overflow: hidden; border: 1px solid rgba(230, 239, 247, 0.11); border-radius: 12px; padding: 0; } .environment-preview__view img { width: 100%; height: 100%; object-fit: cover; } .environment-preview__footer { display: grid; justify-items: end; gap: 8px; } .environment-preview__action { min-width: 168px; min-height: 44px; border: 0; border-radius: 999px; padding: 0 22px; background: linear-gradient(135deg, #eee4d6, #d4b993); color: #18130f; font-size: 12px; font-weight: 600; box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 10px 24px rgba(169, 116, 62, 0.15); } .environment-preview__action:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); } .environment-preview__action:disabled { opacity: 0.65; } .environment-preview__error { margin: 0; color: rgba(247, 188, 176, 0.8); font-size: 11px; } .community-chip { position: absolute; z-index: 40; top: 22px; left: 24px; height: 44px; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 999px; padding: 0 13px 0 12px; background: linear-gradient(145deg, rgba(28, 34, 43, 0.52), rgba(14, 17, 23, 0.5)) padding-box, linear-gradient(145deg, rgba(235, 241, 248, 0.18), rgba(211, 222, 235, 0.045)) border-box; backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.075), 0 12px 34px rgba(0, 0, 0, 0.2); color: rgba(230, 235, 242, 0.57); } .platform-macos .community-chip { left: var(--chrome-left); } .community-chip:hover { color: rgba(248, 245, 240, 0.86); filter: brightness(1.12); transform: translateY(-1px); } .community-chip__icon { width: 18px; height: 18px; flex: none; } .community-chip__label { font-size: 12px; font-weight: 500; } .community-chip__external { margin-left: -3px; font-size: 10px; opacity: 0.5; } /* One current-style live porthole may move between focused open worlds. Its optics intentionally match the static orb so the handoff remains invisible. */ .porthole__canvas { position: fixed; z-index: 6; top: 0; left: 0; display: block; opacity: 0; pointer-events: none; transition: opacity 120ms ease; } .porthole__canvas--visible { opacity: 1; } .porthole__glass { position: fixed; z-index: 7; overflow: hidden; border-radius: 50%; pointer-events: none; } .porthole__glass--hidden { opacity: 0; } .porthole__glass .portal__shade, .porthole__glass .portal__glint, .porthole__glass .portal__rim { position: absolute; inset: 0; display: block; border-radius: inherit; } .porthole__glass .portal__shade { background: radial-gradient(circle at 64% 66%, transparent 42%, rgba(3, 5, 8, 0.2) 64%, rgba(2, 4, 7, 0.78) 100%), radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.44), transparent 52%); box-shadow: inset -18px -24px 54px rgba(0, 0, 0, 0.38), inset 12px 14px 38px rgba(218, 236, 255, 0.055); } .porthole__glass .portal__glint { opacity: 0.62; background: radial-gradient(ellipse 42% 19% at 28% 12%, rgba(242, 248, 255, 0.29), transparent 64%), linear-gradient(132deg, rgba(255, 255, 255, 0.08), transparent 24% 75%, rgba(125, 169, 215, 0.05)); } .porthole__glass .portal__rim { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 7px 9px 22px rgba(218, 236, 255, 0.08), inset -9px -11px 26px rgba(0, 0, 0, 0.31); } .world-orb:focus-visible, .lobby-page__back:focus-visible, .environment-preview__close:focus-visible, .environment-preview__action:focus-visible, .environment-preview__view:focus-visible, .community-chip:focus-visible { outline: 1px solid rgba(243, 215, 178, 0.82); outline-offset: 3px; } @media (max-width: 700px) { .lobby__chrome { height: 72px; } .lobby__heading { font-size: 23px; } .lobby__content { inset: 72px 0 0; padding: 10px 18px max(28px, env(safe-area-inset-bottom)); } .lobby__content--home { align-content: start; gap: 28px; padding-top: 16px; } .world-orb { min-height: calc(var(--world-size) + 49px); } .world-orb__name { font-size: 17px; } .lobby-page { padding-top: 0; } .lobby-page__header { margin-bottom: 14px; } .lobby-page__intro { margin: -6px 0 22px; } .lobby-page .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .community-chip { top: 14px; left: 12px; width: 44px; justify-content: center; padding: 0; gap: 0; } .community-chip__label, .community-chip__external { display: none; } .environment-preview { width: 100%; min-height: 100%; border: 0; border-radius: 0; padding: 18px 18px max(18px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(14, 19, 26, 0.97), rgba(7, 9, 13, 0.99)); } .lobby__content--preview { inset: 0; padding: 0; z-index: 50; } .environment-preview__title { font-size: 24px; padding-top: 7px; } .environment-preview__close { top: 13px; right: 13px; } .environment-preview__media { grid-template-columns: 1fr; } .environment-preview__main { min-height: 0; aspect-ratio: 0.9; } .environment-preview--paying .environment-preview__media { min-height: 0; } .environment-preview--paying .environment-preview__main { height: 100%; aspect-ratio: auto; } .environment-preview__views { grid-template-columns: repeat(3, 72px); } .environment-preview__view { width: 72px; } .environment-preview__footer { justify-items: stretch; } .environment-preview__action { width: 100%; min-height: 48px; } } @media (max-width: 420px) { .lobby-feedback { bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)); width: max-content; max-width: calc(100vw - 28px); } } @media (max-height: 720px) and (min-width: 701px) { .world-orb { --world-size: clamp(116px, 11vw, 150px); min-height: calc(var(--world-size) + 46px); } .lobby__content--home { gap: 18px; align-content: start; } .environment-preview { min-height: calc(100vh - 112px); } .environment-preview__main { min-height: 330px; } } @media (max-resolution: 1.25dppx) { .world-orb, .world-orb__name, .world-orb__meta { -webkit-font-smoothing: auto; } .world-orb__reflection { display: none; } } @media (prefers-reduced-motion: reduce) { .world-orb__sphere, .world-orb__image, .world-orb__glint, .world-orb__halo, .world-orb__reflection, .world-orb, .environment-preview__action { transition: none; } } /* * The glass door: a face-on arched aperture holding a place's real plate. * Authored glass, not backdrop-filter — the scene behind the pane is our own * composite, so there is nothing to sample. The refraction band is honest: * the outer plate copy is drawn scaled, the inner pane shows it unscaled, * and the ring where they differ is light bending at the rim. No masks. */ .door-item { --door-w: clamp(148px, 13.5vw, 188px); --door-h: calc(var(--door-w) * 1.52); --door-arch: calc(var(--door-w) / 2); --door-foot: 20px; --door-band: 7px; position: relative; width: var(--door-w); display: grid; justify-items: center; } .door { appearance: none; border: 0; margin: 0; padding: 0; background: transparent; width: 100%; position: relative; cursor: pointer; color: inherit; font: inherit; } .door:disabled { cursor: default; } .door:focus-visible { outline: none; } .door__aperture { position: relative; display: block; width: 100%; height: var(--door-h); border-radius: var(--door-arch) var(--door-arch) var(--door-foot) var(--door-foot); overflow: hidden; isolation: isolate; background: #0a0d13; transform: translateY(0); transition: transform 260ms ease, box-shadow 260ms ease; } .door:not(:disabled):hover .door__aperture, .door:focus-visible .door__aperture { transform: translateY(-3px); } .door__scene { position: absolute; inset: 0; display: block; } /* The outer plate copy is only ever visible in the band ring around the pane — darkened and softened there, it *is* the glass thickness. */ .door__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--door-focus-x, 50%) var(--door-focus-y, 42%); transform: translate3d(var(--door-parallax-x, 0%), var(--door-parallax-y, 0%), 0) scale(1.075); transition: transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1); filter: var(--door-grade, brightness(1)) brightness(0.55) saturate(0.85) blur(1.5px); } /* The scene sits recessed inside the vessel: the pane stops above the foot ellipse, leaving a strip of glass floor the world doesn't touch. */ .door__pane { position: absolute; inset: var(--door-band) var(--door-band) calc(var(--door-band) + 8px); display: block; overflow: hidden; border-radius: calc(var(--door-arch) - var(--door-band)) calc(var(--door-arch) - var(--door-band)) calc(var(--door-foot) - 2px) calc(var(--door-foot) - 2px); } .door__pane .door__plate--pane { inset: auto; top: calc(-1 * var(--door-band)); left: calc(-1 * var(--door-band)); width: calc(100% + var(--door-band) * 2); height: calc(100% + var(--door-band) * 2 + 8px); transform: translate3d(var(--door-parallax-x, 0%), var(--door-parallax-y, 0%), 0) scale(1); filter: var(--door-grade, none); } /* Depth inside the glass: gentle top light, settled dark at the sill. */ .door__depthshade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(214, 226, 240, 0.07), transparent 24%), linear-gradient(180deg, transparent 74%, rgba(7, 8, 10, 0.4) 92%, rgba(7, 8, 10, 0.52)), radial-gradient(130% 105% at 50% 46%, transparent 64%, rgba(5, 7, 10, 0.32)); } /* The place's own light leaking around its glass: a blurred copy of the plate blooms a few pixels past the frame, so each door's rim carries the colours of the world inside while the glass itself stays neutral. */ .door__halo { position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(var(--door-h) + 4px); object-fit: cover; object-position: var(--door-focus-x, 50%) var(--door-focus-y, 42%); border-radius: var(--door-arch) var(--door-arch) var(--door-foot) var(--door-foot); transform: scale(1.04); filter: blur(24px) saturate(1.22) brightness(0.98); opacity: 0.18; pointer-events: none; transition: opacity 300ms ease; } .door-item--hero .door__halo { opacity: 0.3; } .door:not(:disabled):hover .door__halo, .door:focus-visible .door__halo { opacity: 0.44; } .door:disabled .door__halo { opacity: 0.13; } /* * The frame stays dark and transparent — glass is dark almost everywhere. * It provides only the quiet base contour, absorption toward the wall, and * the drop shadow; all brightness lives in the vessel drawing above it. */ .door__frame { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; border: 1px solid rgba(244, 238, 224, 0.26); box-shadow: inset 0 0 0 1.5px rgba(5, 7, 9, 0.5), inset 0 1px 16px rgba(255, 240, 210, 0.07), inset 0 -12px 26px rgba(255, 206, 148, 0.09), 0 22px 52px rgba(0, 0, 0, 0.55); transition: border-color 260ms ease, box-shadow 260ms ease; } .door__frame::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(64% 34% at 50% -6%, rgba(255, 246, 226, 0.14), transparent 72%), radial-gradient(46% 18% at 50% 104%, rgba(255, 222, 172, 0.12), transparent 74%); } /* The perspective drawing of the glass bell: rims, foot ellipse, side sheets. Screen-blended so its light sits on the scene, never under it. */ .door__vessel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: 0.88; transition: opacity 260ms ease; } .door:not(:disabled):hover .door__vessel, .door:focus-visible .door__vessel { opacity: 1; } .door:disabled .door__vessel { opacity: 0.42; } /* Sky caught on the pane: a still diagonal wash saying "glass between us". */ .door__sheen { position: absolute; inset: var(--door-band) var(--door-band) calc(var(--door-band) + 8px); pointer-events: none; border-radius: calc(var(--door-arch) - var(--door-band)) calc(var(--door-arch) - var(--door-band)) calc(var(--door-foot) - 2px) calc(var(--door-foot) - 2px); background: linear-gradient(118deg, rgba(255, 253, 248, 0.09), rgba(255, 253, 248, 0.03) 24%, transparent 42%), linear-gradient(295deg, rgba(226, 236, 248, 0.05), transparent 30%); } .door:not(:disabled):hover .door__frame, .door:focus-visible .door__frame { border-color: rgba(248, 242, 228, 0.4); box-shadow: inset 0 0 0 1.5px rgba(5, 7, 9, 0.5), inset 0 1px 18px rgba(255, 240, 210, 0.1), inset 0 -12px 28px rgba(255, 208, 150, 0.13), 0 0 22px rgba(255, 226, 180, 0.1), 0 22px 48px rgba(0, 0, 0, 0.55); } /* Warm light pooled on the floor beneath — tight core, wide dim skirt. */ .door__pool { position: absolute; z-index: -1; left: 50%; top: calc(var(--door-h) - 10px); width: 136%; height: calc(var(--door-w) * 0.48); transform: translateX(-50%); pointer-events: none; background: radial-gradient(30% 6% at 50% 3%, rgba(255, 240, 206, 0.48), transparent 72%), radial-gradient(34% 19% at 50% 10%, rgba(255, 228, 184, 0.3), transparent 70%), radial-gradient(52% 36% at 50% 14%, rgba(255, 216, 162, 0.12), transparent 72%); filter: blur(2px); transition: opacity 260ms ease; } /* Unlit door: a place whose light is out — smoked glass, no plate, dim pool. */ .door--unlit .door__aperture { background: radial-gradient(70% 46% at 50% 24%, rgba(84, 104, 128, 0.14), transparent 74%), radial-gradient(56% 24% at 50% 88%, rgba(255, 188, 128, 0.055), transparent 76%), linear-gradient(180deg, rgba(19, 24, 32, 0.92), rgba(9, 11, 15, 0.96)); } /* A full or unlit place keeps its door, but its light settles. */ .door:disabled .door__plate { filter: var(--door-grade, brightness(1)) grayscale(0.28) saturate(0.6) brightness(0.4) blur(1.5px); } .door:disabled .door__plate--pane { filter: var(--door-grade, none) grayscale(0.28) saturate(0.72) brightness(0.72); } .door:disabled .door__pool { opacity: 0.3; } .door:disabled .door__frame { border-color: rgba(220, 224, 230, 0.2); box-shadow: inset 0 0 0 1px rgba(5, 7, 9, 0.5), inset 0 0 0 2.5px rgba(228, 234, 242, 0.07), inset 0 1px 14px rgba(226, 234, 244, 0.05), 0 16px 38px rgba(0, 0, 0, 0.45); } /* The New-place door: an empty frosted vitrine, a + traced in the fog. */ /* The New-place vessel is clear glass over a dark interior — only a breath of haze low inside, where the + waits to be traced. */ .door--new .door__frost { position: absolute; inset: 0; display: block; background: radial-gradient(70% 42% at 50% 8%, rgba(226, 235, 246, 0.06), transparent 70%), linear-gradient(180deg, rgba(216, 227, 240, 0.06), rgba(168, 182, 198, 0.025) 46%, rgba(224, 232, 242, 0.08)), radial-gradient(92% 58% at 50% 102%, rgba(230, 238, 248, 0.1), transparent 72%); } .door__trace { position: absolute; inset: 0; display: block; pointer-events: none; } .door__trace::before, .door__trace::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 1.5px; border-radius: 1px; background: rgba(240, 246, 252, 0.5); box-shadow: 0 0 7px rgba(240, 246, 252, 0.4); transform: translate(-50%, -50%); transition: background 260ms ease, box-shadow 260ms ease; } .door__trace::after { transform: translate(-50%, -50%) rotate(90deg); } .door--new:hover .door__trace::before, .door--new:hover .door__trace::after, .door--new:focus-visible .door__trace::before, .door--new:focus-visible .door__trace::after { background: rgba(248, 251, 254, 0.82); box-shadow: 0 0 11px rgba(244, 249, 253, 0.65); } .door--new .door__pool { opacity: 0.45; } /* While the composer is open, the + waits: the fog it is traced in dims. */ .door--new.door--composing .door__trace { opacity: 0.2; transition: opacity 220ms ease; } .door__trace { transition: opacity 220ms ease; } /* A door that has just been made settles into its slot and its rim catches light once — the same glint it showed in the composer, so you know which one is yours. */ .door-item--arrived .door__aperture { animation: door-arrive 420ms cubic-bezier(0.22, 0.8, 0.2, 1) both; } .door-item--arrived .door__frame { animation: door-kindle 1000ms 200ms ease-out both; } /* Leaving the gallery, in reverse of arriving. Deleted: the light goes out, then the empty vessel sinks. Left: the door stays lit and recedes. Then the shelf closes behind it with the same slide it opened with. */ .door-item--extinguishing .door__plate, .door-item--extinguishing .door__plate--pane { filter: grayscale(0.6) saturate(0.5) brightness(0.16) blur(1px); transition: filter 600ms ease; } .door-item--extinguishing .door__pool, .door-item--extinguishing .door__halo { opacity: 0; transition: opacity 600ms ease; } .door-item--extinguishing .door__vessel { opacity: 0.42; transition: opacity 600ms ease; } .door-item--extinguishing .door__frame { border-color: rgba(220, 224, 230, 0.2); transition: border-color 600ms ease; } .door-item--extinguishing.door-item--closing .door__aperture { transform: translateY(8px); opacity: 0; transition: transform 280ms ease-in, opacity 280ms ease-in; } .door-item--receding .door { transform: scale(0.92); opacity: 0; transition: transform 480ms cubic-bezier(0.22, 0.8, 0.2, 1), opacity 480ms ease; } .door-item--closing { width: 0; opacity: 0; overflow: hidden; transition: width 240ms cubic-bezier(0.22, 0.8, 0.2, 1), opacity 200ms ease; } @keyframes door-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes door-kindle { 0% { border-color: rgba(244, 238, 224, 0.26); } 36% { border-color: rgba(251, 236, 202, 0.8); box-shadow: inset 0 0 0 1.5px rgba(5, 7, 9, 0.5), inset 0 0 24px rgba(238, 218, 175, 0.18), 0 0 34px rgba(238, 218, 175, 0.28), 0 22px 52px rgba(0, 0, 0, 0.55); } 100% { border-color: rgba(244, 238, 224, 0.26); } } /* Focus ring drawn on the frame so it follows the arch. */ .door:focus-visible .door__aperture { box-shadow: 0 0 0 2px rgba(184, 210, 238, 0.65), 0 0 22px rgba(150, 190, 232, 0.25); } /* Overlays: satellite menu and wake pill. Absolutely positioned — the name below stays mathematically centered and nothing ever shifts layout. */ .door-item__menu { position: absolute; z-index: 3; top: 9px; right: 9px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; background: rgba(10, 14, 19, 0.42); color: rgba(238, 243, 249, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); opacity: 0; cursor: pointer; transition: opacity 220ms ease, background 220ms ease, color 220ms ease; } .door-item__menu::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; } .door-item__menu svg { width: 16px; height: 6px; fill: currentColor; } .door-item:hover .door-item__menu, .door-item:focus-within .door-item__menu { opacity: 1; } .door-item__menu:hover, .door-item__menu:focus-visible { background: rgba(22, 28, 36, 0.62); color: rgba(250, 252, 254, 0.95); outline: none; } .door-item__menu:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 2px rgba(184, 210, 238, 0.6); } .door-item__pill { position: absolute; z-index: 3; top: calc(var(--door-h) - 34px); left: 50%; transform: translateX(-50%); padding: 4px 11px; border-radius: 999px; font-size: 11px; letter-spacing: 0.01em; white-space: nowrap; color: rgba(244, 246, 249, 0.88); background: rgba(11, 15, 20, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 220ms ease; } .door-item:hover .door-item__pill:not([hidden]), .door-item:focus-within .door-item__pill:not([hidden]) { opacity: 1; visibility: visible; } .door-item__name { position: relative; z-index: 2; margin-top: 12px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-family: var(--font-display); font-size: clamp(15px, 1.3vw, 18px); font-weight: 400; letter-spacing: -0.014em; color: rgba(248, 245, 239, 0.92); text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9); } .door-item--new .door-item__name { color: rgba(232, 238, 245, 0.6); } /* Hero tier: the same vessel, simply larger. */ .door-item--hero { --door-w: clamp(200px, min(22vw, 26vh), 330px); --door-foot: 24px; --door-band: 6px; } /* While the live porthole paints this aperture, its geometry-bound overlay carries the glass; the static copies hide so nothing doubles up. */ .door__aperture--rendered .door__scene, .door__aperture--rendered .door__depthshade, .door__aperture--rendered .door__sheen, .door__aperture--rendered .door__frame, .door__aperture--rendered .door__vessel, .door__aperture--rendered .hero-window__scene, .door__aperture--rendered .hero-window__sheen, .door__aperture--rendered .hero-window__scrim { visibility: hidden; } /* The foyer's window: a centered cinema pane above the left-railed catalogue — a window is not a door, and its centering says so. */ .hero-window-item { position: relative; width: min(100%, 74vw, calc(48vh * 16 / 9), 1080px); margin-inline: auto; } .hero-window { appearance: none; border: 0; margin: 0; padding: 0; background: transparent; display: block; width: 100%; position: relative; cursor: pointer; color: inherit; font: inherit; } .hero-window:disabled { cursor: default; } .hero-window:focus-visible { outline: none; } .hero-window__aperture { --hw-crown: clamp(30px, 3.6vw, 54px); --hw-foot: 16px; position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--hw-crown) var(--hw-crown) var(--hw-foot) var(--hw-foot); overflow: hidden; isolation: isolate; background: #0a0d13; transform: translateY(0); transition: transform 260ms ease; } .hero-window:not(:disabled):hover .hero-window__aperture, .hero-window:focus-visible .hero-window__aperture { transform: translateY(-3px); } .hero-window:focus-visible .hero-window__aperture { box-shadow: 0 0 0 2px rgba(184, 210, 238, 0.65), 0 0 22px rgba(150, 190, 232, 0.25); } .hero-window__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--door-focus-x, 50%) var(--door-focus-y, 50%); transform: translate3d(var(--door-parallax-x, 0%), var(--door-parallax-y, 0%), 0) scale(1.03); transition: transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1); filter: var(--door-grade, none); } .hero-window__halo { position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); object-fit: cover; border-radius: inherit; transform: scale(1.03); filter: blur(26px) saturate(1.2) brightness(0.98); opacity: 0.26; pointer-events: none; transition: opacity 300ms ease; } .hero-window:not(:disabled):hover .hero-window__halo, .hero-window:focus-visible .hero-window__halo { opacity: 0.4; } .hero-window__sheen { position: absolute; inset: 6px; pointer-events: none; border-radius: inherit; background: linear-gradient(112deg, rgba(255, 253, 248, 0.08), rgba(255, 253, 248, 0.025) 22%, transparent 40%), linear-gradient(295deg, rgba(226, 236, 248, 0.05), transparent 28%); } .hero-window__scrim { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 12px; padding: 44px 24px 18px; background: linear-gradient(180deg, transparent, rgba(6, 8, 11, 0.42) 55%, rgba(6, 8, 11, 0.66)); } .hero-window__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-variation-settings: 'opsz' 40; font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; letter-spacing: -0.02em; color: rgba(250, 247, 241, 0.95); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8); } .hero-window__presence { font-size: 13px; letter-spacing: 0.012em; color: rgba(233, 238, 244, 0.62); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); } /* The pane is the button; on approach it says so — lift, glow, and a quiet arrow breathing in beside the name. */ .hero-window__cue { margin-left: auto; font-size: 20px; color: rgba(248, 245, 239, 0.85); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); opacity: 0; transform: translateX(-6px); transition: opacity 240ms ease, transform 240ms ease; } .hero-window:not(:disabled):hover .hero-window__cue, .hero-window:focus-visible .hero-window__cue, .porthole__glass--arch .hero-window__cue { opacity: 1; transform: translateX(0); } .hero-window:not(:disabled):not(.hero-window--still):hover .hero-window__scene { transform: translate3d(var(--door-parallax-x, 0%), var(--door-parallax-y, 0%), 0) scale(1.045); } .hero-window--still .hero-window__scene { transform: scale(1.03); } .hero-window__pool { position: absolute; z-index: -1; left: 50%; top: calc(100% - 8px); width: 108%; height: clamp(60px, 9vh, 110px); transform: translateX(-50%); pointer-events: none; background: radial-gradient(34% 18% at 50% 4%, rgba(255, 240, 206, 0.4), transparent 72%), radial-gradient(46% 42% at 50% 10%, rgba(255, 224, 176, 0.16), transparent 72%); filter: blur(2px); } .hero-window--unlit .hero-window__aperture { background: radial-gradient(70% 46% at 50% 30%, rgba(84, 104, 128, 0.14), transparent 74%), radial-gradient(50% 22% at 50% 90%, rgba(255, 188, 128, 0.05), transparent 76%), linear-gradient(180deg, rgba(19, 24, 32, 0.92), rgba(9, 11, 15, 0.96)); } /* Legacy hero pairing (kept for the fixture study). */ .door-hero { display: flex; align-items: center; justify-content: flex-start; gap: clamp(34px, 6vw, 84px); } .door-hero__aside { display: grid; justify-items: start; align-content: center; gap: 14px; min-width: 0; max-width: min(38vw, 360px); } .door-hero__name { margin: 0; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-variation-settings: 'opsz' 40; font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; letter-spacing: -0.022em; color: rgba(248, 245, 239, 0.94); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75); } .door-hero__presence { margin: -4px 0 0; font-size: 13.5px; letter-spacing: 0.012em; color: rgba(229, 235, 242, 0.55); } .door-hero__enter { margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; padding: 11px 26px; border: 1px solid rgba(255, 240, 214, 0.22); border-radius: 999px; background: rgba(16, 19, 24, 0.55); box-shadow: inset 0 1px 0 rgba(255, 248, 232, 0.09), 0 6px 22px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 224, 176, 0.07); font-family: inherit; font-size: 15px; letter-spacing: 0.01em; color: rgba(248, 245, 239, 0.92); cursor: pointer; transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .door-hero__enter:hover:not(:disabled), .door-hero__enter:focus-visible { border-color: rgba(255, 244, 222, 0.42); box-shadow: inset 0 1px 0 rgba(255, 248, 232, 0.13), 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 32px rgba(255, 228, 182, 0.14); transform: translateY(-1px); outline: none; } .door-hero__enter:disabled { cursor: default; opacity: 0.5; } .door-hero__enter-arrow { font-size: 15px; transform: translateY(-0.5px); transition: transform 220ms ease; } .door-hero__enter:hover:not(:disabled) .door-hero__enter-arrow { transform: translate(2px, -0.5px); } @media (hover: none) { .door-item__menu { opacity: 0.6; } .door-item__pill { display: none; } } @media (max-width: 700px) { .door-item { --door-w: min(41vw, 168px); } .door-item--hero { --door-w: min(66vw, 36vh, 300px); } .hero-window-item { width: min(100%, calc(38vh * 16 / 9)); } .hero-window__scrim { padding: 34px 16px 12px; } .door-hero { flex-direction: column; align-items: center; gap: 20px; } .door-hero__aside { justify-items: center; max-width: 88vw; text-align: center; } } @media (max-width: 420px) { .hero-window__scrim { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 8px; row-gap: 1px; padding: 38px 16px 11px; } .hero-window__name { grid-column: 1; font-size: 20px; } .hero-window__presence { grid-column: 1; font-size: 11px; } .hero-window__cue { grid-column: 2; grid-row: 1 / span 2; align-self: center; } } @media (max-resolution: 1.25dppx) { .door__halo { filter: blur(14px) saturate(1.3); } .door__pool { filter: none; } } @media (prefers-reduced-motion: reduce) { .door__halo, .door__aperture, .door__frame, .door__plate, .door__pool, .door-item__menu, .door-item__pill, .door__trace::before, .door__trace::after { transition: none; } } /* The window is a specialized optical surface: preserve the authored vessel, clear artwork and frame. Shared chrome glass owns the small menu control. */ .lobby--windows { overflow: clip; --window-width: min(68vw, 940px, calc((100svh - 300px) * 16 / 9)); } .lobby--windows .lobby__atmosphere { background: radial-gradient(ellipse at 50% 45%, rgba(57, 68, 78, 0.16), transparent 65%), linear-gradient(180deg, #090c11, #080b10 60%, #090a0c); } .lobby--windows .lobby__stars { opacity: 0.12; } .lobby--windows .lobby__haze { opacity: 0.35; } .lobby--windows .lobby__floor { opacity: 0.45; } .window-gallery__brand { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 400; letter-spacing: -0.045em; color: rgba(242, 237, 226, 0.65); } .window-gallery__brand .manyplace-brand { gap: 8px; align-items: center; line-height: 1; font-size: inherit; letter-spacing: -0.025em; } .window-gallery__brand .manyplace-brand__mark { width: 18px; height: 22px; } .window-gallery__content { position: absolute; inset: 88px 0 0; display: grid; align-items: center; overflow: clip; } .window-gallery { min-width: 0; padding-block: 16px; } .window-gallery[hidden] { display: none; } .window-gallery[data-single='false'] { --window-width: min(68vw, 940px, calc((100svh - 380px) * 16 / 9)); } .window-gallery[data-single='false'] .window-gallery__viewport { height: calc(var(--window-width) * 9 / 16 + 264px); } .window-gallery__viewport { position: relative; height: calc(var(--window-width) * 9 / 16 + 108px); } .window-gallery .window-gallery__window { position: absolute; top: 0; left: 50%; width: var(--window-width); margin: 0; transform: translateX(-50%); } .window-gallery__window .hero-window__aperture { --hw-crown: clamp(26px, 3vw, 46px); --hw-foot: 20px; /* Clear center with thickness along the edges, never a frosted photograph. */ border: 1px solid rgba(235, 242, 247, 0.16); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.32), inset 0 -1px 1px rgba(248, 224, 187, 0.2), 0 1px 0 rgba(255, 255, 255, 0.07), 0 28px 70px rgba(0, 0, 0, 0.38); } .window-gallery__window .door__frame { border-radius: inherit; } .window-gallery__window .hero-window__scrim { justify-content: flex-end; padding: 30px 24px 20px; background: linear-gradient(180deg, transparent, rgba(5, 8, 12, 0.12)); } .window-gallery__window .hero-window__halo { opacity: 0.18; } .window-gallery__window[data-selected='true'] .hero-window:hover .hero-window__halo { opacity: 0.3; } .window-gallery__window .hero-window__pool { opacity: 0.28; } .window-gallery__caption { margin-top: 30px; text-align: center; display: grid; justify-items: center; gap: 1px; } .window-gallery__name { display: block; margin: 0; max-width: min(100%, 420px); min-height: 44px; border: 0; padding: 0; background: none; font-family: var(--font-display); font-size: clamp(19px, 2vw, 25px); font-weight: 400; letter-spacing: -0.025em; color: rgba(238, 236, 229, 0.55); cursor: default; transition: color 220ms ease; } .window-gallery__window[data-selected='true'] .window-gallery__name { color: rgba(248, 245, 237, 0.93); cursor: default; opacity: 1; } .window-gallery__name:hover { color: rgba(248, 245, 237, 0.93); } .window-gallery__status { margin: 0; min-height: 20px; font-size: 12px; line-height: 20px; color: rgba(222, 230, 235, 0.56); transition: opacity 250ms ease; } /* Community choice is part of the caption. Its one reading pane uses the shared panel material; rows remain unfiltered inset content. */ .window-gallery__picker { position: relative; z-index: 12; max-width: 100%; } .window-gallery__static-name[hidden], .window-gallery__instance[hidden], .window-gallery__status[hidden], .window-gallery__instances[hidden] { display: none; } .window-gallery__instance { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px; max-width: 100%; padding: 6px 14px; border: 0; border-radius: 22px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: color 180ms ease, background 180ms ease; } .window-gallery__instance:hover, .window-gallery__instance[aria-expanded='true'] { color: rgba(244, 243, 239, 0.9); background: rgba(255, 255, 255, 0.035); } .window-gallery__static-name { display: block; padding: 6px 14px; } .window-gallery__instance-label { min-width: 0; text-wrap: balance; overflow-wrap: anywhere; } .window-gallery__chevron { flex: none; font-size: 15px; line-height: 1; transform: translateY(-2px); opacity: 0.65; } .window-gallery__instances { position: absolute; z-index: 20; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(400px, calc(100vw - 40px)); max-height: min(320px, calc(100svh - 160px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(235, 240, 245, 0.22) transparent; padding: 7px; border-radius: 20px; } .window-gallery__option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 9px 11px; border: 0; border-radius: 13px; background: transparent; color: rgba(244, 241, 234, 0.84); text-align: left; cursor: pointer; } .window-gallery__option:hover, .window-gallery__option:focus-visible { background: rgba(255, 255, 255, 0.065); outline: none; } .window-gallery__option:focus-visible { box-shadow: inset 0 0 0 1px rgba(200, 222, 239, 0.45); } .window-gallery__option-name { min-width: 0; flex: 1; font-size: 13px; overflow-wrap: anywhere; } .window-gallery__option-status { max-width: 115px; font-size: 10px; line-height: 15px; color: rgba(230, 235, 238, 0.5); text-align: right; } .window-gallery__check { flex: none; width: 13px; font-size: 12px; opacity: 0; } .window-gallery__option[aria-checked='true'] .window-gallery__check { opacity: 0.8; } .window-gallery__instance:focus-visible, .window-gallery__retry:focus-visible { outline: 2px solid rgba(184, 210, 238, 0.8); outline-offset: 3px; } .window-gallery__empty { text-align: center; color: rgba(237, 236, 231, 0.7); font-size: 14px; } .window-gallery__empty[hidden] { display: none; } .window-gallery__retry { padding: 10px 22px; min-height: 44px; border-radius: 24px; color: inherit; } @media (hover: none), (pointer: coarse) { .window-gallery__window[data-selected='true'] .hero-window__cue { opacity: 0.8; transform: none; } } @media (max-width: 700px) { .lobby--windows, .window-gallery[data-single='false'] { --window-width: 82vw; } .window-gallery__content { inset: 72px 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); } .window-gallery__brand { font-size: 18px; } .window-gallery__caption { margin-top: 22px; } .window-gallery__name { font-size: 21px; } .window-gallery__window .hero-window__scrim { display: flex; padding: 20px 16px 12px; } } @media (max-height: 500px) and (orientation: landscape) { .lobby--windows { --window-width: min(58vw, calc((100svh - 180px) * 16 / 9)); } .window-gallery[data-single='false'] { --window-width: min(58vw, calc((100svh - 280px) * 16 / 9)); } .window-gallery__content { inset: 58px 0 0; overflow-y: auto; } .window-gallery { padding-block: 14px; } .window-gallery__caption { margin-top: 12px; } .window-gallery__viewport { height: calc(var(--window-width) * 9 / 16 + 72px); } } @media (prefers-reduced-motion: reduce) { .window-gallery .window-gallery__window, .window-gallery__window .hero-window, .window-gallery__window .hero-window__aperture, .window-gallery__window .hero-window__scene, .window-gallery__window .hero-window__halo, .window-gallery__window .hero-window__cue, .window-gallery__status { transition: none; } .window-gallery__window .hero-window:hover .hero-window__aperture, .window-gallery__window .hero-window:focus-visible .hero-window__aperture, .window-gallery__window .hero-window:hover .hero-window__scene { transform: none; } } /* Registered angle animates only the narrow masked reflection, never the campus image or the glass surface's geometry. */ @property --campus-lens-light-angle { syntax: ''; inherits: false; initial-value: 265deg; } /* A specialized optical frame. The artwork stays clear; a second sample is visible only through the narrow curved perimeter, never across the centre. */ .window-gallery__window .hero-window__aperture { --hw-crown: clamp(38px, 5.8vw, 72px); --hw-foot: clamp(22px, 3vw, 38px); border-radius: var(--hw-crown) var(--hw-crown) var(--hw-foot) var(--hw-foot) / calc(var(--hw-crown) * 0.86) calc(var(--hw-crown) * 0.86) var(--hw-foot) var(--hw-foot); border-color: rgba(236, 245, 240, 0.3); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3), 0 16px 24px -12px rgba(0, 0, 0, 0.48), 0 30px 58px -16px rgba(0, 0, 0, 0.42); } .window-gallery__window .door__vessel, .window-gallery__window .door__depthshade, .window-gallery__window .hero-window__sheen { display: none; } .window-gallery__window .door__frame { inset: 0; z-index: 2; border: 0; border-radius: inherit; background: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 1px 0 2px rgba(226, 242, 232, 0.16), inset -1px 0 2px rgba(226, 242, 232, 0.1), inset 0 -2px 2px rgba(249, 230, 194, 0.42), inset 0 -7px 6px rgba(12, 23, 17, 0.26); } .campus-lens__edge, .campus-lens__reflection { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; padding: clamp(7px, 1.1vw, 12px) clamp(5px, 0.8vw, 9px); padding-bottom: clamp(10px, 1.6vw, 17px); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } .campus-lens__edge { overflow: hidden; } .campus-lens__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.085); filter: brightness(1.18) saturate(1.06); } .campus-lens__reflection { z-index: 2; background: radial-gradient(ellipse 14% 26% at 1% 2%, rgba(250, 255, 246, 0.7), transparent 76%), radial-gradient(ellipse 32% 12px at 19% 0%, rgba(255, 255, 249, 0.85), transparent), radial-gradient(ellipse 38% 9px at 68% 100%, rgba(255, 235, 194, 0.5), transparent), radial-gradient(ellipse 9px 28% at 0% 16%, rgba(247, 255, 249, 0.34), transparent), linear-gradient(115deg, rgba(239, 251, 242, 0.13), transparent 24%, transparent 83%, rgba(235, 246, 237, 0.08)); opacity: 0.88; transition: opacity 240ms ease; } .window-gallery__window .hero-window:hover .campus-lens__reflection, .window-gallery__window .hero-window:focus-visible .campus-lens__reflection { opacity: 1; } .window-gallery__window .hero-window:focus-visible .hero-window__aperture { outline: 2px solid rgba(184, 210, 238, 0.8); outline-offset: 4px; } .window-gallery__window .hero-window__scrim { background: none; } .window-gallery__window .hero-window:hover .hero-window__aperture, .window-gallery__window .hero-window:focus-visible .hero-window__aperture { transform: none; } @supports not (mask-composite: exclude) { .campus-lens__edge, .campus-lens__reflection { display: none; } } @media (prefers-reduced-motion: reduce) { .campus-lens__reflection { transition: none; } } /* A reflection follows the curved shoulder, rather than drawing a second complete outline. Its asymmetric fade gives the cast rim a signature. */ .window-gallery__window .hero-window__aperture::after { content: ''; position: absolute; inset: 3px; z-index: 2; border-radius: inherit; pointer-events: none; padding: 2.5px; background: conic-gradient(from var(--campus-lens-light-angle) at 50% 50%, transparent 0deg, rgba(223, 246, 236, 0.12) 12deg, rgba(247, 255, 249, 0.65) 28deg, rgba(255, 255, 250, 0.98) 38deg, rgba(239, 254, 246, 0.45) 50deg, transparent 78deg, transparent 162deg, rgba(255, 224, 181, 0.12) 182deg, rgba(255, 237, 205, 0.54) 205deg, rgba(240, 250, 230, 0.15) 229deg, transparent 252deg, transparent 360deg); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } .window-gallery__window .hero-window__pool { top: calc(100% - 2px); height: 40px; width: 92%; opacity: 0.48; background: radial-gradient(ellipse 27% 9% at 66% 14%, rgba(255, 226, 176, 0.56), transparent 80%), radial-gradient(ellipse 43% 20% at 50% 8%, rgba(205, 231, 201, 0.18), transparent 80%); filter: blur(3px); } @supports not (mask-composite: exclude) { .window-gallery__window .hero-window__aperture::after { display: none; } } /* Light drifts over the fixed glass; neither the artwork nor its refraction sample moves. CSS owns the loop, so removing the frame ends it naturally. */ @media (prefers-reduced-motion: no-preference) { .campus-lens__reflection { animation: campus-lens-light-drift 7s ease-in-out infinite alternate; background-repeat: no-repeat; } .window-gallery__window .hero-window__aperture::after { animation: campus-lens-orbit 14s linear infinite; } } @keyframes campus-lens-light-drift { from { background-position: 0 0, -45px 0, 42px 0, 0 -10px, 0 0; } to { background-position: 0 0, 105px 0, -65px 0, 0 18px, 0 0; } } @keyframes campus-lens-orbit { from { --campus-lens-light-angle: 265deg; } to { --campus-lens-light-angle: 625deg; } } .profile-panel__toggle-copy { display: grid; gap: 3px; min-width: 0; text-align: left; } .profile-panel__toggle-detail { color: rgba(250,247,242,.45); font-size: 10.5px; line-height: 1.35; font-weight: 400; } /* Settings is a close-up surface over a painted room: enough pigment for text to stay crisp, enough translucency to keep the room present. This file owns the settings skin so the global room stylesheet does not become a settings implementation detail. */ .profile-chip[hidden] { display: none; } .profile-panel { --profile-glass-line: rgba(246, 239, 230, 0.12); --profile-glass-line-soft: rgba(246, 239, 230, 0.075); --profile-glass-fill: rgba(255, 255, 255, 0.038); --profile-glass-fill-hover: rgba(255, 255, 255, 0.068); /* One card material for every grouped surface in Settings — menu, toggles, choices, lists. New surfaces take these tokens rather than new values. */ --profile-card-line: rgba(246, 239, 230, 0.06); --profile-card-fill: rgba(255, 255, 255, 0.018); --profile-card-separator: rgba(246, 239, 230, 0.05); --profile-card-radius: 18px; width: min(398px, calc(100vw - 34px)); max-height: none; overflow: hidden; border-color: rgba(238, 226, 211, 0.2); border-radius: 25px; background: radial-gradient(circle at 16% -8%, rgba(180, 196, 221, 0.18), transparent 37%), linear-gradient(180deg, rgba(30, 32, 39, 0.91), rgba(14, 16, 21, 0.95)); -webkit-backdrop-filter: blur(32px) saturate(138%); backdrop-filter: blur(32px) saturate(138%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.018), 0 30px 90px rgba(0, 0, 0, 0.54), 0 8px 25px rgba(0, 0, 0, 0.3); } .profile-panel__content { max-height: min(72dvh, 650px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(239, 232, 224, 0.16) transparent; padding: 25px 25px 32px; } .profile-panel__content::-webkit-scrollbar { width: 4px; } .profile-panel__content::-webkit-scrollbar-track { margin-block: 18px; } .profile-panel__content::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(239, 232, 224, 0.16); } .profile-panel[data-view='editor'] .profile-panel__content { padding-bottom: 32px; } .profile-panel__header { align-items: center; gap: 9px; min-height: 32px; margin-bottom: 19px; } .profile-panel__title { flex: 1; min-width: 0; font-size: 25px; letter-spacing: -0.03em; text-wrap: balance; } .profile-panel__back, .profile-panel__close { width: 32px; height: 32px; border: 1px solid transparent; color: rgba(244, 239, 232, 0.44); } .profile-panel__back { display: grid; place-items: center; flex: none; margin-left: -7px; border-radius: 50%; background: transparent; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; } .profile-panel__back:hover, .profile-panel__close:hover { border-color: var(--profile-glass-line-soft); background: var(--profile-glass-fill); color: rgba(251, 247, 241, 0.82); } .profile-panel__back:hover { transform: translateX(-1px); } .profile-panel__back-glyph { width: 16px; height: 16px; } /* The identity floats directly on the panel glass — no box around a face — with only a faint lamp-warm breath behind it. */ .profile-panel__identity { position: relative; gap: 17px; margin: 0; padding: 5px 2px 24px; } .profile-panel__identity::before { position: absolute; inset: -14px -20px 0; border-radius: 50%; background: radial-gradient(ellipse at 16% 42%, rgba(233, 203, 163, 0.075), transparent 62%); pointer-events: none; content: ''; } .profile-panel__avatar { width: 66px; height: 66px; border-color: rgba(242, 224, 202, 0.44); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.15), 0 0 0 3px rgba(255, 255, 255, 0.025); } .profile-panel__name { font-size: 22px; } .profile-panel__meta { color: rgba(238, 239, 241, 0.5); } /* Rows live in one quiet card; separators are inset hairlines that start where the text does, so the card never reads as a stack of boxes. */ .profile-panel__menu { display: grid; overflow: hidden; border: 1px solid var(--profile-card-line); border-radius: var(--profile-card-radius); background: var(--profile-card-fill); box-shadow: inset 0 1px rgba(255, 255, 255, 0.025); } .profile-panel__menu .profile-panel__edit { position: relative; grid-template-columns: minmax(0, 1fr) auto; min-height: 54px; margin: 0; border: 0; border-radius: 0; padding: 9px 14px 9px 16px; background: transparent; } .profile-panel__menu .profile-panel__edit:not(:last-child)::after { position: absolute; right: 0; bottom: 0; left: 16px; height: 1px; background: var(--profile-card-separator); content: ''; } .profile-panel__menu .profile-panel__edit:hover { background: var(--profile-glass-fill); transform: none; } .profile-panel__edit { grid-template-columns: minmax(0, 1fr) auto; border-color: var(--profile-card-line); background: var(--profile-card-fill); } .profile-panel__edit:hover { border-color: var(--profile-glass-line-soft); background: var(--profile-glass-fill); } .profile-panel__edit-copy strong { color: rgba(250, 247, 242, 0.86); font-size: 12.5px; } .profile-panel__edit-chevron { justify-self: end; color: rgba(240, 234, 227, 0.3); } .profile-panel__section { margin: 22px 2px 9px; color: rgba(242, 232, 220, 0.4); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .profile-panel__header + .profile-panel__section { margin-top: 1px; } .profile-panel__toggles, .profile-panel__choices { overflow: hidden; border: 1px solid var(--profile-card-line); border-radius: var(--profile-card-radius); background: var(--profile-card-fill); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02); } .profile-panel__toggles { gap: 0; padding: 3px; } .profile-panel__toggle { min-height: 49px; border-radius: 15px; } .profile-panel__toggle:hover, .profile-panel__toggle:focus-visible, .profile-panel__choice:hover, .profile-panel__choice:focus-visible { background: rgba(255, 255, 255, 0.058); } .profile-panel__choices { gap: 0; padding: 3px; } .profile-panel__choice { min-height: 51px; border-radius: 15px; } .profile-panel__preference-note, .profile-panel__toggle-detail { color: rgba(238, 239, 241, 0.5); } .profile-panel__field { gap: 7px; margin-top: 13px; } .profile-panel__field > span { color: rgba(243, 240, 235, 0.57); font-size: 11px; } .profile-panel__field small { color: rgba(243, 240, 235, 0.29); } .profile-panel__input { height: 45px; border-color: rgba(245, 238, 229, 0.105); border-radius: 13px; background: rgba(3, 5, 9, 0.34); color: rgba(252, 249, 245, 0.92); font-size: 13px; } .profile-panel__input:hover:not(:focus) { border-color: rgba(245, 238, 229, 0.18); } .profile-panel__input:focus { border-color: rgba(232, 199, 156, 0.52); background: rgba(3, 5, 9, 0.48); box-shadow: 0 0 0 3px rgba(225, 180, 122, 0.075); } .profile-panel__photo-row { margin-bottom: 19px; padding: 3px 1px; } .profile-panel__avatar--edit { width: 64px; height: 64px; } .profile-panel__photo-pick { min-height: 38px; border-color: var(--profile-glass-line); background: var(--profile-glass-fill); } .profile-panel__photo-pick:hover { border-color: rgba(242, 211, 171, 0.28); background: var(--profile-glass-fill-hover); } .profile-panel__actions { margin-top: 19px; padding-top: 16px; border-top-color: var(--profile-card-line); } .profile-panel[data-view='editor'] .profile-panel__actions { position: static; z-index: auto; bottom: auto; margin-right: 0; margin-left: 0; padding: 16px 0 2px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .profile-panel__cancel, .profile-panel__save { min-height: 39px; padding-inline: 16px; } .profile-panel__save { background: linear-gradient(135deg, #f0e6d8, #d6bb96); box-shadow: inset 0 1px rgba(255, 255, 255, 0.62), 0 7px 20px rgba(145, 94, 44, 0.13); } /* People lists share the menu's card: one surface, inset separators. */ .profile-panel__blocked-list { gap: 0; overflow: hidden; border: 1px solid var(--profile-card-line); border-radius: var(--profile-card-radius); background: var(--profile-card-fill); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02); } .profile-panel__blocked-person { position: relative; min-height: 52px; border: 0; border-radius: 0; padding: 9px 12px 9px 16px; background: transparent; } .profile-panel__blocked-person:not(:last-child)::after { position: absolute; right: 0; bottom: 0; left: 16px; height: 1px; background: var(--profile-card-separator); content: ''; } .profile-panel__blocked-list .profile-panel__loading { padding: 15px 16px; } .profile-panel .sound-settings__master, .profile-panel .sound-settings__moments { border-color: var(--profile-card-line); background: var(--profile-card-fill); } .profile-panel .sound-settings__master { border-radius: var(--profile-card-radius); } .profile-panel .sound-settings__moments { overflow: hidden; border: 1px solid var(--profile-card-line); border-radius: var(--profile-card-radius); } .profile-panel .sound-settings__moment { padding-inline: 10px; } .profile-panel__footer { margin-top: 20px; border-top-color: var(--profile-card-line); color: rgba(238, 239, 241, 0.3); } .profile-panel button:focus-visible, .profile-panel input:focus-visible, .profile-panel select:focus-visible, .profile-panel label:has(input[type='file']:focus-visible) { outline: 1px solid rgba(244, 213, 171, 0.88); outline-offset: 3px; } /* Profile links read as a quiet continuation of the identity fields: a row of small pills, and one smart field that recognises whatever is pasted into it. */ .profile-links { margin-top: 18px; } .profile-links__heading { display: flex; justify-content: space-between; margin-bottom: 8px; color: rgba(243, 240, 235, 0.57); font-size: 11px; } .profile-links__heading small { font: inherit; color: rgba(243, 240, 235, 0.29); } .profile-links__row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .profile-links__row:empty { display: none; } .profile-links__pill { display: inline-flex; align-items: center; min-height: 33px; border: 1px solid var(--profile-glass-line-soft); border-radius: 999px; padding-right: 3px; background: var(--profile-glass-fill); box-shadow: inset 0 1px rgba(255, 255, 255, 0.03); transition: border-color 140ms ease, background 140ms ease; } .profile-links__pill:hover, .profile-links__pill:focus-within { border-color: var(--profile-glass-line); background: var(--profile-glass-fill-hover); } .profile-links__pill[data-editing] { border-color: rgba(232, 199, 156, 0.4); } .profile-links__pill-body { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; border: 0; border-radius: 999px; padding: 0 3px 0 10px; background: transparent; color: rgba(250, 247, 242, 0.8); font: 450 11px var(--font-ui); } .profile-links__pill-label { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-links__mark, .profile-links__choice-mark { display: grid; place-items: center; color: rgba(249, 244, 238, 0.7); } .profile-links__platform-glyph { width: 13px; height: 13px; flex: none; } .profile-links__pill-remove { width: 0; height: 26px; overflow: hidden; border: 0; border-radius: 999px; padding: 0; background: transparent; color: rgba(247, 198, 182, 0.55); opacity: 0; transition: width 140ms ease, opacity 140ms ease; } .profile-links__pill:hover .profile-links__pill-remove, .profile-links__pill:focus-within .profile-links__pill-remove { width: 25px; opacity: 1; } .profile-links__pill-remove:hover { background: rgba(255, 255, 255, 0.06); color: rgba(252, 214, 199, 0.92); } .profile-links__add-link { display: inline-flex; align-items: center; min-height: 33px; border: 1px dashed rgba(246, 239, 230, 0.16); border-radius: 999px; padding: 0 12px; background: transparent; color: rgba(240, 238, 235, 0.48); font: 450 11px var(--font-ui); transition: border-color 140ms ease, background 140ms ease, color 140ms ease; } .profile-links__add-link:hover { border-color: rgba(242, 211, 171, 0.34); background: rgba(255, 255, 255, 0.035); color: rgba(250, 247, 242, 0.78); } .profile-links__hint { color: rgba(240, 238, 235, 0.32); font-size: 10.5px; } .profile-links__composer { display: grid; } .profile-links__composer[data-state='editing'] { margin-top: 9px; animation: profile-links-reveal 180ms cubic-bezier(0.22, 1, 0.36, 1) both; } .profile-links__editor { display: grid; } /* The smart field carries the input skin itself; the input inside is bare so glyph, prefix, and text sit on one continuous surface. */ .profile-links__field { display: flex; align-items: center; min-height: 45px; border: 1px solid rgba(245, 238, 229, 0.105); border-radius: 13px; padding: 0 5px 0 11px; background: rgba(3, 5, 9, 0.34); transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } .profile-links__field:hover:not(:focus-within) { border-color: rgba(245, 238, 229, 0.18); } .profile-links__field:focus-within { border-color: rgba(232, 199, 156, 0.52); background: rgba(3, 5, 9, 0.48); box-shadow: 0 0 0 3px rgba(225, 180, 122, 0.075); } .profile-links__choice-mark { width: 22px; flex: none; } .profile-links__prefix { flex: none; margin-left: 5px; color: rgba(243, 238, 231, 0.38); font-size: 12.5px; } .profile-links__prefix:empty { display: none; } .profile-links__input { flex: 1; min-width: 60px; height: 43px; border: 0; outline: 0; padding: 0 8px 0 6px; background: transparent; color: rgba(252, 249, 245, 0.92); font: 400 12.5px var(--font-ui); user-select: text; -webkit-user-select: text; } .profile-links__prefix:not(:empty) + .profile-links__input { padding-left: 1px; } .profile-links__input::placeholder { color: rgba(230, 236, 244, 0.24); } .profile-panel .profile-links__input:focus-visible { outline: none; } .profile-links__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; } .profile-links__chip { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; border: 1px solid transparent; border-radius: 999px; padding: 0 10px; background: rgba(255, 255, 255, 0.035); color: rgba(244, 240, 234, 0.55); font: 450 10.5px var(--font-ui); transition: border-color 140ms ease, background 140ms ease, color 140ms ease; } .profile-links__chip-glyph { width: 12px; height: 12px; flex: none; opacity: 0.8; } .profile-links__chip:hover { background: rgba(255, 255, 255, 0.065); color: rgba(250, 247, 242, 0.82); } .profile-links__chip[aria-pressed='true'] { border-color: rgba(232, 199, 156, 0.45); background: rgba(232, 199, 156, 0.12); color: rgba(248, 232, 210, 0.95); } .profile-links__composer-cancel { display: grid; place-items: center; width: 29px; height: 29px; margin-left: auto; border: 0; border-radius: 999px; padding: 0; background: transparent; color: rgba(240, 238, 235, 0.4); } .profile-links__composer-cancel:hover { background: rgba(255, 255, 255, 0.055); color: rgba(250, 247, 242, 0.75); } .profile-links__action-glyph { width: 13px; height: 13px; } .profile-links__commit, .profile-links__retry { min-height: 34px; border: 0; border-radius: 999px; padding: 0 13px; background: rgba(232, 214, 190, 0.9); color: rgba(29, 23, 18, 0.9); font: 450 11px var(--font-ui); } .profile-links__commit { flex: none; min-width: 46px; transition: opacity 140ms ease; } .profile-links__commit:disabled { opacity: 0.26; } .profile-links__unavailable, .profile-links__loading { border: 1px solid var(--profile-glass-line-soft); border-radius: 14px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 1px rgba(255, 255, 255, 0.025); } .profile-links__unavailable { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; } .profile-links__loading { display: flex; align-items: center; gap: 8px; padding: 12px; color: rgba(240, 238, 235, 0.42); font-size: 10.5px; } .profile-links__loading-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(232, 207, 176, 0.62); animation: profile-links-pulse 1.2s ease-in-out infinite alternate; } .profile-links__unavailable-copy { display: grid; gap: 3px; } .profile-links__unavailable-copy strong { color: rgba(250, 247, 242, 0.7); font-size: 11px; font-weight: 500; } .profile-links__unavailable-copy span { color: rgba(240, 238, 235, 0.4); font-size: 9.5px; line-height: 1.35; } .profile-links__error { margin-top: 7px; } @keyframes profile-links-reveal { from { opacity: 0; transform: translateY(-4px); } } @keyframes profile-sheet-in { from { opacity: 0; transform: translateY(18px); } } @keyframes profile-links-pulse { to { opacity: 0.35; } } @media (max-width: 520px) { /* At phone width the panel stops floating beside the chip and settles as a sheet along the bottom edge, rising into place instead of dropping in. It stays absolutely positioned: an ancestor transform would quietly turn position: fixed back into this anyway. */ .profile-panel { top: auto; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; width: auto; border-radius: 24px; animation: profile-sheet-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both; } .profile-panel__content { max-height: min(80dvh, 700px); padding: 23px 20px 30px; } .profile-panel[data-view='editor'] .profile-panel__content { padding-bottom: 30px; } .profile-panel[data-view='editor'] .profile-panel__actions { padding-bottom: max(2px, env(safe-area-inset-bottom)); } .profile-panel__back, .profile-panel__close { width: 38px; height: 38px; } .profile-panel__cancel, .profile-panel__save, .profile-links__retry { min-height: 44px; } .profile-links__pill, .profile-links__add-link { min-height: 38px; } /* No hover on touch: the quiet remove affordance stays visible. */ .profile-links__pill-remove { width: 25px; opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { .profile-panel, .profile-panel *, .profile-panel *::before, .profile-panel *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; } .profile-links__loading-dot { animation: none !important; } } @media (prefers-contrast: more) { .profile-panel { border-color: rgba(255, 255, 255, 0.42); background: rgba(14, 16, 21, 0.98); } .profile-panel__menu, .profile-panel__blocked-list, .profile-links__pill, .profile-links__field, .profile-links__unavailable, .profile-links__loading, .profile-panel__toggles, .profile-panel__choices { border-color: rgba(255, 255, 255, 0.25); } }