/* ============================================================ MimirOne theme — Bootstrap 5.3 tokens + custom palette. Deep-navy surfaces with a gold primary and a blue secondary accent. Dark is the real design; a light palette is defined too and the ThemeToggle flips data-bs-theme on . The --mo-* names are kept stable (violet/teal) so scoped component CSS that references them re-themes automatically — only the values changed, navy/gold not violet/teal. ============================================================ */ :root { /* Brand — gold primary, blue + green accents */ --mo-violet: #d8a83e; /* primary / brand (name kept for reuse) */ --mo-violet-600: #e6b84a; /* primary hover — brightens, per design */ --mo-teal: #48c58a; /* accent / "done" / valid */ --mo-ink: #111b26; /* text that sits on a gold fill */ --mo-blue: #1677e8; --mo-blue-400: #45a2ff; --mo-amber: #f0c85e; --mo-rose: #e0575b; --mo-sky: #2b8fff; color-scheme: light dark; } /* ---------- Light palette (default :root) ---------- */ :root { --bs-primary: var(--mo-violet); --bs-primary-rgb: 216, 168, 62; --bs-link-color: #a9781a; --bs-link-hover-color: #855c10; --bs-body-bg: #f4f1ea; --bs-body-color: #1b2530; --bs-emphasis-color: #0b1119; --bs-secondary-color: #5c6b7a; --bs-tertiary-bg: #ece6d9; --bs-border-color: #ded6c4; --mo-surface: #ffffff; --mo-surface-2: #f7f3ea; --mo-shadow: 0 1px 2px rgba(16, 18, 27, .06), 0 8px 24px rgba(16, 18, 27, .06); --mo-sidebar-bg: linear-gradient(190deg, #0a1a2b 0%, #0b1c31 60%, #0c1e33 100%); } /* ---------- Dark palette (the real design) ---------- */ :root[data-bs-theme="dark"] { --bs-primary: var(--mo-violet); --bs-primary-rgb: 216, 168, 62; --bs-link-color: #72b8ff; --bs-link-hover-color: #a9d4ff; --bs-body-bg: #07111f; --bs-body-color: #eaf0f8; --bs-emphasis-color: #ffffff; --bs-secondary-color: #8ea0b6; --bs-tertiary-bg: #0c1b2c; --bs-border-color: rgba(255, 255, 255, .10); --bs-card-bg: #0b1929; --bs-card-cap-bg: #0c1d31; --mo-surface: #0b1929; --mo-surface-2: #0c1e33; --mo-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 50px rgba(0, 0, 0, .35); --mo-sidebar-bg: linear-gradient(190deg, #091625 0%, #0a1a2b 55%, #0b1c31 100%); } html, body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: var(--bs-body-bg); } body { -webkit-font-smoothing: antialiased; } /* Faint corner glows, dark only — echoes the source design without getting in the way of content. Fixed so they don't scroll. */ :root[data-bs-theme="dark"] body { background-image: radial-gradient(560px circle at 6% -8%, rgba(22, 119, 232, .10), transparent 60%), radial-gradient(560px circle at 102% 108%, rgba(216, 168, 62, .07), transparent 55%); background-attachment: fixed; background-repeat: no-repeat; } h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -0.03em; font-weight: 600; } /* Cards get the app surface + soft shadow everywhere */ .card { background-color: var(--mo-surface); border-color: var(--bs-border-color); box-shadow: var(--mo-shadow); border-radius: .75rem; } .card-header { background-color: transparent; border-bottom-color: var(--bs-border-color); font-weight: 600; } .btn { border-radius: .55rem; font-weight: 550; } .btn-primary { --bs-btn-bg: var(--mo-violet); --bs-btn-border-color: var(--mo-violet); --bs-btn-color: var(--mo-ink); --bs-btn-hover-bg: var(--mo-violet-600); --bs-btn-hover-border-color: var(--mo-violet-600); --bs-btn-hover-color: var(--mo-ink); --bs-btn-active-bg: var(--mo-violet-600); --bs-btn-active-color: var(--mo-ink); /* Bootstrap's own .btn-primary hardcodes these to its stock blue (#0d6efd) rather than referencing --bs-primary, so every disabled primary button - which is most of them, mid-request or pending a required field - fell back to unthemed blue without this. */ --bs-btn-disabled-bg: var(--mo-violet); --bs-btn-disabled-border-color: var(--mo-violet); --bs-btn-disabled-color: var(--mo-ink); color: var(--mo-ink); } .btn-outline-primary { --bs-btn-color: var(--mo-violet-600); --bs-btn-border-color: rgba(var(--bs-primary-rgb), .5); --bs-btn-hover-bg: var(--mo-violet); --bs-btn-hover-border-color: var(--mo-violet); --bs-btn-hover-color: var(--mo-ink); --bs-btn-active-color: var(--mo-ink); /* Same stock-blue fallback as .btn-primary above. */ --bs-btn-disabled-color: var(--mo-violet-600); --bs-btn-disabled-border-color: rgba(var(--bs-primary-rgb), .5); } .form-control, .form-select { border-radius: .5rem; background-color: var(--mo-surface); border-color: var(--bs-border-color); } .form-control:focus, .form-select:focus, .btn:focus-visible { border-color: var(--mo-violet); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); } .list-group-item { background-color: var(--mo-surface); border-color: var(--bs-border-color); } .list-group-item.active { background-color: var(--mo-violet); border-color: var(--mo-violet); color: var(--mo-ink); } .nav-pills .nav-link.active { background-color: var(--mo-violet); color: var(--mo-ink); } .nav-pills .nav-link { color: var(--bs-body-color); } .badge.text-bg-primary { background-color: var(--mo-violet) !important; color: var(--mo-ink) !important; } a { text-decoration: none; } a:hover { text-decoration: underline; } .content { padding-top: 1.25rem; padding-bottom: 3rem; } /* Lets a flex child's .text-truncate actually clip instead of overflowing. */ .min-w-0 { min-width: 0; } /* Workspace hero — a faint gold wash in the corner over the card surface. */ .mo-hero { background: radial-gradient(440px circle at 100% 0%, rgba(216, 168, 62, .10), transparent 62%), var(--mo-surface); border-color: rgba(216, 168, 62, .28); } .mo-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 600; color: var(--bs-secondary-color); } /* Round initials chip on Opportunity rows */ .mo-avatar { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; } .mo-avatar-gold { background: rgba(216, 168, 62, .18); color: var(--mo-violet-600); } .mo-avatar-blue { background: rgba(22, 119, 232, .20); color: #76b9ff; } /* Continuum-setup wizard stepper */ .mo-setup-step { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid transparent; border-radius: .6rem; padding: .5rem .7rem; min-width: 10rem; } .mo-setup-step:hover { background: var(--mo-surface-2); } .mo-setup-step-active { background: var(--mo-surface-2); border-color: var(--bs-border-color); } .mo-setup-num { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); } .mo-setup-num-current { border-color: var(--mo-violet); background: rgba(216, 168, 62, .15); color: var(--mo-violet-600); } .mo-setup-num-done { border-color: var(--mo-teal); background: var(--mo-teal); color: #06210f; } /* Big choice tiles on the setup wizard's "bring in history" step */ .mo-choice-card { display: block; width: 100%; text-align: left; border: 1px solid var(--bs-border-color); border-radius: .8rem; padding: 1.25rem; background: var(--mo-surface-2); transition: transform .12s ease, border-color .12s ease, background .12s ease; } .mo-choice-card .bi { font-size: 1.4rem; color: var(--mo-violet-600); } .mo-choice-card:hover { transform: translateY(-2px); border-color: rgba(216, 168, 62, .4); } .mo-choice-card-active { border-color: var(--mo-violet); background: rgba(216, 168, 62, .06); } /* Proposal row on the setup wizard's review step */ .mo-proposal { border: 1px solid var(--bs-border-color); border-radius: .7rem; background: var(--mo-surface); } .mo-proposal-open { border-color: rgba(216, 168, 62, .4); } .mo-proposal-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mo-blue-400); flex: 0 0 auto; margin-top: .45rem; } /* Clickable Opportunity card with a subtle lift on hover */ .mo-oppcard { display: block; border: 1px solid var(--bs-border-color); border-radius: .7rem; padding: 1rem; background: var(--mo-surface); transition: transform .12s ease, border-color .12s ease; } .mo-oppcard:hover { transform: translateY(-2px); border-color: rgba(216, 168, 62, .4); text-decoration: none; } /* Multi-line truncation for card body copy */ .mo-clamp-2, .mo-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .mo-clamp-2 { -webkit-line-clamp: 2; } .mo-clamp-3 { -webkit-line-clamp: 3; } /* Continuum node card + its type-group icon chip */ .mo-node-card { border: 1px solid var(--bs-border-color); border-radius: .7rem; background: var(--mo-surface); height: 100%; transition: border-color .12s ease; } .mo-node-card:hover { border-color: rgba(216, 168, 62, .4); } .mo-type-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: .5rem; background: rgba(216, 168, 62, .16); color: var(--mo-violet-600); flex: 0 0 auto; } .mo-type-icon .bi { font-size: 1rem; } /* Numbered journey "steps as tabs" strip (Traversal workspace). Wraps instead of scrolling; each chip is a real tab button. */ .mo-steps { display: flex; flex-wrap: wrap; gap: .5rem; } .mo-step { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--bs-border-color); border-radius: .7rem; background: var(--mo-surface); padding: .55rem .8rem; text-align: left; transition: border-color .12s ease, background .12s ease, transform .12s ease; min-width: 9.5rem; } .mo-step:hover { transform: translateY(-1px); border-color: rgba(216, 168, 62, .4); } .mo-step-active { border-color: var(--mo-violet); background: rgba(216, 168, 62, .07); } .mo-step-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: .5rem; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); } .mo-step-active .mo-step-ico { border-color: var(--mo-violet); background: rgba(216, 168, 62, .15); color: var(--mo-violet-600); } .mo-step-done .mo-step-ico { border-color: var(--mo-teal); background: var(--mo-teal); color: #06210f; } .mo-step-label { font-size: .78rem; font-weight: 600; line-height: 1.15; } .mo-step-state { font-size: .66rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .06em; } /* Attach-a-file drop zone on the "Introduce a New Opportunity" form. The real sits on top at opacity 0 so the whole area is the click/drop target. */ .mo-dropzone { position: relative; border: 1.5px dashed var(--bs-border-color); border-radius: .8rem; background: var(--mo-surface-2); padding: 1.5rem 1rem; text-align: center; transition: border-color .12s ease, background .12s ease; } .mo-dropzone:hover { border-color: rgba(216, 168, 62, .5); } .mo-dropzone .bi { font-size: 1.5rem; color: var(--mo-violet-600); } .mo-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .mo-dropzone-busy { border-color: var(--mo-violet); background: rgba(216, 168, 62, .07); } h1:focus { outline: none; } /* Validation */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--mo-teal); } .invalid { outline: 1px solid var(--mo-rose); } .validation-message { color: var(--mo-rose); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." }