apps/desktop/src/renderer/styles/hero.css

/* ============================================================================
   Hero / empty-state chrome
   ----------------------------------------------------------------------------
   Split out of chat-header.css + chat-message.css (#546 PR2, relocate —
   zero visual change). chat-message.css was 100% hero (empty-state)
   content with zero message selectors, so it folds into hero.css. The
   message body lives in TSX today; chat-message.css will be repopulated
   when PR4 extracts the chat bubble into CSS.                            */

/* PR-UI-1 (@yuejing 2026-05-22): unified hero chrome.
 *
 * `.maka-hero` is the shared layout for both EmptyChatHero (after a
 * session exists but has no messages) and OnboardingHero variants
 * (first-run / setup / ready_empty / blocked). Same width / margin /
 * gap / eyebrow / heading scale, so the visual switch between
 * "first-run" and "empty session" no longer feels jarring.
 *
 * Legacy `.emptyChat` and `.eyebrow` are kept as aliases so any
 * external CSS / smoke fixture references still match.
 */
/* #1433: the width was a hardcoded `min(750px, 80vw)` — the one content
   surface that did not use `--maka-chat-measure`. Everything else the user
   reads or types into (message rows, composer, plan mode, permission
   dialog, `.maka-onboarding`) is capped by that token.
   This is a consistency fix, not a bug fix: the hero and the composer are
   both centred in the same column, so the old 750px did not visibly
   misalign them. What it did do is size the empty state off a magic number
   and a viewport unit that ignores the sidebar, so the hero's column drifted
   from the composer's as the window resized. */
.maka-hero {
  width: min(var(--maka-chat-measure), 100%);
  margin: auto;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  color: var(--foreground);
  text-align: center;
}

  .maka-hero header,
  .maka-hero-empty-chat header {
    display: grid;
    gap: var(--space-2-5);
    justify-items: center;
  }
/* Holds the wordmark on the empty chat surface. It used to be a 130px
   absolute-positioning stage for two fake chat bubbles and a Maka/user
   avatar pair (#1433: a staged conversation on the one surface that has
   none); with the mark it just needs to centre one inline SVG. */
.maka-hero-visual {
    display: grid;
    justify-items: center;
    color: var(--maka-brand);
  }
.maka-hero-eyebrow {
    font: var(--maka-text-heading-5);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    color: var(--brand-deep);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
  }
.maka-hero h1 {
    font: var(--maka-text-display-1);
    margin: 0;
    max-width: 34ch;
    /* Hero typography uses
       `.welcome-title` with `Instrument Sans` variable font at wght:500
       for hero. Maka uses the system stack; the heading takes the top rung
       of the type scale with semibold weight, and its leading from the role
       that shares that rung (display-1, measured 40px at 28px).
       This was `2.1333em` until the type-scale convergence: an em multiplier
       hand-derived from a 15px body, which then silently rendered 27.7px
       once the body became 13px — the comment still claimed 32px. That is
       what an em ladder costs. The ladder rung is the same size the page
       actually shipped, now stated once instead of recomputed per base.
       The earlier `font-variation-settings
       "wght" 550, "wdth" 105` was dropped: wght folds into the font-weight
       token, and the wdth:105 "wider" axis was a one-off that bypassed the
       token scale. Standard width keeps the hero optically distinct via
       size + weight + leading alone. */
    letter-spacing: var(--tracking-normal);
    text-wrap: balance;
  }
.maka-hero p {
    font: var(--maka-text-body);
    margin: 0;
    max-width: 54ch;
    color: var(--foreground-secondary);
    text-wrap: pretty;
  }
/* #1433: the daily empty chat is a returning user's landing surface, not a
   launch screen, so its greeting steps down from the first-run hero rung
   to 20px. The OnboardingHero variants keep the large scale —
   they are seen once, and there the headline is the whole message. */
.maka-hero-empty-chat:not(.maka-hero-deep-research) h1 {
    font: var(--maka-text-heading-1);
  }