@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap'); /* Capital Clarity — North Star brand layer --------------------------------------------------------------------------- Reusable dark visual system modeled on tool.richeyinsurancesolutions.com: near-black navy #0a1628, electric blue #2e86de, Barlow / Barlow Condensed. Apply by adding class="cc-theme" to (or ) and linking this file AFTER app-shell.css. Scoping every rule under .cc-theme means a page opts in; pages without the class keep the current light theme during rollout. This file re-maps the shared --ibc-* shell tokens so the injected sidebar and top bar reskin automatically. Page-local styles consume the --cc-* palette. */ .cc-theme { /* ---- brand palette ---- */ --cc-bg:#0a1628; --cc-panel:#0f2038; --cc-panel-2:#132a49; --cc-inset:#0c1a30; --cc-line:#20395b; --cc-line-soft:#182d4a; --cc-blue:#2e86de; --cc-blue-bright:#4a9eef; --cc-blue-dim:#1d5aa0; --cc-white:#ffffff; --cc-text:#d7e3f2; --cc-muted:#8ba3bf; --cc-dim:#67809e; --cc-green:#3fb27f; --cc-amber:#e0a53a; --cc-red:#e8776e; --cc-display:'Barlow Condensed', 'Barlow', system-ui, sans-serif; --cc-sans:'Barlow', system-ui, -apple-system, sans-serif; /* ---- remap shared shell tokens (sidebar / top bar / surfaces) ---- */ --ibc-shell-bg:#0a1628; --ibc-shell-header-bg:#081120; --ibc-color-ink-900:#081120; --ibc-color-ink-800:#0f2038; --ibc-color-ink-700:#132a49; --ibc-color-ink-600:#d7e3f2; --ibc-color-ink-500:#8ba3bf; --ibc-color-ink-400:#67809e; --ibc-color-surface-0:#0f2038; --ibc-color-surface-50:#0c1a30; --ibc-color-surface-100:#0a1628; --ibc-color-surface-200:#132a49; --ibc-color-surface-raised:#0f2038; --ibc-color-surface-muted:#0c1a30; --ibc-color-border:#20395b; --ibc-color-border-soft:#182d4a; --ibc-color-accent-gold:#2e86de; --ibc-color-accent-gold-soft:rgba(46,134,222,.16); --ibc-color-link:#4a9eef; --ibc-color-focus:rgba(46,134,222,.35); --ibc-color-text:#d7e3f2; --ibc-color-text-strong:#ffffff; --ibc-color-text-muted:#8ba3bf; --ibc-color-success:#3fb27f; --ibc-color-success-bg:rgba(63,178,127,.14); --ibc-color-success-border:rgba(63,178,127,.32); --ibc-color-warning:#e0a53a; --ibc-color-warning-bg:rgba(224,165,58,.14); --ibc-color-warning-border:rgba(224,165,58,.32); --ibc-color-danger:#e8776e; --ibc-color-danger-bg:rgba(232,119,110,.14); --ibc-color-danger-border:rgba(232,119,110,.32); --ibc-color-info:#4a9eef; --ibc-color-info-bg:rgba(46,134,222,.14); --ibc-color-info-border:rgba(46,134,222,.32); --ibc-color-purple:#a78bfa; --ibc-color-purple-bg:rgba(167,139,250,.14); --ibc-color-purple-border:rgba(167,139,250,.32); --ibc-color-neutral:#8ba3bf; --ibc-color-neutral-bg:#132a49; --ibc-color-neutral-border:#20395b; --ibc-font-family-base:'Barlow', system-ui, -apple-system, sans-serif; --ibc-shadow-xs:0 1px 2px rgba(0,0,0,.4); --ibc-shadow-sm:0 8px 20px rgba(0,0,0,.34); --ibc-shadow-md:0 14px 34px rgba(0,0,0,.4); --ibc-shadow-card:0 12px 30px rgba(0,0,0,.36); --ibc-shadow-card-hover:0 16px 38px rgba(0,0,0,.44); } /* base surface + font */ .cc-theme, .cc-theme body { background:#0a1628; color:var(--cc-text); font-family:var(--cc-sans); } .cc-theme .ibc-app { background:#0a1628; color:var(--cc-text); font-family:var(--cc-sans); } /* sidebar identity + nav */ .cc-theme .ibc-sidebar { background:#081120; border-right:1px solid var(--cc-line-soft); } .cc-theme .ibc-sidebar-header { border-bottom:1px solid var(--cc-line-soft); } .cc-theme .ibc-sidebar-brand { color:var(--cc-blue); letter-spacing:.16em; } .cc-theme .ibc-sidebar-title { font-family:var(--cc-display); font-weight:800; letter-spacing:.4px; color:#fff; } .cc-theme .ibc-sidebar-nav a, .cc-theme .ibc-sidebar-nav .ibc-nav-link { color:var(--cc-muted); border-radius:7px; } .cc-theme .ibc-sidebar-nav a:hover { color:#fff; background:#0e1c33; } .cc-theme .ibc-sidebar-nav a.is-active, .cc-theme .ibc-sidebar-nav .is-active { color:#fff; background:linear-gradient(90deg,rgba(46,134,222,.18),rgba(46,134,222,.02)); box-shadow:inset 2px 0 0 var(--cc-blue); } .cc-theme .ibc-sidebar-group-label, .cc-theme .ibc-sidebar-section-label { color:#43597a; } /* top bar */ .cc-theme .ibc-topbar, .cc-theme .ibc-workspace-header { background:rgba(8,17,32,.72); border-bottom:1px solid var(--cc-line-soft); backdrop-filter:blur(6px); } .cc-theme .ibc-topbar-title { font-family:var(--cc-display); font-weight:700; color:#fff; letter-spacing:.3px; } .cc-theme .ibc-topbar-context { color:var(--cc-muted); } /* generic shell buttons / inputs that lean on tokens */ .cc-theme .ibc-btn, .cc-theme .ibc-topbar button { color:var(--cc-text); } /* .ibc-btn--primary / --secondary resolve to dark-on-dark once the tokens are remapped (background --ibc-color-surface-0 #0f2038 over text --ibc-color-ink-900 #081120), and the secondary border rgba(15,32,68,.28) disappears against a dark card. Give both an explicit dark treatment: primary carries the brand blue as the page's main action. */ /* --cc-blue-dim carries the label at 6.95:1; --cc-blue would be 3.76:1, under AA for the .82rem button text. The brighter blue is kept for the border so the button still reads as the accent action against the panel. */ .cc-theme .ibc-btn--primary, .cc-theme .ibc-button--primary { background: var(--cc-blue-dim); border-color: var(--cc-blue); color: #fff; } .cc-theme .ibc-btn--primary:hover, .cc-theme .ibc-button--primary:hover { background: var(--cc-blue); border-color: var(--cc-blue-bright); color: #fff; } .cc-theme .ibc-btn--secondary, .cc-theme .ibc-button--secondary { background: var(--cc-inset); border-color: var(--cc-line); color: var(--cc-text); } .cc-theme .ibc-btn--secondary:hover, .cc-theme .ibc-button--secondary:hover { background: var(--cc-panel-2); border-color: var(--cc-blue-dim); color: #fff; } .cc-theme .ibc-btn--ghost, .cc-theme .ibc-button--ghost { color: var(--cc-text); } .cc-theme .ibc-btn--ghost:hover, .cc-theme .ibc-button--ghost:hover { background: var(--cc-panel-2); } /* Same dark-on-dark bug as .ibc-btn--primary above, in the two other shared components that invert ink-900/surface-0 for an "active" state: .ibc-nav__link[aria-current="page"] / .is-active and .ibc-tab[aria-selected="true"] / .is-active. .ibc-nav__link's own *default* (non-active) state has the same issue one level down -- color: ink-900 on background: surface-0 -- so it needs the same treatment even though it isn't the active state. */ .cc-theme .ibc-nav__link { background: var(--cc-panel); color: var(--cc-text); } .cc-theme .ibc-nav__link[aria-current="page"], .cc-theme .ibc-nav__link.is-active { background: var(--cc-blue-dim); border-color: var(--cc-blue); color: #fff; } .cc-theme .ibc-tab[aria-selected="true"], .cc-theme .ibc-tab.is-active { background: var(--cc-blue-dim); border-color: var(--cc-blue); color: #fff; } /* display headings inherit the condensed face app-wide */ .cc-theme h1, .cc-theme h2 { font-family:var(--cc-display); letter-spacing:.2px; } /* --------------------------------------------------------------------------- B5 rollout fixes — shared stragglers found in preview QA (strategy / recommendations / household). Form controls, top-bar buttons, and elements that use --navy as a background rather than as text. --------------------------------------------------------------------------- */ .cc-theme input, .cc-theme select, .cc-theme textarea { background: var(--cc-inset); border: 1px solid var(--cc-line); color: var(--cc-text); } .cc-theme input::placeholder, .cc-theme textarea::placeholder { color: var(--cc-dim); } /* A placeholder must never be mistakable for an entered value. --------------------------------------------------------------------------- In the strategy modeller this was not a matter of taste. Policy Design showed a cash value schedule of "0 0 0 0 0" directly beneath a banner reading "No schedule entered", and a Base premium field showing "2,400" that was empty — the split hint underneath it duly reported "Paid-up additions $6,000 — 100% of premium". Colour alone does not carry that distinction: a dimmed grey on a navy inset reads as a filled field with a quiet value. Italic does carry it, because nothing an advisor types is ever italic. Applied at the root rather than per page so no screen can drift back. */ input::placeholder, textarea::placeholder, .cc-theme input::placeholder, .cc-theme textarea::placeholder { font-style: italic; opacity: .75; } .cc-theme input:focus, .cc-theme select:focus, .cc-theme textarea:focus { outline: none; border-color: var(--cc-blue); box-shadow: 0 0 0 3px rgba(46,134,222,.18); } /* higher specificity so page-local input classes (e.g. .field-input.cv-value) are covered */ .cc-theme input.field-input, .cc-theme select.field-input, .cc-theme .field-input { background: var(--cc-inset); border-color: var(--cc-line); color: var(--cc-text); } /* app-shell top bar controls */ .cc-theme .ibc-search-trigger, .cc-theme .ibc-notification-trigger, .cc-theme .ibc-topbar-action, .cc-theme .ibc-org-select, .cc-theme .workspace-scope-select { background: #0d1a30; border-color: var(--cc-line); color: var(--cc-muted); } .cc-theme .ibc-search-trigger:hover, .cc-theme .ibc-notification-trigger:hover, .cc-theme .ibc-topbar-action:hover:not(:disabled), .cc-theme .ibc-org-select:hover, .cc-theme .workspace-scope-select:hover { color: #fff; border-color: var(--cc-blue-dim); } /* The chevron is a background-image, so the dark theme needs its own stroke colour. */ .cc-theme .ibc-org-select, .cc-theme .workspace-scope-select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238ba3bf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 11px 8px; } /* Options render in the OS popup layer; without this they stay white-on-white on Windows. */ .cc-theme .ibc-org-select option, .cc-theme .workspace-scope-select option { background: var(--cc-panel); color: var(--cc-text); } .cc-theme .ibc-org-switcher-label, .cc-theme .workspace-scope-label { color: var(--cc-dim); } .cc-theme .ibc-sign-out[data-signout-error="true"] { border-color: var(--cc-red); color: var(--cc-red); } /* elements that use --navy as a BACKGROUND (chips / active states) — must be blue, not the light text value */ .cc-theme .chip-navy, .cc-theme .flag-priority, .cc-theme .sb-scenario-tab[aria-selected="true"], .cc-theme .advisor-nav a.is-active { background: var(--cc-blue); color: #fff; } /* strategy assumption section wrappers */ .cc-theme .sb-region { background: var(--cc-panel); border-color: var(--cc-line-soft); } /* strategy assumption form uses inline style="" attributes — override requires !important */ .cc-theme .sb-region { background: var(--cc-panel) !important; border-color: var(--cc-line-soft) !important; } .cc-theme .sb-region-title { color: #fff !important; } .cc-theme .field-input { background: var(--cc-inset) !important; color: var(--cc-text) !important; border-color: var(--cc-line) !important; } .cc-theme .field-note { color: var(--cc-muted) !important; } /* Class-less elements with inline light backgrounds (strategy assumption sub-panels, read-only pills). Attribute-scoped and dark-theme only, so it only ever darkens a light inline background — safe across pages. */ .cc-theme [style*="background:#f"], .cc-theme [style*="background: #f"], .cc-theme [style*="background:#e"], .cc-theme [style*="background: #e"], .cc-theme [style*="background:rgb(240"], .cc-theme [style*="background: rgb(240"] { background: var(--cc-inset) !important; } .cc-theme [style*="#e5eaf1"], .cc-theme [style*="solid #e5"] { border-color: var(--cc-line-soft) !important; } /* --------------------------------------------------------------------------- Final QA pass — debt waterfall (JS-generated) and assumption-form spans use inline rgb(255)/near-white backgrounds and inline dark text (#0f2044 etc.). Attribute-scoped near-white catch (avoids semantic amber rgb(224)/green/blue). --------------------------------------------------------------------------- */ .cc-theme [style*="background: rgb(255"], .cc-theme [style*="background:rgb(255"], .cc-theme [style*="background: rgb(250"], .cc-theme [style*="background:rgb(250"], .cc-theme [style*="background: rgb(249"], .cc-theme [style*="background:rgb(249"], .cc-theme [style*="background: rgb(248"], .cc-theme [style*="background:rgb(248"], .cc-theme [style*="background: rgb(245"], .cc-theme [style*="background:rgb(245"], .cc-theme [style*="background: rgb(240"], .cc-theme [style*="background:rgb(240"], .cc-theme [style*="background: rgb(238"], .cc-theme [style*="background:rgb(238"], .cc-theme [style*="background: rgb(229"], .cc-theme [style*="background:rgb(229"] { background: var(--cc-panel) !important; } /* inline dark text -> light (targeted, preserves semantic green/amber/red/blue) */ .cc-theme [style*="color:#0f2044"], .cc-theme [style*="color: #0f2044"], .cc-theme [style*="color:#1a1a2e"], .cc-theme [style*="color: #1a1a2e"], .cc-theme [style*="color:#172033"], .cc-theme [style*="color: #172033"], .cc-theme [style*="color:#334155"], .cc-theme [style*="color: #334155"], .cc-theme [style*="color:#243b8f"], .cc-theme [style*="color: #243b8f"], .cc-theme [style*="color:#5d4037"], .cc-theme [style*="color: #5d4037"] { color: var(--cc-text) !important; } /* outline buttons (incl. debt-sequence up/down) + gold run button contrast */ .cc-theme .btn-outline { background: transparent !important; border-color: var(--cc-line) !important; color: var(--cc-text) !important; } .cc-theme .btn-outline:hover { border-color: var(--cc-blue) !important; color: #fff !important; } .cc-theme .btn-gold, .cc-theme .run-btn { color: #26210a !important; }