/* =========================================================================== 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. =========================================================================== */ :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 */ --muted: #5C6B60; --line: #E2E7E1; --white: #FFFFFF; --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-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* 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; --muted: #93A297; --line: #24322A; --white: #16211A; --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: 220px; 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: 8px; font-weight: 700; letter-spacing: -.01em; padding: 6px 8px; } .brand__mark { width: 26px; height: 26px; border-radius: 7px; background: #3E7A54; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .brand__mark--lg { width: 44px; height: 44px; font-size: 22px; border-radius: 11px; } .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; } .ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; } .user { display: flex; align-items: center; gap: 8px; font-size: 13px; } .user__avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } .user__name { color: #e2e3ef; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-toggle { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,.16); color: #c8cad9; border-radius: var(--radius-sm); padding: 7px 10px; } .theme-toggle:hover { border-color: var(--nav-accent); color: var(--nav-accent); } .theme-toggle__sun { display: none; } [data-theme="dark"] .theme-toggle__moon { display: none; } [data-theme="dark"] .theme-toggle__sun { display: flex; align-items: center; gap: 8px; } /* --- Layout ---------------------------------------------------------------- */ .main { flex: 1; min-width: 0; padding: 24px 28px; } .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .page-head__title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; } .page-head__sub { font-size: 14px; color: var(--muted); margin: 4px 0 0; } .wrap { max-width: 1080px; } .muted { color: var(--muted); } /* Sub-navigation — rounded-pill subtabs (matching the demo's SubTabs). */ .subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; } .subnav__tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; font-size: 13px; font-weight: 500; border-radius: 999px; color: var(--muted); background: var(--white); border: 1px solid var(--line); transition: background .15s, border-color .15s, color .15s; } .subnav__tab:hover { border-color: var(--brand); color: var(--brand); } .subnav__tab--active { color: #fff; background: var(--brand); border-color: var(--brand); } .subnav__tab--active:hover { color: #fff; } /* --- Cards ----------------------------------------------------------------- */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px; } .card__title { font-size: 15px; font-weight: 600; margin: 0 0 12px; } .card--empty { color: var(--muted); text-align: center; padding: 40px; } /* --- Buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .btn--sm { padding: 6px 10px; font-size: 13px; } .btn--block { width: 100%; } .btn--primary { background: var(--brand); color: #fff; } .btn--primary:hover { background: var(--brand-dark); } .btn--ghost { background: transparent; border-color: rgba(255,255,255,.25); color: #e6efe9; } .btn--ghost:hover { border-color: var(--nav-accent); color: var(--nav-accent); } .btn--soft { background: var(--white); border-color: var(--line); color: var(--muted); } .btn--soft:hover { border-color: var(--brand); color: var(--brand); } .btn--google { background: var(--white); color: var(--ink); border-color: var(--line); } .btn--google:hover { border-color: #cbd0e0; } .btn__g { font-weight: 700; color: #4285F4; width: 20px; display: inline-flex; justify-content: center; } /* --- Forms ----------------------------------------------------------------- */ .field { display: block; margin-bottom: 14px; } .field__label { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; } .field__input, .field__select, .field__textarea { width: 100%; font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); } .field__textarea { min-height: 120px; resize: vertical; } .field__input:focus, .field__select:focus, .field__textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 14px; } .form-actions { display: flex; gap: 8px; margin-top: 4px; } /* --- Banners / alerts ------------------------------------------------------ */ .banner { border-radius: var(--radius); padding: 12px 14px; font-size: 14px; margin-bottom: 16px; } .banner--info { background: var(--brand-soft); border: 1px solid var(--line); color: var(--brand-dark); } .alert { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; margin-bottom: 14px; } .alert--error { background: var(--danger-soft); border: 1px solid #F4C7C7; color: var(--danger); } /* --- Login / no-access centered card --------------------------------------- */ .center-card { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .center-card__inner { width: 100%; max-width: 380px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: var(--shadow); text-align: center; } .center-card__brand { margin-bottom: 20px; } .center-card__brand .brand__mark--lg { margin: 0 auto 12px; } .center-card__title { font-size: 22px; font-weight: 700; margin: 0; } .center-card__subtitle { font-size: 13px; color: var(--muted); margin: 4px 0 0; } .center-card__note { font-size: 12px; color: var(--muted); margin: 16px 0 0; } .center-card form { text-align: left; } /* --- Hub tiles ------------------------------------------------------------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .tile { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; color: var(--ink); box-shadow: var(--shadow); transition: box-shadow .15s, border-color .15s, transform .15s; } .tile:hover { box-shadow: 0 6px 18px rgba(18,22,42,.10); border-color: var(--brand); transform: translateY(-1px); } .tile__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .tile__name { font-size: 16px; font-weight: 600; } .tile__desc { font-size: 13px; color: var(--muted); flex: 1; } .tile__go { font-size: 13px; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; } .tile--soft { background: var(--brand-soft); border-style: dashed; } /* --- Company page + team directory ----------------------------------------- */ .prose { font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; } .prose--empty { color: var(--muted); font-style: italic; } .directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .person { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); } .person__avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .person__name { font-weight: 600; font-size: 14px; } .person__role { font-size: 12.5px; color: var(--muted); } .person__bio { font-size: 12.5px; color: var(--muted); margin-top: 4px; } /* --- Permission / access matrix -------------------------------------------- */ .table-wrap { overflow: auto; } .perm { width: 100%; border-collapse: collapse; line-height: 1.45; } .perm th, .perm td { padding: 11px 10px; } .perm thead th { position: sticky; top: 0; z-index: 1; background: var(--white); box-shadow: inset 0 -1px 0 var(--line); } .perm__user { text-align: left; } .perm__caphead { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; white-space: nowrap; } .perm tbody tr { border-top: 1px solid var(--line); } .perm tbody tr:nth-child(even) { background: var(--canvas); } .perm tbody tr:hover { background: rgba(18, 22, 42, .05); } .perm__name { font-weight: 500; font-size: 14px; display: block; } .perm__email { font-size: 12px; color: var(--muted); } .perm__cell { text-align: center; } .permcell { width: 28px; height: 28px; border-radius: var(--radius-sm); border: none; cursor: pointer; font-size: 13px; background: #eceef5; color: #9aa1b4; } .permcell--on { background: var(--brand); color: #fff; } .permcell:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } [data-theme="dark"] .permcell { background: #22243c; } .badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); } .badge--muted { background: var(--brand-soft); color: var(--brand-dark); } .chip { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); } /* --- Roles viewer ---------------------------------------------------------- */ .roles { display: flex; flex-direction: column; gap: 12px; } .role { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); } .role__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .role__name { font-weight: 600; font-size: 15px; } .role__desc { font-size: 13px; color: var(--muted); margin: 4px 0 8px; } .role__perms { display: flex; flex-wrap: wrap; gap: 6px; } /* --- Office Chores rota ---------------------------------------------------- */ .rota { width: 100%; border-collapse: collapse; font-size: 13px; } .rota th, .rota td { padding: 7px 9px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; } .rota thead th { position: sticky; top: 0; z-index: 1; background: var(--white); box-shadow: inset 0 -1px 0 var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; } .rota tbody tr:hover { background: var(--canvas); } .rota__day { white-space: nowrap; font-weight: 600; } .rota__today { background: var(--brand-soft); } .rota__today:hover { background: var(--brand-soft); } .rota select.field__select { font-size: 12px; padding: 5px 6px; min-width: 130px; } .chore-cant { margin-top: 4px; } .chore-cant summary { cursor: pointer; font-size: 11px; color: var(--muted); } .chore-cant summary:hover { color: var(--brand); } .chore-flag { margin-top: 4px; font-size: 11px; color: #B4791A; } [data-theme="dark"] .chore-flag { color: #F0A03C; } /* --- Audit log ------------------------------------------------------------- */ .audit { list-style: none; margin: 0; padding: 0; } .audit__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; } .audit__row:first-child { border-top: none; } .audit__action { font-family: var(--font-mono); font-size: 12px; color: var(--brand); } .audit__target { color: var(--ink); } .audit__meta { margin-left: auto; font-size: 12px; color: var(--muted); } .audit__row--empty { color: var(--muted); } /* --- Organisation (team / positions / structure) --------------------------- */ .filters { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; } .filters__search { flex: 1 1 240px; min-width: 180px; } .chip--soft { background: var(--canvas); color: var(--muted); } .person__body { flex: 1; min-width: 0; } .person__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; } .person__name { display: flex; align-items: center; gap: 8px; } .person__edit { flex-shrink: 0; align-self: flex-start; } .field--check { flex-direction: row; align-items: center; gap: 8px; margin-top: 4px; } .field--check input { width: 16px; height: 16px; } /* Edit forms shared by the org pages. */ .org-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; } .org-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; } /* Reports-to tree. */ .orgtree { list-style: none; margin: 0; padding: 0; font-size: 13.5px; } .orgtree__row { padding: 4px 0; border-top: 1px solid var(--line); } .orgtree__row:first-child { border-top: none; } .orgtree__rail { color: var(--line); font-family: var(--font-mono); white-space: pre; } .orgtree__name { font-weight: 600; } /* Company structure cards. */ .struct { margin-bottom: 16px; } .struct__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .struct__name { font-size: 16px; font-weight: 600; margin: 0; } .struct__purpose { color: var(--muted); font-size: 13px; margin: 6px 0 0; } .struct__acc { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .struct__fns { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .struct__fn { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--canvas); } .struct__fnhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .struct__fnname { font-weight: 600; font-size: 14px; } .struct__fnpurpose { font-size: 12.5px; margin-top: 3px; } .struct__positions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pos-pill { display: inline-flex; gap: 6px; align-items: baseline; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink); } .pos-pill__who { color: var(--muted); font-size: 11px; } /* --- Dashboards ------------------------------------------------------------ */ .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; } .dash-card--wide { grid-column: 1 / -1; } .dash-grid .card { margin: 0; } .dash-inlineform { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .dash-add { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .dash-add summary { cursor: pointer; font-size: 13px; color: var(--brand); } .dash-add summary:hover { color: var(--brand-dark); } .eow { display: flex; gap: 12px; align-items: center; } .ann { padding: 10px 0; border-top: 1px solid var(--line); } .ann:first-of-type { border-top: none; } .ann__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ann__title { font-weight: 600; font-size: 14px; } .ann__del { margin-left: auto; } .ann__body { font-size: 13px; color: var(--muted); margin-top: 4px; white-space: pre-wrap; } .evt { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); } .evt:first-of-type { border-top: none; } .evt__body { flex: 1; min-width: 0; } .evt__title { font-weight: 600; font-size: 13.5px; } .bday { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; } .bday:first-of-type { border-top: none; } .bday__name { font-weight: 600; } .rep { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .rep:first-of-type { border-top: none; } .rep__name { font-weight: 600; } .cock-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .cock-goal { font-size: 14px; margin: 0 0 6px; } /* --- Personal tasks -------------------------------------------------------- */ .wrap--narrow { max-width: 760px; } .backlink { display: inline-block; margin-bottom: 8px; font-size: 13px; color: var(--muted); text-decoration: none; } .backlink:hover { color: var(--brand); } .tasklist { display: flex; flex-direction: column; gap: 8px; } .taskrow { display: flex; gap: 10px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); } .taskrow--overdue { border-left: 3px solid var(--danger); } .taskrow__today { display: flex; } .taskrow__body { flex: 1; min-width: 0; } .taskrow__title { font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; } .taskrow__title:hover { color: var(--brand); } .taskrow__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; } .task-due--over { color: var(--danger); font-weight: 600; } .star { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--line); padding: 0; } .star--on { color: #E5A200; } .star:hover { color: #E5A200; } .task-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .task-inline { display: flex; gap: 6px; align-items: center; } .comments { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .comment { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: var(--shadow); } .comment__head { display: flex; gap: 8px; align-items: baseline; font-size: 12px; } .comment__author { font-weight: 600; } .comment__body { font-size: 13.5px; margin-top: 4px; white-space: pre-wrap; } .comment-form { display: flex; flex-direction: column; gap: 6px; } /* --- Steering (KPIs / targets) --------------------------------------------- */ .kpistrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; } .kpicard { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); } .kpicard:hover { border-color: var(--brand); } .kpicard__name { font-size: 12px; color: var(--muted); } .kpicard__val { font-size: 20px; font-weight: 700; margin-top: 4px; display: flex; align-items: baseline; gap: 8px; } .kpicard__trend { font-size: 12px; font-weight: 600; } .kpicard__trend--good { color: var(--ok); } .kpicard__trend--bad { color: var(--danger); } .kpi-big { font-size: 26px; font-weight: 700; margin: 4px 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .kpi-big .kpicard__trend { font-size: 13px; } .progress { height: 10px; border-radius: 999px; background: var(--brand-soft); overflow: hidden; margin-top: 10px; } .progress__bar { height: 100%; background: var(--brand); border-radius: 999px; } /* --- Workflows / runs ------------------------------------------------------ */ .rejectbox { display: inline-block; } .rejectbox > summary { list-style: none; cursor: pointer; } .rejectbox > summary::-webkit-details-marker { display: none; } .rejectbox[open] > summary { margin-bottom: 6px; }