/* CIP Lifecycle Agent, shared stylesheet. Forked from the upstream Segerstrom design system. Layout and component utilities preserved verbatim; palette tokens swapped to CIP institutional navy and teal. Inline tailwind.config in each page mirrors these token values. Update both together. */ :root { --bg: #FFFFFF; --surface: #FFFFFF; --sidebar: #031631; --ink: #1B1B1E; --muted: #44474D; --action-black: #006A68; --action-black-hover: #005553; --hairline: #C5C6CE; --success-bg: #EEF5F1; --success-dot: #2E7D5A; --danger: #BA1A1A; /* CIP brand additions */ --brand-navy: #031631; --brand-navy-container: #1A2B47; --brand-teal: #006A68; --brand-teal-container: #8DF3F0; } html, body { background-color: var(--bg); color: var(--ink); font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .tabular { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; } .card { background-color: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; transition: border-color 200ms ease; } .card:hover { border-color: var(--muted); } .card-accent-hover:hover { border-color: var(--action-black); } .agent-prompt-button { background-color: var(--action-black); color: #FFFFFF; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 150ms ease; } .agent-prompt-button:hover { background-color: var(--action-black-hover); } .agent-prompt-button .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .prompt-pill { background-color: var(--surface); border: 1px solid var(--hairline); border-radius: 9999px; transition: border-color 150ms ease; } .prompt-pill:focus-within { border-color: var(--ink); } .prompt-pill input { background: transparent; border: 0; outline: none; font-family: 'Noto Serif', Georgia, serif; font-style: italic; color: var(--ink); } .prompt-pill input::placeholder { color: var(--muted); opacity: 0.85; } .rule-h { height: 1px; background-color: var(--hairline); width: 100%; } .label-caps-tint { background-color: var(--bg); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 700; line-height: 1; } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* ============================================================ Sidebar inverse-dark overrides for CIP. Segerstrom shipped a light-surface sidebar with plum text. CIP swaps to a navy sidebar with white text. The HTML markup is unchanged (still uses bg-sidebar + text-ink + text-muted Tailwind classes); these rules invert just the colors when those classes appear inside nav.bg-sidebar. Specificity (nav.bg-sidebar a.text-ink = 0,3,1) beats Tailwind utility specificity (.text-ink = 0,1,0). ============================================================ */ nav.bg-sidebar { color: #FFFFFF; } /* All text inside the navy sidebar reads as pure white #FFFFFF. Hierarchy on dark surfaces is carried by font weight, size, and tracking, not opacity stepping. On #031631, white at 0.7 reads as muddy gray rather than as a softer white. */ /* Wordmark and subtitle */ nav.bg-sidebar h1.text-ink { color: #FFFFFF; } nav.bg-sidebar p.text-muted { color: #FFFFFF; } /* Inactive nav items: pure white label + icon, weight 400 inherited from font-sans defaults */ nav.bg-sidebar a.text-muted { color: #FFFFFF; } nav.bg-sidebar a.text-muted:hover { color: #FFFFFF; background-color: rgba(141, 243, 240, 0.06); } /* Active nav item: pure white text + lifted teal background tint, weight 600 from font-semibold class on the */ nav.bg-sidebar a.text-ink { color: #FFFFFF; background-color: rgba(141, 243, 240, 0.14); } /* Numeral spans inside nav items, pure white in all states */ nav.bg-sidebar a span.tabular { color: #FFFFFF; } nav.bg-sidebar a:hover span.tabular { color: #FFFFFF; } nav.bg-sidebar a.text-ink span.tabular { color: #FFFFFF; } /* Bottom indicator block. Divider line stays a thin rgba structural rule (border, not text); text inside the block lifts to pure white. */ nav.bg-sidebar .border-t { border-color: rgba(255, 255, 255, 0.1); } nav.bg-sidebar div.text-muted { color: #FFFFFF; } nav.bg-sidebar div.text-muted span { color: #FFFFFF; }