/* imp-shell.css — P36: the signed-in shell's moving parts, loaded after imp-desk.css. - Desktop (980px and up): the sidebar sits beside the content, which takes the rest of the width (no page cap). The collapse button narrows the sidebar to an icon rail; the content and the top bar follow its width. js/shell-head.js puts the remembered state on before first paint; js/nav.js flips it and shows a name tooltip per icon. - Below 980px: the sidebar is an off-canvas drawer opened by the top bar's menu button, over a dimmed page (js/nav.js: overlay tap, Escape, a link, or widening closes it). Colours are theme tokens only (brand.css). */ :root { --imp-rail-w-shut: 98px; --imp-shell-move: 220ms cubic-bezier(.2, .8, .2, 1); } /* ---------- the sidebar header: crest + collapse / close ---------- */ .imp-rail__head { display: flex; align-items: center; gap: var(--sp-2); flex: none; padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--imp-side-rule); background: var(--imp-side-hover); } .imp-rail__head .imp-rail__crest { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; } .imp-rail__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imp-rail__btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; cursor: pointer; border: 1px solid var(--imp-side-chip-border); border-radius: var(--imp-radius); background: var(--imp-side-chip); color: var(--imp-side-text); transition: background-color var(--imp-ease), color var(--imp-ease), transform var(--imp-ease); } .imp-rail__btn:hover { background: var(--imp-side-active); color: var(--imp-side-strong); } .imp-rail__btn:active { transform: scale(.94); } .imp-rail__btn:focus-visible { outline: 2px solid var(--imp-primary); outline-offset: 2px; } .imp-rail__btn svg { display: block; } .imp-rail__chev { transform-box: fill-box; transform-origin: center; transition: transform var(--imp-shell-move); } .imp-rail__close { display: none; } .imp-rail__link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- the top bar: menu button (phone), where you are, then the tools ---------- */ .imp-topbar { justify-content: flex-start; } .imp-topbar__tools { margin-left: auto; } .imp-topbar__menu { display: none; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; cursor: pointer; border: 1px solid var(--imp-rule-strong); border-radius: var(--imp-radius); background: var(--imp-surface); color: var(--imp-ink); box-shadow: var(--imp-shadow); transition: transform var(--imp-ease), box-shadow var(--imp-ease); } .imp-topbar__menu:hover { box-shadow: var(--imp-shadow-md); } .imp-topbar__menu:active { transform: scale(.94); } .imp-topbar__menu svg { display: block; } /* ---------- the collapsed rail's name tooltip (js/nav.js places it) ---------- */ .imp-tip { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; padding: var(--sp-2) var(--sp-3); border-radius: var(--imp-radius-ctl); background: var(--imp-tip-bg); color: var(--imp-tip-text); box-shadow: var(--imp-shadow-md); font-size: var(--fs-1); font-weight: 700; line-height: 1.2; white-space: nowrap; opacity: 0; transform: translate(-4px, -50%); transition: opacity 120ms ease, transform 120ms ease; } .imp-tip::before { content: ''; position: absolute; top: 50%; right: 100%; margin-top: -5px; border: 5px solid transparent; border-right-color: var(--imp-tip-bg); } .imp-tip.is-on { opacity: 1; transform: translate(0, -50%); } .imp-scrim { display: none; } /* ---------- desktop ---------- */ @media (min-width: 980px) { /* width changes animate only after the button is pressed, never on page load */ html.imp-rail-animate .imp-rail { transition: width var(--imp-shell-move); } html.imp-rail-animate main.main, html.imp-rail-animate .imp-topbar { transition: margin-left var(--imp-shell-move); } html.imp-rail-collapsed { --imp-rail-w: var(--imp-rail-w-shut); } html.imp-rail-collapsed .imp-rail__head { flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) 0 var(--sp-3); } html.imp-rail-collapsed .imp-rail__head .imp-rail__crest { flex: none; } html.imp-rail-collapsed .imp-rail__chev { transform: scaleX(-1); } html.imp-rail-collapsed .imp-rail__name, html.imp-rail-collapsed .imp-rail__link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html.imp-rail-collapsed .imp-rail__menu { padding: var(--sp-3) var(--sp-3); } html.imp-rail-collapsed .imp-rail__link { justify-content: center; gap: 0; min-height: 44px; padding: 0; } html.imp-rail-collapsed .imp-rail__link .bi { width: auto; font-size: var(--fs-4); } html.imp-rail-collapsed .imp-rail__link:hover { transform: none; } /* a group's heading becomes a quiet divider; its words stay for screen readers */ html.imp-rail-collapsed .imp-rail__group { height: 0; margin: var(--sp-2) var(--sp-2); padding: 0; overflow: hidden; color: transparent; border-top: 1px solid var(--imp-side-rule); } } /* ---------- phone and tablet: the drawer ---------- */ @media (max-width: 979.98px) { main.main, .imp-topbar { margin-left: 0; } .imp-topbar { gap: var(--sp-3); } .imp-topbar__menu { display: grid; } .imp-crumbs { flex: 1 1 auto; } .imp-rail { top: 10px; left: 10px; bottom: 10px; width: min(300px, calc(100vw - 56px)); z-index: 70; overscroll-behavior: contain; transform: translateX(calc(-100% - 24px)); visibility: hidden; transition: transform var(--imp-shell-move), visibility 0s linear var(--imp-shell-move); } html.imp-drawer-open .imp-rail { transform: none; visibility: visible; transition: transform var(--imp-shell-move), visibility 0s; } .imp-rail__collapse { display: none; } .imp-rail__close { display: grid; } .imp-rail__link { min-height: 46px; } .imp-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: var(--imp-scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--imp-shell-move), visibility 0s linear var(--imp-shell-move); } html.imp-drawer-open .imp-scrim { opacity: 1; visibility: visible; transition: opacity var(--imp-shell-move), visibility 0s; } html.imp-drawer-open, html.imp-drawer-open body { overflow: hidden; } .imp-tip { display: none; } } /* touch widths (and any touch screen): every control in the page is at least a 40px tap target */ @media (max-width: 1100px), (pointer: coarse) { main.main :is(.btn-quiet, .btn-imp-primary, .btn-imp-secondary, .btn-imp-danger, .btn-text, .segmented__item, .adm-chip, .kids-toggle), main.main :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="tel"], select) { min-height: 40px; } main.main :is(.btn-text, .segmented__item, .adm-chip, .kids-toggle) { display: inline-flex; align-items: center; } } /* a narrow phone: the page's H1 says where you are, so the top bar keeps only the way back up (P38: the last level above, as a short "‹ Accounts" link, never a clipped title) */ @media (max-width: 480px) { .imp-crumbs > a, .imp-crumbs__sep, .imp-crumbs__here { display: none; } .imp-crumbs { flex: none; } .imp-topbar:has(.imp-crumbs) { gap: var(--sp-2); } /* a 40px "‹" back button; the level's name stays its accessible name */ .imp-crumbs > a:nth-last-of-type(1) { display: inline-grid; place-items: center; width: 32px; height: 40px; overflow: hidden; font-size: 0; border: 1px solid var(--imp-rule-strong); border-radius: var(--imp-radius); background: var(--imp-surface); } .imp-crumbs > a:nth-last-of-type(1)::before { content: "\2039"; font-size: var(--fs-5); line-height: 1; } } @media (prefers-reduced-motion: reduce) { .imp-rail, .imp-scrim, .imp-tip, .imp-rail__chev, .imp-rail__btn, .imp-topbar__menu, html.imp-rail-animate .imp-rail, html.imp-rail-animate main.main, html.imp-rail-animate .imp-topbar, html.imp-drawer-open .imp-rail, html.imp-drawer-open .imp-scrim { transition: none; } }