/* ============================================================================ Nexora app shell — shared across roles (affiliate + advertiser). ONE sidebar/topbar/shell, rendered from templates/_shell/sidebar.html. References ONLY the tokens from /static/css/tokens.css (loaded first) — no hardcoded colors. The sidebar uses --side* (dark in BOTH themes). Layout is flexbox so the desktop rail-collapse (.is-collapsed) reflows the main area automatically; on mobile the sidebar becomes an off-canvas drawer. Role-specific page-body styling does NOT live here (e.g. affiliate's Bootstrap overrides stay in affiliate_ui/.../style.css). ============================================================================ */ :root { --nx-side-w: 248px; --nx-rail-w: 64px; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); } /* ---- Shell layout (flex; sidebar + main) ---------------------------------- */ .nx-shell { display: flex; height: 100vh; overflow: hidden; } .nx-sidebar { flex: 0 0 var(--nx-side-w); width: var(--nx-side-w); height: 100vh; background: var(--side); display: flex; flex-direction: column; transition: flex-basis .18s ease, width .18s ease, transform .2s ease; } .nx-main { flex: 1 1 auto; min-width: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; /* Own background rather than relying on — Bootstrap's reboot (loaded by affiliate/some admin pages) resets body { background: #fff }, which otherwise wins the cascade over shell.css's body rule and leaks a white strip behind content that has no background of its own. */ background: var(--bg); } /* Admin/advertiser content has no dark-theme styling of its own yet (unlike affiliate, see affiliate_ui/css/style.css) — its Tailwind classes (text-gray-800 etc.) were authored against a light canvas. Restoring that canvas here fixes the contrast without touching any page's content. */ .nx-content--light-canvas { background: #F4F6F8; color: #1F2937; } /* ---- Brand mark ------------------------------------------------------------ */ .nx-brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3); text-decoration: none; color: var(--side-text); font-weight: 600; font-size: 18px; overflow: hidden; } .nx-brand:hover { color: var(--side-text); } /* Brand logo — white-label-safe (rendered via partials/brand_logo.html). Lockup = full NEXORA TRACK wordmark (on-dark only); mark = gradient N (any bg). */ .nx-brand__lockup, .nx-brand__mark { display: inline-flex; align-items: center; } .nx-brand__img { height: 30px; width: auto; max-width: 176px; object-fit: contain; display: block; } .nx-brand__markimg { height: 28px; width: 28px; object-fit: contain; display: block; flex: 0 0 auto; } .nx-brand__name { white-space: nowrap; } /* In the sidebar the lockup is the default; the mark takes over in the collapsed rail. The unauthenticated top bar uses the mark directly, so the hide rule is scoped to the sidebar only. */ .nx-sidebar .nx-brand__mark { display: none; } .nx-sidebar.is-collapsed .nx-brand__lockup, .nx-sidebar.is-collapsed .nx-brand__name { display: none; } .nx-sidebar.is-collapsed .nx-brand__mark { display: inline-flex; } /* Login: full lockup centered on the dark login surface. */ .nx-login-logo { height: 40px; width: auto; max-width: 220px; object-fit: contain; display: inline-block; } /* ---- User chip ------------------------------------------------------------- */ .nx-userchip { padding: 0 var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); overflow: hidden; } .nx-userchip__role { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--side-label); margin: 0 0 2px; } .nx-userchip__name { font-size: 13px; font-weight: 500; color: var(--side-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Nav groups ------------------------------------------------------------ */ .nx-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 var(--space-2); } .nx-nav__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--side-label); padding: var(--space-3) var(--space-2) var(--space-1); white-space: nowrap; } .nx-nav__item { display: flex; align-items: center; gap: var(--space-2); padding: 9px var(--space-2); margin-bottom: 2px; border-radius: var(--radius-sm); color: var(--side-text-dim); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; } .nx-nav__item:hover { background: var(--side-hover); color: var(--side-text); } .nx-nav__item.is-active { background: var(--side-active); color: var(--side-text); } .nx-nav__item.is-disabled { color: var(--side-label); cursor: default; pointer-events: none; } /* SYSTEM-style groups (admin: API Docs, Nexora Admin, Archived, Impersonation) — same items, rendered last and de-emphasized rather than a separate component. */ .nx-nav__label--quiet { opacity: .65; } .nx-nav__item.is-quiet { opacity: .8; } .nx-nav__item.is-quiet:hover, .nx-nav__item.is-quiet.is-active { opacity: 1; } .nx-nav__icon { width: 18px; height: 18px; flex: 0 0 auto; } .nx-nav__text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .nx-soon { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; background: var(--side-hover); color: var(--side-label); padding: 1px 7px; border-radius: var(--radius-pill); } /* ---- Sidebar footer (rail toggle + logout) -------------------------------- */ .nx-sidebar__footer { padding: var(--space-2); border-top: 1px solid var(--line); } .nx-sidebar__footer form { margin: 0; } .nx-railtoggle, .nx-logout { width: 100%; display: flex; align-items: center; gap: var(--space-2); background: none; border: none; padding: 9px var(--space-2); border-radius: var(--radius-sm); color: var(--side-text-dim); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; white-space: nowrap; } .nx-railtoggle:hover, .nx-logout:hover { background: var(--side-hover); color: var(--side-text); } .nx-railtoggle { display: none; } /* desktop-only; shown in @media below */ .nx-railtoggle .nx-chev { transition: transform .18s ease; } /* ---- Top bar --------------------------------------------------------------- */ .nx-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); height: 56px; padding: 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); } .nx-topbar__title { font-size: 18px; font-weight: 600; color: var(--text); } .nx-topbar__spacer { flex: 1 1 auto; } .nx-topbar__user { color: var(--text-dim); font-size: 13px; } .nx-topbar__logoutform { margin: 0; display: inline-flex; } /* Brand pill — compact mark + name, top-right of the shared shell top strip. */ .nx-brandpill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 5px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); } .nx-brandpill__img { height: 18px; width: 18px; object-fit: contain; display: block; } .nx-brandpill__name { font-size: 13px; font-weight: 500; color: var(--text-dim); white-space: nowrap; } .nx-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; } .nx-iconbtn:hover { border-color: var(--line-strong); } /* Hamburger — mobile only */ .nx-hamburger { display: none; } /* ---- Content area ---------------------------------------------------------- */ .nx-content { flex: 1 1 auto; overflow: auto; padding: var(--space-4); } /* ---- System-wide typography + density standardization --------------------- Every admin page picks its own CSS framework per-page (Tailwind CDN on some, Bootstrap CDN on others — see e.g. admin/dashboard vs admin/leads), each shipping its own font-stack and type scale, which is why today no two screens look sized or spaced the same. Rather than hand-edit 20+ templates, fix it centrally: 1. Force the shared Inter font-face over both frameworks' own resets. Font-family inherits naturally, so .nx-content's own rule already beats Bootstrap's `body { font-family }` on specificity (class > element) — the `*` here is only to also catch anything that redeclares its own font-family (Bootstrap buttons/inputs, Tailwind's font-sans utility). 2. Shrink the effective root font-size. Tailwind's and Bootstrap's utility classes are BOTH rem-based (relative to , live-recomputed by the browser regardless of when the CSS was authored), so this proportionally shrinks every page's text/spacing/icon sizing at once. The shell itself (sidebar/topbar, tokens.css) is untouched — it's sized in px throughout, never rem, specifically so a change like this can't reach it. 3. Edge-to-edge: neutralize the inner max-width wrappers pages already use (Tailwind's max-w-* + mx-auto, Bootstrap's .container/.container-fluid) so content fills .nx-content's own width instead of double-constraining. ============================================================================ */ html { font-size: 87.5%; } /* 16px browser default -> 14px effective root */ .nx-content, .nx-content * { font-family: var(--font-sans) !important; } .nx-content .container, .nx-content .container-fluid, .nx-content [class*="max-w-"] { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Off-canvas overlay (mobile) */ .nx-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; } .nx-overlay.is-open { display: block; } /* ---- Desktop: collapsed icon rail ----------------------------------------- */ @media (min-width: 861px) { .nx-railtoggle { display: flex; } .nx-sidebar.is-collapsed { flex-basis: var(--nx-rail-w); width: var(--nx-rail-w); } .nx-sidebar.is-collapsed .nx-nav__text, .nx-sidebar.is-collapsed .nx-nav__label, .nx-sidebar.is-collapsed .nx-soon, .nx-sidebar.is-collapsed .nx-userchip, .nx-sidebar.is-collapsed .nx-railtoggle .nx-side-label, .nx-sidebar.is-collapsed .nx-logout span { display: none; } .nx-sidebar.is-collapsed .nx-brand { justify-content: center; padding-left: 0; padding-right: 0; } .nx-sidebar.is-collapsed .nx-nav__item, .nx-sidebar.is-collapsed .nx-railtoggle, .nx-sidebar.is-collapsed .nx-logout { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } .nx-sidebar.is-collapsed .nx-railtoggle .nx-chev { transform: rotate(180deg); } } /* ---- Mobile: off-canvas drawer -------------------------------------------- */ @media (max-width: 860px) { .nx-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; transform: translateX(-100%); box-shadow: 2px 0 18px rgba(0,0,0,.45); } .nx-sidebar.is-open { transform: translateX(0); } /* The rail-collapse is a desktop affordance; never collapse the mobile drawer. */ .nx-sidebar.is-collapsed { flex-basis: var(--nx-side-w); width: var(--nx-side-w); } .nx-hamburger { display: inline-flex; } }