/* =========================================================================== Company Hub — plain, hand-written CSS using BEM naming (cadence convention, ADR 0005). No Tailwind, no build step. Deep-green "uButler portal" brand (matching the CEO's demo palette) so the Hub reads as its own app next to cadence's teal. =========================================================================== */ /* Self-hosted variable fonts (no CDN; served from our own origin — ADR 0001). Raleway heads the UI; Inter carries the body/UI text. */ @font-face { font-family: "Raleway"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/raleway.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/inter.woff2") format("woff2"); } :root { color-scheme: light; --ink: #14231A; --canvas: #F6F7F3; /* warm off-white (demo #faf9f6) */ --brand: #2F5C41; /* B600 */ --brand-dark: #27503A; /* B700 — primary hover / chip text */ --brand-soft: #DCEBE0; /* B100 — soft green tint */ --brand-tint: #F0F5F1; /* B50 — lightest, cooler green-blue (demo structure fills) */ --muted: #5C6B60; --line: #E2E7E1; --white: #FFFFFF; --table-head-bg: #F9FAFB; /* Tailwind gray-50 — table header ROW background */ --table-head-fg: rgb(107 114 128); /* Tailwind gray-500 — table header TEXT (on gray-50) */ --table-subhead-fg: rgb(156 163 175); /* Tailwind gray-400 — secondary/grouping-row TEXT */ --danger: #DC2626; --danger-soft: #FDECEC; --ok: #15803D; --ok-soft: #DCFCE7; /* The sidebar is a fixed dark-green panel in BOTH themes (demo B800). */ --inverse: #204631; /* B800 */ --inverse-ink: #FFFFFF; /* Sidebar nav tokens (fixed across themes). */ --nav-fg: #DCEBE0; /* B100 — inactive item text */ --nav-active: #2F5C41; /* B600 — active pill */ --nav-head: #7CAF92; /* brightened B400 — section headers */ --nav-accent: #A7D2B8; /* light green for aux hovers */ --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(18, 22, 42, .06), 0 1px 3px rgba(18, 22, 42, .04); --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: "Raleway", var(--font-sans); --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Raleway heads the UI; body/UI text stays Inter. */ h1, h2, h3, h4, h5, h6, .page-head__title, .card__title, .section-title, .brand__name { font-family: var(--font-head); } /* Dark palette — same variable names, second set of values (ADR 0017 pattern); theme.js sets before first paint. */ [data-theme="dark"] { color-scheme: dark; --ink: #E4EAE5; --canvas: #0E140F; --brand: #5F9E77; /* brighter green for dark surfaces */ --brand-dark: #86C39D; /* lighter — hover / chip text on dark */ --brand-soft: #1D3A2A; --brand-tint: #17281E; /* B50 equivalent on dark surfaces */ --muted: #93A297; --line: #24322A; --white: #16211A; --table-head-bg: #1C2A22; /* header row: a touch lighter than the card on dark */ --table-head-fg: #9CA3AF; /* gray-400 — table header text on dark */ --table-subhead-fg: #6B7280; /* gray-500 — grouping-row text on dark */ --danger: #F87171; --danger-soft: #3A1A1A; --ok: #6EE7A0; --ok-soft: #12331F; /* Sidebar deepens slightly in dark mode but stays green. */ --inverse: #16301E; --inverse-ink: #E4EAE5; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body.app { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--canvas); line-height: 1.45; display: flex; min-height: 100vh; } a { color: inherit; text-decoration: none; } code { font-family: var(--font-mono); font-size: .85em; background: rgba(18, 22, 42, .05); padding: .05em .35em; border-radius: 4px; } /* --- Sidebar --------------------------------------------------------------- */ .sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; width: 260px; flex-shrink: 0; box-sizing: border-box; background: var(--inverse); color: var(--inverse-ink); display: flex; flex-direction: column; gap: 8px; padding: 16px 12px; } .sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.01em; padding: 6px 8px; } /* The uButler emblem (white) sits directly on the dark-green sidebar. */ .brand__logo { width: 24px; height: auto; display: block; flex: none; } /* On light surfaces (login / no-access) the white emblem needs a green badge. */ .brand__badge { display: inline-flex; align-items: center; justify-content: center; background: #204631; border-radius: 11px; } .brand__badge img { width: 62%; height: auto; display: block; } .brand__badge--lg { width: 52px; height: 52px; } .nav { display: flex; flex-direction: column; gap: 2px; font-size: 14px; margin-top: 6px; overflow-y: auto; } .nav__sep { height: 1px; background: rgba(255, 255, 255, .10); margin: 8px 10px; } .nav__group { display: flex; flex-direction: column; gap: 2px; } .nav__group + .nav__group { margin-top: 12px; } .nav__grouphead { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--nav-head); padding: 2px 12px 3px; } .nav__tab { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--nav-fg); transition: background .15s, color .15s; } .nav__tab .ico { opacity: .85; } .nav__tab:hover { color: #fff; background: rgba(255, 255, 255, .07); } .nav__tab--active, .nav__tab--active:hover { background: var(--nav-active); color: #fff; font-weight: 500; } /* Brand row: logo/name on the left, the notifications bell on the right. */ .brandbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .brandbar__actions { display: flex; align-items: center; gap: 4px; } .bell { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--nav-fg); transition: background .15s, color .15s; /* reset so a