/* RE-EXTRACTED from infinity-dispatch's public/css/ihg.css, 2026-07-18 (ORDER #164 D0 — planning's copy had drifted stale since July 6: still using unicode/emoji chip glyphs where dispatch had already replaced them with real pictogram PNGs, per #57's live-proven work). THE DISPATCH REPO REMAINS CANON; re-extract after any ihg.css change there — same convention this file's provenance comment has always stated. */ /* ============================================================ IHG Ops Design Language — ihg.css v1.3 (Fable 5, July 2026) The OPS BASE layer. Dispatch admin, boards, and crew live here. Landing/event skins live in venue-themes.css (never mixed into ops). PALETTE SOURCE OF TRUTH: brand-tokens.json -> default_ih accent #BD574E · gray #6D6E71 · dark #000000 · accentSoft #F5E7E5 Dark ops SURFACE = warm charcoal #211E1B (Mimi's pick; brand "dark" #000000 is reserved for landing skins — a lifted charcoal reads better on 10-foot boards). RULES: - No inline hex on migrated screens — use these tokens. - #BD574E is the IDENTITY STRIPE only (header underline, focus rings, selected-tab markers). NEVER a button or chip fill (too close to the clay alert color). Primary buttons = --ihg-black. Alerts = --ihg-clay. - Component classes (.card/.btn/.table/.chip...) are SCOPED under .ihg so this file is inert until a screen opts in with class="ihg" on . The :root tokens are global and harmless (definitions only). This scoping is a deviation from the verbatim V0 spec — see REPORT. ============================================================ */ :root { /* ---- Brand core (IH master brand) ---- */ --ihg-black: #1A1A1A; /* primary button fill, strong text */ --ihg-ink: #1F1C1A; /* body text on light */ --ihg-charcoal: #211E1B; /* dark ops surface: boards, headers (warm) */ --ihg-charcoal-soft: #2B2723;/* card surface on dark boards */ --ihg-cream: #FAF7F2; /* light surface background (page) */ --ihg-surface: #FFFFFF; /* white card/sheet surface on light screens */ --ihg-muted: #6D6E71; /* secondary text (brand gray) */ /* ---- Identity accent (STRIPE ONLY, never a fill) ---- */ --ihg-accent: #BD574E; /* IH accent — header underline, focus, active tab */ --ihg-accent-soft: #F5E7E5; /* accentSoft — faint selected-row wash */ /* ---- Functional status colors (semantics are LAW, never re-skinned) ---- */ --ihg-teal: #2D5A7B; --ihg-teal-dark: #234961; --ihg-teal-tint: #E7EEF3; /* departed */ --ihg-sage: #3E7050; --ihg-sage-dark: #325C41; --ihg-sage-tint: #E9F1EC; /* arrived/complete */ --ihg-clay: #8A4832; --ihg-clay-dark: #6E3927; --ihg-clay-tint: #F5EAE5; /* alert/killed (retuned darker, away from #BD574E) */ --ihg-amber: #B07A2E; --ihg-amber-dark: #7F5A1E; --ihg-amber-tint: #F3E9D6; /* loading / pre-set / warnings */ --ihg-graphite: #565559;--ihg-graphite-tint: #EFEEEC; /* ready (neutral outline) */ /* ---- Lines ---- */ --ihg-line: #E3DED4; /* borders on light */ --ihg-line-dark: #3A3A38; /* borders on dark */ /* ---- Type ---- */ --ihg-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ihg-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* times, counts, truck IDs ONLY */ /* ---- Per-lobe accent (Dispatch uses the IH stripe) ---- */ --lens-accent: var(--ihg-accent); --ihg-radius: 8px; --ihg-shadow: 0 1px 3px rgba(26,26,26,.10), 0 4px 14px rgba(26,26,26,.06); /* ---- DEPRECATED aliases (back-compat only — do NOT use in new work) ---- */ --ihg-navy: var(--ihg-charcoal); /* was #1A1A2E navy; retired */ --ihg-navy-soft: var(--ihg-charcoal-soft); --ihg-terracotta: var(--ihg-clay); /* alert now maps to clay */ --ihg-terra-dark: var(--ihg-clay-dark); --ihg-terra-tint: var(--ihg-clay-tint); --ihg-gold: #9B8A5A; /* champagne = Cherokee Dock hue, not IH; use --ihg-amber */ --ihg-gold-dark: #7F714A; --ihg-gold-tint: #F3F0E7; } /* ---------- Base (opt-in: add class="ihg" to ) ---------- */ body.ihg { font-family: var(--ihg-font-ui); color: var(--ihg-ink); background: var(--ihg-cream); } .ihg .mono, .ihg-mono { font-family: var(--ihg-font-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* ---------- Header bar: lobe name left, clock right, IH stripe under ---------- */ .ihg-header { display:flex; align-items:center; gap:12px; padding:10px 16px; background: var(--ihg-charcoal); color:#fff; border-bottom: 3px solid var(--lens-accent); } .ihg-header .lobe-logo { height:22px; width:auto; display:block; } .ihg-header .lobe { font-weight:700; font-size:16px; letter-spacing:.02em; } .ihg-header .clock { margin-left:auto; font-family: var(--ihg-font-mono); font-size:15px; opacity:.92; } /* ---------- Status chips: color + icon + word, never color alone ---------- */ .ihg .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600; border:1.5px solid transparent; line-height:1.5; white-space:nowrap; } .ihg .chip::before { font-size:11px; } /* ORDER #57 AMEND (July 11, Mimi+Fable diagnosis): the icon slot was sized for flat glyph-scale marks (13px), but the actual pictograms are detailed illustrations that go illegible at that size — bumped to 22-24px across every chip variant below. `.ihg.board .chip` (TV boards) inherits this same base rule since no separate board-specific icon size exists to override — boards stay otherwise untouched per the standing "TV boards excluded" law; this is shared infra, not new board work. */ .ihg .chip-scheduled { background:#EFEDE8; color:var(--ihg-muted); border-color:var(--ihg-line); } .ihg .chip-scheduled::before{content:"";display:inline-block;width:23px;height:23px;margin-right:6px;vertical-align:-6px;background:url(/img/picto/status-scheduled.png) center/contain no-repeat;} .ihg .chip-loading { background:var(--ihg-amber-tint); color:var(--ihg-amber-dark); border-color:var(--ihg-amber); } .ihg .chip-loading::before{content:"";display:inline-block;width:23px;height:23px;margin-right:6px;vertical-align:-6px;background:url(/img/picto/status-loading.png) center/contain no-repeat;} .ihg .chip-ready { background:var(--ihg-graphite-tint); color:var(--ihg-graphite); border-color:var(--ihg-graphite); } .ihg .chip-ready::before{content:"";display:inline-block;width:23px;height:23px;margin-right:6px;vertical-align:-6px;background:url(/img/picto/status-ready.png) center/contain no-repeat;} .ihg .chip-departed { background:var(--ihg-teal); color:#fff; } /* ORDER #57, Mimi ruling (2026-07-10): white icon variant — reuses the SAME status-departed.png every light-bg chip/badge already uses, turned solid white via filter (no separate white-variant asset shipped; the source PNGs are full-color ink illustrations, and brightness(0) invert(1) reliably produces a legible white silhouette on this dark fill without a new file). */ .ihg .chip-departed::before{content:"";display:inline-block;width:23px;height:23px;margin-right:6px;vertical-align:-6px;background:url(/img/picto/status-departed.png) center/contain no-repeat;filter:brightness(0) invert(1);} .ihg .chip-arrived { background:var(--ihg-sage-tint); color:var(--ihg-sage-dark); border-color:var(--ihg-sage); } .ihg .chip-arrived::before{content:"";display:inline-block;width:23px;height:23px;margin-right:6px;vertical-align:-6px;background:url(/img/picto/status-arrived.png) center/contain no-repeat;} .ihg .chip-complete { background:var(--ihg-sage); color:#fff; } /* ORDER #57, Mimi ruling: white icon variant — same technique as chip-departed above. */ .ihg .chip-complete::before{content:"";display:inline-block;width:23px;height:23px;margin-right:6px;vertical-align:-6px;background:url(/img/picto/status-complete.png) center/contain no-repeat;filter:brightness(0) invert(1);} .ihg .chip-killed { background:var(--ihg-clay-tint); color:var(--ihg-clay-dark); border-color:var(--ihg-clay); text-decoration:line-through; } .ihg .chip-killed::before{content:"";display:inline-block;width:23px;height:23px;margin-right:6px;vertical-align:-6px;background:url(/img/picto/status-killed.png) center/contain no-repeat;} .ihg .chip-preset { background:var(--ihg-amber-tint); color:var(--ihg-amber-dark); border-color:var(--ihg-amber); } .ihg .chip-preset::before{content:"";display:inline-block;width:23px;height:23px;margin-right:6px;vertical-align:-6px;background:url(/img/picto/status-preset.png) center/contain no-repeat;} .ihg .chip-alert { background:var(--ihg-clay); color:#fff; } /* ORDER #57, Mimi ruling: white icon variant, same technique. Reuses alert-general.png (the same icon already wired to .badge-late). */ .ihg .chip-alert::before{content:"";display:inline-block;width:23px;height:23px;margin-right:6px;vertical-align:-6px;background:url(/img/picto/alert-general.png) center/contain no-repeat;filter:brightness(0) invert(1);} /* Dark-board chip variants (boards add class="board") */ .ihg.board .chip { font-size:16px; padding:5px 14px; } .ihg.board .chip-scheduled { background:var(--ihg-charcoal-soft); color:#B8B8B0; border-color:var(--ihg-line-dark); } /* ---------- Buttons ---------- */ .ihg .btn { font-family:var(--ihg-font-ui); font-weight:600; font-size:14px; padding:8px 16px; border-radius:var(--ihg-radius); border:1.5px solid transparent; cursor:pointer; transition:background .15s; } .ihg .btn-primary { background:var(--ihg-black); color:#fff; } .ihg .btn-primary:hover { background:#000; } .ihg .btn-quiet { background:transparent; color:var(--ihg-ink); border-color:var(--ihg-line); } .ihg .btn-quiet:hover { background:var(--ihg-cream); } .ihg .btn-danger { background:var(--ihg-clay); color:#fff; } .ihg .btn-danger:hover { background:var(--ihg-clay-dark); } .ihg .btn-success { background:var(--ihg-sage); color:#fff; } .ihg .btn:disabled { opacity:.45; cursor:not-allowed; } .ihg .btn:focus-visible { outline:2px solid var(--ihg-accent); outline-offset:2px; } /* ---------- Cards & tables ---------- */ .ihg .card { background:#fff; border:1px solid var(--ihg-line); border-radius:var(--ihg-radius); box-shadow:var(--ihg-shadow); padding:14px 16px; } .ihg .card h3 { margin:0 0 8px; font-size:14px; font-weight:700; color:var(--ihg-ink); } .ihg .table { width:100%; border-collapse:collapse; font-size:13.5px; } .ihg .table th { text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ihg-muted); padding:8px 10px; border-bottom:2px solid var(--ihg-line); } .ihg .table td { padding:9px 10px; border-bottom:1px solid var(--ihg-line); } .ihg .table td.num, .ihg .table td.time { font-family:var(--ihg-font-mono); font-variant-numeric:tabular-nums; } /* ---------- Tabs: selected marker uses the IH stripe ---------- */ .ihg .tab.active, .ihg .tab[aria-selected="true"] { border-bottom:2px solid var(--ihg-accent); color:var(--ihg-ink); } /* ---------- Banners ---------- */ .ihg .banner-alert { background:var(--ihg-clay); color:#fff; padding:8px 16px; font-weight:600; } .ihg .banner-warn { background:var(--ihg-amber-tint); color:var(--ihg-amber-dark); border:1px solid var(--ihg-amber); padding:8px 16px; } /* ---------- Inputs: focus ring uses the IH stripe ---------- */ .ihg input:focus-visible, .ihg select:focus-visible, .ihg textarea:focus-visible { outline:2px solid var(--ihg-accent); outline-offset:1px; } /* ---------- Board pulse: only a just-changed row moves (60s cadence) ---------- */ @keyframes ihg-pulse { 0%{background:rgba(189,87,78,.30);} 100%{background:transparent;} } .ihg.board .row-changed { animation: ihg-pulse 1.6s ease-out 1; }