gitea_admin/zurich_kotak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

console: the real mark in the masthead, not type set to look like it

Browse Source 
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>
This commit is contained in:
Yashas 2026-09-10 18:55:52 +05:30
parent 73b6ff7eb0
commit 141b1b2452
2 changed files with 16 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/layout/Shell.css
View File

@ -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; }

14
src/layout/Shell.jsx
View File

@ -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 ? (