/* Olly — warm orange branding (HABI Controls design tokens, shared with Tally & Sally) */ :root { color-scheme: light; --page: #f8f2e6; /* warm cream page */ --surface: #fffdf8; /* warm white cards */ --cream: #fbefd5; /* brand cream */ --ink: #33281f; /* brand dark brown */ --ink-2: #5f5244; --muted: #94897a; --grid: #ece3d2; --baseline: #d9cdb6; --border: rgba(51, 40, 31, 0.10); --brand: #f4a259; /* brand orange */ --brand-hover: #ef9440; --brand-deep: #b96712; /* readable orange for links/active text */ --series-1: #cf7419; --good: #1b9e4b; --good-soft: #e4f4e6; --good-text: #14713a; --danger: #ec221f; /* brand red */ --purple: #7c5cbf; --purple-soft: #efe9f9; --blue: #2673b4; --blue-soft: #e3eff9; --amber-soft: #fdeeda; --amber-text: #9a5b0d; --radius: 14px; --shadow: 0 1px 2px rgba(51,40,31,.05), 0 6px 18px rgba(51,40,31,.06); --font-head: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --font-body: "IBM Plex Sans", Calibri, "Segoe UI", system-ui, sans-serif; } /* Theme: data-theme on — "auto" (default, follows the system), "light", "dark" */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --page: #241e15; --surface: #31291d; --cream: #3f3423; --ink: #faf3e6; --ink-2: #dbcfb8; --muted: #a89a83; --grid: #473b27; --baseline: #60513a; --border: rgba(250, 243, 230, 0.13); --brand: #f4a259; --brand-hover: #f7b276; --brand-deep: #f6b06e; --series-1: #f4a259; --good: #3fbd68; --good-soft: #2b3d2c; --good-text: #74d696; --danger: #ff6157; --purple: #b39ae0; --purple-soft: #3a3149; --blue: #6db1e8; --blue-soft: #263a4c; --amber-soft: #46351d; --amber-text: #f0bd7f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.20), 0 6px 20px rgba(0, 0, 0, 0.16); } :root:not([data-theme="light"]) body { background: radial-gradient(1100px 540px at 78% -12%, color-mix(in srgb, var(--brand) 10%, transparent), transparent), radial-gradient(800px 400px at 4% 112%, color-mix(in srgb, var(--brand) 5%, transparent), transparent), var(--page); background-attachment: fixed; } } :root[data-theme="dark"] { color-scheme: dark; --page: #241e15; --surface: #31291d; --cream: #3f3423; --ink: #faf3e6; --ink-2: #dbcfb8; --muted: #a89a83; --grid: #473b27; --baseline: #60513a; --border: rgba(250, 243, 230, 0.13); --brand: #f4a259; --brand-hover: #f7b276; --brand-deep: #f6b06e; --series-1: #f4a259; --good: #3fbd68; --good-soft: #2b3d2c; --good-text: #74d696; --danger: #ff6157; --purple: #b39ae0; --purple-soft: #3a3149; --blue: #6db1e8; --blue-soft: #263a4c; --amber-soft: #46351d; --amber-text: #f0bd7f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.20), 0 6px 20px rgba(0, 0, 0, 0.16); } :root[data-theme="dark"] body { background: radial-gradient(1100px 540px at 78% -12%, color-mix(in srgb, var(--brand) 10%, transparent), transparent), radial-gradient(800px 400px at 4% 112%, color-mix(in srgb, var(--brand) 5%, transparent), transparent), var(--page); background-attachment: fixed; } * { box-sizing: border-box; } /* ---------- brand scrollbars ---------- */ * { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-hover); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--page); color: var(--ink); font-size: 15px; line-height: 1.5; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: var(--ink); } select, option, optgroup { background: var(--surface); color: var(--ink); } h1, h2, .brand, .tile .value { font-family: var(--font-head); } /* ---------- shell ---------- */ .shell { display: none; min-height: 100vh; } .shell.visible { display: flex; flex-direction: column; } .shell main { flex: 1; width: 100%; } .topbar { display: flex; align-items: center; gap: 22px; padding: 0 28px; height: 62px; background: var(--surface); border-bottom: 2px solid var(--brand); position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .brand-dot { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), #e08a3c); display: inline-flex; align-items: center; justify-content: center; flex: none; } .brand-dot svg { display: block; } .brand .sub-name { color: var(--muted); font-weight: 500; font-size: 13px; } .topbar .spacer { flex: 1; } .topbar .who { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 13.5px; } nav.tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; } nav.tabs::-webkit-scrollbar { display: none; } nav.tabs button { background: none; border: 0; padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-family: var(--font-head); white-space: nowrap; flex: none; } nav.tabs button:hover { background: var(--cream); color: var(--ink); } nav.tabs button.active { background: var(--cream); color: var(--brand-deep); font-weight: 650; } .view { display: none; } .view.visible { display: block; } .view-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } main { max-width: 1280px; margin: 0 auto; padding: 28px; } h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: -0.01em; } .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; } h2 { font-size: 15px; font-weight: 650; margin: 0 0 14px; } /* ---------- cards, tiles, buttons ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); } .grid { display: grid; gap: 16px; } .grid.tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; } .tile { border-top: 3px solid var(--brand); } .tile .label { color: var(--ink-2); font-size: 13px; margin-bottom: 6px; } .tile .value { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } .tile .value small { font-size: 13px; color: var(--muted); font-weight: 500; } .btn { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: 8px 16px; font-weight: 550; font-family: var(--font-head); transition: background .12s, border-color .12s; } .btn:hover { background: var(--cream); } .btn.primary { background: var(--brand); border-color: var(--brand); color: #33281f; font-weight: 650; } .btn.primary:hover { background: var(--brand-hover); } .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } .btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); } .btn.small { padding: 5px 11px; font-size: 13px; border-radius: 8px; } .btn.ghost { border-color: transparent; background: none; color: var(--ink-2); } .btn.ghost:hover { background: var(--cream); color: var(--ink); } .btn:disabled { opacity: .5; cursor: not-allowed; } .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .toolbar .right { margin-left: auto; display: flex; gap: 8px; } /* ---------- login ---------- */ .login-wrap { display: none; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; } .login-wrap.visible { display: flex; } .login-card { width: 380px; max-width: 100%; } .login-card .brand { margin-bottom: 6px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; font-weight: 550; } .field input, .field select, .field textarea { width: 100%; background: var(--page); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); border-color: var(--brand); } .field textarea { resize: vertical; min-height: 70px; } .error-text { color: var(--danger); font-size: 13.5px; min-height: 20px; margin-top: 10px; } /* ---------- org tree canvas (Figma-style): drag to pan, Ctrl+scroll to zoom. The chart never crops or scrolls sideways — it starts fitted. */ .canvas-wrap { position: relative; padding: 0; overflow: hidden; } .canvas-viewport { position: relative; overflow: hidden; height: 64vh; min-height: 420px; cursor: grab; touch-action: none; /* dragging must never start a text selection */ user-select: none; -webkit-user-select: none; } .canvas-viewport.grabbing { cursor: grabbing; } .canvas-viewport .tree { position: absolute; top: 0; left: 0; width: max-content; transform-origin: 0 0; will-change: transform; } .canvas-controls { position: absolute; right: 14px; bottom: 14px; z-index: 5; display: flex; gap: 2px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px 5px; box-shadow: var(--shadow); } .canvas-controls .zoom-pct { font-size: 12px; color: var(--ink-2); min-width: 42px; text-align: center; font-family: var(--font-head); } .canvas-hint { position: absolute; left: 14px; bottom: 14px; z-index: 5; font-size: 11.5px; color: var(--muted); background: color-mix(in srgb, var(--surface) 82%, transparent); padding: 4px 10px; border-radius: 8px; pointer-events: none; } .tree ul { padding-left: 0; margin: 0; display: flex; justify-content: flex-start; } .tree li { list-style: none; position: relative; padding: 26px 10px 0; display: flex; flex-direction: column; align-items: center; } .tree li::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 26px; background: var(--baseline); } .tree > ul > li { padding-top: 0; } .tree > ul > li::before { display: none; } .tree li::after { content: ''; position: absolute; top: 0; height: 2px; background: var(--baseline); } .tree li:not(:only-child)::after { left: 0; right: 0; } .tree li:first-child::after { left: 50%; } .tree li:last-child::after { right: 50%; } .tree li:only-child::after { display: none; } /* Gap + parent stub: the children's rail floats clear of the parent card, a short line drops from the parent down to the rail, and each child's drop lands cleanly on the middle of its card — no lines hugging boxes. */ .tree li ul { position: relative; margin-top: 26px; } .tree li ul::before { content: ''; position: absolute; top: -26px; left: 50%; width: 2px; margin-left: -1px; height: 26px; background: var(--baseline); } .node { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--good); border-radius: 12px; padding: 11px 15px; min-width: 175px; max-width: 225px; cursor: pointer; box-shadow: var(--shadow); transition: transform .12s, border-color .12s; text-align: left; } .node:hover { transform: translateY(-2px); border-color: var(--brand); } .node.sel { outline: 2px solid var(--brand); } .node .nm { font-weight: 650; font-size: 14px; font-family: var(--font-head); } .node .rl { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; } .node .meta { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; } .node .cost { font-size: 11.5px; color: var(--muted); } .node.st-hiring { border-left-color: var(--brand); } .node.st-planned { border-left-color: var(--danger); } .node.st-outsourced { border-left-color: var(--purple); border-style: dashed; border-left-style: solid; } .node.st-advisor { border-left-color: var(--blue); border-style: dashed; border-left-style: solid; } /* supplier statuses */ .node.st-qualified { border-left-color: var(--good); } .node.st-approved { border-left-color: var(--blue); } .node.st-evaluating { border-left-color: var(--brand); } .node.st-backup { border-left-color: var(--purple); border-style: dashed; border-left-style: solid; } .node.st-dropped { border-left-color: var(--danger); opacity: .65; } .node.st-company { border-left-color: var(--ink-2); } .node .sup-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; } .node .risk { color: var(--danger); font-weight: 650; } .badge { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 650; text-transform: uppercase; letter-spacing: .4px; font-family: var(--font-head); } .b-active { background: var(--good-soft); color: var(--good-text); } .b-hiring { background: var(--amber-soft); color: var(--amber-text); } .b-planned { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); } .b-outsourced { background: var(--purple-soft); color: var(--purple); } .b-advisor { background: var(--blue-soft); color: var(--blue); } .b-qualified { background: var(--good-soft); color: var(--good-text); } .b-approved { background: var(--blue-soft); color: var(--blue); } .b-evaluating { background: var(--amber-soft); color: var(--amber-text); } .b-backup { background: var(--purple-soft); color: var(--purple); } .b-dropped { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); } .b-company { background: var(--cream); color: var(--ink-2); } /* ---------- layout: tree + side panel ---------- */ .org-layout { display: flex; gap: 16px; align-items: flex-start; } .org-main { flex: 1; min-width: 0; } .side-panel { width: 330px; flex: none; position: sticky; top: 78px; display: none; } .side-panel.open { display: block; } .side-panel h2 { display: flex; align-items: center; justify-content: space-between; } .side-panel .prow, .prow { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } @media (max-width: 900px) { .org-layout { flex-direction: column; } .side-panel { width: 100%; position: static; } } /* ---------- legend ---------- */ .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin: 4px 0 0; } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } /* ---------- checklists & calendar ---------- */ .cl-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--grid); } .cl-item:last-child { border-bottom: 0; } .cl-check { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid var(--baseline); background: none; color: transparent; font-size: 13px; line-height: 1; padding: 0; } .cl-check.done { background: var(--good); border-color: var(--good); color: #fff; } .cl-item .t { flex: 1; } .cl-item .t.done { text-decoration: line-through; color: var(--muted); } .cl-add { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); } .cl-add input { flex: 1; background: var(--page); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 14px; } .cl-add input:focus { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); border-color: var(--brand); } .cl-add input::placeholder { color: var(--muted); } .kd-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grid); } .kd-row:last-child { border-bottom: 0; } .kd-date { font-family: var(--font-head); font-weight: 650; min-width: 92px; } .kd-row .t { flex: 1; } .kd-row .t .muted { font-size: 12.5px; } /* ---------- modal ---------- */ .modal-back { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(30, 22, 12, .45); align-items: center; justify-content: center; padding: 20px; } .modal-back.open { display: flex; } .modal { width: 540px; max-width: 100%; max-height: 90vh; overflow-y: auto; overflow-x: hidden; } .modal h2 { margin-bottom: 16px; } /* ---------- tables (team) ---------- */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; color: var(--ink-2); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 2px solid var(--grid); } td { padding: 9px 10px; border-bottom: 1px solid var(--grid); } tr:last-child td { border-bottom: 0; } .muted { color: var(--muted); } .table-scroll { overflow-x: auto; } .vscroll { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; } .vscroll th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: 0 1px 0 var(--grid); } .toolbar select, .view-head select { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-size: 13px; font-family: var(--font-head); max-width: 260px; } /* ---------- segmented control (theme picker) ---------- */ .seg { display: inline-flex; background: var(--surface); border: 1px solid var(--grid); border-radius: 10px; padding: 3px; gap: 2px; } .seg button { border: 0; background: none; padding: 6px 14px; border-radius: 8px; color: var(--ink-2); font-weight: 550; font-family: var(--font-head); font-size: 13.5px; } .seg button.active { background: var(--brand); color: #33281f; font-weight: 650; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ---------- settings ---------- */ #btn-settings { color: var(--brand-deep); font-weight: 650; } #btn-settings:hover { color: var(--brand-deep); background: var(--cream); border-color: var(--baseline); } .settings-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--grid); color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; text-align: center; } .settings-foot a { color: var(--brand-deep); text-decoration: none; } .settings-foot a:hover { text-decoration: underline; } .settings-foot .dotsep { opacity: .6; } .about-box { display: grid; grid-template-columns: 84px 1fr; row-gap: 7px; column-gap: 14px; font-size: 12.5px; line-height: 1.45; align-items: baseline; } .about-box .ab-l { color: var(--muted); font-weight: 600; font-family: var(--font-head); } .about-box .ab-v { color: var(--ink-2); } .about-box strong { color: var(--ink); } .about-box a { color: var(--brand-deep); text-decoration: none; } .about-box a:hover { text-decoration: underline; } /* ---------- app footer (sticks to the bottom: .shell is a flex column and main has flex:1, so this always sits at the page's end) ---------- */ .app-foot { padding: 16px 28px 22px; margin-top: 8px; border-top: 1px solid var(--grid); color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; text-align: center; font-family: var(--font-head); } .app-foot a { color: var(--brand-deep); text-decoration: none; } .app-foot a:hover { text-decoration: underline; } .app-foot .dotsep { opacity: .6; } /* ---------- toast ---------- */ #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--page); padding: 10px 18px; border-radius: 10px; font-size: 13.5px; z-index: 60; display: none; } /* ---------- print: dedicated light rendering. Browsers do not print background colors by default, so printing the themed on-screen chart comes out blank — instead the print handler fills #print-area with a copy of the chart styled in print-safe colors. ---------- */ #print-area { display: none; } @media print { @page { size: A4 landscape; margin: 12mm; } html, body { background: #fff !important; } .shell, .login-wrap, #stale-banner, .modal-back, #toast { display: none !important; } #print-area { display: block !important; font-family: var(--font-head); } #print-area .p-title { font-size: 20px; font-weight: 700; color: #000; margin: 0 0 2px; } #print-area .p-sub { font-size: 11px; color: #555; margin: 0 0 16px; } /* connector lines drawn as BORDERS — backgrounds are skipped when printing, which is why the lines were invisible before */ #print-area .tree li::before, #print-area .tree li ul::before { background: none !important; width: 0 !important; border-left: 2px solid #999; } #print-area .tree li::after { background: none !important; height: 0 !important; border-top: 2px solid #999; } #print-area .p-stats { display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; } #print-area .p-stat { border: 1px solid #bbb; border-top: 3px solid #e08a3c; border-radius: 8px; padding: 7px 14px; } #print-area .p-stat .l { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: .4px; } #print-area .p-stat .v { font-size: 15px; font-weight: 700; color: #000; } #print-area .node { background: #fff !important; color: #000 !important; border: 1px solid #aaa; box-shadow: none; cursor: default; } #print-area .node .nm { color: #000; } #print-area .node .rl { color: #333; } #print-area .node .cost { color: #555; } #print-area .badge { background: #fff !important; border: 1px solid #999; color: #333 !important; } #print-area .node.st-active { border-left: 4px solid #1b9e4b; } #print-area .node.st-hiring { border-left: 4px solid #e08a3c; } #print-area .node.st-planned { border-left: 4px solid #cc3333; } #print-area .node.st-outsourced { border-left: 4px solid #7c5cbf; border-style: dashed; border-left-style: solid; } #print-area .node.st-advisor { border-left: 4px solid #2673b4; border-style: dashed; border-left-style: solid; } #print-area .node.st-qualified { border-left: 4px solid #1b9e4b; } #print-area .node.st-approved { border-left: 4px solid #2673b4; } #print-area .node.st-evaluating { border-left: 4px solid #e08a3c; } #print-area .node.st-backup { border-left: 4px solid #7c5cbf; } #print-area .node.st-dropped { border-left: 4px solid #cc3333; } #print-area .node.st-company { border-left: 4px solid #555; } #print-area .node .sup-meta { color: #555; } #print-area .node .risk { color: #cc3333; } }