/* iDealTrade shared UI kit.
=========================
The design language the Deal Log, Rate Guidance and Dashboard pages are all built from, in one
place. Before this file each page carried its own copy of the tokens and components below -
deallog.css under --dl-*, rateguidance.css under --rg-*, identical values kept in step by hand -
which is exactly the arrangement that drifts. A page stylesheet now holds only what is genuinely
particular to that page.
Design intent, unchanged from the Deal Log that set it: a calm institutional ledger. Pages are
built from stacked surfaces - a masthead, then framed cards - spaced off a single rhythm scale
(--idt-gap / --idt-gap-lg) so blocks breathe instead of stacking flush. Colour is rationed:
tinted pills as the only saturation in a table, white everywhere else.
Colour roles. Structure is grey, accents are dark green, and red is spent on two things only -
the commit button and a genuine alert. This replaced a palette where one token, --idt-brand, was
the page title, the card titles, the column headers, the primary button AND every interactive
state, over neutrals that were themselves tinted toward it: five volumes of red at once, and no
way to turn one down without turning them all down. Hence three families rather than one, named
for what they are for:
--idt-ink / --idt-line / ... structure and text. Cool grey, sampled off arlingclose.co.uk.
--idt-accent ............... links, focus, hover, active states, accent marks.
--idt-red .................. the commit button. Alerts use --idt-bad-*, which matches it.
A heading is structure, so headings are ink, not accent - the accent's job is to say what is
interactive, and a title is not. See --idt-accent-line below for why the accent also needs
somewhere to sit while the page is idle.
Prefix. Everything here is idt-*, not ui-*: jqGrid and jQuery UI already own ui-jqgrid,
ui-th-column, ui-state-disabled and ui-disabled, and those class names appear in the same
selectors and the same markup as ours. A ui- prefix of our own would be unreadable next to them.
Loading. Include this before the page's own stylesheet, so page rules win on equal specificity. */
:root {
/* The accent. Deliberately teal-leaning (hue ~172) and much darker than --idt-ok below (~145),
because they appear in the same table: an Accepted pill has to keep reading as a status rather
than as one more accent mark. 10.5:1 on white, and the same white-on-accent, so a solid green
segment and the loading badge are both comfortable. */
--idt-accent: #1d453e;
--idt-accent-dark: #12332d;
--idt-accent-wash: #f1f6f4;
--idt-accent-ring: rgba(29, 69, 62, .18);
/* The accent at hairline weight. Every other accent site is transient - a hover, a focus ring, a
selected segment - or absent by default, so without a resting value the accent simply is not on
the page when nobody is touching it. The Dashboard's rate-tile strips sit at this. */
--idt-accent-line: #b6cfc9;
/* Red. The commit button, and nothing else; an alert draws on --idt-bad-*, which is this hue. */
--idt-red: #7a1f1f;
--idt-red-dark: #5e1616;
--idt-ink: #24282b;
/* Load-bearing: this is the column-header label on --idt-header-bg, and those labels are 10.5px
bold - not WCAG large text, so 4.5:1 is the floor rather than 3:1. #666e73 gives 4.65:1 there
and 5.20:1 on white. Anything lighter fails the band. */
--idt-ink-soft: #666e73;
/* Supporting metadata only - timestamps, empty states, CTA hints - never content: 3.10:1 on
white is under AA, as the value it replaced was at 2.79:1. */
--idt-ink-faint: #8b9398;
--idt-line: #e3e7e8;
--idt-line-soft: #eef1f1;
--idt-line-strong: #ccd3d4;
--idt-header-bg: #f0f3f3;
--idt-row-hover: #f8fafa;
--idt-surface-tint: #f8f9f9;
--idt-field-line: #d8dedf;
--idt-field-line-hover: #b7c0c2;
--idt-placeholder: #a7afb2;
/* Status accents. Each is a triple - ink, wash, hairline - so a pill, a banner and a field can all
say the same thing at three different volumes without inventing new colours. */
--idt-ok: #1c6b39;
--idt-ok-bg: #e2f0e6;
--idt-ok-line: #cfe6d8;
--idt-warn: #8a5a06;
--idt-warn-bg: #fbeed2;
--idt-warn-line: #eedcb4;
--idt-bad: #922929;
--idt-bad-bg: #f8e5e5;
--idt-bad-wash: #fdf7f7; /* large surfaces and fields; --idt-bad-bg is for pills and chips */
--idt-bad-line: #eecfcf;
--idt-info: #1b4f8a;
--idt-info-bg: #e8effb;
--idt-info-line: #d3e0f5;
--idt-mute: #55606a;
--idt-mute-bg: #edf0f1;
--idt-radius: 12px;
--idt-radius-sm: 8px;
/* One vertical rhythm for a page: blocks are separated by --idt-gap, sections by --idt-gap-lg. */
--idt-gap: 18px;
--idt-gap-lg: 28px;
--idt-shadow-sm: 0 1px 2px rgba(20, 32, 30, .06);
--idt-shadow-md: 0 6px 18px rgba(20, 32, 30, .10);
/* Application chrome. The bar is the one place the Arlingclose maroon appears in the UI; the kit's
own --idt-red is a different job (the commit button, alerts) and must not be reused here, or
changing one changes the other. */
--idt-chrome-maroon: #991B1E;
--idt-chrome-maroon-dark: #7a1518;
--idt-chrome-h: 58px;
/* Deliberately the same 58px as the bar above, so the two bands frame the page evenly rather than
one of them looking like an afterthought. It is a separate token even so: the footer is allowed
to change height without dragging the header with it, and the sticky-footer clearance below reads
this one specifically. */
--idt-chrome-footer-h: 58px;
/* White, and it took three attempts to get here. --idt-surface-tint (#f8f9f9) first: invisible against
the white page ground, so the band was neither white nor a band. --idt-header-bg (#f0f3f3) next:
visible, but that is the grids' column-header tint, so the footer read as one more card header. Then
#e9edee, one step darker to separate the two - which made it worse in a way that only shows when you
look at the whole page. Card heads are #f0f3f3 and the band was #e9edee: seven units apart. The same
value would have read as a system and an obviously different one as a decision, but nearly-the-same
reads as an accident.
White ends the argument instead of refereeing it. The footer stops being a tray with things in it and
becomes the page's last line, terminated by the 3px maroon rule - which is decisive enough on its own
that a fill was never carrying the design, only competing with it. It also buys back the contrast
headroom that the darker band had spent: the links can return to --idt-ink-soft, on the structural ink
scale where chrome text belongs, instead of the --idt-mute they had to borrow from the status palette
to clear AA on #e9edee.
It stays a token rather than a literal #fff: the band's ground is a decision worth naming, and one
worth being able to change in one place if the page ground itself ever moves off white. */
--idt-chrome-footer-bg: #ffffff;
}
/* ---- Application header ----------------------------------------------------------------------------
The bar on every page. It lives in the shared kit rather than core.css because core.css is the file
page modernisation is steadily deleting, and chrome should not have to move again later.
MARKUP CONTRACT. The bar looks nothing like a Bootstrap navbar but keeps four of its hooks, because
scripts elsewhere read them and this change touches no JavaScript:
#navbar + ul.nav + li.active generics.js:427-441 marks the current page from
a[href=location.pathname] and also marks the enclosing top-level li,
which is what lights "Account" on /tradehistory.
.navbar-collapse.collapse Bootstrap's own responsive rules. Without .navbar-collapse the bare
.collapse would evaluate to display:none and hide the nav on
desktop as well as mobile.
.navbar-toggle Bootstrap hides this at >=768px for us.
.dropdown / .dropdown-toggle / .dropdown-menu the dropdown plugin, same as the Data and Admin
menus have always used.
Bootstrap's .nav and .navbar-collapse bring padding and floats of their own; the rules below
override them rather than fight for specificity, so keep the .idt-appbar prefix on each.
NAMING. .idt-chip and --idt-header-bg already exist in this file and mean other things. Hence the
-appbar-/-chrome- names. Nothing here may contain the substring "span" (see the file header). */
/* The texture. A 480x58 SVG tile: 24 hairlines at 8.5% black, each one full sine period across the
tile drawn as two cubic segments with matching end slopes, so it repeats on x with no seam.
Amplitude (1.6-3.5px) and spacing (2.2-3.9px) both vary sinusoidally down the stack, so the field
bands organically instead of reading as a pinstripe.
It replaces arlingclose_headerBG.png, which was 2000x310 and 88KB. That image was drawn for the old
96px bar and positioned center bottom: at 58px you saw only its flattest bottom band, arc cropped
off, for the full download. Scaling it to fit instead squashed the contours 5:1 into moire and
stopped it tiling. This is 3KB, exactly bar height so it never crops, and stays crisp on a retina
screen where the photograph was soft. Line weight and spacing are now numbers, not pixels in a file. */
.idt-appbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
background-color: var(--idt-chrome-maroon);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%2258%22%20viewBox%3D%220%200%20480%2058%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.085%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20-6.0C80.0%20-7.6%20160.0%20-7.6%20240.0%20-6.0C320.0%20-4.4%20400.0%20-4.4%20480%20-6.0%22%2F%3E%3Cpath%20d%3D%22M0%20-3.0C80.0%20-5.5%20160.0%20-5.5%20240.0%20-3.0C320.0%20-0.4%20400.0%20-0.4%20480%20-3.0%22%2F%3E%3Cpath%20d%3D%22M0%200.7C80.0%20-2.5%20160.0%20-2.5%20240.0%200.7C320.0%203.9%20400.0%203.9%20480%200.7%22%2F%3E%3Cpath%20d%3D%22M0%204.6C80.0%201.1%20160.0%201.1%20240.0%204.6C320.0%208.1%20400.0%208.1%20480%204.6%22%2F%3E%3Cpath%20d%3D%22M0%208.2C80.0%204.9%20160.0%204.9%20240.0%208.2C320.0%2011.6%20400.0%2011.6%20480%208.2%22%2F%3E%3Cpath%20d%3D%22M0%2011.2C80.0%208.5%20160.0%208.5%20240.0%2011.2C320.0%2014.0%20400.0%2014.0%20480%2011.2%22%2F%3E%3Cpath%20d%3D%22M0%2013.6C80.0%2011.8%20160.0%2011.8%20240.0%2013.6C320.0%2015.5%20400.0%2015.5%20480%2013.6%22%2F%3E%3Cpath%20d%3D%22M0%2015.8C80.0%2013.6%20160.0%2013.6%20240.0%2015.8C320.0%2018.1%20400.0%2018.1%20480%2015.8%22%2F%3E%3Cpath%20d%3D%22M0%2018.4C80.0%2015.3%20160.0%2015.3%20240.0%2018.4C320.0%2021.4%20400.0%2021.4%20480%2018.4%22%2F%3E%3Cpath%20d%3D%22M0%2021.5C80.0%2018.0%20160.0%2018.0%20240.0%2021.5C320.0%2025.0%20400.0%2025.0%20480%2021.5%22%2F%3E%3Cpath%20d%3D%22M0%2025.2C80.0%2021.8%20160.0%2021.8%20240.0%2025.2C320.0%2028.7%20400.0%2028.7%20480%2025.2%22%2F%3E%3Cpath%20d%3D%22M0%2029.1C80.0%2026.2%20160.0%2026.2%20240.0%2029.1C320.0%2032.1%20400.0%2032.1%20480%2029.1%22%2F%3E%3Cpath%20d%3D%22M0%2032.7C80.0%2030.5%20160.0%2030.5%20240.0%2032.7C320.0%2034.8%20400.0%2034.8%20480%2032.7%22%2F%3E%3Cpath%20d%3D%22M0%2035.6C80.0%2033.6%20160.0%2033.6%20240.0%2035.6C320.0%2037.6%20400.0%2037.6%20480%2035.6%22%2F%3E%3Cpath%20d%3D%22M0%2037.9C80.0%2035.1%20160.0%2035.1%20240.0%2037.9C320.0%2040.8%20400.0%2040.8%20480%2037.9%22%2F%3E%3Cpath%20d%3D%22M0%2040.1C80.0%2036.8%20160.0%2036.8%20240.0%2040.1C320.0%2043.5%20400.0%2043.5%20480%2040.1%22%2F%3E%3Cpath%20d%3D%22M0%2042.7C80.0%2039.2%20160.0%2039.2%20240.0%2042.7C320.0%2046.2%20400.0%2046.2%20480%2042.7%22%2F%3E%3Cpath%20d%3D%22M0%2046.0C80.0%2042.9%20160.0%2042.9%20240.0%2046.0C320.0%2049.1%20400.0%2049.1%20480%2046.0%22%2F%3E%3Cpath%20d%3D%22M0%2049.8C80.0%2047.4%20160.0%2047.4%20240.0%2049.8C320.0%2052.1%20400.0%2052.1%20480%2049.8%22%2F%3E%3Cpath%20d%3D%22M0%2053.6C80.0%2051.9%20160.0%2051.9%20240.0%2053.6C320.0%2055.4%20400.0%2055.4%20480%2053.6%22%2F%3E%3Cpath%20d%3D%22M0%2057.1C80.0%2054.5%20160.0%2054.5%20240.0%2057.1C320.0%2059.7%20400.0%2059.7%20480%2057.1%22%2F%3E%3Cpath%20d%3D%22M0%2059.9C80.0%2056.6%20160.0%2056.6%20240.0%2059.9C320.0%2063.2%20400.0%2063.2%20480%2059.9%22%2F%3E%3Cpath%20d%3D%22M0%2062.2C80.0%2058.7%20160.0%2058.7%20240.0%2062.2C320.0%2065.7%20400.0%2065.7%20480%2062.2%22%2F%3E%3Cpath%20d%3D%22M0%2064.4C80.0%2061.2%20160.0%2061.2%20240.0%2064.4C320.0%2067.7%20400.0%2067.7%20480%2064.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
linear-gradient(180deg, #8b171a 0%, #991B1E 58%, #a21f23 100%);
background-repeat: repeat-x, no-repeat;
background-position: center top, center;
border-bottom: 3px solid var(--idt-chrome-maroon-dark);
font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
/* core.css is wrapped in `@media screen` (its own first line), so the navbar this bar replaced was
simply unstyled on paper rather than painted. This file carries no such wrapper, so without the rule
below every printed page - a trade confirmation among them - opens with a solid maroon block and its
texture across the full width. print.css cannot cover for it: layout/main.html links that sheet with
media="screen", which ANDs with the sheet's own `@media print` and therefore matches nothing, on any
page. The implementation plan for this bar listed this rule; it was the one rule that never landed. */
@media print {
.idt-appbar {
display: none;
}
}
.idt-appbar-inner {
max-width: 1170px;
margin: 0 auto;
padding: 0 15px;
min-height: var(--idt-chrome-h);
display: flex;
align-items: stretch;
}
/* From 1200px up, the page's own column is exactly this 1170px wide AND carries no side padding of its
own - core.css's `body > .container { padding: 79px 0 90px }` zeroes Bootstrap's 15px gutters, on
every page in the app. So the 15px above does not line the bar up with the page, it insets the bar
15px INSIDE it: the wordmark starts 15px to the right of the page title beneath it, and the chip
stops 15px short of where the masthead rule ends. Both were drawn to align with the page column, and
1170 was chosen to match it, so dropping the padding at the same breakpoint the container reaches
1170 is what actually delivers that.
The padding stays below 1200 deliberately, and this box stays fluid rather than following the column
down. Matching the narrower steps was measured and rejected, because the column below 1200 is not one
ladder: bootstrap-responsive.min.css is **2.3.2** while bootstrap.min.css is 3.3.7, it loads second,
and its `@media (min-width: 768px) and (max-width: 979px) { .container { width: 724px } }` outranks
nothing but wins on source order - so the real measured widths are 724px from 768 to 979, then 750px
from 980 to 991 (v3's rule, once v2's has expired), then 970px, then 1170px where the two generations
finally agree. A 724px step is a leftover from a stylesheet nobody intends to keep; pinning the app's
chrome to it would bake it in, and it leaves the operations bar - 709px wide at its narrowest, with
the chip collapsed - just 15px of slack. Staying fluid below 1200 costs a drift against the column
edges of at most 85px there, which nobody sees as misalignment; the 15px of padding is then the bar's
own gutter, and without it the wordmark would sit against the window edge. */
@media (min-width: 1200px) {
.idt-appbar-inner {
padding: 0;
}
}
/* ---- Wordmark -------------------------------------------------------------------------------------
Text, not an image. idealtrade_logo.png was white on transparent, which locked the bar to a dark
ground - the single fact that ruled out a light bar before it was drawn. As text the mark takes
currentColor, so one fragment serves all four bars, stays sharp at any zoom, and costs no download.
The PNG stays on disk for the PDF generator and the email templates; only the header stops using it. */
.idt-appbar-brand {
display: flex;
align-items: center;
padding-right: 24px;
margin-right: 6px;
flex: 0 0 auto;
border-right: 1px solid rgba(255, 255, 255, .19);
text-decoration: none;
color: #fff;
}
.idt-appbar-brand:hover,
.idt-appbar-brand:focus {
text-decoration: none;
color: #fff;
}
.idt-wm {
display: inline-flex;
flex-direction: column;
line-height: 1;
}
.idt-wm-name {
font-size: 20px;
font-weight: 300;
letter-spacing: -.012em;
white-space: nowrap;
}
.idt-wm-name b {
font-weight: 700;
letter-spacing: -.022em;
}
/* There is no .idt-wm-strap. The bar carried "Local Authority Dealing Platform" under the name until
2026-09-04, when the concept it named was renamed to Organisation and no rewording of it read as
English - "Organisation Dealing Platform" parses as a platform for dealing in organisations. It was
dropped rather than reworded, which also settles the duplication the footer's own comment describes.
.idt-wm keeps flex-direction: column so a second line can be added back without moving anything. */
/* ---- Nav ------------------------------------------------------------------------------------------
.nav is Bootstrap's and brings its own padding and floats; these rules replace them. .active is set
by generics.js, not in the markup. */
.idt-appbar-nav {
display: flex;
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
}
.idt-appbar-nav > li {
position: relative;
display: flex;
float: none;
}
/* No `gap` here: EdgeHTML never implemented flex `gap` (it shipped only once Edge moved onto Chromium),
and this bar is the app's chrome on every page, not a component some browser matrix rules out. A
dropped `gap` would leave the chevron jammed against its label with no space at all - not a subtly
worse layout, an obviously broken one. The space it bought is a margin on the chevron below instead;
do not put `gap` back "for simplicity" without re-checking EdgeHTML first. */
/* white-space: nowrap so a label can never answer a tight bar by going to two lines inside a 58px row,
where the second line is simply cut off. If a bar ever does run out of room the entries overflow
instead, which is visible and diagnosable rather than silently truncated. */
.idt-appbar-nav > li > a {
display: flex;
align-items: center;
padding: 0 15px;
white-space: nowrap;
font-size: 13.5px;
font-weight: 550;
text-decoration: none;
color: rgba(255, 255, 255, .86);
position: relative;
background: none;
}
.idt-appbar-nav > li > a > .idt-appbar-chev {
margin-left: 6px;
}
.idt-appbar-nav > li > a:hover,
.idt-appbar-nav > li > a:focus {
color: #fff;
background: rgba(255, 255, 255, .09);
text-decoration: none;
}
.idt-appbar-nav > li.open > a,
.idt-appbar-nav > li.open > a:hover,
.idt-appbar-nav > li.open > a:focus {
color: #fff;
background: rgba(255, 255, 255, .12);
}
/* The current page. A white underline rather than the old white pill: at 58px a pill has to shrink to
fit and stops looking like a tab, and the underline sits on the bar's own bottom edge. */
.idt-appbar-nav > li.active > a,
.idt-appbar-nav > li.active > a:hover,
.idt-appbar-nav > li.active > a:focus {
color: #fff;
background: none;
}
.idt-appbar-nav > li.active > a::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 0;
height: 3px;
background: #fff;
border-radius: 2px 2px 0 0;
}
/* .idt-appbar-nav > li.open > a and > li.active > a above are the same specificity (one class past the
shared .idt-appbar-nav > li > a), so when both apply - opening the Account menu while already on
/tradehistory or /accountmanagement - .active's `background: none` wins purely on being the later
rule in the file, and the open-state highlight silently disappears under the current-page tab. Two
classes on the same
beats either rule alone, regardless of source order. */
.idt-appbar-nav > li.active.open > a {
background: rgba(255, 255, 255, .12);
}
/* ---- Nav badge ------------------------------------------------------------------------------------
How many matched loans are waiting on this organisation's confirmation. It exists because the
confirmation queue stopped sharing a page with the order book: a member working on /trading would
otherwise not learn a confirmation had arrived until they navigated away.
--idt-red, which the kit otherwise reserves for the commit button and genuine alerts. A loan the
counterparty is waiting on you to confirm is a genuine alert.
No transform anywhere in here - legacy Edge (EdgeHTML) is supported and only gained transforms on
SVG in 17. There is no SVG in this element, but the rule is cheap to keep and the next person to
centre this with translate(-50%) would not know that. Positioned with margin instead. */
.idt-appbar-badge {
display: inline-block;
min-width: 18px;
margin-left: 6px;
padding: 0 5px;
border-radius: 9px;
background: var(--idt-red);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
vertical-align: middle;
}
/* ---- Menus ----------------------------------------------------------------------------------------
Bootstrap's dropdown plugin, restyled. Same component the Data and Admin menus already use. */
.idt-appbar-menu {
margin-top: -6px;
padding: 6px;
min-width: 214px;
border: 1px solid rgba(0, 0, 0, .05);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(20, 32, 30, .22);
}
.idt-appbar-menu > li > a,
.idt-appbar-menu-item {
display: flex;
align-items: center;
width: 100%;
padding: 8px 11px;
font-size: 13.2px;
color: var(--idt-ink);
text-decoration: none;
border-radius: 7px;
background: none;
border: 0;
text-align: left;
font-family: inherit;
}
.idt-appbar-menu > li > a:hover,
.idt-appbar-menu > li > a:focus,
.idt-appbar-menu-item:hover,
.idt-appbar-menu-item:focus {
background: var(--idt-surface-tint);
color: var(--idt-ink);
text-decoration: none;
}
/* Which item inside an OPEN dropdown is the current page - Account on /tradehistory and
/accountmanagement, Data on /riskmetrics and /rateguidance, Admin on /users and /settings.
core.css used to carry this as `.navbar-nav .dropdown-menu>.active>a { background-color:#991B1E;
color:white }`, with a comment recording exactly this job: the top-level entry already says which
MENU you are in (the white underline on .idt-appbar-nav > li.active above), so this said which PAGE
inside it. It was deleted along with the rest of the old navbar block (commit d938006) and never
rebuilt here. generics.js:428 still adds .active to the item's own
- nothing there changed - so
the underline outside the menu kept working, and the gap only showed once you actually opened one:
Risk Metrics and Rate Guidance under Data read identically, and the same is now true of Trade
History and Settings under the new Account menu.
Matched to .idt-appbar-menu-item.is-current below - the chip's "acting for" marker - rather than
invented separately: an open menu should not say "you are here" two different ways. */
.idt-appbar-menu > li.active > a,
.idt-appbar-menu > li.active > a:hover,
.idt-appbar-menu > li.active > a:focus {
background: var(--idt-accent-wash);
color: var(--idt-accent);
font-weight: 600;
}
/* The organisation currently being acted for. Same treatment as the rule above, and for the same reason -
see the note there. */
.idt-appbar-menu-item.is-current {
background: var(--idt-accent-wash);
color: var(--idt-accent);
font-weight: 600;
}
.idt-appbar-menu-cap {
font-size: 10px;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--idt-ink-faint);
padding: 7px 11px 4px;
font-weight: 700;
}
.idt-appbar-menu-sep {
height: 1px;
background: var(--idt-line);
margin: 5px 8px;
}
/* Logout, the one item in either chip menu that is not a choice among peers. Everything above it in
the member menu is an organisation you can act for - a set you pick one from - and Logout ends the
session instead. Styled as a plain menu link it read as one more council at the bottom of a list of
twenty, with a 1px separator carrying the entire burden of saying otherwise, and losing.
Two changes, and both are structural rather than chromatic: 600 weight, so the row has a density
the organisation names do not, and an icon, which no other row in the menu carries. The icon is doing
more work than the weight here - it is what lets the eye find the row without reading it, in a menu
whose length depends on how many organisations the member acts for and can run well past a screenful.
NOT RED, though that is the obvious reach for a sign-out. --idt-red is the commit button and
--idt-bad-* is a genuine alert; logging out is neither, and spending the alert palette on a routine
exit makes the two places that do mean something quieter. The colour rationing at the top of this
file only holds if it holds here.
Out-specified deliberately: bootstrap.css carries `.dropdown-menu > li > a { font-weight: 400 }` at
(0,1,2), so a bare `.idt-appbar-menu-exit` at (0,1,0) loses the weight outright and no load order
saves it - the same trap documented on .idt-appbar-collapse above. (0,2,2) settles it. */
.idt-appbar-menu > li > a.idt-appbar-menu-exit {
font-weight: 600;
}
/* The glyph sits a step back from the label so it reads as a marker beside the word rather than a
second thing competing with it, and joins the label at full ink on hover.
The -1px is optical, and it is not a fudge - it was measured. The row is a flex line with
`align-items: center`, so the 16px icon is centred against the text's FULL ascent-to-descent box.
The word does not look like it occupies that box: at 13.2px/600 in Helvetica Neue the ascent is 12px
and the descent 3px, and the eye centres on cap-top-to-baseline, which puts the word's apparent
middle 1.4px above the box's geometric middle. Centred correctly, the icon therefore reads as
sitting low. `top` rather than a negative margin because a margin on a centred flex item moves it
half its own value and changes the line's height; `top` moves the glyph and nothing else. `top`
rather than a transform because transforms do not reach an SVG element on EdgeHTML 15 and 16 - see
fragments/icons.html.
Only this row is nudged. .idt-btn, .idt-footer-link and the rest have the same geometry and the same
1-ish pixel, but at their own sizes and weights, and none of them has been looked at this closely. */
.idt-appbar-menu > li > a.idt-appbar-menu-exit > .idt-icon {
margin-right: 9px;
position: relative;
top: -1px;
color: var(--idt-ink-soft);
}
.idt-appbar-menu > li > a.idt-appbar-menu-exit:hover > .idt-icon,
.idt-appbar-menu > li > a.idt-appbar-menu-exit:focus > .idt-icon {
color: inherit;
}
/* ---- User chip ------------------------------------------------------------------------------------
Name, current organisation and Logout in one control. The