/* * Design tokens + shared layout for the portal: modern-formal, no cards. * Flat surfaces, hairline rules, tabular numerals, a single accent. * Every template reuses these classes. */ :root { color-scheme: light; --paper: #fcfcfb; --surface: #ffffff; --sidebar: #f6f6f5; --ink: #17191e; --slate: #5a5f68; --faint: #8a8f97; --mist: #e4e5e7; --rule-strong: #17191e; --accent: #24418e; --accent-hover: #1b3474; --accent-quiet: #eef1f8; --on-accent: #ffffff; --nav-hover: #efefee; --moss: #1b7a41; --amber: #a96f0b; --brick: #b3261e; /* Production self-hosts IBM Plex Sans as a woff2; system sans is the dev fallback so this renders without a font build step. */ --font: "IBM Plex Sans", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ---------- dark mode (additive) — same tokens, alternate values. Toggled by setting data-theme="dark"/"light" on (see theme.js); the attribute is set from an inline script in before first paint to avoid a flash of the wrong theme, falling back to prefers-color-scheme the first time a browser visits with nothing in localStorage yet. ---------- */ html[data-theme="dark"] { color-scheme: dark; --paper: #16181d; --surface: #1c1f26; --sidebar: #101216; --ink: #e8e9ec; --slate: #a0a5ae; --faint: #6c7178; --mist: #2b2e35; --rule-strong: #e8e9ec; --accent: #6f93e0; --accent-hover: #86a6ea; --accent-quiet: #202a42; --on-accent: #0e1116; --nav-hover: #22252c; --moss: #4cbf7c; --amber: #d99a2b; --brick: #e5675d; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- app frame ---------- */ /* height (not min-height): pins the frame to exactly one viewport so the sidebar and main column below scroll independently within it, instead of the whole page growing and scrolling as one block. */ .app { display: flex; height: 100vh; } /* ---------- sidebar ---------- */ .sidebar { width: 232px; flex: 0 0 232px; background: var(--sidebar); border-right: 1px solid var(--mist); display: flex; flex-direction: column; height: 100vh; overflow-y: auto; } .brand { padding: 18px 20px 16px; border-bottom: 1px solid var(--mist); } .brand .co { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; white-space: nowrap; } .brand .suite { font-size: 11px; color: var(--faint); letter-spacing: 0.04em; margin-top: 2px; } .nav { padding: 14px 0; flex: 1; } .nav-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); padding: 14px 20px 6px; } .nav a.nav-item, .nav button.nav-item, .nav summary.nav-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 20px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; border-left: 2px solid transparent; } .nav .nav-item:hover { background: var(--nav-hover); text-decoration: none; } .nav .nav-item.active { border-left-color: var(--accent); background: var(--nav-hover); font-weight: 600; color: var(--accent); } .nav .count { margin-left: auto; font-size: 11.5px; color: var(--slate); font-variant-numeric: tabular-nums; } /* ---------- collapsible sidebar sections (additive —
/, no JS) ---------- */ .nav details > summary { cursor: pointer; list-style: none; } .nav details > summary::-webkit-details-marker { display: none; } .nav details > summary::before { content: "▸"; display: inline-block; flex: 0 0 10px; width: 10px; font-size: 9px; color: var(--faint); transition: transform 0.1s ease; } .nav details[open] > summary::before { transform: rotate(90deg); } /* ---------- nav sub-items (additive — the portfolio-company tree under "Companies") ---------- */ .nav a.nav-subitem, .nav summary.nav-subitem { padding: 5px 20px 5px 36px; font-size: 12px; color: var(--slate); } .nav summary.nav-subitem a { flex: 1; color: inherit; text-decoration: none; } .nav .nav-subitem.depth-2 { padding-left: 52px; } .nav .nav-subitem.depth-3 { padding-left: 68px; } .nav .nav-subitem.active { color: var(--accent); font-weight: 600; } .nav a.nav-subitem.nav-resource { color: var(--faint); font-size: 11.5px; } .nav a.nav-subitem.nav-resource.active { color: var(--accent); } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--faint); } .dot.ok { background: var(--moss); } .dot.degraded { background: var(--amber); } .dot.down { background: var(--brick); } .dot.unknown { background: var(--mist); border: 1px solid var(--faint); } .ext { margin-left: auto; color: var(--faint); font-size: 11px; } .userblock { border-top: 1px solid var(--mist); padding: 14px 20px; font-size: 12px; } .userblock .name { font-weight: 600; } .userblock .mail { color: var(--faint); margin-top: 1px; } .userblock form { margin-top: 6px; } .userblock a.linklike { display: block; margin-top: 6px; text-decoration: none; } .userblock button.linklike, .userblock a.linklike { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; } .userblock button.linklike:hover, .userblock a.linklike:hover { text-decoration: underline; } /* ---------- main / top bar ---------- */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; } .topbar { height: 48px; border-bottom: 1px solid var(--mist); background: var(--surface); display: flex; align-items: center; gap: 20px; padding: 0 28px; } .omnibox { display: flex; align-items: center; gap: 10px; border: 1px solid var(--mist); color: var(--faint); font-size: 12.5px; padding: 5px 12px; width: 340px; background: var(--paper); } .omnibox input { border: 0; background: none; font: inherit; color: var(--ink); width: 100%; outline: none; } .omnibox .kbd { margin-left: auto; font-size: 10.5px; border: 1px solid var(--mist); padding: 1px 5px; color: var(--faint); letter-spacing: 0.04em; } .topbar .spacer { flex: 1; } .topbar .approvals-link { font-size: 12.5px; font-weight: 600; } .topbar .asof { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; } /* ---------- content column ---------- */ .content { padding: 26px 28px 64px; max-width: 1180px; width: 100%; margin: 0; } .pagehead { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--rule-strong); flex-wrap: wrap; } .pagehead h1 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .pagehead .sub { color: var(--slate); font-size: 12.5px; } .pagehead .right { margin-left: auto; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; } /* ---------- metrics strip ---------- */ .metrics { display: flex; border-bottom: 1px solid var(--mist); overflow-x: auto; } .metric { flex: 1 1 0; min-width: 150px; padding: 18px 20px 16px; border-left: 1px solid var(--mist); } .metric:first-child { border-left: 0; padding-left: 0; } .metric .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--faint); white-space: nowrap; } .metric .value { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1.15; } .metric .delta { font-size: 11.5px; margin-top: 3px; color: var(--slate); font-variant-numeric: tabular-nums; } .metric .delta.up { color: var(--moss); } .metric .delta.down { color: var(--brick); } .metric .delta.warn { color: var(--amber); } /* ---------- sections ---------- */ .section { margin-top: 34px; } .sechead { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong); flex-wrap: wrap; } .sechead .t { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; } .sechead .src { font-size: 11.5px; color: var(--faint); } .sechead .go { margin-left: auto; font-size: 12px; white-space: nowrap; } .emptystate { color: var(--faint); font-size: 13px; padding: 18px 0; } table { width: 100%; border-collapse: collapse; font-size: 13px; } .tablewrap { overflow-x: auto; } th { text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); padding: 9px 14px 7px 0; border-bottom: 1px solid var(--mist); white-space: nowrap; } td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--mist); vertical-align: top; } tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; } td .sub { color: var(--faint); font-size: 11.5px; margin-top: 1px; } .strong { font-weight: 600; } .muted { color: var(--slate); } /* buttons */ .btn { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 12px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; letter-spacing: 0.02em; } .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn.ghost { background: transparent; color: var(--accent); } .btn.ghost:hover { background: var(--accent-quiet); } .actions { display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; } /* A POST-only action button (e.g. deactivate/reactivate) inside .actions needs a
wrapper, but the form itself shouldn't participate in the flex layout as its own box — this lets its .btn child sit flush next to sibling actions instead of stacking below them. */ .actions .inlineform { display: contents; } /* filter tabs (e.g. an approval/inbox-style screen) */ .filters { display: flex; align-items: baseline; gap: 22px; padding: 14px 0 0; font-size: 13px; flex-wrap: wrap; } .filters button.tab, .filters a.tab { border: 0; background: none; font: inherit; font-size: 13px; color: var(--slate); cursor: pointer; padding: 0 0 6px; border-bottom: 2px solid transparent; font-variant-numeric: tabular-nums; } .filters .tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } .filters .right { margin-left: auto; font-size: 12px; color: var(--faint); } .foot { margin-top: 14px; font-size: 11.5px; color: var(--faint); max-width: 68ch; } /* ---------- standalone auth screen (no sidebar) ---------- */ .authscreen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--paper); } .authbox { width: 100%; max-width: 360px; padding: 0 24px; } .authbox .co { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; white-space: nowrap; } .authbox .suite { font-size: 11px; color: var(--faint); letter-spacing: 0.04em; margin-top: 2px; margin-bottom: 28px; } .authbox h1 { font-size: 18px; font-weight: 600; border-bottom: 2px solid var(--rule-strong); padding-bottom: 10px; margin: 0 0 6px; } .authbox .note { font-size: 12px; color: var(--faint); margin-bottom: 18px; } .userlist { display: flex; flex-direction: column; border-top: 1px solid var(--mist); } .userlist form { border-bottom: 1px solid var(--mist); } .userlist button { width: 100%; text-align: left; padding: 11px 2px; border: 0; background: none; font: inherit; cursor: pointer; } .userlist button:hover { background: var(--accent-quiet); } .userlist .u-name { font-weight: 600; font-size: 13px; } .userlist .u-meta { font-size: 11.5px; color: var(--faint); margin-top: 1px; } @media (prefers-reduced-motion: no-preference) { .content { animation: fadein 150ms ease-out; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* ---------- form fields (additive — not part of the original locked spec, which only had button-list dev-login; needed for a real password form and for company/address/contact/document create-edit forms) ---------- */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 5px; } .field-input, .authbox input[type="text"], .authbox input[type="email"], .authbox input[type="password"] { width: 100%; border: 1px solid var(--mist); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; padding: 7px 10px; } .field-input:focus, .authbox input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } select.field-input { appearance: auto; } textarea.field-input { resize: vertical; } .field .errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: var(--brick); font-size: 11.5px; } .field .helptext { color: var(--faint); font-size: 11.5px; margin-top: 4px; } .form-errors { color: var(--brick); font-size: 12.5px; margin-bottom: 14px; } .formactions { display: flex; gap: 10px; margin-top: 20px; } /* ---------- license banner (additive — grace/trial warnings) ---------- */ .license-banner { padding: 8px 28px; font-size: 12.5px; color: var(--amber); background: var(--surface); border-bottom: 1px solid var(--mist); } .license-banner a { white-space: nowrap; } /* ---------- notice banner (additive — generic; calendar due/overdue today) ---------- */ .notice-banner { padding: 8px 28px; font-size: 12.5px; color: var(--amber); background: var(--surface); border-bottom: 1px solid var(--mist); } .notice-banner.urgent { color: var(--brick); } .notice-banner a { white-space: nowrap; } /* ---------- flash messages (additive — django.contrib.messages) ---------- */ .flash-messages { padding: 0 28px; } .flash { padding: 8px 0; font-size: 12.5px; color: var(--moss); border-bottom: 1px solid var(--mist); } .flash.warning { color: var(--amber); } .flash.error { color: var(--brick); } /* ---------- checklist (additive — catalog-style checkbox lists, e.g. the License Console's "Issue license" plan/add-ons picker) ---------- */ .checklist { border-top: 1px solid var(--mist); } .checklist-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--mist); font-size: 13px; cursor: pointer; } .checklist-row input[type="checkbox"] { flex: 0 0 auto; } /* .field label (above) targets every descendant