/* Shared shell primitives and legacy top-level components. */ .panel-surface { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-panel); box-shadow: var(--shadow-tight); } .profile-button__avatar, .profile-popover__avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: #07100b; font-weight: 900; } .profile-button__avatar { flex: 0 0 24px; width: 24px; height: 24px; overflow: hidden; } .profile-button__avatar img, .profile-popover__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .profile-popover-anchor { position: relative; } .profile-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: 300px; padding: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-elevated); box-shadow: var(--shadow-elevated); backdrop-filter: none; transform-origin: top right; } .profile-popover__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .profile-popover__avatar { width: 44px; height: 44px; border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 14px; box-shadow: none; overflow: hidden; } .profile-popover__head strong, .profile-popover__head span { display: block; } .profile-popover__head strong { color: var(--fg-body); font-size: 16px; font-weight: 900; } .profile-popover__head span, .profile-popover__stats dt, .profile-popover__footer span { color: var(--fg-soft); font-size: 12px; } .profile-popover__stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; padding: 12px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .profile-popover__stats dd { margin: 0; overflow: hidden; color: var(--fg-body); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .profile-popover__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; } .profile-popover__footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-popover__footer button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.07); color: var(--fg-body); font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: none; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease; } .profile-popover__footer button:hover { border-color: rgba(var(--accent-rgb), 0.36); background: rgba(var(--accent-rgb), 0.14); transform: translate(-1px, -1px); } .profile-popover__center-btn, .profile-popover__report-btn, .profile-popover__review-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; margin-top: 12px; border: 1px solid rgba(var(--accent-rgb), 0.34); border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: none; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease; } .profile-popover__report-btn { border-color: var(--border-subtle); background: var(--bg-inset); color: var(--fg-body); } .profile-popover__review-btn { border-color: rgba(var(--accent-rgb), 0.42); background: var(--accent); color: #061014; } .profile-popover__center-btn:hover, .profile-popover__report-btn:hover, .profile-popover__review-btn:hover { border-color: rgba(var(--accent-rgb), 0.48); background: rgba(var(--accent-rgb), 0.2); transform: translate(-1px, -1px); } .profile-popover__review-btn:hover { background: var(--accent-hover, var(--accent)); color: #061014; } .project-card-shell { position: relative; display: grid; min-width: 0; } .project-card-shell > .project-card { width: 100%; height: 100%; } .project-card__delete, .profile-page__delete-project { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 90, 95, 0.32); border-radius: 10px; background: rgba(255, 90, 95, 0.12); color: #ff9a9d; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .project-card__delete { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; box-shadow: var(--shadow-tight); } .profile-page__delete-project { flex: 0 0 32px; width: 32px; height: 32px; margin-left: auto; } .project-card__delete:hover, .profile-page__delete-project:hover { border-color: rgba(255, 90, 95, 0.58); background: rgba(255, 90, 95, 0.18); transform: translateY(-1px); } .auth-gate, .auth-gate-tab { position: fixed; right: 18px; z-index: 35; backdrop-filter: none; } .auth-gate { top: 92px; width: min(348px, calc(100vw - 36px)); padding: 16px; border-radius: 20px; } .auth-gate__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .auth-gate__head strong { display: block; color: var(--fg-body); font-size: 18px; line-height: 1.2; } .auth-gate__eyebrow { display: block; margin-bottom: 4px; color: var(--accent); font-size: 11px; font-weight: 900; text-transform: uppercase; } .auth-gate__close { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px; background: var(--bg-inset); color: var(--fg-muted); cursor: pointer; } .auth-gate__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; } .auth-gate__badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid rgba(var(--accent-rgb), 0.16); border-radius: 999px; background: rgba(var(--accent-rgb), 0.09); color: var(--fg-body); font-size: 12px; font-weight: 850; } .auth-gate__rows { display: grid; gap: 8px; margin-bottom: 14px; } .auth-gate__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 12px; border: 1px solid var(--border-weak); border-radius: 12px; background: var(--bg-inset); } .auth-gate__row span, .auth-gate__footer span { min-width: 0; overflow: hidden; color: var(--fg-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .auth-gate__row strong { color: var(--fg-body); font-size: 12px; font-weight: 900; white-space: nowrap; } .auth-gate__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .auth-gate__cta, .auth-gate-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(var(--accent-rgb), 0.24); border-radius: 999px; background: var(--accent); color: #07100b; font-size: 12px; font-weight: 900; cursor: pointer; } .auth-gate__cta { flex: 0 0 auto; height: 32px; padding: 0 13px; } .auth-gate-tab { top: 96px; height: 36px; padding: 0 14px; box-shadow: var(--shadow-tight); } .page-motion { animation: page-in 220ms ease both; } @keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1180px) { .creator-button { display: none; } .member-button { max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 900px) { body { overflow: auto; overflow-x: hidden; } .event-strip { flex-wrap: wrap; justify-content: flex-start; align-items: center; height: auto; min-height: 40px; padding: 8px 40px 8px 12px; white-space: normal; line-height: 1.25; font-size: 12px; } .event-strip__close { top: 10px; right: 10px; transform: none; } .web-shell { min-height: 100%; overflow: auto; } .web-shell__stage { height: auto; min-height: calc(100svh - 40px); } .web-shell.event-strip-hidden .web-shell__stage { min-height: 100svh; } .web-shell__content { min-height: calc(100svh - 40px); padding-left: 0; padding-bottom: 78px; } .web-topbar { flex: 0 0 auto; flex-wrap: wrap; align-items: flex-start; padding: 12px 14px 8px; } .brand-lockup__tone { display: none; } .web-topbar__actions { flex: 0 0 100%; width: 100%; gap: 6px; justify-content: flex-end; } .creator-button, .member-button { display: none; } .profile-button span:last-child { display: none; } .profile-popover { width: min(288px, calc(100vw - 28px)); } .floating-nav { top: auto; right: 14px; bottom: 14px; left: 14px; flex-direction: row; justify-content: flex-start; width: auto; gap: 6px; padding: 7px 8px; border-radius: 18px; transform: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; } .floating-nav::-webkit-scrollbar { display: none; } .floating-nav__create, .floating-nav__button { width: 40px; height: 40px; flex: 0 0 auto; } .floating-nav__label, .floating-nav__button.is-active .floating-nav__label { display: none; } .floating-nav__button.has-divider { margin-top: 0; } .floating-nav__button.has-divider::before { display: none; } .auth-gate { top: auto; right: 12px; bottom: 82px; left: 12px; width: auto; padding: 14px; } .auth-gate-tab { top: auto; right: 14px; bottom: 82px; } } .web-shell.is-auth-view .web-shell__page { overflow: hidden; } .web-shell.is-immersive-view .web-shell__page { overflow: hidden; } .web-shell[data-theme="dark"] .event-strip { background: rgba(var(--accent-rgb), 0.14); } .web-shell[data-theme="dark"] .event-strip__pill { color: var(--accent); } .login-gate-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; } .login-gate-modal__scrim { position: absolute; inset: 0; border: 0; background: rgba(6, 12, 9, 0.5); backdrop-filter: none; animation: backdrop-in 150ms ease both; } .login-gate-modal__panel { position: relative; z-index: 1; width: min(420px, 100%); padding: 28px 24px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-elevated); box-shadow: var(--shadow-elevated); animation: scale-in 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both; } .login-gate-modal__eyebrow { display: inline-flex; align-items: center; min-height: 24px; margin-bottom: 12px; padding: 0 10px; border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 999px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-size: 11px; font-weight: 1000; box-shadow: none; } .login-gate-modal__panel h2 { margin: 0; color: var(--fg-body); font-size: 20px; font-weight: 1000; line-height: 1.18; } .login-gate-modal__panel p { margin: 10px 0 0; color: #557466; font-weight: 800; line-height: 1.6; } .login-gate-modal__actions { display: flex; gap: 12px; margin-top: 20px; } .login-gate-modal__primary, .login-gate-modal__secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer; font-weight: 1000; font-size: 14px; box-shadow: none; transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease; } .login-gate-modal__primary:hover, .login-gate-modal__secondary:hover { border-color: rgba(var(--accent-rgb), 0.38); transform: translateY(-1px); } .login-gate-modal__primary { background: var(--accent); color: #061014; } .login-gate-modal__secondary { background: rgba(255, 255, 255, 0.07); color: var(--fg-body); } .session-replaced-modal { position: fixed; inset: 0; z-index: 145; display: grid; place-items: center; padding: 20px; } .session-replaced-modal__scrim { position: absolute; inset: 0; background: rgba(3, 9, 7, 0.64); backdrop-filter: none; animation: backdrop-in 150ms ease both; } .session-replaced-modal__panel { position: relative; z-index: 1; width: min(440px, 100%); animation: scale-in 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both; padding: 30px 26px 24px; border: 1px solid rgba(var(--accent-rgb), 0.26); border-radius: var(--radius-lg); background: var(--surface-elevated); box-shadow: none; } .session-replaced-modal__eyebrow { display: inline-flex; align-items: center; min-height: 24px; margin-bottom: 12px; padding: 0 10px; border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 999px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-size: 11px; font-weight: 1000; } .session-replaced-modal__panel h2 { margin: 0; color: var(--fg-body); font-size: 22px; font-weight: 1000; line-height: 1.2; } .session-replaced-modal__panel p { margin: 12px 0 0; color: #557466; font-weight: 800; line-height: 1.7; } .session-replaced-modal__actions { display: flex; gap: 12px; margin-top: 22px; } .session-replaced-modal__primary, .session-replaced-modal__secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer; font-weight: 1000; font-size: 14px; box-shadow: none; transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease; } .session-replaced-modal__primary:hover, .session-replaced-modal__secondary:hover { border-color: rgba(var(--accent-rgb), 0.38); transform: translateY(-1px); } .session-replaced-modal__primary { background: var(--accent); color: #061014; } .session-replaced-modal__secondary { background: rgba(255, 255, 255, 0.08); color: var(--fg-body); } .project-delete-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; } .project-delete-modal__scrim { position: absolute; inset: 0; border: 0; background: rgba(3, 9, 7, 0.62); backdrop-filter: none; } .project-delete-modal__panel { position: relative; z-index: 1; display: grid; gap: 14px; width: min(420px, 100%); padding: 26px; border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: var(--radius-md); background: #101815; color: var(--fg-body); box-shadow: none; } .project-delete-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(255, 104, 104, 0.28); border-radius: 50%; background: rgba(255, 104, 104, 0.12); color: #ff7777; font-size: 18px; } .project-delete-modal__panel h2 { margin: 0; color: var(--fg-body); font-size: 20px; font-weight: 800; line-height: 1.2; } .project-delete-modal__panel p { margin: -4px 0 0; color: var(--fg-muted); font-size: 14px; font-weight: 600; line-height: 1.65; } .project-delete-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } .project-delete-modal__secondary, .project-delete-modal__danger { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 800; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease; } .project-delete-modal__secondary:disabled, .project-delete-modal__danger:disabled, .project-delete-modal__scrim:disabled { cursor: not-allowed; opacity: 0.7; } .project-delete-modal__secondary { border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.06); color: var(--fg-body); } .project-delete-modal__danger { border: 1px solid rgba(255, 104, 104, 0.48); background: #d94848; color: #fff; } .project-delete-modal__secondary:not(:disabled):hover, .project-delete-modal__danger:not(:disabled):hover { transform: translateY(-1px); } /* PDR UI refactor: quieter shell, stable core navigation, touch-safe mobile chrome. */ .web-shell { background: var(--page-bg); } .event-strip { justify-content: flex-start; height: 30px; padding: 0 18px; gap: 10px; border-bottom-color: var(--border-weak); background: rgba(226, 247, 231, 0.86); font-size: 12px; font-weight: 750; } .event-strip__pill { padding: 3px 9px; } .event-strip__close { position: static; width: auto; height: 24px; margin-left: auto; padding: 0 10px; transform: none; border: 1px solid rgba(35, 96, 57, 0.14); background: rgba(255, 255, 255, 0.66); color: #236039; } .web-shell__stage { height: calc(100svh - 30px); } .web-topbar { flex: 0 0 56px; padding: 10px 22px; background: rgba(255, 255, 255, 0.72); } .floating-nav { left: 20px; width: 58px; padding: 7px; gap: 4px; border-radius: 18px; } .floating-nav__item { width: 44px; } .floating-nav__button { width: 44px; height: 44px; } .floating-nav__button.is-active .floating-nav__label { opacity: 0; transform: translate(-6px, -50%); } .floating-nav__button:hover .floating-nav__label, .floating-nav__button:focus-visible .floating-nav__label, .floating-nav__button.is-active:hover .floating-nav__label, .floating-nav__button.is-active:focus-visible .floating-nav__label { opacity: 1; transform: translate(0, -50%); } .creator-button, .member-button, .profile-button, .icon-button, .theme-toggle { min-height: 40px; } .icon-button, .theme-toggle { width: 40px; } @media (max-width: 900px) { .event-strip { display: none; } .web-shell__stage, .web-shell.event-strip-hidden .web-shell__stage { height: auto; min-height: 100svh; } .web-shell__content { min-height: 100svh; padding-bottom: 78px; } .web-topbar { position: sticky; top: 0; align-items: center; flex-wrap: nowrap; padding: 12px 14px; } .web-topbar__actions { flex: 0 1 auto; width: auto; gap: 8px; } .brand-lockup__name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; } .icon-button, .theme-toggle, .profile-button { min-width: 44px; height: 44px; } .theme-switcher { flex: 0 0 auto; height: 44px; padding: 3px; } .theme-switcher .theme-toggle.theme-switcher__option { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; } .theme-switcher__option span { display: none; } .floating-nav { right: 12px; bottom: 10px; left: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: auto; gap: 4px; padding: 7px; overflow: visible; } .floating-nav__button { flex-direction: column; width: 100%; height: 52px; gap: 3px; border-radius: 14px; font-size: 18px; } .floating-nav__item { width: 100%; } .floating-nav__submenu { top: auto; bottom: calc(100% + 8px); left: 50%; min-width: 108px; transform: translate(-50%, 6px); } .floating-nav__item.has-children.is-submenu-open .floating-nav__submenu { transform: translate(-50%, 0); } .floating-nav__subbutton { justify-content: center; height: 34px; padding: 0 9px; font-size: 11px; } .floating-nav__label, .floating-nav__button.is-active .floating-nav__label { position: static; display: block; width: auto; max-width: 100%; height: auto; padding: 0; border: 0; transform: none; background: transparent; box-shadow: none; color: currentColor; font-size: 10px; line-height: 1.1; opacity: 1; } .floating-nav__item.has-children.is-submenu-open .floating-nav__button .floating-nav__label { opacity: 1; transform: none; } .floating-nav__button:hover .floating-nav__label, .floating-nav__button:focus-visible .floating-nav__label, .floating-nav__button.is-active:hover .floating-nav__label, .floating-nav__button.is-active:focus-visible .floating-nav__label { transform: none; } } @media (max-width: 900px) { html, body, #root, .web-shell { width: 100%; overflow-x: hidden; } .web-shell__content { width: 100%; padding-left: 0; } .web-shell__page { width: 100%; min-width: 0; } } .feature-access-gate { position: relative; min-height: inherit; isolation: isolate; } .feature-access-gate__content { min-height: inherit; filter: blur(14px) saturate(0.72); transform: scale(1.01); pointer-events: none; user-select: none; } .feature-access-gate__overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(5, 9, 8, 0.68); backdrop-filter: blur(2px); } .feature-access-gate__panel { width: min(430px, calc(100vw - 40px)); padding: 28px 26px 30px; border: 1px solid rgba(var(--accent-rgb), 0.34); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.035)), var(--bg-panel); color: var(--fg-body); text-align: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 24px 80px rgba(0, 0, 0, 0.44); } .feature-access-gate__eyebrow { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; margin-bottom: 14px; padding: 0 10px; border: 1px solid rgba(var(--accent-rgb), 0.34); border-radius: 999px; background: rgba(var(--accent-rgb), 0.16); color: var(--accent); font-size: 11px; font-weight: 1000; } .feature-access-gate__panel h2 { margin: 0; color: var(--fg-body); font-size: 24px; font-weight: 1000; line-height: 1.18; } .feature-access-gate__panel p { margin: 12px 0 0; color: var(--fg-muted); font-size: 14px; font-weight: 800; line-height: 1.7; }