diff --git a/CHANGELOG.md b/CHANGELOG.md index 23cf2075..f7012d13 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,7 +20,9 @@ ### Changed -- **New Hermes WebUI brand mark — a cyan→blue caduceus on a navy badge.** The titlebar icon, the empty-state hero logo, and the full favicon family (`favicon.svg`/`favicon-512.svg`/`favicon.ico` + 32/192/512 PNGs + `apple-touch-icon.png`) are regenerated from a single clean vector mark (gradient `#08EBF1 → #3889FD` on a radial-depth navy tile). Five per-skin `.app-titlebar-icon` force-fill overrides (graphite, codex, terracotta, github, geist-contrast) that assumed the old monochrome caduceus were removed so the new full-color badge renders consistently across skins. Verified in dark + light themes. +- **The new-conversation splash logo now breathes free instead of sitting in an app-icon tile.** On the empty-state hero, the caduceus mark dropped its glossy navy rounded-rect (which read like a misplaced macOS app-launcher tile — a metaphor mismatch, since nothing launches there) in favor of a bare, larger (~88px) mark over a soft radial "spirit" bloom, matching how Claude/ChatGPT/Gemini render their empty-state marks. The mark gradient and the bloom are tuned per theme: dark themes get the bright `#08EBF1 → #3889FD` mark with a luminous cyan bloom, light themes a deeper `#0AA6CC → #1E63D6` mark with a cooler, restrained bloom so it stays crisp on the pale background. A gentle entrance is gated behind `prefers-reduced-motion`. The titlebar icon and favicon family (which legitimately *are* app icons) keep the navy badge. Thanks @rodboev for the core call. + +- **New Hermes WebUI brand mark — a cyan→blue caduceus on a navy badge.** The titlebar icon and the full favicon family (`favicon.svg`/`favicon-512.svg`/`favicon.ico` + 32/192/512 PNGs + `apple-touch-icon.png`) are regenerated from a single clean vector mark (gradient `#08EBF1 → #3889FD` on a radial-depth navy tile). (The empty-state hero mark later dropped the navy tile — see the splash-logo entry above.) Five per-skin `.app-titlebar-icon` force-fill overrides (graphite, codex, terracotta, github, geist-contrast) that assumed the old monochrome caduceus were removed so the new full-color badge renders consistently across skins. Verified in dark + light themes. ### Fixed diff --git a/static/index.html b/static/index.html index 39e5fa6a..39c3139b 100644 --- a/static/index.html +++ b/static/index.html @@ -420,7 +420,7 @@ aria-controls="outlinePanelWrapper">☰
- +

What can I help with?

Ask anything, run commands, explore files, or manage your scheduled tasks.

diff --git a/static/style.css b/static/style.css index a3e7ac64..82bd5757 100644 --- a/static/style.css +++ b/static/style.css @@ -2311,7 +2311,25 @@ @keyframes pulse{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:.8;transform:scale(1)}} .empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px;color:var(--muted);} .empty-state.no-suggestions .suggestion-grid{display:none} - .empty-logo{width:64px;height:64px;border-radius:20px;background:linear-gradient(145deg,var(--accent-bg),var(--accent-bg));border:1px solid var(--accent-bg);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--accent-text);margin-bottom:4px;box-shadow:0 4px 20px var(--accent-bg);} + /* Empty-state brand mark: a free-breathing winged caduceus with a soft + "spirit" bloom behind it — no app-icon tile. Glow + mark gradient are + tuned separately for dark vs light themes (see --logo-glow / .hm-g* below). */ + .empty-logo{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:10px;background:none;border:none;border-radius:0;box-shadow:none;} + .empty-logo::before{content:"";position:absolute;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%);border-radius:50%;background:var(--logo-glow);z-index:0;pointer-events:none;} + .empty-logo svg{position:relative;z-index:1;width:88px;height:88px;display:block;} + /* Light themes (default :root): deeper, richer gradient holds contrast on + a pale background; cooler, restrained bloom. */ + :root .empty-logo .hm-g0{stop-color:#0AA6CC;} + :root .empty-logo .hm-g1{stop-color:#1E63D6;} + :root{--logo-glow:radial-gradient(circle,rgba(30,99,214,0.15) 0%,rgba(10,166,204,0.07) 45%,transparent 70%);} + /* Dark themes: bright cyan→blue mark with a luminous bloom. */ + :root.dark .empty-logo .hm-g0{stop-color:#08EBF1;} + :root.dark .empty-logo .hm-g1{stop-color:#3889FD;} + :root.dark{--logo-glow:radial-gradient(circle,rgba(8,235,241,0.20) 0%,rgba(56,137,253,0.15) 38%,transparent 72%);} + @media (prefers-reduced-motion: no-preference){ + .empty-logo svg{animation:emptyLogoRise .5s ease-out both;} + @keyframes emptyLogoRise{from{opacity:0;transform:translateY(6px) scale(.96);}to{opacity:1;transform:none;}} + } .empty-state h2{font-size:20px;color:var(--text);font-weight:700;letter-spacing:-.02em;} .empty-state p{font-size:14px;text-align:center;max-width:320px;} .suggestion-grid{display:flex;flex-direction:column;gap:8px;margin-top:12px;width:100%;max-width:380px;}