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 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    color: var(--brand-deep);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
  }
.maka-hero h1 {
    margin: 0;
    max-width: 34ch;
    /* Hero typography uses
       `.welcome-title` with `Instrument Sans` variable font at wght:500
       for hero. Maka uses Geist Variable; the heading is pulled to 32px
       with semibold weight + tight leading (PR-FONT-WEIGHT-CONVERGE-0 /
       PR-LEADING-CONVERGE-0, #520 PR1). 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. */
    font-size: 2.1333em;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }
.maka-hero p {
    margin: 0;
    max-width: 54ch;
    color: var(--foreground-secondary);
    font-size: var(--font-size-ui);
    line-height: var(--leading-normal);
    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 2.1333em first-run
   hero scale 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-size: 1.5385em;
  }