Yashas
607693a04a
Opened at 390px the masthead wrapped inside its own 56px bar and clipped — "ZURICH kotak", "Lead Desk / Lead to policy" and the user's name all on three lines each — and the nine-item rail stacked above the content, so every page began with a screenful of menu. The masthead now keeps one line: the mark, the app name, the person, with the secondary lines dropped below 900px and the app name below 560px, where it cannot fit beside the user menu without truncating. The rail becomes a drawer behind a button, over the page rather than above it, closing on navigation and on a tap outside. Desktop is untouched: the button is display:none, the rail is static, and the drawer rules live entirely inside the media query. Also: "Ops admin", not "OPS admin" — the acronym rule over-fired on a word. Verified at 390x844 and 1440x900: no horizontal scroll, nothing clipped in the masthead, the drawer closes on navigation, and the desktop rail keeps its transform and its hidden button. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
194 lines
6.7 KiB
CSS
194 lines
6.7 KiB
CSS
.shell {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--zk-tint);
|
|
}
|
|
|
|
/* ── Masthead ─────────────────────────────────────────────────────────────── */
|
|
.shell__top {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 30;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 22px;
|
|
height: 56px;
|
|
padding: 0 24px;
|
|
background: var(--zk-navy);
|
|
color: #fff;
|
|
}
|
|
|
|
.mast__burger {
|
|
display: none; /* a phone-only control; see the media block */
|
|
width: 34px; height: 34px; flex: none;
|
|
place-items: center; margin-left: -6px;
|
|
border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer;
|
|
}
|
|
.mast__burger svg { width: 20px; height: 20px; }
|
|
.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; }
|
|
|
|
.mast__sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .22); }
|
|
|
|
.mast__app { font-size: 17px; font-weight: 600; white-space: nowrap; }
|
|
.mast__app span { font-weight: 400; opacity: .7; margin-left: 8px; font-size: 15px; }
|
|
|
|
.mast__user { margin-left: auto; }
|
|
|
|
.shell__scrim {
|
|
display: none;
|
|
position: fixed; inset: 56px 0 0 0; z-index: 35;
|
|
border: 0; padding: 0; background: rgba(11, 42, 91, .35); cursor: default;
|
|
}
|
|
|
|
/* ── Frame ────────────────────────────────────────────────────────────────── */
|
|
.shell__body { display: flex; flex: 1; min-height: 0; align-items: stretch; }
|
|
|
|
.shell__nav {
|
|
position: sticky;
|
|
top: 56px;
|
|
align-self: flex-start;
|
|
width: 232px;
|
|
flex: none;
|
|
min-height: calc(100vh - 56px);
|
|
max-height: calc(100vh - 56px);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
background: #fff;
|
|
border-right: 1px solid var(--zk-line);
|
|
padding: 20px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.nav__h {
|
|
margin: 0;
|
|
padding: 18px 12px 6px;
|
|
font-size: var(--fs-3xs);
|
|
font-weight: 600;
|
|
letter-spacing: .04em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
}
|
|
.nav__group { display: flex; flex-direction: column; gap: 2px; }
|
|
|
|
.nav__link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 9px 12px;
|
|
border-radius: var(--r-sm);
|
|
font-size: var(--fs-sm);
|
|
font-weight: 500;
|
|
color: var(--zk-muted);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: background var(--t-fast), color var(--t-fast);
|
|
}
|
|
.nav__link:hover { background: var(--zk-tint); color: var(--zk-ink); }
|
|
.nav__link.is-on {
|
|
background: var(--zk-tint-blue);
|
|
color: var(--zk-navy);
|
|
font-weight: 600;
|
|
box-shadow: inset 3px 0 0 var(--zk-blue);
|
|
}
|
|
.nav__name { min-width: 0; line-height: 1.35; }
|
|
|
|
/* The count is who is being waited on: red a person urgently, amber the
|
|
customer, grey the calendar or history. */
|
|
.nav__n {
|
|
margin-left: auto;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: 600;
|
|
padding: 1px 8px;
|
|
border-radius: var(--r-pill);
|
|
font-variant-numeric: tabular-nums;
|
|
background: var(--zk-line-soft);
|
|
color: var(--zk-muted);
|
|
}
|
|
.nav__n--red { background: var(--zk-danger-tint); color: var(--zk-danger); }
|
|
.nav__n--amber { background: var(--zk-amber-tint); color: var(--zk-amber); }
|
|
.nav__n--blue { background: var(--zk-tint-blue); color: var(--zk-blue); }
|
|
|
|
/* Closed folds. The summary IS a nav row; a chevron says it opens. */
|
|
.nav__fold > summary { list-style: none; }
|
|
.nav__fold > summary::-webkit-details-marker { display: none; }
|
|
.nav__fold > summary .nav__name::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 5px; height: 5px;
|
|
margin: 0 8px 1px 0;
|
|
border-right: 1.5px solid var(--zk-grey);
|
|
border-bottom: 1.5px solid var(--zk-grey);
|
|
transform: rotate(-45deg);
|
|
transition: transform var(--t-fast);
|
|
}
|
|
.nav__fold[open] > summary .nav__name::before { transform: rotate(45deg); }
|
|
.nav__sub { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; }
|
|
|
|
/* ── Canvas ───────────────────────────────────────────────────────────────── */
|
|
.shell__main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
width: 100%;
|
|
background: var(--zk-tint);
|
|
padding: 28px 32px 40px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
/* ── PHONE ──────────────────────────────────────────────────────────────
|
|
The masthead keeps one line and one line only: the mark, the app name,
|
|
the person. Everything secondary goes, because a 56px bar that wraps is
|
|
a bar that clips, which is what it did.
|
|
|
|
The rail becomes a drawer over the page rather than a block above it —
|
|
nine queues stacked at the top meant scrolling past the whole menu on
|
|
every screen before reaching a single lead. */
|
|
.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; }
|
|
.mast__app { font-size: 15.5px; }
|
|
|
|
.shell__body { flex-direction: row; }
|
|
.shell__nav {
|
|
position: fixed; top: 56px; left: 0; bottom: 0; z-index: 40;
|
|
width: 268px; max-width: 82vw; min-height: 0; max-height: none;
|
|
border-right: 1px solid var(--zk-line);
|
|
transform: translateX(-100%);
|
|
transition: transform .22s var(--ease);
|
|
overflow-y: auto; overscroll-behavior: contain;
|
|
}
|
|
.shell__nav.is-open { transform: none; box-shadow: 0 12px 40px rgba(11, 42, 91, .22); }
|
|
.shell__scrim { display: block; }
|
|
.shell__main { padding: 20px 16px 48px; min-width: 0; flex: 1; }
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
/* Below this the app name and the wordmark cannot both fit beside the user
|
|
menu without one of them truncating. The mark wins — it is the brand. */
|
|
.mast__app { display: none; }
|
|
.um__id { display: none; }
|
|
.um__caret { display: none; }
|
|
.um__trigger { padding: 4px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.shell__nav { transition: none; }
|
|
}
|