/* ============================================================
ix-modals-v1.0.1.css
INBXIFY — Canonical modal + banner design system
Single source of truth for overlay, modal shell, and banner
strip patterns across T-A.
PARALLEL TO ix-buttons. Same philosophy: one module owns one
visual domain, consumed additively, migrate legacy at leisure.
THREE PRIMITIVES:
ix-overlay Full-page backdrop (centers child modal)
ix-modal Modal card shell (head / body / footer)
ix-modal-banner Alert strip pattern (--alert / --info / --success)
+ --compact size modifier (added v1.0.1)
v1.0.1 CHANGELOG (April 29, 2026 — S14 Step 1):
Adds ix-modal-banner--compact size variant. Renders the
banner as a chip-sized inline pill (~32px tall) suitable
for placement inside chrome header rows. Used by Studio
header for the PDF triage banner — sits right-justified
beside the title block, doesn't push tagline down.
Standard banner (v1.0.0 default) remains unchanged. The
--compact modifier is opt-in and cleanly composes with
the existing --alert / --info / --success variants.
No breaking changes. v1.0.0 consumers (uploads-processor
v1.0.11 banner, future modals) keep working as-is.
STRUCTURE:
(gold accent strip, decorative)
Title
Subtitle
…
STANDALONE BANNER (page-level, not inside modal):
📕3 PDFs awaiting decision
The banner is named ix-modal-banner because conceptually it's
the same alert-strip pattern modals use internally. Page-level
banners and modal-internal banners share the same visual
language and the same class set. The "modal" in the name
describes the pattern's lineage, not where it's allowed to
render — banners can sit anywhere on the page.
LOAD ORDER (Webflow ):
1. webflow.css
2. title-admin-page-design-v1.4.x.css (design tokens)
3. ta-studio-components-v1.0.x.css (component-specific)
4. ix-buttons-v1.0.x.css
5. ix-modals-v1.0.0.css ← THIS FILE
6. (page-specific overrides)
This file MUST load after the design tokens (it consumes
--ix-* CSS vars) AND after ix-buttons (so any button styling
it uses internally is already defined).
Authored 2026-04-29 as Sub-session B / S14 Step 2.
New module — no prior versions.
COEXISTENCE WITH cm-modal/cm-overlay:
ta-studio + uploads-processor v1.0.10 still emit cm-modal /
cm-overlay. Those classes are NOT touched by this module.
New consumers (uploads-processor v1.0.11 triage modal,
Sub-session C conflict modal, TD-161 Save-as-Component)
emit ix-* classes. cm-* migrations are tech debt, deferred.
============================================================ */
/* ─────────────────────────────────────────────
§1 ix-overlay — full-page backdrop
Centers a single child .ix-modal.
Mount target convention: appended to with
id="ix-modal-root" by the consuming JS.
───────────────────────────────────────────── */
.ix-overlay {
position: fixed !important;
inset: 0 !important;
z-index: var(--ix-z-modal, 10000) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 24px !important;
background: rgba(26, 58, 58, 0.55) !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
animation: ix-overlay-in 0.18s ease-out !important;
}
@keyframes ix-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ─────────────────────────────────────────────
§2 ix-modal — modal card shell
───────────────────────────────────────────── */
.ix-modal {
position: relative !important;
width: 100% !important;
max-width: 720px !important;
max-height: calc(100vh - 48px) !important;
display: flex !important;
flex-direction: column !important;
background: var(--ix-white, #ffffff) !important;
border-radius: var(--ix-radius, 12px) !important;
box-shadow: 0 20px 60px rgba(26, 58, 58, 0.25) !important;
overflow: hidden !important;
animation: ix-modal-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.05) !important;
}
@keyframes ix-modal-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Decorative gold accent strip at top of modal */
.ix-modal-bar {
height: 3px !important;
background: linear-gradient(90deg, var(--ix-gold, #C4A35A) 0%, var(--ix-gold-light, #E8C172) 100%) !important;
flex: 0 0 auto !important;
}
.ix-modal-head {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 16px !important;
padding: 18px 22px 14px !important;
border-bottom: 1px solid var(--ix-border-soft, #eee9dc) !important;
flex: 0 0 auto !important;
}
.ix-modal-title-block {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.ix-modal-title {
font-family: var(--ix-font-display, 'Fraunces', serif) !important;
font-size: 20px !important;
font-weight: 600 !important;
color: var(--ix-text-dark, #1e2a3a) !important;
line-height: 1.2 !important;
margin: 0 !important;
}
.ix-modal-sub {
font-family: var(--ix-font-mono, 'DM Mono', monospace) !important;
font-size: 10px !important;
font-weight: 500 !important;
color: var(--ix-text-light, #8a8e9a) !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
margin-top: 4px !important;
}
.ix-modal-body {
padding: 18px 22px !important;
overflow-y: auto !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
.ix-modal-footer {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 14px 22px !important;
background: var(--ix-cream, #FAF9F5) !important;
border-top: 1px solid var(--ix-border-soft, #eee9dc) !important;
flex: 0 0 auto !important;
}
.ix-modal-footer-right {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.ix-modal-footer-info {
font-family: var(--ix-font-mono, 'DM Mono', monospace) !important;
font-size: 11px !important;
color: var(--ix-text-mid, #5a6478) !important;
letter-spacing: 0.04em !important;
}
/* Locked state — applied during async commit (apply / save).
Body dims, footer disables. Consuming JS toggles .is-locked. */
.ix-modal.is-locked .ix-modal-body {
opacity: 0.55 !important;
pointer-events: none !important;
}
.ix-modal.is-locked .ix-modal-footer button {
pointer-events: none !important;
}
/* ─────────────────────────────────────────────
§3 ix-modal-banner — alert strip pattern
Used both inside modals (e.g., warning at top of body)
and at page level (e.g., the PDF triage banner in UP).
Variants:
--alert Red — needs attention NOW (PDFs awaiting triage,
save failures)
--info Blue — informational, not blocking
--success Green — confirmation after action
Default (no variant) is neutral cream.
───────────────────────────────────────────── */
.ix-modal-banner {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 16px !important;
border-radius: var(--ix-radius-sm, 8px) !important;
border: 1.5px solid var(--ix-border, #e4e0d4) !important;
background: var(--ix-cream, #FAF9F5) !important;
font-family: var(--ix-font-body, 'DM Sans', sans-serif) !important;
font-size: 13px !important;
color: var(--ix-text-dark, #1e2a3a) !important;
margin-bottom: 14px !important;
}
.ix-modal-banner-icon {
flex: 0 0 auto !important;
font-size: 18px !important;
line-height: 1 !important;
}
.ix-modal-banner-text {
flex: 1 1 auto !important;
font-weight: 500 !important;
line-height: 1.35 !important;
}
.ix-modal-banner-text strong {
font-weight: 700 !important;
color: var(--ix-text-dark, #1e2a3a) !important;
}
.ix-modal-banner button.ix-btn,
.ix-modal-banner .ix-btn {
flex: 0 0 auto !important;
}
/* ── Variant: --alert (red, attention-needed) ── */
.ix-modal-banner.ix-modal-banner--alert {
background: linear-gradient(135deg, #fef3f2 0%, #fde9e7 100%) !important;
border-color: #f5b9b4 !important;
color: #8b2418 !important;
box-shadow: 0 1px 3px rgba(192, 57, 43, 0.08) !important;
}
.ix-modal-banner.ix-modal-banner--alert .ix-modal-banner-text strong {
color: #6f1c12 !important;
}
/* Subtle pulse to draw the eye on first appearance.
Animation runs once and stops — not a constant attention-grab. */
.ix-modal-banner.ix-modal-banner--alert.is-fresh {
animation: ix-banner-pulse 1.6s ease-out 1 !important;
}
@keyframes ix-banner-pulse {
0% { box-shadow: 0 1px 3px rgba(192, 57, 43, 0.08); }
35% { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0.14), 0 1px 3px rgba(192, 57, 43, 0.08); }
100% { box-shadow: 0 1px 3px rgba(192, 57, 43, 0.08); }
}
/* ── Variant: --info (blue, informational) ── */
.ix-modal-banner.ix-modal-banner--info {
background: linear-gradient(135deg, #eef3ff 0%, #e3ebff 100%) !important;
border-color: #b8c8ff !important;
color: #1f3a8a !important;
}
.ix-modal-banner.ix-modal-banner--info .ix-modal-banner-text strong {
color: #142a6b !important;
}
/* ── Variant: --success (green, confirmation) ── */
.ix-modal-banner.ix-modal-banner--success {
background: linear-gradient(135deg, #effbf2 0%, #e0f5e6 100%) !important;
border-color: #a8d8b4 !important;
color: #1c5a30 !important;
}
.ix-modal-banner.ix-modal-banner--success .ix-modal-banner-text strong {
color: #0e3e1d !important;
}
/* ─────────────────────────────────────────────
§4 ix-modal-row — shared row pattern
Used in modals that present a list of items each
needing a per-row decision (triage, conflict-resolve,
pre-flight check). Optional. Consumers can roll their
own row layout if this doesn't fit.
Sets up the .has-pending convention for dirty rows
(Universal Rule 2 — gold border on dirty fields).
───────────────────────────────────────────── */
.ix-modal-row {
display: grid !important;
grid-template-columns: 28px 1fr auto !important;
gap: 10px !important;
align-items: center !important;
padding: 10px 12px !important;
border: 1.5px solid var(--ix-border, #e4e0d4) !important;
border-radius: var(--ix-radius-sm, 8px) !important;
background: var(--ix-white, #ffffff) !important;
margin-bottom: 6px !important;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
}
.ix-modal-row.has-pending {
border-color: var(--ix-gold, #C4A35A) !important;
background: #fdfcf8 !important;
box-shadow: 0 0 0 3px var(--ix-changed-shadow, rgba(196,163,90,0.20)) !important;
}
.ix-modal-row.is-running {
background: linear-gradient(90deg, #fdfcf8, #fffaee, #fdfcf8) !important;
background-size: 200% 100% !important;
animation: ix-row-shimmer 1.4s linear infinite !important;
}
@keyframes ix-row-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ix-modal-row.is-done {
opacity: 0.55 !important;
background: #f4fbf4 !important;
border-color: #c8e6c8 !important;
}
.ix-modal-row.is-failed {
background: #fef3f2 !important;
border-color: #f5b9b4 !important;
}
.ix-modal-row-icon {
font-size: 18px !important;
text-align: center !important;
line-height: 1 !important;
}
.ix-modal-row-info {
min-width: 0 !important;
}
.ix-modal-row-title {
font-family: var(--ix-font-body, 'DM Sans', sans-serif) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--ix-text-dark, #1e2a3a) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.ix-modal-row-meta {
font-family: var(--ix-font-mono, 'DM Mono', monospace) !important;
font-size: 10px !important;
color: var(--ix-text-light, #8a8e9a) !important;
letter-spacing: 0.02em !important;
margin-top: 2px !important;
display: flex !important;
gap: 8px !important;
align-items: center !important;
flex-wrap: wrap !important;
}
.ix-modal-row-controls {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* Action select inside a row — receives gold border via
.has-pending on the parent row, so the select itself
doesn't need its own dirty-state styling.
Sized for native cross-browser