summary. The two
white overlay PANELS (.app-subnav-group-menu, .app-subnav-select-menu)
were already light and now sit on a light band, so they gained a top
border and a stronger shadow to stay separable from it.
REQUIRED MARKUP — a body-level SIBLING of nav.topbar, placed immediately
after it and BEFORE .page-wrap (never inside it: a child of the width-capped
wrap cannot go full-bleed without viewport hacks that the max-content
grid-grow model at the foot of this file breaks):
…hero, .page-actions, content…
FOUR load-bearing facts behind the geometry:
1. Global `box-sizing: border-box` (top of this file) means .topbar's
`height:56px` INCLUDES its 3px navy bottom rule, and
`body:has(nav.topbar){padding-top:56px}` reserves exactly 56px — so the
first IN-FLOW body child lands on that rule's bottom edge. Flush, with no
magic number.
2. The band is deliberately NOT position:fixed. 56px is hard-coded as a sticky
offset in FOUR places — `body:has(nav.topbar)` above, the grid's sticky
thead `top:56px` near the foot of this file, and app_grid.js:457
(`topOffset` default) + :1390 (the float-head clone). A fixed band would
tuck every grid's sticky header underneath itself, and since only SOME
pages carry a sub-nav it would need topOffset plumbed per page. In flow it
scrolls away exactly as the old in-page bar did.
3. body is `display:flex; flex-direction:column`, so the band stretches to the
body's width for free — including on a grid page where the body grows to
max-content, so it never leaves a bare strip when the page scrolls right.
4. The band sits DIRECTLY on .topbar's 3px navy rule, which since the
2026-08-17 redesign is the separator between the dark app frame and the
light section bar. There is no longer any band-page override of that rule
(the 2026-08-05 `body:has(.app-subnav-bar) .topbar` recolour, which
repainted it to the band's own top tone so the two blended, is retired) —
every page's topbar now renders identically, band or no band. */
.app-subnav-bar {
position: relative; /* positioning context for the ≤700px menu overlay */
z-index: 60; /* over page content + grid chrome (20-50); under .topbar (100) */
/* A clean white surface (see --subnav-* at the top of this file). The
hairline + the soft drop shadow are what lift the band off the page
beneath it now that it no longer has a dark fill to do that job — without
them a white band on a #f0f2f5 page has no bottom edge at all. */
background: var(--subnav-surface);
border-bottom: 1px solid var(--subnav-edge);
box-shadow: 0 2px 8px rgba(15, 28, 54, .07);
}
/* Line the tabs up with the page content below by reusing .page-wrap's own box
(max-width + the asymmetric 24/20 gutters), so a tab's left edge and the
hero's left edge share a column. */
.app-subnav-bar-inner {
max-width: 1750px;
margin: 0 auto;
padding: 0 20px 0 24px;
}
/* Wide (page-scrolling) grid pages: keep the tabs parked at the viewport-left
when the page scrolls right instead of panning away with the content. Same
`sticky; left:` trick and the same `:has()` discriminator used for
.app-footer-inner near the foot of this file — but applied to the NAV, not to
the width-capped inner wrapper, which is the whole point:
position:sticky is clamped to its CONTAINING BLOCK, so a sticky element can
only slide (container width - own width). Sticking the 1750px inner inside a
band grown to 2680px caps the slide at 930px, and a 1415px scroll left the
tabs 485px off-screen — measured 2026-07-31, which is how this rule got
rewritten. Sticking the NAV instead makes the slide range (band - nav), and
since the nav is narrower than the viewport whenever it fits on screen at all,
its range always EXCEEDS the page's scroll range (body - viewport). So the pin
holds for the FULL scroll rather than most of it. NOTE: .app-footer-inner
still carries the original clamp; the same rewrite would fix it.
The offset re-adds .page-wrap's 24px gutter so the pinned position is
continuous with the resting one — no 24px jump when sticking starts. */
body:has(.app-grid:not(.app-grid--scrollx)) .app-subnav-bar-inner {
max-width: none;
margin-inline: 0;
}
body:has(.app-grid:not(.app-grid--scrollx)) .app-subnav-bar-inner > .app-subnav,
body:has(.app-grid:not(.app-grid--scrollx)) .app-subnav-bar-inner > .app-subnav-select {
position: sticky;
left: max(24px, calc((100vw - 1750px) / 2 + 24px));
/* Load-bearing: .app-subnav is a block-level flex container, so it would
otherwise stretch to the whole grown band — width == container means a
slide range of ZERO and sticky silently does nothing. Shrink-to-fit gives
it the range. (It also stops the tabs wrapping on a grown page, which is
what you want there: the page already scrolls horizontally.) */
width: max-content;
}
/* With the band supplying the chrome edge, .page-wrap's 32px top padding reads
loose against it — 24px sits the hero closer without crowding the shadow.
Keyed on the BAND's presence, so a family's sub-pages that carry no sub-nav
(record pages, forms, and chrome-less direct-access views) keep the shared
32px: there is no band above them to tighten against. */
body:has(.app-subnav-bar) .page-wrap { padding-top: 24px; }
/* Desktop tabs. Full-height rows in the band, current section marked by a 3px
--subnav-marker underline on the band's bottom edge — it points down into the
page it opens. flex-wrap stays ON: a family with more or longer tabs than fit
degrades to a two-row band rather than overflowing or clipping a door. */
.app-subnav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0;
margin: 0;
}
/* TEXT-FIRST (2026-08-17). The label carries the tab; the icon is a quiet aid
beside it and the row has no chrome of its own at rest. 13.5px/500 near-black
on white is legible where 12.5px/600 at 72% white on navy was not, and the
52px row (was 42) is a comfortable pointer target that also gives the band the
breathing room the operator asked for. The 3px transparent inset is the active
marker's rest state — it is declared here so the underline has a slot to
animate into rather than appearing from nothing. */
.app-subnav-tab {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
font-weight: 500;
color: var(--subnav-tab);
text-decoration: none;
background: none;
border: none;
border-radius: 0;
padding: 0 18px;
min-height: 52px;
white-space: nowrap;
box-shadow: inset 0 -3px 0 transparent; /* the active marker's rest state */
transition: background .15s, color .15s, box-shadow .15s;
}
.app-subnav-tab svg { color: var(--subnav-tab-icon); flex-shrink: 0; }
/* The SECTION icon only (:first-of-type), sized up to 16px against the 13.5px
label so the pair reads as a modern nav item rather than a glyph the same size
as its own text. Deliberately NOT `.app-subnav-tab svg`, which would also
catch the grouped tab's chevron (13px by design) — the off-site new-tab glyph
is already safe, being wrapped in a .app-subnav-tab-newtab span rather than a
direct child. Set in CSS because the icons are authored at 14px inside the
partials' raw SVG markup, in menu_families.php and in eight other places. */
.app-subnav-tab > svg:first-of-type { width: 16px; height: 16px; }
/* Hover previews the marker at a quarter strength — the same 3px slot the active
tab fills, so the underline reads as sliding in rather than appearing. */
.app-subnav-tab:hover {
background: var(--subnav-hover);
color: var(--navy);
box-shadow: inset 0 -3px 0 #c8d3e0;
}
.app-subnav-tab:hover svg { color: var(--navy); }
/* .is-active is LAST at equal specificity, so it also wins on hover — the current
tab never flickers to the hover marker. NO FILL: on white the underline alone
is the marker (weight + navy do the rest), and a wash behind it would read as a
second, competing one. That is also why the fill has to be reset explicitly —
without it the tab would keep the hover wash while the pointer is on it. */
.app-subnav-tab.is-active {
background: none;
color: var(--navy);
font-weight: 700;
box-shadow: inset 0 -3px 0 var(--subnav-marker);
}
.app-subnav-tab.is-active svg { color: var(--navy); }
/* The band is a light surface now, so these take the app's standard focus ring
(the white one they used to carry was for navy and is invisible here). Inset,
because a full-height tab's ring would otherwise be clipped by the band edge. */
.app-subnav-tab:focus-visible,
.app-subnav-select-summary:focus-visible,
.app-subnav-group-summary:focus-visible {
outline: 2px solid var(--control-focus);
outline-offset: -2px;
}
/* ---- An OFF-SITE tab ----
Added 2026-08-12 with the NAV consolidation, whose "Reports on ShareFile" item is
specified as an external link rather than an in-app screen. Same tab chrome, plus
a trailing new-tab glyph so a door that LEAVES the application says so before it
is clicked (the topbar's own external entries carry the identical glyph as
`.dropdown-newtab`). Such a tab never takes `.is-active` and never `aria-current`
— you are never "on" it — so the marker slot below it simply stays empty.
The negative pull cancels most of the parent's 9px flex gap, so the glyph reads as
part of the label rather than as a second icon; on the white mobile panel it
inherits navy from `.app-subnav-select-item svg`, like every other icon there. */
.app-subnav-tab-newtab {
display: inline-flex;
align-items: center;
margin-left: -5px;
opacity: .8;
}
/* ---- Grouped tab (a sub-menu INSIDE the band) ----
Added 2026-08-10 with the Treasury consolidation, which folds a family's three
configuration screens (SmartWire / Wire Templates / Holdback Settings) behind a
single "Settings" door instead of spending three of the bar's tab slots on
screens nobody visits daily.
Use it SPARINGLY and only for a real sub-group: a section that is one of the
family's working surfaces belongs on the bar as a plain tab, because a door
behind a door costs a click and hides the label from a scan. One group of
settings-ish screens at the END of the bar is the shape this exists for.
MARKUP — a native (no JS needed to open; general.js only adds the
outside-click / ESC dismissal every dropdown owes the user):
The summary IS a tab (it carries .app-subnav-tab, so it inherits the row
geometry, hover and the active marker) and takes .is-active when the CURRENT
page is one of its members — otherwise the band would show no marker at all on
three of the family's screens. The panel reuses .app-subnav-select-item, the
same white-overlay link the mobile section dropdown uses, because it is the
same object: a section link on a light panel over the band. Only the size
differs (mobile is a touch target; this is a pointer menu).
Below 700px the whole group disappears with .app-subnav — the mobile
lists the members inline under an .app-subnav-select-label caption instead, so a
phone never has to open two dropdowns to reach a screen. */
.app-subnav-group {
position: relative; /* positioning context for the panel */
display: flex;
}
.app-subnav-group-summary {
list-style: none;
cursor: pointer;
}
.app-subnav-group-summary::-webkit-details-marker { display: none; }
.app-subnav-group-chevron {
color: var(--subnav-tab-icon);
transition: transform .15s;
}
.app-subnav-group[open] > .app-subnav-group-summary {
background: var(--subnav-hover);
color: var(--navy);
}
.app-subnav-group[open] > .app-subnav-group-summary svg { color: var(--navy); }
.app-subnav-group[open] .app-subnav-group-chevron { transform: rotate(180deg); }
/* Hangs off the band's bottom edge, left-aligned with its own tab. min-width
keeps a two-word label from a ragged 90px panel; max-width stops a long one
from running off a narrow viewport.
The top border and the deeper shadow arrived with the 2026-08-17 light band:
a white panel hanging off a NAVY band separated itself, but off a white one it
would just be a shadow with no edge. `top:100%` lands the panel exactly on the
band's own 1px bottom hairline, so the two coincide and still read as one
line — do not add a margin-top to "clear" it, that reveals a double rule. */
.app-subnav-group-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 210px;
max-width: min(320px, 90vw);
background: #fff;
border: 1px solid #d8dee6;
border-radius: 0 0 12px 12px;
overflow: hidden;
box-shadow: 0 10px 22px rgba(15, 28, 54, .13);
}
.app-subnav-group-menu .app-subnav-select-item {
padding: 9px 13px;
font-size: 12.75px;
white-space: nowrap;
}
/* Mobile section dropdown (shown ≤700px; hidden on desktop). Lives in the same
band, so it goes LIGHT with it (2026-08-17) — the summary was white-on-navy
and would have been invisible on the new surface. The row is the phone's whole
section navigation, so it keeps the heavier 14px/700 treatment: unlike a
desktop tab it has no siblings to be read against. */
.app-subnav-select { display: none; }
.app-subnav-select-summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 20px 12px 24px;
min-height: 50px;
background: none;
border: none;
border-radius: 0;
font-size: 14px;
font-weight: 700;
color: var(--navy);
cursor: pointer;
}
.app-subnav-select-summary::-webkit-details-marker { display: none; }
.app-subnav-select[open] .app-subnav-select-summary { background: var(--subnav-hover); }
.app-subnav-select-current { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
/* Navy, matching .app-subnav-select-item svg in the panel this row opens — the
app's language for an icon on a light surface. (It used to take the marker
colour because the marker was the band's white; --accent here would put an
orange glyph beside a navy label for no reason.) */
.app-subnav-select-current svg { color: var(--navy); flex-shrink: 0; }
.app-subnav-select-chevron { color: var(--subnav-tab-icon); flex-shrink: 0; transition: transform .15s; }
.app-subnav-select[open] .app-subnav-select-chevron { transform: rotate(180deg); }
/* The section list OVERLAYS the page rather than pushing the hero down — the band
is the positioning context and its z-index puts the panel over the content.
Scrollable so a long family cannot run off a short viewport. Full border +
deeper shadow since 2026-08-17, for the same reason as .app-subnav-group-menu:
a white panel needs its own edge now that the band behind it is white too. */
.app-subnav-select-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 0;
background: #fff;
border: 1px solid #d8dee6;
border-radius: 0 0 12px 12px;
overflow: hidden;
max-height: calc(100vh - 150px);
overflow-y: auto;
box-shadow: 0 10px 22px rgba(15, 28, 54, .13);
}
.app-subnav-select-item {
display: flex;
align-items: center;
gap: 9px;
padding: 12px 14px;
font-size: 14px;
font-weight: 600;
color: var(--text-soft);
text-decoration: none;
border-bottom: 1px solid var(--hairline-soft);
}
.app-subnav-select-item:last-child { border-bottom: none; }
/* Caption row for a grouped tab's members (see .app-subnav-group): the desktop
sub-menu is flattened into this list on mobile, so the group name has to survive
as a heading or its members read as three more top-level sections. Not a link —
the group itself has no page. */
.app-subnav-select-label {
display: block;
padding: 10px 14px 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-muted);
background: var(--head-bg);
border-bottom: 1px solid var(--hairline-soft);
}
/* The members themselves — indented so the caption reads as their heading. A
modifier, not a sibling selector: a group is not necessarily last in the list. */
.app-subnav-select-item--sub { padding-left: 26px; }
/* These sit on the WHITE overlay panel, not the band, so the marker colour would
be invisible — they take navy, matching .dropdown-ico in the topbar's own menu
(the app's language for an icon on a light panel). */
.app-subnav-select-item svg { color: var(--navy); flex-shrink: 0; }
.app-subnav-select-item:hover { background: var(--head-bg); }
/* The panel's "you are here". The 3px --subnav-marker on the LEADING edge is the
band's underline turned through 90° — same marker, same colour, rotated to the
axis this list runs on (2026-08-17; before that the tint + weight were the only
cue, which a scan can miss in a list of otherwise identical rows). */
.app-subnav-select-item.is-active {
background: var(--subnav-hover);
color: var(--navy);
font-weight: 700;
box-shadow: inset 3px 0 0 var(--subnav-marker);
}
@media (max-width: 700px) {
/* Swap the tab row for the compact dropdown — no horizontal scroll. */
.app-subnav { display: none; }
.app-subnav-select { display: block; margin: 0; }
/* The summary row spans the band edge-to-edge at this width. */
.app-subnav-bar-inner { padding: 0; }
/* Mobile is fully fluid and never page-scrolls horizontally (the body-grow
release near the foot of this file), so drop the wide-page pin — mirrors
what the same breakpoint does for .app-footer-inner. */
body:has(.app-grid:not(.app-grid--scrollx)) .app-subnav-bar-inner > .app-subnav,
body:has(.app-grid:not(.app-grid--scrollx)) .app-subnav-bar-inner > .app-subnav-select {
position: static;
width: auto;
}
}
/* ---- Inner Sections ---- */
/* ---- ported block: .app-panel* / .app-pill ---- */
/* ---- App Panel (the span-title section card) ----
Consolidated 2026-07-23 from the 17 byte-identical pre-.app-card feature
cards (adh/aml/amlr/cct/cdd/def/dl/hut/ic/ica/ni/ns/pt/pta/pa/q/tr-card*),
then visually CONVERGED onto the .app-card look (operator-approved, same
day): the box + head-surface rules are grouped with .app-card above. What
remains here is only what differs from .app-card:
- the head carries the title typography DIRECTLY (markup is
Title …optional pill…
,
not the .app-card-ico/.app-card-heading structure) and STACKS its children,
so a trailing pill gets its own left-aligned row under the title (2026-07-24
— it used to be space-betweened to the top-right; see the rule below);
- the panel keeps the legacy overflow clip — partial-migration features'
LOCAL heads (ic/ni/ns/tr/dl/pta…) rely on it to round their top corners.
.app-panel--grid opts out: a panel wrapping an AppGrid must NOT clip
(overflow:hidden would become the sticky containing block and break the
grid's sticky top:56px header) — and AppSelect dropdowns inside a clipped
panel need the same escape (the .tr-step pattern).
NEW pages should prefer .app-card. */
.app-panel { overflow: hidden; }
.app-panel--grid { overflow: visible; }
/* The head STACKS its children: the title, then anything that follows it — a
status pill, a tag group — on its OWN row underneath, LEFT-aligned
(operator standard, 2026-07-24; this replaces `justify-content: space-between`,
which pushed that trailing element to the top-RIGHT).
EXCEPTION — an inline QUALIFIER of the title (an id/reference chip such as
payable_transactions' "Transaction #48210") belongs ON the title line: nest it
INSIDE the title span rather than adding a second child. That is the whole
mechanism — one child = one row — so no modifier class is needed. Only a
STATUS badge / tag group is a separate child. Same reasoning as
.app-card-actions and .page-actions: a right-parked element sits far from the
content it describes on a wide page (and can scroll off-screen entirely under
the wide-grid max-content width model), and crowds the title on a narrow one.
`flex-direction: column` + `align-items: flex-start` is what gives each child
its own row WITHOUT stretching it — a pill is a shrink-wrapped inline-block, so
the `flex-basis: 100%` trick used for the card's button row would balloon it to
the full card width. Markup is unchanged everywhere (the pill stays the head's
last child); every one of the 115 heads in the app opens with the title span,
so a single-child head renders identically to before. */
.app-panel-head {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 10px;
width: 100%;
font-size: 15.5px;
font-weight: 700;
color: var(--text);
text-align: left;
}
/* The head IS the title, so a head that wraps its title in a HEADING element for
document structure inherits the head's typography instead of the UA's h2/h3
metrics. Added 2026-07-24 with the panel-head convergence: ten features write
Title
rather than the the
examples use, and keeping the heading is worth more than matching the example
(it is the only heading structure those record pages have). Scoped to
:first-child so a TRAILING .app-pill / tag group in the head is untouched —
`font: inherit` on a pill would blow it up to 15.5px. */
.app-panel-head > h2:first-child,
.app-panel-head > h3:first-child { font: inherit; color: inherit; margin: 0; }
/* A head that is also a COLLAPSE control keeps its chevron on the title line:
the shared head stacks its children (that is right for a status badge, wrong
for a disclosure affordance). Opt in with .app-panel-head--toggle. */
.app-panel-head--toggle {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
/* …and when that control is a