… */ .nx-actions { display: flex; flex-wrap: wrap; gap: var(--nx-gap); align-items: center; min-width: 0; } .nx-actions--end { justify-content: flex-end; } /* Separate the row from the block above/below it. Explicit rather than automatic, because many app pages carry a global `* { margin: 0 }` reset that would silently drop a default margin here. */ .nx-actions--gap-top { margin-top: 1rem; } .nx-actions--gap-bottom { margin-bottom: 1rem; } /* Member profile picture. Always circular, always the same shape whether the member uploaded a picture (an ) or not (a with their initials on the accent colour), so a roster row lines up either way. Size is set inline by renderUserAvatar() — the helper also picks which stored rendition to fetch, so never scale a big avatar down with CSS alone. */ .nx-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; object-fit: cover; overflow: hidden; background: rgba(var(--nx-accent-rgb), 0.18); border: 1px solid rgba(var(--nx-accent-rgb), 0.35); vertical-align: middle; } .nx-avatar--default { color: var(--nx-accent); font-weight: 700; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; user-select: none; } /* A form reduced to its control(s), sitting inline with its neighbours — the "delete" button next to a "save" button, an action cell in a table row. Deliberately `inline-flex`, NOT `inline`: vertical margins are ignored on a non-replaced inline box, so the older per-page `display: inline` version made every `margin-top` on such a form a silent no-op. */ .nx-inline-form { display: inline-flex; align-items: center; gap: var(--nx-gap); vertical-align: middle; } /* ========================================================================= Brand mark ------------------------------------------------------------------------- The Command Nexus product mark: shield + a two-line wordmark, left justified, the stacked text sized so the block matches the icon height. Emitted only by cnBrandMark() in includes/cn_brand.php — pages should never rebuild it, which is what let the admin sidebar and the unit headers drift apart in the first place. The icon is the FontAwesome shield rather than an image file. If a real logo asset lands in assets/img/, swap the in the partial; nothing here assumes a glyph. ========================================================================= */ .cn-brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: inherit; /* Wrapper margins are eaten by the global `* { margin: 0 }` reset, so the mark carries no outer spacing — the header's own gap positions it. */ transition: opacity var(--nx-transition); } .cn-brand:hover, .cn-brand:focus-visible { opacity: 0.85; text-decoration: none; } .cn-brand:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; border-radius: var(--nx-radius-sm); } .cn-brand__icon { /* Default mark is the home-page blue; admin surfaces opt into red via .cn-brand--admin so the colour states who the page serves. */ color: var(--cn-brand-mark, #00CED1); font-size: 2rem; line-height: 1; flex: none; } .cn-brand--admin .cn-brand__icon { color: var(--nx-danger); } /* The two wordmark lines stack tightly so the pair reads as one block the same height as the shield. */ .cn-brand__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.02; } .cn-brand__line { font-weight: 900; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-text); white-space: nowrap; } .cn-brand__sub { margin-top: 0.15rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--nx-text-muted); text-transform: none; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; } /* Sidebar form: a little more room, since it sits above a divider. */ .cn-brand--stacked { gap: 0.6rem; } .cn-brand--stacked .cn-brand__icon { font-size: 1.75rem; } /* Unit-page headers put the product mark next to the org's own tile. The hairline keeps "Command Nexus" from reading as part of the org name. */ .cn-brand--divided { padding-right: 0.9rem; border-right: 1px solid var(--nx-border); } /* ========================================================================= Mobile layer ------------------------------------------------------------------------- The design system had no breakpoints at all, so every `.nx-*` surface kept its desktop shape on a phone: multi-column form rows stayed side by side, dropdown menus could sit wider than the viewport, and long words in a banner pushed the page sideways. These rules reflow the shared components; pages built on them get mobile behaviour without their own media queries. ========================================================================= */ @media (max-width: 768px) { /* Multi-column form rows collapse to one column. */ .nx-form-row { grid-template-columns: 1fr; gap: 0.85rem; } /* Controls go full-bleed so they're comfortable thumb targets. */ .nx-form-group > .nx-select, .nx-form-group > input, .nx-form-group > textarea, .nx-select { width: 100%; max-width: 100%; } /* A dropdown menu must never be wider than the screen. */ .nx-dropdown { display: block; } .nx-dropdown__menu { min-width: 0; width: 100%; max-width: calc(100vw - 2rem); } /* Help bubbles are centred on the viewport rather than on a trigger that might be at the very edge of the screen. */ .nx-help__bubble { max-width: min(260px, calc(100vw - 3rem)); } /* Banner rows: dismiss drops under the message so neither is squeezed. */ .nx-banner { flex-wrap: wrap; padding: 0.55rem 0.85rem; font-size: 0.88rem; } .nx-banner__body { flex: 1 1 100%; } .nx-banner__dismiss { margin-left: auto; } /* Header banner of the Nexus Admin suite pages. */ .aas-header { gap: 0.75rem; } .aas-header__title { font-size: 1.25rem; } /* No element in a shared component should be able to widen the page. */ .nx-banner__text, .nx-dropdown__item, .nx-btn { overflow-wrap: anywhere; } .nx-btn { max-width: 100%; } /* The brand mark shrinks rather than pushing the header nav off-screen. */ .cn-brand { gap: 0.45rem; } .cn-brand__icon { font-size: 1.6rem; } .cn-brand__line { font-size: 0.9rem; } .cn-brand__sub { max-width: 9rem; } .cn-brand--divided { padding-right: 0.6rem; } } @media (max-width: 480px) { /* iOS zooms the page when a focused control's text is under 16px, which leaves the layout scrolled sideways after the keyboard closes. */ .nx-select, .nx-form-group > input, .nx-form-group > textarea { font-size: 16px; } .nx-btn { padding: 0.5rem 0.85rem; } .nx-btn--lg { padding: 0.65rem 1.1rem; font-size: 1rem; } /* Action rows stack full-width so nothing gets clipped. */ .nx-actions > .nx-btn { flex: 1 1 100%; } }