per cell. Add a count
modifier on the parent (.nuvo-cell-grid--3, --4) to fix columns. */
.nuvo-cell-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0;
background: var(--nuvo-bg-card);
border: 1px solid var(--nuvo-line);
border-radius: var(--nuvo-radius-md);
overflow: hidden;
}
.nuvo-cell-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nuvo-cell-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nuvo-cell-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nuvo-cell-grid--flat { border-radius: 0; }
.nuvo-cell-grid--soft { background: var(--nuvo-bg-soft); }
.nuvo-cell {
padding: clamp(20px, 2.6vw, 30px);
border-right: 1px solid var(--nuvo-line);
border-bottom: 1px solid var(--nuvo-line);
background: transparent;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.nuvo-cell:hover { background: var(--nuvo-bg-soft); }
.nuvo-cell--interactive { cursor: pointer; transition: background-color .2s ease; }
.nuvo-cell__icon {
width: 28px;
height: 28px;
color: var(--nuvo-green);
margin-bottom: 4px;
}
.nuvo-cell__title {
font-size: 15px;
font-weight: 600;
margin: 0;
letter-spacing: -0.005em;
}
.nuvo-cell__desc {
color: var(--nuvo-ink-mute);
font-size: 13.5px;
line-height: 1.55;
margin: 0;
max-width: 52ch;
}
/* Strip trailing right-borders and bottom-borders based on column count.
These rules handle 2/3/4-col defaults; for auto-fit grids the inner cells
inherit borders cleanly because the wrapper clips overflow. */
.nuvo-cell-grid--2 > .nuvo-cell:nth-child(2n) { border-right: none; }
.nuvo-cell-grid--2 > .nuvo-cell:nth-last-child(-n+2):nth-child(odd),
.nuvo-cell-grid--2 > .nuvo-cell:nth-last-child(-n+2):nth-child(odd) ~ .nuvo-cell { border-bottom: none; }
.nuvo-cell-grid--3 > .nuvo-cell:nth-child(3n) { border-right: none; }
.nuvo-cell-grid--3 > .nuvo-cell:nth-last-child(-n+3):nth-child(3n+1),
.nuvo-cell-grid--3 > .nuvo-cell:nth-last-child(-n+3):nth-child(3n+1) ~ .nuvo-cell { border-bottom: none; }
.nuvo-cell-grid--4 > .nuvo-cell:nth-child(4n) { border-right: none; }
.nuvo-cell-grid--4 > .nuvo-cell:nth-last-child(-n+4):nth-child(4n+1),
.nuvo-cell-grid--4 > .nuvo-cell:nth-last-child(-n+4):nth-child(4n+1) ~ .nuvo-cell { border-bottom: none; }
@media (max-width: 880px) {
.nuvo-cell-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.nuvo-cell-grid--2,
.nuvo-cell-grid--3,
.nuvo-cell-grid--4 { grid-template-columns: 1fr; }
.nuvo-cell-grid > .nuvo-cell { border-right: none; }
}
/* ============================================================================
12. DATA TABLES - DsDataTable, InvoiceTable, vendor mappings, etc
============================================================================
Sharp, monospace headers; comfortable row height; alternating zebra optional.
For the mobile fallback use .nuvo-table-mobile-cards on the container. */
.nuvo-table-wrap {
background: var(--nuvo-bg-card);
border: 1px solid var(--nuvo-line);
border-radius: var(--nuvo-radius-md);
overflow: hidden;
}
.nuvo-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
color: var(--nuvo-ink);
}
.nuvo-table thead th {
text-align: left;
font-family: var(--nuvo-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nuvo-ink-mute);
background: var(--nuvo-bg-soft);
padding: 12px 16px;
border-bottom: 1px solid var(--nuvo-line);
white-space: nowrap;
}
.nuvo-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--nuvo-line);
vertical-align: middle;
}
.nuvo-table tbody tr:last-child td { border-bottom: none; }
.nuvo-table tbody tr { transition: background-color .15s ease; }
.nuvo-table tbody tr:hover { background: var(--nuvo-bg-soft); }
.nuvo-table tbody tr.is-selected { background: color-mix(in srgb, var(--nuvo-lavender-bg) 60%, var(--nuvo-bg-card)); }
.nuvo-table--zebra tbody tr:nth-child(odd):not(.is-selected) { background: var(--nuvo-bg-alt); }
.nuvo-table--zebra tbody tr:nth-child(odd):hover { background: var(--nuvo-bg-soft); }
.nuvo-table--compact thead th { padding: 8px 12px; }
.nuvo-table--compact tbody td { padding: 10px 12px; }
.nuvo-table__num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.nuvo-table__mono { font-family: var(--nuvo-font-mono); font-size: 12.5px; }
.nuvo-table__actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.nuvo-table__primary { font-weight: 600; color: var(--nuvo-ink); }
.nuvo-table__caption {
caption-side: top;
padding: 12px 16px;
text-align: left;
font-size: 12.5px;
color: var(--nuvo-ink-mute);
background: var(--nuvo-bg-soft);
border-bottom: 1px solid var(--nuvo-line);
}
/* Mobile card fallback - at narrow widths, hide thead and turn rows into stacks */
@media (max-width: 640px) {
.nuvo-table-mobile-cards .nuvo-table thead { display: none; }
.nuvo-table-mobile-cards .nuvo-table tbody tr {
display: block;
padding: 14px 16px;
border-bottom: 1px solid var(--nuvo-line);
}
.nuvo-table-mobile-cards .nuvo-table tbody td {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
border-bottom: none;
}
.nuvo-table-mobile-cards .nuvo-table tbody td::before {
content: attr(data-label);
font-family: var(--nuvo-font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nuvo-ink-mute);
flex: 0 0 40%;
}
}
/* ============================================================================
13. DETAIL GRID - DsDetailGrid (label/value metadata pairs)
============================================================================ */
.nuvo-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 4px 18px;
}
.nuvo-detail-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nuvo-detail-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nuvo-detail-grid--list { display: flex; flex-direction: column; gap: 8px; }
.nuvo-detail {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 0;
border-bottom: 1px dashed var(--nuvo-line);
min-width: 0;
}
.nuvo-detail:last-child { border-bottom: none; }
.nuvo-detail__label {
font-family: var(--nuvo-font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nuvo-ink-mute);
}
.nuvo-detail__value {
font-size: 14px;
color: var(--nuvo-ink);
word-break: break-word;
}
.nuvo-detail__value--mono { font-family: var(--nuvo-font-mono); font-size: 13px; }
.nuvo-detail__value--strong { font-weight: 600; }
.nuvo-detail--span-2 { grid-column: span 2; }
.nuvo-detail--span-full { grid-column: 1 / -1; }
/* ============================================================================
14. FORM ELEMENTS - DsField, inputs, selects, toggles
============================================================================ */
.nuvo-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.nuvo-field__label {
font-family: var(--nuvo-font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nuvo-ink-mute);
font-weight: 500;
}
.nuvo-field__required { color: var(--nuvo-red); margin-left: 4px; }
.nuvo-field__hint { font-size: 12px; color: var(--nuvo-ink-mute); line-height: 1.45; }
.nuvo-field__error { font-size: 12px; color: var(--nuvo-red); line-height: 1.45; }
.nuvo-input,
.nuvo-textarea,
.nuvo-select {
width: 100%;
padding: 10px 12px;
font-family: var(--nuvo-font-body);
font-size: 14px;
color: var(--nuvo-ink);
background: var(--nuvo-bg);
border: 1px solid var(--nuvo-line-strong);
border-radius: var(--nuvo-radius);
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
appearance: none;
-webkit-appearance: none;
}
.nuvo-input::placeholder,
.nuvo-textarea::placeholder { color: var(--nuvo-ink-faint); }
.nuvo-input:hover,
.nuvo-textarea:hover,
.nuvo-select:hover { border-color: var(--nuvo-ink-mute); }
.nuvo-input:focus,
.nuvo-textarea:focus,
.nuvo-select:focus {
outline: none;
border-color: var(--nuvo-green);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--nuvo-green) 18%, transparent);
}
.nuvo-input:disabled,
.nuvo-textarea:disabled,
.nuvo-select:disabled {
background: var(--nuvo-bg-soft);
color: var(--nuvo-ink-mute);
cursor: not-allowed;
}
.nuvo-input--mono { font-family: var(--nuvo-font-mono); font-size: 13px; }
.nuvo-input--sm { padding: 7px 10px; font-size: 13px; }
.nuvo-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.nuvo-select {
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
}
.nuvo-input--has-error,
.nuvo-textarea--has-error,
.nuvo-select--has-error { border-color: var(--nuvo-red); }
.nuvo-input--has-error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nuvo-red) 18%, transparent); }
/* Search input with leading icon */
.nuvo-search {
position: relative;
display: flex;
align-items: center;
}
.nuvo-search__icon {
position: absolute;
left: 12px;
width: 14px;
height: 14px;
color: var(--nuvo-ink-mute);
pointer-events: none;
}
.nuvo-search .nuvo-input { padding-left: 34px; }
.nuvo-search__hint {
position: absolute;
right: 10px;
font-family: var(--nuvo-font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
color: var(--nuvo-ink-faint);
padding: 2px 6px;
border: 1px solid var(--nuvo-line);
border-radius: 3px;
background: var(--nuvo-bg);
}
/* Checkbox + radio */
.nuvo-check {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--nuvo-ink);
cursor: pointer;
}
.nuvo-check input[type="checkbox"],
.nuvo-check input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--nuvo-line-strong);
border-radius: 3px;
background: var(--nuvo-bg);
display: grid;
place-items: center;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease;
flex: 0 0 16px;
}
.nuvo-check input[type="radio"] { border-radius: 50%; }
.nuvo-check input[type="checkbox"]:checked,
.nuvo-check input[type="radio"]:checked {
background: var(--nuvo-green);
border-color: var(--nuvo-green);
}
.nuvo-check input[type="checkbox"]:checked::after {
content: "";
width: 9px;
height: 5px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
}
.nuvo-check input[type="radio"]:checked::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.nuvo-check input:focus-visible { outline: none; box-shadow: var(--nuvo-focus); }
/* Switch / toggle */
.nuvo-switch {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-size: 14px;
}
.nuvo-switch input { position: absolute; opacity: 0; pointer-events: none; }
.nuvo-switch__track {
width: 36px;
height: 20px;
border-radius: 999px;
background: var(--nuvo-line-strong);
position: relative;
transition: background-color .2s ease;
flex: 0 0 36px;
}
.nuvo-switch__track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
transition: transform .2s ease;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.nuvo-switch input:checked + .nuvo-switch__track { background: var(--nuvo-green); }
.nuvo-switch input:checked + .nuvo-switch__track::after { transform: translateX(16px); }
.nuvo-switch input:focus-visible + .nuvo-switch__track { box-shadow: var(--nuvo-focus); }
/* ============================================================================
15. TOOLBARS, FILTERS, SEGMENTED CONTROLS
============================================================================ */
.nuvo-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 12px 0;
}
.nuvo-toolbar__start,
.nuvo-toolbar__end {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
min-width: 0;
}
/* Segmented pill row - like the invoice filter pills */
.nuvo-segmented {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px;
background: var(--nuvo-bg-soft);
border: 1px solid var(--nuvo-line);
border-radius: 999px;
}
.nuvo-segmented__item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
font-family: var(--nuvo-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
color: var(--nuvo-ink-mute);
background: transparent;
border: none;
border-radius: 999px;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.nuvo-segmented__item:hover { color: var(--nuvo-ink); }
.nuvo-segmented__item.is-active {
background: var(--nuvo-bg-card);
color: var(--nuvo-ink);
box-shadow: var(--nuvo-shadow-sm);
}
.nuvo-segmented__count {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: var(--nuvo-bg-alt);
color: var(--nuvo-ink-mute);
font-size: 10px;
}
.nuvo-segmented__item.is-active .nuvo-segmented__count {
background: var(--nuvo-green-bg);
color: var(--nuvo-green-deep);
}
/* Dense labeled filter grid */
.nuvo-filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px 16px;
padding: 16px;
background: var(--nuvo-bg-soft);
border: 1px solid var(--nuvo-line);
border-radius: var(--nuvo-radius-md);
}
/* ============================================================================
16. BANNERS - DsBanner
============================================================================ */
.nuvo-banner {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 14px;
align-items: start;
padding: 14px 18px;
border: 1px solid var(--nuvo-line);
border-radius: var(--nuvo-radius-md);
background: var(--nuvo-bg-card);
font-size: 13.5px;
color: var(--nuvo-ink);
line-height: 1.5;
}
.nuvo-banner__icon { color: var(--nuvo-ink-mute); margin-top: 2px; }
.nuvo-banner__title { font-weight: 600; margin: 0 0 2px; font-size: 14px; }
.nuvo-banner__body { color: var(--nuvo-ink-soft); }
.nuvo-banner__actions { display: flex; gap: 8px; align-items: center; }
.nuvo-banner--info {
background: var(--nuvo-info-bg);
border-color: color-mix(in srgb, var(--nuvo-info) 30%, var(--nuvo-line));
}
.nuvo-banner--info .nuvo-banner__icon { color: var(--nuvo-info); }
.nuvo-banner--success {
background: var(--nuvo-green-bg);
border-color: color-mix(in srgb, var(--nuvo-green) 30%, var(--nuvo-line));
}
.nuvo-banner--success .nuvo-banner__icon { color: var(--nuvo-green-deep); }
.nuvo-banner--warning {
background: var(--nuvo-orange-bg);
border-color: color-mix(in srgb, var(--nuvo-orange) 35%, var(--nuvo-line));
}
.nuvo-banner--warning .nuvo-banner__icon { color: var(--nuvo-orange); }
.nuvo-banner--danger {
background: var(--nuvo-red-bg);
border-color: color-mix(in srgb, var(--nuvo-red) 35%, var(--nuvo-line));
color: var(--nuvo-red-ink);
}
.nuvo-banner--danger .nuvo-banner__icon { color: var(--nuvo-red); }
/* ============================================================================
17. EMPTY STATE, LOADING STATE
============================================================================ */
.nuvo-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 36px);
text-align: center;
background: var(--nuvo-bg-card);
border: 1px dashed var(--nuvo-line-strong);
border-radius: var(--nuvo-radius-md);
color: var(--nuvo-ink-mute);
}
.nuvo-empty__icon {
width: 40px;
height: 40px;
color: var(--nuvo-ink-faint);
}
.nuvo-empty__title {
font-family: var(--nuvo-font-display);
font-weight: 500;
font-size: 20px;
color: var(--nuvo-ink);
letter-spacing: -0.01em;
}
.nuvo-empty__body {
font-size: 13.5px;
max-width: 44ch;
line-height: 1.55;
}
.nuvo-empty__actions { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.nuvo-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: clamp(36px, 5vw, 56px);
color: var(--nuvo-ink-mute);
font-size: 13.5px;
}
.nuvo-loading__spinner {
width: 18px;
height: 18px;
border: 2px solid var(--nuvo-line-strong);
border-top-color: var(--nuvo-green);
border-radius: 50%;
animation: nuvo-spin .7s linear infinite;
}
@keyframes nuvo-spin { to { transform: rotate(360deg); } }
/* ============================================================================
18. MODAL, DRAWER, CONFIRM DIALOG
============================================================================ */
.nuvo-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(20, 21, 15, 0.46);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 1000;
display: grid;
place-items: center;
padding: 20px;
animation: nuvo-fade-in .18s ease;
}
@keyframes nuvo-fade-in { from { opacity: 0; } to { opacity: 1; } }
.nuvo-modal {
width: 100%;
max-width: 560px;
background: var(--nuvo-bg-card);
border: 1px solid var(--nuvo-line-strong);
border-radius: var(--nuvo-radius-lg);
box-shadow: var(--nuvo-shadow-lg);
display: flex;
flex-direction: column;
max-height: calc(100vh - 40px);
animation: nuvo-modal-in .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes nuvo-modal-in {
from { opacity: 0; transform: translateY(8px) scale(.98); }
to { opacity: 1; transform: none; }
}
.nuvo-modal--sm { max-width: 420px; }
.nuvo-modal--lg { max-width: 760px; }
.nuvo-modal--xl { max-width: 960px; }
.nuvo-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 20px 24px 14px;
border-bottom: 1px solid var(--nuvo-line);
}
.nuvo-modal__title {
font-family: var(--nuvo-font-display);
font-weight: 500;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--nuvo-ink);
}
.nuvo-modal__kicker { /* uses .nuvo-eyebrow */ display: block; margin-bottom: 4px; }
.nuvo-modal__body {
padding: 20px 24px;
overflow: auto;
flex: 1 1 auto;
font-size: 14px;
line-height: 1.55;
color: var(--nuvo-ink-soft);
}
.nuvo-modal__footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 14px 24px 20px;
border-top: 1px solid var(--nuvo-line);
background: var(--nuvo-bg-soft);
}
/* Side drawer */
.nuvo-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(20, 21, 15, 0.46);
z-index: 1000;
animation: nuvo-fade-in .18s ease;
}
.nuvo-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(440px, 100vw);
background: var(--nuvo-bg-card);
border-left: 1px solid var(--nuvo-line-strong);
box-shadow: var(--nuvo-shadow-lg);
z-index: 1001;
display: flex;
flex-direction: column;
animation: nuvo-drawer-in .25s cubic-bezier(.2,.7,.3,1);
}
@keyframes nuvo-drawer-in {
from { transform: translateX(20px); opacity: 0; }
to { transform: none; opacity: 1; }
}
.nuvo-drawer--lg { width: min(640px, 100vw); }
.nuvo-drawer__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 18px 22px;
border-bottom: 1px solid var(--nuvo-line);
}
.nuvo-drawer__body { padding: 18px 22px; flex: 1 1 auto; overflow: auto; }
.nuvo-drawer__footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 14px 22px 18px;
border-top: 1px solid var(--nuvo-line);
background: var(--nuvo-bg-soft);
}
/* ============================================================================
19. DROP ZONE - DsDropZonePanel wrapper
============================================================================ */
.nuvo-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: clamp(28px, 4vw, 44px);
background: var(--nuvo-bg-soft);
border: 1.5px dashed var(--nuvo-line-strong);
border-radius: var(--nuvo-radius-md);
text-align: center;
color: var(--nuvo-ink-mute);
transition: border-color .2s ease, background-color .2s ease;
cursor: pointer;
}
.nuvo-dropzone:hover,
.nuvo-dropzone.is-active {
border-color: var(--nuvo-green);
background: var(--nuvo-green-bg);
color: var(--nuvo-green-deep);
}
.nuvo-dropzone__icon { width: 32px; height: 32px; color: currentColor; }
.nuvo-dropzone__title { font-weight: 600; font-size: 14px; color: var(--nuvo-ink); }
.nuvo-dropzone__hint { font-size: 12.5px; }
/* ============================================================================
20. PROGRESS / BAR / SPARKLINE PRIMITIVES
============================================================================ */
.nuvo-progress {
width: 100%;
height: 6px;
background: var(--nuvo-line);
border-radius: 999px;
overflow: hidden;
}
.nuvo-progress__bar {
height: 100%;
background: var(--nuvo-green);
border-radius: inherit;
transition: width .5s cubic-bezier(.2,.7,.3,1);
}
.nuvo-progress__bar--warning { background: var(--nuvo-orange); }
.nuvo-progress__bar--danger { background: var(--nuvo-red); }
.nuvo-progress__bar--accent { background: var(--nuvo-lavender); }
.nuvo-progress-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--nuvo-line);
font-size: 13px;
}
.nuvo-progress-row:last-child { border-bottom: none; }
.nuvo-progress-row__label { color: var(--nuvo-ink); font-weight: 500; }
.nuvo-progress-row__value {
font-family: var(--nuvo-font-mono);
font-size: 12.5px;
color: var(--nuvo-ink-soft);
text-align: right;
white-space: nowrap;
}
.nuvo-progress-row__bar { grid-column: 1 / -1; margin-top: 4px; }
/* ============================================================================
21. ACCURACY / RANKED LIST ROW - accuracy/results style row
============================================================================
Mirror of .acc-row from the marketing site. Use for ranked results, vendor
accuracy lists, top-vendor widgets, validation summaries. */
.nuvo-rank-row {
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--nuvo-line);
align-items: center;
}
.nuvo-rank-row:last-child { border-bottom: none; }
.nuvo-rank-row__icon { color: var(--nuvo-green); }
.nuvo-rank-row__name { font-weight: 600; font-size: 14px; margin: 0 0 2px; color: var(--nuvo-ink); }
.nuvo-rank-row__sub { color: var(--nuvo-ink-mute); font-size: 12.5px; }
.nuvo-rank-row__pct {
font-family: var(--nuvo-font-display);
font-size: 22px;
font-weight: 500;
color: var(--nuvo-green);
}
.nuvo-rank-row--warn .nuvo-rank-row__icon,
.nuvo-rank-row--warn .nuvo-rank-row__pct { color: var(--nuvo-orange); }
.nuvo-rank-row--danger .nuvo-rank-row__icon,
.nuvo-rank-row--danger .nuvo-rank-row__pct { color: var(--nuvo-red); }
.nuvo-rank-row--best {
background: var(--nuvo-green-bg);
margin: 0 -24px;
padding-left: 24px;
padding-right: 24px;
border-bottom: none;
border-radius: var(--nuvo-radius);
}
/* ============================================================================
22. BREADCRUMB
============================================================================ */
.nuvo-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-family: var(--nuvo-font-mono);
font-size: 11.5px;
letter-spacing: 0.06em;
color: var(--nuvo-ink-mute);
margin-bottom: 14px;
}
.nuvo-breadcrumb a { color: var(--nuvo-ink-mute); transition: color .15s ease; }
.nuvo-breadcrumb a:hover { color: var(--nuvo-ink); }
.nuvo-breadcrumb__sep { opacity: .5; }
.nuvo-breadcrumb__current { color: var(--nuvo-ink); font-weight: 500; }
/* ============================================================================
23. QUOTE / CALLOUT - for case studies, change-request notes, audit entries
============================================================================ */
.nuvo-quote {
border-left: 2px solid var(--nuvo-green);
padding: 4px 0 4px 14px;
font-size: 13.5px;
color: var(--nuvo-ink-soft);
font-style: italic;
max-width: 60ch;
}
.nuvo-quote--accent { border-color: var(--nuvo-lavender); }
.nuvo-quote--warning { border-color: var(--nuvo-orange); }
.nuvo-quote--danger { border-color: var(--nuvo-red); }
/* ============================================================================
24. STAGE TRACK - Workflow Studio stage cards
============================================================================ */
.nuvo-stage-track {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
background: var(--nuvo-bg-card);
border: 1px solid var(--nuvo-line);
border-radius: var(--nuvo-radius-md);
overflow: hidden;
}
.nuvo-stage {
padding: 16px 20px;
border-right: 1px solid var(--nuvo-line);
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
background: var(--nuvo-bg-card);
transition: background-color .2s ease;
cursor: pointer;
}
.nuvo-stage:last-child { border-right: none; }
.nuvo-stage:hover { background: var(--nuvo-bg-soft); }
.nuvo-stage__step {
font-family: var(--nuvo-font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nuvo-ink-faint);
}
.nuvo-stage__title { font-size: 14px; font-weight: 600; color: var(--nuvo-ink); }
.nuvo-stage__meta { font-size: 12px; color: var(--nuvo-ink-mute); }
.nuvo-stage.is-complete .nuvo-stage__step { color: var(--nuvo-green-deep); }
.nuvo-stage.is-complete::after {
content: "";
position: absolute;
top: 12px;
right: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--nuvo-green);
}
.nuvo-stage.is-active {
background: var(--nuvo-lavender-bg);
}
.nuvo-stage.is-active .nuvo-stage__step { color: var(--nuvo-lavender-ink); }
.nuvo-stage.is-active::after {
content: "";
position: absolute;
top: 12px;
right: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--nuvo-lavender);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--nuvo-lavender) 30%, transparent);
}
/* ============================================================================
25. CONFIDENCE BAR - invoice extraction confidence, vendor match scores
============================================================================ */
.nuvo-conf-bar {
position: relative;
width: 100%;
height: 4px;
background: var(--nuvo-line);
border-radius: 999px;
overflow: hidden;
}
.nuvo-conf-bar > span {
display: block;
height: 100%;
background: var(--nuvo-green);
border-radius: inherit;
transition: width .5s cubic-bezier(.2,.7,.3,1);
width: var(--conf, 0%);
}
.nuvo-conf-bar--warn > span { background: var(--nuvo-orange); }
.nuvo-conf-bar--low > span { background: var(--nuvo-red); }
/* ============================================================================
26. DASHBOARD WIDGET FRAME - WidgetCard, dashboard composition
============================================================================
Standard frame for every dashboard widget. Composes a card-style frame
with a fixed header strip, scrollable body, optional footer, and a
"unavailable" overlay state. */
.nuvo-widget {
background: var(--nuvo-bg-card);
border: 1px solid var(--nuvo-line);
border-radius: var(--nuvo-radius-md);
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
overflow: hidden;
}
.nuvo-widget--flush { padding: 0; }
.nuvo-widget__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 14px 18px 12px;
border-bottom: 1px solid var(--nuvo-line);
background: var(--nuvo-bg-card);
}
.nuvo-widget__title {
font-family: var(--nuvo-font-body);
font-weight: 600;
font-size: 14px;
color: var(--nuvo-ink);
letter-spacing: -0.005em;
}
.nuvo-widget__subtitle {
font-size: 12px;
color: var(--nuvo-ink-mute);
margin-top: 2px;
line-height: 1.45;
}
.nuvo-widget__kicker { /* uses .nuvo-eyebrow */ }
.nuvo-widget__actions { display: flex; gap: 6px; align-items: center; }
.nuvo-widget__body {
padding: 16px 18px;
flex: 1 1 auto;
min-height: 0;
}
.nuvo-widget__body--flush { padding: 0; }
.nuvo-widget__footer {
padding: 10px 18px;
border-top: 1px solid var(--nuvo-line);
background: var(--nuvo-bg-soft);
font-size: 12px;
color: var(--nuvo-ink-mute);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.nuvo-widget--unavailable .nuvo-widget__body {
display: grid;
place-items: center;
text-align: center;
color: var(--nuvo-ink-mute);
font-size: 13px;
padding: 32px 18px;
}
/* ============================================================================
27. NAVIGATION SHELL - top bar for /exec or app frame
============================================================================ */
.nuvo-nav {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--nuvo-bg) 88%, transparent);
backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid var(--nuvo-line);
}
.nuvo-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 64px;
padding: 0 var(--nuvo-pad-x);
max-width: var(--nuvo-container);
margin: 0 auto;
}
.nuvo-nav__brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--nuvo-font-display);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.05;
color: var(--nuvo-ink);
}
.nuvo-nav__brand-mark { width: 22px; height: 22px; color: var(--nuvo-green); }
.nuvo-nav__links {
display: flex;
align-items: center;
gap: 30px;
}
.nuvo-nav__link {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--nuvo-ink-soft);
transition: color .15s ease;
}
.nuvo-nav__link:hover { color: var(--nuvo-ink); }
.nuvo-nav__link.is-active { color: var(--nuvo-ink); position: relative; }
.nuvo-nav__link.is-active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -22px;
height: 2px;
background: var(--nuvo-green);
}
.nuvo-nav__cta { display: flex; align-items: center; gap: 14px; }
/* ============================================================================
28. OPERATOR CHIP / USER STAMP - small avatar+name pill
============================================================================ */
.nuvo-operator {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
background: var(--nuvo-bg-card);
border: 1px solid var(--nuvo-line);
border-radius: 999px;
font-size: 12.5px;
}
.nuvo-operator__avatar {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--nuvo-lavender-bg);
color: var(--nuvo-lavender-ink);
display: grid;
place-items: center;
font-family: var(--nuvo-font-mono);
font-size: 10px;
font-weight: 600;
}
.nuvo-operator__name { color: var(--nuvo-ink); font-weight: 500; }
.nuvo-operator__role {
color: var(--nuvo-ink-mute);
font-family: var(--nuvo-font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ============================================================================
29. REVEAL ANIMATIONS - for staggered page entry
============================================================================ */
.nuvo-reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.nuvo-reveal.is-in { opacity: 1; transform: none; }
.nuvo-reveal-stagger > * {
opacity: 0;
transform: translateY(14px);
transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.nuvo-reveal-stagger.is-in > * { opacity: 1; transform: none; }
.nuvo-reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0s; }
.nuvo-reveal-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
.nuvo-reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
.nuvo-reveal-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }
.nuvo-reveal-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }
.nuvo-reveal-stagger.is-in > *:nth-child(6) { transition-delay: .40s; }
/* ============================================================================
30. RESPONSIVE OVERRIDES - collapse multi-col grids gracefully
============================================================================ */
@media (max-width: 880px) {
.nuvo-page-header__row { flex-direction: column; align-items: flex-start; }
.nuvo-page-header__actions { width: 100%; }
}
@media (max-width: 640px) {
.nuvo-btn { padding: 12px 16px; }
.nuvo-btn--block { padding: 16px 18px; }
.nuvo-detail-grid--2,
.nuvo-detail-grid--3 { grid-template-columns: 1fr; }
.nuvo-modal { max-height: calc(100vh - 24px); }
}
/* ============================================================================
31. REDUCED MOTION
============================================================================ */
@media (prefers-reduced-motion: reduce) {
.nuvo *, .nuvo *::before, .nuvo *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
}
/* ============================================================================
32. PRINT - strip borders/colors for clean printouts
============================================================================ */
@media print {
.nuvo { background: white; color: black; }
.nuvo-btn, .nuvo-icon-btn, .nuvo-nav { display: none !important; }
.nuvo-card, .nuvo-widget, .nuvo-table-wrap { border-color: #ccc; box-shadow: none; }
}