/* Public site (landing + pricing). Clean white, always light. */ .landing { --text: #0a0a0a; --muted: #6b6b6b; --line: #ececec; --bg: #fff; --soft: #f3f3f2; --card: #f7f7f5; --blue: #0a0a0a; background: #fff; color: var(--text); min-height: 100vh; overflow-x: clip; font-family: "Google Sans", Inter, -apple-system, system-ui, sans-serif; } .landing .muted { color: var(--muted); } .landing a { color: inherit; } /* ---------- nav ---------- */ .s-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 28px; padding: 14px 64px 14px 120px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; } .s-nav.scrolled { border-bottom-color: var(--line); } .s-links { display: flex; align-items: center; gap: 4px; } .s-links > a, .s-dd > button { color: var(--text); text-decoration: none; font-size: 15px; background: none; border: 0; padding: 8px 12px; border-radius: 10px; display: flex; align-items: center; gap: 2px; font-family: inherit; cursor: pointer; } .s-links > a:hover, .s-dd > button:hover, .s-dd.open > button { color: #000; } .s-dd > button .ms { font-size: 18px; transition: transform .2s; } .s-dd.open > button .ms { transform: rotate(180deg); } .s-dd { position: relative; } .s-menu { position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.10); opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top left; transition: opacity .16s, transform .16s, visibility .16s; min-width: 210px; } .s-dd.open .s-menu { opacity: 1; visibility: visible; transform: none; } .s-menu.list a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; font-size: 14px; text-decoration: none; color: var(--text); } .s-menu.list a:hover { background: var(--soft); } .s-menu.list a .ms { font-size: 14px; color: var(--muted); } .s-menu.list .sep { height: 1px; background: var(--line); margin: 4px 6px; } .s-menu.list a.small { font-size: 13px; } /* products mega menu */ .s-menu.mega { display: grid; grid-template-columns: 220px 330px; gap: 6px; padding: 8px; min-width: 0; } .mega-list a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); } .mega-list a b { display: block; font-weight: 500; font-size: 14px; } .mega-list a small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 2px; } .mega-list a.on { background: var(--soft); } .mega-prev { background: var(--card); border-radius: 12px; overflow: hidden; position: relative; min-height: 270px; } .mega-prev > div { position: absolute; inset: 0; padding: 14px; opacity: 0; transition: opacity .2s; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; } .mega-prev > div.on { opacity: 1; } .mega-prev .b { font-size: 12px; padding: 8px 12px; } .mega-prev .p-term { background: #161616; color: #d4d4d4; font: 11px/1.7 ui-monospace, Menlo, monospace; justify-content: flex-start; } .mega-prev .p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: center; } .mega-prev .p-grid span { aspect-ratio: 16/10; border-radius: 8px; background: #e7e7e4; display: grid; place-items: center; } .mega-prev .p-grid span i { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 13px; } .mega-prev .p-cap { justify-content: center; align-items: center; } .s-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; } .split { display: flex; background: #0a0a0a; border-radius: 999px; position: relative; } .split > a { border-radius: 999px 0 0 999px; padding-right: 16px; } .split > button { background: none; border: 0; border-left: 1px solid #333; color: #fff; padding: 0 12px; cursor: pointer; border-radius: 0 999px 999px 0; display: grid; place-items: center; } .split .s-menu { right: 0; left: auto; top: calc(100% + 8px); transform-origin: top right; } /* ---------- pills ---------- */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 20px; border-radius: 999px; border: 0; font-size: 15px; font-weight: 500; font-family: inherit; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s; white-space: nowrap; } .pill.black { background: #0a0a0a; color: #fff !important; } .pill.black:hover { background: #2a2a2a; } .pill.grey { background: var(--soft); color: var(--text); } .pill.grey:hover { background: #e9e9e7; } .pill.outline { background: #fff; border: 1px solid #d9d9d9; color: var(--text); } .pill.outline:hover { background: var(--soft); } .pill.big { height: 54px; padding: 0 28px; font-size: 17px; } .pill.wide { width: 100%; height: 40px; font-size: 14px; } .pill:active { transform: scale(.98); } .pill:disabled { opacity: .45; cursor: default; } .pill .ms { font-size: 20px; } @keyframes lineIn { from { transform: scaleX(0); } } @keyframes blurIn { from { opacity: 0; filter: blur(10px); transform: translateY(8px); } } @keyframes blurOut { to { opacity: 0; filter: blur(10px); transform: translateY(-6px); } } .l-join { display: flex; justify-content: center; gap: 10px; margin-top: 16px; animation: blurIn .3s both; } .l-join .code-input { border: 1px solid var(--line); background: #fff; border-radius: 999px; max-width: 300px; height: 42px; } .l-join .code-input input { color: var(--text); } @keyframes chatUp { to { transform: translateY(-55%); } } .b { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.45; background: #ebebe8; } .b.me { align-self: flex-end; } .b.ai { align-self: flex-start; } .b i { color: #5a5ad6; font-style: normal; font-size: 12px; } .d { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .d.r { background: #ff5f57; } .d.y { background: #febc2e; } .d.g { background: #28c840; } .t-dim { color: #8a8a8a; } .t-fn { color: #4ec9b0; } .t-ok { color: #9cdcfe; } @keyframes dot { 50% { transform: translateY(-4px); opacity: .5; } } @keyframes breathe2 { 50% { transform: scale(1.04); } } .frame { position: relative; padding: 36px; border-radius: 4px; background: radial-gradient(circle at 80% 10%, #c2410c, transparent 55%), linear-gradient(135deg, #fdf2ec, #fb923c 45%, #c2410c); } .frame .c { position: absolute; width: 12px; height: 12px; background: #fff; } .c.tl { left: -6px; top: -6px; } .c.tr { right: -6px; top: -6px; } .c.bl { left: -6px; bottom: -6px; } .c.br { right: -6px; bottom: -6px; } .copy { margin-left: auto; border: 0; background: none; color: var(--muted); font: 12px inherit; font-family: inherit; display: flex; align-items: center; gap: 4px; cursor: pointer; } .copy .ms { font-size: 14px; } /* ---------- news ---------- */ .l-news { margin-top: 110px; } /* ---------- footer ---------- */ .s-foot { max-width: 1280px; margin: 140px auto 0; padding: 48px 48px 60px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 260px 1fr; gap: 40px; } .s-foot .word { font-size: 18px; letter-spacing: .35em; font-weight: 500; text-transform: uppercase; } /* ---------- pricing ---------- */ .pr-main { max-width: 1280px; margin: 0 auto; padding: 90px 48px 0; text-align: center; } .seg-pill { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; } .seg-pill button { border: 0; background: none; border-radius: 999px; padding: 7px 16px; font: 14px inherit; font-family: inherit; color: var(--muted); cursor: pointer; } .seg-pill button.on { background: #0a0a0a; color: #fff; } .landing .billing-toggle { margin: 18px auto 0; display: flex; justify-content: center; border: 0; } .landing .billing-toggle button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font: 13px inherit; font-family: inherit; color: var(--muted); cursor: pointer; } .landing .billing-toggle button.on { background: var(--soft); color: var(--text); } .pr-note { margin: 18px auto 0; font-size: 13px; color: var(--muted); } .pr-cards { display: flex; justify-content: center; gap: 16px; margin-top: 64px; text-align: left; flex-wrap: wrap; } .compare { margin-top: 120px; } .compare h2 { font-size: 28px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 34px; } .cmp-wrap { overflow-x: auto; } .cmp { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; } .cmp thead th { position: sticky; top: 66px; background: #fff; z-index: 2; padding: 10px 8px 14px; text-align: center; font-weight: 500; border-bottom: 1px solid var(--line); } .cmp thead th:first-child { text-align: left; } .cmp thead .pill { height: 32px; font-size: 12px; width: 100%; margin-top: 8px; } .cmp td { padding: 14px 8px; border-bottom: 1px solid var(--line); text-align: center; color: #222; } .cmp td:first-child { text-align: left; } .cmp td.no { color: #c8c8c8; } .cmp tr.grp td { font-weight: 500; padding-top: 22px; } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; } .reveal.in { opacity: 1; transform: none; filter: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } @keyframes blink { 50% { opacity: 0; } } .page > .card, .page-head { animation: cardIn .45s cubic-bezier(.2,.7,.2,1) both; } @keyframes cardIn { from { opacity: 0; transform: translateY(10px); } } @media (max-width: 1100px) { .s-nav { padding: 12px 24px; } .pr-main { padding-left: 24px; padding-right: 24px; } .s-foot { grid-template-columns: 1fr; } } @media (max-width: 760px) { .s-links, .s-actions .pill.grey { display: none; } } @media (prefers-reduced-motion: reduce) { .landing *{ animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; filter: none; } } .mark { width: 44px; height: 26px; } .s-nav { padding-left: 64px; } .into-btn { border: 1px solid var(--line) !important; border-radius: 999px !important; padding: 8px 14px !important; color: var(--text); font-size: 15px; } .auth-btn { position: relative; height: 56px; border-radius: 999px; border: 1px solid #dcdcdc; background: #fff; color: var(--text); font: 500 16px inherit; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: background .15s, border-color .15s; } .auth-btn:hover { background: #fafafa; border-color: #c9c9c9; } .auth-btn .ic { width: 22px; height: 22px; font-size: 22px; } .auth-btn.last::before { content: ""; position: absolute; inset: -6px; border-radius: 999px; padding: 2px; background: conic-gradient(from var(--a, 0deg), transparent 0 30%, #f6851f 38%, #ffb36b 44%, transparent 52% 80%, #f6851f 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: orbit 3.5s linear infinite; } @property --a { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes orbit { to { --a: 360deg; } } .auth-back { border: 0; background: none; color: var(--muted); font: 14px inherit; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 8px; } .auth-back .ms { font-size: 16px; } .auth-last { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 15px; margin: 30px 0 0; } .auth-last .ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #f6851f; border-right-color: transparent; border-left-color: #ffd0a8; animation: spin 1.4s linear infinite; } .auth-msg { color: #b45309; font-size: 14px; min-height: 1em; margin-top: 16px; } /* ===================== Signed-in app: same look as the public site ===================== */ #app, #modal, #lobby, #endedView, #waitingView { --text: #0a0a0a; --muted: #6b6b6b; --line: #ececec; --bg: #fff; --surface: #f7f7f5; --surface-2: #fff; --hover: #f1f1ef; --sel: #f1f1ef; --sel-text: #0a0a0a; --blue: #0a0a0a; --panel: #fff; --panel-text: #0a0a0a; --green: #2f9e44; --red: #e03131; color-scheme: light; color: var(--text); font-family: "Google Sans", Inter, -apple-system, system-ui, sans-serif; } #app, #lobby, #endedView, #waitingView { background: #fff; } #app a { color: inherit; } /* header */ #app .app-top { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); height: 64px; } #app .wordmark b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; } #app .app-top .brand { min-width: 180px; } #app .search-box { background: #f3f3f2; border-radius: 999px; height: 44px; } #app .search-box:focus-within { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgba(0,0,0,.06); } #app .avatar-btn .av { background: #0a0a0a !important; } #app .popover { border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.10); border-radius: 16px; } #app .badge, #app .nav-count { background: #0a0a0a; color: #fff; } #app .notif.unread { border-left-color: #0a0a0a; background: #fafaf9; } /* sidebar */ #app .sidenav { background: #fff; padding-top: 14px; } #app .sidenav a { border-radius: 999px; margin: 0 12px; padding: 0 16px; height: 40px; font-weight: 400; font-size: 15px; gap: 14px; color: #333; } #app .sidenav a .ms { font-size: 20px; color: #555; } #app .sidenav a:hover { background: #f3f3f2; } #app .sidenav a.active { background: #0a0a0a; color: #fff; } #app .sidenav a.active .ms { color: #fff; } #app .tier-badge { margin: 0 0 10px 28px; } #app .page { padding: 28px 40px 60px 24px; } /* typography */ #app .page-head h1, #app .md-head h1 { font-size: 34px; font-weight: 500; letter-spacing: -.02em; } #app .card h2 { font-size: 17px; font-weight: 500; } #app .memory-hero h1 { font-size: 40px; font-weight: 500; letter-spacing: -.02em; } /* cards */ #app .card, #app .kpi, #app .cal-grid{ background: var(--surface); border-radius: 18px; border: 0; box-shadow: none; } #app .kpi { background: #fff; } #app .card .card, #app .draft { background: #fff; border: 1px solid var(--line); } #app .row-item.link:hover, #app .agenda-item:hover { background: #fff; } #app .row-item .ic, #app .note-sec h3 .ms, #app .kind .ms, #app .big-ic, #app .ai-ic, #app .upsell .ms { color: #0a0a0a; } #app .bar, #app .meter span, #app .share-bar span { background: #0a0a0a; } /* buttons → pills */ #app .btn, #modal .btn { border-radius: 999px; font-weight: 500; text-decoration: none; } #app .btn.primary, #modal .btn.primary { background: #0a0a0a; color: #fff; } #app .btn.primary:hover, #modal .btn.primary:hover { background: #2a2a2a; box-shadow: none; } #app .btn.outline, #modal .btn.outline { background: #fff; border: 1px solid #d9d9d9; color: #0a0a0a; } #app .btn.outline:hover, #modal .btn.outline:hover { background: #f3f3f2; } #app .btn.text, #modal .btn.text { color: #0a0a0a; } #app .btn.text:hover, #modal .btn.text:hover { background: #f3f3f2; } #app .btn.big { height: 52px; padding: 0 26px; } #app .btn.danger, #app .danger { color: #e03131 !important; } /* inputs */ #app .code-input, #app .search-inline { border: 1px solid var(--line); border-radius: 999px; background: #fff; } #app .code-input:focus-within { border: 1px solid #0a0a0a; padding: 0 14px; } #app .form-grid input, #app .form-grid select, #app .form-grid textarea, #app .inline-form input, #app .inline-form select, #app .page select, #modal input, #modal select, #modal textarea { border-radius: 12px; border-color: #dcdcdc; background: #fff; color: #0a0a0a; } #app input:focus, #app textarea:focus, #app select:focus, #modal input:focus, #modal textarea:focus { outline: 0; border-color: #0a0a0a !important; box-shadow: 0 0 0 3px rgba(0,0,0,.06); } #app .switch-row input:checked + .switch { background: #0a0a0a; } /* tags, chips, tabs */ #app .tag, #app .ai-tag, #app .tag.ai { background: #fff; color: #333; border: 1px solid var(--line); } #app .tag.live { background: #e03131; color: #fff; border: 0; } #app .chip { border-radius: 999px; background: #fff; } #app .chip:hover { border-color: #0a0a0a; background: #fff; } #app .seg a { border-radius: 999px; background: #fff; } #app .seg a.on, #app .admin-nav a.on { background: #0a0a0a; color: #fff; border-color: #0a0a0a; } #app .admin-nav a.on .ms { color: #fff; } #app .tabs { border-bottom: 1px solid var(--line); } #app .tab.on { color: #0a0a0a; border-bottom-color: #0a0a0a; } #app .upsell { background: #fff; border: 1px solid var(--line); } #app button.ts, #app a.ts, #app .ts-btn { color: #5a5ad6; } #app .cal-cell.today .cal-num { background: #0a0a0a; } #app .cal-ev { background: #0a0a0a; } #app .cal-ev.org { background: #555; } #app .tier-badge { color: var(--muted); } #app .person-chip { background: #fff; border: 1px solid var(--line); } #app .task-row.proposed { background: #fff; border: 1px solid var(--line); } #app .check-anim { background: #0a0a0a; } #app .plan-opt.on, #app .opt:has(input:checked) { border-color: #0a0a0a; background: #fff; } #app .co-step.on b { background: #0a0a0a; } #app .test-banner { background: #fff; border: 1px solid var(--line); } /* modal + toast */ #modal .modal-card { background: #fff; color: #0a0a0a; border-radius: 22px; } #lobby .btn.primary { background: #0a0a0a; border-radius: 999px; } #lobby .field { border-radius: 14px; border-color: #dcdcdc; color: #0a0a0a; } #lobby .device-row select { color: #0a0a0a; } #lobby .brand b, #lobbyBrand { font-weight: 500; } /* ===================== App v3: rail + composer (reference style) ===================== */ #app { --surface: #fff; background: #f8f8f6; grid-template-rows: 1fr; grid-template-columns: 240px 1fr; } #app .app-top { display: none; } #app .sidenav { grid-row: 1; top: 0; height: 100vh; background: #f8f8f6; border-right: 1px solid #ededeb; padding: 10px 0 14px; gap: 4px; } #app .page { grid-row: 1; padding: 0 40px 60px; position: relative; min-height: 100vh; } .rail-top { padding: 8px 14px 14px; } .rail-top .icon-btn { width: 40px; height: 40px; border-radius: 10px; color: #333; } .rail-top .icon-btn:hover { background: #ececea; } .rail-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 14px 0; } .rail-bottom .icon-btn { width: 40px; height: 40px; border-radius: 10px; color: #333; } .rail-bottom .popover { top: auto; bottom: 0; left: 52px; right: auto; } #app .sidenav a { height: 42px; border-radius: 12px; margin: 0 14px; font-size: 14px; color: #222; } #app .sidenav a .ms { font-size: 21px; color: #333; font-variation-settings: "wght" 350; } #app .sidenav a:hover { background: #ececea; } #app .sidenav a.active { background: #ececea; color: #0a0a0a; } #app .sidenav a.active .ms { color: #0a0a0a; } #app .tier-badge{ display: none; } #app .org-card { display: none; } @media (min-width: 801px) { body.nav-collapsed #app { grid-template-columns: 72px 1fr; } body.nav-collapsed #app .sidenav a { width: 44px; margin: 0 14px; padding: 0; justify-content: center; font-size: 0; gap: 0; } body.nav-collapsed .rail-bottom { align-items: center; padding: 8px 0 0; } body.nav-collapsed .rail-top { padding: 8px 0 14px; display: flex; justify-content: center; } } @media (max-width: 800px) { #app { grid-template-columns: 1fr; } #app .sidenav { position: fixed; z-index: 30; width: 240px; } .rail-top { position: fixed; top: 6px; left: 6px; z-index: 31; } body.nav-open .rail-top { position: static; } #app .page { padding: 56px 16px 40px; } } /* home */ .home-top { position: absolute; top: 18px; right: 28px; display: flex; gap: 6px; } .top-pill { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: #333; font: 15px inherit; font-family: inherit; padding: 8px 12px; border-radius: 10px; cursor: pointer; text-decoration: none; } .top-pill:hover { background: #ececea; } .top-pill .ms { font-size: 20px; } .home-hero { max-width: 760px; margin: 0 auto; padding-top: 18vh; text-align: center; } .home-hero h1 { font-size: 30px; font-weight: 500; letter-spacing: -.015em; margin: 0 0 34px; animation: blurIn .5s both; } .composer { background: #fff; border: 1px solid #e6e6e3; border-radius: 26px; padding: 16px 16px 12px 22px; text-align: left; box-shadow: 0 2px 10px rgba(0,0,0,.03); transition: box-shadow .2s, border-color .2s; animation: blurIn .5s .08s both; } .composer:focus-within { border-color: #d5d5d2; box-shadow: 0 8px 30px rgba(0,0,0,.06); } .composer textarea { width: 100%; border: 0; outline: 0; resize: none; font: 17px/1.5 inherit; font-family: inherit; color: #0a0a0a; background: none; min-height: 52px; } .composer textarea::placeholder { color: #b3b3b0; } .composer-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .c-icon { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: #333; display: grid; place-items: center; cursor: pointer; } .c-icon:hover { background: #f1f1ef; } .c-icon .ms { font-size: 24px; } .c-icon.on { color: #e03131; } .c-mode { display: flex; align-items: center; gap: 4px; border: 0; background: none; font: 15px inherit; font-family: inherit; color: #333; padding: 8px 12px; border-radius: 12px; cursor: pointer; } .c-mode:hover { background: #f1f1ef; } .c-mode .ms { font-size: 20px; } .c-go { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #f1f1ef; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s; } .c-go:hover { background: #e9e9e6; transform: scale(1.04); } @keyframes wv { 50% { transform: scaleY(.55); } } .composer .popover.up { top: auto; bottom: 48px; } .composer .popover .menu-item small { display: block; font-size: 12px; color: #6b6b6b; } .composer .popover .menu-item b { font-weight: 500; } @keyframes twinkle { 50% { opacity: .3; } } @media (max-width: 800px) { .home-top { top: 10px; right: 10px; } .home-hero { padding-top: 10vh; } } #app .page { padding-top: 28px; } /* ===================== App v4: exact reference styling ===================== */ #app { background: #f8f8f7; } body.nav-collapsed #app { grid-template-columns: 80px 1fr; } #app .sidenav { background: #f8f8f7; border-right: 1px solid #efefed; padding: 18px 0 18px; gap: 9px; } #app .sidenav .ms, .rail-top .ms, .rail-bottom .ms { font-variation-settings: "wght" 300, "opsz" 24; color: #262626; } .rail-top { padding: 4px 0 26px; display: flex; justify-content: center; } .rail-top .icon-btn, .rail-bottom .icon-btn { width: 52px; height: 52px; border-radius: 14px; } #app .sidenav a { height: 52px; border-radius: 14px; margin: 0 14px; font-size: 15px; color: #262626; gap: 14px; padding: 0 14px; } #app .sidenav a .ms { font-size: 24px; } #app .sidenav a:hover, .rail-top .icon-btn:hover { background: #efefed; } #app .sidenav a.active { background: #ebebe9; } body.nav-collapsed #app .sidenav a { width: 52px; margin: 0 14px; } .rail-bottom { gap: 12px; padding: 0; align-items: center; } .rail-bottom > a { width: auto; } body:not(.nav-collapsed) .rail-bottom { align-items: flex-start; padding-left: 14px; } #app .avatar-btn { padding: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; } .photo-av { display: block; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 78%, #ffd6e0 0 18%, transparent 19%), radial-gradient(circle at 35% 60%, #fff 0 14%, transparent 15%), radial-gradient(circle at 65% 62%, #fff 0 12%, transparent 13%), linear-gradient(180deg, #3b82f6 0%, #93c5fd 55%, #e0f2fe 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } #app .page { padding: 0 32px 40px; } /* top-right */ .home-top { top: 26px; right: 30px; gap: 26px; } .top-pill { font-size: 18px; color: #3a3a3a; gap: 10px; padding: 6px 4px; border-radius: 10px; font-weight: 500; } .top-pill:hover { background: transparent; color: #0a0a0a; } .top-pill .ms { font-size: 26px; font-variation-settings: "wght" 300; } .top-pill.on { color: #0a0a0a; } .top-pill.on .ms { font-variation-settings: "wght" 500, "FILL" 1; } .bot-ic { width: 25px; height: 25px; border-radius: 50%; background: conic-gradient(from 200deg, #3f3f3f 0 300deg, #fff 300deg 330deg, #3f3f3f 330deg); box-shadow: inset 0 0 0 1.5px #3f3f3f; } /* hero + composer */ .home-hero { max-width: 1070px; padding-top: 170px; } .home-hero h1 { font-size: 34px; font-weight: 600; letter-spacing: -.01em; color: #0d0d0d; margin: 0 0 50px; } .composer { border: 1px solid #e4e4e2; border-radius: 30px; padding: 24px 16px 14px 26px; box-shadow: none; background: #fff; } .composer:focus-within { border-color: #d9d9d6; box-shadow: none; } .composer.drag { border-color: #1d9bf0; background: #f5fbff; } .composer textarea { font-size: 21px; min-height: 32px; color: #0d0d0d; } .composer textarea::placeholder { color: #d0d0cd; } .composer-row { margin-top: 38px; gap: 14px; } .c-icon { width: 44px; height: 44px; color: #2b2b2b; } .c-icon .ms { font-size: 30px; font-variation-settings: "wght" 250; } #cmpMic .ms { font-size: 26px; font-variation-settings: "wght" 300; } .c-mode { font-size: 19px; color: #3a3a3a; gap: 10px; padding: 8px 10px; } .c-mode .ms { font-size: 24px; font-variation-settings: "wght" 300; } .c-go { width: 56px; height: 56px; background: #f2f2f2; } .drop-files { display: flex; flex-wrap: wrap; gap: 8px; } .drop-files:not(:empty) { margin-bottom: 12px; } .file-chip { display: flex; align-items: center; gap: 6px; background: #f3f3f2; border-radius: 10px; padding: 6px 6px 6px 10px; font-size: 13px; } .file-chip .ms { font-size: 16px; } .file-chip button { border: 0; background: none; cursor: pointer; color: #6b6b6b; font-size: 16px; } .composer .popover.up { bottom: 56px; } .composer label.menu-item { cursor: pointer; } @media (max-width: 1100px) { .home-hero { padding-top: 120px; } } @media (max-width: 800px) { .home-hero h1 { font-size: 26px; } } /* ===================== App v5: measured from the reference (screenshot px ÷ 1.4) ===================== */ body #app { font-family: Inter, -apple-system, system-ui, sans-serif; background: #f9f8f6; grid-template-columns: 57px 1fr; } body:not(.nav-collapsed) #app { grid-template-columns: 220px 1fr; } body #app .sidenav { background: #f9f8f6; border-right: 1px solid #eeedeb; padding: 14px 0 12px; gap: 3.7px; align-items: stretch; } body #app .rail-top { padding: 0 0 18px; display: flex; justify-content: flex-start; padding-left: 10px; } body #app .rail-top .icon-btn, body #app .sidenav a, body #app .rail-bottom > a { width: 37px; height: 37px; min-height: 37px; margin: 0 0 0 10px; padding: 0; border-radius: 9px; justify-content: center; gap: 0; font-size: 0; color: #2b2b2b; } body #app .rail-top .icon-btn { margin: 0; } body:not(.nav-collapsed) #app .sidenav a, body:not(.nav-collapsed) #app .rail-bottom > a { width: auto; margin-right: 10px; padding: 0 10px; justify-content: flex-start; gap: 12px; font-size: 14px; } body #app .ri { width: 18px; height: 18px; flex: none; color: #2b2b2b; } body #app .sidenav a:hover, body #app .rail-top .icon-btn:hover { background: #efeeec; } body #app .sidenav a.active { background: #efeeec; } body #app .rail-bottom { gap: 10px; padding: 0; align-items: flex-start; } body #app .rail-bottom .pop-wrap { margin-left: 13px; } body #app .avatar-btn, body #app .photo-av { width: 30px; height: 30px; } body #app .nav-count { position: absolute; font-size: 9px; margin: -20px 0 0 20px; padding: 0 4px; } body #app .page { padding: 0 24px 24px; } body #app .home-top { top: 22px; right: 31px; gap: 40px; } body #app .top-pill { font: 500 14px Inter, sans-serif; color: #3b3b3b; gap: 9px; padding: 4px 0; } body #app .top-pill .ri { width: 17px; height: 17px; color: #3b3b3b; } body #app .bot-ic { width: 17px; height: 17px; background: conic-gradient(from 160deg, #555 0 330deg, #fff 330deg 345deg, #555 345deg); box-shadow: none; } body #app .home-hero { max-width: 763px; padding-top: 122px; } body #app .home-hero h1 { font: 600 25px/1.2 Inter, sans-serif; letter-spacing: -.012em; color: #0d0d0d; margin: 0 0 34px; animation: none; } body #app .composer { border: 1px solid #e7e6e3; border-radius: 24px; padding: 19px 11px 11px 18px; min-height: 102px; animation: none; box-shadow: 0 1px 2px rgba(0,0,0,.02); } body #app .composer:focus-within { border-color: #dddcd9; } body #app .composer textarea { font: 400 16px/1.4 Inter, sans-serif; color: #0d0d0d; min-height: 22px; height: 22px; padding: 0; } body #app .composer textarea::placeholder { color: #8f8e8c; } body #app .composer-row { margin-top: 14px; gap: 8px; } body #app .c-icon { width: 32px; height: 32px; } body #app .c-icon .ri { width: 18px; height: 18px; color: #2b2b2b; } body #app #cmpPlus { margin-left: -6px; } body #app #cmpPlus .ri { width: 19px; height: 19px; } body #app .c-mode { font: 500 14px Inter, sans-serif; color: #3b3b3b; gap: 8px; padding: 6px 8px; margin-right: 22px; } body #app .c-mode .ri { width: 13px; height: 13px; color: #3b3b3b; } body #app #cmpMic { margin-right: 4px; } body #app .c-go { width: 40px; height: 40px; background: #f3f3f2; } body.nav-collapsed #app { grid-template-columns: 57px 1fr; } body.nav-collapsed #app .sidenav a, body.nav-collapsed #app .rail-bottom > a { width: 37px; margin: 0 0 0 10px; padding: 0; justify-content: center; } body.nav-collapsed #app .rail-top { padding-left: 10px; justify-content: flex-start; } body.nav-collapsed #app .rail-bottom { align-items: flex-start; } body #app .composer-row { margin-top: 8px; } body #app .home-top { gap: 34px; } body.nav-collapsed #app .rail-top, body #app .rail-top { padding-bottom: 7px; } body #app .sidenav { padding-bottom: 7px; } body #app .composer-row { margin-top: 4px; } body #app .c-mode { margin-right: 10px; } body #app .home-top { gap: 18px; } body #app .sidenav .ri, body #app .rail-top .ri { width: 22px; height: 22px; color: #5b5b5b; } body #app .sidenav .ri [stroke-width="2.6"] { stroke-width: 2.6; } body #app .photo-av { background: radial-gradient(ellipse at 50% 85%, #ffd4dc 0 22%, transparent 23%), radial-gradient(ellipse at 45% 62%, #fff 0 16%, transparent 17%), linear-gradient(180deg, #4a90e2 0%, #8ec5f5 50%, #dff0ff 100%); } /* ===================== Upgrade overlay (measured from reference ÷ 1.4) ===================== */ .upv { position: fixed; inset: 0; z-index: 70; background: #f9f8f6; color: #0d0d0d; overflow-y: auto; font-family: Inter, -apple-system, system-ui, sans-serif; color-scheme: light; animation: upIn .25s ease both; } @keyframes upIn { from { opacity: 0; transform: scale(.985); } } .up-close { position: fixed; top: 26px; right: 28px; width: 34px; height: 34px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #333; z-index: 2; } .up-close:hover { background: #ecebe9; } .up-close .ri { width: 18px; height: 18px; } .up-inner { max-width: 1400px; margin: 0 auto; padding: 22px 18px 40px; text-align: center; } .up-brand { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; } .up-inner h1 { font-size: 20px; font-weight: 600; letter-spacing: -.005em; margin: 0 0 28px; } .up-seg { display: inline-flex; background: #f1f0ee; border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 34px; } .up-seg button { border: 0; background: none; border-radius: 999px; height: 33px; padding: 0 25px; font: 400 13.5px Inter, sans-serif; color: #5d5d5d; cursor: pointer; } .up-seg button.on { background: #e7e6e3; color: #0d0d0d; } .up-cards { display: flex; justify-content: center; gap: 17px; flex-wrap: wrap; } .up-card { width: 335px; text-align: left; background: #f8f7f5; border-radius: 15px; padding: 26px 26px 28px; box-shadow: 0 0 0 1px rgba(0,0,0,.015), 0 6px 24px rgba(0,0,0,.035); display: flex; flex-direction: column; animation: blurIn .35s both; } .up-card + .up-card { animation-delay: .05s; } .up-card.popular { border: 1.5px solid #1d9bf0; padding: 24.5px 24.5px 26.5px; background: #fbfaf9; } .up-name { display: flex; justify-content: space-between; align-items: center; font-size: 18.5px; font-weight: 600; letter-spacing: -.01em; } .up-name em { font-style: normal; font-weight: 400; } .up-name em.blue { color: #1d9bf0; } .up-name em.grey { color: #6e6e6e; } .up-badge { background: #e6f3fd; color: #1d9bf0; font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 3px 10px; } .up-tag { margin: 12px 0 18px; font-size: 14px; color: #6e6e6e; } .up-price { font-size: 31px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 26px; } .up-price small { font-size: 14px; color: #6e6e6e; font-weight: 500; margin-left: 5px; letter-spacing: .01em; } .up-price small.from { margin: 0 6px 0 0; font-size: 14px; } .up-cta { height: 41px; width: 100%; border: 0; border-radius: 999px; background: #0a0a0a; color: #fff; font: 600 14px Inter, sans-serif; cursor: pointer; transition: background .15s; margin-bottom: 26px; } .up-cta:hover { background: #262626; } .up-cta.current { background: #ecebe9; color: #6e6e6e; cursor: default; } .up-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .up-card li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: #111; } .up-card li .ms { font-size: 17px; color: #8a8a8a; margin-top: 2px; font-variation-settings: "wght" 250; width: 17px; } .up-card li small { display: block; color: #7a7a7a; font-size: 13px; margin-top: 2px; } .bot-ic.sm { width: 15px; height: 15px; margin: 2px 1px 0; flex: none; } .up-annual { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; background: #f8f7f5; border-radius: 999px; padding: 7px 7px 7px 18px; font-size: 13.5px; color: #5d5d5d; cursor: pointer; box-shadow: 0 0 0 1px #efeeec; position: relative; } .up-annual input { position: absolute; opacity: 0; } .up-switch { width: 44px; height: 25px; border-radius: 999px; background: #e3e2df; position: relative; transition: background .2s; } .up-switch::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; } .up-annual input:checked + .up-switch { background: #1d9bf0; } .up-annual input:checked + .up-switch::after { transform: translateX(19px); } .up-annual input:focus-visible + .up-switch { outline: 2px solid #1d9bf0; outline-offset: 2px; } @media (max-width: 760px) { .up-card { width: 100%; } .up-close { top: 10px; right: 10px; } } .up-cards { flex-wrap: nowrap; max-width: 1400px; margin: 0 auto; } .up-cards .up-card { flex: 0 1 335px; } .up-inner { max-width: 1440px; } .pr-cards { flex-wrap: nowrap; } @media (max-width: 1000px) { .up-cards, .pr-cards { flex-wrap: wrap; } } .bot-ic, body #app .bot-ic, .bot-ic.sm { background: #555 !important; box-shadow: none !important; border-radius: 50%; } /* ===================== Convene Bot chat ===================== */ body #app .bot-wrap { max-width: 763px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding: 74px 0 0; } .bot-log { flex: 1; display: flex; flex-direction: column; gap: 22px; padding-bottom: 24px; } .bm { font: 400 15px/1.6 Inter, sans-serif; color: #0d0d0d; animation: blurIn .3s both; } .bm.user { align-self: flex-end; max-width: 75%; background: #efeeec; border-radius: 20px; padding: 10px 16px; white-space: pre-wrap; } .bm.bot { display: flex; gap: 12px; align-items: flex-start; } .bm.bot > div { flex: 1; min-width: 0; } .bm.bot p { margin: 0 0 8px; } .bm .bot-ic { margin-top: 4px; flex: none; width: 17px; height: 17px; } .typing { display: flex; gap: 4px; padding-top: 8px; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: #9a9a98; animation: dot 1s infinite; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; } body #app .bot-composer { position: sticky; bottom: 16px; margin-bottom: 16px; } body #app .bot-composer textarea { min-height: 22px; } .draft-card { margin-top: 10px; background: #fff; border: 1px solid #e7e6e3; border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .draft-card label { display: flex; flex-direction: column; gap: 5px; font: 500 12px Inter, sans-serif; color: #6e6e6e; flex: 1; } .draft-card input, .draft-card select, .draft-card textarea { font: 400 14px Inter, sans-serif; color: #0d0d0d; border: 1px solid #e7e6e3; border-radius: 10px; padding: 8px 10px; background: #fff; width: 100%; } .draft-card input:focus, .draft-card select:focus, .draft-card textarea:focus { outline: 0; border-color: #0d0d0d; } .draft-card .dc-title { font: 600 17px Inter, sans-serif; border-color: transparent; padding: 4px 6px; margin-left: -6px; } .draft-card .dc-title:hover { border-color: #e7e6e3; } .dc-row { display: flex; gap: 10px; flex-wrap: wrap; } .dc-row label:first-child { flex: 1.4; } .draft-card :disabled { background: #f8f8f6; color: #555; } body #app .bot-wrap { width: 100%; } @media (max-width: 800px) { body #app .bot-wrap { padding-top: 56px; } .dc-row { flex-direction: column; } } .up-price.talk { font-size: 31px; font-weight: 500; } .up-cta.grey { background: #eeedeb; color: #0d0d0d; } .up-cta.grey:hover { background: #e6e5e2; } .more-toggle { cursor: pointer; } .more-toggle:hover div { text-decoration: underline; } .more-toggle .ms { color: #8a8a8a; } .up-card li.hidden { display: none; } .up-variant { display: inline-flex; background: #efeeec; border-radius: 999px; padding: 2px; gap: 2px; } .up-variant button { border: 0; background: none; border-radius: 999px; padding: 3px 11px; font: 500 12.5px Inter, sans-serif; color: #6e6e6e; cursor: pointer; } .up-variant button.on { background: #fff; color: #0d0d0d; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .up-cards.still .up-card { animation: none; } /* ===================== Bot: thinking, streaming, actions, suggestions ===================== */ .bm.bot { flex-direction: column; gap: 6px; align-items: stretch; } .bm.bot.first { padding-top: 4px; } .bm-body { font: 400 15.5px/1.65 Inter, sans-serif; color: #111; } .bm-body p { margin: 0 0 12px; } .bm-body p:last-child { margin-bottom: 0; } .working { display: flex; align-items: center; gap: 10px; font: 400 14.5px Inter, sans-serif; color: #8a8a88; padding: 6px 0; } .working b { font-weight: 400; font-variant-numeric: tabular-nums; } .swirl { width: 18px; height: 18px; animation: swirl 1.1s cubic-bezier(.5,.1,.5,.9) infinite; } @keyframes swirl { 0% { transform: rotate(0) scale(.9); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(.9); } } .working span { background: linear-gradient(90deg, #8a8a88 0%, #8a8a88 40%, #d4d4d1 50%, #8a8a88 60%, #8a8a88 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 3.2s linear infinite; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } } .topic { display: flex; align-items: center; gap: 9px; font: 400 14.5px Inter, sans-serif; color: #8a8a88; animation: blurIn .3s both; } .topic .ri { width: 16px; height: 16px; } .worked { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; font: 400 14px Inter, sans-serif; color: #8a8a88; cursor: pointer; } .worked:hover { color: #3b3b3b; } .worked .ri { width: 13px; height: 13px; transition: transform .2s; } .steps { border-left: 2px solid #ecebe8; margin: 2px 0 6px 2px; padding: 4px 0 4px 12px; display: flex; flex-direction: column; gap: 6px; font: 400 13px Inter, sans-serif; color: #7a7a78; animation: blurIn .25s both; } .steps div { display: flex; align-items: center; gap: 6px; } .steps .ri { width: 11px; height: 11px; } .bm-actions { display: flex; gap: 4px; margin-top: 4px; animation: fadeUp .35s .05s both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } } .bm-actions button { width: 32px; height: 32px; border: 0; background: none; border-radius: 8px; display: grid; place-items: center; color: #6e6e6c; cursor: pointer; transition: background .15s, color .15s; } .bm-actions button:hover { background: #ecebe8; color: #0d0d0d; } .bm-actions .ri { width: 17px; height: 17px; } .bm-actions button.on { color: #0d0d0d; } .bm-actions button.on .ri path { fill: currentColor; fill-opacity: .12; } .bm-actions button.ok { color: #1d7a3e; } .bm-actions button.pop { animation: thumb .45s cubic-bezier(.3,1.8,.5,1); } @keyframes thumb { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-12deg); } 100% { transform: scale(1) rotate(0); } } .spark { position: fixed; z-index: 90; pointer-events: none; font-size: 11px; color: #1d9bf0; transform: translate(-50%, -50%); animation: spark .7s ease-out forwards; } .spark:nth-child(2n) { color: #f05ca8; } .spark:nth-child(3n) { color: #7c5cff; } @keyframes spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4); opacity: 0; } } .sugg { display: flex; flex-direction: column; align-items: flex-start; margin-top: 18px; animation: fadeUp .4s .15s both; } .sugg button { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 8px 4px; font: 400 14.5px Inter, sans-serif; color: #5d5d5b; cursor: pointer; border-radius: 8px; } .sugg button:hover { color: #0d0d0d; background: #f1f0ee; padding-left: 10px; } .sugg button + button { border-top: 1px solid #efeeec; border-radius: 0; } .sugg .ri { width: 13px; height: 13px; color: #9a9a98; transform: rotate(0deg); } body #app .c-go.send { background: #1d9bf0; color: #fff; } body #app .c-go.send .ri { width: 18px; height: 18px; color: #fff; } body #app .c-go.stop { background: #0d0d0d; } .c-go .sq { width: 11px; height: 11px; border-radius: 2px; background: #fff; } @media (prefers-reduced-motion: reduce) { .swirl, .working span, .spark { animation: none !important; } } /* Jump-to-latest arrow above the bot composer */ body #app .bot-composer .to-bottom { position: absolute; left: 50%; top: -52px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(0,0,0,.12); background: #fff; color: #111; box-shadow: 0 4px 14px rgba(0,0,0,.12); cursor: pointer; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; } body #app .bot-composer .to-bottom.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } body #app .bot-composer .to-bottom:hover { background: #f4f4f4; } /* Slightly smaller sidebar icons */ #app .sidenav a .ms, body.nav-collapsed #app .sidenav a .ms, .rail-top .ms, .rail-bottom .ms { font-size: 20px; } #app .sidenav a svg, .rail-top svg, .rail-bottom svg { width: 20px; height: 20px; } /* Thinking: shimmer text only, phrases fade in as they change */ .working .swirl { display: none; } .working span.swap { animation: shimmer 3.2s linear infinite, thinkIn .35s ease; } @keyframes thinkIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* Meeting summary card in Convene Bot */ .mtg-card { margin-top: 12px; max-width: 460px; border: 1px solid #ebeae7; border-radius: 16px; padding: 14px 16px; background: #fff; display: flex; flex-direction: column; gap: 12px; font-family: Inter, sans-serif; animation: thinkIn .3s ease; } .mc-head { display: flex; gap: 12px; align-items: center; } .mc-ic { width: 36px; height: 36px; border-radius: 10px; background: #f3f3f1; display: grid; place-items: center; color: #111; flex: none; } .mc-t { display: flex; flex-direction: column; min-width: 0; } .mc-t b { font-weight: 600; font-size: 15px; color: #0d0d0d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-t span { font-size: 13px; color: #6e6e6e; margin-top: 2px; } .mc-guests { display: flex; align-items: center; } .mc-guests span { width: 24px; height: 24px; border-radius: 50%; background: #e9e8e4; color: #333; font: 600 11px Inter, sans-serif; display: grid; place-items: center; border: 2px solid #fff; margin-left: -6px; } .mc-guests span:first-child { margin-left: 0; } .mc-guests em { font-style: normal; font-size: 13px; color: #6e6e6e; margin-left: 8px; } .mc-agenda { margin: 0; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.6; color: #333; } .mc-actions { display: flex; gap: 6px; flex-wrap: wrap; } .mc-btn { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid #e3e2df; background: #fff; color: #111; font: 500 13px Inter, sans-serif; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; } .mc-btn:hover { background: #f5f5f3; } .mc-btn.primary { background: #0d0d0d; border-color: #0d0d0d; color: #fff; } .mc-btn.primary:hover { background: #333; } .mc-btn.ghost { border-color: transparent; color: #6e6e6e; } .mc-done { font-size: 13px; color: #1a7f37; } .mc-done a { color: inherit; } .mtg-card.done { background: #fafaf9; } .draft-card .mc-actions { margin-top: 2px; } /* Convene Bot: centred start screen */ .bot-hero, .bot-apps, .bot-quick { display: none; } body #app .bot-wrap.empty { justify-content: center; padding-top: 0; padding-bottom: 12vh; } body #app .bot-wrap.empty .bot-log { display: none; flex: 0; } body #app .bot-wrap.empty .bot-hero { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-bottom: 40px; } .bot-face { width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05); display: grid; place-items: center; } .bot-face span { width: 26px; height: 26px; border-radius: 50%; background: #2b2b2b; } .bot-hero h1 { margin: 0; font: 700 36px/1.15 Inter, sans-serif; letter-spacing: -.02em; color: #2b2b2b; text-align: center; } body #app .bot-wrap.empty .bot-composer { position: relative; bottom: auto; margin: 0; z-index: 2; box-shadow: 0 4px 18px rgba(0,0,0,.05); } body #app .bot-composer { border-radius: 16px; } body #app .bot-composer textarea::placeholder { color: #a5a5a3; } body #app .bot-composer .c-mode { color: #555; font-weight: 500; } body #app .bot-composer .c-go { width: 34px; height: 34px; border-radius: 50%; background: #f1f1ef; color: #b5b5b2; } body #app .bot-composer .c-go.send { background: #0d0d0d; color: #fff; } body #app .bot-composer .c-go.stop { background: #0d0d0d; } body #app .bot-composer .c-go svg { width: 17px; height: 17px; } body #app .bot-wrap.empty .bot-apps { display: flex; align-items: center; gap: 14px; margin-top: -14px; padding: 24px 22px 10px; border: 1px solid #ebeae7; border-top: 0; border-radius: 0 0 16px 16px; background: #f7f7f5; font: 500 14px Inter, sans-serif; color: #555; } .bot-apps > span { flex: 1; } .ba-ic { display: flex; gap: 10px; } .ba-ic .ms { font-size: 19px; color: #6b6b69; } .bot-apps a { color: #0d0d0d; text-decoration: none; font-weight: 600; } .bot-apps button { border: 0; background: none; color: #8a8a88; cursor: pointer; font-size: 20px; } body #app .bot-wrap.empty .bot-quick { display: flex; justify-content: center; gap: 36px; margin-top: 30px; flex-wrap: wrap; } .bot-quick button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: 500 16px Inter, sans-serif; color: #555; cursor: pointer; padding: 6px 4px; border-radius: 8px; } .bot-quick button:hover { color: #0d0d0d; background: #f4f4f2; } .bot-quick .ms { font-size: 20px; font-variation-settings: "wght" 300; } @media (max-width: 700px) { .ba-ic { display: none; } .bot-hero h1 { font-size: 28px; } body #app .bot-wrap.empty .bot-quick { gap: 12px; } } .bot-apps button.ms { font-size: 18px; } /* ===== Clean white look across the whole app (matches the reference) ===== */ body #app { background: #fff; color: #2f2f2f; } body #app .sidenav, body #app .rail-top, body #app .rail-bottom { background: #f9f9f8; } body #app .sidenav { border-right: 1px solid #ededeb; } body #app .home-top { background: transparent; } body #app .composer { border: 1px solid #e9e9e7; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 22px rgba(0,0,0,.05); background: #fff; } body #app .composer textarea::placeholder { color: #a6a6a4; } body #app .home-hero h1 { font-weight: 600; letter-spacing: -.02em; color: #2c2c2c; } body #app .card, body #app .mtg-card, body #app .draft-card { border-color: #ebebe9; } /* Bot start screen, measured from the reference */ body #app .bot-wrap.empty .bot-hero { gap: 20px; margin-bottom: 42px; } .bot-face { width: 70px; height: 70px; box-shadow: 0 4px 16px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.06); } .bot-face span { width: 24px; height: 24px; } .bot-hero h1 { font-size: 34px; font-weight: 600; color: #2c2c2c; letter-spacing: -.025em; } body #app .bot-wrap.empty .bot-composer { min-height: 104px; padding: 16px 14px 10px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: none; } body #app .bot-composer textarea { font-size: 15px; padding: 0 2px; } body #app .bot-composer .c-go { width: 30px; height: 30px; background: #f2f2f1; color: #c4c4c2; } body #app .bot-wrap.empty .bot-apps { margin-top: -16px; padding: 28px 18px 12px; min-height: 60px; box-sizing: border-box; background: #f9f9f8; border: 1px solid #e9e9e7; border-top: 0; border-radius: 0 0 14px 14px; font: 500 13px Inter, sans-serif; color: #5f5f5d; box-shadow: 0 8px 24px rgba(0,0,0,.05); } .ba-ic { gap: 11px; } .ba-ic .ms { font-size: 17px; } .bot-apps a { font-size: 13px; } body #app .bot-wrap.empty .bot-quick { gap: 38px; margin-top: 22px; } .bot-quick button { font: 400 15.5px Inter, sans-serif; color: #5a5a58; gap: 7px; } .bot-quick .ms { font-size: 19px; color: #6a6a68; } /* Home uses the same hero layout */ body #app .home-hero { display: flex; flex-direction: column; align-items: stretch; } body #app .home-hero .bot-face { align-self: center; margin-bottom: 20px; } body #app .home-hero h1 { font-size: 34px; margin-bottom: 42px; } body #app .home-hero .composer { position: relative; z-index: 2; } body #app .home-hero .home-apps { display: flex; align-items: center; gap: 14px; margin-top: -16px; padding: 28px 18px 12px; min-height: 60px; box-sizing: border-box; background: #f9f9f8; border: 1px solid #e9e9e7; border-top: 0; border-radius: 0 0 14px 14px; font: 500 13px Inter, sans-serif; color: #5f5f5d; } body #app .home-hero .home-quick { display: flex; justify-content: center; gap: 38px; margin-top: 22px; flex-wrap: wrap; } .home-quick a { display: inline-flex; align-items: center; gap: 7px; font: 400 15.5px Inter, sans-serif; color: #5a5a58; text-decoration: none; padding: 6px 4px; border-radius: 8px; } .home-quick a:hover { color: #0d0d0d; background: #f4f4f2; } .home-quick .ms { font-size: 19px; color: #6a6a68; } /* App strip: coloured icon row like the reference */ .bot-apps .ba-ic { display: flex; gap: 12px; text-decoration: none; } .bot-apps .ba-ic .ms { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500; } .bot-apps .ba-ic:hover .ms { opacity: .8; } body #app .bot-apps { gap: 18px; font-weight: 500; color: #6b6b69; } .home-apps button { border: 0; background: none; color: #8a8a88; cursor: pointer; font-size: 18px; } /* Convene Bot face (original line-art character) */ .bot-face { overflow: visible; position: relative; } .bot-face .face-ink { width: 70px; height: 70px; overflow: visible; transform: translateY(-2px); } .face-eyes { animation: blink 5s infinite; transform-origin: center 32px; transform-box: view-box; } @keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } } @media (prefers-reduced-motion: reduce) { .face-eyes { animation: none; } } .bot-face .face-ink { width: 96px; height: 96px; transform: translateY(2px); } /* ===== Sidebar, measured from the reference ===== */ body:not(.nav-collapsed) #app { grid-template-columns: 289px 1fr; } body #app .sidenav.nn { background: #f8f8f7; border-right: 1px solid #ededeb; padding: 0 10px 0; display: flex; flex-direction: column; gap: 0; font-family: Inter, sans-serif; overflow-y: auto; } .sidenav.nn .rail-top { display: flex; align-items: center; gap: 4px; height: 36px; padding: 2px 0 0; background: transparent !important; } .sidenav.nn .rail-top .grow { flex: 1; } .sidenav.nn .nn-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: #5f5e5b; background: none; border: 0; cursor: pointer; padding: 0; } .sidenav.nn .nn-ic:hover { background: #ececea; } .sidenav.nn .nn-ic svg { width: 19px; height: 19px; } .nn-search { display: flex; align-items: center; height: 34px; margin: 8px 0 12px; padding: 0 6px 0 10px; border: 1px solid #e3e3e1; border-radius: 8px; background: #fff; color: #91918e !important; font-size: 14.5px; text-decoration: none; } .nn-search kbd { margin-left: auto; font: 500 11px Inter, sans-serif; color: #91918e; background: #f1f1ef; border-radius: 4px; padding: 3px 5px; } .nn-homerow { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } #app .sidenav.nn .nn-homerow a.nn-home { display: inline-flex; align-items: center; gap: 8px; height: 33px; padding: 0 10px 0 8px; border-radius: 8px; background: #ececea; color: #2f2f2f; font-size: 15px; font-weight: 600; width: auto; } .nn-homerow a.nn-home svg { width: 18px; height: 18px; color: #2f2f2f; } .nn-homerow .nn-ic svg { color: #8f8e8a; } #app .sidenav.nn .nn-main a, #app .sidenav.nn .nn-sec a, #app .sidenav.nn .rail-settings { display: flex; align-items: center; gap: 10px; height: 33px; padding: 0 8px; border-radius: 6px; color: #37352f; font-size: 15px; font-weight: 400; text-decoration: none; background: none; width: auto; justify-content: flex-start; } #app .sidenav.nn .nn-main a svg, #app .sidenav.nn .rail-settings svg { width: 20px; height: 20px; color: #5f5e5b; } #app .sidenav.nn .nn-main a:hover, #app .sidenav.nn .nn-sec a:hover, #app .sidenav.nn .rail-settings:hover { background: #ececea; } #app .sidenav.nn a.active:not(.nn-home) { background: #ececea; font-weight: 500; } .nn-main { margin-bottom: 22px; } .nn-sec { margin-bottom: 4px; } .nn-label { display: block; width: 100%; text-align: left; height: 32px; padding: 0 8px; border: 0; background: none; border-radius: 6px; font: 600 13px Inter, sans-serif; color: #91918e; cursor: pointer; } .nn-label:hover { background: #ececea; } .nn-sec .nn-items { display: none; } .nn-sec.open .nn-items { display: block; } #app .sidenav.nn .nn-sec a { font-size: 14px; height: 30px; color: #5f5e5b; } .nn-sec a small { margin-left: auto; color: #a5a5a2; font-size: 11.5px; } .nn-ev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nn-empty { display: block; padding: 4px 8px; font-size: 13px; color: #a5a5a2; } .nn-dot { width: 16px; height: 16px; border-radius: 50%; background: #555; flex: none; } .sidenav.nn .rail-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 0 8px; background: transparent !important; position: sticky; bottom: 0; background: #f8f8f7 !important; } .sidenav.nn .rail-bottom > .pop-wrap { position: absolute; left: 0; bottom: 48px; width: 0; height: 0; overflow: visible; } .sidenav.nn .rail-bottom > .pop-wrap > button { display: none; } .sidenav.nn .rail-bottom #mePop { bottom: 0; left: 0; top: auto; } .nn-user { display: flex; align-items: center; gap: 4px; border-top: 1px solid #ececea; margin: 0 -10px; padding: 8px 10px 0; } .nn-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px; border: 0; background: none; border-radius: 6px; cursor: pointer; font: 500 15px Inter, sans-serif; color: #37352f; } .nn-me:hover { background: #ececea; } .nn-me svg { width: 16px; height: 16px; color: #8f8e8a; flex: none; } .nn-av { width: 22px; height: 22px; border-radius: 4px; background: #e3e2df; color: #5f5e5b; font: 600 12px Inter, sans-serif; display: grid; place-items: center; flex: none; } .nn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nn-user .nn-dot { width: 18px; height: 18px; } /* collapsed rail keeps icons only */ body.nav-collapsed .sidenav.nn .nn-search, body.nav-collapsed .sidenav.nn .nn-sec, body.nav-collapsed .sidenav.nn .nn-name, body.nav-collapsed .sidenav.nn .nn-me svg, body.nav-collapsed .sidenav.nn .rail-top .nn-ic, body.nav-collapsed .sidenav.nn .nn-user .nn-ic { display: none; } body.nav-collapsed .sidenav.nn .nn-homerow { flex-direction: column; } body.nav-collapsed #app .sidenav.nn a { font-size: 0; gap: 0; justify-content: center; } /* apps strip + modal */ .bot-apps .ba-ic { display: flex; gap: 13px; border: 0; background: none; padding: 0; cursor: pointer; } .bot-apps .ba-ic img { width: 18px; height: 18px; display: block; } .bot-apps .ba-ic:hover img { transform: translateY(-1px); } .bot-apps .ba-x { border: 0; background: none; color: #8a8a88; cursor: pointer; font-size: 18px; margin-left: 4px; } .bot-apps > a { display: none; } .apps-list { display: flex; flex-direction: column; gap: 2px; margin: 14px 0; max-height: 55vh; overflow: auto; } .app-row { display: flex; align-items: center; gap: 14px; padding: 9px 6px; border-radius: 10px; } .app-row:hover { background: #f7f7f5; } .app-row .grow { display: flex; flex-direction: column; } .app-row b { font: 600 14px Inter, sans-serif; color: #2f2f2f; } .app-row small { font-size: 12.5px; color: #8a8a88; } .app-soon { font-size: 12px; color: #a5a5a2; } #app .sidenav.nn .nn-ic { width: 28px !important; min-width: 0; height: 28px; padding: 0 !important; margin: 0; flex: none; } .nn-user { box-sizing: border-box; } /* One consistent icon size/weight per row, as in the reference */ #app .sidenav.nn svg { stroke-width: 1.6; } #app .sidenav.nn .rail-top .nn-ic svg { width: 19px !important; height: 19px !important; color: #6b6a67; } #app .sidenav.nn .nn-homerow a.nn-home svg { width: 18px !important; height: 18px !important; } #app .sidenav.nn .nn-homerow .nn-ic svg { width: 18px !important; height: 18px !important; color: #9b9a97; } #app .sidenav.nn .nn-main a svg, #app .sidenav.nn .rail-settings svg { width: 20px !important; height: 20px !important; color: #6b6a67; flex: none; } #app .sidenav.nn .nn-user .nn-ic svg { width: 19px !important; height: 19px !important; color: #6b6a67; } #app .sidenav.nn .nn-user .nn-dot { width: 18px; height: 18px; } #app .sidenav.nn #navToggle { display: grid; place-items: center; } #app .sidenav.nn .rail-top .nn-ic svg, #app .sidenav.nn .nn-user .nn-ic svg { width: 21px !important; height: 21px !important; } #app .sidenav.nn .nn-homerow a.nn-home svg { width: 19px !important; height: 19px !important; } #app .sidenav.nn .nn-homerow .nn-ic svg { width: 21px !important; height: 21px !important; color: #8f8e8a; } #app .sidenav.nn .nn-main a svg, #app .sidenav.nn .rail-settings svg { width: 22px !important; height: 22px !important; } .bot-apps .ba-ic img { width: 19px; height: 19px; object-fit: contain; } /* Collapsed sidebar: a tidy icon rail instead of disappearing */ body.nav-collapsed #app { grid-template-columns: 56px 1fr; } body.nav-collapsed #app .sidenav.nn { display: flex !important; visibility: visible; transform: none; width: 56px; padding: 0 8px; align-items: center; overflow: visible; } body.nav-collapsed .sidenav.nn .rail-top { justify-content: center; width: 100%; } body.nav-collapsed .sidenav.nn .nn-block, body.nav-collapsed .sidenav.nn .nn-main { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 0; } body.nav-collapsed .sidenav.nn .nn-homerow { flex-direction: column; gap: 4px; margin: 0; } body.nav-collapsed #app .sidenav.nn .nn-homerow a.nn-home { width: 36px !important; height: 36px; padding: 0; justify-content: center; font-size: 0; gap: 0; } body.nav-collapsed #app .sidenav.nn .nn-homerow .nn-ic, body.nav-collapsed #app .sidenav.nn .rail-top #navToggle { display: grid !important; width: 36px !important; height: 36px; } body.nav-collapsed #app .sidenav.nn .nn-main a, body.nav-collapsed #app .sidenav.nn .rail-settings { width: 36px !important; height: 36px; padding: 0; justify-content: center; font-size: 0; gap: 0; } body.nav-collapsed #app .sidenav.nn .nn-main a .nav-count { display: none; } body.nav-collapsed .sidenav.nn .rail-bottom { width: 100%; align-items: center; } body.nav-collapsed .sidenav.nn .nn-user { margin: 0; padding: 8px 0 0; border-top: 1px solid #ececea; justify-content: center; width: 100%; } body.nav-collapsed .sidenav.nn .nn-me { flex: none; width: 36px; justify-content: center; padding: 0; } /* Collapsed sidebar: hide everything except the open button in the top-left */ body.nav-collapsed #app { grid-template-columns: 0 1fr; } body.nav-collapsed #app .sidenav.nn { width: 0; padding: 0; border: 0; overflow: visible; } body.nav-collapsed #app .sidenav.nn > *:not(.rail-top) { display: none !important; } body.nav-collapsed #app .sidenav.nn .rail-top > *:not(#navToggle) { display: none !important; } body.nav-collapsed #app .sidenav.nn #navToggle { position: fixed; top: 6px; left: 10px; z-index: 50; width: 32px !important; height: 32px; background: transparent; } body.nav-collapsed #app .sidenav.nn #navToggle:hover { background: #ececea; } body.nav-collapsed #app .sidenav.nn { position: relative; z-index: 60; } /* No grey focus box inside message boxes */ body #app .composer textarea, body #app .composer textarea:focus, body #app .composer textarea:focus-visible { box-shadow: none !important; outline: none !important; background: transparent !important; } /* Bot face sits fully inside its circle */ .bot-face { overflow: hidden; } .bot-face .face-ink { width: 70px !important; height: 70px !important; transform: translateY(4px) scale(1.15) !important; } .bot-apps > span { white-space: nowrap; } .bot-apps > span { flex: 1 0 auto; } .bot-apps .ba-ic { min-width: 0; overflow: hidden; justify-content: flex-end; } .bot-apps .ba-ic img { flex: none; } .bot-apps .ba-x { flex: none; } /* "+" menu, matched to the reference */ body #app .bot-composer .pop-wrap { position: relative; } body #app .bot-composer #botPlus { width: 32px; height: 32px; border-radius: 50%; } body #app .bot-composer #botPlus.open, body #app .bot-composer #botPlus:hover { background: #f1f1ef; } #app .popover.plus-menu { top: 40px; bottom: auto; left: -2px; right: auto; min-width: 372px; padding: 5px; border: 1px solid #e6e6e4; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04); background: #fff; z-index: 30; } .pm-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 41px; padding: 0 12px 0 14px; border: 0; background: none; border-radius: 8px; font: 400 15.5px Inter, sans-serif; color: #2f2f2f; cursor: pointer; text-align: left; box-sizing: border-box; } .pm-item:hover { background: #f1f1ef; } .pm-item svg { width: 21px; height: 21px; color: #2f2f2f; flex: none; } .pm-beta { font: 500 12.5px Inter, sans-serif; color: #6b6b69; background: #efefed; border-radius: 4px; padding: 3px 7px; } .pm-sw { margin-left: auto; width: 42px; height: 24px; border-radius: 999px; background: #d9d9d6; position: relative; transition: background .2s; flex: none; } .pm-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; } .pm-sw.on { background: #2383e2; } .pm-sw.on i { transform: translateX(18px); } .pm-back { color: #6b6b69; font-weight: 500; } .pm-skills .pm-item:not(.pm-back) { padding-left: 47px; } body #app .bot-wrap.empty .bot-composer { z-index: 5; } /* "+" menu sized to the reference (measured: 282px wide, 31px rows) */ #app .popover.plus-menu { min-width: 0; width: 282px; padding: 4px; border-radius: 10px; top: 36px; } .pm-item { height: 31px; gap: 10px; padding: 0 8px 0 10px; font-size: 14px; border-radius: 6px; } .pm-item svg { width: 17px; height: 17px; } .pm-beta { font-size: 11px; padding: 1px 5px; } .pm-sw { width: 32px; height: 18px; } .pm-sw i { top: 2px; left: 2px; width: 14px; height: 14px; } .pm-sw.on i { transform: translateX(14px); } .pm-skills .pm-item:not(.pm-back) { padding-left: 37px; } body #app .bot-composer #botPlus { width: 28px; height: 28px; } /* Face stays inside the circle; a little chilli sits on top, over the edge */ .bot-face { position: relative; overflow: visible !important; } .bot-face .face-ink { transform: translateY(5px) scale(1.2) !important; clip-path: circle(29px at 35px 31px); } /* Face fills the circle exactly, centred */ .bot-face .face-ink { position: absolute; inset: 0; width: 100% !important; height: 100% !important; transform: none !important; clip-path: none; } /* ===== Sidebar v2: measured from the latest reference (÷1.82) ===== */ body #app .sidenav.nn { background: #f8f8f6; padding: 0 8px; } .sidenav.nn .rail-top { height: 44px; padding: 0 2px; } #app .sidenav.nn .rail-top .nn-ic { width: 30px !important; height: 30px; } #app .sidenav.nn .rail-top .nn-ic svg { width: 21px !important; height: 21px !important; color: #6b6a67; } .nn-search { height: 33px; margin: 0 0 14px; padding: 0 4px 0 10px; border-radius: 6px; border-color: #e2e2df; color: #a3a3a0 !important; font-size: 14.5px; } .nn-search kbd { font-size: 11px; padding: 2px 5px; background: #ececea; color: #8f8e8a; } .nn-homerow { gap: 4px; margin-bottom: 12px; } #app .sidenav.nn .nn-homerow a.nn-home { height: 35px; padding: 0 10px 0 8px; gap: 10px; border-radius: 8px; font-size: 15.5px; font-weight: 600; color: #2f2f2f; background: #ececea; } #app .sidenav.nn .nn-homerow a.nn-home svg { width: 18px !important; height: 18px !important; color: #2f2f2f; } #app .sidenav.nn .nn-homerow .nn-ic { width: 30px !important; height: 30px; } #app .sidenav.nn .nn-homerow .nn-ic svg { width: 18px !important; height: 18px !important; color: #a7a6a3; } #app .sidenav.nn .nn-main a { height: 34px; padding: 0 6px; gap: 12px; font-size: 15.5px; color: #37352f; } #app .sidenav.nn .nn-main a svg { width: 21px !important; height: 21px !important; color: #6b6a67; } .nn-main { margin-bottom: 26px; } .nn-sec { margin-bottom: 1px; } .nn-label { height: 36px; padding: 0 6px; font-size: 12.5px; font-weight: 600; color: #a3a29f; } #app .sidenav.nn .rail-settings { height: 34px; padding: 0 6px; gap: 12px; font-size: 15.5px; color: #a3a29f; } #app .sidenav.nn .rail-settings svg { width: 21px !important; height: 21px !important; color: #a3a29f; } .sidenav.nn .rail-bottom { background: #f8f8f6 !important; padding: 6px 0 10px; gap: 8px; } .nn-user { margin: 0 -8px; padding: 10px 8px 0; border-top: 1px solid #ebebe9; gap: 2px; } .nn-me { height: 32px; gap: 10px; padding: 0 4px; font-size: 15.5px; font-weight: 600; color: #37352f; } .nn-av { width: 22px; height: 22px; border-radius: 4px; background: #e6e6e3; color: #6b6a67; font-size: 12.5px; font-weight: 500; } .nn-me svg { width: 15px !important; height: 15px !important; margin-left: auto; color: #8f8e8a; } #app .sidenav.nn .nn-user .nn-ic { width: 32px !important; height: 32px; } #app .sidenav.nn .nn-user .nn-ic svg { width: 21px !important; height: 21px !important; color: #6b6a67; } #app .sidenav.nn .nn-user .nn-new svg { color: #2383e2 !important; } /* ===== Chat view, matched to the reference ===== */ .chat-bar { display: none; } body #app .bot-wrap:not(.empty) ~ .x, .x { } body #app #page:has(.bot-wrap:not(.empty)) .bot-top { display: none; } body #app #page:has(.bot-wrap:not(.empty)) .chat-bar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; height: 44px; padding: 0 14px 0 8px; background: #fff; } .cb-left { display: flex; align-items: center; gap: 8px; font: 400 15px Inter, sans-serif; color: #37352f; } .cb-face { width: 24px; height: 24px; border-radius: 50%; position: relative; display: inline-block; box-shadow: 0 1px 4px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.05); background: #fff; } .cb-face .face-ink { position: absolute; inset: 0; width: 100%; height: 100%; } .cb-sep { color: #c9c8c5; } .cb-title { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-left > svg { width: 15px; height: 15px; color: #8f8e8a; } .cb-right { display: flex; gap: 6px; } .cb-ic { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; border-radius: 6px; color: #37352f; cursor: pointer; } .cb-ic:hover, .cb-ic.on { background: #f1f1ef; } .cb-ic svg { width: 20px; height: 20px; } body #app .bot-wrap:not(.empty) { max-width: 672px; padding-top: 18px; } .chat-meta { text-align: center; font: 400 12.5px Inter, sans-serif; color: #9b9a97; margin-bottom: 4px; } body #app .bm.user { background: #f1f1ef; border-radius: 18px; padding: 7px 13px; font-size: 15px; color: #2f2f2f; } body #app .bm.bot { font-size: 15px; line-height: 1.6; color: #2f2f2f; } body #app .bm .bm-actions { display: flex; gap: 2px; margin-top: 6px; opacity: 1; } body #app .bm .bm-actions button { width: 26px; height: 26px; border-radius: 6px; color: #8f8e8a; display: grid; place-items: center; } body #app .bm .bm-actions button:hover { background: #f1f1ef; color: #37352f; } body #app .bm .bm-actions svg { width: 16px; height: 16px; } body #app .bot-wrap:not(.empty) .bot-composer { border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.05); } /* ===== Sidebar: exact positions from the reference (÷1.82) ===== */ body #app .sidenav.nn { padding: 0 6px 0 5px !important; box-sizing: border-box; } #app .sidenav.nn a, #app .sidenav.nn button, .nn-search { box-sizing: border-box; min-height: 0 !important; } .sidenav.nn .rail-top { height: 33px !important; margin: 0 0 11px; } #app .sidenav.nn #navToggle { height: 30px !important; } .nn-search { height: 33px !important; margin: 0 0 14px !important; width: 100%; padding: 0 5px 0 11px !important; } .nn-homerow { margin: 0 0 10px !important; height: 35px; } #app .sidenav.nn .nn-homerow a.nn-home { height: 35px !important; width: 88px !important; padding: 0 0 0 9px !important; gap: 10px !important; } #app .sidenav.nn .nn-homerow .nn-ic { height: 30px !important; width: 30px !important; margin-left: 6px; } #app .sidenav.nn .nn-main a { height: 34px !important; padding: 0 0 0 7px !important; gap: 12px !important; } #app .sidenav.nn .nn-main a svg { width: 22px !important; height: 22px !important; } .nn-main { margin: 0 0 12px !important; } .nn-label { height: 37.5px !important; padding: 0 0 0 5px !important; font-size: 12.5px !important; } #app .sidenav.nn .rail-settings { height: 34px !important; padding: 0 0 0 7px !important; gap: 12px !important; margin-bottom: 9px; } .sidenav.nn .rail-bottom { padding: 0 !important; gap: 0 !important; } .nn-user { height: 41px; padding: 0 6px 0 5px !important; margin: 0 -6px 0 -5px !important; align-items: center; } .nn-me { height: 30px !important; padding: 0 4px 0 5px !important; } body #app .sidenav.nn { padding: 0 14px 0 5px !important; } #app .sidenav.nn .nn-block, #app .sidenav.nn .nn-main, #app .sidenav.nn .nn-sec, #app .sidenav.nn .nn-homerow, #app .sidenav.nn .nn-items { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; } #app .sidenav.nn .nn-homerow a.nn-home { margin-left: -1px !important; } .nn-homerow { margin-bottom: 13px !important; } #app .sidenav.nn .nn-main a, #app .sidenav.nn .rail-settings, #app .sidenav.nn .nn-sec a { margin: 0 !important; width: 100% !important; } #app .sidenav.nn .rail-settings { margin-bottom: 18px !important; } /* Sidebar is fixed to the window height: no scrolling, everything in place */ body #app .sidenav.nn { position: sticky; top: 0; height: 100vh; max-height: 100vh; overflow: hidden !important; overscroll-behavior: none; } .sidenav.nn .rail-bottom { position: static !important; margin-top: auto; } .sidenav.nn .nn-sec .nn-items { max-height: 140px; overflow: hidden; } /* Home send button: grey until you type, then black */ body #app #cmpGo.home-send { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: #f2f2f1; color: #c4c4c2; display: grid; place-items: center; transition: background .15s, color .15s; } body #app #cmpGo.home-send svg { width: 17px; height: 17px; } body #app #cmpGo.home-send.send { background: #0d0d0d; color: #fff; } /* Bottom-row icons sit close together */ .nn-user { gap: 0 !important; } #app .sidenav.nn .nn-user .nn-ic { width: 28px !important; margin: 0 !important; } .nn-me { margin-right: 4px; } #app .bot-top{ display: none !important; } /* Chat bar: clear the floating sidebar button when the sidebar is closed */ body.nav-collapsed #app #page:has(.bot-wrap:not(.empty)) .chat-bar { padding-left: 52px; } .cb-right { gap: 8px; } .cb-ic { width: 32px; height: 32px; color: #37352f; } .cb-ic svg { width: 21px; height: 21px; } /* Chat details panel */ .chat-panel { display: none; } body.chat-panel #app .chat-panel { display: block; position: fixed; top: 44px; right: 0; bottom: 0; width: 280px; background: #fff; border-left: 1px solid #ededeb; padding: 18px 20px; z-index: 9; font-family: Inter, sans-serif; } .chat-panel h3 { margin: 0 0 14px; font: 600 15px Inter, sans-serif; color: #2f2f2f; } .chat-panel dl { margin: 0; display: grid; grid-template-columns: 100px 1fr; gap: 10px 8px; font-size: 13.5px; } .chat-panel dt { color: #8f8e8a; } .chat-panel dd { margin: 0; color: #2f2f2f; overflow-wrap: anywhere; } body.chat-panel #app .bot-wrap:not(.empty) { margin-right: 300px; } .sidenav.nn .rail-top { margin-top: 8px !important; } .sidenav.nn .nn-block { margin-top: 0; } body.nav-collapsed #app .sidenav.nn #navToggle { top: 14px; } .cb-right { gap: 0 !important; } #app .cb-ic { width: 30px !important; margin: 0 !important; } body.nav-collapsed #app .sidenav.nn { padding: 0 !important; width: 0 !important; background: transparent !important; border: 0 !important; } /* Recents list */ #nnRecents .nn-items { max-height: none; } #app .sidenav.nn #nnRecents a { height: 30px !important; padding: 0 0 0 8px !important; font-size: 14px; color: #37352f; } #app .sidenav.nn #nnRecents a.active { background: #ececea; } #nnRecents.hidden { display: none; } /* Bot reply formatting */ .bm-body .bh { margin: 16px 0 6px; font: 600 16px Inter, sans-serif; color: #2f2f2f; } .bm-body h2.bh { font-size: 18px; } .bm-body p { margin: 0 0 10px; } .bm-body ol, .bm-body ul { margin: 0 0 10px; padding-left: 22px; } .bm-body li { margin: 3px 0; } .bm-body code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f1ef; padding: 1px 5px; border-radius: 4px; color: #c7254e; } .code-blk { position: relative; margin: 8px 0 12px; background: #f7f7f5; border: 1px solid #ececea; border-radius: 10px; overflow: hidden; } .code-blk pre { margin: 0; padding: 14px 16px; overflow-x: auto; } .code-blk pre code { background: none; padding: 0; color: #2f2f2f; font-size: 13px; line-height: 1.55; } .code-lang { display: block; padding: 6px 14px; font: 500 11.5px Inter, sans-serif; color: #8f8e8a; border-bottom: 1px solid #ececea; background: #fbfbfa; } .tbl-wrap { overflow-x: auto; margin: 8px 0 12px; } .bm-body table { border-collapse: collapse; font-size: 14px; min-width: 60%; } .bm-body th, .bm-body td { border: 1px solid #e6e6e3; padding: 7px 10px; text-align: left; vertical-align: top; } .bm-body th { background: #f7f7f5; font-weight: 600; } .bm-body blockquote { margin: 0 0 10px; padding: 2px 12px; border-left: 3px solid #e3e2df; color: #555; } .bm-body hr { border: 0; border-top: 1px solid #ececea; margin: 14px 0; } .bm-body a { color: #2383e2; } /* Smooth chat: white fill under the message box so text never shows through, gentle fade above it */ body #app #page:has(.bot-wrap:not(.empty))::after { content: ""; position: fixed; left: 289px; right: 0; bottom: 0; height: 150px; pointer-events: none; z-index: 4; background: linear-gradient(to bottom, rgba(255,255,255,0) 0, #fff 34px, #fff 100%); } body.nav-collapsed #app #page:has(.bot-wrap:not(.empty))::after { left: 0; } body #app .bot-wrap:not(.empty) .bot-composer { z-index: 6; margin-bottom: 18px; bottom: 18px; } body #app .bot-wrap:not(.empty) .bot-log { padding-bottom: 40px; } body #app .bot-composer .to-bottom { z-index: 7; } /* replies fade in softly instead of popping */ .bm.bot .bm-body > * { animation: softIn .35s ease both; } @keyframes softIn { from { opacity: .35; } to { opacity: 1; } } .bm.bot.first, .bm { animation: none !important; } @media (max-width: 800px) { body #app #page:has(.bot-wrap:not(.empty))::after { left: 0; } } .bm.bot .bm-body > * { animation: none !important; } /* ===== Landing page (original Convene design) ===== */ .lp2 main { font-family: Inter, -apple-system, sans-serif; color: #111; background: #fff; } .lp-hero { text-align: center; padding: 72px 16px 32px; max-width: 900px; margin: 0 auto; } .lp-faces { display: flex; justify-content: center; margin-bottom: 26px; } .lp-face { width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px var(--c); margin-left: -6px; display: grid; place-items: center; animation: faceBob 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * .25s); } .lp-face:first-child { margin-left: 0; } .lp-face svg { width: 42px; height: 42px; } @keyframes faceBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .lp-hero h1 { font: 700 clamp(40px, 6.4vw, 76px)/1.05 Inter, sans-serif; letter-spacing: -.035em; margin: 0; } .lp-pill { display: inline-flex; align-items: center; gap: 12px; padding: 0 .32em 0 .26em; border-radius: .3em; background: #ece8ff; color: #2a2a2a; font-weight: 500; transition: opacity .25s, transform .25s; vertical-align: .04em; line-height: 1.15; } .lp-pill i { width: .26em; height: .26em; border-radius: 50%; background: #7c5cff; } .lp-pill.swap { opacity: 0; transform: translateY(6px); } .lp-sub { font-size: clamp(17px, 2vw, 21px); line-height: 1.45; color: #333; max-width: 560px; margin: 22px auto 30px; } .lp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .lp-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 9px; font: 600 16px Inter, sans-serif; text-decoration: none; border: 0; cursor: pointer; } .lp-btn.primary { background: #1570ef; color: #fff; } .lp-btn.primary:hover { background: #0f5fd1; } .lp-btn.soft { background: #eaf2fd; color: #1570ef; } .lp-btn.soft:hover { background: #dce9fb; } .lp2 .l-join { margin-top: 16px; } .lp-built { text-align: center; color: #6b6b69; font-size: 15px; margin: 44px 0 16px; } .lp-kinds { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; padding: 0 16px; color: #2f2f2f; font: 600 16px Inter, sans-serif; } .lp-kinds > span { display: inline-flex; align-items: center; gap: 8px; opacity: .8; } .lp-kinds .ms { font-size: 22px; } .lp-wrap { max-width: 1120px; margin: 0 auto; padding: 96px 16px 0; } .lp-h2 { font: 700 clamp(30px, 4vw, 48px)/1.1 Inter, sans-serif; letter-spacing: -.03em; margin: 0 0 34px; text-align: center; } .lp-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .lp-feat { position: relative; display: block; text-decoration: none; color: inherit; background: #f7f7f5; border-radius: 18px; padding: 18px 20px 24px; transition: transform .2s, box-shadow .2s; } .lp-feat:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.07); } .lp-feat h3 { font: 700 20px Inter, sans-serif; margin: 18px 0 6px; } .lp-feat p { margin: 0; color: #555; line-height: 1.45; font-size: 15px; padding-right: 24px; } .lp-arrow { position: absolute; right: 20px; bottom: 22px; font-size: 20px; color: #1570ef; } .lp-art { height: 190px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; } .a1 { background: #fff4e0; } .a2 { background: #e9f3ff; } .a3 { background: #eefaf2; } .art-card, .art-list { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.07); display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; min-width: 210px; } .art-card b { font-size: 14.5px; margin-bottom: 2px; } .art-chat { display: flex; flex-direction: column; gap: 8px; width: 82%; font-size: 13.5px; } .art-chat .me { align-self: flex-end; background: #1570ef; color: #fff; padding: 8px 12px; border-radius: 14px 14px 4px 14px; } .art-chat .ai { background: #fff; padding: 8px 12px; border-radius: 14px 14px 14px 4px; box-shadow: 0 4px 12px rgba(0,0,0,.06); } .art-chat em { color: #1570ef; font-style: normal; } .art-list span { display: flex; align-items: center; gap: 8px; } .art-list i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c9c8c5; } .art-list i.ok { background: #22a06b; border-color: #22a06b; } .lp-use-list { max-width: 760px; margin: 0 auto; border-top: 1px solid #ececea; } .lp-use-list a { display: flex; align-items: center; gap: 14px; padding: 18px 6px; border-bottom: 1px solid #ececea; text-decoration: none; color: #1f1f1f; font: 500 17px Inter, sans-serif; } .lp-use-list a:hover { background: #fafaf9; } .lp-use-list .ms { color: #6b6b69; } .lp-use-list .go { margin-left: auto; color: #1570ef; transition: transform .2s; } .lp-use-list a:hover .go { transform: translateX(4px); } .lp-band { margin-top: 96px; border-top: 1px solid #ececea; border-bottom: 1px solid #ececea; overflow: hidden; } .lp-marquee { overflow: hidden; } .lp-track { display: flex; gap: 56px; width: max-content; padding: 22px 0; animation: lpScroll 34s linear infinite; font: 600 18px Inter, sans-serif; color: #2f2f2f; } @keyframes lpScroll { to { transform: translateX(-50%); } } .lp-final { text-align: center; padding: 96px 16px 110px; } .lp-final h2 { font: 700 clamp(34px, 5vw, 56px) Inter, sans-serif; letter-spacing: -.03em; margin: 0 0 26px; } @media (max-width: 860px) { .lp-feats { grid-template-columns: 1fr; } .lp-kinds { gap: 16px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .lp-face, .lp-track { animation: none; } } /* Landing: colours and type matched to the reference measurements */ .lp2 main { color: rgba(0,0,0,.95); } .lp-hero h1 { font-weight: 600; font-size: clamp(44px, 6.7vw, 86px); letter-spacing: -.04em; line-height: 1.1; color: rgba(0,0,0,.95); } .lp-sub { font-size: 20px; line-height: 1.4; color: rgba(0,0,0,.9); } .lp-btn { height: 38px; padding: 0 16px; border-radius: 8px; font-weight: 500; font-size: 16px; } .lp-btn.primary { background: #0075de; } .lp-btn.primary:hover { background: #005bab; } .lp-btn.soft { background: #e6f3fe; color: #005bab; } .lp-btn.soft:hover { background: #d3e9fd; } .lp-arrow, .lp-use-list .go, .art-chat em { color: #0075de; } .art-chat .me { background: #0075de; } .lp-feat { background: #f6f5f4; } .lp-h2, .lp-final h2 { font-weight: 600; } /* Big two-card section with built-in product mockups */ .lp-big { padding-top: 110px; } .lp-h2.left { text-align: left; font-size: clamp(36px, 5vw, 64px); letter-spacing: -.04em; margin-bottom: 28px; } .lp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .lp-bigcard { display: block; background: #f6f5f4; border-radius: 14px; padding: 24px 24px 0; text-decoration: none; color: rgba(0,0,0,.95); overflow: hidden; transition: box-shadow .2s; } .lp-bigcard:hover { box-shadow: 0 14px 40px rgba(0,0,0,.08); } .bc-kicker { margin: 0 0 8px; font-size: 15px; color: rgba(0,0,0,.8); } .bc-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; font: 700 21px/1.3 Inter, sans-serif; letter-spacing: -.01em; } .bc-go { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 17px; transition: transform .2s; } .lp-bigcard:hover .bc-go { transform: translateX(3px); } .bc-shot { position: relative; margin-top: 50px; background: #fff; border-radius: 12px 12px 0 0; padding: 40px 0 0 46px; height: 420px; box-shadow: 0 2px 10px rgba(0,0,0,.04); overflow: hidden; } .mk-head { display: flex; align-items: center; gap: 12px; font: 700 26px Inter, sans-serif; margin-bottom: 14px; } .mk-ic { font-size: 22px; } .mk-tabs { display: flex; gap: 14px; align-items: center; font-size: 13px; color: #8a8a88; margin-bottom: 14px; } .mk-tabs .on { background: #f1f1ef; color: #2f2f2f; padding: 5px 10px; border-radius: 6px; font-weight: 500; } .mk-row { display: grid; grid-template-columns: 1.5fr 1fr; padding: 8px 0; border-bottom: 1px solid #f0f0ee; font-size: 13.5px; color: #2f2f2f; } .mk-th { color: #8a8a88; font-size: 13px; } .mk-row.fade { opacity: .45; } .t { display: inline-block; font-weight: 400; font-size: 12.5px; padding: 1px 6px; border-radius: 4px; margin-right: 5px; } .t.o { background: #f1ede8; color: #6b5e4e; } .t.p { background: #fbe4ec; color: #9b3d63; } .t.y { background: #fbf0d3; color: #7d5e14; } .t.b { background: #dfeefb; color: #275e8d; } .t.g { background: #e3f2e8; color: #2c6a43; } .mk-rec { position: absolute; left: 30px; right: 40px; bottom: 26px; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 999px; padding: 10px 12px 10px 22px; box-shadow: 0 8px 28px rgba(0,0,0,.12); font-size: 16px; } .mk-rt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); } .mk-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 22px; } .mk-wave i { width: 2px; background: #999; border-radius: 2px; animation: mkWave 1.2s ease-in-out infinite; } .mk-wave i:nth-child(3n) { animation-delay: .2s; } .mk-wave i:nth-child(3n+1) { animation-delay: .45s; } .mk-wave i:nth-child(4n) { animation-delay: .7s; } @keyframes mkWave { 0%, 100% { height: 5px; } 50% { height: 20px; } } .mk-pause { width: 34px; height: 34px; border-radius: 50%; background: #f1f1ef; display: grid; place-items: center; font-size: 11px; color: #666; } .mk-stop { width: 34px; height: 34px; border-radius: 50%; background: #fde7e5; display: grid; place-items: center; } .mk-stop i { width: 12px; height: 12px; background: #e0473a; border-radius: 2px; } .bc-shot.dash { padding-left: 40px; } .mk-sync { display: inline-block; font-size: 13px; background: #f1f1ef; padding: 5px 10px; border-radius: 6px; color: #2f2f2f; } .mk-ring { position: absolute; left: -30px; bottom: 30px; width: 200px; height: 200px; background: #fff; border-radius: 50%; box-shadow: 0 6px 20px rgba(0,0,0,.06); display: grid; place-items: center; } .mk-ring svg { position: absolute; inset: 10px; width: 180px; } .mk-ring b { font-size: 34px; } .mk-ring small { position: absolute; top: 120px; font-size: 12px; color: #8a8a88; } .mk-bars { position: absolute; left: 44%; bottom: 70px; width: 170px; height: 200px; display: flex; align-items: flex-end; gap: 22px; padding: 14px; background: #fff; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.05); } .mk-bars i { flex: 1; border-radius: 3px 3px 0 0; animation: mkGrow 1.2s ease both; transform-origin: bottom; } @keyframes mkGrow { from { transform: scaleY(0); } } .mk-line { position: absolute; right: -20px; bottom: 90px; width: 190px; opacity: .9; } .mk-ask { position: absolute; left: 70px; right: 20px; bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-radius: 12px; padding: 12px 12px 12px 18px; box-shadow: 0 8px 28px rgba(0,0,0,.12); font-size: 16px; } .mk-ask i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #0075de; color: #fff; display: grid; place-items: center; font-style: normal; } @media (max-width: 860px) { .lp-duo { grid-template-columns: 1fr; } .bc-shot { padding-left: 24px; } } @media (prefers-reduced-motion: reduce) { .mk-wave i, .mk-bars i { animation: none; } } /* Row of five use-case cards */ .lp-uc { padding-top: 22px; } .uc-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .uc-card { display: flex; flex-direction: column; gap: 32px; padding: 18px 18px 22px; border: 1px solid #e6e6e3; border-radius: 12px; background: #fff; text-decoration: none; color: rgba(0,0,0,.95); transition: box-shadow .2s, transform .2s; min-height: 112px; } .uc-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.07); transform: translateY(-2px); } .uc-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; } .uc-ic svg { width: 17px; height: 17px; } .uc-card b { font: 600 16px/1.35 Inter, sans-serif; } .uc-card b span { display: inline-block; transition: transform .2s; } .uc-card:hover b span { transform: translateX(3px); } @media (max-width: 1000px) { .uc-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .uc-row { grid-template-columns: 1fr; } } .uc-ic.st { width: 38px; height: 38px; } .uc-ic.st svg { width: 32px; height: 32px; } .uc-card:hover .uc-ic.st svg { animation: icWiggle .5s ease; } @keyframes icWiggle { 30% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } } /* Highlighted word changes colour with each word */ .lp-pill { transition: opacity .25s, transform .25s, background-color .35s, color .35s; } .lp-pill i { transition: background-color .35s; } .lp-pill[data-c="1"] { background: #fde8d3; color: #8a4a12; } .lp-pill[data-c="1"] i { background: #f08a24; } .lp-pill[data-c="2"] { background: #dff3e4; color: #1f6b3a; } .lp-pill[data-c="2"] i { background: #2ba94f; } .lp-pill[data-c="3"] { background: #e1efff; color: #1d5ea8; } .lp-pill[data-c="3"] i { background: #1f8ef1; } .lp-pill[data-c="4"] { background: #fde2e1; color: #a3322a; } .lp-pill[data-c="4"] i { background: #ef4b3a; } /* ===== Login / sign-up page ===== */ .auth2 { background: #fff; min-height: 100vh; font-family: Inter, -apple-system, sans-serif; } .a2-main { width: 100%; max-width: 360px; margin: 0 auto; padding: 38px 16px 40px; display: flex; flex-direction: column; align-items: stretch; } .a2-logo { align-self: center; width: 42px; height: 42px; margin-bottom: 26px; } .a2-logo svg { width: 100%; height: 100%; } .a2-title { margin: 0 0 30px; text-align: center; display: flex; flex-direction: column; font: 600 22px/1.25 Inter, sans-serif; color: #111; letter-spacing: -.01em; } .a2-sub { color: #9b9a97; } .a2-form { display: flex; flex-direction: column; } .a2-label { font-size: 12px; color: #6b6b69; margin: 0 0 5px; } .a2-input { height: 40px; border: 1px solid #dededb; border-radius: 6px; padding: 0 12px; font: 15px Inter, sans-serif; color: #111; margin-bottom: 14px; background: #fff; } .a2-input::placeholder { color: #a3a3a0; } .a2-input:focus { outline: none; border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; } .a2-hint { margin: -8px 0 18px; font-size: 12px; color: #9b9a97; } .a2-pw { display: flex; flex-direction: column; } .a2-pw.hidden, .a2-label.hidden, .a2-input.hidden { display: none; } .a2-continue { height: 40px; border: 0; border-radius: 6px; background: #2383e2; color: #fff; font: 500 15px Inter, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); } .a2-continue:hover { background: #0077d4; } .auth2 .auth-back { margin-top: 10px; background: none; border: 0; color: #6b6b69; font-size: 13px; cursor: pointer; } .auth2 .form-error { margin: -4px 0 10px; font-size: 13px; color: #d93025; min-height: 0; } .a2-or { display: flex; align-items: center; gap: 12px; margin: 26px 0 22px; color: #9b9a97; font-size: 14px; } .a2-or::before, .a2-or::after { content: ""; flex: 1; height: 1px; background: #e6e6e3; } .a2-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .a2-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 58px; border: 1px solid #e3e3e0; border-radius: 6px; background: #fff; font: 500 14px Inter, sans-serif; color: #2f2f2f; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .a2-tile:hover { background: #f7f7f5; } .a2-tile .ic { width: 16px; height: 16px; } .a2-tile.last { border-color: #2383e2; } .a2-switch { text-align: center; margin: 28px 0 0; font-size: 14px; color: #6b6b69; } .a2-switch a { color: #6b6b69; text-decoration: underline; } .auth2 .auth-msg { text-align: center; font-size: 13px; color: #d93025; margin: 10px 0 0; } .auth2 .auth-last { text-align: center; font-size: 12.5px; color: #6b6b69; margin: 12px 0 0; } .a2-terms { text-align: center; margin: 34px auto 0; max-width: 300px; font-size: 12px; line-height: 1.5; color: #9b9a97; } .a2-terms a { color: #9b9a97; } .a2-title { margin-left: -70px; margin-right: -70px; white-space: nowrap; } @media (max-width: 520px) { .a2-title { margin-left: 0; margin-right: 0; white-space: normal; } } /* Hero capsule, matched to the reference recording */ .lp-hero h1 { font-weight: 700; letter-spacing: -.045em; line-height: 1.14; } .lp-pill { border-radius: 999px; padding: .04em .36em .08em .3em; gap: .2em; font-weight: 500; letter-spacing: -.03em; margin: 0 .08em; vertical-align: .03em; color: #111 !important; transition: background-color .2s; } .lp-pill i { width: .26em; height: .26em; flex: none; transition: background-color .2s; } .lp-pill[data-c="0"] { background: #d2f5d6; } .lp-pill[data-c="0"] i { background: #1aae39; } .lp-pill[data-c="1"] { background: #ffe2c7; } .lp-pill[data-c="1"] i { background: #f26b0f; } .lp-pill[data-c="2"] { background: #ffefb8; } .lp-pill[data-c="2"] i { background: #f5b301; } .lp-pill[data-c="3"] { background: #bfe6e2; } .lp-pill[data-c="3"] i { background: #22928a; } .lp-pill[data-c="4"] { background: #e6dcff; } .lp-pill[data-c="4"] i { background: #7c5cff; } .lp-pill[data-c="5"] { background: #d6e8ff; } .lp-pill[data-c="5"] i { background: #1f7ae0; } .lp-line2 { white-space: nowrap; } .lp-hero { max-width: none; } .lp-hero h1 { font-size: clamp(34px, 6.2vw, 84px); } @media (max-width: 640px) { .lp-line2 { white-space: normal; } } /* ===== Top bar, matched to the reference ===== */ .s-nav.s2 { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 16px; background: #fff; border-bottom: 0; font-family: Inter, -apple-system, sans-serif; } .s2-logo { width: 30px; height: 30px; justify-self: start; display: block; } .s2-logo svg { width: 100%; height: 100%; } .s-nav.s2 .s-links { justify-self: center; display: flex; align-items: center; gap: 4px; } .s-nav.s2 .s-links > a, .s-nav.s2 .s-dd > button { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border: 0; background: none; border-radius: 8px; font: 500 15px Inter, sans-serif; color: rgba(0,0,0,.9); text-decoration: none; cursor: pointer; } .s-nav.s2 .s-links > a:hover, .s-nav.s2 .s-dd > button:hover { background: #f2f1ef; } .s-nav.s2 .s-dd > button .ms { font-size: 18px; color: rgba(0,0,0,.7); } .s2-actions { justify-self: end; display: flex; align-items: center; gap: 10px; } .s2-login { height: 34px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 8px; font: 500 15px Inter, sans-serif; color: rgba(0,0,0,.9); text-decoration: none; } .s2-login:hover { background: #f2f1ef; } .s2-cta { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 8px; background: #0075de; color: #fff; font: 500 15px Inter, sans-serif; text-decoration: none; } .s2-cta:hover { background: #005bab; } @media (max-width: 860px) { .s-nav.s2 .s-links { display: none; } .s-nav.s2 { grid-template-columns: 1fr auto; } } /* ===== Footer, laid out like the reference ===== */ .s-foot.f2 { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; grid-template-rows: auto auto; gap: 0 40px; max-width: 1180px; margin: 0 auto; padding: 56px 24px 22px; background: #fff; border-top: 0; font-family: Inter, sans-serif; color: rgba(0,0,0,.9); } .f2-left { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; } .f2-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #111; font: 700 32px Inter, sans-serif; letter-spacing: -.03em; } .f2-brand svg { width: 38px; height: 38px; } .f2-quote { margin: 0; } .f2-quote p { margin: 0 0 12px; font: 400 19px/1.5 Georgia, "Times New Roman", serif; color: #222; text-indent: -.4em; } .f2-quote cite { font: 400 15px Inter, sans-serif; color: #7a7a78; font-style: normal; } .f2-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .f2-col { display: flex; flex-direction: column; gap: 8px; } .f2-col h4 { margin: 0 0 8px; font: 500 14px Inter, sans-serif; color: #7a7a78; } .f2-col a { font: 500 16px Inter, sans-serif; color: rgba(0,0,0,.9); text-decoration: none; padding: 2px 0; } .f2-col a:hover { text-decoration: underline; } .f2-col a.f2-more { margin-top: 14px; color: #6b6b69; } .f2-bottom { grid-column: 2; display: flex; align-items: center; gap: 0; margin-top: 46px; font: 400 15px Inter, sans-serif; color: #7a7a78; } .f2-bottom > span { width: 25%; } .f2-bottom > a { color: #7a7a78; text-decoration: none; } .f2-bottom > a:hover { text-decoration: underline; } .f2-lang { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid #e3e3e0; border-radius: 999px; background: #fff; font: 500 15px Inter, sans-serif; color: #111; cursor: default; } .f2-lang .ms { font-size: 19px; } .f2-lang .ms:last-child { font-size: 18px; color: #6b6b69; } @media (max-width: 900px) { .s-foot.f2 { grid-template-columns: 1fr; } .f2-cols { grid-template-columns: repeat(2, 1fr); margin-top: 30px; } .f2-bottom { grid-column: 1; flex-wrap: wrap; gap: 12px; } .f2-bottom > span { width: auto; } } /* Footer spans the full width */ .s-foot.f2 { max-width: none; width: 100%; box-sizing: border-box; padding: 64px clamp(24px, 5.5vw, 110px) 24px; grid-template-columns: minmax(280px, 1fr) minmax(0, 2.1fr); } /* "Get started today." band on light grey */ .lp-final { background: #f6f5f4; margin-top: 96px; padding: 90px 16px 100px; } .lp-final { margin-top: 0 !important; } .lp-band { border-bottom: 0; } /* Capsule sits on the same baseline as the headline, with a soft word change */ .lp-pill { display: inline-block; vertical-align: baseline; line-height: 1; padding: .1em .36em .12em .3em; white-space: nowrap; overflow: hidden; box-sizing: border-box; transition: width .4s cubic-bezier(.3,.7,.3,1), background-color .4s ease; } .lp-pill i { display: inline-block; vertical-align: .08em; margin-right: .2em; transition: background-color .4s ease, transform .4s ease; } #cycleWord { display: inline-block; transition: transform .28s cubic-bezier(.3,.7,.3,1), opacity .28s ease, filter .28s ease; } #cycleWord.out { transform: translateY(-.35em); opacity: 0; filter: blur(2px); transition-duration: .18s; } #cycleWord.in { transform: translateY(.35em); opacity: 0; filter: blur(2px); transition: none; } .lp-pill:not(.x) i { animation: none; } @media (prefers-reduced-motion: reduce) { .lp-pill, #cycleWord { transition: none; } } .lp-pill { overflow: clip; overflow-clip-margin: 0; } #cycleWord { vertical-align: baseline; } /* ===== Pricing page, laid out like the reference ===== */ .pr2 { max-width: 1200px; margin: 0 auto; padding: 72px 24px 40px; font-family: Inter, -apple-system, sans-serif; color: rgba(0,0,0,.95); text-align: left; } .pr2-title { font: 700 clamp(40px, 5vw, 64px)/1.05 Inter, sans-serif; letter-spacing: -.04em; margin: 0 0 40px; } .pr2-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; } .pr2-save { color: #6b6b69; font-size: 14px; } .pr2-switch { width: 34px; height: 20px; border-radius: 999px; border: 0; background: #d3d3d0; position: relative; cursor: pointer; padding: 0; transition: background .2s; } .pr2-switch i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; } .pr2-switch.on { background: #0075de; } .pr2-switch.on i { transform: translateX(14px); } .pr2 .pr-note { text-align: left; } .pr2 #plans { display: block; } .pr2-groups { display: grid; grid-template-columns: 2fr 1.1fr; gap: 12px; align-items: start; } .pr2-group { border-radius: 12px; padding: 34px 34px 36px; } .pr2-group.personal { background: #fff; border: 1px solid #ececea; } .pr2-group.biz { background: #f2f9ff; } .pr2-group h2 { font: 700 30px/1.2 Inter, sans-serif; letter-spacing: -.02em; margin: 0 0 32px; } .pr2-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 24px; } .pr2-plan h3 { font: 700 22px Inter, sans-serif; margin: 0 0 12px; } .pr2-price { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; } .pr2-price b { font: 600 22px Inter, sans-serif; } .pr2-price small { font-size: 12px; line-height: 1.35; color: #6b6b69; padding-top: 2px; } .pr2-desc { font-size: 15px; line-height: 1.45; color: rgba(0,0,0,.85); margin: 8px 0 18px; min-height: 66px; } .pr2-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; border: 0; border-radius: 8px; background: #e6f3fe; color: #005bab; font: 500 15px Inter, sans-serif; cursor: pointer; } .pr2-btn:hover { background: #d3e9fd; } .pr2-btn.solid { background: #0075de; color: #fff; } .pr2-btn.solid:hover { background: #005bab; } .pr2 .cur { height: 36px; display: grid; place-items: center; border-radius: 8px; background: #f1f1ef; color: #6b6b69; font-size: 14px; font-weight: 500; } .pr2-inc { margin: 24px 0 10px; font: 600 14px Inter, sans-serif; } .pr2-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .pr2-plan li { display: flex; gap: 8px; font-size: 14px; line-height: 1.4; color: rgba(0,0,0,.85); } .pr2-plan li svg { flex: none; margin-top: 2px; color: #6b6b69; } .pr2 .compare { margin-top: 90px; } @media (max-width: 1100px) { .pr2-groups { grid-template-columns: 1fr; } .pr2-cols { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } } #testBanner { display: none !important; } .pr2-groups { grid-template-columns: 1fr 1fr; gap: 12px; } .pr2-cols { gap: 28px; } /* Pricing: sticker stacks, Recommended badge, add-ons card */ .pr2-ghead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 32px; } .pr2-ghead h2 { margin: 0; } .pr2-stack { display: flex; flex: none; } .pr2-stack span { width: 58px; height: 58px; border-radius: 50%; border: 2px solid #111; display: grid; place-items: center; margin-left: -14px; box-shadow: 2px 3px 0 #111; } .pr2-stack span:first-child { margin-left: 0; } .pr2-stack svg { width: 44px; height: 44px; } .pr2-rec { display: inline-block; vertical-align: middle; margin-left: 6px; font: 600 12px Inter, sans-serif; color: #0075de; background: #fff; padding: 3px 8px; border-radius: 999px; } .pr2-btn.white { background: #fff; color: #0075de; } .pr2-btn.white:hover { background: #f7fbff; } .pr2-addons { margin-top: 34px; background: #fff; border-radius: 12px; padding: 6px 26px; } .pr2-addon { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 22px 0; } .pr2-addon + .pr2-addon { border-top: 1px solid #e4eef8; } .pr2-addon h4 { margin: 0 0 6px; font: 700 16px Inter, sans-serif; } .pr2-addon p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(0,0,0,.85); } .pr2-addon a { color: #0075de; text-decoration: none; } .pr2-addon .pr2-stack span { width: 46px; height: 46px; } .pr2-addon .pr2-stack svg { width: 34px; height: 34px; } .pr2-rec { background: none; padding: 0; margin-left: 4px; font: 400 14px Inter, sans-serif; color: #6b6b69; border-radius: 0; } /* Logo on the subscription and checkout screens */ .up-brand, .co-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 24px Inter, sans-serif; letter-spacing: -.02em; color: #111; } .cv-logo { width: 32px; height: 32px; flex: none; } .co-brand { margin: 8px 0 18px; } /* Home, matched to the reference screenshot */ body #app .home-hero .home-face { position: relative; overflow: visible !important; width: 70px; height: 70px; margin-bottom: 24px; } .face-pencil { position: absolute; width: 36px; height: 36px; top: -12px; right: -22px; transform: rotate(-4deg); } body #app .home-hero h1 { font-size: 34px; font-weight: 700; margin-bottom: 44px; } body #app .home-hero .composer { min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 14px 10px; } body #app .home-hero .home-quick { margin-top: 30px; } /* Sidebar sections open with their items listed underneath */ .nn-sec.open .nn-items { display: block; margin-bottom: 8px; } #app .sidenav.nn .nn-sec a { font-size: 15px !important; color: #37352f !important; height: 34px !important; padding: 0 0 0 7px !important; gap: 12px; } #app .sidenav.nn .nn-sec a::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #ececea; flex: none; } #app .sidenav.nn .nn-sec a:has(.nn-dot)::before { display: none; } #app .sidenav.nn #nnRecents a::before { display: none; } /* In-app upgrade screen uses the pricing-page layout */ .upv .up2 { max-width: 1200px; margin: 0 auto; padding: 40px 24px 60px; text-align: left; } .upv .up2 .up-brand { margin-bottom: 26px; } .upv { background: #fff; overflow-y: auto; } /* ===== Payment window ===== */ .pay-dim { position: fixed; inset: 0; background: rgba(15,15,15,.45); z-index: 80; } .pay-modal { position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 16px; padding: 26px 30px 28px; box-shadow: 0 24px 70px rgba(0,0,0,.25); font-family: Inter, sans-serif; color: rgba(0,0,0,.92); box-sizing: border-box; } .pay-x { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: #f1f1ef; display: grid; place-items: center; color: #555; } .pay-x svg { width: 15px; height: 15px; } .pay-up { width: 26px; height: 26px; border-radius: 50%; background: #2383e2; color: #fff; display: grid; place-items: center; } .pay-up svg { width: 15px; height: 15px; } .pay-modal h1 { margin: 16px 0 4px; font: 700 23px Inter, sans-serif; letter-spacing: -.01em; } .pay-sub { margin: 0 0 26px; font-size: 16px; color: #6b6b69; } .pay-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; } .pay-modal label { display: flex; flex-direction: column; gap: 6px; font: 500 13px Inter, sans-serif; color: #55534e; margin-bottom: 14px; } .pay-modal input, .pay-modal select { height: 34px; border: 1px solid #e3e2df; border-radius: 6px; background: #f7f7f5; padding: 0 10px; font: 14px Inter, sans-serif; color: #111; box-sizing: border-box; width: 100%; } .pay-modal input:focus, .pay-modal select:focus { outline: none; border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; background: #fff; } .pay-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pay-lbl { margin: 4px 0 8px; font: 500 13px Inter, sans-serif; color: #55534e; } .pay-card { border: 1px solid #e6e6e3; border-radius: 8px; padding: 14px 14px 2px; } .pc-head { display: flex; align-items: center; gap: 12px; font: 500 14px Inter, sans-serif; margin-bottom: 14px; } .pc-head svg { width: 18px; height: 18px; } .pc-num { position: relative; } .pc-num input { padding-right: 120px; } .pc-brands { position: absolute; right: 6px; top: 6px; display: flex; gap: 3px; } .pc-brands b { height: 22px; min-width: 30px; border-radius: 3px; display: grid; place-items: center; font: 800 9px Inter, sans-serif; color: #fff; padding: 0 3px; } .pc-brands .v { background: #1a1f71; font-style: italic; } .pc-brands .a { background: #2e77bc; } .pc-brands .m { background: #252525; position: relative; } .pc-brands .m i { position: absolute; width: 11px; height: 11px; border-radius: 50%; top: 5.5px; } .pc-brands .m i:first-child { background: #eb001b; left: 6px; } .pc-brands .m i:last-child { background: #f79e1b; left: 12px; mix-blend-mode: screen; } .pc-stripe { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: #55534e; margin: 0 0 14px; } .pc-stripe svg { flex: none; width: 18px; height: 18px; color: #2f9e44; } .pay-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid #e6e6e3; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; background: #fff; cursor: pointer; font-family: Inter, sans-serif; } .pay-opt.on { border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; } .pay-opt .ro { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c9c8c5; flex: none; box-sizing: border-box; } .pay-opt.on .ro { border: 5px solid #2383e2; } .pay-opt b { display: block; font: 500 15px Inter, sans-serif; color: #111; } .pay-opt small { font-size: 13.5px; color: #6b6b69; } .pay-opt em { margin-left: auto; font: 600 12px Inter, sans-serif; font-style: normal; color: #2383e2; background: #e6f3fe; padding: 2px 7px; border-radius: 4px; } .pay-seats { margin-top: 6px; } .pay-seats input { width: 110px; } .pay-right .pay-lbl:not(:first-child) { margin-top: 22px; } .pay-confirm { border: 1px solid #e6e6e3; border-radius: 8px; padding: 16px; } .pay-total { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; } .pay-total b { font: 700 26px Inter, sans-serif; } .pay-total span { font-size: 16px; } .pay-total small { width: 100%; font-size: 12px; color: #8a8a88; } .pay-modal .pay-terms { flex-direction: row; align-items: flex-start; gap: 10px; font: 400 12px/1.5 Inter, sans-serif; color: #6b6b69; } .pay-terms input { width: 15px; height: 15px; flex: none; margin-top: 2px; padding: 0; } .pay-go { width: 100%; height: 36px; border: 0; border-radius: 6px; background: #2383e2; color: #fff; font: 500 15px Inter, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .pay-go:hover { background: #0077d4; } .pay-go:disabled { opacity: .6; } .pay-modal .form-error { margin: 0 0 8px; font-size: 13px; color: #d93025; } @media (max-width: 760px) { .pay-grid { grid-template-columns: 1fr; } } #app .sidenav.nn .nn-homerow .nn-ic { margin-left: 0 !important; } #app .sidenav.nn .nn-homerow .nn-ic:first-of-type, #app .sidenav.nn .nn-homerow #nnInstant { margin-left: 16px !important; } #app .sidenav.nn .nn-homerow { gap: 0 !important; } /* Middle sections scroll; top and bottom stay put */ .sidenav.nn .nn-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px 0 -5px; padding: 0 6px 8px 5px; scrollbar-width: thin; } .sidenav.nn .rail-bottom { flex: none; margin-top: 0 !important; border-top: 0; } .sidenav.nn .nn-scroll::-webkit-scrollbar { width: 6px; } .sidenav.nn .nn-scroll::-webkit-scrollbar-thumb { background: #dcdbd8; border-radius: 3px; } body.nav-collapsed .sidenav.nn .nn-scroll { display: none !important; } #app .sidenav.nn .nn-sec a::before { display: none !important; content: none !important; } #app .sidenav.nn .nn-sec .nn-dot { display: none; } /* Collapsed sections with a small arrow that turns when opened */ .nn-label { display: flex !important; align-items: center; gap: 4px; } .nn-label::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-left: 4px; opacity: 0; transition: transform .2s, opacity .15s; } .nn-label:hover::after { opacity: .8; } .nn-sec.open .nn-label::after { transform: rotate(45deg); opacity: .8; } .nn-sec:not(.open) .nn-items { display: none !important; } /* Home row icons: spacing measured from the reference */ #app .sidenav.nn .nn-homerow .nn-ic, #app .sidenav.nn .nn-homerow #nnInstant { width: 30px !important; height: 30px !important; margin-left: 5px !important; } #app .sidenav.nn .nn-homerow > a.nn-home + .nn-ic { margin-left: 7px !important; } #app .sidenav.nn .nn-homerow .nn-ic svg { width: 18px !important; height: 18px !important; color: #a5a4a1 !important; } body #app .sidenav.nn .nn-homerow #nnInstant { margin-left: 7px !important; } body #app .sidenav.nn .nn-homerow #nnInstant + .nn-ic { margin-left: 5px !important; } body #app .sidenav.nn .nn-homerow .nn-ic { display: grid !important; place-items: center !important; padding: 0 !important; } body #app .sidenav.nn .nn-homerow a.nn-home { margin-right: 0 !important; } html body #app .sidenav.nn .nn-homerow .nn-ic.nn-cal { margin-left: 5px !important; } html body #app .sidenav.nn .nn-homerow .nn-ic.nn-cal { margin-left: 11px !important; } html body #app #sidenav .nn-homerow #nnInstant + a.nn-cal { margin-left: 5px !important; display: grid !important; place-items: center !important; width: 30px !important; padding: 0 !important; } html body #app #sidenav .nn-homerow .nn-ic svg { margin: auto !important; justify-self: center !important; align-self: center !important; } /* Profile menu */ .nn-profile { position: fixed; left: 8px; bottom: 52px; width: 300px; background: #fff; border: 1px solid #e6e6e3; border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.12); z-index: 90; font-family: Inter, sans-serif; color: #2f2f2f; padding: 6px 0; animation: npIn .15s ease; } @keyframes npIn { from { opacity: 0; transform: translateY(6px); } } .np-head { display: flex; align-items: center; gap: 12px; padding: 8px 14px 12px; } .np-head b { display: block; font: 500 15px Inter, sans-serif; } .np-head small { font-size: 13px; color: #8a8a88; } .np-av { width: 36px; height: 36px; border-radius: 6px; background: #ececea; color: #6b6b69; display: grid; place-items: center; font: 500 18px Inter, sans-serif; flex: none; } .np-av.sm { width: 20px; height: 20px; font-size: 11px; border-radius: 4px; } .np-sec { border-top: 1px solid #ededeb; padding: 6px 0; } .np-item { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 14.5px; color: #2f2f2f; text-decoration: none; cursor: pointer; } .np-item:hover { background: #f4f4f2; } .np-item svg { width: 18px; height: 18px; flex: none; color: #2f2f2f; } .np-mail { margin: 4px 14px 6px; font-size: 12.5px; color: #8a8a88; overflow: hidden; text-overflow: ellipsis; } .np-ws { cursor: default; } .np-check { margin-left: auto; } .np-check svg { width: 16px; height: 16px; } .np-new, .np-new svg { color: #2383e2 !important; } .np-out { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid #ededeb; background: none; padding: 10px 14px 6px; font: 400 13.5px Inter, sans-serif; color: #8a8a88; cursor: pointer; } .np-out:hover { color: #2f2f2f; } html body #app #sidenav .nn-homerow .nn-ic svg { margin: auto !important; } html body #app #sidenav .nn-homerow a.nn-cal, html body #app #sidenav .nn-homerow #nnInstant { display: flex !important; align-items: center !important; justify-content: center !important; } /* Keep the Home/action cluster aligned with the sidebar content. */ html body #app #sidenav .nn-homerow { margin-left: 8px !important; } /* Invite members is a button, so reset the browser's native button chrome. */ html body #app #sidenav .nn-profile button.np-item { width: 100%; border: 0; margin: 0; background: transparent; font: inherit; text-align: left; color: #2f2f2f; } html body #app #sidenav .nn-profile button.np-item:hover { background: #f4f4f2; } /* Home "+" menu identical to the bot's */ body #app .home-hero .composer .pop-wrap { position: relative; } body #app .home-hero #cmpPlus { width: 28px; height: 28px; border-radius: 50%; } body #app .home-hero #cmpPlus.open, body #app .home-hero #cmpPlus:hover { background: #f1f1ef; } body #app .home-hero .composer { z-index: 5; } /* Pencil sits on the face on both Home and Convene Bot */ .bot-face.home-face { position: relative; overflow: visible !important; } .bot-face .face-pencil { position: absolute; width: 36px; height: 36px; top: -12px; right: -22px; display: block !important; z-index: 2; } .upv .up2 .up-brand { position: fixed; top: 18px; left: 22px; margin: 0; z-index: 3; font-size: 20px; } .upv .up2 .up-brand .cv-logo { width: 28px; height: 28px; } .upv .up2 { padding-top: 72px; } .bot-face .face-pencil, body #app .home-hero .home-face .face-pencil { top: -26px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) rotate(-52deg) !important; width: 34px !important; height: 34px !important; } .bot-face .face-pencil, body #app .home-hero .home-face .face-pencil { top: -34px !important; } .bot-face .face-pencil, body #app .home-hero .home-face .face-pencil { top: -10px !important; left: auto !important; right: -16px !important; transform: rotate(-4deg) !important; width: 36px !important; height: 36px !important; } .bot-face .face-pencil, body #app .home-hero .home-face .face-pencil { top: -4px !important; right: -8px !important; } /* ===== Agents ===== */ #app .sidenav.nn .nn-add { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 0 0 7px; border: 0; background: none; border-radius: 6px; font: 400 14.5px Inter, sans-serif; color: #6b6a67; cursor: pointer; } #app .sidenav.nn .nn-add:hover { background: #ececea; } #app .sidenav.nn .nn-add svg { width: 18px; height: 18px; color: #8f8e8a; } .ag-st { display: inline-grid; place-items: center; border-radius: 50%; border: 1.6px solid #111; flex: none; } .ag-st svg { width: 72%; height: 72%; } #modalCard.wide:has(.agm) { width: min(900px, calc(100vw - 32px)); max-width: none; border-radius: 16px; padding: 22px 28px 26px; } .agm { position: relative; font-family: Inter, sans-serif; max-width: 640px; margin: 0 auto; } .agm-top { position: absolute; right: -10px; top: -8px; } .agm-manual { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: 500 15px Inter, sans-serif; color: #55534e; cursor: pointer; padding: 6px 8px; border-radius: 8px; } .agm-manual:hover { background: #f4f4f2; } .agm-manual svg { width: 18px; height: 18px; } .agm-art { display: flex; margin: 26px 0 14px; } .agm-art .ag-st { margin-left: -14px; box-shadow: 2px 3px 0 #111; } .agm-art .ag-st:first-child { margin-left: 0; } .agm h2 { margin: 0 0 6px; font: 700 28px Inter, sans-serif; letter-spacing: -.02em; color: #2c2c2c; } .agm-sub { margin: 0 0 20px; font-size: 16px; color: #6b6b69; } .agm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .agm-tabs button { border: 0; background: none; height: 32px; padding: 0 12px; border-radius: 999px; font: 500 15px Inter, sans-serif; color: #6b6b69; cursor: pointer; } .agm-tabs button.on { background: #f1f1ef; color: #2f2f2f; } .agm-tabs button:hover { color: #2f2f2f; } .agm-list { max-height: 300px; overflow-y: auto; margin: 0 -8px; } .agm-row { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 10px; } .agm-row:hover { background: #fafaf9; } .agm-row .grow { display: flex; flex-direction: column; gap: 2px; } .agm-row b { font: 500 16px Inter, sans-serif; color: #2f2f2f; } .agm-row small { font-size: 14px; line-height: 1.45; color: #6b6b69; } .agm-row em { font: 500 12px Inter, sans-serif; font-style: normal; color: #2383e2; background: #e6f3fe; padding: 2px 7px; border-radius: 4px; margin-left: 6px; vertical-align: middle; } .agm-add { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #e6f3fe; color: #2383e2; display: grid; place-items: center; cursor: pointer; flex: none; } .agm-add:hover { background: #d3e9fd; } .agm-add svg { width: 16px; height: 16px; } .agm-ask { position: relative; margin-top: 16px; border: 1px solid #e3e3e0; border-radius: 14px; padding: 14px 54px 14px 16px; box-shadow: 0 4px 16px rgba(0,0,0,.04); } .agm-ask textarea { width: 100%; border: 0; resize: none; font: 15px Inter, sans-serif; outline: none; background: none; min-height: 48px; } .agm-go { position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f2f2f1; color: #c4c4c2; display: grid; place-items: center; cursor: pointer; } .agm-go.send { background: #0d0d0d; color: #fff; } .agm-go svg { width: 16px; height: 16px; } .agm .form-error { margin: 8px 0 0; color: #d93025; font-size: 13px; } .ag-page { max-width: 760px; margin: 0 auto; padding: 48px 24px 60px; font-family: Inter, sans-serif; } .ag-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; } .ag-head .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ag-name { border: 0; font: 700 28px Inter, sans-serif; letter-spacing: -.02em; padding: 2px 4px; margin-left: -4px; border-radius: 6px; background: none; color: #2c2c2c; } .ag-name:hover, .ag-desc:hover { background: #f7f7f5; } .ag-desc { border: 0; font: 15px Inter, sans-serif; color: #6b6b69; padding: 2px 4px; margin-left: -4px; border-radius: 6px; background: none; } .ag-name:focus, .ag-desc:focus { outline: none; background: #f4f4f2; } .ag-run { width: auto !important; padding: 0 18px; flex: none; } .ag-lbl { display: flex; flex-direction: column; gap: 6px; font: 500 13px Inter, sans-serif; color: #55534e; margin-bottom: 16px; } .ag-lbl select, .ag-lbl textarea { border: 1px solid #e3e2df; border-radius: 8px; background: #fff; padding: 9px 11px; font: 14.5px/1.5 Inter, sans-serif; color: #111; } .ag-lbl select { height: 38px; padding: 0 10px; } .ag-lbl textarea:focus, .ag-lbl select:focus { outline: none; border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; } .ag-btns { display: flex; align-items: center; gap: 14px; } .ag-btns .pr2-btn { width: auto; padding: 0 16px; } .ag-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #55534e; } .ag-del { margin-left: auto; border: 0; background: none; color: #d93025; font: 500 14px Inter, sans-serif; cursor: pointer; } .ag-h3 { margin: 40px 0 12px; font: 700 18px Inter, sans-serif; } .ag-runc { border: 1px solid #ececea; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; } .ag-when { font-size: 12.5px; color: #8a8a88; margin-bottom: 8px; } .ag-acts { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0ee; font-size: 13.5px; color: #1a7f37; display: flex; flex-direction: column; gap: 4px; } /* ===== Meeting room, lobby and waiting screens in the app's light style ===== */ body:has(#meeting:not(.hidden)), body:has(#lobby:not(.hidden)), body:has(#waitingView:not(.hidden)), body:has(#endedView:not(.hidden)) { background: #f8f8f6; color: #2f2f2f; } #meeting, #lobby, #waitingView, #endedView { font-family: Inter, -apple-system, sans-serif; } #meeting { background: #f8f8f6 !important; color: #2f2f2f; } #meeting .stage { background: transparent; } #meeting .tile { background: #ececea !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(0,0,0,.04); } #meeting .tile .name, #meeting .tile .tile-name, #meeting .tile [class*="name"] { background: rgba(255,255,255,.92) !important; color: #2f2f2f !important; border-radius: 8px; font: 500 13px Inter, sans-serif; padding: 3px 8px; } #meeting .tile .avatar, #meeting .tile [class*="avatar"] { box-shadow: 0 0 0 3px #fff; } #meeting .tile.speaking { outline: 3px solid #2383e2 !important; outline-offset: -3px; } #meeting .controlbar { background: #fff !important; border-top: 1px solid #ededeb; color: #2f2f2f !important; height: 76px; } #meeting .cb-left, #meeting .cb-left * { color: #6b6b69 !important; font: 500 14px Inter, sans-serif; } #meeting .controlbar .round { background: #f1f1ef !important; color: #2f2f2f !important; width: 46px; height: 46px; border: 0; transition: background .15s, transform .1s; } #meeting .controlbar .round:hover { background: #e6e6e3 !important; } #meeting .controlbar .round:active { transform: scale(.95); } #meeting .controlbar .round.off, #meeting .controlbar .round.danger, #meeting .controlbar .round[aria-pressed="false"].off { background: #fde7e5 !important; color: #d93025 !important; } #meeting .controlbar .round.on, #meeting .controlbar .round.active { background: #e6f3fe !important; color: #0075de !important; } #meeting .controlbar .hangup { background: #e5484d !important; color: #fff !important; border-radius: 999px; width: 64px; height: 46px; border: 0; } #meeting .controlbar .hangup:hover { background: #cf3a3f !important; } #meeting .cb-right .icon-btn { color: #55534e !important; background: none; border-radius: 10px; width: 42px; height: 42px; position: relative; } #meeting .cb-right .icon-btn:hover { background: #f1f1ef !important; } #meeting .cb-right .icon-btn.on { background: #e6f3fe !important; color: #0075de !important; } #meeting .q-chip, #meeting .tier-chip { background: #f1f1ef !important; color: #55534e !important; border-radius: 6px; padding: 2px 8px; } #meeting .panel { background: #fff !important; color: #2f2f2f !important; border-radius: 16px !important; box-shadow: 0 8px 30px rgba(0,0,0,.08) !important; border: 1px solid #ececea; font-family: Inter, sans-serif; } #meeting .panel-head h3 { font: 600 17px Inter, sans-serif; color: #2f2f2f; } #meeting .panel .icon-btn { color: #6b6b69 !important; } #meeting .panel .section-label { color: #8a8a88; font: 600 12px Inter, sans-serif; text-transform: none; letter-spacing: 0; } #meeting .info-box { background: #f7f7f5 !important; color: #55534e !important; border-radius: 10px; border: 0; font-size: 13px; line-height: 1.5; } #meeting .info-box.ai { background: #f2f9ff !important; } #meeting .info-box .ms { color: #0075de; } #meeting .chat-form, #meeting .chat-form input { background: #f7f7f5 !important; color: #2f2f2f !important; border-radius: 999px; border: 1px solid #ececea; } #meeting .chat-form input:focus { outline: none; } #meeting .chip { background: #fff !important; color: #2f2f2f !important; border: 1px solid #e3e3e0 !important; border-radius: 999px; font: 500 13px Inter, sans-serif; } #meeting .chip:hover { background: #f4f4f2 !important; } #meeting .menu, #meeting .emoji-pop { background: #fff !important; color: #2f2f2f !important; border: 1px solid #e6e6e3; border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.12); } #meeting .menu button { color: #2f2f2f !important; } #meeting .menu button:hover { background: #f4f4f2 !important; } #meeting .captions { background: rgba(255,255,255,.95) !important; color: #2f2f2f !important; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.08); font-family: Inter, sans-serif; } #meeting .notice { background: #fff !important; color: #2f2f2f !important; border: 1px solid #ececea; border-radius: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.08); } #meeting .rec-badge { background: #fff !important; color: #d93025 !important; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.08); } #meeting .toggle { color: #2f2f2f; } /* Agents panel */ .mag-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #f0f0ee; } .mag-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; } .mag-ic .ms { font-size: 18px; } .mag-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mag-txt b { font: 500 14px Inter, sans-serif; } .mag-txt small { font-size: 12px; color: #8a8a88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mag-row.on .mag-txt small { color: #1a7f37; } .mag-btn { height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid #e3e3e0; background: #fff; font: 500 12.5px Inter, sans-serif; color: #2f2f2f; cursor: pointer; flex: none; } .mag-btn.primary { background: #0075de; border-color: #0075de; color: #fff; } .mag-btn:disabled { opacity: .6; } .mag-out { margin-top: 12px; border: 1px solid #ececea; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; } .mag-when { font-size: 12px; color: #8a8a88; margin-bottom: 6px; } .mag-act { color: #1a7f37; font-size: 13px; margin-top: 4px; } .ag-make { display: inline-block; margin-top: 14px; color: #0075de; font: 500 13.5px Inter, sans-serif; text-decoration: none; } #agentDot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #22a06b; } /* Lobby */ #lobby { background: #f8f8f6 !important; color: #2f2f2f; } #lobby .topbar { background: transparent !important; border: 0; } #lobby .brand b { color: #111; font: 700 20px Inter, sans-serif; } #lobby .preview { background: #ececea !important; border-radius: 18px !important; box-shadow: 0 6px 24px rgba(0,0,0,.06); } #lobby .preview-off { color: #6b6b69 !important; } #lobby .preview .round { background: rgba(255,255,255,.92) !important; color: #2f2f2f !important; border: 0; } #lobby .preview .round.off { background: #e5484d !important; color: #fff !important; } #lobby h2 { font: 700 30px Inter, sans-serif; letter-spacing: -.02em; color: #2c2c2c; } #lobby .field { background: #fff !important; border: 1px solid #e3e2df !important; border-radius: 8px !important; color: #111 !important; font: 15px Inter, sans-serif; } #lobby .field:focus { border-color: #2383e2 !important; box-shadow: 0 0 0 1px #2383e2; outline: none; } #lobby .device-row select { background: #fff !important; border: 1px solid #e3e2df; border-radius: 8px; color: #2f2f2f !important; } #lobby #joinNow { background: #0075de !important; color: #fff !important; border-radius: 8px !important; height: 44px; font: 500 16px Inter, sans-serif; border: 0; } #lobby #joinNow:hover { background: #005bab !important; } #waitingView, #endedView { background: #f8f8f6 !important; color: #2f2f2f !important; } #waitingView h2, #endedView h2 { font: 700 26px Inter, sans-serif; color: #2c2c2c; } /* Listening badge */ #meeting .agents-live { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; background: #fff; border: 1px solid #ececea; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.08); font: 500 13.5px Inter, sans-serif; color: #2f2f2f; } #meeting .agents-live.hidden { display: none; } .al-ear { font-size: 18px !important; color: #22a06b; font-variation-settings: "wght" 300; } .al-bars { display: inline-flex; align-items: center; gap: 2px; height: 14px; } .al-bars i { width: 2.5px; border-radius: 2px; background: #22a06b; animation: alBar 1s ease-in-out infinite; } .al-bars i:nth-child(2) { animation-delay: .15s; } .al-bars i:nth-child(3) { animation-delay: .3s; } .al-bars i:nth-child(4) { animation-delay: .45s; } @keyframes alBar { 0%, 100% { height: 4px; } 50% { height: 14px; } } @media (prefers-reduced-motion: reduce) { .al-bars i { animation: none; height: 8px; } } /* Bare icons in the meeting bar: no filled circles, thin outline glyphs */ #meeting .controlbar .round, #meeting .controlbar .round:hover { background: transparent !important; box-shadow: none !important; } #meeting .controlbar .round:hover { background: #f4f4f2 !important; } #meeting .controlbar .ms, #meeting .cb-right .icon-btn, #lobby .preview .round .ms { font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 !important; font-size: 24px; } #meeting .controlbar .round.off, #meeting .controlbar .round.danger { background: transparent !important; color: #d93025 !important; } #meeting .controlbar .round.on, #meeting .controlbar .round.active { background: transparent !important; color: #0075de !important; } #meeting .controlbar .hangup { width: 52px; } #meeting .controlbar .hangup .ms { font-variation-settings: "FILL" 0, "wght" 400 !important; } #meeting .panel .ms { font-variation-settings: "FILL" 0, "wght" 300 !important; } /* bars rest flat and only move while someone is talking */ .al-bars i { animation-play-state: paused; height: 4px; } #meeting .agents-live.talking .al-bars i { animation-play-state: running; } #meeting .agents-live:not(.talking) .al-bars i { animation: none; height: 4px; } /* Agent icons + picker */ .ag-emo { display: inline-grid; place-items: center; line-height: 1; } .ag-img { overflow: hidden; background: #fff; } .ag-img img { width: 100%; height: 100%; object-fit: cover; } #app .sidenav.nn .nn-sec a.nn-agent { gap: 9px !important; } .nn-agent .ag-st { border-width: 1.2px; } .ag-head { position: relative; } .ag-iconbtn { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; transition: transform .15s; } .ag-iconbtn:hover { transform: scale(1.05); } .icp { position: absolute; top: 70px; left: 0; z-index: 40; width: 400px; background: #fff; border: 1px solid #e6e6e3; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.12); font-family: Inter, sans-serif; overflow: hidden; } .icp-tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid #ededeb; } .icp-tabs button { border: 0; background: none; padding: 12px 8px 10px; font: 500 14.5px Inter, sans-serif; color: #8a8a88; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .icp-tabs button.on { color: #2f2f2f; border-bottom-color: #2f2f2f; } .icp-tabs .icp-rm { margin-left: auto; } .icp-big { display: grid; place-items: center; padding: 18px 0; border-bottom: 1px solid #ededeb; margin: 0 18px; } .icp-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; padding: 14px 18px; border-bottom: 1px solid #ededeb; margin: 0; } .icp-shape { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; cursor: pointer; padding: 0; } .icp-shape svg { width: 28px; height: 28px; filter: grayscale(1) brightness(.75) contrast(.9); opacity: .75; } .icp-shape:hover { background: #f4f4f2; } .icp-shape.on { box-shadow: 0 0 0 2px #f2e3b8; } .icp-shape.on svg { filter: none; opacity: 1; } .icp-cols { display: flex; justify-content: space-between; padding: 14px 18px 16px; } .icp-col { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; } .icp-col.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #f0e2bf; } .icp-emo { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; padding: 14px 16px 16px; } .icp-emo button { border: 0; background: none; font-size: 22px; height: 36px; border-radius: 8px; cursor: pointer; } .icp-emo button:hover { background: #f4f4f2; } .icp-up { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 18px; padding: 28px 10px; border: 1.5px dashed #dcdbd8; border-radius: 12px; cursor: pointer; } .icp-up span { font: 500 14.5px Inter, sans-serif; color: #2383e2; } .icp-up small { font-size: 12.5px; color: #8a8a88; } .icp-up:hover { background: #fafaf9; } #meeting .agents-live { top: 30px; } /* ===== Request a demo ===== */ .demo2 { background: #fff; min-height: 100vh; font-family: Inter, -apple-system, sans-serif; color: rgba(0,0,0,.95); } .dm-top { position: sticky; top: 0; z-index: 5; height: 64px; display: flex; align-items: center; padding: 0 22px; background: #fff; } .dm-logo { width: 34px; height: 34px; display: block; } .dm-logo svg { width: 100%; height: 100%; } .dm-main { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1240px; margin: 0 auto; padding: 60px 40px 80px 90px; min-height: calc(100vh - 64px); box-sizing: border-box; align-items: center; } .dm-left { max-width: 470px; } .dm-left h1 { font: 700 clamp(32px, 3.4vw, 46px)/1.12 Inter, sans-serif; letter-spacing: -.035em; margin: 0 0 34px; } .dm-left label { display: flex; flex-direction: column; gap: 7px; font: 400 14.5px Inter, sans-serif; color: rgba(0,0,0,.85); margin-bottom: 18px; } .dm-left input, .dm-left select, .dm-left textarea { height: 40px; border: 1px solid #dedcd8; border-radius: 6px; padding: 0 12px; font: 16px Inter, sans-serif; color: #111; background: #fff; box-sizing: border-box; width: 100%; } .dm-left textarea { height: auto; padding: 10px 12px; resize: vertical; } .dm-left input:disabled { background: #f4f4f2; color: #777; } .dm-left input:focus, .dm-left select:focus, .dm-left textarea:focus { outline: none; border-color: #0075de; box-shadow: 0 0 0 1px #0075de; } .dm-next { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; border: 0; border-radius: 8px; background: #0075de; color: #fff; font: 500 17px Inter, sans-serif; cursor: pointer; margin-top: 10px; text-decoration: none; } .dm-next:hover { background: #005bab; } .dm-next:disabled { opacity: .6; } .dm-opts { display: flex; flex-direction: column; gap: 10px; } .dm-opts button { height: 46px; border: 1px solid #e3e2df; border-radius: 8px; background: #fff; font: 400 16px Inter, sans-serif; color: #111; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .dm-opts button:hover { border-color: #0075de; background: #f5faff; } .dm-back { margin-top: 18px; border: 0; background: none; color: #6b6b69; font: 14px Inter, sans-serif; cursor: pointer; } .dm-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; } .dm-form .full { grid-column: 1 / -1; } .dm-left .dm-check { flex-direction: row; align-items: center; gap: 12px; margin: 6px 0 22px; font-size: 15px; } .dm-check input { width: 20px; height: 20px; flex: none; } .dm-err { color: #d93025; font-size: 14px; margin: 0 0 6px; min-height: 0; } .dm-thanks { font-size: 17px; line-height: 1.5; color: #444; margin: -14px 0 24px; } .as-link { width: auto; display: inline-flex; padding: 0 24px; } .dm-art { display: grid; place-items: center; } .dm-art svg { width: min(100%, 520px); height: auto; animation: dmIn .4s ease; } @keyframes dmIn { from { opacity: 0; transform: translateY(8px); } } @media (max-width: 900px) { .dm-main { grid-template-columns: 1fr; padding: 30px 20px 60px; } .dm-art { order: -1; } .dm-art svg { width: 240px; } } /* ===== AI dock: floating button + right-hand panel ===== */ .ai-fab { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 58px; height: 58px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05); cursor: pointer; padding: 0; display: grid; place-items: center; transition: transform .15s; } .ai-fab:hover { transform: scale(1.06); } .ai-fab.hidden { display: none; } .ai-fab .bot-face { width: 58px !important; height: 58px !important; margin: 0 !important; box-shadow: none !important; background: transparent; } .ai-fab .face-pencil { width: 28px !important; height: 28px !important; top: -6px !important; right: -6px !important; } body.dock-open #app { margin-right: 400px; } .ai-dock { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; z-index: 65; background: #fff; border-left: 1px solid #ececea; display: flex; flex-direction: column; font-family: Inter, sans-serif; color: #2f2f2f; animation: dkIn .2s ease; } @keyframes dkIn { from { transform: translateX(30px); opacity: 0; } } .dk-head { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 12px 0 10px; flex: none; } .dk-title { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: 500 15.5px Inter, sans-serif; color: #2f2f2f; padding: 4px 8px 4px 2px; border-radius: 8px; cursor: default; max-width: 230px; overflow: hidden; white-space: nowrap; } .dk-title > svg { width: 15px; height: 15px; color: #8f8e8a; flex: none; } .dk-face { position: relative; width: 26px; height: 26px; border-radius: 50%; display: inline-block; box-shadow: 0 1px 4px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.05); flex: none; } .dk-face .face-ink { position: absolute; inset: 0; width: 100%; height: 100%; } .dk-face .face-pencil { position: absolute; width: 16px !important; height: 16px !important; top: -6px !important; right: -6px !important; transform: rotate(-4deg) !important; left: auto !important; } .dk-ics { display: flex; gap: 2px; } .dk-ics button { width: 32px; height: 32px; border: 0; background: none; border-radius: 6px; color: #37352f; display: grid; place-items: center; cursor: pointer; } .dk-ics button:hover { background: #f1f1ef; } .dk-ics svg { width: 20px; height: 20px; } .dk-body { flex: 1; overflow-y: auto; padding: 8px 18px 12px; display: flex; flex-direction: column; gap: 14px; } .dk-empty { margin-top: auto; padding-bottom: 8px; } .dk-bigface { position: relative; display: block; width: 62px; height: 62px; border-radius: 50%; box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.05); margin-bottom: 16px; } .dk-bigface .face-ink { position: absolute; inset: 0; width: 100%; height: 100%; } .dk-bigface .face-pencil { position: absolute; width: 30px !important; height: 30px !important; top: -8px !important; right: -12px !important; left: auto !important; transform: rotate(-4deg) !important; } .dk-empty h3 { margin: 0 0 14px; font: 700 20px/1.3 Inter, sans-serif; letter-spacing: -.01em; } .dk-sugg { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 9px 2px; font: 400 15.5px Inter, sans-serif; color: #2f2f2f; cursor: pointer; text-align: left; border-radius: 8px; } .dk-sugg:hover { background: #f7f7f5; } .dk-sugg .ms { font-size: 21px; color: #55534e; font-variation-settings: "wght" 300; } .dk-u { align-self: flex-end; background: #f1f1ef; border-radius: 16px; padding: 7px 12px; font-size: 14.5px; max-width: 85%; white-space: pre-wrap; } .dk-a { font-size: 14.5px; line-height: 1.55; } .dk-a.working span { color: #8a8a88; } .dk-comp { margin: 0 14px 14px; border: 1px solid #e6e6e3; border-radius: 14px; padding: 12px 12px 8px; box-shadow: 0 4px 16px rgba(0,0,0,.04); flex: none; } .dk-comp textarea { width: 100%; border: 0; resize: none; font: 15px Inter, sans-serif; outline: none; background: none; } .dk-comp textarea::placeholder { color: #a6a6a4; } .dk-row { display: flex; align-items: center; } .dk-go { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f2f2f1; color: #c4c4c2; display: grid; place-items: center; cursor: pointer; } .dk-go.send { background: #0d0d0d; color: #fff; } .dk-go svg { width: 16px; height: 16px; } @media (max-width: 900px) { body.dock-open #app { margin-right: 0; } .ai-dock { width: 100%; } } /* The AI's own cursor */ .ai-cursor { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; display: flex; align-items: flex-start; gap: 2px; opacity: 0; transition: transform 1.2s cubic-bezier(.35,.7,.25,1), opacity .3s; } .ai-cursor.show { opacity: 1; } .ai-cursor svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); } .ai-cursor span { margin-top: 18px; background: #7c5cff; color: #fff; font: 600 11.5px Inter, sans-serif; padding: 3px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.15); } .ai-touch { outline: 2px solid #7c5cff !important; outline-offset: 2px; border-radius: 6px; transition: outline-color .3s; } /* ===== Personalise your assistant ===== */ .pz-wrap { position: relative; display: flex; justify-content: center; } .pz-pill { position: absolute; left: calc(50% + 14px); bottom: -10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border: 1px solid #e6e6e3; border-radius: 999px; background: #fff; font: 500 13.5px Inter, sans-serif; color: #55534e; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 8px rgba(0,0,0,.06); white-space: nowrap; z-index: 3; } .pz-wrap:hover .pz-pill, .pz-pill:focus-visible { opacity: 1; } .pz-pill svg { width: 15px; height: 15px; } .face-pencil.acc { transform: none !important; } .face-pencil.acc-top { width: 62% !important; height: 62% !important; left: 19% !important; right: auto !important; top: -42% !important; } .face-pencil.acc-side { width: 46% !important; height: 46% !important; right: -14% !important; left: auto !important; top: -12% !important; } .face-pencil.acc-mouth { width: 46% !important; height: 46% !important; left: 30% !important; right: auto !important; top: 46% !important; } .face-pencil.acc-eyes { width: 64% !important; height: 64% !important; left: 19% !important; right: auto !important; top: 12% !important; } .face-pencil.acc-neck { width: 40% !important; height: 40% !important; left: 30% !important; right: auto !important; top: 80% !important; } .face-pencil.acc-around { width: 110% !important; height: 110% !important; left: -5% !important; right: auto !important; top: -20% !important; } #modalCard.wide:has(.pz) { width: min(760px, calc(100vw - 32px)); max-width: none; border-radius: 18px; padding: 26px 32px 24px; } .pz { font-family: Inter, sans-serif; color: #2f2f2f; } .pz h2 { text-align: center; margin: 0 0 26px; font: 700 26px Inter, sans-serif; letter-spacing: -.02em; } .pz-hero { display: flex; align-items: center; justify-content: center; gap: 70px; margin: 40px 0 34px; } .pz-face { width: 110px !important; height: 110px !important; margin: 0 !important; } .pz-arrow { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f4f4f2; color: #6b6b69; display: grid; place-items: center; cursor: pointer; } .pz-arrow:hover { background: #ececea; } .pz-arrow svg { width: 18px; height: 18px; } .pz-name { display: block; margin: 0 auto 30px; width: 240px; height: 36px; border: 1px solid #dedcd8; border-radius: 999px; text-align: center; font: 500 16px Inter, sans-serif; color: #2f2f2f; } .pz-name:focus { outline: none; border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; } .pz-lbl { margin: 0 0 8px; font: 500 14px Inter, sans-serif; color: #55534e; } .pz-ins { width: 100%; box-sizing: border-box; border: 0; background: #f7f7f5; border-radius: 12px; padding: 14px 16px; font: 14.5px/1.5 Inter, sans-serif; color: #2f2f2f; resize: vertical; } .pz-ins:focus { outline: 2px solid #2383e2; } .pz-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; background: #f7f7f5; border-radius: 14px; padding: 14px; margin-top: 18px; } .pz-acc { aspect-ratio: 1.15; border: 1.5px solid transparent; background: #fff; border-radius: 10px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .pz-acc:hover { border-color: #e3e3e0; } .pz-acc.on { border-color: #2383e2; } .pz-acc svg { width: 58%; height: 58%; } .pz-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 22px; } .pz-reset { border: 0; background: none; font: 500 15px Inter, sans-serif; color: #2f2f2f; cursor: pointer; padding: 8px 10px; border-radius: 8px; } .pz-reset:hover { background: #f4f4f2; } .pz-done { height: 38px; padding: 0 18px; border: 0; border-radius: 8px; background: #2383e2; color: #fff; font: 500 15px Inter, sans-serif; cursor: pointer; } .pz-done:hover { background: #0077d4; } @media (max-width: 640px) { .pz-grid { grid-template-columns: repeat(4, 1fr); } .pz-hero { gap: 24px; } } /* Accessories fitted to the face (measured from the face drawing: brows ~21%, eyes ~33%, mouth ~73% down; eyes ~34%/67% across) */ html body .face-pencil.acc, html body #app .face-pencil.acc { position: absolute !important; transform: none !important; right: auto !important; bottom: auto !important; z-index: 3; pointer-events: none; } html body .face-pencil.acc.acc-top, html body #app .face-pencil.acc.acc-top { width: 66% !important; height: 66% !important; left: 17% !important; top: -46% !important; } html body .face-pencil.acc.acc-eyes, html body #app .face-pencil.acc.acc-eyes { width: 72% !important; height: 72% !important; left: 14% !important; top: -3% !important; } html body .face-pencil.acc.acc-mouth, html body #app .face-pencil.acc.acc-mouth { width: 46% !important; height: 46% !important; left: 27% !important; top: 40% !important; } html body .face-pencil.acc.acc-neck, html body #app .face-pencil.acc.acc-neck { width: 38% !important; height: 38% !important; left: 31% !important; top: 80% !important; } html body .face-pencil.acc.acc-around, html body #app .face-pencil.acc.acc-around { width: 118% !important; height: 118% !important; left: -9% !important; top: -24% !important; } html body .face-pencil.acc.acc-side, html body #app .face-pencil.acc.acc-side { width: 46% !important; height: 46% !important; left: 66% !important; top: -12% !important; } .bot-face, .dk-face, .dk-bigface, .pz-face { overflow: visible !important; } /* Custom accessory (Business & Enterprise) */ img.face-pencil.acc { object-fit: contain; } .pz-custom, .pz-lock { position: relative; flex-direction: column; gap: 2px; color: #6b6b69; } .pz-custom img { width: 58%; height: 58%; object-fit: contain; } .pz-custom .ms, .pz-lock .ms { font-size: 24px; color: #8a8a88; font-variation-settings: "wght" 300; } .pz-custom small, .pz-lock small { font: 500 11px Inter, sans-serif; color: #8a8a88; } .pz-lock { background: #f1f1ef; box-shadow: none; } .pz-lock:hover { border-color: transparent !important; } .pz-pos { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; font: 500 13px Inter, sans-serif; color: #6b6b69; } .pz-pos button { height: 28px; padding: 0 11px; border: 1px solid #e3e3e0; background: #fff; border-radius: 999px; font: 500 13px Inter, sans-serif; color: #2f2f2f; cursor: pointer; } .pz-pos button.on { border-color: #2383e2; color: #2383e2; background: #f2f9ff; } .pz-grid { grid-template-columns: repeat(9, 1fr) !important; } @media (max-width: 640px) { .pz-grid { grid-template-columns: repeat(5, 1fr) !important; } } /* Business & Enterprise accessories */ .pz-acc { position: relative; } .pz-acc.locked { background: #f1f1ef; box-shadow: none; cursor: not-allowed; } .pz-acc.locked svg { opacity: .35; filter: grayscale(1); } .pz-padlock { position: absolute; right: 5px; bottom: 4px; font-size: 15px !important; color: #8a8a88; font-variation-settings: "wght" 400; } .pz-badge { position: absolute; right: 5px; top: 3px; font-size: 11px; color: #c9a227; } .pz-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: #6b6b69; } .pz-note .ms { font-size: 16px; } .pz-note a { color: #2383e2; text-decoration: none; } .pz-grid { grid-template-columns: repeat(8, 1fr) !important; } /* ===== Pages (documents) ===== */ #app .sidenav.nn .nn-sec a.nn-doc { gap: 10px !important; } .nn-docic { width: 20px; text-align: center; font-size: 16px; flex: none; } .doc-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 22px; background: #fff; font-family: Inter, sans-serif; } .doc-crumb { display: inline-flex; align-items: center; gap: 8px; font: 500 15px Inter, sans-serif; color: #2f2f2f; max-width: 380px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .doc-priv { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #9b9a97; } .doc-priv svg { width: 15px; height: 15px; } .doc-saved { font-size: 12.5px; color: #a5a4a1; margin-right: 6px; } .doc-ic { width: 32px; height: 32px; border: 0; background: none; border-radius: 6px; display: grid; place-items: center; color: #37352f; cursor: pointer; } .doc-ic:hover { background: #f1f1ef; } .doc-ic svg { width: 20px; height: 20px; } .doc-ic.fav svg { fill: #f5b301; stroke: #f5b301; } .doc { position: relative; max-width: 760px; margin: 0 auto; padding: 70px 40px 160px 96px; font-family: Inter, sans-serif; color: #2f2f2f; } .doc-icon { border: 0; background: none; font-size: 78px; line-height: 1; padding: 6px; margin: 0 0 18px -8px; border-radius: 10px; cursor: pointer; } .doc-icon:hover { background: #f4f4f2; } .doc textarea { display: block; width: 100%; border: 0; outline: none; resize: none; background: none; font-family: Inter, sans-serif; color: #2f2f2f; padding: 0; overflow: hidden; } .doc-title { font: 700 44px/1.18 Inter, sans-serif !important; letter-spacing: -.025em; margin-bottom: 18px; } .doc-title::placeholder, .doc-desc::placeholder, .blk-text::placeholder { color: #c7c6c3; } .doc-desc { font-size: 17px !important; line-height: 1.55; margin-bottom: 26px; color: #37352f !important; } .blk { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; } .blk-tools { position: absolute; left: -64px; top: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; } .blk:hover .blk-tools { opacity: 1; } .blk-type { width: 24px; height: 24px; border: 0; background: none; border-radius: 4px; color: #a5a4a1; display: grid; place-items: center; cursor: pointer; } .blk-type:hover { background: #f1f1ef; } .blk-type svg { width: 18px; height: 18px; } .blk-grip { color: #c7c6c3; font-size: 12px; letter-spacing: -2px; padding-top: 4px; } .blk-text { font-size: 17px !important; line-height: 1.55; } .blk-h2 { margin-top: 22px; } .blk-h2 .blk-text { font: 700 27px/1.3 Inter, sans-serif !important; } .blk-h2 .blk-tools { top: 8px; } .blk-h3 { margin-top: 14px; } .blk-h3 .blk-text { font: 600 21px/1.35 Inter, sans-serif !important; } .blk-dot { font-size: 20px; line-height: 1.3; width: 16px; text-align: center; flex: none; } .blk-check { width: 20px; height: 20px; margin: 4px 2px 0 0; flex: none; accent-color: #2383e2; cursor: pointer; } .blk-todo.done .blk-text { text-decoration: line-through; color: #9b9a97; } .blk-menu { position: absolute; left: -64px; top: 30px; z-index: 20; width: 190px; background: #fff; border: 1px solid #e6e6e3; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.1); padding: 4px; } .blk-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; font: 14px Inter, sans-serif; color: #2f2f2f; cursor: pointer; } .blk-menu button:hover { background: #f4f4f2; } .blk-menu .danger { color: #d93025; } .doc-addline { margin-top: 10px; border: 0; background: none; color: #a5a4a1; font: 15px Inter, sans-serif; cursor: pointer; padding: 4px 0; } .doc-addline:hover { color: #6b6b69; } .doc-icp { top: 160px; left: 90px; width: 360px; } .dk-a a[data-link], .bm-body a[data-link] { color: #2383e2; text-decoration: none; font-weight: 500; } @media (max-width: 800px) { .doc { padding: 40px 20px 120px; } .blk-tools { display: none; } .doc-title { font-size: 34px !important; } } .blk-text, .doc-title, .doc-desc { height: auto; min-height: 1.5em; box-sizing: border-box; } .blk { min-height: 0; } /* Agent Mode badge in the side panel */ .dk-head { gap: 6px; } .dk-title { flex: 1; min-width: 0; } .dk-agent { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; font: 500 12.5px Inter, sans-serif; white-space: nowrap; text-decoration: none; background: #f1f1ef; color: #8a8a88; flex: none; } .dk-agent svg { width: 14px; height: 14px; } .dk-agent.on { background: #efeaff; color: #6a4ce0; } .dk-agent.on svg { fill: #7c5cff; stroke: #7c5cff; } a.dk-agent:hover { background: #e9e9e6; color: #55534e; } /* ===== Slide decks ===== */ .doc.wide { max-width: 1180px; padding-left: 60px; padding-right: 40px; } .sl-wrap { display: grid; grid-template-columns: 190px 1fr; gap: 22px; margin-top: 8px; } .sl-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; padding-right: 4px; } .sl-th { display: flex; gap: 8px; align-items: flex-start; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; } .sl-n { font: 500 12px Inter, sans-serif; color: #8a8a88; width: 14px; padding-top: 4px; } .sl-mini { flex: 1; aspect-ratio: 16/9; background: #fff; border: 1.5px solid #e6e6e3; border-radius: 8px; padding: 8px 9px; overflow: hidden; display: flex; flex-direction: column; gap: 3px; } .sl-mini b { font: 700 9.5px Inter, sans-serif; color: #2f2f2f; } .sl-mini i { font: 400 7.5px Inter, sans-serif; font-style: normal; color: #6b6b69; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sl-th.on .sl-mini { border-color: #2383e2; box-shadow: 0 0 0 2px #d6e8fb; } .sl-bar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; } .sl-bar .pr2-btn { width: auto; padding: 0 14px; } .sl-slide { aspect-ratio: 16/9; background: #fff; border: 1px solid #e6e6e3; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.06); padding: 6% 7%; display: flex; flex-direction: column; gap: 4%; } .sl-slide textarea { border: 0; outline: none; resize: none; background: none; font-family: Inter, sans-serif; color: #2f2f2f; width: 100%; } .sl-title { font: 700 clamp(22px, 2.6vw, 38px)/1.2 Inter, sans-serif !important; letter-spacing: -.02em; } .sl-text { flex: 1; font: 400 clamp(14px, 1.4vw, 20px)/1.7 Inter, sans-serif !important; } .sl-slide.first { justify-content: center; text-align: center; background: linear-gradient(135deg, #f2f9ff, #fff 60%); } .sl-slide.first .sl-title { font-size: clamp(28px, 3.4vw, 50px) !important; text-align: center; } .sl-slide.first .sl-text { flex: 0; text-align: center; color: #6b6b69; } .sl-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 13px; color: #8a8a88; } .sl-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sl-present { position: fixed; inset: 0; z-index: 300; background: #111; display: grid; place-items: center; cursor: pointer; } .slp { width: min(92vw, 160vh); aspect-ratio: 16/9; background: #fff; border-radius: 12px; padding: 6% 7%; font-family: Inter, sans-serif; color: #2f2f2f; box-sizing: border-box; overflow: hidden; } .slp h1 { font: 700 clamp(28px, 4vw, 64px)/1.15 Inter, sans-serif; letter-spacing: -.02em; margin: 0 0 4%; } .slp ul { margin: 0; padding-left: 1.2em; font: 400 clamp(18px, 2.2vw, 34px)/1.6 Inter, sans-serif; } .slp.first { display: flex; flex-direction: column; justify-content: center; text-align: center; } .slp.first p { font-size: clamp(18px, 2vw, 30px); color: #6b6b69; margin: 0; } .slp-n { position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; color: #9b9a97; font: 13px Inter, sans-serif; } /* ===== Calendars ===== */ .cd-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; } .cd-head h2 { margin: 0; font: 700 22px Inter, sans-serif; min-width: 200px; } .cd-nav { width: 32px; height: 32px; border: 1px solid #e6e6e3; background: #fff; border-radius: 8px; font-size: 18px; color: #55534e; cursor: pointer; } .cd-nav:hover { background: #f4f4f2; } .cd-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid #ececea; border-left: 1px solid #ececea; } .cd-dow { padding: 8px 10px; font: 500 12.5px Inter, sans-serif; color: #8a8a88; border-right: 1px solid #ececea; border-bottom: 1px solid #ececea; background: #fafaf9; } .cd-day { min-height: 96px; padding: 6px 8px; border-right: 1px solid #ececea; border-bottom: 1px solid #ececea; display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .cd-day > span { font: 500 13px Inter, sans-serif; color: #55534e; } .cd-day.off { background: #fafaf9; } .cd-day.today > span { background: #e5484d; color: #fff; border-radius: 999px; width: 24px; height: 24px; display: grid; place-items: center; } .cd-day i { font-style: normal; font-size: 12px; background: #e6f3fe; color: #1d5ea8; border-radius: 5px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cd-day i b { font-weight: 600; } .cd-day i.more { background: none; color: #8a8a88; } .cd-h3 { margin: 30px 0 10px; font: 700 18px Inter, sans-serif; } .cd-ev { display: grid; grid-template-columns: 150px 110px 1fr 30px; gap: 8px; margin-bottom: 6px; } .cd-ev input { height: 34px; border: 1px solid #e6e6e3; border-radius: 6px; padding: 0 9px; font: 14px Inter, sans-serif; color: #2f2f2f; background: #fff; } .cd-ev input:focus { outline: none; border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; } .cd-x { border: 0; background: none; font-size: 20px; color: #a5a4a1; cursor: pointer; border-radius: 6px; } .cd-x:hover { background: #f4f4f2; color: #d93025; } @media (max-width: 900px) { .sl-wrap { grid-template-columns: 1fr; } .sl-thumbs { flex-direction: row; overflow-x: auto; max-height: none; } .sl-th { min-width: 140px; } .cd-ev { grid-template-columns: 1fr 1fr; } } /* ===== Page icons, covers, verification ===== */ .pg-ic-ms { font-variation-settings: "FILL" 1, "wght" 500; vertical-align: middle; } .pg-ic-img { object-fit: cover; border-radius: 4px; vertical-align: middle; width: 1em; height: 1em; } .doc-icon .pg-ic-ms { font-size: 84px; } .doc-icon .pg-ic-img { width: 84px; height: 84px; border-radius: 10px; } .doc-icon .pg-ic-emo { font-size: 78px; } .nn-docic .pg-ic-ms { font-size: 19px; } .nn-docic .pg-ic-img { width: 18px; height: 18px; } .doc-crumb .pg-ic-ms { font-size: 18px; } .doc-crumb .pg-ic-img { width: 18px; height: 18px; } .doc-meta { display: flex; gap: 4px; height: 30px; margin: -6px 0 4px -6px; opacity: 0; transition: opacity .15s; } .doc:hover .doc-meta, .doc-meta:focus-within { opacity: 1; } .doc-meta button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 8px; border-radius: 6px; font: 400 15px Inter, sans-serif; color: #9b9a97; cursor: pointer; } .doc-meta button:hover { background: #f1f1ef; color: #6b6b69; } .doc-meta .ms { font-size: 19px; font-variation-settings: "FILL" 1; } .vf-wrap { position: relative; } .vf-menu { position: absolute; top: 34px; left: 0; z-index: 40; width: 280px; background: #fff; border: 1px solid #e6e6e3; border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.12); padding: 6px; font-family: Inter, sans-serif; } .vf-menu > p { margin: 4px 8px 6px; font: 500 12.5px Inter, sans-serif; color: #8a8a88; } .vf-menu button, .vf-pick { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 8px; border-radius: 7px; cursor: pointer; font-family: Inter, sans-serif; color: #2f2f2f; position: relative; } .vf-menu button:hover, .vf-pick:hover { background: #f4f4f2; } .vf-menu .ms { font-size: 20px; color: #55534e; font-variation-settings: "wght" 300; } .vf-menu b { display: block; font: 400 15px Inter, sans-serif; } .vf-menu small { font-size: 12.5px; color: #8a8a88; } .vf-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .vf-rm b { color: #d93025; } .doc-top { position: sticky; } .doc-top .vf-menu { top: 44px; left: auto; right: auto; } .doc-verified { position: relative; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 3px 6px; border-radius: 6px; font: 400 15px Inter, sans-serif; color: #9b9a97; cursor: pointer; } .doc-verified:hover { background: #f1f1ef; } .doc-verified .ms { font-size: 19px; color: #2383e2; font-variation-settings: "FILL" 1; } .doc-cover { position: relative; height: 210px; margin: 0; } .doc-cover-btns { position: absolute; right: 18%; bottom: 12px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; } .doc-cover:hover .doc-cover-btns { opacity: 1; } .doc-cover-btns button { border: 0; background: rgba(255,255,255,.9); padding: 5px 10px; font: 500 12.5px Inter, sans-serif; color: #55534e; cursor: pointer; } .doc-cover-btns button:first-child { border-radius: 6px 0 0 6px; } .doc-cover-btns button:last-child { border-radius: 0 6px 6px 0; } .doc.has-cover { padding-top: 0; } .doc.has-cover .doc-icon { margin-top: -52px; position: relative; z-index: 2; } /* icon picker: Emoji / Icons / Upload */ .pg-picker { width: 420px; } .pgp-bar { display: flex; gap: 6px; padding: 10px 12px 0; } .pgp-filter { flex: 1; display: flex; align-items: center; gap: 6px; height: 32px; border: 1px solid #e3e3e0; border-radius: 7px; padding: 0 9px; } .pgp-filter:focus-within { border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; } .pgp-filter svg { width: 16px; height: 16px; color: #8a8a88; } .pgp-filter input { flex: 1; border: 0; outline: none; font: 14px Inter, sans-serif; background: none; } .pgp-btn { width: 32px; height: 32px; border: 1px solid #e3e3e0; background: #fff; border-radius: 7px; display: grid; place-items: center; cursor: pointer; color: #55534e; } .pgp-btn svg { width: 16px; height: 16px; } .pgp-btn:hover { background: #f4f4f2; } .pgp-dot { width: 14px; height: 14px; border-radius: 50%; } .pgp-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 8px 12px 0; padding: 6px; border: 1px solid #ececea; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.08); background: #fff; width: 240px; } .pgp-cols button { border: 0; background: none; height: 40px; border-radius: 8px; cursor: pointer; } .pgp-cols button:hover { background: #f4f4f2; } .pgp-cols .ms { font-size: 26px; font-variation-settings: "FILL" 1; } .pgp-lbl { margin: 12px 14px 4px; font: 500 12.5px Inter, sans-serif; color: #8a8a88; } .pgp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; padding: 0 10px 6px; } .pgp-main { max-height: 230px; overflow-y: auto; padding-bottom: 12px; } .pgp-it { aspect-ratio: 1; border: 0; background: none; border-radius: 6px; cursor: pointer; font-size: 20px; display: grid; place-items: center; padding: 0; } .pgp-it:hover { background: #f1f1ef; } .pgp-it .ms { font-size: 22px; font-variation-settings: "FILL" 1, "wght" 500; } .pgp-it .pg-ic-ms { font-size: 22px; } .pgp-it .pg-ic-img { width: 22px; height: 22px; } /* Top-bar logo: wordmark at the top, logo only once scrolled */ .s-nav.s2 .s2-logo { width: auto; height: 32px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #111; } .s2-mark { width: 30px; height: 30px; display: block; flex: none; transition: transform .35s cubic-bezier(.3,.7,.3,1); } .s2-mark svg { width: 100%; height: 100%; } .s2-word { font: 700 21px Inter, sans-serif; letter-spacing: -.03em; white-space: nowrap; display: inline-block; max-width: 140px; overflow: hidden; transition: max-width .4s cubic-bezier(.3,.7,.3,1), opacity .25s ease, transform .4s cubic-bezier(.3,.7,.3,1), filter .25s ease; } .s-nav.s2.scrolled .s2-word { max-width: 0; opacity: 0; transform: translateX(-8px); filter: blur(2px); } .s-nav.s2.scrolled .s2-mark { transform: rotate(-8deg) scale(1.06); } .s-nav.s2 { transition: box-shadow .25s ease; } .s-nav.s2.scrolled { box-shadow: 0 1px 0 #ededeb; } @media (prefers-reduced-motion: reduce) { .s2-word, .s2-mark { transition: none; } } #authLast, .auth2 .auth-last { display: none !important; } .a2-tile.last { border-color: #e3e3e0 !important; } /* ===== "Explore your plan" tour ===== */ .tour-card { position: relative; margin: 0 0 12px; border: 1px solid #e6e6e3; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.05); } .tour-open { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 14px 16px 16px; cursor: pointer; font-family: Inter, sans-serif; border-radius: 12px; } .tour-open:hover { background: #fafaf9; } .tour-open b { display: block; font: 500 15.5px Inter, sans-serif; color: #2f2f2f; margin-bottom: 18px; } .tour-bar { position: relative; display: block; height: 4px; margin-right: 34px; background: #ececea; border-radius: 4px; } .tour-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: #2383e2; border-radius: 4px; transition: width .6s cubic-bezier(.3,.7,.3,1); } .tour-face { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: left .6s cubic-bezier(.3,.7,.3,1); } .tour-face .face-ink { position: absolute; inset: 0; width: 100%; height: 100%; } .tour-face .face-pencil:not(.acc) { width: 16px !important; height: 16px !important; top: -8px !important; right: -8px !important; left: auto !important; } .tour-gift { position: absolute; right: 14px; bottom: 9px; color: #2383e2; } .tour-gift svg { width: 21px; height: 21px; } .tour-x { position: absolute; right: 8px; top: 8px; z-index: 2; width: 26px; height: 26px; border: 0; background: none; border-radius: 6px; color: #8a8a88; display: grid; place-items: center; cursor: pointer; } .tour-x:hover { background: #f1f1ef; } .tour-x svg { width: 15px; height: 15px; } body.nav-collapsed .tour-card { display: none; } .tour-pop { position: fixed; z-index: 120; width: 520px; max-height: calc(100vh - 24px); overflow-y: auto; background: #fff; border: 1px solid #e6e6e3; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.14); padding: 20px 18px 16px; font-family: Inter, sans-serif; animation: npIn .18s ease; } .tour-pop h3 { margin: 0 0 4px; font: 700 20px Inter, sans-serif; color: #2f2f2f; } .tour-pop > p { margin: 0 0 16px; font-size: 15px; color: #6b6b69; } .tour-step { display: flex; align-items: stretch; gap: 10px; width: 100%; min-height: 108px; margin-bottom: 10px; border: 1px solid #ececea; border-radius: 12px; background: #fff; padding: 0 8px 0 22px; cursor: pointer; text-align: left; font-family: Inter, sans-serif; transition: box-shadow .15s, transform .15s; } .tour-step:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); transform: translateY(-1px); } .ts-txt { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .ts-txt b { font: 500 17px Inter, sans-serif; color: #2f2f2f; display: inline-flex; align-items: center; gap: 6px; } .ts-txt small { font-size: 14.5px; color: #6b6b69; line-height: 1.4; } .ts-ok { font-size: 18px !important; color: #8a8a88; font-variation-settings: "FILL" 1; } .tour-step.done { background: #fafaf9; } .tour-step.done b, .tour-step.done small { color: #a5a4a1; } .ts-art { flex: none; width: 180px; margin: 8px 0; border-radius: 9px; background: #f4f4f2; display: grid; place-items: center; overflow: hidden; } .tour-step.done .ts-art { opacity: .55; filter: grayscale(.6); } .tour-step.locked { cursor: default; justify-content: center; align-items: center; flex-direction: column; gap: 4px; min-height: 80px; color: #a5a4a1; } .tour-step.locked:hover { box-shadow: none; transform: none; } .tour-step.locked .ms { font-size: 28px; } .ta-face { position: relative; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1); } .ta-face .face-ink { position: absolute; inset: 0; width: 100%; height: 100%; } .ta-face .face-pencil:not(.acc) { width: 26px !important; height: 26px !important; top: -8px !important; right: -10px !important; left: auto !important; } .ta-agents { display: flex; } .ta-agents .ag-st { margin-left: -8px; box-shadow: 1px 2px 0 #111; } .ta-agents .ag-st:first-child { margin-left: 0; } .ta-slides { display: flex; gap: 6px; } .ta-slides i { width: 64px; height: 38px; background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 3px; padding: 6px; box-sizing: border-box; } .ta-slides b { height: 5px; width: 70%; background: #2f2f2f; border-radius: 2px; } .ta-slides u { height: 3px; width: 90%; background: #c9c8c5; border-radius: 2px; } .ta-cursor { position: relative; width: 120px; height: 56px; background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.08); } .ta-line { position: absolute; left: 12px; top: 14px; height: 5px; width: 80px; background: #2f2f2f; border-radius: 3px; } .ta-line.s { top: 26px; width: 56px; background: #c9c8c5; outline: 2px solid #7c5cff; outline-offset: 2px; } .ta-cursor svg { position: absolute; right: 18px; bottom: 6px; width: 20px; height: 20px; animation: taMove 2.4s ease-in-out infinite; } @keyframes taMove { 50% { transform: translate(-22px, -10px); } } .ta-chat { display: flex; flex-direction: column; gap: 5px; width: 150px; font: 10.5px Inter, sans-serif; } .ta-chat i { font-style: normal; background: #fff; border-radius: 9px; padding: 5px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .ta-chat i.me { align-self: flex-end; background: #0d0d0d; color: #fff; } @media (max-width: 760px) { .tour-pop { left: 12px !important; right: 12px; width: auto; } .ts-art { width: 110px; } } /* ===== Rare reward accessory ===== */ .pz-acc.rare:not(.locked) { background: linear-gradient(135deg, #fff7e0, #f3ecff); } .pz-badge.rare { background: linear-gradient(135deg, #f5c84b, #ef6a9a, #7c5cff); color: #fff; } .pz-acc.rare.locked .pz-padlock { color: #c9a227; } .rw { position: relative; text-align: center; padding: 44px 10px 4px; font-family: Inter, sans-serif; overflow: hidden; } .rw-burst { position: absolute; left: 50%; top: 96px; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: conic-gradient(from 0deg, #f5c84b33, #ef6a9a33, #7c5cff33, #f5c84b33); animation: rwSpin 8s linear infinite; filter: blur(6px); } @keyframes rwSpin { to { transform: rotate(360deg); } } .rw-face { position: relative; display: inline-block; width: 104px; height: 104px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.12); animation: rwPop .6s cubic-bezier(.3,1.6,.5,1); } .rw-face .face-ink { position: absolute; inset: 0; width: 100%; height: 100%; } @keyframes rwPop { from { transform: scale(.4); opacity: 0; } } .rw-tag { position: relative; margin: 18px 0 2px; font-size: 13px; font-weight: 600; letter-spacing: .04em; background: linear-gradient(90deg, #c9a227, #ef6a9a, #7c5cff); -webkit-background-clip: text; background-clip: text; color: transparent; } .rw h2 { position: relative; margin: 0 0 8px; font: 700 26px Inter, sans-serif; color: #2f2f2f; } .rw > p:not(.rw-tag) { position: relative; margin: 0 auto 18px; max-width: 320px; color: #6b6b69; font-size: 15px; line-height: 1.5; } /* ===== Meeting lobby / waiting / ended in the new style ===== */ .mt-lobby, .mt-msg { background: #fff !important; color: #2f2f2f; font-family: Inter, sans-serif; } .mt-lobby .topbar { background: #fff; border: 0; padding: 14px 22px; } .mt-lobby .brand { display: inline-flex; align-items: center; gap: 9px; color: #111; text-decoration: none; font: 600 19px Inter, sans-serif; } .mt-mark svg { width: 30px; height: 30px; display: block; } .mt-lobby .preview { background: #f4f4f2; border: 1px solid #ececea; border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.06); } .mt-lobby .preview-controls .round { background: #fff; color: #2f2f2f; border: 1px solid #e6e6e3; box-shadow: 0 1px 4px rgba(0,0,0,.08); } .mt-lobby .lobby-side h2, .mt-msg h2 { font: 700 30px Inter, sans-serif; letter-spacing: -.01em; color: #111; } .mt-lobby .muted, .mt-msg .muted { color: #6b6b69; } .mt-lobby .field, .mt-lobby .device-row label { border: 1px solid #e6e6e3; border-radius: 10px; background: #fff; } .mt-lobby .field:focus { border-color: #2f2f2f; outline: none; box-shadow: none; } .mt-lobby #joinNow, .mt-msg .btn.primary { background: #111 !important; color: #fff !important; border: 0; border-radius: 999px; font-weight: 600; } .mt-lobby #joinNow:hover, .mt-msg .btn.primary:hover { background: #333 !important; } .mt-lobby #joinNow:disabled { background: #d9d8d5 !important; color: #8a8a88 !important; } .mt-msg .btn.outline { border: 1px solid #e6e6e3; border-radius: 999px; color: #2f2f2f; background: #fff; } .mt-msg .btn.text { color: #6b6b69; } .mt-face { display: block; margin: 0 auto 6px; } .mt-face svg { width: 64px; height: 64px; } .mt-bob svg { animation: mtBob 1.6s ease-in-out infinite; } @keyframes mtBob { 50% { transform: translateY(-6px); } } /* ===== Sidebar ⋯ menu ===== */ .nn-items a { position: relative; } .nn-more { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 5px; background: transparent; color: #8a8a88; display: none; place-items: center; cursor: pointer; padding: 0; } .nn-more svg { width: 16px; height: 16px; } .nn-items a:hover .nn-more, .nn-items a.menu-on .nn-more { display: grid; } .nn-more:hover { background: rgba(0,0,0,.07); color: #2f2f2f; } .nn-items a:hover .nn-ev, .nn-items a.menu-on .nn-ev { padding-right: 24px; } .nn-menu { position: fixed; z-index: 130; min-width: 160px; background: #fff; border: 1px solid #e6e6e3; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 5px; font-family: Inter, sans-serif; animation: npIn .12s ease; } .nn-menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; padding: 7px 9px; border-radius: 6px; font: 14px Inter, sans-serif; color: #2f2f2f; cursor: pointer; text-align: left; } .nn-menu button:hover { background: #f1f1ef; } .nn-menu .ms { font-size: 18px; color: #6b6b69; } .nn-menu-del:hover, .nn-menu-del:hover .ms { color: #d44c47; } /* ===== App tabs ===== */ #appMain { min-width: 0; display: flex; flex-direction: column; } #appTabs { position: sticky; top: 0; z-index: 40; display: flex; align-items: stretch; height: 44px; background: #f7f7f5; border-bottom: 1px solid #ececea; font-family: Inter, sans-serif; } .tb-nav { display: flex; align-items: center; gap: 2px; padding: 0 8px; border-right: 1px solid #ececea; } .tb-arrow, .tb-new { width: 28px; height: 28px; border: 0; background: none; border-radius: 6px; color: #a5a4a1; display: grid; place-items: center; cursor: pointer; padding: 0; } .tb-arrow:hover, .tb-new:hover { background: #ececea; color: #2f2f2f; } .tb-arrow svg, .tb-new svg { width: 18px; height: 18px; } .tb-new { align-self: center; margin: 0 8px; flex: none; } .tb-list { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; } .tb-list::-webkit-scrollbar { display: none; } .tb-tab { position: relative; flex: 0 1 180px; min-width: 110px; display: flex; align-items: center; gap: 8px; padding: 0 30px 0 14px; border-right: 1px solid #ececea; color: #6b6b69; font-size: 14.5px; cursor: pointer; user-select: none; } .tb-tab:hover { background: #f0f0ee; } .tb-tab.on { background: #fff; color: #2f2f2f; margin-bottom: -1px; } .tb-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); } .tb-ms { font-size: 18px !important; color: #8a8a88; flex: none; } .tb-ic { flex: none; width: 18px; height: 18px; display: grid; place-items: center; font-size: 15px; line-height: 1; } .tb-ic img, .tb-ic svg, .tb-ic .ms { width: 18px !important; height: 18px !important; font-size: 18px !important; } .tb-face { position: relative; flex: none; width: 18px; height: 18px; } .tb-face svg { width: 18px; height: 18px; display: block; } .tb-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 0; border-radius: 4px; background: none; color: #8a8a88; display: none; place-items: center; cursor: pointer; padding: 0; } .tb-tab:hover .tb-x, .tb-tab.on .tb-x { display: grid; } .tb-x:hover { background: #e6e6e3; color: #2f2f2f; } .tb-x svg { width: 14px; height: 14px; } @media (max-width: 760px) { .tb-nav { display: none; } .tb-tab { min-width: 96px; } } /* Send buttons turn blue once you type */ body #app #cmpGo.home-send.send, body #app .bot-composer .c-go.send, body #app .c-go.send, .dk-go.send { background: #2383e2 !important; color: #fff !important; } body #app #cmpGo.home-send.send:hover, body #app .c-go.send:hover, .dk-go.send:hover { background: #1a6fc4 !important; } /* Sidebar's top buttons sit on the same bar as the tabs */ body #app .sidenav.nn .rail-top { box-sizing: border-box; height: 44px; margin: 0 0 10px !important; padding: 0 8px 0 10px !important; display: flex; align-items: center; background: #f7f7f5; border-bottom: 1px solid #ececea; border-right: 1px solid #ececea; } body #app .sidenav.nn .rail-top .nn-ic { height: 30px; } body.nav-collapsed #app #navToggle { top: 7px !important; left: 8px !important; z-index: 45; } body.nav-collapsed #appTabs { padding-left: 48px; } /* One continuous top bar: sidebar buttons + tabs, same colour, same line */ html body #app #sidenav.nn .rail-top { height: 44px !important; min-height: 44px !important; margin: 0 -15px 10px -5px !important; padding: 0 14px 0 15px !important; background: #f8f8f6 !important; border-bottom: 1px solid #ececea !important; border-right: 0 !important; position: relative; z-index: 2; } html body #appTabs { background: #f8f8f6; } html body #appTabs .tb-nav { border-right: 0; } html body #appTabs .tb-tab:first-child { border-left: 1px solid #ececea; } /* ===== Add members ===== */ .inv { text-align: center; font-family: Inter, sans-serif; padding: 8px 6px 2px; } .inv-top svg { width: 40px; height: 40px; color: #2f2f2f; } .inv h2 { margin: 6px 0 8px; font: 600 22px Inter, sans-serif; color: #2f2f2f; } .inv-sub { margin: 0 0 22px; color: #6b6b69; font-size: 15.5px; line-height: 1.55; } .inv-emails { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e6e6e3; border-radius: 8px; font: 16px Inter, sans-serif; outline: none; } .inv-emails:focus { border-color: #2383e2; box-shadow: 0 0 0 2px rgba(35,131,226,.25); } .inv-lbl { text-align: left; margin: 20px 0 8px; font-size: 14px; font-weight: 500; color: #4a4a48; } .inv-role { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid #e6e6e3; border-radius: 8px; background: #fff; cursor: pointer; font-family: Inter, sans-serif; } .inv-role:hover { background: #fafaf9; } .inv-role > svg:first-child, .inv-pop button > svg:first-child { width: 22px; height: 22px; flex: none; align-self: flex-start; margin-top: 1px; color: #4a4a48; } .inv-role > svg:last-child { width: 16px; height: 16px; color: #a5a4a1; flex: none; } .inv-role span, .inv-pop span { flex: 1; display: flex; flex-direction: column; gap: 3px; } .inv-role b, .inv-pop b { font: 500 16px Inter, sans-serif; color: #2f2f2f; } .inv-role small, .inv-pop small { font-size: 14px; color: #6b6b69; line-height: 1.45; } .inv-msg { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e6e6e3; border-radius: 8px; background: #fafaf9; font: 15.5px Inter, sans-serif; resize: vertical; outline: none; } .inv-msg:focus { border-color: #c9c8c5; background: #fff; } .inv-send { display: block; width: 100%; margin-top: 26px; padding: 10px; border: 0; border-radius: 8px; background: #a8cdf2; color: #fff; font: 500 16.5px Inter, sans-serif; cursor: not-allowed; text-decoration: none; text-align: center; box-sizing: border-box; } .inv-send.on { background: #2383e2; cursor: pointer; } .inv-send.on:hover { background: #1a6fc4; } .inv-cancel { display: block; margin: 12px auto 0; border: 0; background: none; font: 16px Inter, sans-serif; color: #4a4a48; cursor: pointer; padding: 6px 12px; border-radius: 6px; } .inv-cancel:hover { background: #f1f1ef; } .inv-pop { position: fixed; z-index: 400; background: #fff; border: 1px solid #e6e6e3; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.16); padding: 6px; font-family: Inter, sans-serif; animation: npIn .12s ease; } .inv-pop > p { margin: 6px 10px 6px; font-size: 14px; color: #6b6b69; } .inv-pop button { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: none; border-radius: 7px; cursor: pointer; } .inv-pop button:hover { background: #f4f4f2; } .inv-pop button > svg:last-child:not(:first-child) { width: 18px; height: 18px; flex: none; color: #2f2f2f; } /* ===== Settings window ===== */ .st-wrap { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; font-family: Inter, sans-serif; } .st-dim { position: absolute; inset: 0; background: rgba(15,15,15,.45); animation: npIn .15s ease; } .st { position: relative; display: grid; grid-template-columns: 250px 1fr; width: min(1150px, calc(100vw - 48px)); height: min(720px, calc(100vh - 64px)); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.25); animation: npIn .18s ease; } .st-side { background: #f7f7f5; display: flex; flex-direction: column; min-height: 0; padding: 8px 6px 8px 8px; } .st-search { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border: 1px solid #e3e2df; border-radius: 7px; background: #fff; color: #a5a4a1; } .st-search svg { width: 16px; height: 16px; flex: none; } .st-search input { border: 0; outline: 0; flex: 1; min-width: 0; font: 14.5px Inter, sans-serif; background: none; } .st-nav { overflow-y: auto; flex: 1; padding-right: 2px; } .st-grp { margin: 14px 8px 4px; font-size: 12.5px; font-weight: 500; color: #8a8a88; } .st-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 6px; font: 14.5px Inter, sans-serif; color: #37352f; cursor: pointer; text-align: left; } .st-item:hover { background: #ececea; } .st-item.on { background: #e9e9e7; font-weight: 500; } .st-item > svg { width: 19px; height: 19px; color: #6b6b69; flex: none; } .st-item span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-av { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid #e3e2df; display: grid; place-items: center; font-size: 11px; color: #6b6b69; } .st-main { overflow-y: auto; padding: 36px 80px 60px 70px; color: #2f2f2f; } .st-main h1 { margin: 0 0 6px; font: 700 28px Inter, sans-serif; } .st-lead { margin: 0 0 30px; font-size: 16px; color: #4a4a48; } .st-main h2 { margin: 30px 0 0; padding-bottom: 12px; border-bottom: 1px solid #ececea; font: 500 17px Inter, sans-serif; } .st-row { display: flex; align-items: center; gap: 20px; justify-content: space-between; padding: 14px 0; } .st-row b { display: block; font: 500 15px Inter, sans-serif; } .st-row small { display: block; margin-top: 3px; font-size: 14px; color: #6b6b69; line-height: 1.45; } .st-btn { flex: none; padding: 6px 12px; border: 1px solid #e3e2df; border-radius: 7px; background: #fff; color: #2f2f2f; font: 500 14.5px Inter, sans-serif; cursor: pointer; text-decoration: none; } .st-btn:hover { background: #f4f4f2; } .st-btn.blue { background: #2383e2; border-color: #2383e2; color: #fff; } .st-btn.blue:hover { background: #1a6fc4; } .st-btn.red { color: #d44c47; border-color: #f0cfcd; } .st-btn.red:hover { background: #fdf1f0; } .st-in { padding: 8px 10px; border: 1px solid #e3e2df; border-radius: 7px; background: #fafaf9; font: 15.5px Inter, sans-serif; outline: none; width: 100%; box-sizing: border-box; } .st-in:focus { border-color: #2383e2; background: #fff; } .st-sel { padding: 6px 10px; border: 1px solid #e3e2df; border-radius: 7px; font: 14.5px Inter, sans-serif; background: #fff; } .st-prof { display: flex; align-items: center; gap: 22px; padding: 22px 0 6px; } .st-prof label { flex: 0 1 360px; } .st-prof small { display: block; margin-bottom: 6px; color: #6b6b69; font-size: 13.5px; } .st-bigav { width: 60px; height: 60px; border-radius: 50%; background: #f4f4f2; border: 1px solid #e3e2df; display: grid; place-items: center; font-size: 26px; color: #4a4a48; flex: none; } .st-pwform { display: grid; gap: 8px; max-width: 360px; padding: 0 0 12px; } .st-pwform.hidden { display: none; } .st-danger-h { color: #d44c47; } .st-p { font-size: 15px; color: #4a4a48; line-height: 1.55; margin: 14px 0; } .st-copy { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid #e3e2df; border-radius: 8px; background: #fafaf9; } .st-copy span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #4a4a48; } .st-link { border: 0; background: none; padding: 8px 0; color: #2383e2; font: 14.5px Inter, sans-serif; cursor: pointer; text-decoration: none; } .st-peoplehead { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ececea; margin-top: 10px; } .st-peoplehead h2 { border: 0; margin: 0; } .st-table { margin: 8px 0 16px; } .st-person { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #f1f1ef; color: inherit; text-decoration: none; } .st-person .st-av { width: 30px; height: 30px; font-size: 13px; } .st-person > div { flex: 1; min-width: 0; } .st-person b { display: block; font: 500 15px Inter, sans-serif; } .st-person small { color: #6b6b69; font-size: 13.5px; } .st-person.pending { opacity: .7; } a.st-person:hover { background: #fafaf9; } .st-role { font-size: 13.5px; color: #6b6b69; text-transform: capitalize; } .st-tag { flex: none; font-size: 13px; padding: 3px 8px; border-radius: 5px; background: #f1f1ef; color: #6b6b69; } .st-tag.on { background: #e7f3fd; color: #1a6fc4; } .st-aihero { display: flex; align-items: center; gap: 16px; padding: 10px 0 16px; border-bottom: 1px solid #ececea; } .st-aihero .bot-face { position: relative; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1); flex: none; } .st-aihero .face-ink { position: absolute; inset: 0; width: 100%; height: 100%; } .st-aihero b { display: block; font: 600 17px Inter, sans-serif; } .st-aihero small { color: #6b6b69; font-size: 14px; } .st-meter { height: 8px; border-radius: 6px; background: #ececea; overflow: hidden; margin-top: 20px; } .st-meter span { display: block; height: 100%; background: #2383e2; border-radius: 6px; } .st-billing h2:first-child { display: none; } .st-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 0; background: none; border-radius: 6px; color: #8a8a88; display: grid; place-items: center; cursor: pointer; } .st-x:hover { background: #f1f1ef; } .st-x svg { width: 18px; height: 18px; } @media (max-width: 760px) { .st { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .st-side { max-height: 200px; } .st-main { padding: 24px 18px 40px; } .st-row { flex-wrap: wrap; } } body:has(.st-wrap) #modal { z-index: 300; } body:has(.st-wrap) .inv-pop { z-index: 400; } /* ===== AI chat layout: sidebar / floating ===== */ body.dock-float #app { margin-right: 0 !important; } .ai-dock.float { top: auto; left: auto; right: 24px; bottom: 24px; width: 420px; height: min(640px, calc(100vh - 48px)); border: 1px solid #e6e6e3; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.16); overflow: hidden; animation: dkPop .2s ease; } @keyframes dkPop { from { opacity: 0; transform: translateY(12px) scale(.98); } } #dkFull svg { width: 20px; height: 20px; } .dk-lay { position: fixed; z-index: 140; min-width: 210px; background: #fff; border: 1px solid #e6e6e3; border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.14); padding: 6px; font-family: Inter, sans-serif; animation: npIn .12s ease; } .dk-lay button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 7px; font: 15px Inter, sans-serif; color: #2f2f2f; cursor: pointer; text-align: left; } .dk-lay button:hover { background: #f1f1ef; } .dk-lay span { flex: 1; } .dk-lay svg { width: 20px; height: 20px; flex: none; } .dk-lay hr { border: 0; border-top: 1px solid #ececea; margin: 5px 6px; } @media (max-width: 900px) { .ai-dock.float { right: 12px; left: 12px; width: auto; } } /* ===== AI approvals ===== */ .dk-appr { border: 0; background: none; padding: 5px 10px; border-radius: 999px; font: 14px Inter, sans-serif; color: #6b6b69; cursor: pointer; } .dk-appr:hover { background: #f1f1ef; } .dk-appr.skip { color: #d9730d; } .dk-appr.skip:hover { background: #fbf3ea; } .apr-pop { position: fixed; z-index: 150; width: 360px; max-width: calc(100vw - 16px); background: #fff; border: 1px solid #e6e6e3; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.14); padding: 6px; font-family: Inter, sans-serif; animation: npIn .12s ease; } .apr-pop > p { margin: 8px 10px 6px; font-size: 14px; color: #6b6b69; } .apr-pop button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; } .apr-pop button:hover { background: #f4f4f2; } .apr-pop span { flex: 1; display: flex; flex-direction: column; gap: 3px; } .apr-pop b { font: 400 15.5px Inter, sans-serif; color: #2f2f2f; } .apr-pop small { font-size: 14px; color: #6b6b69; } .apr-pop .skip b { color: #d9730d; } .apr-pop svg { width: 18px; height: 18px; color: #2f2f2f; flex: none; } .apr-card { margin: 10px 0; padding: 14px; border: 1px solid #e6e6e3; border-radius: 12px; background: #fafaf9; font-size: 14.5px; } .apr-card b { font-weight: 600; } .apr-card ul { margin: 8px 0 12px; padding-left: 18px; color: #4a4a48; line-height: 1.6; } .apr-btns { display: flex; gap: 8px; justify-content: flex-end; } .apr-btns button { padding: 6px 14px; border-radius: 8px; font: 500 14px Inter, sans-serif; cursor: pointer; border: 1px solid #e3e2df; background: #fff; color: #2f2f2f; } .apr-btns .apr-yes { background: #2383e2; border-color: #2383e2; color: #fff; } .apr-btns .apr-yes:hover { background: #1a6fc4; } /* Chat header: room for the face's accessory, nothing clipped */ html body .dk-head { height: 60px; padding-top: 8px; } html body .dk-title { overflow: visible !important; } html body .dk-face { margin-top: 2px; } /* ===== Agent Mode cursor colour ===== */ .ai-cursor span { background: var(--ai-cur, #7c5cff) !important; } .pz-cur { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 4px; text-align: left; } .pz-cur .pz-lbl { margin: 0; flex: 1 0 100%; } .pz-curprev { display: inline-flex; align-items: flex-start; gap: 0; } .pz-curprev svg { width: 22px; height: 22px; } .pz-curprev i { font: 600 11.5px Inter, sans-serif; font-style: normal; color: #fff; padding: 3px 8px; border-radius: 999px; margin-top: 16px; white-space: nowrap; } .pz-sw { display: flex; gap: 8px; flex-wrap: wrap; } .pz-sw button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e3e2df; cursor: pointer; padding: 0; transition: transform .12s; } .pz-sw button:hover { transform: scale(1.1); } .pz-sw button.on { box-shadow: 0 0 0 2px #2f2f2f; } /* ===== Inbox panel ===== */ .nn-ic#nnInbox { position: relative; border: 0; background: none; cursor: pointer; } .nn-ic#nnInbox.on { background: #e9e9e7; border-radius: 6px; } .nn-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #e03e3e; border: 1.5px solid #f8f8f6; } .nn-dot.hidden { display: none; } .inbox { position: fixed; top: 0; bottom: 0; z-index: 55; width: 380px; max-width: calc(100vw - 20px); background: #fff; border-right: 1px solid #ececea; box-shadow: 8px 0 30px rgba(0,0,0,.06); display: flex; flex-direction: column; font-family: Inter, sans-serif; color: #2f2f2f; opacity: 0; transform: translateX(-24px); clip-path: inset(0 0 0 0); transition: opacity .24s ease, transform .28s cubic-bezier(.2,.8,.2,1); pointer-events: none; } .inbox.in { opacity: 1; transform: none; pointer-events: auto; } .ib-head { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px 0 18px; border-bottom: 1px solid #ececea; background: #f8f8f6; flex: none; } .ib-head b { font: 500 15.5px Inter, sans-serif; } .ib-btn { width: 30px; height: 30px; border: 0; background: none; border-radius: 6px; color: #8a8a88; display: grid; place-items: center; cursor: pointer; } .ib-btn:hover, .ib-btn.on { background: #ececea; color: #2f2f2f; } .ib-btn svg { width: 18px; height: 18px; } .ib-list { flex: 1; overflow-y: auto; padding: 6px; } .ib-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 14.5px; line-height: 1.45; } .ib-item:hover { background: #f4f4f2; } .ib-item.unread { background: #f3f8fd; } .ib-item.unread:hover { background: #eaf3fc; } .ib-txt { flex: 1; min-width: 0; } .ib-txt small { display: block; margin-top: 2px; color: #8a8a88; font-size: 12.5px; } .ib-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #f1f1ef; display: grid; place-items: center; color: #6b6b69; font-size: 16px !important; font-weight: 600; } .ib-ic.face { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); position: relative; } .ib-ic.face svg { width: 100%; height: 100%; } .ib-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6b6b69; } .ib-empty svg { width: 40px; height: 40px; color: #8a8a88; } .ib-empty p { margin: 8px 0 0; font-size: 15.5px; } @media (prefers-reduced-motion: reduce) { .inbox { transition: none; } } /* ===== Warning-triangle approval chip + 8x speed ===== */ .dk-appr.icon { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 50%; } .dk-appr.icon svg { width: 18px; height: 18px; } .c-turbo { display: inline-flex; align-items: center; gap: 3px; border: 1px solid transparent; background: none; padding: 4px 9px 4px 7px; border-radius: 999px; font: 600 13px Inter, sans-serif; color: #8a8a88; cursor: pointer; } .c-turbo svg { width: 15px; height: 15px; } .c-turbo:hover { background: #f1f1ef; color: #2f2f2f; } .c-turbo.on { background: linear-gradient(135deg, #fff4d6, #ffe7c2); border-color: #f5c84b; color: #b26b00; } .c-turbo.on svg { fill: #f5b400; } .m-credits { display: block; margin-top: 6px; font-size: 12px; color: #a5a4a1; } /* 8x stays grey: on = filled grey bolt on a light grey pill */ .c-turbo.on { background: #ececea !important; border-color: transparent !important; color: #4a4a48 !important; } .c-turbo.on svg { fill: currentColor !important; } .m-credits { display: inline-flex; align-items: center; gap: 3px; } .m-credits svg { width: 12px; height: 12px; fill: currentColor; color: #a5a4a1; } /* ===== Help Center ===== */ .hc { background: #fff; color: #191919; font-family: Inter, -apple-system, system-ui, sans-serif; } .hc-wrap { display: grid; grid-template-columns: 260px 1fr; max-width: 1400px; margin: 0 auto; min-height: 80vh; } .hc-side { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; padding: 22px 14px 40px 24px; border-right: 1px solid #ededeb; } .hc-grp { margin: 18px 8px 6px; font-size: 12px; color: #8a8a88; } .hc-grp:first-child { margin-top: 0; } .hc-cat-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 5px 8px; border: 0; background: none; border-radius: 6px; font: 14px Inter, sans-serif; color: #191919; cursor: pointer; text-align: left; } .hc-cat-btn:hover, .hc-link:hover { background: #f4f4f2; } .hc-cat-btn .ms { font-size: 18px; color: #a5a4a1; transition: transform .2s; } .hc-cat.open .hc-cat-btn .ms { transform: rotate(90deg); } .hc-arts { display: none; padding: 2px 0 6px 10px; } .hc-cat.open .hc-arts { display: block; } .hc-arts a { display: block; padding: 5px 8px; border-radius: 6px; font-size: 13.5px; color: #55534e; text-decoration: none; line-height: 1.35; } .hc-arts a:hover { background: #f4f4f2; color: #191919; } .hc-arts a.on { background: #f1f1ef; color: #191919; font-weight: 500; } .hc-link { display: block; padding: 5px 8px; border-radius: 6px; font-size: 14px; color: #55534e; text-decoration: none; } .hc-main { padding: 48px 64px 80px; min-width: 0; max-width: 1000px; } .hc-hero { text-align: center; padding: 10px 0 30px; } .hc-hero h1 { margin: 0 0 30px; font: 700 clamp(34px, 4.6vw, 56px)/1.1 Inter, sans-serif; letter-spacing: -.03em; } .hc-search { position: relative; max-width: 640px; margin: 0 auto; } .hc-search > .ms { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #a5a4a1; font-size: 20px; } .hc-search input { width: 100%; box-sizing: border-box; padding: 14px 18px 14px 48px; border: 1px solid #e3e2df; border-radius: 999px; font: 16px Inter, sans-serif; outline: none; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .hc-search input:focus { border-color: #2383e2; box-shadow: 0 0 0 3px rgba(35,131,226,.15); } .hc-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid #e6e6e3; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.12); padding: 6px; text-align: left; } .hc-results.hidden { display: none; } .hc-results a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: #191919; } .hc-results a:hover { background: #f4f4f2; } .hc-results b { display: block; font: 500 14.5px Inter, sans-serif; } .hc-results small { color: #8a8a88; font-size: 12.5px; } .hc-results p { margin: 10px 12px; color: #8a8a88; font-size: 14px; } .hc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; } .hc-chips a { padding: 6px 14px; border: 1px solid #e3e2df; border-radius: 999px; font-size: 13.5px; color: #37352f; text-decoration: none; background: #fff; } .hc-chips a:hover { background: #f4f4f2; } .hc-h2 { margin: 56px 0 18px; font: 700 30px Inter, sans-serif; letter-spacing: -.02em; } .hc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hc-pop { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 170px; padding: 22px 22px 70px; background: #f6f5f4; border-radius: 14px; color: #191919; text-decoration: none; transition: background .15s, transform .15s; } .hc-pop:hover { background: #efeeec; transform: translateY(-2px); } .hc-pop b { font: 600 18px Inter, sans-serif; } .hc-pop small { font-size: 14px; color: #55534e; line-height: 1.45; max-width: 220px; } .hc-art { position: absolute; right: 16px; bottom: 12px; width: 80px; height: 60px; } .hc-art svg, .hc-newart svg { width: 100%; height: 100%; } .hc-teams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .hc-teams a { display: flex; flex-direction: column; gap: 16px; padding: 18px; border: 1px solid #ededeb; border-radius: 12px; color: #191919; text-decoration: none; transition: box-shadow .15s; } .hc-teams a:hover { box-shadow: 0 6px 18px rgba(0,0,0,.06); } .hc-teams b { font: 500 15px Inter, sans-serif; } .hc-tlogo { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #ededeb; display: grid; place-items: center; } .hc-tlogo svg { width: 18px; height: 18px; } .hc-academy { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; margin: 70px 0 10px; } .hc-academy h2 { margin: 0 0 14px; font: 700 clamp(36px, 4vw, 52px)/1.05 Inter, sans-serif; letter-spacing: -.03em; } .hc-academy p { margin: 0 0 20px; font-size: 16px; color: #37352f; line-height: 1.55; max-width: 380px; } .hc-btn { display: inline-block; padding: 9px 16px; border-radius: 8px; background: #2383e2; color: #fff; font: 500 15px Inter, sans-serif; text-decoration: none; } .hc-btn:hover { background: #1a6fc4; } .hc-acad-art { position: relative; } .hc-acad-art > svg { width: 100%; max-width: 340px; display: block; margin: 0 auto; } .hc-acad-face { position: absolute; left: 50%; top: 18%; width: 64px; height: 64px; transform: translateX(-50%); } .hc-acad-face svg { width: 100%; height: 100%; } .hc-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hc-new a { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 20px; border: 1px solid #ededeb; border-radius: 14px; color: #191919; text-decoration: none; transition: box-shadow .15s; } .hc-new a:hover { box-shadow: 0 6px 18px rgba(0,0,0,.06); } .hc-newart { display: grid; place-items: center; height: 130px; margin-bottom: 8px; } .hc-newart svg { width: 150px; height: 110px; } .hc-new b { font: 600 16px Inter, sans-serif; } .hc-new small { font-size: 14px; color: #55534e; line-height: 1.45; } .hc-still { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hc-still a { display: flex; flex-direction: column; gap: 4px; padding: 10px 4px; color: #191919; text-decoration: none; } .hc-still svg { width: 24px; height: 24px; margin-bottom: 6px; } .hc-still b { font: 600 16px Inter, sans-serif; } .hc-still small { font-size: 14px; color: #8a8a88; } .hc-still a:hover b { text-decoration: underline; } .hc-article { max-width: 720px; } .hc-crumbs { display: flex; gap: 8px; font-size: 13.5px; color: #8a8a88; margin-bottom: 18px; } .hc-crumbs a { color: #8a8a88; text-decoration: none; } .hc-crumbs a:hover { color: #191919; } .hc-article h1 { margin: 0 0 22px; font: 700 38px/1.15 Inter, sans-serif; letter-spacing: -.02em; } .hc-body { font-size: 16.5px; line-height: 1.7; color: #37352f; } .hc-body h2 { margin: 30px 0 8px; font: 600 22px Inter, sans-serif; color: #191919; } .hc-body a { color: #2383e2; } .hc-body li { margin: 4px 0; } .hc-body kbd { padding: 1px 6px; border: 1px solid #e3e2df; border-radius: 5px; background: #f6f5f4; font-size: 13px; } .hc-next { display: block; margin-top: 40px; padding: 16px 18px; border: 1px solid #ededeb; border-radius: 12px; color: #191919; text-decoration: none; font-weight: 500; } .hc-next small { display: block; color: #8a8a88; font-weight: 400; font-size: 12.5px; margin-bottom: 2px; } .hc-next:hover { background: #fafaf9; } .hc-helpful { display: flex; align-items: center; gap: 8px; margin-top: 36px; padding-top: 24px; border-top: 1px solid #ededeb; color: #55534e; font-size: 14.5px; } .hc-helpful button { width: 34px; height: 34px; border: 1px solid #e3e2df; border-radius: 8px; background: #fff; display: grid; place-items: center; cursor: pointer; color: #55534e; } .hc-helpful button:hover { background: #f4f4f2; } .hc-helpful svg { width: 17px; height: 17px; } @media (max-width: 1000px) { .hc-grid, .hc-teams, .hc-new { grid-template-columns: repeat(2, 1fr); } .hc-main { padding: 36px 32px 60px; } } @media (max-width: 760px) { .hc-wrap { grid-template-columns: 1fr; } .hc-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid #ededeb; } .hc-grid, .hc-teams, .hc-new, .hc-still, .hc-academy { grid-template-columns: 1fr; } .hc-main { padding: 28px 16px 50px; } }