From 141b1b24523ebf06170ab86c77b4862794b898a1 Mon Sep 17 00:00:00 2001
From: Yashas <yashas.c@getzino.com>
Date: Thu, 10 Sep 2026 18:55:52 +0530
Subject: [PATCH] console: the real mark in the masthead, not type set to look
 like it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The brand was being drawn: a circled "Z" in Source Sans beside "ZURICH kotak"
in letter-spaced caps with "General Insurance" under it. That is a passable
imitation of a logo and not the logo — the real mark's proportions, its weight
contrast and its plate are all in the asset, which the login page has been
using all along.

So the masthead carries the artwork, at half the bar's height, and nothing is
set in type beside it: the asset already says both lines, and the wordmark
next to it was the same sentence twice. Bundled from src/assets rather than
public/, so Vite rewrites the URL relative and it resolves under the
/zurich-kotak/ mount.

On a phone the mark shrinks rather than shedding its second line — that line
is inside the artwork now, so it cannot be dropped on its own the way the type
lockup's could.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/layout/Shell.css | 21 +++++++++------------
 src/layout/Shell.jsx | 14 +++++++-------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/layout/Shell.css b/src/layout/Shell.css
index 8785df2..6c810e1 100644
--- a/src/layout/Shell.css
+++ b/src/layout/Shell.css
@@ -29,16 +29,12 @@
 .mast__burger:hover { background: rgba(255, 255, 255, .12); }
 .mast__burger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
 
-.mast__logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.mast__z {
-  width: 30px; height: 30px; border-radius: 50%;
-  background: #fff; color: var(--zk-navy);
-  font-weight: 700; font-size: 17px;
-  display: grid; place-items: center;
-}
-.mast__word b { display: block; white-space: nowrap; font-weight: 700; font-size: 17px; letter-spacing: .06em; line-height: 1.15; }
-.mast__word b span { font-weight: 500; letter-spacing: 0; }
-.mast__word small { display: block; white-space: nowrap; font-size: 11.5px; opacity: .75; margin-top: -1px; letter-spacing: .02em; }
+/* Half the bar's height, which is where a 3.7:1 lockup sits without crowding
+   the app name beside it. The asset carries its own rounded plate and the
+   words "ZURICH kotak / General Insurance", so nothing is set in type next to
+   it — that was the same sentence twice. The radius matches the artwork's own
+   corners so no hairline shows at the edge. */
+.mast__logo { flex: none; display: block; height: 28px; width: auto; border-radius: 6px; }
 
 .mast__sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .22); }
 
@@ -160,9 +156,10 @@
   .shell__top { gap: 12px; padding: 0 14px; }
   .mast__burger { display: grid; }
   .mast__sep,
-  .mast__word small,
   .mast__app span { display: none; }
-  .mast__word b { font-size: 15.5px; }
+  /* "General Insurance" is inside the artwork, so it cannot be dropped on its
+     own the way the type lockup's second line was. The mark shrinks instead. */
+  .mast__logo { height: 24px; }
   .mast__app { font-size: 15.5px; }
 
   .shell__body { flex-direction: row; }
diff --git a/src/layout/Shell.jsx b/src/layout/Shell.jsx
index 3f44e41..63c41d7 100644
--- a/src/layout/Shell.jsx
+++ b/src/layout/Shell.jsx
@@ -6,6 +6,7 @@ import { useStageCounts } from '../api/portfolio.jsx'
 import { useZino } from '../api/provider.jsx'
 import AskDesk from '../components/AskDesk.jsx'
 import UserMenu from './UserMenu.jsx'
+import logo from '../assets/brand/zurich_logo.webp'
 import './Shell.css'
 
 /**
@@ -85,13 +86,12 @@ export default function Shell() {
               : <path d="M3 6h14M3 10h14M3 14h14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />}
           </svg>
         </button>
-        <div className="mast__logo">
-          <span className="mast__z" aria-hidden="true">Z</span>
-          <div className="mast__word">
-            <b>ZURICH <span>kotak</span></b>
-            <small>General Insurance</small>
-          </div>
-        </div>
+        {/* The lockup as ARTWORK, not as type. It was set in Source Sans with
+            a drawn Z, which is a passable imitation of a brand and not the
+            brand: the real mark's proportions, its weight contrast and its
+            plate are all in the asset. Bundled from src/assets so Vite
+            rewrites the URL and it resolves under the sub-path mount. */}
+        <img className="mast__logo" src={logo} alt="Zurich Kotak General Insurance" />
         <span className="mast__sep" aria-hidden="true" />
         <div className="mast__app">Lead Desk <span>Lead to policy</span></div>
         {canAskDesk ? (