/* ========================================================================== WOCOM Meet — design system Tokens from docs/PLAN.md §2.1. Palette extracted from wocomja.com; layout from the concept design. No build step: plain CSS, custom properties only. ========================================================================== */ :root { --wc-primary: #7B2FF2; --wc-primary-hover: #6A22DE; --wc-primary-active: #5A1FBD; --wc-primary-soft: #E8DFFC; --wc-primary-tint: #F3EDFF; --wc-primary-light: #9B59FF; --wc-success: #10B981; --wc-success-soft: #D1FAE5; --wc-warning: #D97706; --wc-warning-soft: #FEF3C7; --wc-danger: #ED6464; --wc-danger-soft: #FEE2E2; --wc-info: #3B82F6; --wc-ai: #9830E5; --wc-ai-grad: linear-gradient(135deg, #7B2FF2 0%, #9830E5 100%); --wc-ink: #1F2937; --wc-ink-2: #374151; --wc-muted: #6B7280; --wc-muted-2: #9CA3AF; --wc-line: #E5E7EB; --wc-surface:#FFFFFF; --wc-bg: #F6F6F6; --wc-bg-2: #F9FAFB; --wc-shell: #CCD1DF; --wc-radius-card: 20px; --wc-radius-tile: 16px; --wc-radius-ctl: 12px; --wc-radius-pill: 999px; --wc-shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06); --wc-shadow-pop: 0 12px 32px rgba(16,24,40,.14); --wc-ease: cubic-bezier(.2,.8,.2,1); --wc-rail: 76px; } /* Dark theme is OPT-IN, via . * * Deliberately not keyed to prefers-color-scheme. WOCOM Meet has to read as one * branded product, and following the viewer's OS setting meant the same build * looked white-and-purple in one browser and near-black in another purely * because of a system preference — which reads as a broken theme, not a feature. * The brand look is the default everywhere; dark is a choice someone makes. */ :root[data-theme="dark"] { --wc-ink: #F3F4F6; --wc-ink-2: #D1D5DB; --wc-muted: #9CA3AF; --wc-muted-2: #6B7280; --wc-line: #262A35; --wc-surface: #171A22; --wc-bg: #0F1117; --wc-bg-2: #12151C; --wc-shell: #0A0C11; --wc-primary: #9B59FF; --wc-primary-soft: #2A1B45; --wc-primary-tint: #1D1430; --wc-shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { height: 100%; } body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--wc-ink); background: var(--wc-bg); -webkit-font-smoothing: antialiased; } a { color: var(--wc-primary); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--wc-primary); outline-offset: 2px; border-radius: 4px; } /* ---------- brand mark ---------------------------------------------------- */ .wc-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; } .wc-logo__mark { width: 34px; height: 34px; border-radius: 10px; background: var(--wc-ai-grad); display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 4px 12px rgba(123,47,242,.35); flex: none; } .wc-logo__text { font-size: 17px; } .wc-logo__text span { color: var(--wc-primary); } /* ---------- buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid transparent; border-radius: var(--wc-radius-ctl); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .16s var(--wc-ease), transform .16s var(--wc-ease), box-shadow .16s var(--wc-ease), border-color .16s var(--wc-ease); white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--wc-primary); color: #fff; box-shadow: 0 2px 8px rgba(123,47,242,.28); } .btn--primary:hover { background: var(--wc-primary-hover); } .btn--ghost { background: transparent; border-color: var(--wc-line); color: var(--wc-ink); } .btn--ghost:hover { background: var(--wc-bg-2); border-color: var(--wc-muted-2); } .btn--soft { background: var(--wc-primary-tint); color: var(--wc-primary-active); } .btn--soft:hover { background: var(--wc-primary-soft); } .btn--danger { background: var(--wc-danger); color: #fff; } .btn--danger:hover { filter: brightness(.94); } .btn--block { width: 100%; } .btn--sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ---------- form fields --------------------------------------------------- */ .field { display: grid; gap: 6px; margin-bottom: 16px; } .field label { font-size: 13px; font-weight: 600; color: var(--wc-ink-2); } .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=datetime-local], .field input[type=number], .field select { width: 100%; padding: 11px 13px; border: 1px solid var(--wc-line); border-radius: var(--wc-radius-ctl); background: var(--wc-surface); color: var(--wc-ink); transition: border-color .16s var(--wc-ease), box-shadow .16s var(--wc-ease); } .field input:focus, .field select:focus { outline: none; border-color: var(--wc-primary); box-shadow: 0 0 0 3px var(--wc-primary-soft); } .field__hint { font-size: 12px; color: var(--wc-muted); } .field__error { font-size: 13px; color: var(--wc-danger); font-weight: 500; } .check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--wc-ink-2); cursor: pointer; } .check input { width: 17px; height: 17px; accent-color: var(--wc-primary); cursor: pointer; } /* ---------- cards & chrome ------------------------------------------------ */ .card { background: var(--wc-surface); border: 1px solid var(--wc-line); border-radius: var(--wc-radius-card); box-shadow: var(--wc-shadow-card); } .card__pad { padding: 22px; } .card__title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--wc-radius-pill); font-size: 12px; font-weight: 600; line-height: 1.4; } .badge--plan { background: var(--wc-primary-tint); color: var(--wc-primary-active); } .badge--live { background: var(--wc-success-soft); color: #047857; } .badge--muted { background: var(--wc-bg-2); color: var(--wc-muted); border: 1px solid var(--wc-line); } .badge--warn { background: var(--wc-warning-soft); color: #92400E; } .badge--danger { background: var(--wc-danger-soft); color: #B91C1C; } .alert { padding: 12px 16px; border-radius: var(--wc-radius-ctl); font-size: 14px; margin-bottom: 18px; background: var(--wc-success-soft); color: #065F46; border: 1px solid rgba(16,185,129,.25); } /* ========================================================================== Login ========================================================================== */ .auth { min-height: 100%; display: grid; grid-template-columns: 1fr; background: radial-gradient(1100px 500px at 12% -8%, var(--wc-primary-soft), transparent 62%), var(--wc-bg); } @media (min-width: 940px) { .auth { grid-template-columns: 1.05fr .95fr; } } .auth__aside { display: none; padding: 56px; align-content: center; gap: 26px; } @media (min-width: 940px) { .auth__aside { display: grid; } } .auth__headline { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; max-width: 15ch; } .auth__headline em { font-style: normal; color: var(--wc-primary); } .auth__sub { color: var(--wc-muted); max-width: 46ch; font-size: 16px; } .auth__points { display: grid; gap: 12px; margin-top: 4px; } .auth__point { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--wc-ink-2); } .auth__point b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--wc-primary-tint); color: var(--wc-primary); font-size: 12px; } .auth__panel { display: grid; place-items: center; padding: 28px 20px 48px; } .auth__box { width: 100%; max-width: 412px; } .auth__box h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 22px 0 4px; } .auth__box p.lede { color: var(--wc-muted); font-size: 14px; margin-bottom: 22px; } .demo-users { margin-top: 22px; } .demo-users__head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wc-muted); margin-bottom: 9px; } .demo-user { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 11px; margin-bottom: 6px; cursor: pointer; background: var(--wc-surface); border: 1px solid var(--wc-line); border-radius: var(--wc-radius-ctl); transition: border-color .14s var(--wc-ease), background .14s var(--wc-ease); } .demo-user:hover { border-color: var(--wc-primary); background: var(--wc-primary-tint); } .demo-user[disabled] { opacity: .55; cursor: not-allowed; } .demo-user[disabled]:hover { border-color: var(--wc-line); background: var(--wc-surface); } .demo-user__name { font-size: 13.5px; font-weight: 600; } .demo-user__meta { font-size: 12px; color: var(--wc-muted); } .demo-user__right { margin-left: auto; display: flex; gap: 6px; align-items: center; } .avatar { width: 34px; height: 34px; border-radius: var(--wc-radius-pill); display: grid; place-items: center; flex: none; background: var(--wc-primary-soft); color: var(--wc-primary-active); font-size: 12px; font-weight: 700; letter-spacing: .02em; } .avatar--lg { width: 42px; height: 42px; font-size: 14px; } /* ========================================================================== App shell — left rail + content (concept design) ========================================================================== */ .shell { display: flex; min-height: 100vh; background: var(--wc-bg); } .rail { width: var(--wc-rail); flex: none; background: var(--wc-surface); border-right: 1px solid var(--wc-line); display: flex; flex-direction: column; align-items: center; padding: 18px 0; gap: 8px; position: sticky; top: 0; height: 100vh; } .rail__avatar { position: relative; margin-bottom: 14px; } .rail__dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--wc-success); border: 2.5px solid var(--wc-surface); } .rail__item { width: 44px; height: 44px; border-radius: 14px; border: 0; background: transparent; color: var(--wc-muted); display: grid; place-items: center; cursor: pointer; transition: background .16s var(--wc-ease), color .16s var(--wc-ease); } .rail__item:hover { background: var(--wc-bg-2); color: var(--wc-ink); } .rail__item.is-active { background: var(--wc-primary); color: #fff; box-shadow: 0 4px 12px rgba(123,47,242,.34); } .rail__spacer { flex: 1; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 16px; padding: 20px 26px; border-bottom: 1px solid var(--wc-line); background: var(--wc-surface); } .topbar__date { font-size: 12px; color: var(--wc-muted); } .topbar__title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; } .topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .content { padding: 26px; max-width: 1360px; width: 100%; } /* ---------- dashboard ----------------------------------------------------- */ .grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; } @media (min-width: 1020px) { .grid-2 { grid-template-columns: minmax(0,1.6fr) minmax(320px,1fr); } } .meeting-row { display: flex; align-items: center; gap: 15px; padding: 15px 18px; border-bottom: 1px solid var(--wc-line); } .meeting-row:last-child { border-bottom: 0; } .meeting-row__icon { width: 42px; height: 42px; border-radius: 13px; flex: none; background: var(--wc-primary-tint); color: var(--wc-primary); display: grid; place-items: center; } .meeting-row__body { min-width: 0; flex: 1; } .meeting-row__title { font-weight: 650; font-size: 14.5px; } .meeting-row__meta { font-size: 12.5px; color: var(--wc-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .meeting-row__actions { display: flex; gap: 8px; align-items: center; flex: none; } .code-chip { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; padding: 3px 9px; border-radius: 8px; background: var(--wc-bg-2); border: 1px solid var(--wc-line); color: var(--wc-ink-2); } .empty { padding: 44px 22px; text-align: center; color: var(--wc-muted); } .empty__icon { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 14px; background: var(--wc-primary-tint); color: var(--wc-primary); display: grid; place-items: center; } .plan-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: 13.5px; } .plan-row + .plan-row { border-top: 1px solid var(--wc-line); } .plan-row__label { color: var(--wc-ink-2); } .plan-row__value { font-weight: 650; } .plan-row__value.is-off { color: var(--wc-muted-2); font-weight: 500; } /* ========================================================================== Meeting room — the concept screen ========================================================================== */ .room { min-height: 100vh; background: var(--wc-shell); padding: 18px; display: flex; gap: 18px; } @media (max-width: 1080px) { .room { flex-direction: column; padding: 12px; } } .room__stage { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .room__head { display: flex; align-items: flex-start; gap: 14px; } .room__head .topbar__right { margin-left: auto; } .filmstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 14px; } .filmstrip:empty { display: none; } .tile { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--wc-radius-tile); background: #11131a; border: 2px solid transparent; transition: border-color .18s var(--wc-ease); } .tile.is-speaking { border-color: var(--wc-primary); } .tile video { width: 100%; height: 100%; object-fit: cover; display: block; } .tile__placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(140deg, #232734, #171a22); } .tile__initials { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.10); color: #fff; font-size: 20px; font-weight: 700; border: 1.5px solid rgba(255,255,255,.16); } .tile__name { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--wc-radius-pill); background: rgba(15,17,23,.55); backdrop-filter: blur(9px); color: #fff; font-size: 12.5px; font-weight: 600; max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile__mic { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,17,23,.55); backdrop-filter: blur(9px); color: #fff; } .tile__mic.is-muted { background: rgba(237,100,100,.9); } .stage { position: relative; flex: 1; min-height: 320px; border-radius: var(--wc-radius-card); overflow: hidden; background: #11131a; } .stage video { width: 100%; height: 100%; object-fit: cover; } /* control bar — floating pill, per concept */ .controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-radius: var(--wc-radius-pill); background: var(--wc-surface); box-shadow: var(--wc-shadow-pop); } .controls__group { display: flex; align-items: center; gap: 10px; } .controls__center { flex: 1; justify-content: center; } .timer { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--wc-radius-pill); border: 1px solid var(--wc-line); color: var(--wc-ink-2); font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; } .timer.is-warning { border-color: var(--wc-warning); color: var(--wc-warning); background: var(--wc-warning-soft); } .timer.is-critical { border-color: var(--wc-danger); color: #fff; background: var(--wc-danger); } .ctl { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--wc-line); background: var(--wc-surface); color: var(--wc-ink-2); display: grid; place-items: center; cursor: pointer; transition: background .16s var(--wc-ease), color .16s var(--wc-ease), border-color .16s var(--wc-ease), transform .16s var(--wc-ease); } .ctl:hover { background: var(--wc-bg-2); } .ctl:active { transform: scale(.94); } .ctl.is-on { background: var(--wc-primary); border-color: var(--wc-primary); color: #fff; box-shadow: 0 4px 12px rgba(123,47,242,.34); } .ctl.is-off { background: var(--wc-danger-soft); border-color: transparent; color: #B91C1C; } .ctl--end { background: var(--wc-danger); border-color: var(--wc-danger); color: #fff; } .ctl--end:hover { background: var(--wc-danger); filter: brightness(.93); } /* right column */ .room__side { width: 336px; flex: none; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 36px); overflow-y: auto; } @media (max-width: 1080px) { .room__side { width: auto; max-height: none; } } .toggle-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; } .toggle-row + .toggle-row { border-top: 1px solid var(--wc-line); } .toggle-row__icon { width: 26px; height: 26px; display: grid; place-items: center; color: var(--wc-ai); flex: none; } .toggle-row__label { font-size: 14px; font-weight: 550; flex: 1; } .switch { position: relative; width: 42px; height: 24px; flex: none; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; } .switch__track { position: absolute; inset: 0; border-radius: var(--wc-radius-pill); background: var(--wc-line); transition: background .2s var(--wc-ease); } .switch__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .2s var(--wc-ease); } .switch input:checked ~ .switch__track { background: var(--wc-primary); } .switch input:checked ~ .switch__thumb { transform: translateX(18px); } .switch input:disabled ~ .switch__track { opacity: .45; } .switch input:disabled { cursor: not-allowed; } .ai-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; } .ai-title__spark { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--wc-ai-grad); color: #fff; } .ai-points { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 9px; } .ai-points li { position: relative; padding-left: 17px; font-size: 13.5px; color: var(--wc-ink-2); } .ai-points li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--wc-muted-2); } .ai-points li.is-pending { color: var(--wc-muted-2); } .segmented { display: flex; gap: 6px; padding: 4px; margin-bottom: 12px; background: var(--wc-bg-2); border-radius: var(--wc-radius-pill); } .segmented button { flex: 1; padding: 8px 12px; border: 0; border-radius: var(--wc-radius-pill); background: transparent; color: var(--wc-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .16s var(--wc-ease), color .16s var(--wc-ease); } .segmented button.is-active { background: #282828; color: #fff; } :root[data-theme="dark"] .segmented button.is-active { background: var(--wc-primary); } /* ---------- unsupported browser ------------------------------------------ */ .unsupported { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--wc-bg); padding: 24px; text-align: center; } .unsupported__box { max-width: 460px; } .unsupported h2 { font-size: 22px; font-weight: 800; margin: 18px 0 8px; letter-spacing: -.02em; } .unsupported p { color: var(--wc-muted); font-size: 14.5px; margin-bottom: 18px; } .unsupported ul { list-style: none; padding: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .unsupported li { padding: 6px 13px; border-radius: var(--wc-radius-pill); background: var(--wc-primary-tint); color: var(--wc-primary-active); font-size: 13px; font-weight: 600; } .participant { display: flex; align-items: center; gap: 11px; padding: 9px 0; } .participant + .participant { border-top: 1px solid var(--wc-line); } .participant__name { font-size: 13.5px; font-weight: 600; } .participant__handle { font-size: 12px; color: var(--wc-muted); } .participant__state { margin-left: auto; display: flex; gap: 8px; color: var(--wc-muted-2); } .participant__state .is-muted { color: var(--wc-danger); } .chat-log { display: grid; gap: 12px; max-height: 260px; overflow-y: auto; margin-bottom: 12px; } .chat-msg__who { font-size: 12px; font-weight: 700; color: var(--wc-primary); } .chat-msg__body { font-size: 13.5px; color: var(--wc-ink-2); overflow-wrap: anywhere; } .chat-form { display: flex; gap: 8px; } .chat-form input { flex: 1; padding: 10px 13px; border: 1px solid var(--wc-line); border-radius: var(--wc-radius-ctl); background: var(--wc-surface); } .chat-form input:focus { outline: none; border-color: var(--wc-primary); box-shadow: 0 0 0 3px var(--wc-primary-soft); } /* limit banner + toasts */ .limit-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--wc-radius-ctl); font-size: 13.5px; font-weight: 550; background: var(--wc-warning-soft); color: #92400E; border: 1px solid rgba(217,119,6,.28); } .limit-banner.is-critical { background: var(--wc-danger-soft); color: #B91C1C; border-color: rgba(237,100,100,.4); } .limit-banner .btn { margin-left: auto; } .toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; gap: 10px; max-width: 340px; } .toast { padding: 13px 16px; border-radius: var(--wc-radius-ctl); background: var(--wc-surface); box-shadow: var(--wc-shadow-pop); border-left: 4px solid var(--wc-primary); font-size: 13.5px; animation: toast-in .26s var(--wc-ease); } .toast--warn { border-left-color: var(--wc-warning); } .toast--danger { border-left-color: var(--wc-danger); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(15,17,23,.72); backdrop-filter: blur(6px); padding: 20px; } .overlay__box { max-width: 420px; width: 100%; text-align: center; padding: 34px 28px; } .overlay__box h2 { font-size: 21px; font-weight: 800; margin-bottom: 8px; letter-spacing: -.02em; } .overlay__box p { color: var(--wc-muted); font-size: 14px; margin-bottom: 20px; } .conn-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--wc-muted); font-weight: 550; } .conn-state__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wc-muted-2); } .conn-state.is-connected .conn-state__dot { background: var(--wc-success); } .conn-state.is-error .conn-state__dot { background: var(--wc-danger); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }