/* Wons design system — emerald + IBM Plex, themeable (light default / dark). Modeled on the reference portal design. Toggle via . */ :root { /* LIGHT (default) */ --bg: #f4f7f5; --surface: #ffffff; --surface-2: #f4f7f5; --sidebar: #ffffff; --line: #e6ebe8; --line-2: #eef2f0; --text: #0e1512; --text-soft: #515b56; --muted: #8a948e; --faint: #b4bcb6; /* "ink" = primary/secondary text; aliases to --text so it adapts per theme (resolved lazily at use-site, so this one line covers light + dark). */ --ink: var(--text); --ink-soft: var(--text-soft); /* always-dark fill for chat "user" bubbles + code blocks (white text on top, so it must stay dark in BOTH themes — do not alias to --text). */ --ink-solid: #12201a; --accent: #0d9b6c; /* emerald — primary button bg */ --accent-2: #12b07b; --accent-deep: #0a7d56; --accent-fg: #ffffff; /* text on accent button */ --accent-ink: #0a7d56; /* accent as text/icon (readable on light) */ /* legacy "brass" aliases now map to emerald so existing pages restyle */ --brass: #0d9b6c; --brass-deep: #0a7d56; --brass-soft: #cdeede; --brass-tint: #ecf9f3; --ok: #0d9b6c; --ok-soft: #e4f5ec; --bad: #d1453b; --bad-soft: #fbe9e7; --nav-on-bg: #ecf9f3; --nav-on-fg: #0a7d56; --r-sm: 8px; --r: 11px; --r-lg: 13px; --r-xl: 16px; --r-2xl: 18px; --sh-sm: 0 1px 2px rgba(16,24,20,.05); --sh: 0 4px 14px -6px rgba(16,24,20,.10), 0 1px 2px rgba(16,24,20,.04); --sh-lg: 0 24px 50px -22px rgba(16,24,20,.20); --font-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; } [data-theme="dark"] { --bg: #0a0d10; --surface: #12161b; --surface-2: #12181e; --sidebar: #0c1014; --line: #1c232a; --line-2: #232a31; --text: #e6edf3; --text-soft: #c3ccd6; --muted: #8a94a0; --faint: #5c6570; --accent: #34d399; --accent-2: #34d399; --accent-deep: #0d9b6c; --accent-fg: #06251a; --accent-ink: #34d399; --brass: #34d399; --brass-deep: #34d399; --brass-soft: rgba(52,211,153,.18); --brass-tint: rgba(52,211,153,.10); --ok: #34d399; --ok-soft: rgba(52,211,153,.12); --bad: #f87171; --bad-soft: rgba(248,113,113,.12); --nav-on-bg: rgba(52,211,153,.10); --nav-on-fg: #34d399; --sh-sm: 0 1px 2px rgba(0,0,0,.3); --sh: 0 6px 20px -8px rgba(0,0,0,.5); --sh-lg: 0 24px 50px -18px rgba(0,0,0,.6); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; transition: background .2s, color .2s; } [x-cloak] { display: none !important; } .font-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } /* ── Shell ─────────────────────────────────────────────── */ .app { display: flex; min-height: 100vh; } .rail { width: 248px; flex-shrink: 0; background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .rail__brand { display: flex; align-items: center; gap: 11px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line); } .rail__mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #06251a; font-weight: 700; font-size: 18px; box-shadow: 0 0 0 1px rgba(52,211,153,.25), 0 6px 18px -6px rgba(52,211,153,.45); } .rail__name { color: var(--text); font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: -.01em; } .rail__tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .rail__sec { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 16px 22px 8px; } .rail__nav { padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--text-soft); position: relative; transition: background .15s, color .15s; } .nav-item svg, .nav-item .ms { width: 18px; height: 18px; font-size: 19px; opacity: .85; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item--on { background: var(--nav-on-bg); color: var(--nav-on-fg); font-weight: 600; } .nav-item--on svg, .nav-item--on .ms { opacity: 1; color: var(--nav-on-fg); } .rail__foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .rail__avatar { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(140deg, #60a5fa, #66d8a9); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; } .rail__user { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 5px; border-radius: 7px; display: grid; place-items: center; transition: color .15s, background .15s; } .icon-btn:hover { color: var(--text); background: var(--surface-2); } /* credits widget */ .credits { margin: 8px 14px 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 13px; } .credits__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .credits__lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .credits__val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-ink); } .credits__track { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; } .credits__fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #0d9b6c, #34d399); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 62px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; gap: 16px; } .topbar h1 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin: 0; } .topbar__meta { display: flex; align-items: center; gap: 14px; } .search { flex: 1; max-width: 400px; display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; } .search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: 13px; } .kbd { font-family: var(--font-mono); font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; } .content { padding: 24px; max-width: 1440px; width: 100%; margin: 0 auto; } /* ── Buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 9px; font-size: 13px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform .06s, filter .15s, background .15s; white-space: nowrap; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn .ms { font-size: 18px; } .btn--ink, .btn--brass { background: linear-gradient(140deg, var(--accent-2), var(--accent)); color: var(--accent-fg); box-shadow: 0 6px 16px -9px rgba(13,155,108,.7); } .btn--ink:hover, .btn--brass:hover { filter: brightness(1.05); } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--line); } .btn--ghost:hover { background: var(--surface-2); } .btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; } .link-brass, .link-accent { color: var(--accent-ink); font-weight: 600; } .link-brass:hover { text-decoration: underline; } /* ── Cards ─────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); } .card__pad { padding: 20px; } .card__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-2); } .card__title { font-weight: 700; font-size: 14px; letter-spacing: -.01em; } /* ── Hero ──────────────────────────────────────────────── */ .hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 26px 28px; box-shadow: var(--sh); display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 60%); } .hero__figure { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: .95; letter-spacing: -.04em; } .hero__figure .u { color: var(--accent-ink); } .hero__rule { width: 44px; height: 2px; background: var(--accent); margin: 14px 0; border-radius: 2px; } .hero__stats { display: flex; gap: 26px; flex-wrap: wrap; } .hstat__n { font-family: var(--font-mono); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; } .hstat__l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; } /* ── KPI tiles ─────────────────────────────────────────── */ /* compact single-row stat cards (analytics) — 6 across on desktop, responsive */ .kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; min-width: 0; } .kpi__n { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.03em; line-height: 1; white-space: nowrap; } .kpi__l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kpi__d { font-size: 11.5px; color: var(--text-soft); margin-top: 5px; } .kpi__ico { width: 28px; height: 28px; border-radius: 8px; background: var(--nav-on-bg); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 9px; } .kpi__ico .ms { font-size: 16px; } @media (max-width: 1150px) { .kpis { grid-template-columns: repeat(3, 1fr); } } /* ── Bars / meters ─────────────────────────────────────── */ .bars { display: flex; align-items: flex-end; gap: 9px; height: 168px; } .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; } .bar__v { font-family: var(--font-mono); font-size: 11px; color: var(--faint); } .bar__col { width: 100%; border-radius: 6px 6px 3px 3px; background: var(--line); min-height: 4px; transition: background .15s; } .bar:hover .bar__col { background: linear-gradient(180deg, #34d399, #0d9b6c); } .bar:hover .bar__v { color: var(--accent-ink); } .bar__l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .meter { margin-bottom: 16px; } .meter__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; } .meter__l { font-size: 13px; color: var(--text-soft); font-weight: 500; } .meter__v { font-family: var(--font-mono); font-weight: 600; } .meter__track { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; } .meter__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0d9b6c, #34d399); } /* balanced analytics grids — equal-height cards, collapse on narrow screens */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: stretch; } .grid-2 > .card, .grid-3 > .card { min-width: 0; } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* segmented range control (analytics) */ .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; } .seg__i { font-size: 12.5px; font-weight: 500; color: var(--text-soft); padding: 5px 11px; border-radius: 7px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .seg__i:hover { color: var(--text); } .seg__i--on { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); } .seg__i--lock { color: var(--faint); cursor: not-allowed; } /* weekday × hour activity heatmap */ .heat { display: flex; flex-direction: column; gap: 3px; } .heat__row { display: flex; align-items: center; gap: 3px; } .heat__day { width: 30px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); flex-shrink: 0; } .heat__c { flex: 1; aspect-ratio: 1; min-width: 0; height: 14px; border-radius: 3px; } /* ── Lists / rows ──────────────────────────────────────── */ .row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line-2); } .row:last-child { border-bottom: 0; } .avatar { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 0; background: linear-gradient(140deg, #60a5fa, #7c5cf0); } .rank { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent-ink); background: var(--nav-on-bg); flex-shrink: 0; } .row__main { flex: 1; min-width: 0; } .row__t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row__s { font-size: 12px; color: var(--muted); margin-top: 1px; } /* ── Chips ─────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; } .chip--ok { color: var(--ok); background: var(--ok-soft); } .chip--bad { color: var(--bad); background: var(--bad-soft); } .chip--neutral { color: var(--text-soft); background: var(--surface-2); } .dot { width: 6px; height: 6px; border-radius: 99px; } /* ── Tables ────────────────────────────────────────────── */ .tbl { width: 100%; border-collapse: collapse; } .tbl thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--line); } .tbl tbody td { padding: 14px 20px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl tbody tr:hover { background: var(--surface-2); } .tbl .amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── Forms ─────────────────────────────────────────────── */ .field { display: block; } .field__l { font-size: 12.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; display: block; } .input { width: 100%; height: 40px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); transition: border .15s, box-shadow .15s; } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--brass-tint); } textarea.input { height: auto; padding: 10px 13px; line-height: 1.5; } select.input { -webkit-appearance: none; appearance: none; } /* Make native file inputs an obvious, clickable button (was easy to miss). */ input[type="file"] { font: inherit; font-size: 13px; color: var(--muted); max-width: 100%; } input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 15px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, color .15s; } input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--nav-on-bg); } input[type="file"]::-webkit-file-upload-button { margin-right: 12px; padding: 8px 15px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: inherit; } /* ── misc ──────────────────────────────────────────────── */ .section-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 4px 0 12px; } .flash { font-size: 13px; border-radius: 9px; padding: 11px 14px; border: 1px solid; } .flash--ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; } .flash--bad { color: var(--bad); background: var(--bad-soft); border-color: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* theme toggle (global, fixed) */ .theme-toggle { position: fixed; bottom: 18px; right: 18px; z-index: 100; width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text-soft); cursor: pointer; display: grid; place-items: center; box-shadow: var(--sh); transition: color .15s, transform .1s; } .theme-toggle:hover { color: var(--accent-ink); } .theme-toggle:active { transform: scale(.94); } .theme-toggle .ms { font-size: 21px; } /* ── Mobile navigation drawer ─────────────────────────────── */ /* Hamburger + scrim live in layout.html (app pages only). On desktop the hamburger is hidden and the rail is a normal sticky sidebar; at ≤860px the rail becomes an off-canvas drawer toggled by body.rail-open. */ .railburger { display: none; position: fixed; top: 11px; left: 14px; z-index: 130; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); place-items: center; cursor: pointer; box-shadow: var(--sh-sm); color: var(--text); } .railburger .ms { font-size: 22px; } .rail-scrim { display: none; } @media (max-width: 860px) { body:has(.app) .railburger { display: grid; } .rail { position: fixed; top: 0; left: 0; height: 100vh; z-index: 120; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 50px rgba(8,12,16,.35); } body.rail-open .rail { transform: translateX(0); } .rail-scrim { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(8,12,16,.45); opacity: 0; pointer-events: none; transition: opacity .25s; } body.rail-open .rail-scrim { opacity: 1; pointer-events: auto; } .topbar { padding-left: 52px; } /* clear the hamburger */ .kpis { grid-template-columns: repeat(2, 1fr); } .hero { grid-template-columns: 1fr; } .content { padding: 18px; } } /* Wide tables scroll horizontally instead of overflowing the viewport */ @media (max-width: 760px) { .tbl { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } } /* Collapse inline multi-column grids to a single column on phones (billing packs, plan limits/features, editor field rows). !important beats the inline style; keeps these readable without editing every template. */ @media (max-width: 680px) { [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* header: let the title and its action buttons wrap instead of overflowing */ /* title/actions wrapping is handled by the ≤760px .topbar rule below */ .topbar h1 { min-width: 0; } .topbar__meta { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ── Global command bar (search · notifications · user) ──── */ .cmdbar { position: fixed; top: 11px; right: 18px; z-index: 60; display: flex; align-items: center; gap: 8px; } .cmdbar__search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 13px; box-shadow: var(--sh-sm); } .cmdbar__search:hover { border-color: var(--accent); } .cmdbar__icon { position: relative; width: 38px; height: 38px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); color: var(--text-soft); cursor: pointer; display: grid; place-items: center; box-shadow: var(--sh-sm); } .cmdbar__icon:hover { color: var(--accent-ink); } .cmdbar__dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--surface); } .cmdbar__user { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 9px 0 6px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; box-shadow: var(--sh-sm); } .cmdbar__avatar { width: 27px; height: 27px; border-radius: 7px; background: linear-gradient(140deg, #60a5fa, #7c5cf0); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; } .pop { position: absolute; top: 46px; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--sh-lg); overflow: hidden; z-index: 70; } .pop__head { padding: 11px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pop__item { display: flex; align-items: center; gap: 11px; padding: 10px 14px; text-decoration: none; color: var(--text); transition: background .12s; } .pop__item:hover { background: var(--surface-2); } .pop__ico { font-size: 18px; color: var(--muted); flex-shrink: 0; } /* ── ⌘K command palette ──────────────────────────────────── */ .palette { position: fixed; inset: 0; z-index: 200; background: rgba(8,12,16,.45); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .palette__box { width: 100%; max-width: 580px; margin: 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-lg); overflow: hidden; } .palette__input { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line-2); } .palette__input input { flex: 1; border: none; outline: none; background: none; font: inherit; font-size: 15px; color: var(--text); } .palette__results { max-height: 54vh; overflow-y: auto; padding: 6px; } .palette__empty { padding: 30px; text-align: center; color: var(--muted); font-size: 13px; } .palette__group { display: flex; align-items: center; gap: 6px; padding: 11px 12px 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .palette__row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--text); } .palette__row--on, .palette__row:hover { background: var(--nav-on-bg); } /* reserve topbar space for the fixed command bar */ .topbar { padding-right: 392px; } /* phones: the fixed cmdbar (search/bell/user) occupies the top strip — drop the topbar content below it instead of squeezing the title beside it */ @media (max-width: 760px) { .cmdbar__search span:not(.ms):not(.kbd) { display: none; } .topbar { padding-top: 58px; padding-right: 26px; height: auto; min-height: 62px; flex-wrap: wrap; row-gap: 10px; padding-bottom: 12px; } } /* workspace switcher (sidebar) */ .ws { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; text-decoration: none; } .ws:hover { border-color: var(--accent); } .ws__a { width: 26px; height: 26px; border-radius: 6px; background: var(--nav-on-bg); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; flex-shrink: 0; } .ws__b { flex: 1; min-width: 0; line-height: 1.2; } .ws__n { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws__p { display: block; font-size: 9.5px; color: var(--muted); font-family: var(--font-mono); } .ws__wrap { padding: 12px 12px 4px; } .ws__lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 0 4px 7px; } @keyframes wonspulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } } /* ── Chatbot editor ─────────────────────────────────────── */ .editor-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 20px; align-items: start; } .editor-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; } .toggle-row { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; cursor: pointer; padding: 4px 0; } .toggle-row input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; } .toggle-row > span { display: flex; flex-direction: column; gap: 2px; } .toggle-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; } .toggle-row.is-locked { opacity: .55; } /* ── Responsive grid utilities (collapse on smaller screens) ── */ .r-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .r-split { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; } .r-split13 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; } .r-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 1280px) { .content { max-width: 100%; } } @media (max-width: 1100px) { .editor-grid { grid-template-columns: 1fr; } .editor-side { position: static; } .r-split, .r-split13 { grid-template-columns: 1fr; } } @media (max-width: 980px) { .r-grid-4 { grid-template-columns: repeat(2, 1fr); } .r-split2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .r-grid-4 { grid-template-columns: 1fr; } } /* the global command bar is app-shell chrome — hide it on non-app pages (marketing/public) */ body:not(:has(.app)) .cmdbar { display: none; } /* ── Widget live-preview (editor) ─ static styling in classes so Alpine :style (which replaces, not merges, the style attr in this engine) only carries the dynamic color ── */ .wp { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 50px -22px rgba(16,24,20,.35); } .wp-hd { padding: 15px 17px; color: #fff; display: flex; align-items: center; gap: 12px; } .wp-av { position: relative; width: 40px; height: 40px; border-radius: 13px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-weight: 700; font-size: 16px; flex-shrink: 0; } .wp-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: #34d27b; border: 2.5px solid #fff; } .wp-hi { flex: 1; line-height: 1.2; min-width: 0; } .wp-nm { font-size: 15px; font-weight: 700; } .wp-st { font-size: 11.5px; opacity: .85; display: flex; align-items: center; gap: 5px; margin-top: 2px; } .wp-stdot { width: 6px; height: 6px; border-radius: 50%; background: #4ee59a; display: inline-block; } .wp-msgs { padding: 18px 15px; min-height: 170px; display: flex; flex-direction: column; gap: 13px; } .wp-day { text-align: center; font-size: 10px; font-weight: 600; color: #9aa5b4; letter-spacing: .05em; } .wp-row { display: flex; gap: 8px; align-items: flex-end; } .wp-rowu { display: flex; justify-content: flex-end; } .wp-bav { width: 26px; height: 26px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .wp-bot { max-width: 80%; background: #fff; border: 1px solid rgba(31,45,61,.08); border-radius: 15px 15px 15px 5px; padding: 10px 13px; font-size: 13px; line-height: 1.5; color: #1c2530; } .wp-usr { max-width: 80%; color: #fff; border-radius: 15px 15px 5px 15px; padding: 10px 13px; font-size: 13px; line-height: 1.5; } .typing-dots { display: inline-flex; align-items: center; gap: 4px; } .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; animation: typing-bounce 1.2s infinite ease-in-out; } .typing-dots span:nth-child(2) { animation-delay: .2s; } .typing-dots span:nth-child(3) { animation-delay: .4s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: .9; } } .wp-qs { padding: 8px 13px 2px; display: flex; gap: 7px; flex-wrap: wrap; } .wp-chip { font-size: 12px; font-weight: 600; background: #fff; border: 1.5px solid; border-radius: 999px; padding: 6px 12px; opacity: .92; } .wp-cmp { padding: 11px 13px; display: flex; align-items: center; gap: 9px; } .wp-inp { flex: 1; background: #fff; border: 1px solid rgba(31,45,61,.12); border-radius: 13px; padding: 10px 13px; font-size: 13px; color: #9aa5b4; } .wp-send { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; } .wp-ft { padding: 8px 13px 10px; display: flex; align-items: center; justify-content: center; gap: 5px; border-top: 1px solid rgba(31,45,61,.06); font-size: 10.5px; color: #9aa5b4; font-weight: 500; } .pulsedot { width: 7px; height: 7px; border-radius: 50%; animation: wonspulse 2s infinite; display: inline-block; } .statv { font-size: 10.5px; } /* ── Flow builder (visual answer pipeline + plain-language rules) ───────── */ .flow { position: relative; display: flex; flex-direction: column; } .flow-node { position: relative; display: flex; gap: 15px; align-items: flex-start; padding: 9px 0; } .flow-node::before { content: ""; position: absolute; left: 22px; top: 44px; height: calc(100% - 26px); width: 2px; background: linear-gradient(var(--line), var(--line)); } .flow-node:last-child::before { display: none; } .flow-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; color: #fff; z-index: 1; box-shadow: 0 6px 16px -6px rgba(31,45,61,.35); } .flow-ic .ms { font-size: 24px; } .fic-msg { background: linear-gradient(140deg,#94a3b8,#64748b); } .fic-rule { background: linear-gradient(140deg,#34d399,#0d9b6c); } .fic-hi { background: linear-gradient(140deg,#fbbf24,#f59e0b); } .fic-kb { background: linear-gradient(140deg,#60a5fa,#3b82f6); } .fic-ai { background: linear-gradient(140deg,#a78bfa,#7c3aed); } .fic-out { background: linear-gradient(140deg,#34d399,#10b981); } .flow-body { flex: 1; min-width: 0; padding-top: 4px; } .flow-ttl { font-weight: 700; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .flow-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; } .flow-branch { margin-top: 7px; font-size: 11.5px; color: var(--accent-ink); background: var(--nav-on-bg); border-radius: 9px; padding: 6px 11px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .flow-branch .ms { font-size: 14px; } .flow-count { font-family: var(--font-mono); font-size: 10px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 20px; padding: 2px 9px; } /* plain-language rule cards */ .rulecard { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--sh-sm); transition: border-color .15s; } .rulecard:hover { border-color: var(--line-2); } .rulecard--off { opacity: .58; } .rulecard__read { display: flex; align-items: center; gap: 12px; padding: 15px 16px; } .rule-sentence { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; } .rule-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; font-weight: 700; flex-shrink: 0; } .rule-tag--if { background: color-mix(in srgb, #6366f1 14%, transparent); color: #4f46e5; } .rule-tag--then { background: var(--nav-on-bg); color: var(--accent-ink); } [data-theme="dark"] .rule-tag--if { background: rgba(129,140,248,.18); color: #a5b4fc; } .rule-phrase { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 11px; font-weight: 600; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rule-arrow { color: var(--muted); font-size: 18px; } .rule-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .rulecard__edit { border-top: 1px dashed var(--line-2); padding: 16px; display: none; flex-direction: column; gap: 12px; } .rulecard__edit.open { display: flex; } /* sentence-style builder */ .sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; font-size: 14px; color: var(--ink-soft); line-height: 2.2; } .sentence .input, .sentence select.input { height: 38px; width: auto; display: inline-flex; } .sentence .s-grow { flex: 1 1 200px; min-width: 160px; } .chipset { display: flex; flex-wrap: wrap; gap: 7px; } .chipset button { font-size: 12px; font-weight: 600; color: var(--accent-ink); background: var(--nav-on-bg); border: 1px solid transparent; border-radius: 20px; padding: 5px 12px; cursor: pointer; transition: border-color .15s; } .chipset button:hover { border-color: var(--accent); } /* ════════════════════════════════════════════════════════════ MOTION & DELIGHT LAYER — additive; everything degrades to static under prefers-reduced-motion (killed globally above). ════════════════════════════════════════════════════════════ */ @keyframes ds-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes ds-pop { 0% { opacity: 0; transform: scale(.96) translateY(6px); } 100% { opacity: 1; transform: none; } } @keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ds-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes ds-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes ds-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes ds-aurora { 0% { transform: translate(-8%, -4%) rotate(0deg) scale(1); } 33% { transform: translate(6%, 5%) rotate(40deg) scale(1.12); } 66% { transform: translate(-4%, 8%) rotate(-25deg) scale(.95); } 100% { transform: translate(-8%, -4%) rotate(0deg) scale(1); } } @keyframes ds-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes ds-ring { 0% { box-shadow: 0 0 0 0 rgba(13,155,108,.35); } 100% { box-shadow: 0 0 0 14px rgba(13,155,108,0); } } /* page-load stagger: direct children of .content rise in sequence */ .content > * { animation: ds-rise .5s cubic-bezier(.22,1,.36,1) both; } .content > *:nth-child(1) { animation-delay: .02s; } .content > *:nth-child(2) { animation-delay: .07s; } .content > *:nth-child(3) { animation-delay: .12s; } .content > *:nth-child(4) { animation-delay: .17s; } .content > *:nth-child(5) { animation-delay: .22s; } .content > *:nth-child(6) { animation-delay: .27s; } .content > *:nth-child(n+7) { animation-delay: .32s; } /* KPI tiles cascade inside their row */ .r-grid-4 > .card, .kpis > .kpi { animation: ds-pop .45s cubic-bezier(.22,1,.36,1) both; } .r-grid-4 > .card:nth-child(2), .kpis > .kpi:nth-child(2) { animation-delay: .06s; } .r-grid-4 > .card:nth-child(3), .kpis > .kpi:nth-child(3) { animation-delay: .12s; } .r-grid-4 > .card:nth-child(4), .kpis > .kpi:nth-child(4) { animation-delay: .18s; } .kpis > .kpi:nth-child(5) { animation-delay: .24s; } .kpis > .kpi:nth-child(6) { animation-delay: .30s; } /* cards lift on hover */ .card { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); } /* primary button: glow + press */ .btn--ink, .btn--brass { position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .2s ease, filter .15s; } .btn--ink:hover, .btn--brass:hover { box-shadow: 0 8px 22px -8px rgba(13,155,108,.75); transform: translateY(-1px); } .btn--ink:active, .btn--brass:active { transform: translateY(0) scale(.985); } .btn--ink::after, .btn--brass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%); background-size: 220% 100%; background-position: 220% 0; transition: none; } .btn--ink:hover::after, .btn--brass:hover::after { animation: ds-shimmer .9s ease; } /* nav: sliding accent indicator + icon nudge */ .nav-item::before { content: ""; position: absolute; left: -12px; top: 50%; height: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); transform: translateY(-50%); transition: height .18s ease; } .nav-item--on::before { height: 60%; } .nav-item .ms { transition: transform .18s ease; } .nav-item:hover .ms { transform: translateY(-1px) scale(1.08); } /* charts: bars grow, meters sweep, sparklines fade */ .bars .bar__col { transform-origin: bottom; animation: ds-grow-y .6s cubic-bezier(.22,1,.36,1) both; } .bars .bar:nth-child(2) .bar__col { animation-delay: .05s; } .bars .bar:nth-child(3) .bar__col { animation-delay: .1s; } .bars .bar:nth-child(4) .bar__col { animation-delay: .15s; } .bars .bar:nth-child(5) .bar__col { animation-delay: .2s; } .bars .bar:nth-child(6) .bar__col { animation-delay: .25s; } .bars .bar:nth-child(n+7) .bar__col { animation-delay: .3s; } .meter__fill, .credits__fill { transform-origin: left; animation: ds-grow-x .8s cubic-bezier(.22,1,.36,1) both .15s; } .card svg polyline, .card svg polygon { animation: ds-fade .9s ease both .2s; } /* popovers & palette spring in */ .pop { animation: ds-pop .18s cubic-bezier(.22,1,.36,1) both; } .palette__box { animation: ds-pop .22s cubic-bezier(.22,1,.36,1) both; } .palette { animation: ds-fade .18s ease both; } /* theme toggle: spin the icon on press */ .theme-toggle .ms { transition: transform .45s cubic-bezier(.22,1,.36,1); } .theme-toggle:active .ms { transform: rotate(180deg); } /* ── Empty states ─────────────────────────────────────────── */ .empty { text-align: center; padding: 52px 24px; } .empty__art { position: relative; width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 26px; display: grid; place-items: center; background: linear-gradient(140deg, var(--brass-tint), var(--surface-2)); border: 1px solid var(--line); animation: ds-float 4.5s ease-in-out infinite; } .empty__art::after { content: ""; position: absolute; inset: -7px; border-radius: 32px; border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); } .empty__art .ms { font-size: 38px; color: var(--accent-ink); } .empty__t { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; } .empty__s { font-size: 13.5px; color: var(--muted); max-width: 400px; margin: 7px auto 18px; line-height: 1.6; } /* ── Onboarding checklist ─────────────────────────────────── */ .onboard { position: relative; overflow: hidden; } .onboard::before { content: ""; position: absolute; top: -70px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); pointer-events: none; } .onboard__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .onboard__track { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; flex: 1; max-width: 220px; } .onboard__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0d9b6c, #34d399); transform-origin: left; animation: ds-grow-x .8s cubic-bezier(.22,1,.36,1) both .2s; } .onboard__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; } @media (max-width: 980px) { .onboard__steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .onboard__steps { grid-template-columns: 1fr; } } .ob-step { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--text); transition: border-color .18s, transform .18s, box-shadow .18s; } .ob-step:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh-sm); } .ob-step__c { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; border: 2px solid var(--line); color: transparent; font-size: 15px; transition: all .2s; } .ob-step--done .ob-step__c { background: var(--accent); border-color: var(--accent); color: #fff; } .ob-step--done .ob-step__t { text-decoration: line-through; color: var(--muted); } .ob-step__t { font-size: 13px; font-weight: 600; line-height: 1.25; } .ob-step__s { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; } .ob-step--next { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(140deg, var(--brass-tint), var(--surface)); } .ob-step--next .ob-step__c { border-color: var(--accent); animation: ds-ring 1.8s ease-out infinite; } /* ── Auth pages (split brand panel + form) ───────────────── */ .auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; } .auth__brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 48px; color: #eafff5; background: #07110d; } .auth__brand::before, .auth__brand::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; } .auth__brand::before { width: 520px; height: 520px; left: -140px; top: -120px; background: radial-gradient(circle, #0d9b6c, transparent 65%); animation: ds-aurora 16s ease-in-out infinite; } .auth__brand::after { width: 460px; height: 460px; right: -160px; bottom: -140px; background: radial-gradient(circle, #34d399, transparent 62%); animation: ds-aurora 20s ease-in-out infinite reverse; } .auth__brand > * { position: relative; z-index: 1; } .auth__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #eafff5; font-weight: 700; font-size: 18px; letter-spacing: -.01em; } .auth__quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -.03em; line-height: 1.12; max-width: 480px; } .auth__quote .u { color: #34d399; } .auth__points { display: flex; flex-direction: column; gap: 13px; margin-top: 26px; } .auth__pt { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: rgba(234,255,245,.82); line-height: 1.5; max-width: 430px; } .auth__pt .ms { font-size: 18px; color: #34d399; flex-shrink: 0; margin-top: 1px; } .auth__foot { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(234,255,245,.4); } .auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); } .auth__card { width: 100%; max-width: 400px; animation: ds-rise .5s cubic-bezier(.22,1,.36,1) both .1s; } /* Mobile: single column, brand hidden, and top-align the card so tall forms (e.g. signup with confirm password) flow into normal page scroll instead of being vertically centered in a viewport-height box and clipped under the browser toolbar. Bottom padding clears the toolbar / home indicator. */ @media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth__brand { display: none; } .auth__panel { align-items: flex-start; padding: 28px 20px calc(40px + env(safe-area-inset-bottom, 0px)); } } /* floating chat preview bubbles on the auth brand panel */ .auth-demo { display: flex; flex-direction: column; gap: 10px; max-width: 350px; margin-top: 34px; } .auth-demo__b { padding: 11px 14px; border-radius: 15px; font-size: 13px; line-height: 1.5; animation: ds-rise .6s cubic-bezier(.22,1,.36,1) both; } .auth-demo__b--bot { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); color: #eafff5; border-bottom-left-radius: 5px; align-self: flex-start; } .auth-demo__b--usr { background: #34d399; color: #06251a; font-weight: 500; border-bottom-right-radius: 5px; align-self: flex-end; animation-delay: .5s; } .auth-demo__b:nth-child(3) { animation-delay: 1s; } /* marketing page has its own explicit Light/Dark/System control in the footer — hide the floating two-state toggle there to keep one control */ body:has(.mkt) .theme-toggle { display: none; } /* scroll-reveal helper (marketing): elements are visible by default; the IntersectionObserver adds .in as they enter, which plays the rise animation. No hidden default → full-page snapshots, print and no-JS all stay intact. */ .reveal.in { animation: ds-rise .55s cubic-bezier(.22,1,.36,1) both; }