/* ---------------------------------------------------------------------------
Neuroviq brand theme (v2 - light content shell).
Overrides Bootstrap's default styling for the whole app. Written so
existing template markup/classes never need to change - this file loads
after Bootstrap's own stylesheet, so same-specificity rules here win by
source order.
Two page modes, chosen by a class on (see base.html):
- body.nv-shell authenticated pages (dashboard/admin/test/etc.) -
dark navy header + nav, LIGHT off-white content
area, white cards/tables with dark text.
- body.nv-standalone login and the client setup page - no nav bar, full
dark navy background, light text, larger centered
logo. Same condition base.html already uses to
decide whether to render the nav bar at all
(current_user.is_authenticated), so no template
needed a new decision - just a class name for it.
The brand palette has no dedicated error/red. Amber is described as
reserved for "Paused" and warnings, so danger/error states (failed
login, delete confirmations, validation errors) are mapped onto amber
here too, on both light and dark surfaces, rather than introducing an
unlisted color.
--------------------------------------------------------------------------- */
:root {
/* Dark shell (header/nav, and the login/setup standalone pages) */
--nv-dark-bg: #0B1E33;
--nv-dark-card-bg: #102A45;
--nv-dark-border: #2C4A66;
--nv-dark-input-bg: #163553;
--nv-dark-text: #F1F8FC;
--nv-dark-text-muted: #9FB3C8;
/* Light content shell */
--nv-light-bg: #F7FAFC;
--nv-card-bg: #FFFFFF;
--nv-card-border: #E2E8F0;
--nv-table-header-bg: #EEF1F4;
--nv-text: #0B1E33;
--nv-text-muted: #5A6B7A;
/* Brand accent - same everywhere */
--nv-accent: #2FD1F5;
--nv-accent-dark: #1AA9C9;
--nv-accent-text: #04303F;
/* Status pills: pale background + dark text of the same hue */
--nv-status-active-bg: #E1F9FF;
--nv-status-active-text: #0C6E8C;
--nv-status-paused-bg: #FDF1DC;
--nv-status-paused-text: #8A5A0B;
--nv-status-archived-bg: #EEF1F4;
--nv-status-archived-text: #5A6B7A;
--nv-font-heading: 'Space Grotesk', system-ui, sans-serif;
--nv-font-body: 'Inter', system-ui, sans-serif;
--nv-font-mono: 'JetBrains Mono', 'Courier New', monospace;
}
/* -----------------------------------------------------------------------
Base / typography
----------------------------------------------------------------------- */
body {
font-family: var(--nv-font-body);
}
body.nv-shell {
background-color: var(--nv-light-bg);
color: var(--nv-text);
}
body.nv-standalone {
background-color: var(--nv-dark-bg);
color: var(--nv-dark-text);
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6,
.card-title, .navbar-brand {
font-family: var(--nv-font-heading);
}
code, .font-mono, .font-mono-inherit {
font-family: var(--nv-font-mono);
}
body.nv-shell code, body.nv-shell .font-mono { color: var(--nv-accent-dark); background: none; }
body.nv-standalone code, body.nv-standalone .font-mono { color: var(--nv-accent); background: none; }
/* Same monospace treatment but keeps whatever text color already applies -
for mono content sitting on a colored surface (e.g. a chat bubble),
where font-mono's own color would fight the bubble's text-white. */
.font-mono-inherit { color: inherit; }
body.nv-shell small, body.nv-shell .text-muted, body.nv-shell .form-text {
color: var(--nv-text-muted) !important;
}
body.nv-standalone small, body.nv-standalone .text-muted, body.nv-standalone .form-text {
color: var(--nv-dark-text-muted) !important;
}
a { color: var(--nv-accent-dark); }
body.nv-standalone a { color: var(--nv-accent); }
a:hover { color: var(--nv-accent); }
/* Visible focus outline in the accent color everywhere, on either shell. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
outline: 2px solid var(--nv-accent);
outline-offset: 2px;
box-shadow: 0 0 0 0.2rem rgba(47, 209, 245, 0.25) !important;
border-color: var(--nv-accent) !important;
}
/* -----------------------------------------------------------------------
Header / nav bar - always dark navy, on every page that has one
(only nv-shell pages ever render it - see base.html)
----------------------------------------------------------------------- */
.navbar.bg-dark {
background-color: var(--nv-dark-bg) !important;
border-bottom: 1px solid var(--nv-dark-border);
}
.navbar-brand {
display: flex;
align-items: center;
}
.navbar-brand img.nv-logo {
height: 40px;
width: auto;
display: block;
}
.navbar-dark .navbar-nav .nav-link {
color: var(--nv-dark-text-muted);
font-weight: 500;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
color: var(--nv-accent);
}
/* -----------------------------------------------------------------------
Buttons (accent color is shared; outline buttons differ per shell)
----------------------------------------------------------------------- */
.btn-primary {
background-color: var(--nv-accent);
border-color: var(--nv-accent);
color: var(--nv-accent-text);
font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: var(--nv-accent-dark) !important;
border-color: var(--nv-accent-dark) !important;
color: var(--nv-accent-text) !important;
}
body.nv-shell .btn-outline-secondary, body.nv-shell .btn-outline-dark {
color: var(--nv-text);
border-color: var(--nv-card-border);
}
body.nv-shell .btn-outline-secondary:hover, body.nv-shell .btn-outline-dark:hover {
background-color: var(--nv-table-header-bg);
border-color: var(--nv-accent);
color: var(--nv-text);
}
body.nv-standalone .btn-outline-secondary, body.nv-standalone .btn-outline-dark,
.navbar .btn-outline-light {
color: var(--nv-dark-text);
border-color: var(--nv-dark-border);
}
body.nv-standalone .btn-outline-secondary:hover, body.nv-standalone .btn-outline-dark:hover,
.navbar .btn-outline-light:hover {
background-color: var(--nv-dark-card-bg);
border-color: var(--nv-accent);
color: var(--nv-dark-text);
}
/* Danger/destructive buttons -> amber, per the palette note above. */
.btn-danger, .btn-outline-danger {
background-color: transparent;
border-color: var(--nv-status-paused-text);
color: var(--nv-status-paused-text);
}
.btn-danger {
background-color: #F5A623;
border-color: #F5A623;
color: #3A2600;
font-weight: 600;
}
.btn-danger:hover, .btn-outline-danger:hover {
background-color: #F5A623;
border-color: #F5A623;
color: #3A2600;
}
.btn-danger:disabled {
background-color: var(--nv-card-border);
border-color: var(--nv-card-border);
color: var(--nv-text-muted);
}
/* Bootstrap's plain text-danger utility (e.g. a "Delete Permanently"
heading) also needs the amber mapping - otherwise it falls through to
Bootstrap's default red, which isn't in the brand palette at all. */
.text-danger {
color: var(--nv-status-paused-text) !important;
}
/* -----------------------------------------------------------------------
Cards, list groups, tables
- nv-shell: white surfaces, light border, 10px radius, on the off-white page
- nv-standalone: a subtly-lighter navy panel (login/setup form container)
----------------------------------------------------------------------- */
body.nv-shell .card,
body.nv-shell .list-group-item {
background-color: var(--nv-card-bg);
border: 1px solid var(--nv-card-border);
color: var(--nv-text);
border-radius: 10px;
}
body.nv-shell .list-group-item + .list-group-item {
margin-top: 0.5rem;
}
body.nv-shell .list-group {
border-radius: 0;
}
body.nv-standalone .card {
background-color: var(--nv-dark-card-bg);
border: 1px solid var(--nv-dark-border);
color: var(--nv-dark-text);
border-radius: 10px;
}
.card.border-danger { border-color: var(--nv-status-paused-text) !important; }
body.nv-shell .card.border-success { border-color: var(--nv-accent-dark) !important; }
body.nv-standalone .card.border-success { border-color: var(--nv-accent) !important; }
/* Row hover: subtle border/background shift, not a glow - shows interactivity
without needing hover-only vs touch-only variants (the resting border is
already visible, so touch devices are fine with no extra rule). */
@media (hover: hover) and (pointer: fine) {
body.nv-shell .list-group-item {
transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
body.nv-shell a .list-group-item:hover,
body.nv-shell .list-group-item:has(> a:hover) {
border-color: #CBD5E0;
background-color: #FBFDFE;
box-shadow: 0 2px 6px rgba(11, 30, 51, 0.06);
}
}
.table {
--bs-table-bg: var(--nv-card-bg);
--bs-table-color: var(--nv-text);
--bs-table-border-color: var(--nv-card-border);
--bs-table-striped-bg: #FBFDFE;
--bs-table-hover-bg: #FBFDFE;
--bs-table-hover-color: var(--nv-text);
}
thead.table-light, .table > :not(caption) > * > * {
background-color: var(--nv-table-header-bg) !important;
color: var(--nv-text-muted) !important;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.table > tbody > tr > td {
background-color: var(--nv-card-bg);
color: var(--nv-text);
vertical-align: middle;
}
body.nv-shell .form-control, body.nv-shell .form-select {
background-color: #FFFFFF;
border-color: var(--nv-card-border);
color: var(--nv-text);
}
body.nv-shell .form-control::placeholder { color: var(--nv-text-muted); opacity: 0.8; }
body.nv-shell .form-control[readonly] { background-color: var(--nv-light-bg); }
body.nv-standalone .form-control, body.nv-standalone .form-select {
background-color: var(--nv-dark-input-bg);
border-color: var(--nv-dark-border);
color: var(--nv-dark-text);
}
body.nv-standalone .form-control::placeholder { color: var(--nv-dark-text-muted); opacity: 0.8; }
/* Focus state is identical everywhere (see the shared focus-visible rule
above); this just makes sure the background stays put on focus. */
body.nv-shell .form-control:focus, body.nv-shell .form-select:focus { background-color: #FFFFFF; color: var(--nv-text); }
body.nv-standalone .form-control:focus, body.nv-standalone .form-select:focus { background-color: var(--nv-dark-input-bg); color: var(--nv-dark-text); }
/* -----------------------------------------------------------------------
Badges + status pills (used consistently everywhere a status appears)
----------------------------------------------------------------------- */
.badge {
border-radius: 50rem;
font-weight: 600;
font-size: 0.75rem;
padding: 0.35em 0.75em;
}
.badge.bg-success {
background-color: var(--nv-status-active-bg) !important;
color: var(--nv-status-active-text) !important;
}
.badge.bg-warning {
background-color: var(--nv-status-paused-bg) !important;
color: var(--nv-status-paused-text) !important;
}
.badge.bg-secondary {
background-color: var(--nv-status-archived-bg) !important;
color: var(--nv-status-archived-text) !important;
}
body.nv-shell .badge.bg-dark {
background-color: var(--nv-table-header-bg) !important;
color: var(--nv-text) !important;
border: 1px solid var(--nv-card-border);
}
body.nv-standalone .badge.bg-dark {
background-color: var(--nv-dark-card-bg) !important;
color: var(--nv-dark-text) !important;
border: 1px solid var(--nv-dark-border);
}
/* -----------------------------------------------------------------------
Alerts / flash messages
success/info -> accent-tinted; warning/danger -> amber (see note above)
----------------------------------------------------------------------- */
.alert { border: 1px solid transparent; border-radius: 10px; }
body.nv-shell .alert-success, body.nv-shell .alert-info {
background-color: var(--nv-status-active-bg);
border-color: #BEEEFA;
color: var(--nv-status-active-text);
}
body.nv-shell .alert-warning, body.nv-shell .alert-danger {
background-color: var(--nv-status-paused-bg);
border-color: #F7DFAE;
color: var(--nv-status-paused-text);
}
body.nv-standalone .alert-success, body.nv-standalone .alert-info {
background-color: rgba(47, 209, 245, 0.12);
border-color: var(--nv-accent);
color: var(--nv-dark-text);
}
body.nv-standalone .alert-warning, body.nv-standalone .alert-danger {
background-color: rgba(245, 166, 35, 0.14);
border-color: #F5A623;
color: var(--nv-dark-text);
}
body.nv-standalone .alert .btn-close {
filter: invert(1) grayscale(1) brightness(1.6);
}
/* -----------------------------------------------------------------------
Nav pills (Active & Paused / Archived tabs)
----------------------------------------------------------------------- */
body.nv-shell .nav-pills .nav-link {
color: var(--nv-text-muted);
background-color: transparent;
}
.nav-pills .nav-link.active {
background-color: var(--nv-accent);
color: var(--nv-accent-text);
font-weight: 600;
}
/* -----------------------------------------------------------------------
Signature detail: pulsing "electron" dot, paired with the Active pill
style (not a plain badge). Use as:
AI Active
----------------------------------------------------------------------- */
.ai-active-indicator {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--nv-status-active-text);
padding: 0.35em 0.75em;
border-radius: 50rem;
background-color: var(--nv-status-active-bg);
}
.ai-active-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--nv-status-active-text);
box-shadow: 0 0 0 0 rgba(12, 110, 140, 0.55);
animation: nv-pulse 1.8s ease-out infinite;
}
@keyframes nv-pulse {
0% { box-shadow: 0 0 0 0 rgba(12, 110, 140, 0.55); }
70% { box-shadow: 0 0 0 6px rgba(12, 110, 140, 0); }
100% { box-shadow: 0 0 0 0 rgba(12, 110, 140, 0); }
}
@media (prefers-reduced-motion: reduce) {
.ai-active-dot { animation: none; }
}
/* -----------------------------------------------------------------------
Logo on standalone dark pages (login, setup) - the logo image already
has a solid navy background baked in matching --nv-dark-bg exactly, so
a plain ![]()
at a larger size sits flush with no visible edge.
----------------------------------------------------------------------- */
.nv-standalone-logo {
display: block;
max-width: 320px;
width: 80%;
height: auto;
margin: 0 auto 1.75rem;
}